Theme color improvements (#37953)

* Use tint-color() and shade-color() functions to generate new color mode adaptive theme values * More consistent shading * Fix callouts use of emphasis variables * Use tint and shade functions on link and code colors for dark mode
twbs · Jan 26, 2023 · 82391bc · 82391bc
1 parent cf6972c
commit 82391bc
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 40 deletions.
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -8,34 +8,34 @@
 
 // scss-docs-start sass-dark-mode-vars
 // scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        $blue-300 !default;
-$secondary-text-emphasis-dark:      $gray-300 !default;
-$success-text-emphasis-dark:        $green-300 !default;
-$info-text-emphasis-dark:           $cyan-300 !default;
-$warning-text-emphasis-dark:        $yellow-300 !default;
-$danger-text-emphasis-dark:         $red-300 !default;
+$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
 $light-text-emphasis-dark:          $gray-100 !default;
 $dark-text-emphasis-dark:           $gray-300 !default;
 // scss-docs-end theme-text-dark-variables
 
 // scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark:            $blue-900 !default;
-$secondary-bg-subtle-dark:          $gray-900 !default;
-$success-bg-subtle-dark:            $green-900 !default;
-$info-bg-subtle-dark:               $cyan-900 !default;
-$warning-bg-subtle-dark:            $yellow-900 !default;
-$danger-bg-subtle-dark:             $red-900 !default;
+$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
 $light-bg-subtle-dark:              $gray-800 !default;
 $dark-bg-subtle-dark:               mix($gray-800, $black) !default;
 // scss-docs-end theme-bg-subtle-dark-variables
 
 // scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark:        $blue-700 !default;
-$secondary-border-subtle-dark:      $gray-700 !default;
-$success-border-subtle-dark:        $green-700 !default;
-$info-border-subtle-dark:           $cyan-800 !default;
-$warning-border-subtle-dark:        $yellow-800 !default;
-$danger-border-subtle-dark:         $red-700 !default;
+$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+$success-border-subtle-dark:        shade-color($success, 40%) !default;
+$info-border-subtle-dark:           shade-color($info, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
 $light-border-subtle-dark:          $gray-700 !default;
 $dark-border-subtle-dark:           $gray-800 !default;
 // scss-docs-end theme-border-subtle-dark-variables
@@ -50,9 +50,9 @@ $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               null !default;
-$link-color-dark:                   $blue-300 !default;
-$link-hover-color-dark:             $blue-200 !default;
-$code-color-dark:                   $pink-300 !default;
+$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark:                   tint-color($code-color, 40%) !default;
 
 
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -322,34 +322,34 @@ $theme-colors: (
 // scss-docs-end theme-colors-map
 
 // scss-docs-start theme-text-variables
-$primary-text-emphasis:   $blue-700 !default;
-$secondary-text-emphasis: $gray-700 !default;
-$success-text-emphasis:   $green-700 !default;
-$info-text-emphasis:      $cyan-800 !default;
-$warning-text-emphasis:   $yellow-800 !default;
-$danger-text-emphasis:    $red-700 !default;
+$primary-text-emphasis:   shade-color($primary, 60%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis:   shade-color($success, 60%) !default;
+$info-text-emphasis:      shade-color($info, 60%) !default;
+$warning-text-emphasis:   shade-color($warning, 60%) !default;
+$danger-text-emphasis:    shade-color($danger, 60%) !default;
 $light-text-emphasis:     $gray-700 !default;
 $dark-text-emphasis:      $gray-700 !default;
 // scss-docs-end theme-text-variables
 
 // scss-docs-start theme-bg-subtle-variables
-$primary-bg-subtle:       $blue-100 !default;
-$secondary-bg-subtle:     $gray-100 !default;
-$success-bg-subtle:       $green-100 !default;
-$info-bg-subtle:          $cyan-100 !default;
-$warning-bg-subtle:       $yellow-100 !default;
-$danger-bg-subtle:        $red-100 !default;
+$primary-bg-subtle:       tint-color($primary, 80%) !default;
+$secondary-bg-subtle:     tint-color($secondary, 80%) !default;
+$success-bg-subtle:       tint-color($success, 80%) !default;
+$info-bg-subtle:          tint-color($info, 80%) !default;
+$warning-bg-subtle:       tint-color($warning, 80%) !default;
+$danger-bg-subtle:        tint-color($danger, 80%) !default;
 $light-bg-subtle:         mix($gray-100, $white) !default;
 $dark-bg-subtle:          $gray-400 !default;
 // scss-docs-end theme-bg-subtle-variables
 
 // scss-docs-start theme-border-subtle-variables
-$primary-border-subtle:   $blue-200 !default;
-$secondary-border-subtle: $gray-200 !default;
-$success-border-subtle:   $green-200 !default;
-$info-border-subtle:      $cyan-200 !default;
-$warning-border-subtle:   $yellow-200 !default;
-$danger-border-subtle:    $red-200 !default;
+$primary-border-subtle:   tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle:   tint-color($success, 60%) !default;
+$info-border-subtle:      tint-color($info, 60%) !default;
+$warning-border-subtle:   tint-color($warning, 60%) !default;
+$danger-border-subtle:    tint-color($danger, 60%) !default;
 $light-border-subtle:     $gray-200 !default;
 $dark-border-subtle:      $gray-500 !default;
 // scss-docs-end theme-border-subtle-variables

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
@@ -33,7 +33,7 @@
 // Variations
 @each $variant in $bd-callout-variants {
   .bd-callout-#{$variant} {
-    --bd-callout-color: var(--bs-#{$variant}-text);
+    --bd-callout-color: var(--bs-#{$variant}-text-emphasis);
     --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
     --bd-callout-border: var(--bs-#{$variant}-border-subtle);
   }