Skip to content

Commit 82391bc

Browse files
mdomdo
authoredJan 26, 2023
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
·
v5.3.3v5.3.0-alpha2
1 parent cf6972c commit 82391bc

File tree

3 files changed

+40
-40
lines changed

3 files changed

+40
-40
lines changed
 

‎scss/_variables-dark.scss

+21-21
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,34 @@
88

99
// scss-docs-start sass-dark-mode-vars
1010
// scss-docs-start theme-text-dark-variables
11-
$primary-text-emphasis-dark: $blue-300 !default;
12-
$secondary-text-emphasis-dark: $gray-300 !default;
13-
$success-text-emphasis-dark: $green-300 !default;
14-
$info-text-emphasis-dark: $cyan-300 !default;
15-
$warning-text-emphasis-dark: $yellow-300 !default;
16-
$danger-text-emphasis-dark: $red-300 !default;
11+
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
12+
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
13+
$success-text-emphasis-dark: tint-color($success, 40%) !default;
14+
$info-text-emphasis-dark: tint-color($info, 40%) !default;
15+
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
16+
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
1717
$light-text-emphasis-dark: $gray-100 !default;
1818
$dark-text-emphasis-dark: $gray-300 !default;
1919
// scss-docs-end theme-text-dark-variables
2020

2121
// scss-docs-start theme-bg-subtle-dark-variables
22-
$primary-bg-subtle-dark: $blue-900 !default;
23-
$secondary-bg-subtle-dark: $gray-900 !default;
24-
$success-bg-subtle-dark: $green-900 !default;
25-
$info-bg-subtle-dark: $cyan-900 !default;
26-
$warning-bg-subtle-dark: $yellow-900 !default;
27-
$danger-bg-subtle-dark: $red-900 !default;
22+
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
23+
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
24+
$success-bg-subtle-dark: shade-color($success, 80%) !default;
25+
$info-bg-subtle-dark: shade-color($info, 80%) !default;
26+
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
27+
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
2828
$light-bg-subtle-dark: $gray-800 !default;
2929
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
3030
// scss-docs-end theme-bg-subtle-dark-variables
3131

3232
// scss-docs-start theme-border-subtle-dark-variables
33-
$primary-border-subtle-dark: $blue-700 !default;
34-
$secondary-border-subtle-dark: $gray-700 !default;
35-
$success-border-subtle-dark: $green-700 !default;
36-
$info-border-subtle-dark: $cyan-800 !default;
37-
$warning-border-subtle-dark: $yellow-800 !default;
38-
$danger-border-subtle-dark: $red-700 !default;
33+
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
34+
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
35+
$success-border-subtle-dark: shade-color($success, 40%) !default;
36+
$info-border-subtle-dark: shade-color($info, 40%) !default;
37+
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
38+
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
3939
$light-border-subtle-dark: $gray-700 !default;
4040
$dark-border-subtle-dark: $gray-800 !default;
4141
// scss-docs-end theme-border-subtle-dark-variables
@@ -50,9 +50,9 @@ $body-emphasis-color-dark: $white !default;
5050
$border-color-dark: $gray-700 !default;
5151
$border-color-translucent-dark: rgba($white, .15) !default;
5252
$headings-color-dark: null !default;
53-
$link-color-dark: $blue-300 !default;
54-
$link-hover-color-dark: $blue-200 !default;
55-
$code-color-dark: $pink-300 !default;
53+
$link-color-dark: tint-color($primary, 40%) !default;
54+
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
55+
$code-color-dark: tint-color($code-color, 40%) !default;
5656

5757

5858
//

‎scss/_variables.scss

+18-18
Original file line numberDiff line numberDiff line change
@@ -322,34 +322,34 @@ $theme-colors: (
322322
// scss-docs-end theme-colors-map
323323

324324
// scss-docs-start theme-text-variables
325-
$primary-text-emphasis: $blue-700 !default;
326-
$secondary-text-emphasis: $gray-700 !default;
327-
$success-text-emphasis: $green-700 !default;
328-
$info-text-emphasis: $cyan-800 !default;
329-
$warning-text-emphasis: $yellow-800 !default;
330-
$danger-text-emphasis: $red-700 !default;
325+
$primary-text-emphasis: shade-color($primary, 60%) !default;
326+
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
327+
$success-text-emphasis: shade-color($success, 60%) !default;
328+
$info-text-emphasis: shade-color($info, 60%) !default;
329+
$warning-text-emphasis: shade-color($warning, 60%) !default;
330+
$danger-text-emphasis: shade-color($danger, 60%) !default;
331331
$light-text-emphasis: $gray-700 !default;
332332
$dark-text-emphasis: $gray-700 !default;
333333
// scss-docs-end theme-text-variables
334334

335335
// scss-docs-start theme-bg-subtle-variables
336-
$primary-bg-subtle: $blue-100 !default;
337-
$secondary-bg-subtle: $gray-100 !default;
338-
$success-bg-subtle: $green-100 !default;
339-
$info-bg-subtle: $cyan-100 !default;
340-
$warning-bg-subtle: $yellow-100 !default;
341-
$danger-bg-subtle: $red-100 !default;
336+
$primary-bg-subtle: tint-color($primary, 80%) !default;
337+
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
338+
$success-bg-subtle: tint-color($success, 80%) !default;
339+
$info-bg-subtle: tint-color($info, 80%) !default;
340+
$warning-bg-subtle: tint-color($warning, 80%) !default;
341+
$danger-bg-subtle: tint-color($danger, 80%) !default;
342342
$light-bg-subtle: mix($gray-100, $white) !default;
343343
$dark-bg-subtle: $gray-400 !default;
344344
// scss-docs-end theme-bg-subtle-variables
345345

346346
// scss-docs-start theme-border-subtle-variables
347-
$primary-border-subtle: $blue-200 !default;
348-
$secondary-border-subtle: $gray-200 !default;
349-
$success-border-subtle: $green-200 !default;
350-
$info-border-subtle: $cyan-200 !default;
351-
$warning-border-subtle: $yellow-200 !default;
352-
$danger-border-subtle: $red-200 !default;
347+
$primary-border-subtle: tint-color($primary, 60%) !default;
348+
$secondary-border-subtle: tint-color($secondary, 60%) !default;
349+
$success-border-subtle: tint-color($success, 60%) !default;
350+
$info-border-subtle: tint-color($info, 60%) !default;
351+
$warning-border-subtle: tint-color($warning, 60%) !default;
352+
$danger-border-subtle: tint-color($danger, 60%) !default;
353353
$light-border-subtle: $gray-200 !default;
354354
$dark-border-subtle: $gray-500 !default;
355355
// scss-docs-end theme-border-subtle-variables

‎site/assets/scss/_callouts.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
// Variations
3434
@each $variant in $bd-callout-variants {
3535
.bd-callout-#{$variant} {
36-
--bd-callout-color: var(--bs-#{$variant}-text);
36+
--bd-callout-color: var(--bs-#{$variant}-text-emphasis);
3737
--bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
3838
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
3939
}

0 commit comments

Comments
 (0)
Please sign in to comment.