From 245872355fe6c331eae96b6ea1a17007aff1b208 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 8 Jan 2025 18:55:35 +0100 Subject: [PATCH] Add the Bootstrap compatibilities in the doc and the code --- scss/_grid.scss | 2 +- scss/_maps.scss | 48 ++++-- scss/_reboot.scss | 4 +- scss/_root.scss | 144 +++++++++--------- scss/_utilities.scss | 66 ++------ scss/_variables-dark.scss | 64 ++++---- scss/_variables.scss | 67 ++++---- scss/helpers/_color-bg.scss | 29 ++-- scss/helpers/_colored-links.scss | 67 ++++---- site/assets/scss/_colors.scss | 1 - .../content/docs/0.0/customize/color-modes.md | 4 +- .../docs/0.0/helpers/color-background.md | 1 - .../content/docs/0.0/helpers/colored-links.md | 1 - site/content/docs/0.0/utilities/background.md | 7 +- site/content/docs/0.0/utilities/borders.md | 2 +- site/content/docs/0.0/utilities/colors.md | 77 ++++------ site/data/theme-colors.yml | 4 +- .../shortcodes/bootstrap-compatibility.html | 2 +- 18 files changed, 281 insertions(+), 309 deletions(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index ed7e2ea285..efd44a7a1c 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -2,7 +2,7 @@ // // Rows contain your columns. -#{$ouds-root-selector} { +#{$ouds-root-selector} { // OUDS mod: instead of `:root` @each $name, $value in $grid-breakpoints { --#{$prefix}breakpoint-#{$name}: #{$value}; } diff --git a/scss/_maps.scss b/scss/_maps.scss index 63c450f79f..c8d4eb7f82 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -288,12 +288,20 @@ $utilities-colors: $theme-colors-rgb !default; $utilities-text: map-merge( $utilities-colors, ( - "black": to-rgb($black), - "white": to-rgb($white), - "body": to-rgb($body-color) + "primary": var(--#{$prefix}color-content-brand-primary), // OUDS mod + "secondary": var(--#{$prefix}color-content-muted), // OUDS mod + "success": var(--#{$prefix}color-content-status-positive), // OUDS mod + "info": var(--#{$prefix}color-content-status-info), // OUDS mod + "warning": var(--#{$prefix}color-content-status-warning), // OUDS mod + "danger": var(--#{$prefix}color-content-status-negative), // OUDS mod + "light": var(--#{$prefix}color-content-disabled), // OUDS mod + "dark": var(--#{$prefix}color-content-default), // OUDS mod + "black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)` + "white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)` + "body": var(--#{$prefix}color-content-default) // OUDS mod: instead of `to-rgb($body-color)` ) ) !default; -$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; +$utilities-text-colors: $utilities-text !default; // OUDS mod: instead of `map-loop($utilities-text, rgba-css-var, "$key", "text")` $utilities-text-emphasis-colors: ( "primary-emphasis": var(--#{$prefix}primary-text-emphasis), @@ -311,12 +319,20 @@ $utilities-text-emphasis-colors: ( $utilities-bg: map-merge( $utilities-colors, ( - "black": to-rgb($black), - "white": to-rgb($white), - "body": to-rgb($body-bg) + "primary": var(--#{$prefix}color-surface-brand-primary), // OUDS mod + "secondary": var(--#{$prefix}color-bg-secondary), // OUDS mod + "success": var(--#{$prefix}color-surface-status-positive-emphasized), // OUDS mod + "info": var(--#{$prefix}color-surface-status-info-emphasized), // OUDS mod + "warning": var(--#{$prefix}color-surface-status-warning-emphasized), // OUDS mod + "danger": var(--#{$prefix}color-surface-status-negative-emphasized), // OUDS mod + "light": var(--#{$prefix}color-bg-secondary), // OUDS mod + "dark": var(--#{$prefix}color-surface-status-neutral-emphasized), // OUDS mod + "black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)` + "white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)` + "body": var(--#{$prefix}color-bg-primary) // OUDS mod: instead of `to-rgb($body-bg)` ) ) !default; -$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; +$utilities-bg-colors: $utilities-bg !default; // OUDS mod: instead of `map-loop($utilities-bg, rgba-css-var, "$key", "bg")` $utilities-bg-subtle: ( "primary-subtle": var(--#{$prefix}primary-bg-subtle), @@ -334,13 +350,19 @@ $utilities-bg-subtle: ( $utilities-border: map-merge( $utilities-colors, ( - "black": to-rgb($black), - "dark": $gray-700, // OUDS mod: handled differently within `rgba-css-var` - "light": $gray-500, // OUDS mod: handled differently within `rgba-css-var` - "white": to-rgb($white), + "primary": var(--#{$prefix}color-border-brand-primary), // OUDS mod + "secondary": var(--#{$prefix}color-border-emphasized), // OUDS mod + "success": var(--#{$prefix}color-border-emphasized), // OUDS mod + "info": var(--#{$prefix}color-border-emphasized), // OUDS mod + "warning": var(--#{$prefix}color-border-emphasized), // OUDS mod + "danger": var(--#{$prefix}color-border-emphasized), // OUDS mod + "light": var(--#{$prefix}color-border-emphasized), // OUDS mod + "dark": var(--#{$prefix}color-border-emphasized), // OUDS mod + "black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)` + "white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)` ) ) !default; -$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border", "$value") !default; // OUDS mod +$utilities-border-colors: $utilities-border !default; // OUDS mod: instead of `map-loop($utilities-border, rgba-css-var, "$key", "border", "$value")` $utilities-border-subtle: ( "primary-subtle": var(--#{$prefix}primary-border-subtle), diff --git a/scss/_reboot.scss b/scss/_reboot.scss index e55c919942..d83a5e8185 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -25,7 +25,7 @@ // Ability to the value of the root font sizes, affecting the value of `rem`. // null by default, thus nothing is generated. -#{$ouds-root-selector} { +#{$ouds-root-selector} { // OUDS mod: instead of `:root` @if $font-size-root != null { @include font-size(var(--#{$prefix}root-font-size)); } @@ -61,7 +61,7 @@ // See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis // scss-docs-start reboot-body-rules -#{$ouds-root-selector} > * { +#{$ouds-root-selector} > * { // OUDS mod: instead of `body` position: relative; // OUDS mod: required for back-to-top component margin: 0; // 1 font-family: var(--#{$prefix}body-font-family); diff --git a/scss/_root.scss b/scss/_root.scss index 1893958728..1a6bb120e2 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -7,7 +7,7 @@ // Note that some of the following variables in `#{$ouds-root-selector}, [data-bs-theme="light"]` could be extracted into `#{$ouds-root-selector}` only selector since they are not modified by other color modes! // End mod -@include color-mode(light, true) { +@include color-mode(light, true) { // OUDS mod: instead of `:root, [data-bs-theme="light"]` color-scheme: light; // OUDS mod // Note: Custom variable values only support SassScript inside `#{}`. @@ -16,36 +16,38 @@ // // Generate palettes for full colors, grays, and theme colors. - @each $color, $value in $colors { - --#{$prefix}#{$color}: #{$value}; - } + @if $enable-bootstrap-compatibility { + @each $color, $value in $colors { + --#{$prefix}#{$color}: #{$value}; + } - @each $color, $value in $grays { - --#{$prefix}gray-#{$color}: #{$value}; - } + @each $color, $value in $grays { + --#{$prefix}gray-#{$color}: #{$value}; + } - @each $color, $value in $theme-colors { - --#{$prefix}#{$color}: #{$value}; - } + @each $color, $value in $theme-colors { + --#{$prefix}#{$color}: #{$value}; + } - @each $color, $value in $theme-colors-rgb { - --#{$prefix}#{$color}-rgb: #{$value}; - } + @each $color, $value in $theme-colors-rgb { + --#{$prefix}#{$color}-rgb: #{$value}; + } - @each $color, $value in $theme-colors-text { - --#{$prefix}#{$color}-text-emphasis: #{$value}; - } + @each $color, $value in $theme-colors-text { + --#{$prefix}#{$color}-text-emphasis: #{$value}; + } - @each $color, $value in $theme-colors-bg-subtle { - --#{$prefix}#{$color}-bg-subtle: #{$value}; - } + @each $color, $value in $theme-colors-bg-subtle { + --#{$prefix}#{$color}-bg-subtle: #{$value}; + } - @each $color, $value in $theme-colors-border-subtle { - --#{$prefix}#{$color}-border-subtle: #{$value}; - } + @each $color, $value in $theme-colors-border-subtle { + --#{$prefix}#{$color}-border-subtle: #{$value}; + } - --#{$prefix}white-rgb: #{to-rgb($white)}; - --#{$prefix}black-rgb: #{to-rgb($black)}; + --#{$prefix}white-rgb: #{to-rgb($white)}; + --#{$prefix}black-rgb: #{to-rgb($black)}; + } // OUDS mod @each $icon, $svg in $svg-as-custom-props { @@ -226,18 +228,20 @@ --#{$prefix}body-bg: #{$body-bg}; --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; - --#{$prefix}emphasis-color: #{$body-emphasis-color}; - --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)}; - - --#{$prefix}secondary-color: #{$body-secondary-color}; - --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)}; - --#{$prefix}secondary-bg: #{$body-secondary-bg}; - --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)}; - - --#{$prefix}tertiary-color: #{$body-tertiary-color}; - --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)}; - --#{$prefix}tertiary-bg: #{$body-tertiary-bg}; - --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; + @if $enable-bootstrap-compatibility { + --#{$prefix}emphasis-color: #{$body-emphasis-color}; + --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)}; + + --#{$prefix}secondary-color: #{$body-secondary-color}; + --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)}; + --#{$prefix}secondary-bg: #{$body-secondary-bg}; + --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)}; + + --#{$prefix}tertiary-color: #{$body-tertiary-color}; + --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)}; + --#{$prefix}tertiary-bg: #{$body-tertiary-bg}; + --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; + } // scss-docs-end root-body-variables --#{$prefix}heading-color: #{$headings-color}; @@ -439,39 +443,41 @@ --#{$prefix}body-bg: #{$body-bg-dark}; --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)}; - --#{$prefix}emphasis-color: #{$body-emphasis-color-dark}; - --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)}; - - --#{$prefix}secondary-color: #{$body-secondary-color-dark}; - --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)}; - --#{$prefix}secondary-bg: #{$body-secondary-bg-dark}; - --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)}; - - --#{$prefix}tertiary-color: #{$body-tertiary-color-dark}; - --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)}; - --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; - --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; - - // OUDS mod - @each $color, $value in $theme-colors-dark { - --#{$prefix}#{$color}: #{$value}; - } - - @each $color, $value in $theme-colors-rgb-dark { - --#{$prefix}#{$color}-rgb: #{$value}; - } - // End mod - - @each $color, $value in $theme-colors-text-dark { - --#{$prefix}#{$color}-text-emphasis: #{$value}; - } - - @each $color, $value in $theme-colors-bg-subtle-dark { - --#{$prefix}#{$color}-bg-subtle: #{$value}; - } - - @each $color, $value in $theme-colors-border-subtle-dark { - --#{$prefix}#{$color}-border-subtle: #{$value}; + @if $enable-bootstrap-compatibility { + --#{$prefix}emphasis-color: #{$body-emphasis-color-dark}; + --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)}; + + --#{$prefix}secondary-color: #{$body-secondary-color-dark}; + --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)}; + --#{$prefix}secondary-bg: #{$body-secondary-bg-dark}; + --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)}; + + --#{$prefix}tertiary-color: #{$body-tertiary-color-dark}; + --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)}; + --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; + --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; + + // OUDS mod + @each $color, $value in $theme-colors-dark { + --#{$prefix}#{$color}: #{$value}; + } + + @each $color, $value in $theme-colors-rgb-dark { + --#{$prefix}#{$color}-rgb: #{$value}; + } + // End mod + + @each $color, $value in $theme-colors-text-dark { + --#{$prefix}#{$color}-text-emphasis: #{$value}; + } + + @each $color, $value in $theme-colors-bg-subtle-dark { + --#{$prefix}#{$color}-bg-subtle: #{$value}; + } + + @each $color, $value in $theme-colors-border-subtle-dark { + --#{$prefix}#{$color}-border-subtle: #{$value}; + } } // OUDS mod diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 2dbdb51436..1f01cbde7d 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -199,9 +199,7 @@ $utilities: map-merge( "border-color": ( property: border-color, class: border, - local-vars: ( - "border-opacity": 1 - ), + // OUDS mod: no local-vars, values: $utilities-border-colors, bootstrap-compatibility: true ), @@ -217,18 +215,7 @@ $utilities: map-merge( values: $border-widths, bootstrap-compatibility: true ), - "border-opacity": ( - css-var: true, - class: border-opacity, - values: ( - 10: .1, - 25: .25, - 50: .5, - 75: .75, - 100: 1 - ), - bootstrap-compatibility: true - ), + // OUDS mod: no "border-opacity" // scss-docs-end utils-borders // OUDS mod // scss-docs-start utils-borders-ouds @@ -973,34 +960,22 @@ $utilities: map-merge( "color": ( property: color, class: text, - local-vars: ( - "text-opacity": 1 - ), + // OUDS mod: no local-vars values: map-merge( $utilities-text-colors, ( - "muted": var(--#{$prefix}secondary-color), // Deprecated in Bootstrap - "black-50": rgba($black, .5), // Deprecated in Bootstrap - "white-50": rgba($white, .5), // Deprecated in Bootstrap - "body-secondary": var(--#{$prefix}secondary-color), - "body-tertiary": var(--#{$prefix}tertiary-color), - "body-emphasis": var(--#{$prefix}emphasis-color), + "muted": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `var(--#{$prefix}secondary-color)` + "black-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($black, .5)` + "white-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($white, .5)` + "body-secondary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}secondary-color)` + "body-tertiary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}tertiary-color)` + "body-emphasis": var(--#{$prefix}color-content-default), // OUDS mod: instead of `var(--#{$prefix}emphasis-color)` // OUDS mod: no "reset" ) ), bootstrap-compatibility: true ), - "text-opacity": ( - css-var: true, - class: text-opacity, - values: ( - 25: .25, - 50: .5, - 75: .75, - 100: 1 - ), - bootstrap-compatibility: true - ), + // OUDS mod: no "text-opacity" "text-color": ( property: color, class: text, @@ -1069,31 +1044,18 @@ $utilities: map-merge( "background-color": ( property: background-color, class: bg, - local-vars: ( - "bg-opacity": 1 - ), + // OUDS mod: no local-vars values: map-merge( $utilities-bg-colors, ( // OUDS mod: no "transparent" - "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)), - "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)), + "body-secondary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity))` + "body-tertiary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity))` ) ), bootstrap-compatibility: true, ), - "bg-opacity": ( - css-var: true, - class: bg-opacity, - values: ( - 10: .1, - 25: .25, - 50: .5, - 75: .75, - 100: 1 - ), - bootstrap-compatibility: true, - ), + // OUDS mod: no "bg-opacity" "subtle-background-color": ( property: background-color, class: bg, diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 8e0a84d288..a39663c7d3 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -11,12 +11,12 @@ // scss-docs-start theme-color-dark-variables $primary-dark: $ouds-color-content-brand-primary-dark !default; $secondary-dark: $white !default; -$success-dark: $ouds-color-functional-malachite-500 !default; -$info-dark: $ouds-color-functional-dodger-blue-500 !default; -$warning-dark: $ouds-color-functional-sun-500 !default; -$danger-dark: $ouds-color-functional-scarlet-600 !default; -$light-dark: $gray-500 !default; -$dark-dark: $black !default; +$success-dark: $ouds-color-functional-malachite-300 !default; +$info-dark: $ouds-color-functional-dodger-blue-300 !default; +$warning-dark: $ouds-color-functional-sun-300 !default; +$danger-dark: $ouds-color-functional-scarlet-300 !default; +$light-dark: $ouds-color-bg-secondary-dark !default; +$dark-dark: $ouds-color-bg-emphasized-dark !default; // scss-docs-end theme-color-dark-variables // scss-docs-start theme-colors-dark-map @@ -34,36 +34,36 @@ $theme-colors-dark: ( // End mod // scss-docs-start theme-text-dark-variables -$primary-text-emphasis-dark: $primary-dark !default; // OUDS mod: instead of `tint-color($primary, 40%)` -$secondary-text-emphasis-dark: $secondary-dark !default; // OUDS mod: instead of `tint-color($secondary, 40%)` -$success-text-emphasis-dark: $success-dark !default; // OUDS mod: instead of `tint-color($success, 40%)` -$info-text-emphasis-dark: $info-dark !default; // OUDS mod: instead of `tint-color($info, 40%)` -$warning-text-emphasis-dark: $warning-dark !default; // OUDS mod: instead of `tint-color($warning, 40%)` -$danger-text-emphasis-dark: $danger-dark !default; // OUDS mod: instead of `tint-color($danger, 40%)` -$light-text-emphasis-dark: $light-dark !default; // OUDS mod: instead of `$gray-100` -$dark-text-emphasis-dark: $dark-dark !default; // OUDS mod: instead of `$gray-300` +$primary-text-emphasis-dark: $ouds-color-content-brand-primary-dark !default; // OUDS mod: instead of `tint-color($primary, 40%)` +$secondary-text-emphasis-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `tint-color($secondary, 40%)` +$success-text-emphasis-dark: $ouds-color-content-status-positive-dark !default; // OUDS mod: instead of `tint-color($success, 40%)` +$info-text-emphasis-dark: $ouds-color-content-status-info-dark !default; // OUDS mod: instead of `tint-color($info, 40%)` +$warning-text-emphasis-dark: $ouds-color-content-status-warning-dark !default; // OUDS mod: instead of `tint-color($warning, 40%)` +$danger-text-emphasis-dark: $ouds-color-content-status-negative-dark !default; // OUDS mod: instead of `tint-color($danger, 40%)` +$light-text-emphasis-dark: $ouds-color-content-disabled-dark !default; // OUDS mod: instead of `$gray-100` +$dark-text-emphasis-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$gray-300` // scss-docs-end theme-text-dark-variables // scss-docs-start theme-bg-subtle-dark-variables -$primary-bg-subtle-dark: $primary-dark !default; // OUDS mod: instead of `shade-color($primary, 80%)` -$secondary-bg-subtle-dark: $secondary-dark !default; // OUDS mod: instead of `shade-color($secondary, 80%)` -$success-bg-subtle-dark: $success-dark !default; // OUDS mod: instead of `shade-color($success, 80%)` -$info-bg-subtle-dark: $info-dark !default; // OUDS mod: instead of `shade-color($info, 80%)` -$warning-bg-subtle-dark: $warning-dark !default; // OUDS mod: instead of `shade-color($warning, 80%)` -$danger-bg-subtle-dark: $danger-dark !default; // OUDS mod: instead of `shade-color($danger, 80%)` -$light-bg-subtle-dark: $light-dark !default; // OUDS mod: instead of `$gray-800` -$dark-bg-subtle-dark: $dark-dark !default; // OUDS mod: instead of `mix($gray-800, $black)` +$primary-bg-subtle-dark: $ouds-color-bg-tertiary-dark !default; // OUDS mod: instead of `shade-color($primary, 80%)` +$secondary-bg-subtle-dark: $ouds-color-bg-secondary-dark !default; // OUDS mod: instead of `shade-color($secondary, 80%)` +$success-bg-subtle-dark: $ouds-color-surface-status-positive-muted-dark !default; // OUDS mod: instead of `shade-color($success, 80%)` +$info-bg-subtle-dark: $ouds-color-surface-status-info-muted-dark !default; // OUDS mod: instead of `shade-color($info, 80%)` +$warning-bg-subtle-dark: $ouds-color-surface-status-warning-muted-dark !default; // OUDS mod: instead of `shade-color($warning, 80%)` +$danger-bg-subtle-dark: $ouds-color-surface-status-negative-muted-dark !default; // OUDS mod: instead of `shade-color($danger, 80%)` +$light-bg-subtle-dark: $ouds-color-bg-secondary-dark !default; // OUDS mod: instead of `$gray-800` +$dark-bg-subtle-dark: $ouds-color-surface-status-neutral-muted-dark !default; // OUDS mod: instead of `mix($gray-800, $black)` // scss-docs-end theme-bg-subtle-dark-variables // scss-docs-start theme-border-subtle-dark-variables -$primary-border-subtle-dark: $primary-dark !default; // OUDS mod: instead of `shade-color($primary, 40%)` -$secondary-border-subtle-dark: $secondary-dark !default; // OUDS mod: instead of `shade-color($secondary, 40%)` -$success-border-subtle-dark: $success-dark !default; // OUDS mod: instead of `shade-color($success, 40%)` -$info-border-subtle-dark: $info-dark !default; // OUDS mod: instead of `shade-color($info, 40%)` -$warning-border-subtle-dark: $warning-dark !default; // OUDS mod: instead of `shade-color($warning, 40%)` -$danger-border-subtle-dark: $danger-dark !default; // OUDS mod: instead of `shade-color($danger, 40%)` -$light-border-subtle-dark: $light-dark !default; // OUDS mod: instead of `$gray-700` -$dark-border-subtle-dark: $dark-dark !default; // OUDS mod: instead of `$gray-800` +$primary-border-subtle-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `shade-color($primary, 40%)` +$secondary-border-subtle-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `shade-color($secondary, 40%)` +$success-border-subtle-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `shade-color($success, 40%)` +$info-border-subtle-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `shade-color($info, 40%)` +$warning-border-subtle-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `shade-color($warning, 40%)` +$danger-border-subtle-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `shade-color($danger, 40%)` +$light-border-subtle-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `$gray-700` +$dark-border-subtle-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `$gray-800` // scss-docs-end theme-border-subtle-dark-variables $body-color-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$gray-300` @@ -73,8 +73,8 @@ $body-secondary-bg-dark: $ouds-color-bg-secondary-dark !default; // O $body-tertiary-color-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `rgba($body-color-dark, .5)` $body-tertiary-bg-dark: $ouds-color-bg-tertiary-dark !default; // OUDS mod: instead of `mix($gray-800, $gray-900, 50%)` $body-emphasis-color-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$gray-100` -$border-color-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `$gray-700` -$border-color-translucent-dark: rgba($white, .15) !default; +$border-color-dark: $ouds-color-border-emphasized-dark !default; // OUDS mod: instead of `$gray-700` +$border-color-translucent-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `rgba($white, .15)` $headings-color-dark: inherit !default; $link-color-dark: $white !default; // OUDS mod: instead of `tint-color($primary, 40%)` $link-hover-color-dark: $ouds-color-orange-500 !default; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)` diff --git a/scss/_variables.scss b/scss/_variables.scss index 4eba7aac30..4a17cc1445 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -5,7 +5,6 @@ // Color system -// TODO LM: Need to decide what to set in here. // scss-docs-start gray-color-variables $white: $ouds-color-functional-white !default; // OUDS mod: instead of `#fff` $gray-100: $ouds-color-functional-light-gray-80 !default; // OUDS mod: instead of `#f8f9fa` @@ -278,7 +277,7 @@ $teals: ( "teal-200": $teal-200, "teal-300": $teal-300, "teal-400": $teal-400, - "teal-500": $teal-500, + "teal-500": $teal-500,muted- "teal-600": $teal-600, "teal-700": $teal-700, "teal-800": $teal-800, @@ -298,16 +297,16 @@ $cyans: ( ) !default; // fusv-enable -// TODO LM: take care of the rest +// TODO LM: Check together the rendering // scss-docs-start theme-color-variables -$primary: $orange !default; -$secondary: $black !default; +$primary: $orange !default; // OUDS mod: instead of `$blue` +$secondary: $black !default; // OUDS mod: instead of `$gray-600` $success: $green !default; -$info: $blue !default; +$info: $blue !default; // OUDS mod: instead of `$cyan` $warning: $yellow !default; $danger: $red !default; -$light: $gray-500 !default; -$dark: $black !default; +$light: $ouds-color-bg-secondary-light !default; // OUDS mod: instead of `$gray-100` +$dark: $ouds-color-bg-emphasized-light !default; // OUDS mod: instead of `$gray-900` // scss-docs-end theme-color-variables // scss-docs-start theme-colors-map @@ -324,36 +323,36 @@ $theme-colors: ( // scss-docs-end theme-colors-map // scss-docs-start theme-text-variables -$primary-text-emphasis: $primary !default; // OUDS mod: instead of `shade-color($primary, 60%)` -$secondary-text-emphasis: $secondary !default; // OUDS mod: instead of `shade-color($secondary, 60%)` -$success-text-emphasis: $success !default; // OUDS mod: instead of `shade-color($success, 60%)` -$info-text-emphasis: $info !default; // OUDS mod: instead of `shade-color($info, 60%)` -$warning-text-emphasis: $warning !default; // OUDS mod: instead of `shade-color($warning, 60%)` -$danger-text-emphasis: $danger !default; // OUDS mod: instead of `shade-color($danger, 60%)` -$light-text-emphasis: $light !default; // OUDS mod: instead of `$gray-700` -$dark-text-emphasis: $dark !default; // OUDS mod: instead of `$gray-700` +$primary-text-emphasis: $ouds-color-content-brand-primary-light !default; // OUDS mod: instead of `shade-color($primary, 60%)` +$secondary-text-emphasis: $ouds-color-content-muted-light !default; // OUDS mod: instead of `shade-color($secondary, 60%)` +$success-text-emphasis: $ouds-color-content-status-positive-light !default; // OUDS mod: instead of `shade-color($success, 60%)` +$info-text-emphasis: $ouds-color-content-status-info-light !default; // OUDS mod: instead of `shade-color($info, 60%)` +$warning-text-emphasis: $ouds-color-content-status-warning-light !default; // OUDS mod: instead of `shade-color($warning, 60%)` +$danger-text-emphasis: $ouds-color-content-status-negative-light !default; // OUDS mod: instead of `shade-color($danger, 60%)` +$light-text-emphasis: $ouds-color-content-disabled-light !default; // OUDS mod: instead of `$gray-700` +$dark-text-emphasis: $ouds-color-content-default-light !default; // OUDS mod: instead of `$gray-700` // scss-docs-end theme-text-variables // scss-docs-start theme-bg-subtle-variables -$primary-bg-subtle: $primary !default; // OUDS mod: instead of `tint-color($primary, 80%)` -$secondary-bg-subtle: $secondary !default; // OUDS mod: instead of `tint-color($secondary, 80%)` -$success-bg-subtle: $success !default; // OUDS mod: instead of `tint-color($success, 80%)` -$info-bg-subtle: $info !default; // OUDS mod: instead of `tint-color($info, 80%)` -$warning-bg-subtle: $warning !default; // OUDS mod: instead of `tint-color($warning, 80%)` -$danger-bg-subtle: $danger !default; // OUDS mod: instead of `tint-color($danger, 80%)` -$light-bg-subtle: $light !default; // OUDS mod: instead of `mix($gray-100, $white)` -$dark-bg-subtle: $dark !default; // OUDS mod: instead of `$gray-400` +$primary-bg-subtle: $ouds-color-bg-tertiary-light !default; // OUDS mod: instead of `tint-color($primary, 80%)` +$secondary-bg-subtle: $ouds-color-bg-secondary-light !default; // OUDS mod: instead of `tint-color($secondary, 80%)` +$success-bg-subtle: $ouds-color-surface-status-positive-muted-light !default; // OUDS mod: instead of `tint-color($success, 80%)` +$info-bg-subtle: $ouds-color-surface-status-info-muted-light !default; // OUDS mod: instead of `tint-color($info, 80%)` +$warning-bg-subtle: $ouds-color-surface-status-warning-muted-light !default; // OUDS mod: instead of `tint-color($warning, 80%)` +$danger-bg-subtle: $ouds-color-surface-status-negative-muted-light !default; // OUDS mod: instead of `tint-color($danger, 80%)` +$light-bg-subtle: $ouds-color-bg-secondary-light !default; // OUDS mod: instead of `mix($gray-100, $white)` +$dark-bg-subtle: $ouds-color-surface-status-neutral-muted-light !default; // OUDS mod: instead of `$gray-400` // scss-docs-end theme-bg-subtle-variables // scss-docs-start theme-border-subtle-variables -$primary-border-subtle: $primary !default; // OUDS mod: instead of `tint-color($primary, 60%)` -$secondary-border-subtle: $secondary !default; // OUDS mod: instead of `tint-color($secondary, 60%)` -$success-border-subtle: $success !default; // OUDS mod: instead of `tint-color($success, 60%)` -$info-border-subtle: $info !default; // OUDS mod: instead of `tint-color($info, 60%)` -$warning-border-subtle: $warning !default; // OUDS mod: instead of `tint-color($warning, 60%)` -$danger-border-subtle: $danger !default; // OUDS mod: instead of `tint-color($danger, 60%)` -$light-border-subtle: $light !default; // OUDS mod: instead of `$gray-200` -$dark-border-subtle: $dark !default; // OUDS mod: instead of `$gray-500` +$primary-border-subtle: $ouds-color-border-default-light !default; // OUDS mod: instead of `tint-color($primary, 60%)` +$secondary-border-subtle: $ouds-color-border-default-light !default; // OUDS mod: instead of `tint-color($secondary, 60%)` +$success-border-subtle: $ouds-color-border-default-light !default; // OUDS mod: instead of `tint-color($success, 60%)` +$info-border-subtle: $ouds-color-border-default-light !default; // OUDS mod: instead of `tint-color($info, 60%)` +$warning-border-subtle: $ouds-color-border-default-light !default; // OUDS mod: instead of `tint-color($warning, 60%)` +$danger-border-subtle: $ouds-color-border-default-light !default; // OUDS mod: instead of `tint-color($danger, 60%)` +$light-border-subtle: $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-200` +$dark-border-subtle: $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-500` // scss-docs-end theme-border-subtle-variables // Characters which are escaped by the escape-svg function @@ -612,8 +611,8 @@ $border-widths: ( 5: $ouds-border-width-thicker * 1.25 // OUDS mod: instead of `$border-width * 2.5` ) !default; $border-style: $ouds-border-style-default !default; // OUDS mod: instead of `solid` -$border-color: $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-300` -$border-color-translucent: rgba($black, .175) !default; +$border-color: $ouds-color-border-emphasized-light !default; // OUDS mod: instead of `$gray-300` +$border-color-translucent: $ouds-color-border-default-light !default; // OUDS mod: instead of `rgba($black, .175)` // scss-docs-end border-variables // scss-docs-start border-radius-variables diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss index 2b186fa13e..6447cc4275 100644 --- a/scss/helpers/_color-bg.scss +++ b/scss/helpers/_color-bg.scss @@ -1,16 +1,27 @@ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 -@each $color, $value in $theme-colors { - .text-bg-#{$color} { +@if $enable-bootstrap-compatibility { + @each $color, $value in $theme-colors { // OUDS mod: Force colors to have a good rendering - $text-bg-color: var(--#{$prefix}highlight-color); - @if index(("primary", "warning", "light"), #{$color}) { - $text-bg-color: $black; - } @else if (#{$color} == "dark") { - $text-bg-color: $white; + $text-bg-color: var(--#{$prefix}color-content-default); + $bg-color: null; + @if index(("danger"), #{$color}) { + $text-bg-color: var(--#{$prefix}color-content-on-status-emphasized-alt); + $bg-color: var(--#{$prefix}color-surface-status-negative-emphasized); + } @else if index(("dark"), #{$color}) { + $text-bg-color: var(--#{$prefix}color-content-on-status-emphasized-alt); + $bg-color: var(--#{$prefix}color-surface-status-neutral-emphasized); + } @else if index(("success", "info", "warning"), #{$color}) { + $text-bg-color: var(--#{$prefix}color-content-on-status-emphasized); + $bg-color: var(--#{$prefix}color-surface-status-#{if($color == "success", "positive", $color)}-emphasized); + } @else if index(("light"), #{$color}) { + $bg-color: var(--#{$prefix}color-bg-secondary); } // End mod - color: $text-bg-color if($enable-important-utilities, !important, null); // OUDS mod: instead of `color-contrast($value)` - background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); + + .text-bg-#{$color} { + color: $text-bg-color if($enable-important-utilities, !important, null); // OUDS mod: instead of `color-contrast($value)` + background-color: if($bg-color, $bg-color, var(--#{$prefix}color-bg-#{$color})) if($enable-important-utilities, !important, null); // OUDS mod: instead of `RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1))` + } } } diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index 3e56a34c6d..8db01d7f4d 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -1,49 +1,50 @@ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 -@each $color, $value in $theme-colors { - .link-#{$color} { - color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); - text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); +@if $enable-bootstrap-compatibility { + @each $color, $value in $theme-colors { + .link-#{$color} { + color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); + text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); - @if $link-shade-percentage != 0 { - // OUDS mod: no &:focus - &:hover { - $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); - color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); - text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); + @if $link-shade-percentage != 0 { + // OUDS mod: no &:focus + &:hover { + $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); + color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); + text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); + } } } } -} -// OUDS mod -// TODO LM: Decide if we keep the dark mode or not -@if $enable-dark-mode { - @include color-mode(dark) { - @each $color, $value in $theme-colors-dark { - .link-#{$color} { - @if $link-shade-percentage != 0 { - &:hover { - $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); - color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); - text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); + // OUDS mod + @if $enable-dark-mode { + @include color-mode(dark) { + @each $color, $value in $theme-colors-dark { + .link-#{$color} { + @if $link-shade-percentage != 0 { + &:hover { + $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); + color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); + text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); + } } } } } } -} -// End mod + // End mod -// One-off special link helper as a bridge until v6 -.link-body-emphasis { - color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); - text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); + // One-off special link helper as a bridge until v6 + .link-body-emphasis { + color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); + text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); - @if $link-shade-percentage != 0 { - &:hover, - &:focus { - color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null); - text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null); + @if $link-shade-percentage != 0 { + &:hover, + &:focus { + color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null); + text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null); + } } } } diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index de6196bf34..33b31c5499 100644 --- a/site/assets/scss/_colors.scss +++ b/site/assets/scss/_colors.scss @@ -173,7 +173,6 @@ @return $level; } -// TODO LM: see if we remove it @each $color, $value in map-merge($colors, map-merge($grays, ("supporting-yellow": $ouds-color-decorative-amber-500, "black": $black))) { .a11y-swatch-#{$color} { color: color-contrast($value); diff --git a/site/content/docs/0.0/customize/color-modes.md b/site/content/docs/0.0/customize/color-modes.md index 1b3b05400d..da66e2a2a8 100644 --- a/site/content/docs/0.0/customize/color-modes.md +++ b/site/content/docs/0.0/customize/color-modes.md @@ -78,7 +78,7 @@ Here is an example of a block that inverts the main theme when it's placed insid Here is an example of a block that follows the main theme when it's placed inside a dark block. To get the main theme independently from the cascade, set via `data-bs-theme="root"` on any element but the main one. Feel free to change the color mode of the page to see the effect. - + ## How to use @@ -89,7 +89,7 @@ Here is a recap table of when to use which contextual theme. Prefer to use `ligh However, these 4 themes should be enough to deal with all of your use cases. If it's not the case, you are probably using them wrong. Since the implementation might be quite hard to understand, don't hesitate to contact us via our [GitHub discussions]({{< param repo >}}/discussions) with a reduced test case if you're having trouble implementing. {{< callout info >}} -We usually use **2 different layers to set the `background-color` and the theme**. In some rare case you might want to set it on one element. +We use **2 different layers to set the `background-color` and the theme** when the theme doesn't inherit. {{< /callout >}} {{< bs-table >}} diff --git a/site/content/docs/0.0/helpers/color-background.md b/site/content/docs/0.0/helpers/color-background.md index 14aa919bb2..4f5ccc75fd 100644 --- a/site/content/docs/0.0/helpers/color-background.md +++ b/site/content/docs/0.0/helpers/color-background.md @@ -43,7 +43,6 @@ Please consider using our [color modes]({{< docsref "/customize/color-modes" >}} {{< /callout >}} {{< bootstrap-compatibility >}} - Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`. {{< callout warning >}} diff --git a/site/content/docs/0.0/helpers/colored-links.md b/site/content/docs/0.0/helpers/colored-links.md index ec13a5f211..ed4104ff72 100644 --- a/site/content/docs/0.0/helpers/colored-links.md +++ b/site/content/docs/0.0/helpers/colored-links.md @@ -13,7 +13,6 @@ toc: true Colored links shouldn't be used in an OUDS Web context. {{< bootstrap-compatibility >}} - You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. {{< callout info >}} diff --git a/site/content/docs/0.0/utilities/background.md b/site/content/docs/0.0/utilities/background.md index 810e7cda3b..3174f00a0f 100644 --- a/site/content/docs/0.0/utilities/background.md +++ b/site/content/docs/0.0/utilities/background.md @@ -17,7 +17,7 @@ toc: true Background utilities like `.bg-*` are generated from our `$ouds-backgrounds` Sass map and respond to color modes. Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so depending on the cases you'll want to use an additional: -* `[data-bs-theme]` [color mode attribute]({{< docsref "/customize/color-modes#how-to-use" >}}) is the best option all the time and moreover when the element using a background utility contains complex sub-elements such as components that need to respond to color modes +* `[data-bs-theme]` [color mode attribute]({{< docsref "/customize/color-modes#how-to-use" >}}) is the best option most of the time and moreover when the element using a background utility contains complex sub-elements such as components that need to respond to color modes * `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}) when the background color and color couple are accessible together in light and dark mode, and there is no components inside * `.text-bg-*` [color & background helper]({{< docsref "/helpers/color-background" >}}) from our background colors and if there is no components inside @@ -25,11 +25,10 @@ Similar to the contextual text color classes, set the background of an element t Here are the equivalent Bootstrap background that you shouldn't be using. Prefer using the classes above according to [our design system]({{< param ouds.web >}}). - {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -
.bg-{{ .name }}
+
.bg-{{ .name }}
.bg-{{ .name }}-subtle
{{- end -}} {{< /colors.inline >}} @@ -37,7 +36,7 @@ Here are the equivalent Bootstrap background that you shouldn't be using. Prefer
.bg-body-tertiary
.bg-body
.bg-black
-
.bg-white
+
.bg-white
.bg-transparent
{{< /example >}} diff --git a/site/content/docs/0.0/utilities/borders.md b/site/content/docs/0.0/utilities/borders.md index 03eaa418b3..a92953b7a5 100644 --- a/site/content/docs/0.0/utilities/borders.md +++ b/site/content/docs/0.0/utilities/borders.md @@ -92,7 +92,7 @@ Or modify the default `border-color` of a component: Dangerous heading -
+
Changing border color and width
{{< /example >}} diff --git a/site/content/docs/0.0/utilities/colors.md b/site/content/docs/0.0/utilities/colors.md index 3ddee8e323..388056c0a2 100644 --- a/site/content/docs/0.0/utilities/colors.md +++ b/site/content/docs/0.0/utilities/colors.md @@ -66,10 +66,35 @@ In the next table we assume that the background is used in a color mode switchin | `.text-on-status-emphasized` | `.bg-status-accent-emphasized`, `.bg-status-positive-emphasized`, `.bg-status-warning-emphasized`, `.bg-status-info-emphasized` | `.bg-status-accent-emphasized`, `.bg-status-positive-emphasized`, `.bg-status-warning-emphasized`, `.bg-status-info-emphasized` | | `.text-on-status-emphasized-alt` | `.bg-status-neutral-emphasized`, `.bg-status-negative-emphasized` | `.bg-status-neutral-emphasized`, `.bg-status-negative-emphasized` | | `.text-on-status-muted` | `.bg-status-neutral-muted`, `.bg-status-accent-muted`, `.bg-status-positive-muted`, `.bg-status-negative-muted`, `.bg-status-warning-muted`, `.bg-status-info-muted` | `.bg-status-neutral-muted`, `.bg-status-accent-muted`, `.bg-status-positive-muted`, `.bg-status-negative-muted`, `.bg-status-warning-muted`, `.bg-status-info-muted` | -| `.text-always-on-black` | `.bg-emphasized`, `.bg-always-black` | `.bg-emphasized`, `.bg-always-black` | -| `.text-always-on-white` | `.bg-brand-primary`, `.bg-status-accent-emphasized`, `.bg-status-positive-emphasized`, `.bg-status-warning-emphasized`, `.bg-status-info-emphasized`, `.bg-always-white` | `.bg-brand-primary`, `.bg-status-accent-emphasized`, `.bg-status-positive-emphasized`, `.bg-status-warning-emphasized`, `.bg-status-info-emphasized`, `.bg-always-white` | +| `.text-always-on-black` | `.bg-always-black` | `.bg-always-black` | +| `.text-always-on-white` | `.bg-always-white` | `.bg-always-white` | {{< /bs-table >}} +{{< bootstrap-compatibility >}} +{{< example >}} +{{< colors.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +

.text-{{ .name }}

+

.text-{{ .name }}-emphasis

+{{- end -}} +{{< /colors.inline >}} + +

.text-body

+

.text-body-emphasis

+

.text-body-secondary

+

.text-body-tertiary

+ +

.text-black

+

.text-white

+

.text-black-50

+

.text-white-50

+{{< /example >}} + +{{< callout warning >}} +`.text-black-50` and `.text-white-50` are deprecated as of Bootstrap v5.1.0. They'll be removed in Bootstrap v6.0.0. +{{< /callout >}} +{{< /bootstrap-compatibility >}} + ### On icons The following color utilities are meant to be used only with icons and not with text. @@ -100,54 +125,6 @@ Here are [the normal contexts of use of these text color utilities](https://unif | `.text-status-negative` | Use to communicate something negative. It can be a destructive action, an error state, or a negative feedback. | {{< /bs-table >}} - - - - ## Specificity diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml index 991e654e1d..1dcaa890f3 100644 --- a/site/data/theme-colors.yml +++ b/site/data/theme-colors.yml @@ -18,7 +18,7 @@ hex: "#ffcc00" dark_hex: "#ffcc00" description: "Warning — Theme color used for non-destructive warning messages." - contrast_color: dark + contrast_color: black - name: info hex: "#4170d8" dark_hex: "#6699ff" @@ -27,9 +27,7 @@ hex: "#ccc" dark_hex: "#ccc" description: "Light — Additional theme option." - contrast_color: dark - name: dark hex: "#000" dark_hex: "#000" description: "Dark — Additional theme option." - contrast_color: white diff --git a/site/layouts/shortcodes/bootstrap-compatibility.html b/site/layouts/shortcodes/bootstrap-compatibility.html index ec7e93abe0..b2f71f0473 100644 --- a/site/layouts/shortcodes/bootstrap-compatibility.html +++ b/site/layouts/shortcodes/bootstrap-compatibility.html @@ -1,6 +1,6 @@ {{- $markdown := .Get 0 | default true -}} -
+
Bootstrap $enable-bootstrap-compatibility: true