Skip to content

Commit ddf5c4e

Browse files
mrholekmrholek
committed
refactor: update CSS & SCSS variables
1 parent ab30326 commit ddf5c4e

File tree

4 files changed

+37
-56
lines changed

4 files changed

+37
-56
lines changed

‎scss/_root.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,9 @@
7777
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
7878
// scss-docs-end root-body-variables
7979

80-
--#{$prefix}high-emphasis: #{$high-emphasis};
81-
--#{$prefix}medium-emphasis: #{$medium-emphasis};
82-
--#{$prefix}disabled: #{$disabled};
80+
--#{$prefix}high-emphasis: #{$body-color};
81+
--#{$prefix}medium-emphasis: #{$body-secondary-color};
82+
--#{$prefix}disabled: #{$body-tertiary-color};
8383

8484
--#{$prefix}high-emphasis-inverse: #{$high-emphasis-inverse};
8585
--#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse};
@@ -159,6 +159,10 @@
159159
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
160160
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
161161

162+
--#{$prefix}high-emphasis: #{$body-color-dark};
163+
--#{$prefix}medium-emphasis: #{$body-secondary-color-dark};
164+
--#{$prefix}disabled: #{$body-tertiary-color-dark};
165+
162166
@each $color, $value in $theme-colors-dark {
163167
--#{$prefix}#{$color}: #{$value};
164168
}

‎scss/_variables-dark.scss

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ $body-secondary-bg-dark: $gray-800-dark !default;
9999
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
100100
$body-tertiary-bg-dark: mix($gray-800-dark, #181924, 50%) !default;
101101
$body-emphasis-color-dark: $white !default;
102-
$border-color-dark: $gray-700-dark !default;
103-
$border-color-translucent-dark: rgba($white, .15) !default;
102+
$border-color-dark: $gray-800-dark !default;
103+
$border-color-translucent-dark: rgba($white, .1) !default;
104104
$headings-color-dark: inherit !default;
105105
$link-color-dark: tint-color($primary, 40%) !default;
106106
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
@@ -157,4 +157,13 @@ $button-outline-ghost-variants-dark: (
157157
"warning": btn-outline-color-map($warning-dark),
158158
"info": btn-outline-color-map($info-dark)
159159
) !default;
160+
161+
162+
//
163+
// Sidebar
164+
//
165+
166+
$sidebar-bg-dark: $body-bg-dark !default;
167+
$sidebar-border-width-dark: var(--#{$prefix}border-width) !default;
168+
$sidebar-border-color-dark: var(--#{$prefix}border-color) !default;
160169
// scss-docs-end sass-dark-mode-vars

‎scss/_variables.scss

Lines changed: 9 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
// scss-docs-start gray-color-variables
99
$white: #fff !default;
10-
$gray-base: #101318 !default;
10+
$gray-base: #323a49 !default;
1111
$gray-100: #f3f4f7 !default;
1212
$gray-200: #e7eaee !default;
1313
$gray-300: #dbdfe6 !default;
@@ -306,48 +306,6 @@ $cyans: (
306306
) !default;
307307
// fusv-enable
308308

309-
// // fusv-disable
310-
// $primary-darker: #1f1498 !default;
311-
// $primary-base: #321fdb !default;
312-
// $primary-50: #988fed !default;
313-
// $primary-25: #ccc7f6 !default;
314-
315-
// $secondary-darker: #212233 !default;
316-
// $secondary-base: #9da5b1 !default;
317-
// $secondary-50: #9da5b1 !default;
318-
// $secondary-25: #ced2d8 !default;
319-
320-
// $success-darker: #0f5722 !default;
321-
// $success-base: #2eb85c !default;
322-
// $success-50: #96dbad !default;
323-
// $success-25: #cbedd6 !default;
324-
325-
// $info-darker: #184c77 !default;
326-
// $info-base: #39f !default;
327-
// $info-50: #80c6ff !default;
328-
// $info-25: #c0e6ff !default;
329-
330-
// $warning-darker: #764705 !default;
331-
// $warning-base: #f9b115 !default;
332-
// $warning-50: #fcd88a !default;
333-
// $warning-25: #feecc5 !default;
334-
335-
// $danger-darker: #671414 !default;
336-
// $danger-base: #e55353 !default;
337-
// $danger-50: #f2a9a9 !default;
338-
// $danger-25: #f9d4d4 !default;
339-
340-
// $light-darker: $gray-100 !default;
341-
// $light-base: $gray-100 !default;
342-
// $light-50: shift-color($light-base, -70%) !default;
343-
// $light-25: shift-color($light-base, -80%) !default;
344-
345-
// $dark-darker: $gray-900 !default;
346-
// $dark-base: $gray-900 !default;
347-
// $dark-50: shift-color($dark-base, -70%) !default;
348-
// $dark-25: shift-color($dark-base, -80%) !default;
349-
// // fusv-enable
350-
351309
// scss-docs-start theme-color-variables
352310
$primary: #321fdb !default;
353311
$secondary: #9da5b1 !default;
@@ -496,7 +454,7 @@ $body-color: $high-emphasis !default;
496454
$body-bg: $white !default;
497455

498456
$body-secondary-color: $medium-emphasis !default;
499-
$body-secondary-bg: $gray-100 !default;
457+
$body-secondary-bg: $gray-200 !default;
500458

501459
$body-tertiary-color: $disabled !default;
502460
$body-tertiary-bg: $gray-100 !default;
@@ -1758,7 +1716,7 @@ $header-padding-y: $spacer * .5 !default;
17581716
$header-padding-x: $spacer * .5 !default;
17591717
$header-brand-font-size: $font-size-lg !default;
17601718
$header-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
1761-
$header-bg: $white !default;
1719+
$header-bg: var(--#{$prefix}body-bg) !default;
17621720
$header-border-color: var(--#{$prefix}border-color) !default;
17631721
$header-border-width: var(--#{$prefix}border-width) !default;
17641722
$header-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
@@ -1806,9 +1764,9 @@ $subheader-nav-link-padding-x: .5rem !default;
18061764
// Default theme //TODO: check
18071765
// scss-docs-start subheader-default-themes
18081766
$subheader-bg: $white !default;
1809-
$subheader-color: $medium-emphasis !default;
1810-
$subheader-hover-color: $high-emphasis !default;
1811-
$subheader-active-color: $high-emphasis !default;
1767+
$subheader-color: var(--#{$prefix}secondary-color) !default;
1768+
$subheader-hover-color: var(--#{$prefix}body-color) !default;
1769+
$subheader-active-color: var(--#{$prefix}body-color) !default;
18121770
$subheader-disabled-color: $disabled !default;
18131771
// scss-docs-end subheader-default-themes
18141772

@@ -1897,7 +1855,7 @@ $sidebar-widths: (
18971855
$sidebar-padding-y: 0 !default;
18981856
$sidebar-padding-x: 0 !default;
18991857
$sidebar-color: $high-emphasis-inverse !default;
1900-
$sidebar-bg: $gray-base !default;
1858+
$sidebar-bg: $gray-800 !default;
19011859
$sidebar-border-width: 0 !default;
19021860
$sidebar-border-color: transparent !default;
19031861
$sidebar-transition: margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
@@ -1974,7 +1932,7 @@ $sidebar-toggler-transition: transform .15s !default;
19741932

19751933
$sidebar-toggler-indicator-width: 4rem !default;
19761934
$sidebar-toggler-indicator-height: 3rem !default;
1977-
$sidebar-toggler-indicator-color: $gray-600 !default;
1935+
$sidebar-toggler-indicator-color: $body-secondary-color !default;
19781936
$sidebar-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
19791937
$sidebar-toggler-hover-bg: rgba(0, 0, 0, .3) !default;
19801938
$sidebar-toggler-indicator-hover-color: $sidebar-nav-link-hover-color !default;
@@ -1986,7 +1944,7 @@ $sidebar-toggler-indicator-hover-icon: url("data:image/svg+xml;charset=utf8,
19861944
$footer-min-height: 3rem !default;
19871945
$footer-padding-y: $spacer * .5 !default;
19881946
$footer-padding-x: $spacer !default;
1989-
$footer-bg: $gray-100 !default;
1947+
$footer-bg: var(--#{$prefix}tertiary-bg) !default;
19901948
$footer-color: var(--#{$prefix}body-color) !default;
19911949
$footer-border-width: var(--#{$prefix}border-width) !default;
19921950
$footer-border-color: var(--#{$prefix}border-color) !default;

‎scss/sidebar/_sidebar.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,3 +317,13 @@
317317
@include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
318318
}
319319
}
320+
321+
@if $enable-dark-mode {
322+
@include color-mode(dark) {
323+
.sidebar {
324+
--#{$prefix}sidebar-bg: #{$sidebar-bg-dark};
325+
--#{$prefix}sidebar-border-width: #{$sidebar-border-width-dark};
326+
--#{$prefix}sidebar-border-color: #{$sidebar-border-color-dark};
327+
}
328+
}
329+
}

0 commit comments

Comments
 (0)