From 6bdb40c610cc64a4c2e2b7f2e06db338a80166d7 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 9 Jan 2025 10:50:57 +0100 Subject: [PATCH] Add the Bootstrap compatibilities in the doc and the code --- hugo.yml | 2 +- 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 +- .../_ouds-web-bootstrap-utilities.test.scss | 304 ++------- site/assets/scss/_colors.scss | 1 - .../content/docs/0.0/customize/color-modes.md | 4 +- .../docs/0.0/customize/color-palette.md | 2 +- .../content/docs/0.0/customize/color-theme.md | 643 +++++++++++++++++- .../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 +- 22 files changed, 981 insertions(+), 560 deletions(-) diff --git a/hugo.yml b/hugo.yml index beef87dd95..2f1bec1726 100644 --- a/hugo.yml +++ b/hugo.yml @@ -81,7 +81,7 @@ params: icons_usage: "https://design.orange.com/0c1af118d/p/92bb17-usage" bootstrap: "https://getbootstrap.com" ouds: - web: "https://unified-design-system.orange.com/" # TODO LM: replace this URL by the web one or even "https://oran.ge/ds-web" when it will changed + web: "https://unified-design-system.orange.com/" # TODO: replace this URL by the web one or even "https://oran.ge/ds-web" when it will changed algolia: appId: "F4PKENW3TB" 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/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index dd4f6b9d11..5bc3d90ff1 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -82,9 +82,6 @@ $utilities: (); "border-color": ( property: border-color, class: border, - local-vars: ( - "border-opacity": 1 - ), values: $utilities-border-colors, bootstrap-compatibility: true ), @@ -100,18 +97,6 @@ $utilities: (); 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 - ), "border-top-ouds": ( property: border-top, values: ( @@ -759,34 +744,20 @@ $utilities: (); "color": ( property: color, class: text, - local-vars: ( - "text-opacity": 1 - ), 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 - ), "text-color": ( property: color, class: text, @@ -816,31 +787,16 @@ $utilities: (); "background-color": ( property: background-color, class: bg, - local-vars: ( - "bg-opacity": 1 - ), 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, - ), "subtle-background-color": ( property: background-color, class: bg, @@ -10037,9 +9993,6 @@ $utilities: (); "border-color": ( property: border-color, class: border, - local-vars: ( - "border-opacity": 1 - ), values: $utilities-border-colors, bootstrap-compatibility: true ), @@ -10055,18 +10008,6 @@ $utilities: (); 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 - ), "border-top-ouds": ( property: border-top, values: ( @@ -10714,34 +10655,20 @@ $utilities: (); "color": ( property: color, class: text, - local-vars: ( - "text-opacity": 1 - ), 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 - ), "text-color": ( property: color, class: text, @@ -10771,31 +10698,16 @@ $utilities: (); "background-color": ( property: background-color, class: bg, - local-vars: ( - "bg-opacity": 1 - ), 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, - ), "subtle-background-color": ( property: background-color, class: bg, @@ -11118,53 +11030,43 @@ $utilities: (); } .border-primary { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; + border-color: var(--bs-color-border-brand-primary) !important; } .border-secondary { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; + border-color: var(--bs-color-border-emphasized) !important; } .border-success { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; + border-color: var(--bs-color-border-emphasized) !important; } .border-info { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important; + border-color: var(--bs-color-border-emphasized) !important; } .border-warning { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; + border-color: var(--bs-color-border-emphasized) !important; } .border-danger { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; + border-color: var(--bs-color-border-emphasized) !important; } .border-light { - --bs-border-opacity: 1; - border-color: rgba(85, 85, 85, var(--bs-border-opacity)) !important; + border-color: var(--bs-color-border-emphasized) !important; } .border-dark { - --bs-border-opacity: 1; - border-color: rgba(39, 39, 39, var(--bs-border-opacity)) !important; + border-color: var(--bs-color-border-emphasized) !important; } .border-black { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; + border-color: var(--bs-color-always-black) !important; } .border-white { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; + border-color: var(--bs-color-always-white) !important; } .border-primary-subtle { @@ -11219,34 +11121,6 @@ $utilities: (); border-width: 5px !important; } - .border-opacity-10 { - // Sass compilation will put a leading zero so we want to keep that one - // stylelint-disable-next-line @stylistic/number-leading-zero - --bs-border-opacity: 0.1; // stylelint-disable-line @stylistic/number-leading-zero - } - - .border-opacity-25 { - // Sass compilation will put a leading zero so we want to keep that one - // stylelint-disable-next-line @stylistic/number-leading-zero - --bs-border-opacity: 0.25; // stylelint-disable-line @stylistic/number-leading-zero - } - - .border-opacity-50 { - // Sass compilation will put a leading zero so we want to keep that one - // stylelint-disable-next-line @stylistic/number-leading-zero - --bs-border-opacity: 0.5; // stylelint-disable-line @stylistic/number-leading-zero - } - - .border-opacity-75 { - // Sass compilation will put a leading zero so we want to keep that one - // stylelint-disable-next-line @stylistic/number-leading-zero - --bs-border-opacity: 0.75; // stylelint-disable-line @stylistic/number-leading-zero - } - - .border-opacity-100 { - --bs-border-opacity: 1; - } - .border-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } @@ -14162,104 +14036,71 @@ $utilities: (); } .text-primary { - --bs-text-opacity: 1; - color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-brand-primary) !important; } .text-secondary { - --bs-text-opacity: 1; - color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-muted) !important; } .text-success { - --bs-text-opacity: 1; - color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-status-positive) !important; } .text-info { - --bs-text-opacity: 1; - color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-status-info) !important; } .text-warning { - --bs-text-opacity: 1; - color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-status-warning) !important; } .text-danger { - --bs-text-opacity: 1; - color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-status-negative) !important; } .text-light { - --bs-text-opacity: 1; - color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-disabled) !important; } .text-dark { - --bs-text-opacity: 1; - color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-default) !important; } .text-black { - --bs-text-opacity: 1; - color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-always-black) !important; } .text-white { - --bs-text-opacity: 1; - color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-always-white) !important; } .text-body { - --bs-text-opacity: 1; - color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important; + color: var(--bs-color-content-default) !important; } .text-muted { - --bs-text-opacity: 1; - color: var(--bs-secondary-color) !important; + color: var(--bs-color-content-muted) !important; } .text-black-50 { - --bs-text-opacity: 1; - color: rgba(0, 0, 0, 0.5) !important; // stylelint-disable-line @stylistic/number-leading-zero + color: var(--bs-color-content-muted) !important; } .text-white-50 { - --bs-text-opacity: 1; - color: rgba(255, 255, 255, 0.5) !important; // stylelint-disable-line @stylistic/number-leading-zero + color: var(--bs-color-content-muted) !important; } .text-body-secondary { - --bs-text-opacity: 1; - color: var(--bs-secondary-color) !important; + color: var(--bs-color-content-muted) !important; } .text-body-tertiary { - --bs-text-opacity: 1; - color: var(--bs-tertiary-color) !important; + color: var(--bs-color-content-muted) !important; } .text-body-emphasis { - --bs-text-opacity: 1; - color: var(--bs-emphasis-color) !important; - } - - .text-opacity-25 { - --bs-text-opacity: 0.25; // stylelint-disable-line @stylistic/number-leading-zero - } - - .text-opacity-50 { - --bs-text-opacity: 0.5; // stylelint-disable-line @stylistic/number-leading-zero - } - - .text-opacity-75 { - --bs-text-opacity: 0.75; // stylelint-disable-line @stylistic/number-leading-zero - } - - .text-opacity-100 { - --bs-text-opacity: 1; + color: var(--bs-color-content-default) !important; } .text-primary-emphasis { @@ -14407,88 +14248,55 @@ $utilities: (); } .bg-primary { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-surface-brand-primary) !important; } .bg-secondary { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-bg-secondary) !important; } .bg-success { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-surface-status-positive-emphasized) !important; } .bg-info { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-surface-status-info-emphasized) !important; } .bg-warning { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-surface-status-warning-emphasized) !important; } .bg-danger { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-surface-status-negative-emphasized) !important; } .bg-light { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-bg-secondary) !important; } .bg-dark { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-surface-status-neutral-emphasized) !important; } .bg-black { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-always-black) !important; } .bg-white { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-always-white) !important; } .bg-body { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-bg-primary) !important; } .bg-body-secondary { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important; + background-color: var(--bs-color-bg-secondary) !important; } .bg-body-tertiary { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important; - } - - .bg-opacity-10 { - --bs-bg-opacity: 0.1; // stylelint-disable-line @stylistic/number-leading-zero - } - - .bg-opacity-25 { - --bs-bg-opacity: 0.25; // stylelint-disable-line @stylistic/number-leading-zero - } - - .bg-opacity-50 { - --bs-bg-opacity: 0.5; // stylelint-disable-line @stylistic/number-leading-zero - } - - .bg-opacity-75 { - --bs-bg-opacity: 0.75; // stylelint-disable-line @stylistic/number-leading-zero - } - - .bg-opacity-100 { - --bs-bg-opacity: 1; + background-color: var(--bs-color-bg-secondary) !important; } .bg-primary-subtle { 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..111d434831 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 directly. {{< /callout >}} {{< bs-table >}} diff --git a/site/content/docs/0.0/customize/color-palette.md b/site/content/docs/0.0/customize/color-palette.md index fa0a512407..741f41364e 100644 --- a/site/content/docs/0.0/customize/color-palette.md +++ b/site/content/docs/0.0/customize/color-palette.md @@ -12,7 +12,7 @@ toc: true This section exposes all the existing colors inside the OUDS Web palette. These variables aren't meant to be used, it's only an exposure of the available colors. Be aware that none of the variables presented here depend on the theme. - +Please make sure that none of the [color theme variables]({{< docsref "/customize/color-theme" >}}) fit your needs before picking one here. {{< palette.inline >}} {{- range where $.Site.Data.palette "category" "OUDS colors" }} diff --git a/site/content/docs/0.0/customize/color-theme.md b/site/content/docs/0.0/customize/color-theme.md index 34dbbfce55..862a558007 100644 --- a/site/content/docs/0.0/customize/color-theme.md +++ b/site/content/docs/0.0/customize/color-theme.md @@ -10,4 +10,645 @@ aliases: toc: true --- -{{< callout-soon "page" >}} + +## Theming + +We use a subset of [the full color palette]({{< docsref "/customize/color-palette" >}}) to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in OUDS Web's `scss/_variables.scss` file. + +This smaller color palette is used to generate our components variants and our color-related utilities and helpers. + +
+ {{< theme-colors.inline >}} + {{- range (index $.Site.Data "theme-colors") }} +
+
{{ .name | title }}
+
+ {{ end -}} + {{< /theme-colors.inline >}} +
+ +All these colors are available as a Sass map, `$theme-colors`. + +{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} + +Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors. + +However, other colors are needed to create an interface. The following sections explain which colors are used for which purpose in a light and dark mode context. + +{{< callout info >}} +The following color sections represent the only colors you should have inside an Orange interface either in contextual light or dark theme. The following bicolor representation shows the rendering of the same usage on light or dark theme. + +The corresponding values displayed in these sections are used within the framework to create our components and utilities. But they are rarely used and to be used directly in a project. We recommend using the [usable variables](#usable-variables) instead that are more specific. +{{< /callout >}} + +### Core + +The Boosted core colors should always dominate other colors inside a page. They are used to highlight elements, figures, texts or actions. + +{{< palette.inline >}} +{{- range where $.Site.Data.palette "category" "Core colors" }} +
+ {{- range $color := .colors }} +
+ + + + +
+

{{ $color.hex }}

+

{{ $color.darkHex }}

+
+
+ {{- end -}} +
+
+{{ end -}} +{{< /palette.inline >}} + +### Functional + +The Boosted functional colors are associated to specific established meanings (respectively success, info or discovery, warning or alert, critical or error) and should be used in combination with a meaningful icon. + +Please note that the functional colors are not meant to be used as backgrounds or colors. + +{{< palette.inline >}} +{{- range where $.Site.Data.palette "category" "Functional colors" }} +
+ {{- range $color := .colors }} +
+
+ + + + +
+ {{- $color.name | title -}} +
+
+
+

{{ $color.hex }}

+

{{ $color.darkHex }}

+
+
+ {{ end -}} +
+
+
+{{ end -}} +{{< /palette.inline >}} + +### Grays + +The Boosted grays are used as backgrounds, colors or borders to highlight some elements or actions (hover state, disabled state, supporting texts, dividers, low highlights). They should not dominate the page. + +{{< palette.inline >}} +{{- range where $.Site.Data.palette "category" "Grays" }} +
+ {{- range $color := .colors }} +
+ + + + +
+

{{ $color.hex }}

+

{{ $color.darkHex }}

+
+
+ {{ end -}} +
+
+
+{{ end -}} +{{< /palette.inline >}} + +### Supporting + +The Boosted supporting colors are meant for backgrounds, data display or illustrations. As you may have noticed, they don't change their color depending on the theme. They should not dominate the page. + +{{< palette.inline >}} +{{- range where $.Site.Data.palette "category" "Supporting colors" }} +
+ {{- range $color := .colors }} +
+
+ + + +
+ Supporting {{ $color.name | lower -}} +
+
+
+

{{ $color.hex }}

+

{{ $color.hex }}

+
+
+ {{ end -}} +
+{{ end -}} +{{< /palette.inline >}} + +## CSS + +### Variables + +{{< added-in "5.3.0" >}} + +Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-rgb), .5)`. + +#### Theming + +The following CSS variables are the custom properties built from [our theming Sass map](#theming) and are used to create our [usable variables](#usable-variables). + +Please note that only the functional colors are meant to be used directly in a project. + +
+ + + + + + + + + + + {{< themeColors.inline >}} + {{- range index $.Site.Data "theme-colors" }} + + + + + + + {{ end -}} + {{< /themeColors.inline >}} + +
DescriptionLight valueDark valueVariables
+ {{.description}} + +
+
+
+ 		+
+
+
+ 		+
+ + + + + +
+
+
+ +#### Usable variables + +Some more contextual CSS variables are provided to create high-level semantic variables for your project that are linked to reusable basic concepts such as disabled, hover, focus, active, etc. + +**They are meant to be used directly in a project** and will ease its maintenance, especially after a Boosted update. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescriptionLight valueDark valueVariables
+ {{< markdown >}}**Body** - Default background and foreground colors, including components. {{< /markdown >}} + + {{< markdown >}}Background.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}Foreground.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}**Body secondary** - Use the `color` option for less accentuated text (placeholder, helper text, code). Use the `bg` option to low emphasis a content or display a specific component state (hover, form disabled).{{< /markdown >}} + + {{< markdown >}}Background.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}Foreground.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}**Body tertiary** - Use the tertiary `color` and `bg` options to have a body secondary less-emphasized rendering.{{< /markdown >}} + + {{< markdown >}}Background.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}Foreground.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}**Emphasis** - For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}**Border** - Use the default border for clickable component borders and the subtle variant for everything else.{{< /markdown >}} + + {{< markdown >}}Default.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+ {{< markdown >}}Subtle.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+ {{< markdown >}}**Disabled** - For disabled state.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+ {{< markdown >}}**Highlight** - Use to highlight some components.{{< /markdown >}} + + {{< markdown >}}Background.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+ {{< markdown >}}Foreground.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+ {{< markdown >}}**Tertiary active** - Use for active components often accompanied to an orange active bar.{{< /markdown >}} + + {{< markdown >}}Background.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+ {{< markdown >}}**Focus visible** - Use `outer` for the focus outline. Use `inner` for the focus box-shadow.{{< /markdown >}} + + {{< markdown >}}Outer.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+ {{< markdown >}}Inner.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+ {{< markdown >}}**Link** - Use the default `color` for a link and the hover variant for a link hover state.{{< /markdown >}} + + {{< markdown >}}Default.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}Hover.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ + +
+
+ {{< markdown >}}**Code** - For code color text.{{< /markdown >}} + +
+
+
+ 		+
+
+
+ 		+
+ +
+
+
+ +### Sass variables + +#### Boosted variables + +Our functional and supporting colors are defined for light and dark modes. + +
+
+{< scss-docs name="brand-colors" file="scss/_variables.scss" >}} +
+
+{< scss-docs name="brand-colors-dark" file="scss/_variables-dark.scss" >}} +
+
+ +#### Bootstrap variables + +Our Boosted variables are mapped to Bootstrap's basic color variables. + +{{< scss-docs name="color-variables" file="scss/_variables.scss" >}} + +Then, these basic color variables are used to define the theme colors. They are used to create our [CSS theming variables](#theming-1). + +
+
+{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} +
+
+{{< scss-docs name="theme-color-dark-variables" file="scss/_variables-dark.scss" >}} +
+
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