Dark mode: Add some Sass variables to handle newly added CSS vars (#2409

)
Orange-OpenSource · Dec 15, 2023 · 11ea5fa · 11ea5fa
1 parent 8ecc3e9
commit 11ea5fa
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 32 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -111,8 +111,8 @@
  --#{$prefix}code-color: #{$code-color};
  --#{$prefix}highlight-color: #{$mark-color};
  --#{$prefix}highlight-bg: #{$mark-bg};
- --#{$prefix}disabled-color: var(--#{$prefix}tertiary-color); // Boosted mod
- --#{$prefix}tertiary-active-bg: #{$gray-400}; // Boosted mod
+ --#{$prefix}disabled-color: #{$disabled-color}; // Boosted mod
+ --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg}; // Boosted mod
 
  // scss-docs-start root-border-var
  --#{$prefix}border-width: #{$border-width};
@@ -152,12 +152,12 @@
  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
  // scss-docs-end root-form-validation-variables
 
- --#{$prefix}form-check-filter: #{$invert-filter}; // Boosted mod
- --#{$prefix}form-check-input-disabled-color: #{$gray-900}; // Boosted mod
+ --#{$prefix}form-check-filter: #{$form-check-filter}; // Boosted mod
+ --#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color}; // Boosted mod
  --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter}; // Boosted mod
  --#{$prefix}form-select-indicator: #{$form-select-indicator}; // Boosted mod
  --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator}; // Boosted mod
- --#{$prefix}form-switch-square-bg: #{$black}; // Boosted mod
+ --#{$prefix}form-switch-square-bg: #{$form-switch-square-bg}; // Boosted mod
 
  // Boosted mod
  // Table-specific styles
@@ -167,10 +167,10 @@
  --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
 
  // Breadcrumb-specific styles
- --#{$prefix}breadcrumb-divider-filter: none;
+ --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter};
 
  // Navigation-specific styles
- --#{$prefix}nav-link-active-color: #{$body-color};
+ --#{$prefix}nav-link-active-color: #{$nav-link-active-color};
  // End mod
 }
 
@@ -235,8 +235,8 @@
  --#{$prefix}code-color: #{$code-color-dark};
  --#{$prefix}highlight-color: #{$mark-color-dark};
  --#{$prefix}highlight-bg: #{$mark-bg-dark};
- --#{$prefix}disabled-color: var(--#{$prefix}tertiary-color); // Boosted mod
- --#{$prefix}tertiary-active-bg: #{$gray-700}; // Boosted mod
+ --#{$prefix}disabled-color: #{$disabled-color-dark}; // Boosted mod
+ --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg-dark}; // Boosted mod
 
  --#{$prefix}border-color: #{$border-color-dark};
  --#{$prefix}border-color-subtle: #{$border-color-subtle-dark}; // Boosted mod
@@ -251,25 +251,25 @@
  --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
  --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
- --#{$prefix}form-check-filter: none; // Boosted mod
- --#{$prefix}form-check-input-disabled-color: #{$gray-700}; // Boosted mod
+ --#{$prefix}form-check-filter: #{$form-check-filter-dark}; // Boosted mod
+ --#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color-dark}; // Boosted mod
  --#{$prefix}form-select-indicator: #{$form-select-indicator-dark}; // Boosted mod
  --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // Boosted mod
  --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter-dark};
- --#{$prefix}form-switch-square-bg: #{$gray-950}; // Boosted mod
+ --#{$prefix}form-switch-square-bg: #{$form-switch-square-bg-dark}; // Boosted mod
 
  // Boosted mod
  // Table-specific styles
- --#{$prefix}table-striped-bg-factor: .135;
- --#{$prefix}table-striped-hover-bg-factor: .855;
- --#{$prefix}table-hover-bg-factor: .135;
- --#{$prefix}table-active-bg-factor: .565;
+ --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark};
+ --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor-dark};
+ --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark};
+ --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor-dark};
 
  // Breadcrumb-specific styles
- --#{$prefix}breadcrumb-divider-filter: #{$invert-filter};
+ --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark};
 
  // Navigation-specific styles
- --#{$prefix}nav-link-active-color: #{$supporting-orange};
+ --#{$prefix}nav-link-active-color: #{$nav-link-active-color-dark};
  // End mod
  // scss-docs-end root-dark-mode-vars
  }

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -80,6 +80,8 @@ $body-secondary-bg-dark: $gray-900 !default; // Boosted mod: instead
 $body-tertiary-color-dark: $gray-700 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
 $body-tertiary-bg-dark: $black !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
 $body-emphasis-color-dark: $white !default; // Boosted mod: instead of `$gray-100`
+$disabled-color-dark: var(--#{$prefix}tertiary-color) !default; // Boosted mod
+$tertiary-active-bg-dark: $gray-700 !default; // Boosted mod
 $border-color-dark: $white !default; // Boosted mod: instead of `$gray-700`
 $border-color-subtle-dark: $gray-700 !default; // Boosted mod
 $border-color-translucent-dark: rgba($white, .15) !default;
@@ -109,20 +111,23 @@ $svg-as-custom-props-dark: (
 // Forms
 //
 
-$form-color-disabled-filter-dark: brightness(0) invert(1) brightness(.4) !default; // Boosted mod
+$form-check-filter-dark: none !default; // Boosted mod
+$form-check-input-disabled-color-dark: $gray-700 !default; // Boosted mod
+$form-color-disabled-filter-dark: brightness(0) invert(1) brightness(.4) !default; // Boosted mod
+$form-switch-square-bg-dark: $gray-950 !default; // Boosted mod
 
 // Boosted mod: no $form-select-indicator-color-dark
-$form-select-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$white}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
-$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$gray-600}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
+$form-select-indicator-dark:  escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$white}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod: instead of Bootstrap svg
+$form-select-disabled-indicator-dark:  escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$gray-600}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // Boosted mod
 
 // Boosted mod: no $form-switch-color-dark
 // Boosted mod: no $form-switch-bg-image-dark
 
 // scss-docs-start form-validation-colors-dark
-$form-valid-color-dark: var(--#{$prefix}success-text-emphasis) !default; // Boosted mod: instead of `$green-300`
-$form-valid-border-color-dark: var(--#{$prefix}success) !default; // Boosted mod: instead of `$green-300`
-$form-invalid-color-dark: var(--#{$prefix}danger-text-emphasis) !default; // Boosted mod: instead of `$red-300`
-$form-invalid-border-color-dark: var(--#{$prefix}danger) !default; // Boosted mod: instead of `$red-300`
+$form-valid-color-dark:  var(--#{$prefix}success-text-emphasis) !default; // Boosted mod: instead of `$green-300`
+$form-valid-border-color-dark:  var(--#{$prefix}success) !default; // Boosted mod: instead of `$green-300`
+$form-invalid-color-dark:  var(--#{$prefix}danger-text-emphasis) !default; // Boosted mod: instead of `$red-300`
+$form-invalid-border-color-dark:  var(--#{$prefix}danger) !default; // Boosted mod: instead of `$red-300`
 // scss-docs-end form-validation-colors-dark
 
 //
@@ -134,4 +139,25 @@ $form-invalid-border-color-dark: var(--#{$prefix}danger) !default; // Boosted
 
 // Boosted mod: no $accordion-button-icon-dark
 // Boosted mod: no $accordion-button-active-icon-dark
+
+//
+// Breadcrumb
+//
+
+$breadcrumb-divider-filter-dark: $invert-filter !default; // Boosted mod
+
+//
+// Navs & Tabs
+//
+
+$nav-link-active-color-dark: $supporting-orange !default; // Boosted mod
+
+//
+// Tables
+//
+
+$table-striped-bg-factor-dark: .135 !default; // Boosted mod
+$table-striped-hover-bg-factor-dark: .855 !default; // Boosted mod
+$table-hover-bg-factor-dark: .135 !default; // Boosted mod
+$table-active-bg-factor-dark: .565 !default; // Boosted mod
 // scss-docs-end sass-dark-mode-vars
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -670,6 +670,8 @@ $box-shadow-inset: null !default; // Boosted mod: instead of `inset 0 1px 2px r
 
 $component-active-color: $black !default;
 $component-active-bg: $supporting-orange !default;
+$disabled-color: var(--#{$prefix}tertiary-color) !default; // Boosted mod
+$tertiary-active-bg: $gray-400 !default; // Boosted mod
 
 // scss-docs-start focus-ring-variables
 $focus-ring-width: .25rem !default;
@@ -1178,6 +1180,7 @@ $form-check-label-padding-top: .4375rem !default; // Boosted mod
 $form-check-label-color: null !default;
 $form-check-label-cursor: null !default;
 $form-check-transition: null !default;
+$form-check-filter: $invert-filter !default; // Boosted mod
 
 $form-check-input-active-filter: null !default;
 $form-check-input-active-bg-color: $component-active-bg !default; // Boosted mod
@@ -1193,7 +1196,7 @@ $form-check-input-checked-color: $component-active-color !default;
 $form-check-input-checked-bg-color: $component-active-bg !default;
 $form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
 $form-check-input-checked-bg-image: var(--#{$prefix}check-icon) !default;
-$form-check-input-disabled-color: var(--#{$prefix}form-check-input-disabled-color) !default; // Boosted mod
+$form-check-input-disabled-color: $gray-900 !default; // Boosted mod
 $form-check-input-disabled-filter: var(--#{$prefix}form-check-filter) !default; // Boosted mod
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
 
@@ -1244,7 +1247,7 @@ $form-switch-bg-square-size: add(1rem, $spacer * .5) !default; // Boosted
 $form-switch-border-radius: null !default; // Boosted mod
 $form-switch-transition: background-position .15s ease-in-out, $transition-focus !default; // Boosted mod
 
-$form-switch-square-bg: var(--#{$prefix}form-switch-square-bg) !default; // Boosted mod
+$form-switch-square-bg: $black !default; // Boosted mod
 $form-switch-bg: $white !default; // Boosted mod
 $form-switch-border-color: $white !default; // Boosted mod
 $form-switch-filter: var(--#{$prefix}form-check-filter) !default; // Boosted mod
@@ -1438,6 +1441,7 @@ $nav-link-font-size: null !default;
 $nav-link-font-weight: $font-weight-bold !default;
 $nav-link-color: inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
+$nav-link-active-color: $body-color !default; // Boosted mod
 $nav-link-transition: null !default; // Boosted mod
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // Boosted mod: no `$nav-link-focus-box-shadow`
@@ -2105,6 +2109,7 @@ $breadcrumb-bg: null !default;
 $breadcrumb-divider-color: $black !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $breadcrumb-active-color: null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14' width='7' height='10'><path d='m-.4 12 2 2 7-7-7-7-2 2 5 5z'/></svg>") !default;
+$breadcrumb-divider-filter: none !default; // Boosted mod
 $breadcrumb-divider-flipped: $breadcrumb-divider !default;
 $breadcrumb-border-radius: null !default;
 // scss-docs-end breadcrumb-variables

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -114,9 +114,9 @@
  // Boosted mod
  &:checked,
  &[type="checkbox"]:indeterminate {
- background-color: $form-check-input-disabled-color;
+ background-color: var(--#{$prefix}form-check-input-disabled-color);
  filter: $form-check-input-disabled-filter;
- border-color: $form-check-input-disabled-color;
+ border-color: var(--#{$prefix}form-check-input-disabled-color);
  }
  // End mod
  }
@@ -154,7 +154,7 @@
 
 .form-switch {
  // Boosted mod
- --#{$prefix}switch-gradient: #{linear-gradient(to right, $form-switch-square-bg $form-switch-bg-square-size, transparent)};
+ --#{$prefix}switch-gradient: #{linear-gradient(to right, var(--#{$prefix}form-switch-square-bg) $form-switch-bg-square-size, transparent)};
 
  min-height: $form-switch-width * .5;
  padding-left: $form-switch-padding-start;
@@ -215,9 +215,9 @@
  }
 
  &:disabled {
- background-color: $form-check-input-disabled-color;
+ background-color: var(--#{$prefix}form-check-input-disabled-color);
  filter: $form-check-input-disabled-filter;
- border-color: $form-check-input-disabled-color;
+ border-color: var(--#{$prefix}form-check-input-disabled-color);
  }
  }