Skip to content

Commit a6f301e

Browse files
mrholekmrholek
committed
refactor: update colors
1 parent 2069509 commit a6f301e

File tree

3 files changed

+41
-43
lines changed

3 files changed

+41
-43
lines changed

‎scss/_root.scss‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -80,15 +80,25 @@
8080
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
8181
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
8282
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
83-
// scss-docs-end root-body-variables
8483

85-
// --#{$prefix}high-emphasis: #{$body-color};
86-
// --#{$prefix}medium-emphasis: #{$body-secondary-color};
87-
// --#{$prefix}disabled: #{$body-tertiary-color};
84+
--#{$prefix}body-color-dark: #{$body-color-dark};
85+
--#{$prefix}body-color-rgb-dark: #{to-rgb($body-color-dark)};
86+
--#{$prefix}body-bg-dark: #{$body-bg-dark};
87+
--#{$prefix}body-bg-rgb-dark: #{to-rgb($body-bg-dark)};
88+
89+
--#{$prefix}emphasis-color-dark: #{$body-emphasis-color-dark};
90+
--#{$prefix}emphasis-color-rgb-dark: #{to-rgb($body-emphasis-color-dark)};
8891

89-
// --#{$prefix}high-emphasis-inverse: #{$high-emphasis-inverse};
90-
// --#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse};
91-
// --#{$prefix}disabled-inverse: #{$disabled-inverse};
92+
--#{$prefix}secondary-color-dark: #{$body-secondary-color-dark};
93+
--#{$prefix}secondary-color-rgb-dark: #{to-rgb($body-secondary-color-dark)};
94+
--#{$prefix}secondary-bg-dark: #{$body-secondary-bg-dark};
95+
--#{$prefix}secondary-bg-rgb-dark: #{to-rgb($body-secondary-bg-dark)};
96+
97+
--#{$prefix}tertiary-color-dark: #{$body-tertiary-color-dark};
98+
--#{$prefix}tertiary-color-rgb-dark: #{to-rgb($body-tertiary-color-dark)};
99+
--#{$prefix}tertiary-bg-dark: #{$body-tertiary-bg-dark};
100+
--#{$prefix}tertiary-bg-rgb-dark: #{to-rgb($body-tertiary-bg-dark)};
101+
// scss-docs-end root-body-variables
92102

93103
--#{$prefix}heading-color: #{$headings-color};
94104

@@ -166,10 +176,6 @@
166176
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
167177
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
168178

169-
// --#{$prefix}high-emphasis: #{$body-color-dark};
170-
// --#{$prefix}medium-emphasis: #{$body-secondary-color-dark};
171-
// --#{$prefix}disabled: #{$body-tertiary-color-dark};
172-
173179
--#{$prefix}elevation-base-color: 0, 0, 0;
174180

175181
@each $color, $value in $theme-colors-dark {

‎scss/_variables-dark.scss‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -96,43 +96,43 @@ $dark-border-subtle-dark: $gray-800-dark !default;
9696

9797
// scss-docs-start theme-gradients-dark-variables
9898
$primary-gradient-dark: (
99-
"start": desaturate(#321fdb, 20%),
100-
"stop": desaturate(#1f1498, 20%)
99+
"start": desaturate(#5856d6, 10%),
100+
"stop": desaturate(#6f67db, 10%)
101101
) !default;
102102

103103
$secondary-gradient-dark: (
104-
"start": desaturate(#c8d2dc, 20%),
105-
"stop": desaturate($white, 20%)
104+
"start": desaturate(#c8d2dc, 10%),
105+
"stop": desaturate($white, 10%)
106106
) !default;
107107

108108
$light-gradient-dark: (
109-
"start": desaturate(#e3e8ed, 20%),
110-
"stop": desaturate($white, 20%)
109+
"start": desaturate(#e3e8ed, 10%),
110+
"stop": desaturate($white, 10%)
111111
) !default;
112112

113113
$dark-gradient-dark: (
114-
"start": desaturate(#3c4b64, 20%),
115-
"stop": desaturate(#212333, 20%)
114+
"start": desaturate(#3c4b64, 10%),
115+
"stop": desaturate(#212333, 10%)
116116
) !default;
117117

118118
$danger-gradient-dark: (
119-
"start": desaturate(#e55353, 20%),
120-
"stop": desaturate(#d93737, 20%)
119+
"start": desaturate(#e55353, 10%),
120+
"stop": desaturate(#d93737, 10%)
121121
) !default;
122122

123123
$warning-gradient-dark: (
124-
"start": desaturate(#f9b115, 20%),
125-
"stop": desaturate(#f6960b, 20%)
124+
"start": desaturate(#f9b115, 10%),
125+
"stop": desaturate(#f6960b, 10%)
126126
) !default;
127127

128128
$success-gradient-dark: (
129-
"start": desaturate(#2eb85c, 20%),
130-
"stop": desaturate(#1b9e3e, 20%)
129+
"start": desaturate(#2eb85c, 10%),
130+
"stop": desaturate(#1b9e3e, 10%)
131131
) !default;
132132

133133
$info-gradient-dark: (
134-
"start": desaturate(#39f, 20%),
135-
"stop": desaturate(#2982cc, 20%)
134+
"start": desaturate(#39f, 10%),
135+
"stop": desaturate(#2982cc, 10%)
136136
) !default;
137137

138138
$theme-gradients-dark: (

‎scss/_variables.scss‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,6 @@ $grays: (
3636
// scss-docs-end gray-colors-map
3737
// fusv-enable
3838

39-
$high-emphasis: rgba(shift-color($gray-base, +26%), .95) !default;
40-
$medium-emphasis: rgba(shift-color($gray-base, +26%), .681) !default;
41-
$disabled: rgba(shift-color($gray-base, +26%), .38) !default;
42-
43-
$high-emphasis-inverse: rgba($white, .87) !default;
44-
$medium-emphasis-inverse: rgba($white, .6) !default;
45-
$disabled-inverse: rgba($white, .38) !default;
46-
4739
// scss-docs-start color-variables
4840
$blue: #0d6efd !default;
4941
$indigo: #6610f2 !default;
@@ -81,8 +73,8 @@ $colors: (
8173
$min-contrast-ratio: 4.5 !default;
8274

8375
// Customize the light and dark text colors for use in our color contrast function.
84-
$color-contrast-dark: $high-emphasis-inverse !default;
85-
$color-contrast-light: $high-emphasis !default;
76+
$color-contrast-dark: $black !default;
77+
$color-contrast-light: $white !default;
8678

8779
// fusv-disable
8880
$blue-100: tint-color($blue, 80%) !default;
@@ -367,8 +359,8 @@ $dark-border-subtle: $gray-500 !default;
367359

368360
// scss-docs-start theme-gradients
369361
$primary-gradient: (
370-
"start": #321fdb,
371-
"stop": #1f1498
362+
"start": #5856d6,
363+
"stop": #6f67db
372364
) !default;
373365

374366
$secondary-gradient: (
@@ -519,13 +511,13 @@ $elevations: (
519511
// Settings for the `<body>` element.
520512

521513
$body-text-align: null !default;
522-
$body-color: $high-emphasis !default;
514+
$body-color: rgba(shift-color($gray-base, +26%), .95) !default;
523515
$body-bg: $white !default;
524516

525-
$body-secondary-color: $medium-emphasis !default;
517+
$body-secondary-color: rgba(shift-color($gray-base, +26%), .681) !default;
526518
$body-secondary-bg: $gray-200 !default;
527519

528-
$body-tertiary-color: $disabled !default;
520+
$body-tertiary-color: rgba(shift-color($gray-base, +26%), .38) !default;
529521
$body-tertiary-bg: $gray-100 !default;
530522

531523
$body-emphasis-color: $black !default;
@@ -647,7 +639,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
647639
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
648640
// scss-docs-end box-shadow-variables
649641

650-
$component-active-color: $high-emphasis-inverse !default;
642+
$component-active-color: rgba($white, .87) !default;
651643
$component-active-bg: var(--#{$prefix}primary) !default;
652644

653645
// scss-docs-start focus-ring-variables

0 commit comments

Comments
 (0)