Skip to content

Commit 5c098b7

Browse files
mrholekmrholek
committed
refactor: update colors
1 parent 28b3970 commit 5c098b7

File tree

2 files changed

+23
-25
lines changed

2 files changed

+23
-25
lines changed

‎scss/_root.scss

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,25 @@
7575
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
7676
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
7777
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
78-
// scss-docs-end root-body-variables
7978

80-
// --#{$prefix}high-emphasis: #{$body-color};
81-
// --#{$prefix}medium-emphasis: #{$body-secondary-color};
82-
// --#{$prefix}disabled: #{$body-tertiary-color};
79+
--#{$prefix}body-color-dark: #{$body-color-dark};
80+
--#{$prefix}body-color-rgb-dark: #{to-rgb($body-color-dark)};
81+
--#{$prefix}body-bg-dark: #{$body-bg-dark};
82+
--#{$prefix}body-bg-rgb-dark: #{to-rgb($body-bg-dark)};
83+
84+
--#{$prefix}emphasis-color-dark: #{$body-emphasis-color-dark};
85+
--#{$prefix}emphasis-color-rgb-dark: #{to-rgb($body-emphasis-color-dark)};
8386

84-
// --#{$prefix}high-emphasis-inverse: #{$high-emphasis-inverse};
85-
// --#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse};
86-
// --#{$prefix}disabled-inverse: #{$disabled-inverse};
87+
--#{$prefix}secondary-color-dark: #{$body-secondary-color-dark};
88+
--#{$prefix}secondary-color-rgb-dark: #{to-rgb($body-secondary-color-dark)};
89+
--#{$prefix}secondary-bg-dark: #{$body-secondary-bg-dark};
90+
--#{$prefix}secondary-bg-rgb-dark: #{to-rgb($body-secondary-bg-dark)};
91+
92+
--#{$prefix}tertiary-color-dark: #{$body-tertiary-color-dark};
93+
--#{$prefix}tertiary-color-rgb-dark: #{to-rgb($body-tertiary-color-dark)};
94+
--#{$prefix}tertiary-bg-dark: #{$body-tertiary-bg-dark};
95+
--#{$prefix}tertiary-bg-rgb-dark: #{to-rgb($body-tertiary-bg-dark)};
96+
// scss-docs-end root-body-variables
8797

8898
--#{$prefix}heading-color: #{$headings-color};
8999

@@ -159,10 +169,6 @@
159169
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
160170
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
161171

162-
// --#{$prefix}high-emphasis: #{$body-color-dark};
163-
// --#{$prefix}medium-emphasis: #{$body-secondary-color-dark};
164-
// --#{$prefix}disabled: #{$body-tertiary-color-dark};
165-
166172
@each $color, $value in $theme-colors-dark {
167173
--#{$prefix}#{$color}: #{$value};
168174
}

‎scss/_variables.scss

Lines changed: 6 additions & 14 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;
@@ -450,13 +442,13 @@ $position-values: (
450442
// Settings for the `<body>` element.
451443

452444
$body-text-align: null !default;
453-
$body-color: $high-emphasis !default;
445+
$body-color: rgba(shift-color($gray-base, +26%), .95) !default;
454446
$body-bg: $white !default;
455447

456-
$body-secondary-color: $medium-emphasis !default;
448+
$body-secondary-color: rgba(shift-color($gray-base, +26%), .681) !default;
457449
$body-secondary-bg: $gray-200 !default;
458450

459-
$body-tertiary-color: $disabled !default;
451+
$body-tertiary-color: rgba(shift-color($gray-base, +26%), .38) !default;
460452
$body-tertiary-bg: $gray-100 !default;
461453

462454
$body-emphasis-color: $black !default;
@@ -578,7 +570,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
578570
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
579571
// scss-docs-end box-shadow-variables
580572

581-
$component-active-color: $high-emphasis-inverse !default;
573+
$component-active-color: rgba($white, .87) !default;
582574
$component-active-bg: var(--#{$prefix}primary) !default;
583575

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

0 commit comments

Comments
 (0)