rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Theme color improvements (#37953)

Browse Source 
* 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
This commit is contained in:
Mark Otto 2023-01-25 18:11:22 -08:00 committed by GitHub
parent cf6972ccf1
commit 82391bc7b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
scss/_variables-dark.scss
View File

@ -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;
//

36
scss/_variables.scss
View File

@ -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

2
site/assets/scss/_callouts.scss
View File

@ -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);
}