From 11e7727647832245a962e38808126236ade04786 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 27 Nov 2024 17:56:59 +0100 Subject: [PATCH] Add color tokens in OUDS Web --- .bundlewatch.config.json | 16 +- scss/_accordion.scss | 2 +- scss/_button-group.scss | 4 +- scss/_buttons.scss | 10 +- scss/_color-palette.scss | 79 - scss/_config.scss | 3 + scss/_dropdown.scss | 2 +- scss/_list-group.scss | 6 +- scss/_root.scss | 12 - scss/_stepped-process.scss | 4 +- scss/_utilities.scss | 6 - scss/_variables-dark.scss | 55 +- scss/_variables.scss | 406 ++--- scss/forms/_star-rating.scss | 2 +- scss/mixins/_focus.scss | 2 +- scss/ouds-web-grid.scss | 2 + scss/ouds-web-reboot.scss | 2 + scss/ouds-web-utilities.scss | 2 + scss/ouds-web.scss | 2 + .../_ouds-web-bootstrap-grid.test.scss | 8 + .../_ouds-web-bootstrap-utilities.test.scss | 574 +++++- .../_auto-import-of-variables-dark.test.scss | 2 + scss/tests/mixins/_color-modes.test.scss | 6 +- scss/tests/mixins/_utilities.test.scss | 2 + scss/tests/utilities/_api.test.scss | 2 + scss/tokens/_component.scss | 178 +- scss/tokens/_composite.scss | 16 +- scss/tokens/_raw.scss | 108 +- .../tokens/_semantic-colors-custom-props.scss | 356 ++++ site/assets/js/stackblitz.js | 2 +- site/assets/scss/_colors.scss | 4 +- site/assets/scss/_component-examples.scss | 12 +- site/assets/scss/_content.scss | 6 +- site/assets/scss/_masthead.scss | 2 +- site/assets/scss/_search.scss | 4 +- site/assets/scss/_syntax.scss | 2 +- site/assets/scss/_tarteaucitron.scss | 2 +- site/assets/scss/_variables.scss | 2 +- site/assets/scss/docs.scss | 2 + site/assets/scss/search.scss | 2 + site/content/docs/0.0/content/reboot.md | 4 +- .../docs/0.0/customize/color-palette.md | 200 +- .../docs/0.0/customize/custom-libraries.md | 8 +- .../0.0/examples/cheatsheet/cheatsheet.css | 163 ++ .../0.0/examples/cheatsheet/cheatsheet.js | 73 + .../docs/0.0/examples/cheatsheet/index.html | 1606 +++++++++++++++++ site/content/docs/0.0/layout/containers.md | 16 +- .../docs/0.0/migration-from-boosted.md | 2 + site/content/docs/0.0/migration.md | 2 + site/content/docs/0.0/utilities/api.md | 168 +- site/data/colors.yml | 10 +- site/data/examples.yml | 7 + site/data/grays.yml | 18 +- site/data/palette.yml | 389 ++-- site/data/sidebar.yml | 1 - site/layouts/partials/docs-navbar.html | 4 +- site/layouts/partials/examples/main.html | 53 +- site/layouts/partials/home/customize.html | 1 + site/layouts/shortcodes/example.html | 4 +- site/layouts/shortcodes/js-docs.html | 4 +- site/layouts/shortcodes/scss-docs.html | 4 +- .../0.0/assets/brand/bootstrap-logo-white.svg | 1 + .../0.0/assets/img/examples/cheatsheet.png | Bin 0 -> 8132 bytes .../0.0/assets/img/examples/cheatsheet@2x.png | Bin 0 -> 19324 bytes stories/create-stories-from-doc.js | 2 +- 65 files changed, 3780 insertions(+), 869 deletions(-) delete mode 100644 scss/_color-palette.scss create mode 100644 scss/_config.scss create mode 100644 scss/tokens/_semantic-colors-custom-props.scss create mode 100644 site/content/docs/0.0/examples/cheatsheet/cheatsheet.css create mode 100644 site/content/docs/0.0/examples/cheatsheet/cheatsheet.js create mode 100644 site/content/docs/0.0/examples/cheatsheet/index.html create mode 100644 site/static/docs/0.0/assets/brand/bootstrap-logo-white.svg create mode 100644 site/static/docs/0.0/assets/img/examples/cheatsheet.png create mode 100644 site/static/docs/0.0/assets/img/examples/cheatsheet@2x.png diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 1345328a00..c6efe2b3e0 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/ouds-web-bootstrap.css", - "maxSize": "62.75 kB" + "maxSize": "63.5 kB" }, { "path": "./dist/css/ouds-web-bootstrap.min.css", - "maxSize": "59.5 kB" + "maxSize": "60.5 kB" }, { "path": "./dist/css/ouds-web-grid.css", @@ -18,27 +18,27 @@ }, { "path": "./dist/css/ouds-web-reboot.css", - "maxSize": "5.75 kB" + "maxSize": "7.0 kB" }, { "path": "./dist/css/ouds-web-reboot.min.css", - "maxSize": "5.5 kB" + "maxSize": "6.5 kB" }, { "path": "./dist/css/ouds-web-utilities.css", - "maxSize": "22.25 kB" + "maxSize": "23.0 kB" }, { "path": "./dist/css/ouds-web-utilities.min.css", - "maxSize": "21.0 kB" + "maxSize": "22.0 kB" }, { "path": "./dist/css/ouds-web.css", - "maxSize": "56.25 kB" + "maxSize": "57.0 kB" }, { "path": "./dist/css/ouds-web.min.css", - "maxSize": "53.0 kB" + "maxSize": "53.75 kB" }, { "path": "./dist/js/ouds-web.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index f2e13cb74a..0a20d77231 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -82,7 +82,7 @@ // OUDS mod &[data-focus-visible-added] { outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width)); - box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color); + box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset); } // End mod } diff --git a/scss/_button-group.scss b/scss/_button-group.scss index fa67d932a4..06d37281e9 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -142,11 +142,11 @@ .btn.active + &, &:active + * + .btn, &.active + * + .btn { - border-color: $supporting-orange; + border-color: $ouds-color-orange-500; } .btn-group.show > &:not(:focus):not(:active)::before { - color: $supporting-orange; + color: $ouds-color-orange-500; background-color: currentcolor; } // End mod diff --git a/scss/_buttons.scss b/scss/_buttons.scss index c5fd306c15..2573a9eef6 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -105,7 +105,7 @@ // scss-docs-start btn-variant-loops .btn-primary { - @include button-variant($supporting-orange, $supporting-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color)); + @include button-variant($ouds-color-orange-500, $ouds-color-orange-500, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color)); } .btn-success { @@ -151,7 +151,7 @@ // OUDS mod: OUDS Web-specific no outline button .btn-no-outline { - @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}disabled-color)); + @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}color-content-disabled)); .btn-check:checked + &.btn { border-color: transparent; @@ -166,7 +166,7 @@ // OUDS mod: OUDS Web-specific toggle button .btn-toggle { - @include button-variant(transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), $supporting-orange, $supporting-orange, $black, transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}disabled-color)); + @include button-variant(transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}primary), $ouds-color-orange-500, $ouds-color-orange-500, $black, transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}color-content-disabled)); .btn-check:checked + & { color: var(--#{$prefix}highlight-color); @@ -201,7 +201,7 @@ // OUDS mod: OUDS Web-specific dropdown button .btn-dropdown { - @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color)); + @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}color-content-disabled), var(--#{$prefix}color-content-disabled)); } // End mod @@ -270,7 +270,7 @@ --#{$prefix}btn-active-color: var(--#{$prefix}highlight-color); --#{$prefix}btn-active-bg: var(--#{$prefix}highlight-bg); --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color); - --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color); + --#{$prefix}btn-disabled-color: var(--#{$prefix}color-content-disabled); --#{$prefix}btn-disabled-bg: transparent; @include border-radius(50%, 50%); @include button-icon(var(--#{$prefix}network-logo)); diff --git a/scss/_color-palette.scss b/scss/_color-palette.scss deleted file mode 100644 index 295f324de4..0000000000 --- a/scss/_color-palette.scss +++ /dev/null @@ -1,79 +0,0 @@ -// scss-docs-start palette -// Palette - -// Colors palette - -// Orange -$ods-orange-100: #ff7900 !default; -$ods-orange-200: #f16e00 !default; - -// White, grays and black -$ods-white-100: #fff !default; -$ods-gray-200: #eee !default; -$ods-gray-300: #ddd !default; -$ods-gray-400: #ccc !default; -$ods-gray-500: #999 !default; -$ods-gray-600: #666 !default; -$ods-gray-700: #595959 !default; -$ods-gray-800: #333 !default; -$ods-gray-900: #141414 !default; -$ods-black-900: #000 !default; - -// Forest -$ods-forest-100: #6c6 !default; -$ods-forest-200: #228722 !default; - -// Fire -$ods-fire-100: #ff4d4d !default; -$ods-fire-200: #cd3c14 !default; - -// Water -$ods-water-100: #69f !default; -$ods-water-200: #4170d8 !default; - -// Sun -$ods-sun-100: #fc0 !default; -// fusv-disable -$ods-sun-200: #8f7200 !default; -// fusv-enable - -// Blue -$ods-blue-100: #b5e8f7 !default; -$ods-blue-200: #80ceef !default; -$ods-blue-300: #4bb4e6 !default; -$ods-blue-400: #3e9dd6 !default; -$ods-blue-500: #237eca !default; -$ods-blue-600: #085ebd !default; - -// Green -$ods-green-100: #b8ebd6 !default; -$ods-green-200: #84d5af !default; -$ods-green-300: #50be87 !default; -$ods-green-400: #27a971 !default; -$ods-green-500: #198c51 !default; -$ods-green-600: #0a6e31 !default; - -// Pink -$ods-pink-100: #ffe8f7 !default; -$ods-pink-200: #ffceef !default; -$ods-pink-300: #ffb4e6 !default; -$ods-pink-400: #ff8ad4 !default; -$ods-pink-500: #d573bb !default; -$ods-pink-600: #bc4d9a !default; - -// Purple -$ods-purple-100: #d9c2f0 !default; -$ods-purple-200: #c1a4e4 !default; -$ods-purple-300: #a885d8 !default; -$ods-purple-400: #9373bd !default; -$ods-purple-500: #6e4aa7 !default; -$ods-purple-600: #492191 !default; - -// Yellow -$ods-yellow-100: #fff6b6 !default; -$ods-yellow-200: #ffe45b !default; -$ods-yellow-300: #ffd200 !default; -$ods-yellow-400: #ffb400 !default; -$ods-yellow-500: #b98f11 !default; -$ods-yellow-600: #9d6e06 !default; -// scss-docs-end palette diff --git a/scss/_config.scss b/scss/_config.scss new file mode 100644 index 0000000000..f625993503 --- /dev/null +++ b/scss/_config.scss @@ -0,0 +1,3 @@ +// Configuration file for OUDS Web + +$prefix: bs- !default; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index bbfa044343..42523f6510 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -211,7 +211,7 @@ &:focus { &[data-focus-visible-added] { outline-offset: -$focus-visible-outer-width; - box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color); + box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset); } } // End mod diff --git a/scss/_list-group.scss b/scss/_list-group.scss index f1d427cb1d..c18bf9f06a 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -141,11 +141,11 @@ &:focus { &[data-focus-visible-added] { outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width)); - box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color); + box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset); &.active { - outline-color: var(--#{$prefix}focus-visible-inner-color); - box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color); + outline-color: var(--#{$prefix}color-border-focus-inset); + box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus); } } } diff --git a/scss/_root.scss b/scss/_root.scss index b181ee518a..c405c2945d 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -258,14 +258,11 @@ --#{$prefix}code-color: #{$code-color}; --#{$prefix}highlight-color: #{$mark-color}; --#{$prefix}highlight-bg: #{$mark-bg}; - --#{$prefix}disabled-color: #{$disabled-color}; // OUDS mod - --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg}; // OUDS mod // scss-docs-start root-border-var-ouds --#{$prefix}border-width: #{$border-width}; --#{$prefix}border-style: #{$border-style}; --#{$prefix}border-color: #{$border-color}; - --#{$prefix}border-color-subtle: #{$border-color-subtle}; // OUDS mod --#{$prefix}border-color-translucent: #{$border-color-translucent}; // scss-docs-end root-border-var-ouds @@ -401,9 +398,6 @@ --#{$prefix}box-shadow-inset: #{$box-shadow-inset}; } - --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color}; // OUDS mod - --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color}; // OUDS mod - // Focus styles // scss-docs-start root-focus-variables --#{$prefix}focus-ring-width: #{$focus-ring-width}; @@ -498,16 +492,10 @@ --#{$prefix}code-color: #{$code-color-dark}; --#{$prefix}highlight-color: #{$mark-color-dark}; --#{$prefix}highlight-bg: #{$mark-bg-dark}; - --#{$prefix}disabled-color: #{$disabled-color-dark}; // OUDS mod - --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg-dark}; // OUDS mod --#{$prefix}border-color: #{$border-color-dark}; - --#{$prefix}border-color-subtle: #{$border-color-subtle-dark}; // OUDS mod --#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; - --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-dark}; // OUDS mod - --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-dark}; // OUDS mod - --#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // OUDS mod --#{$prefix}form-valid-color: #{$form-valid-color-dark}; diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss index 7ca186c62a..1f541d884d 100644 --- a/scss/_stepped-process.scss +++ b/scss/_stepped-process.scss @@ -99,7 +99,7 @@ color: var(--#{$prefix}stepped-process-link-color); text-decoration: if($link-decoration == none, null, none); white-space: nowrap; - outline-color: var(--#{$prefix}focus-visible-inner-color); + outline-color: var(--#{$prefix}color-border-focus-inset); box-shadow: none; &::before { @@ -121,7 +121,7 @@ .active ~ .stepped-process-item & { color: var(--#{$prefix}stepped-process-link-next-color); - outline-color: var(--#{$prefix}focus-visible-outer-color); + outline-color: var(--#{$prefix}color-border-focus); } } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 8b3fcb310a..9aca39a469 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1061,12 +1061,6 @@ $utilities: map-merge( "transparent": 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)), - "supporting-green": $supporting-green, // OUDS mod - "supporting-blue": $supporting-blue, // OUDS mod - "supporting-yellow": $supporting-yellow, // OUDS mod - "supporting-pink": $supporting-pink, // OUDS mod - "supporting-purple": $supporting-purple, // OUDS mod - "supporting-orange": $supporting-orange, // OUDS mod ) ) ), diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 8f21cc8762..df43bf8eef 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -7,21 +7,14 @@ // // OUDS mod -// scss-docs-start brand-colors-dark -$functional-green-dark: $ods-forest-100 !default; -$functional-blue-dark: $ods-water-100 !default; -$functional-yellow-dark: $functional-yellow !default; -$functional-red-dark: $ods-fire-100 !default; -// scss-docs-end brand-colors-dark - // scss-docs-start sass-dark-mode-vars // scss-docs-start theme-color-dark-variables -$primary-dark: $supporting-orange !default; +$primary-dark: $ouds-color-content-brand-primary-dark !default; $secondary-dark: $white !default; -$success-dark: $functional-green-dark !default; -$info-dark: $functional-blue-dark !default; -$warning-dark: $functional-yellow-dark !default; -$danger-dark: $functional-red-dark !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; // scss-docs-end theme-color-dark-variables @@ -73,32 +66,26 @@ $light-border-subtle-dark: $light-dark !default; // OUDS mod: instead o $dark-border-subtle-dark: $dark-dark !default; // OUDS mod: instead of `$gray-800` // scss-docs-end theme-border-subtle-dark-variables -$body-color-dark: $white !default; // OUDS mod: instead of `$gray-300` -$body-bg-dark: $gray-950 !default; // OUDS mod: instead of `$gray-900` -$body-secondary-color-dark: $gray-600 !default; // OUDS mod: instead of `rgba($body-color-dark, .75)` -$body-secondary-bg-dark: $gray-900 !default; // OUDS mod: instead of `$gray-800` -$body-tertiary-color-dark: $gray-700 !default; // OUDS mod: instead of `rgba($body-color-dark, .5)` -$body-tertiary-bg-dark: $black !default; // OUDS mod: instead of `mix($gray-800, $gray-900, 50%)` -$body-emphasis-color-dark: $white !default; // OUDS mod: instead of `$gray-100` -$disabled-color-dark: var(--#{$prefix}tertiary-color) !default; // OUDS mod -$tertiary-active-bg-dark: $gray-700 !default; // OUDS mod -$border-color-dark: $white !default; // OUDS mod: instead of `$gray-700` -$border-color-subtle-dark: $gray-700 !default; // OUDS mod +$body-color-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$gray-300` +$body-bg-dark: $ouds-color-bg-primary-dark !default; // OUDS mod: instead of `$gray-900` +$body-secondary-color-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `rgba($body-color-dark, .75)` +$body-secondary-bg-dark: $ouds-color-bg-secondary-dark !default; // OUDS mod: instead of `$gray-800` +$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; $headings-color-dark: inherit !default; $link-color-dark: $white !default; // OUDS mod: instead of `tint-color($primary, 40%)` -$link-hover-color-dark: $supporting-orange !default; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)` -$code-color-dark: $gray-600 !default; // OUDS mod: instead of `tint-color($code-color, 40%)` -$mark-color-dark: $black !default; // OUDS mod: instead of `$body-color-dark` -$mark-bg-dark: $white !default; // OUDS mod: instead of `$yellow-800` - -$focus-ring-color-dark: rgba($supporting-orange, $focus-ring-opacity) !default; // OUDS mod +$link-hover-color-dark: $ouds-color-orange-500 !default; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)` +$code-color-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `tint-color($code-color, 40%)` +$mark-color-dark: $ouds-color-bg-primary-dark !default; // OUDS mod: instead of `$body-color-dark` +$mark-bg-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$yellow-800` -$focus-visible-inner-color-dark: $black !default; // OUDS mod -$focus-visible-outer-color-dark: $white !default; // OUDS mod +$focus-ring-color-dark: rgba($ouds-color-orange-500, $focus-ring-opacity) !default; // OUDS mod -$success-icon-dark: url("data:image/svg+xml,") !default; // OUDS mod -$danger-icon-dark: url("data:image/svg+xml,") !default; // OUDS mod +$success-icon-dark: url("data:image/svg+xml,") !default; // OUDS mod +$danger-icon-dark: url("data:image/svg+xml,") !default; // OUDS mod // OUDS mod $svg-as-custom-props-dark: ( @@ -114,7 +101,7 @@ $svg-as-custom-props-dark: ( $form-check-filter-dark: none !default; // OUDS mod $form-check-input-disabled-color-dark: $gray-700 !default; // OUDS mod $form-color-disabled-filter-dark: brightness(0) invert(1) brightness(.4) !default; // OUDS mod -$form-switch-square-bg-dark: $gray-950 !default; // OUDS mod +$form-switch-square-bg-dark: $ouds-color-functional-dark-gray-880 !default; // OUDS mod // OUDS mod: no $form-select-indicator-color-dark $form-select-indicator-dark: escape-svg(url("data:image/svg+xml,")) !default; // OUDS mod: instead of Bootstrap svg diff --git a/scss/_variables.scss b/scss/_variables.scss index 68420fb680..4faf809e5c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -5,19 +5,19 @@ // Color system +// TODO LM: Need to decide what to set in here. // scss-docs-start gray-color-variables -$white: $ods-white-100 !default; -$gray-100: #fafafa !default; -$gray-200: #f6f6f6 !default; -$gray-300: $ods-gray-200 !default; -$gray-400: $ods-gray-300 !default; -$gray-500: $ods-gray-400 !default; -$gray-600: $ods-gray-500 !default; -$gray-700: $ods-gray-600 !default; -$gray-800: $ods-gray-700 !default; -$gray-900: $ods-gray-800 !default; -$gray-950: $ods-gray-900 !default; -$black: $ods-black-900 !default; +$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` +$gray-200: $ouds-color-functional-light-gray-160 !default; // OUDS mod: instead of `#e9ecef` +$gray-300: $ouds-color-functional-light-gray-400 !default; // OUDS mod: instead of `#dee2e6` +$gray-400: $ouds-color-functional-light-gray-560 !default; // OUDS mod: instead of `#ced4da` +$gray-500: $ouds-color-functional-dark-gray-160 !default; // OUDS mod: instead of `#adb5bd` +$gray-600: $ouds-color-functional-dark-gray-400 !default; // OUDS mod: instead of `#6c757d` +$gray-700: $ouds-color-functional-dark-gray-480 !default; // OUDS mod: instead of `#495057` +$gray-800: $ouds-color-functional-dark-gray-640 !default; // OUDS mod: instead of `#343a40` +$gray-900: $ouds-color-functional-dark-gray-880 !default; // OUDS mod: instead of `#212529` +$black: $ouds-color-functional-black !default; // OUDS mod: instead of `#000` // scss-docs-end gray-color-variables // fusv-disable @@ -32,40 +32,21 @@ $grays: ( "700": $gray-700, "800": $gray-800, "900": $gray-900, - "950": $gray-950, ) !default; // scss-docs-end gray-colors-map // fusv-enable -// OUDS mod -// scss-docs-start brand-colors -//// Functional colors -$functional-green: $ods-forest-200 !default; -$functional-blue: $ods-water-200 !default; -$functional-yellow: $ods-sun-100 !default; -$functional-red: $ods-fire-200 !default; -//// Supporting colors -$supporting-blue: $ods-blue-300 !default; -$supporting-yellow: $ods-yellow-300 !default; -$supporting-green: $ods-green-300 !default; -$supporting-purple: $ods-purple-300 !default; -$supporting-pink: $ods-pink-300 !default; -$supporting-orange: $ods-orange-100 !default; -// scss-docs-end brand-colors -// End mod - - // scss-docs-start color-variables -$blue: $functional-blue !default; -$indigo: $supporting-purple !default; -$purple: $supporting-purple !default; -$pink: $supporting-pink !default; -$red: $functional-red !default; -$orange: $ods-orange-200 !default; -$yellow: $functional-yellow !default; -$green: $functional-green !default; -$teal: $supporting-green !default; -$cyan: $supporting-blue !default; +$blue: $ouds-color-functional-dodger-blue-500 !default; // OUDS mod: instead of `#0d6efd` +$indigo: $ouds-color-decorative-amethyst-400 !default; // OUDS mod: instead of `#6610f2` +$purple: $ouds-color-decorative-amethyst-400 !default; // OUDS mod: instead of `#6f42c1` +$pink: $ouds-color-decorative-shocking-pink-200 !default; // OUDS mod: instead of `#d63384` +$red: $ouds-color-functional-scarlet-600 !default; // OUDS mod: instead of `#dc3545` +$orange: $ouds-color-orange-550 !default; // OUDS mod: instead of `#fd7e14` +$yellow: $ouds-color-functional-sun-500 !default; // OUDS mod: instead of `#ffc107` +$green: $ouds-color-functional-malachite-500 !default; // OUDS mod: instead of `#198754` +$teal: $ouds-color-decorative-emerald-500 !default; // OUDS mod: instead of `#20c997` +$cyan: $ouds-color-decorative-sky-400 !default; // OUDS mod: instead of `#0dcaf0` // scss-docs-end color-variables // scss-docs-start colors-map @@ -96,105 +77,105 @@ $color-contrast-dark: $black !default; $color-contrast-light: $white !default; // fusv-disable -$blue-100: tint-color($blue, 80%) !default; -$blue-200: tint-color($blue, 60%) !default; -$blue-300: tint-color($blue, 40%) !default; -$blue-400: tint-color($blue, 20%) !default; -$blue-500: $blue !default; -$blue-600: shade-color($blue, 20%) !default; -$blue-700: shade-color($blue, 40%) !default; -$blue-800: shade-color($blue, 60%) !default; -$blue-900: shade-color($blue, 80%) !default; - -$indigo-100: $ods-purple-100 !default; -$indigo-200: $ods-purple-200 !default; -$indigo-300: $ods-purple-300 !default; -$indigo-400: $ods-purple-400 !default; -$indigo-500: $ods-purple-500 !default; -$indigo-600: $ods-purple-600 !default; -$indigo-700: shade-color($ods-purple-600, 20%) !default; -$indigo-800: shade-color($ods-purple-600, 40%) !default; -$indigo-900: shade-color($ods-purple-600, 60%) !default; - -$purple-100: $ods-purple-100 !default; -$purple-200: $ods-purple-200 !default; -$purple-300: $ods-purple-300 !default; -$purple-400: $ods-purple-400 !default; -$purple-500: $ods-purple-500 !default; -$purple-600: $ods-purple-600 !default; -$purple-700: shade-color($ods-purple-600, 20%) !default; -$purple-800: shade-color($ods-purple-600, 40%) !default; -$purple-900: shade-color($ods-purple-600, 60%) !default; - -$pink-100: $ods-pink-100 !default; -$pink-200: $ods-pink-200 !default; -$pink-300: $ods-pink-300 !default; -$pink-400: $ods-pink-400 !default; -$pink-500: $ods-pink-500 !default; -$pink-600: $ods-pink-600 !default; -$pink-700: shade-color($ods-pink-600, 20%) !default; -$pink-800: shade-color($ods-pink-600, 40%) !default; -$pink-900: shade-color($ods-pink-600, 60%) !default; - -$red-100: tint-color($red, 80%) !default; -$red-200: tint-color($red, 60%) !default; -$red-300: tint-color($red, 40%) !default; -$red-400: tint-color($red, 20%) !default; -$red-500: $red !default; -$red-600: shade-color($red, 20%) !default; -$red-700: shade-color($red, 40%) !default; -$red-800: shade-color($red, 60%) !default; -$red-900: shade-color($red, 80%) !default; - -$orange-100: tint-color($orange, 80%) !default; -$orange-200: tint-color($orange, 60%) !default; -$orange-300: tint-color($orange, 40%) !default; -$orange-400: tint-color($orange, 20%) !default; -$orange-500: $orange !default; -$orange-600: shade-color($orange, 20%) !default; -$orange-700: shade-color($orange, 40%) !default; -$orange-800: shade-color($orange, 60%) !default; -$orange-900: shade-color($orange, 80%) !default; - -$yellow-100: $ods-yellow-100 !default; -$yellow-200: $ods-yellow-200 !default; -$yellow-300: $ods-yellow-300 !default; -$yellow-400: $ods-yellow-400 !default; -$yellow-500: $ods-yellow-500 !default; -$yellow-600: $ods-yellow-600 !default; -$yellow-700: shade-color($ods-yellow-600, 20%) !default; -$yellow-800: shade-color($ods-yellow-600, 40%) !default; -$yellow-900: shade-color($ods-yellow-600, 60%) !default; - -$green-100: tint-color($green, 80%) !default; -$green-200: tint-color($green, 60%) !default; -$green-300: tint-color($green, 40%) !default; -$green-400: tint-color($green, 20%) !default; -$green-500: $green !default; -$green-600: shade-color($green, 20%) !default; -$green-700: shade-color($green, 40%) !default; -$green-800: shade-color($green, 60%) !default; -$green-900: shade-color($green, 80%) !default; - -$teal-100: $ods-green-100 !default; -$teal-200: $ods-green-200 !default; -$teal-300: $ods-green-300 !default; -$teal-400: $ods-green-400 !default; -$teal-500: $ods-green-500 !default; -$teal-600: $ods-green-600 !default; -$teal-700: shade-color($ods-green-600, 20%) !default; -$teal-800: shade-color($ods-green-600, 40%) !default; -$teal-900: shade-color($ods-green-600, 60%) !default; - -$cyan-100: $ods-blue-100 !default; -$cyan-200: $ods-blue-200 !default; -$cyan-300: $ods-blue-300 !default; -$cyan-400: $ods-blue-400 !default; -$cyan-500: $ods-blue-500 !default; -$cyan-600: $ods-blue-600 !default; -$cyan-700: shade-color($ods-blue-600, 20%) !default; -$cyan-800: shade-color($ods-blue-600, 40%) !default; -$cyan-900: shade-color($ods-blue-600, 60%) !default; +$blue-100: $ouds-color-functional-dodger-blue-100 !default; // OUDS mod: instead of `tint-color($blue, 80%)` +$blue-200: $ouds-color-functional-dodger-blue-200 !default; // OUDS mod: instead of `tint-color($blue, 60%)` +$blue-300: $ouds-color-functional-dodger-blue-300 !default; // OUDS mod: instead of `tint-color($blue, 40%)` +$blue-400: $ouds-color-functional-dodger-blue-400 !default; // OUDS mod: instead of `tint-color($blue, 20%)` +$blue-500: $ouds-color-functional-dodger-blue-500 !default; // OUDS mod: instead of `$blue` +$blue-600: $ouds-color-functional-dodger-blue-600 !default; // OUDS mod: instead of `shade-color($blue, 20%)` +$blue-700: $ouds-color-functional-dodger-blue-700 !default; // OUDS mod: instead of `shade-color($blue, 40%)` +$blue-800: $ouds-color-functional-dodger-blue-800 !default; // OUDS mod: instead of `shade-color($blue, 60%)` +$blue-900: $ouds-color-functional-dodger-blue-900 !default; // OUDS mod: instead of `shade-color($blue, 80%)` + +$indigo-100: $ouds-color-decorative-amethyst-100 !default; // OUDS mod: instead of `tint-color($indigo, 80%)` +$indigo-200: $ouds-color-decorative-amethyst-200 !default; // OUDS mod: instead of `tint-color($indigo, 60%)` +$indigo-300: $ouds-color-decorative-amethyst-300 !default; // OUDS mod: instead of `tint-color($indigo, 40%)` +$indigo-400: $ouds-color-decorative-amethyst-400 !default; // OUDS mod: instead of `tint-color($indigo, 20%)` +$indigo-500: $ouds-color-decorative-amethyst-500 !default; // OUDS mod: instead of `$indigo` +$indigo-600: $ouds-color-decorative-amethyst-600 !default; // OUDS mod: instead of `shade-color($indigo, 20%)` +$indigo-700: $ouds-color-decorative-amethyst-700 !default; // OUDS mod: instead of `shade-color($indigo, 40%)` +$indigo-800: $ouds-color-decorative-amethyst-800 !default; // OUDS mod: instead of `shade-color($indigo, 60%)` +$indigo-900: $ouds-color-decorative-amethyst-900 !default; // OUDS mod: instead of `shade-color($indigo, 80%)` + +$purple-100: $ouds-color-decorative-amethyst-100 !default; // OUDS mod: instead of `tint-color($purple, 80%)` +$purple-200: $ouds-color-decorative-amethyst-200 !default; // OUDS mod: instead of `tint-color($purple, 60%)` +$purple-300: $ouds-color-decorative-amethyst-300 !default; // OUDS mod: instead of `tint-color($purple, 40%)` +$purple-400: $ouds-color-decorative-amethyst-400 !default; // OUDS mod: instead of `tint-color($purple, 20%)` +$purple-500: $ouds-color-decorative-amethyst-500 !default; // OUDS mod: instead of `$purple` +$purple-600: $ouds-color-decorative-amethyst-600 !default; // OUDS mod: instead of `shade-color($purple, 20%)` +$purple-700: $ouds-color-decorative-amethyst-700 !default; // OUDS mod: instead of `shade-color($purple, 40%)` +$purple-800: $ouds-color-decorative-amethyst-800 !default; // OUDS mod: instead of `shade-color($purple, 60%)` +$purple-900: $ouds-color-decorative-amethyst-900 !default; // OUDS mod: instead of `shade-color($purple, 80%)` + +$pink-100: $ouds-color-decorative-shocking-pink-100 !default; // OUDS mod: instead of `tint-color($pink, 80%)` +$pink-200: $ouds-color-decorative-shocking-pink-200 !default; // OUDS mod: instead of `tint-color($pink, 60%)` +$pink-300: $ouds-color-decorative-shocking-pink-300 !default; // OUDS mod: instead of `tint-color($pink, 40%)` +$pink-400: $ouds-color-decorative-shocking-pink-400 !default; // OUDS mod: instead of `tint-color($pink, 20%)` +$pink-500: $ouds-color-decorative-shocking-pink-500 !default; // OUDS mod: instead of `$pink` +$pink-600: $ouds-color-decorative-shocking-pink-600 !default; // OUDS mod: instead of `shade-color($pink, 20%)` +$pink-700: $ouds-color-decorative-shocking-pink-700 !default; // OUDS mod: instead of `shade-color($pink, 40%)` +$pink-800: $ouds-color-decorative-shocking-pink-800 !default; // OUDS mod: instead of `shade-color($pink, 60%)` +$pink-900: $ouds-color-decorative-shocking-pink-900 !default; // OUDS mod: instead of `shade-color($pink, 80%)` + +$red-100: $ouds-color-functional-scarlet-100 !default; // OUDS mod: instead of `tint-color($red, 80%)` +$red-200: $ouds-color-functional-scarlet-200 !default; // OUDS mod: instead of `tint-color($red, 60%)` +$red-300: $ouds-color-functional-scarlet-300 !default; // OUDS mod: instead of `tint-color($red, 40%)` +$red-400: $ouds-color-functional-scarlet-400 !default; // OUDS mod: instead of `tint-color($red, 20%)` +$red-500: $ouds-color-functional-scarlet-500 !default; // OUDS mod: instead of `$red` +$red-600: $ouds-color-functional-scarlet-600 !default; // OUDS mod: instead of `shade-color($red, 20%)` +$red-700: $ouds-color-functional-scarlet-700 !default; // OUDS mod: instead of `shade-color($red, 40%)` +$red-800: $ouds-color-functional-scarlet-800 !default; // OUDS mod: instead of `shade-color($red, 60%)` +$red-900: $ouds-color-functional-scarlet-900 !default; // OUDS mod: instead of `shade-color($red, 80%)` + +$orange-100: $ouds-color-orange-100 !default; // OUDS mod: instead of `tint-color($orange, 80%)` +$orange-200: $ouds-color-orange-200 !default; // OUDS mod: instead of `tint-color($orange, 60%)` +$orange-300: $ouds-color-orange-300 !default; // OUDS mod: instead of `tint-color($orange, 40%)` +$orange-400: $ouds-color-orange-400 !default; // OUDS mod: instead of `tint-color($orange, 20%)` +$orange-500: $ouds-color-orange-500 !default; // OUDS mod: instead of `$orange` +$orange-600: $ouds-color-orange-600 !default; // OUDS mod: instead of `shade-color($orange, 20%)` +$orange-700: $ouds-color-orange-700 !default; // OUDS mod: instead of `shade-color($orange, 40%)` +$orange-800: $ouds-color-orange-800 !default; // OUDS mod: instead of `shade-color($orange, 60%)` +$orange-900: $ouds-color-orange-900 !default; // OUDS mod: instead of `shade-color($orange, 80%)` + +$yellow-100: $ouds-color-functional-sun-100 !default; // OUDS mod: instead of `tint-color($yellow, 80%)` +$yellow-200: $ouds-color-functional-sun-200 !default; // OUDS mod: instead of `tint-color($yellow, 60%)` +$yellow-300: $ouds-color-functional-sun-300 !default; // OUDS mod: instead of `tint-color($yellow, 40%)` +$yellow-400: $ouds-color-functional-sun-400 !default; // OUDS mod: instead of `tint-color($yellow, 20%)` +$yellow-500: $ouds-color-functional-sun-500 !default; // OUDS mod: instead of `$yellow` +$yellow-600: $ouds-color-functional-sun-600 !default; // OUDS mod: instead of `shade-color($yellow, 20%)` +$yellow-700: $ouds-color-functional-sun-700 !default; // OUDS mod: instead of `shade-color($yellow, 40%)` +$yellow-800: $ouds-color-functional-sun-800 !default; // OUDS mod: instead of `shade-color($yellow, 60%)` +$yellow-900: $ouds-color-functional-sun-900 !default; // OUDS mod: instead of `shade-color($yellow, 80%)` + +$green-100: $ouds-color-functional-malachite-100 !default; // OUDS mod: instead of `tint-color($green, 80%)` +$green-200: $ouds-color-functional-malachite-200 !default; // OUDS mod: instead of `tint-color($green, 60%)` +$green-300: $ouds-color-functional-malachite-300 !default; // OUDS mod: instead of `tint-color($green, 40%)` +$green-400: $ouds-color-functional-malachite-400 !default; // OUDS mod: instead of `tint-color($green, 20%)` +$green-500: $ouds-color-functional-malachite-500 !default; // OUDS mod: instead of `$green` +$green-600: $ouds-color-functional-malachite-600 !default; // OUDS mod: instead of `shade-color($green, 20%)` +$green-700: $ouds-color-functional-malachite-700 !default; // OUDS mod: instead of `shade-color($green, 40%)` +$green-800: $ouds-color-functional-malachite-800 !default; // OUDS mod: instead of `shade-color($green, 60%)` +$green-900: $ouds-color-functional-malachite-900 !default; // OUDS mod: instead of `shade-color($green, 80%)` + +$teal-100: $ouds-color-decorative-emerald-100 !default; // OUDS mod: instead of `tint-color($teal, 80%)` +$teal-200: $ouds-color-decorative-emerald-200 !default; // OUDS mod: instead of `tint-color($teal, 60%)` +$teal-300: $ouds-color-decorative-emerald-300 !default; // OUDS mod: instead of `tint-color($teal, 40%)` +$teal-400: $ouds-color-decorative-emerald-400 !default; // OUDS mod: instead of `tint-color($teal, 20%)` +$teal-500: $ouds-color-decorative-emerald-500 !default; // OUDS mod: instead of `$teal` +$teal-600: $ouds-color-decorative-emerald-600 !default; // OUDS mod: instead of `shade-color($teal, 20%)` +$teal-700: $ouds-color-decorative-emerald-700 !default; // OUDS mod: instead of `shade-color($teal, 40%)` +$teal-800: $ouds-color-decorative-emerald-800 !default; // OUDS mod: instead of `shade-color($teal, 60%)` +$teal-900: $ouds-color-decorative-emerald-900 !default; // OUDS mod: instead of `shade-color($teal, 80%)` + +$cyan-100: $ouds-color-decorative-sky-100 !default; // OUDS mod: instead of `tint-color($cyan, 80%)` +$cyan-200: $ouds-color-decorative-sky-200 !default; // OUDS mod: instead of `tint-color($cyan, 60%)` +$cyan-300: $ouds-color-decorative-sky-300 !default; // OUDS mod: instead of `tint-color($cyan, 40%)` +$cyan-400: $ouds-color-decorative-sky-400 !default; // OUDS mod: instead of `tint-color($cyan, 20%)` +$cyan-500: $ouds-color-decorative-sky-500 !default; // OUDS mod: instead of `$cyan` +$cyan-600: $ouds-color-decorative-sky-600 !default; // OUDS mod: instead of `shade-color($cyan, 20%)` +$cyan-700: $ouds-color-decorative-sky-700 !default; // OUDS mod: instead of `shade-color($cyan, 40%)` +$cyan-800: $ouds-color-decorative-sky-800 !default; // OUDS mod: instead of `shade-color($cyan, 60%)` +$cyan-900: $ouds-color-decorative-sky-900 !default; // OUDS mod: instead of `shade-color($cyan, 80%)` $blues: ( "blue-100": $blue-100, @@ -317,6 +298,7 @@ $cyans: ( ) !default; // fusv-enable +// TODO LM: take care of the rest // scss-docs-start theme-color-variables $primary: $orange !default; $secondary: $black !default; @@ -444,10 +426,7 @@ $enable-bootstrap-compatibility: false !default; // OUDS mod: used to enforce B $enable-dark-mode: true !default; $color-mode-type: data !default; // `data` or `media-query` -// Prefix for :root CSS variables - -$variable-prefix: bs- !default; // Deprecated in Bootstrap v5.2.0 for the shorter `$prefix` -$prefix: $variable-prefix !default; +// OUDS mod: Prefix for :root CSS variables has been moved to `_config.scss` // Gradient // @@ -495,16 +474,16 @@ $position-values: ( // Settings for the `` element. $body-text-align: null !default; -$body-color: $black !default; // OUDS mod: instead of `$gray-900` -$body-bg: $white !default; +$body-color: $ouds-color-content-default-light !default; // OUDS mod: instead of `$gray-900` +$body-bg: $ouds-color-bg-primary-light !default; // OUDS mod: instead of `$white` -$body-secondary-color: $gray-700 !default; // OUDS mod: instead of `rgba($body-color, .75)` -$body-secondary-bg: $gray-300 !default; // OUDS mod: instead of `$gray-200` +$body-secondary-color: $ouds-color-content-muted-light !default; // OUDS mod: instead of `rgba($body-color, .75)` +$body-secondary-bg: $ouds-color-bg-secondary-light !default; // OUDS mod: instead of `$gray-200` -$body-tertiary-color: $gray-500 !default; // OUDS mod: instead of `rgba($body-color, .5)` -$body-tertiary-bg: $gray-100 !default; +$body-tertiary-color: $ouds-color-content-muted-light !default; // OUDS mod: instead of `rgba($body-color, .5)` +$body-tertiary-bg: $ouds-color-bg-tertiary-light !default; // OUDS mod: instead of `$gray-100` -$body-emphasis-color: $black !default; +$body-emphasis-color: $ouds-color-content-default-light !default; // OUDS mod: instead of `$black` // Links // @@ -633,8 +612,7 @@ $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: $black !default; // OUDS mod: instead of `$gray-300` -$border-color-subtle: $gray-500 !default; // OUDS mod +$border-color: $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-300` $border-color-translucent: rgba($black, .175) !default; // scss-docs-end border-variables @@ -654,11 +632,9 @@ $border-radius-2xl: $border-radius-xxl !default; // Deprecated in Boot $focus-visible-zindex: 5 !default; // OUDS mod $focus-visible-inner-width: 2px !default; // OUDS mod -$focus-visible-inner-color: $white !default; // OUDS mod $focus-visible-outer-width: 3px !default; // OUDS mod $focus-visible-outer-offset: $focus-visible-inner-width !default; // OUDS mod -$focus-visible-outer-color: $black !default; // OUDS mod // scss-docs-end focus-visible-variables // scss-docs-start box-shadow-variables @@ -668,10 +644,8 @@ $box-shadow-lg: $ouds-elevation-overlay-emphasized !default; // OUDS mod: in $box-shadow-inset: null !default; // OUDS mod: instead of `inset 0 1px 2px rgba($black, .075)` // scss-docs-end box-shadow-variables -$component-active-color: $black !default; -$component-active-bg: $supporting-orange !default; -$disabled-color: var(--#{$prefix}tertiary-color) !default; // OUDS mod -$tertiary-active-bg: $gray-400 !default; // OUDS mod +$component-active-color: var(--#{$prefix}color-content-on-action-primary-pressed) !default; +$component-active-bg: var(--#{$prefix}color-action-primary-pressed) !default; // scss-docs-start focus-ring-variables $focus-ring-width: .25rem !default; @@ -845,8 +819,8 @@ $dt-font-weight: $font-weight-bold !default; $list-inline-padding: $spacer * .25 !default; $mark-padding: .125em !default; // OUDS mod: instead of `.1875rem` -$mark-color: $white !default; // OUDS mod: instead of `$body-color` -$mark-bg: $black !default; // OUDS mod: instead of `$yellow-100` +$mark-color: $ouds-color-bg-primary-light !default; // OUDS mod: instead of `$body-color` +$mark-bg: $ouds-color-content-default-light !default; // OUDS mod: instead of `$yellow-100` // scss-docs-end type-variables // End mod @@ -889,7 +863,7 @@ $table-variant-hover-bg-factor: .2 !default; // OUDS mod $table-border-factor: .4 !default; // OUDS mod // stylelint-disable-next-line function-disallowed-list $table-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // OUDS mod -$table-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)` +$table-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)` $table-striped-order: odd !default; $table-striped-columns-order: even !default; @@ -979,22 +953,22 @@ $btn-border-width: $input-btn-border-width !default; $btn-default-hover-bg: var(--#{$prefix}highlight-bg) !default; // OUDS mod $btn-default-hover-border: var(--#{$prefix}border-color) !default; // OUDS mod $btn-default-hover-color: var(--#{$prefix}highlight-color) !default; // OUDS mod -$btn-default-active-bg: $supporting-orange !default; // OUDS mod -$btn-default-active-border: $supporting-orange !default; // OUDS mod +$btn-default-active-bg: $ouds-button-color-background-default-pressed !default; // OUDS mod +$btn-default-active-border: $ouds-button-color-border-default-pressed !default; // OUDS mod $btn-default-active-color: $black !default; // OUDS mod -$btn-default-disabled-bg: var(--#{$prefix}disabled-color) !default; // OUDS mod -$btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // OUDS mod +$btn-default-disabled-bg: var(--#{$prefix}color-content-disabled) !default; // OUDS mod +$btn-default-disabled-border: var(--#{$prefix}color-content-disabled) !default; // OUDS mod $btn-default-disabled-color: var(--#{$prefix}highlight-color) !default; // OUDS mod $btn-outline-default-hover-bg: var(--#{$prefix}btn-color) !default; // OUDS mod $btn-outline-default-hover-border: var(--#{$prefix}btn-border-color) !default; // OUDS mod $btn-outline-default-hover-color: $white !default; // OUDS mod -$btn-outline-default-active-bg: $supporting-orange !default; // OUDS mod -$btn-outline-default-active-border: $supporting-orange !default; // OUDS mod +$btn-outline-default-active-bg: $ouds-button-color-background-default-pressed !default; // OUDS mod +$btn-outline-default-active-border: $ouds-button-color-border-default-pressed !default; // OUDS mod $btn-outline-default-active-color: $black !default; // OUDS mod $btn-outline-default-disabled-bg: transparent !default; // OUDS mod -$btn-outline-default-disabled-border: var(--#{$prefix}disabled-color) !default; // OUDS mod -$btn-outline-default-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod +$btn-outline-default-disabled-border: var(--#{$prefix}color-content-disabled) !default; // OUDS mod +$btn-outline-default-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod $btn-font-weight: $font-weight-bold !default; $btn-box-shadow: null !default; @@ -1005,7 +979,7 @@ $btn-active-box-shadow: null !default; $btn-link-color: var(--#{$prefix}link-color) !default; $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default; -$btn-link-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod: instead of `$gray-600` +$btn-link-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `$gray-600` // OUDS mod: no `$btn-link-focus-shadow-rgb` // Allows for customizing button radius independently from global border radius @@ -1048,7 +1022,7 @@ $btn-social-networks: ( "icon": "" ), "mail": ( - "color": $supporting-orange, + "color": $ouds-color-orange-500, "icon": "", "size": 1.5rem ), @@ -1090,7 +1064,7 @@ $form-label-font-size: null !default; $form-label-font-style: null !default; $form-label-font-weight: null !default; $form-label-color: null !default; -$form-label-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod +$form-label-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod $form-label-required-margin-left: .1875rem !default; // OUDS mod $form-label-required-color: var(--#{$prefix}primary) !default; // OUDS mod // scss-docs-end form-label-variables @@ -1125,7 +1099,7 @@ $input-disabled-bg: var(--#{$prefix}secondary-bg) !default; $input-disabled-border-color: null !default; $input-color: var(--#{$prefix}body-color) !default; -$input-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of var(--#{$prefix}border-color) +$input-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of var(--#{$prefix}border-color) $input-border-width: $input-btn-border-width !default; $input-box-shadow: none !default; // OUDS mod @@ -1159,7 +1133,7 @@ $form-color-width: 2.5rem !default; // OUDS mod: instead of $form-color-border-color: var(--#{$prefix}emphasis-color) !default; // OUDS mod $form-color-hover-bg-color: var(--#{$prefix}emphasis-color) !default; // OUDS mod $form-color-disabled-bg-color: $input-bg !default; // OUDS mod -$form-color-disabled-border-color: var(--#{$prefix}disabled-color) !default; // OUDS mod +$form-color-disabled-border-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod $form-color-disabled-background-swatch: var(--#{$prefix}form-color-disabled-filter) !default; // OUDS mod $form-color-disabled-filter: brightness(0) invert(1) brightness(.8) !default; // OUDS mod // scss-docs-end form-input-variables @@ -1212,7 +1186,7 @@ $form-star-margin-between: -.125rem !default; $form-star-rating-checked-color: var(--#{$prefix}primary) !default; $form-star-rating-unchecked-color: var(--#{$prefix}secondary-color) !default; $form-star-rating-hover-color: var(--#{$prefix}highlight-bg) !default; -$form-star-rating-disabled-color: var(--#{$prefix}disabled-color) !default; +$form-star-rating-disabled-color: var(--#{$prefix}color-content-disabled) !default; $form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; @@ -1250,11 +1224,11 @@ $form-switch-checked-bg-size: add(map-get($spacers, 2), map-get($spacers, 1) $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // OUDS mod $form-switch-checked-square-bg: var(--#{$prefix}body-bg) !default; // OUDS mod -$form-switch-checked-bg: $supporting-orange !default; // OUDS mod -$form-switch-checked-border-color: $supporting-orange !default; // OUDS mod +$form-switch-checked-bg: $ouds-color-orange-500 !default; // OUDS mod +$form-switch-checked-border-color: $ouds-color-orange-500 !default; // OUDS mod $form-switch-checked-filter: none !default; // OUDS mod -$form-switch-checked-focus-inner: var(--#{$prefix}focus-visible-inner-color) !default; // OUDS mod -$form-switch-checked-focus-outer: var(--#{$prefix}focus-visible-outer-color) !default; // OUDS mod +$form-switch-checked-focus-inner: var(--#{$prefix}color-border-focus-inset) !default; // OUDS mod +$form-switch-checked-focus-outer: var(--#{$prefix}color-border-focus) !default; // OUDS mod $form-switch-unchecked-invalid-border-color: #31c3eb !default; // OUDS mod: will be rendered red when mixed with the filter // scss-docs-end form-switch-variables @@ -1331,7 +1305,7 @@ $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For f $form-range-thumb-hover-bg: var(--#{$prefix}highlight-bg) !default; // OUDS mod $form-range-thumb-active-bg: var(--#{$prefix}primary) !default; // OUDS mod: instead of `tint-color($component-active-bg, 70%)` $form-range-thumb-active-border: var(--#{$prefix}primary) !default; // OUDS mod -$form-range-thumb-disabled-bg: var(--#{$prefix}disabled-color) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` +$form-range-thumb-disabled-bg: var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` $form-range-thumb-transition: background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing !default; // OUDS mod: no box shadow // scss-docs-end form-range-variables @@ -1431,7 +1405,7 @@ $nav-link-font-weight: $font-weight-bold !default; $nav-link-color: inherit !default; // OUDS mod: instead of `var(--#{$prefix}link-color)` $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default; $nav-link-transition: null !default; // OUDS mod -$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` +$nav-link-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` // OUDS mod: no `$nav-link-focus-box-shadow` $nav-tabs-border-color: var(--#{$prefix}border-color) !default; @@ -1454,7 +1428,7 @@ $nav-underline-gap: 0 !default; // OUDS mod: instead of 1r $nav-underline-gap-lg: $spacer * .5 !default; // OUDS mod // stylelint-disable-next-line function-disallowed-list $nav-underline-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // OUDS mod: instead of `.125rem` -$nav-underline-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod +$nav-underline-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod $nav-underline-border-radius: var(--#{$prefix}border-radius) !default; // OUDS mod $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default; $nav-underline-link-padding-x: 1.8125rem !default; // OUDS mod @@ -1495,7 +1469,7 @@ $navbar-light-color: var(--#{$prefix}emphasis-color) !default; $navbar-light-bg: var(--#{$prefix}highlight-color) !default; // OUDS mod $navbar-light-hover-color: var(--#{$prefix}link-hover-color) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)` $navbar-light-active-color: var(--#{$prefix}primary) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)` -$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)` +$navbar-light-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)` $navbar-light-icon-color: var(--#{$prefix}emphasis-color) !default; // OUDS mod: instead of `rgba($body-color, .75)` $navbar-light-icon-hover-color: var(--#{$prefix}link-hover-color) !default; // OUDS mod $navbar-light-toggler-icon-bg: $burger-icon !default; // OUDS mod: instead of inline SVG @@ -1515,7 +1489,7 @@ $navbar-brand-logo-transition: width $navbar-transition-duration $n $navbar-active-transition: bottom $navbar-transition-duration $navbar-transition-timing-function !default; $navbar-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list -$navbar-border-color: var(--#{$prefix}border-color-subtle) !default; +$navbar-border-color: var(--#{$prefix}color-border-emphasized) !default; $navbar-brand-margin-y-xs: $spacer * .5 !default; $navbar-brand-logo-size-xs: $spacer * 1.5 !default; @@ -1557,8 +1531,8 @@ $navbar-badge-margin-top: .375rem !default; // OUDS mod: deprecated all `$navbar-dark-*` in OUDS Web, kept for Bootstrap compatibility $navbar-dark-border-color: $gray-700 !default; // OUDS mod $navbar-dark-color: $white !default; // OUDS mod: instead of `rgba($white, .55)` -$navbar-dark-hover-color: $supporting-orange !default; // OUDS mod: instead of `rgba($white, .75)` -$navbar-dark-active-color: $supporting-orange !default; // OUDS mod: instead of `$white` +$navbar-dark-hover-color: $ouds-color-orange-500 !default; // OUDS mod: instead of `rgba($white, .75)` +$navbar-dark-active-color: $ouds-color-orange-500 !default; // OUDS mod: instead of `$white` $navbar-dark-disabled-color: $gray-700 !default; // OUDS mod: instead of `rgba($white, .25)` // OUDS mod: no $navbar-dark-icon-color // OUDS mod: no $navbar-dark-toggler-icon-bg since dark toggler are handled with filter @@ -1580,7 +1554,7 @@ $dropdown-font-size: $font-size-base !default; $dropdown-line-height: $line-height-base !default; // OUDS mod $dropdown-color: var(--#{$prefix}body-color) !default; $dropdown-bg: var(--#{$prefix}body-bg) !default; -$dropdown-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` +$dropdown-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` $dropdown-border-radius: var(--#{$prefix}border-radius) !default; $dropdown-border-width: var(--#{$prefix}border-width) !default; $dropdown-inner-border-radius: 0 !default; // OUDS mod: instead of `calc(#{$dropdown-border-radius} - #{$dropdown-border-width})` @@ -1593,9 +1567,9 @@ $dropdown-link-hover-color: $dropdown-link-color !default; $dropdown-link-hover-bg: var(--#{$prefix}secondary-bg) !default; // OUDS mod: instead of `var(--#{$prefix}tertiary-bg)` $dropdown-link-active-color: $dropdown-link-color !default; // OUDS mod: instead of `$component-active-color` -$dropdown-link-active-bg: var(--#{$prefix}tertiary-active-bg) !default; // OUDS mod: instead of `$component-active-bg` +$dropdown-link-active-bg: var(--#{$prefix}color-action-primary-pressed) !default; // OUDS mod: instead of `$component-active-bg` -$dropdown-link-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod: instead of `var(--#{$prefix}tertiary-color)` +$dropdown-link-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `var(--#{$prefix}tertiary-color)` $dropdown-item-padding-y: $spacer * .5 !default; // OUDS mod: instead of `$spacer * .25` $dropdown-item-padding-x: $spacer * .5 !default; // OUDS mod: instead of `$spacer` @@ -1648,7 +1622,7 @@ $pagination-border-color: transparent !default; // OUDS mod: instead o // fusv-disable $pagination-focus-color: null !default; // OUDS mod $pagination-focus-bg: null !default; // OUDS mod: instead of `var(--#{$prefix}secondary-bg)` -$pagination-focus-box-shadow: 0 0 0 $focus-visible-inner-width var(--#{$prefix}focus-visible-inner-color) !default; // OUDS mod: no `$focus-ring-box-shadow` +$pagination-focus-box-shadow: 0 0 0 $focus-visible-inner-width var(--#{$prefix}color-border-focus-inset) !default; // OUDS mod: no `$focus-ring-box-shadow` $pagination-focus-outline: null !default; // OUDS mod // fusv-enable // End mod @@ -1661,7 +1635,7 @@ $pagination-active-color: var(--#{$prefix}highlight-color) !default; / $pagination-active-bg: var(--#{$prefix}highlight-bg) !default; // OUDS mod: instead of `$component-active-bg` $pagination-active-border-color: $pagination-active-bg !default; // OUDS mod: instead of `$component-active-bg` -$pagination-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` +$pagination-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` $pagination-disabled-bg: transparent !default; // OUDS mod: instead of `var(--#{$prefix}secondary-bg)` $pagination-disabled-border-color: transparent !default; // OUDS mod: instead of `var(--#{$prefix}border-color)` @@ -1677,7 +1651,7 @@ $pagination-icon-size: subtract($spacer * 2, calc(var(--#{$prefix}b $pagination-icon-width: add(.5rem, 1px) !default; $pagination-icon-height: subtract(1rem, 1px) !default; -$pagination-active-item-bg: $supporting-orange !default; +$pagination-active-item-bg: $component-active-bg !default; $pagination-active-item-color: $black !default; $pagination-active-item-border: $pagination-active-item-bg !default; // End mod @@ -1706,7 +1680,7 @@ $card-title-spacer-y: $spacer * .5 !default; $card-title-color: null !default; $card-subtitle-color: null !default; $card-border-width: var(--#{$prefix}border-width) !default; -$card-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` +$card-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` $card-border-radius: var(--#{$prefix}border-radius) !default; $card-box-shadow: null !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; @@ -1732,7 +1706,7 @@ $accordion-color: null !default; // OUDS mod: instead of $accordion-bg: transparent !default; // OUDS mod: instead of `var(--#{$prefix}body-bg)` // stylelint-disable-next-line function-disallowed-list $accordion-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // OUDS mod -$accordion-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)` +$accordion-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)` $accordion-border-radius: var(--#{$prefix}border-radius) !default; $accordion-inner-border-radius: subtract($accordion-border-radius, #{$accordion-border-width}) !default; @@ -1820,7 +1794,7 @@ $popover-bg: var(--#{$prefix}body-bg) !default; $popover-max-width: $spacer * 19 !default; // OUDS mod: instead of `276px` $popover-padding-y: $spacer !default; // OUDS mod $popover-border-width: var(--#{$prefix}border-width) !default; -$popover-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` +$popover-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` $popover-border-radius: var(--#{$prefix}border-radius-lg) !default; $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list $popover-box-shadow: var(--#{$prefix}box-shadow) !default; @@ -1860,7 +1834,7 @@ $toast-font-size: .875rem !default; $toast-color: var(--#{$prefix}emphasis-color) !default; // OUDS mod: instead of `null` due to some `bg-dark` issue $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default; $toast-border-width: var(--#{$prefix}border-width) !default; -$toast-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` +$toast-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` $toast-border-radius: var(--#{$prefix}border-radius) !default; $toast-box-shadow: var(--#{$prefix}box-shadow) !default; $toast-spacing: $container-padding-x !default; @@ -1899,7 +1873,7 @@ $modal-content-padding-x: 0 !default; // OUDS mod $modal-content-padding: $modal-content-padding-y $modal-content-padding-x !default; // OUDS mod $modal-content-color: null !default; $modal-content-bg: var(--#{$prefix}body-bg) !default; -$modal-content-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` +$modal-content-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` $modal-content-border-width: var(--#{$prefix}border-width) !default; $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default; $modal-content-inner-border-radius: var(--#{$prefix}border-radius) !default; // OUDS mod: instead of `subtract($modal-content-border-radius, $modal-content-border-width)` @@ -1985,7 +1959,7 @@ $alert-dismissible-padding-r: $alert-padding-y * 3 !default; // 3x covers // scss-docs-start progress-variables $progress-height: $spacer !default; $progress-font-size: $font-size-base !default; -$progress-bg: var(--#{$prefix}tertiary-active-bg) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-bg)` +$progress-bg: var(--#{$prefix}color-action-primary-pressed) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-bg)` $progress-border-radius: var(--#{$prefix}border-radius) !default; $progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default; $progress-bar-color: var(--#{$prefix}highlight-color) !default; // OUDS mod: instead of `$white` @@ -2007,7 +1981,7 @@ $progress-height-xs: $spacer * .25 !default; $list-group-font-weight: $font-weight-bold !default; // OUDS mod $list-group-color: null !default; // OUDS mod: instead of `var(--#{$prefix}body-color)` $list-group-bg: transparent !default; // OUDS mod: instead of `var(--#{$prefix}body-bg)` -$list-group-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)` +$list-group-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)` $list-group-border-width: var(--#{$prefix}border-width) !default; $list-group-border-radius: var(--#{$prefix}border-radius) !default; @@ -2022,10 +1996,10 @@ $list-group-numbered-item-margin-end: 14px !default; // OUDS mod $list-group-hover-bg: var(--#{$prefix}secondary-bg) !default; // OUDS mod: instead of `var(--#{$prefix}tertiary-bg)` $list-group-active-color: var(--#{$prefix}emphasis-color) !default; // OUDS mod: instead of `$component-active-color` -$list-group-active-bg: no-repeat linear-gradient(to right, var(--#{$prefix}primary) 4px, var(--#{$prefix}tertiary-active-bg) 4px) !default; // OUDS mod: instead of `$component-active-bg` +$list-group-active-bg: no-repeat linear-gradient(to right, var(--#{$prefix}primary) 4px, var(--#{$prefix}color-action-primary-pressed) 4px) !default; // OUDS mod: instead of `$component-active-bg` $list-group-active-border-color: $list-group-border-color !default; // OUDS mod: instead of `$list-group-active-bg` -$list-group-disabled-color: var(--#{$prefix}disabled-color) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` +$list-group-disabled-color: var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` $list-group-disabled-bg: $list-group-bg !default; $list-group-action-color: var(--#{$prefix}emphasis-color) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)` @@ -2051,7 +2025,7 @@ $list-group-icons: ( $thumbnail-padding: 0 !default; // OUDS mod $thumbnail-bg: var(--#{$prefix}body-bg) !default; $thumbnail-border-width: var(--#{$prefix}border-width) !default; -$thumbnail-border-color: var(--#{$prefix}border-color-subtle) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` +$thumbnail-border-color: var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)` $thumbnail-border-radius: var(--#{$prefix}border-radius) !default; $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default; // scss-docs-end thumbnail-variables @@ -2075,7 +2049,7 @@ $title-bar-font-size: $h2-font-size !default; $title-bar-line-height: $display-line-height !default; $title-bar-letter-spacing: var(--#{$prefix}font-letter-spacing-heading-large) !default; $title-bar-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list -$title-bar-border-color: var(--#{$prefix}border-color-subtle) !default; +$title-bar-border-color: var(--#{$prefix}color-border-emphasized) !default; // scss-docs-end title-bars-variables // End mod @@ -2200,8 +2174,8 @@ $btn-close-focus-shadow: $btn-focus-box-shadow !default; // OUDS mod $btn-close-hover-color: $btn-close-color !default; $btn-close-active-color: var(--#{$prefix}primary) !default; -$btn-close-active-border-color: var(--#{$prefix}border-color-subtle) !default; -$btn-close-disabled-color: var(--#{$prefix}disabled-color) !default; +$btn-close-active-border-color: var(--#{$prefix}color-border-emphasized) !default; +$btn-close-disabled-color: var(--#{$prefix}color-content-disabled) !default; $btn-close-icon-size: 1rem auto !default; $btn-close-padding-sm: subtract($btn-icon-padding-x, $spacer * .25) !default; @@ -2229,7 +2203,7 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; // Code // OUDS mod $code-font-size: .875em !default; // OUDS mod: instead of `$small-font-size` -$code-color: $gray-700 !default; // instead of `$pink` +$code-color: $ouds-color-content-muted-light !default; // instead of `$pink` $kbd-padding-y: px-to-rem($ouds-space-fixed-smash) !default; // instead of `.1875rem` $kbd-padding-x: px-to-rem($ouds-space-fixed-shortest) !default; // instead of `.375rem` @@ -2279,8 +2253,8 @@ $stepped-process-bg: var(--#{$prefix}body-bg) !default; $step-item-padding: 7px !default; $step-item-margin-end: var(--#{$prefix}border-width) !default; $step-item-bg: var(--#{$prefix}secondary) !default; -$step-item-active-bg: $supporting-orange !default; -$step-item-next-bg: var(--#{$prefix}border-color-subtle) !default; +$step-item-active-bg: $component-active-bg !default; +$step-item-next-bg: var(--#{$prefix}color-border-emphasized) !default; $step-item-shadow-size: calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list $step-item-drop-shadow: drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list @@ -2302,7 +2276,7 @@ $step-link-text-decoration: $link-decoration !default; //// Sticker // scss-docs-start sticker $sticker-color: $black !default; -$sticker-background-color: $supporting-orange !default; +$sticker-background-color: $ouds-color-orange-500 !default; $sticker-font-weight: $font-weight-bold !default; $sticker-size-sm: $spacer * 7 !default; @@ -2323,9 +2297,9 @@ $quantity-selector-sm-width: 5.625rem !default; $quantity-selector-btn-padding-x: add($btn-icon-padding-x, 2px) !default; $quantity-selector-btn-padding-x-sm: add($btn-icon-padding-x-sm, 2px) !default; $quantity-selector-btn-bg: var(--#{$prefix}body-bg) !default; -$quantity-selector-btn-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-subtle) !default; +$quantity-selector-btn-border: var(--#{$prefix}border-width) solid var(--#{$prefix}color-border-emphasized) !default; -$quantity-selector-disabled-color: var(--#{$prefix}disabled-color) !default; +$quantity-selector-disabled-color: var(--#{$prefix}color-content-disabled) !default; $quantity-selector-disabled-bg: var(--#{$prefix}body-bg) !default; $quantity-selector-icon-width: .875rem !default; @@ -2410,8 +2384,8 @@ $tag-close-margin-start: $spacer * .2 !default; $tag-font-size: $font-size-base !default; $tag-active-color: var(--#{$prefix}highlight-color) !default; -$tag-disabled-color: var(--#{$prefix}disabled-color) !default; -$tag-border-color: var(--#{$prefix}border-color-subtle) !default; +$tag-disabled-color: var(--#{$prefix}color-content-disabled) !default; +$tag-border-color: var(--#{$prefix}color-border-emphasized) !default; $tag-active-decoration-color: var(--#{$prefix}highlight-bg) !default; // scss-docs-end tag-variables @@ -2435,9 +2409,9 @@ $local-nav-bg: var(--#{$prefix}body-bg) !default; $local-nav-hover-color: var(--#{$prefix}link-hover-color) !default; $local-nav-hover-bg: var(--#{$prefix}secondary-bg) !default; $local-nav-active-color: var(--#{$prefix}primary) !default; -$local-nav-active-bg: var(--#{$prefix}tertiary-active-bg) !default; +$local-nav-active-bg: var(--#{$prefix}color-action-primary-pressed) !default; $local-nav-active-marker-width: $spacer * .2 !default; -$local-nav-border-color: var(--#{$prefix}border-color-subtle) !default; +$local-nav-border-color: var(--#{$prefix}color-border-emphasized) !default; $local-nav-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list // scss-docs-end local-nav-variables // End mod diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index d3f35118fa..413a464b34 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -56,7 +56,7 @@ > [data-focus-visible-added]:focus + label { @include focus-visible(); outline-offset: -1px; - box-shadow: inset 0 0 0 add(1px, $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color); + box-shadow: inset 0 0 0 add(1px, $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset); } &:hover input + label::before { diff --git a/scss/mixins/_focus.scss b/scss/mixins/_focus.scss index 2bb602908e..e1cfd56e07 100644 --- a/scss/mixins/_focus.scss +++ b/scss/mixins/_focus.scss @@ -1,5 +1,5 @@ // scss-docs-start focus-visible -@mixin focus-visible($zindex: $focus-visible-zindex, $color: var(--#{$prefix}focus-visible-outer-color), $width: $focus-visible-outer-width, $offset: $focus-visible-outer-offset, $box-width: $focus-visible-inner-width, $box-color: var(--#{$prefix}focus-visible-inner-color)) { +@mixin focus-visible($zindex: $focus-visible-zindex, $color: var(--#{$prefix}color-border-focus), $width: $focus-visible-outer-width, $offset: $focus-visible-outer-offset, $box-width: $focus-visible-inner-width, $box-color: var(--#{$prefix}color-border-focus-inset)) { z-index: $zindex; isolation: isolate; outline: $width solid $color; diff --git a/scss/ouds-web-grid.scss b/scss/ouds-web-grid.scss index bf06302c33..e6356c02ba 100644 --- a/scss/ouds-web-grid.scss +++ b/scss/ouds-web-grid.scss @@ -3,9 +3,11 @@ $include-column-box-sizing: true !default; +@import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; +@import "tokens/semantic-colors-custom-props"; @import "tokens/composite"; @import "tokens/component"; @import "variables"; diff --git a/scss/ouds-web-reboot.scss b/scss/ouds-web-reboot.scss index 6ea8a0e0cf..5585e86418 100644 --- a/scss/ouds-web-reboot.scss +++ b/scss/ouds-web-reboot.scss @@ -1,9 +1,11 @@ @import "mixins/banner"; @include bsBanner(Reboot); +@import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; +@import "tokens/semantic-colors-custom-props"; @import "tokens/composite"; @import "tokens/component"; @import "variables"; diff --git a/scss/ouds-web-utilities.scss b/scss/ouds-web-utilities.scss index 9a486fd651..b5340e8a54 100644 --- a/scss/ouds-web-utilities.scss +++ b/scss/ouds-web-utilities.scss @@ -2,9 +2,11 @@ @include bsBanner(Utilities); // Configuration +@import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; +@import "tokens/semantic-colors-custom-props"; @import "tokens/composite"; @import "tokens/component"; @import "variables"; diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss index 4a46128b80..d3d72c6c3c 100644 --- a/scss/ouds-web.scss +++ b/scss/ouds-web.scss @@ -3,9 +3,11 @@ // scss-docs-start import-stack // Configuration +@import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; +@import "tokens/semantic-colors-custom-props"; @import "tokens/composite"; @import "tokens/component"; @import "variables"; diff --git a/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss index 516cfc8623..e130a21653 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss @@ -5,9 +5,11 @@ $enable-bootstrap-compatibility: null !default; @include describe("customize/ouds-web-bootstrap") { @include it("generates only OUDS containers") { $enable-bootstrap-compatibility: false !global; + @import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; + @import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; @@ -86,9 +88,11 @@ $enable-bootstrap-compatibility: null !default; @include it("generates OUDS and Bootstrap containers") { $enable-bootstrap-compatibility: true !global; + @import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; + @import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; @@ -354,9 +358,11 @@ $enable-bootstrap-compatibility: null !default; @include it("generates only OUDS grid classes") { $enable-bootstrap-compatibility: false !global; + @import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; + @import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; @@ -2631,9 +2637,11 @@ $enable-bootstrap-compatibility: null !default; @include it("generates OUDS and Bootstrap grid classes") { $enable-bootstrap-compatibility: true !global; + @import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; + @import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index 2da0f26572..e40a4c5e9f 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -8,9 +8,11 @@ $utilities: (); @include assert() { @include output() { $enable-bootstrap-compatibility: false !global; + @import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; + @import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; @@ -767,6 +769,271 @@ $utilities: (); @import "../../utilities/api"; } @include expect() { + :root, + [data-bs-theme="light"] { + --bs-color-transparent-default: rgba(0, 0, 0, 0); + --bs-color-action-disabled: #ccc; + --bs-color-action-negative-enabled: #ea0305; + --bs-color-action-negative-focus: #b20002; + --bs-color-action-negative-hover: #b20002; + --bs-color-action-negative-loading: #800001; + --bs-color-action-negative-pressed: #800001; + --bs-color-action-primary-enabled: #000; + --bs-color-action-primary-focus: #555; + --bs-color-action-primary-hover: #555; + --bs-color-action-primary-loading: #f16e00; + --bs-color-action-primary-pressed: #f16e00; + --bs-color-action-secondary-enabled: #f4f4f4; + --bs-color-action-secondary-focus: #eee; + --bs-color-action-secondary-hover: #eee; + --bs-color-action-secondary-loading: #eee; + --bs-color-action-secondary-pressed: #eee; + --bs-color-action-selected: #f16e00; + --bs-color-action-visited: #5b2f98; + --bs-color-always-accent: #ffd000; + --bs-color-always-black: #000; + --bs-color-always-info: #26b2ff; + --bs-color-always-negative: #ea0305; + --bs-color-always-on-accent: #000; + --bs-color-always-on-black: #fff; + --bs-color-always-on-info: #000; + --bs-color-always-on-negative: #fff; + --bs-color-always-on-positive: #000; + --bs-color-always-on-warning: #000; + --bs-color-always-on-white: #000; + --bs-color-always-positive: #3de35a; + --bs-color-always-warning: #ffd000; + --bs-color-always-white: #fff; + --bs-color-bg-brand-primary: #f16e00; + --bs-color-bg-primary: #fff; + --bs-color-bg-secondary: #f4f4f4; + --bs-color-bg-status-accent-emphasized: #ffd000; + --bs-color-bg-status-accent-muted: #f9f5f0; + --bs-color-bg-status-info-emphasized: #26b2ff; + --bs-color-bg-status-info-muted: #f0faff; + --bs-color-bg-status-negative-emphasized: #ea0305; + --bs-color-bg-status-negative-muted: #ffe5e6; + --bs-color-bg-status-neutral: #f4f4f4; + --bs-color-bg-status-positive-emphasized: #3de35a; + --bs-color-bg-status-positive-muted: #edfcf0; + --bs-color-bg-status-warning-emphasized: #ffd000; + --bs-color-bg-status-warning-muted: #fff7d6; + --bs-color-bg-tertiary: #f9f5f0; + --bs-color-border-brand-primary: #f16e00; + --bs-color-border-default: #ccc; + --bs-color-border-emphasized: #000; + --bs-color-border-focus: #000; + --bs-color-border-focus-inset: #fff; + --bs-color-border-on-brand-primary: #fff; + --bs-color-content-brand-primary: #f16e00; + --bs-color-content-default: #000; + --bs-color-content-disabled: #ccc; + --bs-color-content-muted: #555; + --bs-color-content-on-action-disabled: #fff; + --bs-color-content-on-action-negative: #fff; + --bs-color-content-on-action-primary-enabled: #fff; + --bs-color-content-on-action-primary-focus: #fff; + --bs-color-content-on-action-primary-hover: #fff; + --bs-color-content-on-action-primary-loading: #fff; + --bs-color-content-on-action-primary-pressed: #fff; + --bs-color-content-on-brand-primary: #fff; + --bs-color-content-on-status-accent-emphasized: #000; + --bs-color-content-on-status-accent-muted: #000; + --bs-color-content-on-status-info-emphasized: #000; + --bs-color-content-on-status-info-muted: #000; + --bs-color-content-on-status-negative-emphasized: #fff; + --bs-color-content-on-status-negative-muted: #000; + --bs-color-content-on-status-positive-emphasized: #000; + --bs-color-content-on-status-positive-muted: #000; + --bs-color-content-on-status-warning-emphasized: #000; + --bs-color-content-on-status-warning-muted: #000; + --bs-color-content-status-info: #26b2ff; + --bs-color-content-status-negative: #ea0305; + --bs-color-content-status-positive: #3de35a; + --bs-color-content-status-warning: #ffd000; + --bs-color-elevation-drag: #f4f4f4; + --bs-color-elevation-drag-on-bg-secondary: #f4f4f4; + --bs-color-elevation-modal: #fff; + --bs-color-elevation-overlay-default: #fff; + --bs-color-elevation-overlay-default-on-bg-secondary: #fff; + --bs-color-elevation-overlay-emphasized: #333; + --bs-color-elevation-overlay-emphasized-on-bg-secondary: #333; + --bs-color-elevation-raised: #fff; + --bs-color-elevation-raised-on-bg-secondary: #fff; + --bs-color-gradient-skeleton-middle: #eee; + --bs-color-gradient-skeleton-start-end: #f4f4f4; + --bs-color-decorative-accent-1-default: #50be87; + --bs-color-decorative-accent-1-emphasized: #2e7b54; + --bs-color-decorative-accent-1-muted: #c0e8d4; + --bs-color-decorative-accent-2-default: #4ab4e6; + --bs-color-decorative-accent-2-emphasized: #136186; + --bs-color-decorative-accent-2-muted: #a5daf3; + --bs-color-decorative-accent-3-default: #ffd000; + --bs-color-decorative-accent-3-emphasized: #ffb400; + --bs-color-decorative-accent-3-muted: #ffed99; + --bs-color-decorative-accent-4-default: #a885d8; + --bs-color-decorative-accent-4-emphasized: #2c174a; + --bs-color-decorative-accent-4-muted: #e0d4f2; + --bs-color-decorative-accent-5-default: #ffb4e6; + --bs-color-decorative-accent-5-emphasized: #ff80d4; + --bs-color-decorative-accent-5-muted: #ffe5f6; + --bs-color-decorative-brand-primary: #ff7900; + --bs-color-decorative-brand-secondary: #000; + --bs-color-decorative-brand-tertiary: #fff; + --bs-color-decorative-neutral-default: #555; + --bs-color-decorative-neutral-emphasized: #333; + --bs-color-decorative-neutral-muted: #eee; + --bs-color-decorative-skin-tint-100: #fbebdf; + --bs-color-decorative-skin-tint-200: #f4cfb2; + --bs-color-decorative-skin-tint-300: #e3b591; + --bs-color-decorative-skin-tint-400: #c19372; + --bs-color-decorative-skin-tint-500: #cf7e3f; + --bs-color-decorative-skin-tint-600: #aa6631; + --bs-color-decorative-skin-tint-700: #7e4f2a; + --bs-color-decorative-skin-tint-800: #553720; + --bs-color-decorative-skin-tint-900: #2e2014; + --bs-elevation-color-none: rgba(0, 0, 0, 0); + --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-overlay-default: rgba(0, 0, 0, 0.24); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-overlay-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + } + + [data-bs-theme="dark"] { + --bs-color-transparent-default: rgba(0, 0, 0, 0); + --bs-color-action-disabled: #555; + --bs-color-action-negative-enabled: #ea0305; + --bs-color-action-negative-focus: #b20002; + --bs-color-action-negative-hover: #b20002; + --bs-color-action-negative-loading: #800001; + --bs-color-action-negative-pressed: #800001; + --bs-color-action-primary-enabled: #eee; + --bs-color-action-primary-focus: #bbb; + --bs-color-action-primary-hover: #bbb; + --bs-color-action-primary-loading: #ff7900; + --bs-color-action-primary-pressed: #ff7900; + --bs-color-action-secondary-enabled: #272727; + --bs-color-action-secondary-focus: #333; + --bs-color-action-secondary-hover: #333; + --bs-color-action-secondary-loading: #333; + --bs-color-action-secondary-pressed: #333; + --bs-color-action-selected: #ff7900; + --bs-color-action-visited: #a885d8; + --bs-color-always-accent: #ffd000; + --bs-color-always-black: #000; + --bs-color-always-info: #26b2ff; + --bs-color-always-negative: #ea0305; + --bs-color-always-on-accent: #141414; + --bs-color-always-on-black: #eee; + --bs-color-always-on-info: #141414; + --bs-color-always-on-negative: #eee; + --bs-color-always-on-positive: #141414; + --bs-color-always-on-warning: #141414; + --bs-color-always-on-white: #141414; + --bs-color-always-positive: #3de35a; + --bs-color-always-warning: #ffd000; + --bs-color-always-white: #fff; + --bs-color-bg-brand-primary: #ff7900; + --bs-color-bg-primary: #141414; + --bs-color-bg-secondary: #1f1f1f; + --bs-color-bg-status-accent-emphasized: #ffd000; + --bs-color-bg-status-accent-muted: #353228; + --bs-color-bg-status-info-emphasized: #26b2ff; + --bs-color-bg-status-info-muted: #003857; + --bs-color-bg-status-negative-emphasized: #ea0305; + --bs-color-bg-status-negative-muted: #4d0001; + --bs-color-bg-status-neutral: #272727; + --bs-color-bg-status-positive-emphasized: #3de35a; + --bs-color-bg-status-positive-muted: #0a4715; + --bs-color-bg-status-warning-emphasized: #ffd000; + --bs-color-bg-status-warning-muted: #3d3100; + --bs-color-bg-tertiary: #353228; + --bs-color-border-brand-primary: #ff7900; + --bs-color-border-default: #555; + --bs-color-border-emphasized: #eee; + --bs-color-border-focus: #eee; + --bs-color-border-focus-inset: #141414; + --bs-color-border-on-brand-primary: #000; + --bs-color-content-brand-primary: #ff7900; + --bs-color-content-default: #eee; + --bs-color-content-disabled: #555; + --bs-color-content-muted: #bbb; + --bs-color-content-on-action-disabled: #000; + --bs-color-content-on-action-negative: #fff; + --bs-color-content-on-action-primary-enabled: #000; + --bs-color-content-on-action-primary-focus: #000; + --bs-color-content-on-action-primary-hover: #000; + --bs-color-content-on-action-primary-loading: #000; + --bs-color-content-on-action-primary-pressed: #000; + --bs-color-content-on-brand-primary: #000; + --bs-color-content-on-status-accent-emphasized: #000; + --bs-color-content-on-status-accent-muted: #eee; + --bs-color-content-on-status-info-emphasized: #000; + --bs-color-content-on-status-info-muted: #eee; + --bs-color-content-on-status-negative-emphasized: #fff; + --bs-color-content-on-status-negative-muted: #eee; + --bs-color-content-on-status-positive-emphasized: #000; + --bs-color-content-on-status-positive-muted: #eee; + --bs-color-content-on-status-warning-emphasized: #000; + --bs-color-content-on-status-warning-muted: #eee; + --bs-color-content-status-info: #26b2ff; + --bs-color-content-status-negative: #ea0305; + --bs-color-content-status-positive: #3de35a; + --bs-color-content-status-warning: #ffd000; + --bs-color-elevation-drag: #272727; + --bs-color-elevation-drag-on-bg-secondary: #333; + --bs-color-elevation-modal: #333; + --bs-color-elevation-overlay-default: #272727; + --bs-color-elevation-overlay-default-on-bg-secondary: #333; + --bs-color-elevation-overlay-emphasized: #444; + --bs-color-elevation-overlay-emphasized-on-bg-secondary: #444; + --bs-color-elevation-raised: #1f1f1f; + --bs-color-elevation-raised-on-bg-secondary: #272727; + --bs-color-gradient-skeleton-middle: #272727; + --bs-color-gradient-skeleton-start-end: #1f1f1f; + --bs-color-decorative-accent-1-default: #50be87; + --bs-color-decorative-accent-1-emphasized: #2e7b54; + --bs-color-decorative-accent-1-muted: #c0e8d4; + --bs-color-decorative-accent-2-default: #4ab4e6; + --bs-color-decorative-accent-2-emphasized: #136186; + --bs-color-decorative-accent-2-muted: #a5daf3; + --bs-color-decorative-accent-3-default: #ffd000; + --bs-color-decorative-accent-3-emphasized: #ffb400; + --bs-color-decorative-accent-3-muted: #ffed99; + --bs-color-decorative-accent-4-default: #a885d8; + --bs-color-decorative-accent-4-emphasized: #2c174a; + --bs-color-decorative-accent-4-muted: #e0d4f2; + --bs-color-decorative-accent-5-default: #ffb4e6; + --bs-color-decorative-accent-5-emphasized: #ff80d4; + --bs-color-decorative-accent-5-muted: #ffe5f6; + --bs-color-decorative-brand-primary: #ff7900; + --bs-color-decorative-brand-secondary: #eee; + --bs-color-decorative-brand-tertiary: #141414; + --bs-color-decorative-neutral-default: #bbb; + --bs-color-decorative-neutral-emphasized: #eee; + --bs-color-decorative-neutral-muted: #272727; + --bs-color-decorative-skin-tint-100: #fbebdf; + --bs-color-decorative-skin-tint-200: #f4cfb2; + --bs-color-decorative-skin-tint-300: #e3b591; + --bs-color-decorative-skin-tint-400: #c19372; + --bs-color-decorative-skin-tint-500: #cf7e3f; + --bs-color-decorative-skin-tint-600: #aa6631; + --bs-color-decorative-skin-tint-700: #7e4f2a; + --bs-color-decorative-skin-tint-800: #553720; + --bs-color-decorative-skin-tint-900: #2e2014; + --bs-elevation-color-none: rgba(0, 0, 0, 0); + --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-overlay-default: rgba(0, 0, 0, 0.24); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-overlay-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + } + .opacity-transparent { opacity: 0 !important; } @@ -831,12 +1098,12 @@ $utilities: (); .border-light { --bs-border-opacity: 1; - border-color: rgba(204, 204, 204, var(--bs-border-opacity)) !important; + border-color: rgba(112, 112, 112, var(--bs-border-opacity)) !important; } .border-dark { --bs-border-opacity: 1; - border-color: rgba(102, 102, 102, var(--bs-border-opacity)) !important; + border-color: rgba(68, 68, 68, var(--bs-border-opacity)) !important; } .border-black { @@ -3156,35 +3423,35 @@ $utilities: (); } .shadow-none { - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; + box-shadow: 0 0 0 0 var(--bs-elevation-color-none) !important; } .shadow-raised { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 1px 2px 0 var(--bs-elevation-color-raised) !important; } .shadow-drag { - box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 4px 4px -1px var(--bs-elevation-color-drag) !important; } .shadow-overlay-default { - box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 2px 3px -1px var(--bs-elevation-color-overlay-default) !important; } .shadow-overlay-emphasized { - box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 12px 12px -4px var(--bs-elevation-color-overlay-emphasized) !important; } .shadow-sticky-default { - box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky-default) !important; } .shadow-sticky-emphasized { - box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky-emphasized) !important; } .shadow-sticky-navigation-scrolled { - box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky-navigation-scrolled) !important; } @media (min-width: 390px) { @@ -9550,9 +9817,11 @@ $utilities: (); @include assert() { @include output() { $enable-bootstrap-compatibility: true !global; + @import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; + @import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; @@ -10309,6 +10578,271 @@ $utilities: (); @import "../../utilities/api"; } @include expect() { + :root, + [data-bs-theme="light"] { + --bs-color-transparent-default: rgba(0, 0, 0, 0); + --bs-color-action-disabled: #ccc; + --bs-color-action-negative-enabled: #ea0305; + --bs-color-action-negative-focus: #b20002; + --bs-color-action-negative-hover: #b20002; + --bs-color-action-negative-loading: #800001; + --bs-color-action-negative-pressed: #800001; + --bs-color-action-primary-enabled: #000; + --bs-color-action-primary-focus: #555; + --bs-color-action-primary-hover: #555; + --bs-color-action-primary-loading: #f16e00; + --bs-color-action-primary-pressed: #f16e00; + --bs-color-action-secondary-enabled: #f4f4f4; + --bs-color-action-secondary-focus: #eee; + --bs-color-action-secondary-hover: #eee; + --bs-color-action-secondary-loading: #eee; + --bs-color-action-secondary-pressed: #eee; + --bs-color-action-selected: #f16e00; + --bs-color-action-visited: #5b2f98; + --bs-color-always-accent: #ffd000; + --bs-color-always-black: #000; + --bs-color-always-info: #26b2ff; + --bs-color-always-negative: #ea0305; + --bs-color-always-on-accent: #000; + --bs-color-always-on-black: #fff; + --bs-color-always-on-info: #000; + --bs-color-always-on-negative: #fff; + --bs-color-always-on-positive: #000; + --bs-color-always-on-warning: #000; + --bs-color-always-on-white: #000; + --bs-color-always-positive: #3de35a; + --bs-color-always-warning: #ffd000; + --bs-color-always-white: #fff; + --bs-color-bg-brand-primary: #f16e00; + --bs-color-bg-primary: #fff; + --bs-color-bg-secondary: #f4f4f4; + --bs-color-bg-status-accent-emphasized: #ffd000; + --bs-color-bg-status-accent-muted: #f9f5f0; + --bs-color-bg-status-info-emphasized: #26b2ff; + --bs-color-bg-status-info-muted: #f0faff; + --bs-color-bg-status-negative-emphasized: #ea0305; + --bs-color-bg-status-negative-muted: #ffe5e6; + --bs-color-bg-status-neutral: #f4f4f4; + --bs-color-bg-status-positive-emphasized: #3de35a; + --bs-color-bg-status-positive-muted: #edfcf0; + --bs-color-bg-status-warning-emphasized: #ffd000; + --bs-color-bg-status-warning-muted: #fff7d6; + --bs-color-bg-tertiary: #f9f5f0; + --bs-color-border-brand-primary: #f16e00; + --bs-color-border-default: #ccc; + --bs-color-border-emphasized: #000; + --bs-color-border-focus: #000; + --bs-color-border-focus-inset: #fff; + --bs-color-border-on-brand-primary: #fff; + --bs-color-content-brand-primary: #f16e00; + --bs-color-content-default: #000; + --bs-color-content-disabled: #ccc; + --bs-color-content-muted: #555; + --bs-color-content-on-action-disabled: #fff; + --bs-color-content-on-action-negative: #fff; + --bs-color-content-on-action-primary-enabled: #fff; + --bs-color-content-on-action-primary-focus: #fff; + --bs-color-content-on-action-primary-hover: #fff; + --bs-color-content-on-action-primary-loading: #fff; + --bs-color-content-on-action-primary-pressed: #fff; + --bs-color-content-on-brand-primary: #fff; + --bs-color-content-on-status-accent-emphasized: #000; + --bs-color-content-on-status-accent-muted: #000; + --bs-color-content-on-status-info-emphasized: #000; + --bs-color-content-on-status-info-muted: #000; + --bs-color-content-on-status-negative-emphasized: #fff; + --bs-color-content-on-status-negative-muted: #000; + --bs-color-content-on-status-positive-emphasized: #000; + --bs-color-content-on-status-positive-muted: #000; + --bs-color-content-on-status-warning-emphasized: #000; + --bs-color-content-on-status-warning-muted: #000; + --bs-color-content-status-info: #26b2ff; + --bs-color-content-status-negative: #ea0305; + --bs-color-content-status-positive: #3de35a; + --bs-color-content-status-warning: #ffd000; + --bs-color-elevation-drag: #f4f4f4; + --bs-color-elevation-drag-on-bg-secondary: #f4f4f4; + --bs-color-elevation-modal: #fff; + --bs-color-elevation-overlay-default: #fff; + --bs-color-elevation-overlay-default-on-bg-secondary: #fff; + --bs-color-elevation-overlay-emphasized: #333; + --bs-color-elevation-overlay-emphasized-on-bg-secondary: #333; + --bs-color-elevation-raised: #fff; + --bs-color-elevation-raised-on-bg-secondary: #fff; + --bs-color-gradient-skeleton-middle: #eee; + --bs-color-gradient-skeleton-start-end: #f4f4f4; + --bs-color-decorative-accent-1-default: #50be87; + --bs-color-decorative-accent-1-emphasized: #2e7b54; + --bs-color-decorative-accent-1-muted: #c0e8d4; + --bs-color-decorative-accent-2-default: #4ab4e6; + --bs-color-decorative-accent-2-emphasized: #136186; + --bs-color-decorative-accent-2-muted: #a5daf3; + --bs-color-decorative-accent-3-default: #ffd000; + --bs-color-decorative-accent-3-emphasized: #ffb400; + --bs-color-decorative-accent-3-muted: #ffed99; + --bs-color-decorative-accent-4-default: #a885d8; + --bs-color-decorative-accent-4-emphasized: #2c174a; + --bs-color-decorative-accent-4-muted: #e0d4f2; + --bs-color-decorative-accent-5-default: #ffb4e6; + --bs-color-decorative-accent-5-emphasized: #ff80d4; + --bs-color-decorative-accent-5-muted: #ffe5f6; + --bs-color-decorative-brand-primary: #ff7900; + --bs-color-decorative-brand-secondary: #000; + --bs-color-decorative-brand-tertiary: #fff; + --bs-color-decorative-neutral-default: #555; + --bs-color-decorative-neutral-emphasized: #333; + --bs-color-decorative-neutral-muted: #eee; + --bs-color-decorative-skin-tint-100: #fbebdf; + --bs-color-decorative-skin-tint-200: #f4cfb2; + --bs-color-decorative-skin-tint-300: #e3b591; + --bs-color-decorative-skin-tint-400: #c19372; + --bs-color-decorative-skin-tint-500: #cf7e3f; + --bs-color-decorative-skin-tint-600: #aa6631; + --bs-color-decorative-skin-tint-700: #7e4f2a; + --bs-color-decorative-skin-tint-800: #553720; + --bs-color-decorative-skin-tint-900: #2e2014; + --bs-elevation-color-none: rgba(0, 0, 0, 0); + --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-overlay-default: rgba(0, 0, 0, 0.24); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-overlay-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + } + + [data-bs-theme="dark"] { + --bs-color-transparent-default: rgba(0, 0, 0, 0); + --bs-color-action-disabled: #555; + --bs-color-action-negative-enabled: #ea0305; + --bs-color-action-negative-focus: #b20002; + --bs-color-action-negative-hover: #b20002; + --bs-color-action-negative-loading: #800001; + --bs-color-action-negative-pressed: #800001; + --bs-color-action-primary-enabled: #eee; + --bs-color-action-primary-focus: #bbb; + --bs-color-action-primary-hover: #bbb; + --bs-color-action-primary-loading: #ff7900; + --bs-color-action-primary-pressed: #ff7900; + --bs-color-action-secondary-enabled: #272727; + --bs-color-action-secondary-focus: #333; + --bs-color-action-secondary-hover: #333; + --bs-color-action-secondary-loading: #333; + --bs-color-action-secondary-pressed: #333; + --bs-color-action-selected: #ff7900; + --bs-color-action-visited: #a885d8; + --bs-color-always-accent: #ffd000; + --bs-color-always-black: #000; + --bs-color-always-info: #26b2ff; + --bs-color-always-negative: #ea0305; + --bs-color-always-on-accent: #141414; + --bs-color-always-on-black: #eee; + --bs-color-always-on-info: #141414; + --bs-color-always-on-negative: #eee; + --bs-color-always-on-positive: #141414; + --bs-color-always-on-warning: #141414; + --bs-color-always-on-white: #141414; + --bs-color-always-positive: #3de35a; + --bs-color-always-warning: #ffd000; + --bs-color-always-white: #fff; + --bs-color-bg-brand-primary: #ff7900; + --bs-color-bg-primary: #141414; + --bs-color-bg-secondary: #1f1f1f; + --bs-color-bg-status-accent-emphasized: #ffd000; + --bs-color-bg-status-accent-muted: #353228; + --bs-color-bg-status-info-emphasized: #26b2ff; + --bs-color-bg-status-info-muted: #003857; + --bs-color-bg-status-negative-emphasized: #ea0305; + --bs-color-bg-status-negative-muted: #4d0001; + --bs-color-bg-status-neutral: #272727; + --bs-color-bg-status-positive-emphasized: #3de35a; + --bs-color-bg-status-positive-muted: #0a4715; + --bs-color-bg-status-warning-emphasized: #ffd000; + --bs-color-bg-status-warning-muted: #3d3100; + --bs-color-bg-tertiary: #353228; + --bs-color-border-brand-primary: #ff7900; + --bs-color-border-default: #555; + --bs-color-border-emphasized: #eee; + --bs-color-border-focus: #eee; + --bs-color-border-focus-inset: #141414; + --bs-color-border-on-brand-primary: #000; + --bs-color-content-brand-primary: #ff7900; + --bs-color-content-default: #eee; + --bs-color-content-disabled: #555; + --bs-color-content-muted: #bbb; + --bs-color-content-on-action-disabled: #000; + --bs-color-content-on-action-negative: #fff; + --bs-color-content-on-action-primary-enabled: #000; + --bs-color-content-on-action-primary-focus: #000; + --bs-color-content-on-action-primary-hover: #000; + --bs-color-content-on-action-primary-loading: #000; + --bs-color-content-on-action-primary-pressed: #000; + --bs-color-content-on-brand-primary: #000; + --bs-color-content-on-status-accent-emphasized: #000; + --bs-color-content-on-status-accent-muted: #eee; + --bs-color-content-on-status-info-emphasized: #000; + --bs-color-content-on-status-info-muted: #eee; + --bs-color-content-on-status-negative-emphasized: #fff; + --bs-color-content-on-status-negative-muted: #eee; + --bs-color-content-on-status-positive-emphasized: #000; + --bs-color-content-on-status-positive-muted: #eee; + --bs-color-content-on-status-warning-emphasized: #000; + --bs-color-content-on-status-warning-muted: #eee; + --bs-color-content-status-info: #26b2ff; + --bs-color-content-status-negative: #ea0305; + --bs-color-content-status-positive: #3de35a; + --bs-color-content-status-warning: #ffd000; + --bs-color-elevation-drag: #272727; + --bs-color-elevation-drag-on-bg-secondary: #333; + --bs-color-elevation-modal: #333; + --bs-color-elevation-overlay-default: #272727; + --bs-color-elevation-overlay-default-on-bg-secondary: #333; + --bs-color-elevation-overlay-emphasized: #444; + --bs-color-elevation-overlay-emphasized-on-bg-secondary: #444; + --bs-color-elevation-raised: #1f1f1f; + --bs-color-elevation-raised-on-bg-secondary: #272727; + --bs-color-gradient-skeleton-middle: #272727; + --bs-color-gradient-skeleton-start-end: #1f1f1f; + --bs-color-decorative-accent-1-default: #50be87; + --bs-color-decorative-accent-1-emphasized: #2e7b54; + --bs-color-decorative-accent-1-muted: #c0e8d4; + --bs-color-decorative-accent-2-default: #4ab4e6; + --bs-color-decorative-accent-2-emphasized: #136186; + --bs-color-decorative-accent-2-muted: #a5daf3; + --bs-color-decorative-accent-3-default: #ffd000; + --bs-color-decorative-accent-3-emphasized: #ffb400; + --bs-color-decorative-accent-3-muted: #ffed99; + --bs-color-decorative-accent-4-default: #a885d8; + --bs-color-decorative-accent-4-emphasized: #2c174a; + --bs-color-decorative-accent-4-muted: #e0d4f2; + --bs-color-decorative-accent-5-default: #ffb4e6; + --bs-color-decorative-accent-5-emphasized: #ff80d4; + --bs-color-decorative-accent-5-muted: #ffe5f6; + --bs-color-decorative-brand-primary: #ff7900; + --bs-color-decorative-brand-secondary: #eee; + --bs-color-decorative-brand-tertiary: #141414; + --bs-color-decorative-neutral-default: #bbb; + --bs-color-decorative-neutral-emphasized: #eee; + --bs-color-decorative-neutral-muted: #272727; + --bs-color-decorative-skin-tint-100: #fbebdf; + --bs-color-decorative-skin-tint-200: #f4cfb2; + --bs-color-decorative-skin-tint-300: #e3b591; + --bs-color-decorative-skin-tint-400: #c19372; + --bs-color-decorative-skin-tint-500: #cf7e3f; + --bs-color-decorative-skin-tint-600: #aa6631; + --bs-color-decorative-skin-tint-700: #7e4f2a; + --bs-color-decorative-skin-tint-800: #553720; + --bs-color-decorative-skin-tint-900: #2e2014; + --bs-elevation-color-none: rgba(0, 0, 0, 0); + --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-overlay-default: rgba(0, 0, 0, 0.24); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-overlay-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + } + .opacity-0 { opacity: 0 !important; } @@ -10413,12 +10947,12 @@ $utilities: (); .border-light { --bs-border-opacity: 1; - border-color: rgba(204, 204, 204, var(--bs-border-opacity)) !important; + border-color: rgba(112, 112, 112, var(--bs-border-opacity)) !important; } .border-dark { --bs-border-opacity: 1; - border-color: rgba(102, 102, 102, var(--bs-border-opacity)) !important; + border-color: rgba(68, 68, 68, var(--bs-border-opacity)) !important; } .border-black { @@ -13414,35 +13948,35 @@ $utilities: (); } .shadow-none { - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; + box-shadow: 0 0 0 0 var(--bs-elevation-color-none) !important; } .shadow-raised { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 1px 2px 0 var(--bs-elevation-color-raised) !important; } .shadow-drag { - box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 4px 4px -1px var(--bs-elevation-color-drag) !important; } .shadow-overlay-default { - box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 2px 3px -1px var(--bs-elevation-color-overlay-default) !important; } .shadow-overlay-emphasized { - box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 12px 12px -4px var(--bs-elevation-color-overlay-emphasized) !important; } .shadow-sticky-default { - box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky-default) !important; } .shadow-sticky-emphasized { - box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky-emphasized) !important; } .shadow-sticky-navigation-scrolled { - box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky-navigation-scrolled) !important; } @media (min-width: 390px) { diff --git a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss index e02ca021b9..74f2332277 100644 --- a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss +++ b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss @@ -1,8 +1,10 @@ // TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss +@import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss index 6d29be555b..b4f87f9809 100644 --- a/scss/tests/mixins/_color-modes.test.scss +++ b/scss/tests/mixins/_color-modes.test.scss @@ -1,8 +1,10 @@ // stylelint-disable selector-attribute-quotes +@import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; @@ -30,7 +32,7 @@ background-color: var(--bs-primary-bg-subtle); } [data-bs-theme=dark] { - --custom-color: #757bd8; // OUDS mod: instead of `#3aff8` + --custom-color: #679cec; // OUDS mod: instead of `#3aff8` } } } @@ -62,7 +64,7 @@ } @media (prefers-color-scheme: dark) { :root { - --custom-color: #757bd8; // OUDS mod: instead of `#3aff8` + --custom-color: #679cec; // OUDS mod: instead of `#3aff8` } } } diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss index ba6d401500..82526696a4 100644 --- a/scss/tests/mixins/_utilities.test.scss +++ b/scss/tests/mixins/_utilities.test.scss @@ -3,9 +3,11 @@ $enable-important-utilities: false; // Important: Do not import rfs to check that the mixin just calls the appropriate functions from it // OUDS mod +@import "../../config"; @import "../../functions"; // Added because needed by "variables" @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; // Added to avoid undefined variable error like `$white` diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss index 9fe38d40aa..215e59e144 100644 --- a/scss/tests/utilities/_api.test.scss +++ b/scss/tests/utilities/_api.test.scss @@ -1,6 +1,8 @@ +@import "../../config"; @import "../../functions"; @import "../../tokens/raw"; @import "../../tokens/semantic"; +@import "../../tokens/semantic-colors-custom-props"; @import "../../tokens/composite"; @import "../../tokens/component"; @import "../../variables"; diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index f322db8584..d353bfc7ef 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -4,93 +4,93 @@ // Button // scss-docs-start ouds-component-button -// $ouds-button-size-max-height: $ouds-dimension-600 !default; -// $ouds-button-size-min-height: $ouds-dimension-600 !default; -// $ouds-button-size-min-width: $ouds-dimension-600 !default; -// $ouds-button-border-radius: $ouds-border-radius-none !default; -// $ouds-button-border-width-default: $ouds-border-width-default !default; -// $ouds-button-border-width-default-interaction: $ouds-border-width-medium !default; -// $ouds-button-border-width-minimal: $ouds-border-width-none !default; -// $ouds-button-border-width-minimal-interaction: $ouds-border-width-none !default; -// $ouds-button-color-background-default-disabled: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-enabled: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-focus: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-focus-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-hover: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-hover-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-loading: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-loading-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-pressed: $ouds-color-transparent-default !default; -// $ouds-button-color-background-default-pressed-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-background-minimal-disabled: $ouds-color-transparent-default !default; -// $ouds-button-color-background-minimal-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-background-minimal-enabled: $ouds-color-transparent-default !default; -// $ouds-button-color-background-minimal-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-disabled: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-enabled: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-hover: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-hover-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-loading: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-loading-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-pressed: $ouds-color-transparent-default !default; -// $ouds-button-color-border-minimal-pressed-on-bg-emphasized: $ouds-color-transparent-default !default; -// $ouds-button-color-background-minimal-focus: $ouds-color-action-secondary-focus !default; -// $ouds-button-color-background-minimal-focus-on-bg-emphasized: $ouds-color-action-secondary-focus-on-bg-emphasized !default; -// $ouds-button-color-background-minimal-hover: $ouds-color-action-secondary-hover !default; -// $ouds-button-color-background-minimal-hover-on-bg-emphasized: $ouds-color-action-secondary-hover-on-bg-emphasized !default; -// $ouds-button-color-background-minimal-loading: $ouds-color-action-secondary-loading !default; -// $ouds-button-color-background-minimal-loading-on-bg-emphasized: $ouds-color-action-secondary-loading-on-bg-emphasized !default; -// $ouds-button-color-background-minimal-pressed: $ouds-color-action-secondary-pressed !default; -// $ouds-button-color-background-minimal-pressed-on-bg-emphasized: $ouds-color-action-secondary-pressed-on-bg-emphasized !default; -// $ouds-button-color-border-default-disabled: $ouds-color-action-disabled !default; -// $ouds-button-color-border-default-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; -// $ouds-button-color-border-default-enabled: $ouds-color-action-primary-enabled !default; -// $ouds-button-color-border-default-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; -// $ouds-button-color-border-default-hover: $ouds-color-action-primary-hover !default; -// $ouds-button-color-border-default-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; -// $ouds-button-color-border-default-loading: $ouds-color-action-primary-loading !default; -// $ouds-button-color-border-default-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; -// $ouds-button-color-border-default-pressed: $ouds-color-action-primary-pressed !default; -// $ouds-button-color-border-default-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; -// $ouds-button-color-content-default-disabled: $ouds-color-action-disabled !default; -// $ouds-button-color-content-default-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; -// $ouds-button-color-content-default-enabled: $ouds-color-action-primary-enabled !default; -// $ouds-button-color-content-default-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; -// $ouds-button-color-content-default-focus: $ouds-color-action-primary-focus !default; -// $ouds-button-color-content-default-focus-on-bg-emphasized: $ouds-color-action-primary-focus-on-bg-emphasized !default; -// $ouds-button-color-content-default-hover: $ouds-color-action-primary-hover !default; -// $ouds-button-color-content-default-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; -// $ouds-button-color-content-default-loading: $ouds-color-action-primary-loading !default; -// $ouds-button-color-content-default-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; -// $ouds-button-color-content-default-pressed: $ouds-color-action-primary-pressed !default; -// $ouds-button-color-content-default-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; -// $ouds-button-color-content-minimal-disabled: $ouds-color-action-disabled !default; -// $ouds-button-color-content-minimal-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; -// $ouds-button-color-content-minimal-enabled: $ouds-color-action-primary-enabled !default; -// $ouds-button-color-content-minimal-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; -// $ouds-button-color-content-minimal-focus: $ouds-color-action-primary-focus !default; -// $ouds-button-color-content-minimal-focus-on-bg-emphasized: $ouds-color-action-primary-focus-on-bg-emphasized !default; -// $ouds-button-color-content-minimal-hover: $ouds-color-action-primary-hover !default; -// $ouds-button-color-content-minimal-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; -// $ouds-button-color-content-minimal-loading: $ouds-color-action-primary-loading !default; -// $ouds-button-color-content-minimal-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; -// $ouds-button-color-content-minimal-pressed: $ouds-color-action-primary-pressed !default; -// $ouds-button-color-content-minimal-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; -// $ouds-button-size-icon: $ouds-size-icon-with-label-large-size-shorter !default; -// $ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-short !default; -// $ouds-button-size-loader: $ouds-size-icon-with-label-large-size-shorter !default; -// $ouds-button-space-column-gap-arrow: $ouds-space-column-gap-with-arrow-short !default; -// $ouds-button-space-column-gap-icon: $ouds-space-column-gap-with-icon-medium !default; -// $ouds-button-space-inset-icon-alone: $ouds-space-inset-medium !default; -// $ouds-button-space-padding-block: $ouds-space-padding-block-medium !default; -// $ouds-button-space-padding-inline-arrow-end: $ouds-space-padding-inline-with-arrow-tall !default; -// $ouds-button-space-padding-inline-arrow-start: $ouds-space-padding-inline-with-arrow-tall !default; -// $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-taller !default; -// $ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-tallest !default; -// $ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-with-icon-tall !default; -// $ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-taller !default; +$ouds-button-size-max-height: $ouds-dimension-600 !default; +$ouds-button-size-min-height: $ouds-dimension-600 !default; +$ouds-button-size-min-width: $ouds-dimension-600 !default; +$ouds-button-border-radius: $ouds-border-radius-none !default; +$ouds-button-border-width-default: $ouds-border-width-default !default; +$ouds-button-border-width-default-interaction: $ouds-border-width-medium !default; +$ouds-button-border-width-minimal: $ouds-border-width-none !default; +$ouds-button-border-width-minimal-interaction: $ouds-border-width-none !default; +$ouds-button-color-background-default-disabled: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-background-default-disabled-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-background-default-enabled: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-background-default-enabled-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-background-default-focus: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-background-default-focus-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-background-default-hover: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-background-default-hover-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-background-default-loading: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-background-default-loading-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-background-default-pressed: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-background-default-pressed-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-background-minimal-disabled: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-background-minimal-disabled-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-background-minimal-enabled: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-background-minimal-enabled-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-border-minimal-disabled: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-border-minimal-disabled-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-border-minimal-enabled: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-border-minimal-enabled-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-border-minimal-hover: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-border-minimal-hover-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-border-minimal-loading: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-border-minimal-loading-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-border-minimal-pressed: var(--#{$prefix}color-transparent-default) !default; +// $ouds-button-color-border-minimal-pressed-on-bg-emphasized: var(--#{$prefix}color-transparent-default) !default; +$ouds-button-color-background-minimal-focus: var(--#{$prefix}color-action-secondary-focus) !default; +// $ouds-button-color-background-minimal-focus-on-bg-emphasized: var(--#{$prefix}color-action-secondary-focus-on-bg-emphasized) !default; +$ouds-button-color-background-minimal-hover: var(--#{$prefix}color-action-secondary-hover) !default; +// $ouds-button-color-background-minimal-hover-on-bg-emphasized: var(--#{$prefix}color-action-secondary-hover-on-bg-emphasized) !default; +$ouds-button-color-background-minimal-loading: var(--#{$prefix}color-action-secondary-loading) !default; +// $ouds-button-color-background-minimal-loading-on-bg-emphasized: var(--#{$prefix}color-action-secondary-loading-on-bg-emphasized) !default; +$ouds-button-color-background-minimal-pressed: var(--#{$prefix}color-action-secondary-pressed) !default; +// $ouds-button-color-background-minimal-pressed-on-bg-emphasized: var(--#{$prefix}color-action-secondary-pressed-on-bg-emphasized) !default; +$ouds-button-color-border-default-disabled: var(--#{$prefix}color-action-disabled) !default; +// $ouds-button-color-border-default-disabled-on-bg-emphasized: var(--#{$prefix}color-action-disabled-on-bg-emphasized) !default; +$ouds-button-color-border-default-enabled: var(--#{$prefix}color-action-primary-enabled) !default; +// $ouds-button-color-border-default-enabled-on-bg-emphasized: var(--#{$prefix}color-action-primary-enabled-on-bg-emphasized) !default; +$ouds-button-color-border-default-hover: var(--#{$prefix}color-action-primary-hover) !default; +// $ouds-button-color-border-default-hover-on-bg-emphasized: var(--#{$prefix}color-action-primary-hover-on-bg-emphasized) !default; +$ouds-button-color-border-default-loading: var(--#{$prefix}color-action-primary-loading) !default; +// $ouds-button-color-border-default-loading-on-bg-emphasized: var(--#{$prefix}color-action-primary-loading-on-bg-emphasized) !default; +$ouds-button-color-border-default-pressed: var(--#{$prefix}color-action-primary-pressed) !default; +// $ouds-button-color-border-default-pressed-on-bg-emphasized: var(--#{$prefix}color-action-primary-pressed-on-bg-emphasized) !default; +$ouds-button-color-content-default-disabled: var(--#{$prefix}color-action-disabled) !default; +// $ouds-button-color-content-default-disabled-on-bg-emphasized: var(--#{$prefix}color-action-disabled-on-bg-emphasized) !default; +$ouds-button-color-content-default-enabled: var(--#{$prefix}color-action-primary-enabled) !default; +// $ouds-button-color-content-default-enabled-on-bg-emphasized: var(--#{$prefix}color-action-primary-enabled-on-bg-emphasized) !default; +$ouds-button-color-content-default-focus: var(--#{$prefix}color-action-primary-focus) !default; +// $ouds-button-color-content-default-focus-on-bg-emphasized: var(--#{$prefix}color-action-primary-focus-on-bg-emphasized) !default; +$ouds-button-color-content-default-hover: var(--#{$prefix}color-action-primary-hover) !default; +// $ouds-button-color-content-default-hover-on-bg-emphasized: var(--#{$prefix}color-action-primary-hover-on-bg-emphasized) !default; +$ouds-button-color-content-default-loading: var(--#{$prefix}color-action-primary-loading) !default; +// $ouds-button-color-content-default-loading-on-bg-emphasized: var(--#{$prefix}color-action-primary-loading-on-bg-emphasized) !default; +$ouds-button-color-content-default-pressed: var(--#{$prefix}color-action-primary-pressed) !default; +// $ouds-button-color-content-default-pressed-on-bg-emphasized: var(--#{$prefix}color-action-primary-pressed-on-bg-emphasized) !default; +$ouds-button-color-content-minimal-disabled: var(--#{$prefix}color-action-disabled) !default; +// $ouds-button-color-content-minimal-disabled-on-bg-emphasized: var(--#{$prefix}color-action-disabled-on-bg-emphasized) !default; +$ouds-button-color-content-minimal-enabled: var(--#{$prefix}color-action-primary-enabled) !default; +// $ouds-button-color-content-minimal-enabled-on-bg-emphasized: var(--#{$prefix}color-action-primary-enabled-on-bg-emphasized) !default; +$ouds-button-color-content-minimal-focus: var(--#{$prefix}color-action-primary-focus) !default; +// $ouds-button-color-content-minimal-focus-on-bg-emphasized: var(--#{$prefix}color-action-primary-focus-on-bg-emphasized) !default; +$ouds-button-color-content-minimal-hover: var(--#{$prefix}color-action-primary-hover) !default; +// $ouds-button-color-content-minimal-hover-on-bg-emphasized: var(--#{$prefix}color-action-primary-hover-on-bg-emphasized) !default; +$ouds-button-color-content-minimal-loading: var(--#{$prefix}color-action-primary-loading) !default; +// $ouds-button-color-content-minimal-loading-on-bg-emphasized: var(--#{$prefix}color-action-primary-loading-on-bg-emphasized) !default; +$ouds-button-color-content-minimal-pressed: var(--#{$prefix}color-action-primary-pressed) !default; +// $ouds-button-color-content-minimal-pressed-on-bg-emphasized: var(--#{$prefix}color-action-primary-pressed-on-bg-emphasized) !default; +$ouds-button-size-icon: $ouds-size-icon-with-label-large-size-shorter !default; +$ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-short !default; +$ouds-button-size-loader: $ouds-size-icon-with-label-large-size-shorter !default; +$ouds-button-space-column-gap-arrow: $ouds-space-column-gap-with-arrow-short !default; +$ouds-button-space-column-gap-icon: $ouds-space-column-gap-with-icon-medium !default; +$ouds-button-space-inset-icon-alone: $ouds-space-inset-medium !default; +$ouds-button-space-padding-block: $ouds-space-padding-block-medium !default; +$ouds-button-space-padding-inline-arrow-end: $ouds-space-padding-inline-with-arrow-tall !default; +$ouds-button-space-padding-inline-arrow-start: $ouds-space-padding-inline-with-arrow-tall !default; +$ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-taller !default; +$ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-tallest !default; +$ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-with-icon-tall !default; +$ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-taller !default; // scss-docs-end ouds-component-button diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss index 806658c05b..ec05def795 100644 --- a/scss/tokens/_composite.scss +++ b/scss/tokens/_composite.scss @@ -4,14 +4,14 @@ // Elevation // scss-docs-start ouds-composite-elevation -$ouds-elevation-none: $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none $ouds-elevation-color-none-light !default; -$ouds-elevation-raised: $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised $ouds-elevation-color-raised-light !default; -$ouds-elevation-drag: $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag $ouds-elevation-color-drag-light !default; -$ouds-elevation-overlay-default: $ouds-elevation-x-overlay-default $ouds-elevation-y-overlay-default $ouds-elevation-blur-overlay-default $ouds-elevation-spread-overlay-default $ouds-elevation-color-overlay-default-light !default; -$ouds-elevation-overlay-emphasized: $ouds-elevation-x-overlay-emphasized $ouds-elevation-y-overlay-emphasized $ouds-elevation-blur-overlay-emphasized $ouds-elevation-spread-overlay-emphasized $ouds-elevation-color-overlay-emphasized-light !default; -$ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default $ouds-elevation-color-sticky-default-light !default; -$ouds-elevation-sticky-emphasized: $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized-light !default; -$ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled-light !default; +$ouds-elevation-none: $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none var(--#{$prefix}elevation-color-none) !default; +$ouds-elevation-raised: $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised var(--#{$prefix}elevation-color-raised) !default; +$ouds-elevation-drag: $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag var(--#{$prefix}elevation-color-drag) !default; +$ouds-elevation-overlay-default: $ouds-elevation-x-overlay-default $ouds-elevation-y-overlay-default $ouds-elevation-blur-overlay-default $ouds-elevation-spread-overlay-default var(--#{$prefix}elevation-color-overlay-default) !default; +$ouds-elevation-overlay-emphasized: $ouds-elevation-x-overlay-emphasized $ouds-elevation-y-overlay-emphasized $ouds-elevation-blur-overlay-emphasized $ouds-elevation-spread-overlay-emphasized var(--#{$prefix}elevation-color-overlay-emphasized) !default; +$ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default var(--#{$prefix}elevation-color-sticky-default) !default; +$ouds-elevation-sticky-emphasized: $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized var(--#{$prefix}elevation-color-sticky-emphasized) !default; +$ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled var(--#{$prefix}elevation-color-sticky-navigation-scrolled) !default; // scss-docs-end ouds-composite-elevation // stylelint-disable value-keyword-case diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 340496d73f..964e7c7af6 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -1,5 +1,3 @@ -@import "../color-palette"; - // Raw primitive values // Insertion of brand foundations @@ -45,15 +43,15 @@ $ouds-color-decorative-amber-500: #ffb400 !default; // $ouds-color-decorative-amber-700: #996c00 !default; // $ouds-color-decorative-amber-800: #664800 !default; // $ouds-color-decorative-amber-900: #332400 !default; -// $ouds-color-decorative-amethyst-100: #f1ecf9 !default; +$ouds-color-decorative-amethyst-100: #f1ecf9 !default; $ouds-color-decorative-amethyst-200: #e0d4f2 !default; -// $ouds-color-decorative-amethyst-300: #c5ade6 !default; +$ouds-color-decorative-amethyst-300: #c5ade6 !default; $ouds-color-decorative-amethyst-400: #a885d8 !default; -// $ouds-color-decorative-amethyst-500: #8d60cd !default; +$ouds-color-decorative-amethyst-500: #8d60cd !default; $ouds-color-decorative-amethyst-600: #5b2f98 !default; -// $ouds-color-decorative-amethyst-700: #432371 !default; +$ouds-color-decorative-amethyst-700: #432371 !default; $ouds-color-decorative-amethyst-800: #2c174a !default; -// $ouds-color-decorative-amethyst-900: #150b23 !default; +$ouds-color-decorative-amethyst-900: #150b23 !default; $ouds-color-decorative-deep-peach-100: #fbebdf !default; $ouds-color-decorative-deep-peach-200: #f4cfb2 !default; $ouds-color-decorative-deep-peach-300: #e3b591 !default; @@ -63,36 +61,36 @@ $ouds-color-decorative-deep-peach-600: #aa6631 !default; $ouds-color-decorative-deep-peach-700: #7e4f2a !default; $ouds-color-decorative-deep-peach-800: #553720 !default; $ouds-color-decorative-deep-peach-900: #2e2014 !default; -// $ouds-color-decorative-emerald-100: #e5f5ed !default; +$ouds-color-decorative-emerald-100: #e5f5ed !default; $ouds-color-decorative-emerald-200: #c0e8d4 !default; -// $ouds-color-decorative-emerald-300: #9bdaba !default; -// $ouds-color-decorative-emerald-400: #75cca1 !default; +$ouds-color-decorative-emerald-300: #9bdaba !default; +$ouds-color-decorative-emerald-400: #75cca1 !default; $ouds-color-decorative-emerald-500: #50be87 !default; -// $ouds-color-decorative-emerald-600: #3ba06e !default; +$ouds-color-decorative-emerald-600: #3ba06e !default; $ouds-color-decorative-emerald-700: #2e7b54 !default; -// $ouds-color-decorative-emerald-800: #20563b !default; -// $ouds-color-decorative-emerald-900: #123021 !default; +$ouds-color-decorative-emerald-800: #20563b !default; +$ouds-color-decorative-emerald-900: #123021 !default; $ouds-color-decorative-shocking-pink-100: #ffe5f6 !default; $ouds-color-decorative-shocking-pink-200: #ffb4e6 !default; $ouds-color-decorative-shocking-pink-300: #ff80d4 !default; -// $ouds-color-decorative-shocking-pink-400: #ff4dc3 !default; -// $ouds-color-decorative-shocking-pink-500: #ff1ab2 !default; -// $ouds-color-decorative-shocking-pink-600: #e50099 !default; -// $ouds-color-decorative-shocking-pink-700: #b20077 !default; -// $ouds-color-decorative-shocking-pink-800: #800055 !default; -// $ouds-color-decorative-shocking-pink-900: #4d0033 !default; -// $ouds-color-decorative-sky-100: #d2ecf9 !default; +$ouds-color-decorative-shocking-pink-400: #ff4dc3 !default; +$ouds-color-decorative-shocking-pink-500: #ff1ab2 !default; +$ouds-color-decorative-shocking-pink-600: #e50099 !default; +$ouds-color-decorative-shocking-pink-700: #b20077 !default; +$ouds-color-decorative-shocking-pink-800: #800055 !default; +$ouds-color-decorative-shocking-pink-900: #4d0033 !default; +$ouds-color-decorative-sky-100: #d2ecf9 !default; $ouds-color-decorative-sky-200: #a5daf3 !default; -// $ouds-color-decorative-sky-300: #79c7ec !default; +$ouds-color-decorative-sky-300: #79c7ec !default; $ouds-color-decorative-sky-400: #4ab4e6 !default; -// $ouds-color-decorative-sky-500: #1fa2e0 !default; -// $ouds-color-decorative-sky-600: #1982b3 !default; +$ouds-color-decorative-sky-500: #1fa2e0 !default; +$ouds-color-decorative-sky-600: #1982b3 !default; $ouds-color-decorative-sky-700: #136186 !default; -// $ouds-color-decorative-sky-800: #0c415a !default; -// $ouds-color-decorative-sky-900: #06202d !default; +$ouds-color-decorative-sky-800: #0c415a !default; +$ouds-color-decorative-sky-900: #06202d !default; $ouds-color-functional-black: #000 !default; // $ouds-color-functional-dark-gray-80: #7a7a7a !default; -// $ouds-color-functional-dark-gray-160: #707070 !default; +$ouds-color-functional-dark-gray-160: #707070 !default; // $ouds-color-functional-dark-gray-240: #666 !default; // $ouds-color-functional-dark-gray-320: #5c5c5c !default; $ouds-color-functional-dark-gray-400: #555 !default; @@ -104,13 +102,13 @@ $ouds-color-functional-dark-gray-800: #1f1f1f !default; $ouds-color-functional-dark-gray-880: #141414 !default; // $ouds-color-functional-dark-gray-960: #0a0a0a !default; $ouds-color-functional-dodger-blue-100: #f0faff !default; -// $ouds-color-functional-dodger-blue-200: #bde7ff !default; -// $ouds-color-functional-dodger-blue-300: #8ad5ff !default; -// $ouds-color-functional-dodger-blue-400: #57c3ff !default; +$ouds-color-functional-dodger-blue-200: #bde7ff !default; +$ouds-color-functional-dodger-blue-300: #8ad5ff !default; +$ouds-color-functional-dodger-blue-400: #57c3ff !default; $ouds-color-functional-dodger-blue-500: #26b2ff !default; -// $ouds-color-functional-dodger-blue-600: #009bf0 !default; -// $ouds-color-functional-dodger-blue-700: #007abd !default; -// $ouds-color-functional-dodger-blue-800: #00598a !default; +$ouds-color-functional-dodger-blue-600: #009bf0 !default; +$ouds-color-functional-dodger-blue-700: #007abd !default; +$ouds-color-functional-dodger-blue-800: #00598a !default; $ouds-color-functional-dodger-blue-900: #003857 !default; $ouds-color-functional-light-gray-80: #f4f4f4 !default; $ouds-color-functional-light-gray-160: #eee !default; @@ -125,31 +123,31 @@ $ouds-color-functional-light-gray-560: #bbb !default; // $ouds-color-functional-light-gray-880: #8f8f8f !default; // $ouds-color-functional-light-gray-960: #858585 !default; $ouds-color-functional-malachite-100: #edfcf0 !default; -// $ouds-color-functional-malachite-200: #c1f6ca !default; -// $ouds-color-functional-malachite-300: #94f0a4 !default; -// $ouds-color-functional-malachite-400: #67e97e !default; +$ouds-color-functional-malachite-200: #c1f6ca !default; +$ouds-color-functional-malachite-300: #94f0a4 !default; +$ouds-color-functional-malachite-400: #67e97e !default; $ouds-color-functional-malachite-500: #3de35a !default; -// $ouds-color-functional-malachite-600: #1ecd3c !default; -// $ouds-color-functional-malachite-700: #17a02f !default; -// $ouds-color-functional-malachite-800: #0e621d !default; +$ouds-color-functional-malachite-600: #1ecd3c !default; +$ouds-color-functional-malachite-700: #17a02f !default; +$ouds-color-functional-malachite-800: #0e621d !default; $ouds-color-functional-malachite-900: #0a4715 !default; $ouds-color-functional-scarlet-100: #ffe5e6 !default; -// $ouds-color-functional-scarlet-200: #ffb2b3 !default; -// $ouds-color-functional-scarlet-300: #ff8081 !default; -// $ouds-color-functional-scarlet-400: #ff4d4e !default; -// $ouds-color-functional-scarlet-500: #ff1a1b !default; +$ouds-color-functional-scarlet-200: #ffb2b3 !default; +$ouds-color-functional-scarlet-300: #ff8081 !default; +$ouds-color-functional-scarlet-400: #ff4d4e !default; +$ouds-color-functional-scarlet-500: #ff1a1b !default; $ouds-color-functional-scarlet-600: #ea0305 !default; $ouds-color-functional-scarlet-700: #b20002 !default; $ouds-color-functional-scarlet-800: #800001 !default; $ouds-color-functional-scarlet-900: #4d0001 !default; $ouds-color-functional-sun-100: #fff7d6 !default; $ouds-color-functional-sun-200: #ffed99 !default; -// $ouds-color-functional-sun-300: #ffe270 !default; -// $ouds-color-functional-sun-400: #ffd73d !default; +$ouds-color-functional-sun-300: #ffe270 !default; +$ouds-color-functional-sun-400: #ffd73d !default; $ouds-color-functional-sun-500: #ffd000 !default; -// $ouds-color-functional-sun-600: #d6aa00 !default; -// $ouds-color-functional-sun-700: #a38200 !default; -// $ouds-color-functional-sun-800: #665100 !default; +$ouds-color-functional-sun-600: #d6aa00 !default; +$ouds-color-functional-sun-700: #a38200 !default; +$ouds-color-functional-sun-800: #665100 !default; $ouds-color-functional-sun-900: #3d3100 !default; $ouds-color-functional-white: #fff !default; $ouds-color-transparent-black-0: rgba(0, 0, 0, 0) !default; @@ -173,16 +171,16 @@ $ouds-color-transparent-black-500: rgba(0, 0, 0, .32) !default; // $ouds-color-transparent-white-800: rgba(255, 255, 255, .88) !default; // $ouds-color-transparent-white-900: #fff !default; // $ouds-color-orange-50: #fff2e6 !default; -// $ouds-color-orange-100: #ffd5b0 !default; -// $ouds-color-orange-200: #ffc18a !default; -// $ouds-color-orange-300: #ffa554 !default; -// $ouds-color-orange-400: #ff9433 !default; +$ouds-color-orange-100: #ffd5b0 !default; +$ouds-color-orange-200: #ffc18a !default; +$ouds-color-orange-300: #ffa554 !default; +$ouds-color-orange-400: #ff9433 !default; $ouds-color-orange-500: #ff7900 !default; $ouds-color-orange-550: #f16e00 !default; -// $ouds-color-orange-600: #e86e00 !default; -// $ouds-color-orange-700: #b55600 !default; -// $ouds-color-orange-800: #8c4300 !default; -// $ouds-color-orange-900: #6b3300 !default; +$ouds-color-orange-600: #e86e00 !default; +$ouds-color-orange-700: #b55600 !default; +$ouds-color-orange-800: #8c4300 !default; +$ouds-color-orange-900: #6b3300 !default; $ouds-color-warm-gray-100: #f9f5f0 !default; // $ouds-color-warm-gray-200: #e9ddce !default; // $ouds-color-warm-gray-300: #d6c4ae !default; diff --git a/scss/tokens/_semantic-colors-custom-props.scss b/scss/tokens/_semantic-colors-custom-props.scss new file mode 100644 index 0000000000..7a85673770 --- /dev/null +++ b/scss/tokens/_semantic-colors-custom-props.scss @@ -0,0 +1,356 @@ +:root, +[data-bs-theme="light"] { + --#{$prefix}color-transparent-default: #{$ouds-color-transparent-default-light}; + --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-light}; + // --#{$prefix}color-action-disabled-on-bg-emphasized: #{$ouds-color-action-disabled-on-bg-emphasized-light}; + --#{$prefix}color-action-negative-enabled: #{$ouds-color-action-negative-enabled-light}; + --#{$prefix}color-action-negative-focus: #{$ouds-color-action-negative-focus-light}; + --#{$prefix}color-action-negative-hover: #{$ouds-color-action-negative-hover-light}; + --#{$prefix}color-action-negative-loading: #{$ouds-color-action-negative-loading-light}; + --#{$prefix}color-action-negative-pressed: #{$ouds-color-action-negative-pressed-light}; + --#{$prefix}color-action-primary-enabled: #{$ouds-color-action-primary-enabled-light}; + // --#{$prefix}color-action-primary-enabled-on-bg-emphasized: #{$ouds-color-action-primary-enabled-on-bg-emphasized-light}; + --#{$prefix}color-action-primary-focus: #{$ouds-color-action-primary-focus-light}; + // --#{$prefix}color-action-primary-focus-on-bg-emphasized: #{$ouds-color-action-primary-focus-on-bg-emphasized-light}; + --#{$prefix}color-action-primary-hover: #{$ouds-color-action-primary-hover-light}; + // --#{$prefix}color-action-primary-hover-on-bg-emphasized: #{$ouds-color-action-primary-hover-on-bg-emphasized-light}; + --#{$prefix}color-action-primary-loading: #{$ouds-color-action-primary-loading-light}; + // --#{$prefix}color-action-primary-loading-on-bg-emphasized: #{$ouds-color-action-primary-loading-on-bg-emphasized-light}; + --#{$prefix}color-action-primary-pressed: #{$ouds-color-action-primary-pressed-light}; + // --#{$prefix}color-action-primary-pressed-on-bg-emphasized: #{$ouds-color-action-primary-pressed-on-bg-emphasized-light}; + --#{$prefix}color-action-secondary-enabled: #{$ouds-color-action-secondary-enabled-light}; + // --#{$prefix}color-action-secondary-enabled-on-bg-emphasized: #{$ouds-color-action-secondary-enabled-on-bg-emphasized-light}; + --#{$prefix}color-action-secondary-focus: #{$ouds-color-action-secondary-focus-light}; + // --#{$prefix}color-action-secondary-focus-on-bg-emphasized: #{$ouds-color-action-secondary-focus-on-bg-emphasized-light}; + --#{$prefix}color-action-secondary-hover: #{$ouds-color-action-secondary-hover-light}; + // --#{$prefix}color-action-secondary-hover-on-bg-emphasized: #{$ouds-color-action-secondary-hover-on-bg-emphasized-light}; + --#{$prefix}color-action-secondary-loading: #{$ouds-color-action-secondary-loading-light}; + // --#{$prefix}color-action-secondary-loading-on-bg-emphasized: #{$ouds-color-action-secondary-loading-on-bg-emphasized-light}; + --#{$prefix}color-action-secondary-pressed: #{$ouds-color-action-secondary-pressed-light}; + // --#{$prefix}color-action-secondary-pressed-on-bg-emphasized: #{$ouds-color-action-secondary-pressed-on-bg-emphasized-light}; + --#{$prefix}color-action-selected: #{$ouds-color-action-selected-light}; + // --#{$prefix}color-action-selected-on-bg-emphasized: #{$ouds-color-action-selected-on-bg-emphasized-light}; + --#{$prefix}color-action-visited: #{$ouds-color-action-visited-light}; + // --#{$prefix}color-action-visited-on-bg-emphasized: #{$ouds-color-action-visited-on-bg-emphasized-light}; + --#{$prefix}color-always-accent: #{$ouds-color-always-accent-light}; + --#{$prefix}color-always-black: #{$ouds-color-always-black-light}; + --#{$prefix}color-always-info: #{$ouds-color-always-info-light}; + --#{$prefix}color-always-negative: #{$ouds-color-always-negative-light}; + --#{$prefix}color-always-on-accent: #{$ouds-color-always-on-accent-light}; + --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black-light}; + --#{$prefix}color-always-on-info: #{$ouds-color-always-on-info-light}; + --#{$prefix}color-always-on-negative: #{$ouds-color-always-on-negative-light}; + --#{$prefix}color-always-on-positive: #{$ouds-color-always-on-positive-light}; + --#{$prefix}color-always-on-warning: #{$ouds-color-always-on-warning-light}; + --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white-light}; + --#{$prefix}color-always-positive: #{$ouds-color-always-positive-light}; + --#{$prefix}color-always-warning: #{$ouds-color-always-warning-light}; + --#{$prefix}color-always-white: #{$ouds-color-always-white-light}; + --#{$prefix}color-bg-brand-primary: #{$ouds-color-bg-brand-primary-light}; + // --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-light}; + --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-light}; + --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-light}; + --#{$prefix}color-bg-status-accent-emphasized: #{$ouds-color-bg-status-accent-emphasized-light}; + --#{$prefix}color-bg-status-accent-muted: #{$ouds-color-bg-status-accent-muted-light}; + // --#{$prefix}color-bg-status-accent-muted-on-bg-emphasized: #{$ouds-color-bg-status-accent-muted-on-bg-emphasized-light}; + --#{$prefix}color-bg-status-info-emphasized: #{$ouds-color-bg-status-info-emphasized-light}; + --#{$prefix}color-bg-status-info-muted: #{$ouds-color-bg-status-info-muted-light}; + // --#{$prefix}color-bg-status-info-muted-on-bg-emphasized: #{$ouds-color-bg-status-info-muted-on-bg-emphasized-light}; + --#{$prefix}color-bg-status-negative-emphasized: #{$ouds-color-bg-status-negative-emphasized-light}; + --#{$prefix}color-bg-status-negative-muted: #{$ouds-color-bg-status-negative-muted-light}; + // --#{$prefix}color-bg-status-negative-muted-on-bg-emphasized: #{$ouds-color-bg-status-negative-muted-on-bg-emphasized-light}; + --#{$prefix}color-bg-status-neutral: #{$ouds-color-bg-status-neutral-light}; + // --#{$prefix}color-bg-status-neutral-on-bg-emphasized: #{$ouds-color-bg-status-neutral-on-bg-emphasized-light}; + --#{$prefix}color-bg-status-positive-emphasized: #{$ouds-color-bg-status-positive-emphasized-light}; + --#{$prefix}color-bg-status-positive-muted: #{$ouds-color-bg-status-positive-muted-light}; + // --#{$prefix}color-bg-status-positive-muted-on-bg-emphasized: #{$ouds-color-bg-status-positive-muted-on-bg-emphasized-light}; + --#{$prefix}color-bg-status-warning-emphasized: #{$ouds-color-bg-status-warning-emphasized-light}; + --#{$prefix}color-bg-status-warning-muted: #{$ouds-color-bg-status-warning-muted-light}; + // --#{$prefix}color-bg-status-warning-muted-on-bg-emphasized: #{$ouds-color-bg-status-warning-muted-on-bg-emphasized-light}; + --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-light}; + --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-light}; + // --#{$prefix}color-border-brand-primary-on-bg-emphasized: #{$ouds-color-border-brand-primary-on-bg-emphasized-light}; + --#{$prefix}color-border-default: #{$ouds-color-border-default-light}; + // --#{$prefix}color-border-default-on-bg-emphasized: #{$ouds-color-border-default-on-bg-emphasized-light}; + --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-light}; + // --#{$prefix}color-border-emphasized-on-bg-emphasized: #{$ouds-color-border-emphasized-on-bg-emphasized-light}; + --#{$prefix}color-border-focus: #{$ouds-color-border-focus-light}; + --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-light}; + // --#{$prefix}color-border-focus-inset-on-bg-emphasized: #{$ouds-color-border-focus-inset-on-bg-emphasized-light}; + // --#{$prefix}color-border-focus-on-bg-emphasized: #{$ouds-color-border-focus-on-bg-emphasized-light}; + --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-light}; + --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-light}; + // --#{$prefix}color-content-brand-primary-on-bg-emphasized: #{$ouds-color-content-brand-primary-on-bg-emphasized-light}; + --#{$prefix}color-content-default: #{$ouds-color-content-default-light}; + // --#{$prefix}color-content-default-on-bg-emphasized: #{$ouds-color-content-default-on-bg-emphasized-light}; + --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-light}; + // --#{$prefix}color-content-disabled-on-bg-emphasized: #{$ouds-color-content-disabled-on-bg-emphasized-light}; + --#{$prefix}color-content-muted: #{$ouds-color-content-muted-light}; + // --#{$prefix}color-content-muted-on-bg-emphasized: #{$ouds-color-content-muted-on-bg-emphasized-light}; + --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-light}; + // --#{$prefix}color-content-on-action-disabled-on-bg-emphasized: #{$ouds-color-content-on-action-disabled-on-bg-emphasized-light}; + --#{$prefix}color-content-on-action-negative: #{$ouds-color-content-on-action-negative-light}; + --#{$prefix}color-content-on-action-primary-enabled: #{$ouds-color-content-on-action-primary-enabled-light}; + // --#{$prefix}color-content-on-action-primary-enabled-on-bg-emphasized: #{$ouds-color-content-on-action-primary-enabled-on-bg-emphasized-light}; + --#{$prefix}color-content-on-action-primary-focus: #{$ouds-color-content-on-action-primary-focus-light}; + // --#{$prefix}color-content-on-action-primary-focus-on-bg-emphasized: #{$ouds-color-content-on-action-primary-focus-on-bg-emphasized-light}; + --#{$prefix}color-content-on-action-primary-hover: #{$ouds-color-content-on-action-primary-hover-light}; + // --#{$prefix}color-content-on-action-primary-hover-on-bg-emphasized: #{$ouds-color-content-on-action-primary-hover-on-bg-emphasized-light}; + --#{$prefix}color-content-on-action-primary-loading: #{$ouds-color-content-on-action-primary-loading-light}; + // --#{$prefix}color-content-on-action-primary-loading-on-bg-emphasized: #{$ouds-color-content-on-action-primary-loading-on-bg-emphasized-light}; + --#{$prefix}color-content-on-action-primary-pressed: #{$ouds-color-content-on-action-primary-pressed-light}; + // --#{$prefix}color-content-on-action-primary-pressed-on-bg-emphasized: #{$ouds-color-content-on-action-primary-pressed-on-bg-emphasized-light}; + --#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-light}; + --#{$prefix}color-content-on-status-accent-emphasized: #{$ouds-color-content-on-status-accent-emphasized-light}; + --#{$prefix}color-content-on-status-accent-muted: #{$ouds-color-content-on-status-accent-muted-light}; + // --#{$prefix}color-content-on-status-accent-muted-on-bg-emphasized: #{$ouds-color-content-on-status-accent-muted-on-bg-emphasized-light}; + --#{$prefix}color-content-on-status-info-emphasized: #{$ouds-color-content-on-status-info-emphasized-light}; + --#{$prefix}color-content-on-status-info-muted: #{$ouds-color-content-on-status-info-muted-light}; + // --#{$prefix}color-content-on-status-info-muted-on-bg-emphasized: #{$ouds-color-content-on-status-info-muted-on-bg-emphasized-light}; + --#{$prefix}color-content-on-status-negative-emphasized: #{$ouds-color-content-on-status-negative-emphasized-light}; + --#{$prefix}color-content-on-status-negative-muted: #{$ouds-color-content-on-status-negative-muted-light}; + // --#{$prefix}color-content-on-status-negative-muted-on-bg-emphasized: #{$ouds-color-content-on-status-negative-muted-on-bg-emphasized-light}; + --#{$prefix}color-content-on-status-positive-emphasized: #{$ouds-color-content-on-status-positive-emphasized-light}; + --#{$prefix}color-content-on-status-positive-muted: #{$ouds-color-content-on-status-positive-muted-light}; + // --#{$prefix}color-content-on-status-positive-muted-on-bg-emphasized: #{$ouds-color-content-on-status-positive-muted-on-bg-emphasized-light}; + --#{$prefix}color-content-on-status-warning-emphasized: #{$ouds-color-content-on-status-warning-emphasized-light}; + --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-light}; + // --#{$prefix}color-content-on-status-warning-muted-on-bg-emphasized: #{$ouds-color-content-on-status-warning-muted-on-bg-emphasized-light}; + --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-light}; + --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-light}; + --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-light}; + --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-light}; + --#{$prefix}color-elevation-drag: #{$ouds-color-elevation-drag-light}; + // --#{$prefix}color-elevation-drag-on-bg-emphasized: #{$ouds-color-elevation-drag-on-bg-emphasized-light}; + --#{$prefix}color-elevation-drag-on-bg-secondary: #{$ouds-color-elevation-drag-on-bg-secondary-light}; + --#{$prefix}color-elevation-modal: #{$ouds-color-elevation-modal-light}; + --#{$prefix}color-elevation-overlay-default: #{$ouds-color-elevation-overlay-default-light}; + // --#{$prefix}color-elevation-overlay-default-on-bg-emphasized: #{$ouds-color-elevation-overlay-default-on-bg-emphasized-light}; + --#{$prefix}color-elevation-overlay-default-on-bg-secondary: #{$ouds-color-elevation-overlay-default-on-bg-secondary-light}; + --#{$prefix}color-elevation-overlay-emphasized: #{$ouds-color-elevation-overlay-emphasized-light}; + // --#{$prefix}color-elevation-overlay-emphasized-on-bg-emphasized: #{$ouds-color-elevation-overlay-emphasized-on-bg-emphasized-light}; + --#{$prefix}color-elevation-overlay-emphasized-on-bg-secondary: #{$ouds-color-elevation-overlay-emphasized-on-bg-secondary-light}; + --#{$prefix}color-elevation-raised: #{$ouds-color-elevation-raised-light}; + // --#{$prefix}color-elevation-raised-on-bg-emphasized: #{$ouds-color-elevation-raised-on-bg-emphasized-light}; + --#{$prefix}color-elevation-raised-on-bg-secondary: #{$ouds-color-elevation-raised-on-bg-secondary-light}; + --#{$prefix}color-gradient-skeleton-middle: #{$ouds-color-gradient-skeleton-middle-light}; + // --#{$prefix}color-gradient-skeleton-middle-on-bg-emphasized: #{$ouds-color-gradient-skeleton-middle-on-bg-emphasized-light}; + --#{$prefix}color-gradient-skeleton-start-end: #{$ouds-color-gradient-skeleton-start-end-light}; + // --#{$prefix}color-gradient-skeleton-start-end-on-bg-emphasized: #{$ouds-color-gradient-skeleton-start-end-on-bg-emphasized-light}; + --#{$prefix}color-decorative-accent-1-default: #{$ouds-color-decorative-accent-1-default-light}; + --#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized-light}; + --#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted-light}; + --#{$prefix}color-decorative-accent-2-default: #{$ouds-color-decorative-accent-2-default-light}; + --#{$prefix}color-decorative-accent-2-emphasized: #{$ouds-color-decorative-accent-2-emphasized-light}; + --#{$prefix}color-decorative-accent-2-muted: #{$ouds-color-decorative-accent-2-muted-light}; + --#{$prefix}color-decorative-accent-3-default: #{$ouds-color-decorative-accent-3-default-light}; + --#{$prefix}color-decorative-accent-3-emphasized: #{$ouds-color-decorative-accent-3-emphasized-light}; + --#{$prefix}color-decorative-accent-3-muted: #{$ouds-color-decorative-accent-3-muted-light}; + --#{$prefix}color-decorative-accent-4-default: #{$ouds-color-decorative-accent-4-default-light}; + --#{$prefix}color-decorative-accent-4-emphasized: #{$ouds-color-decorative-accent-4-emphasized-light}; + --#{$prefix}color-decorative-accent-4-muted: #{$ouds-color-decorative-accent-4-muted-light}; + --#{$prefix}color-decorative-accent-5-default: #{$ouds-color-decorative-accent-5-default-light}; + --#{$prefix}color-decorative-accent-5-emphasized: #{$ouds-color-decorative-accent-5-emphasized-light}; + --#{$prefix}color-decorative-accent-5-muted: #{$ouds-color-decorative-accent-5-muted-light}; + --#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary-light}; + --#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary-light}; + --#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary-light}; + --#{$prefix}color-decorative-neutral-default: #{$ouds-color-decorative-neutral-default-light}; + --#{$prefix}color-decorative-neutral-emphasized: #{$ouds-color-decorative-neutral-emphasized-light}; + --#{$prefix}color-decorative-neutral-muted: #{$ouds-color-decorative-neutral-muted-light}; + --#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100-light}; + --#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200-light}; + --#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300-light}; + --#{$prefix}color-decorative-skin-tint-400: #{$ouds-color-decorative-skin-tint-400-light}; + --#{$prefix}color-decorative-skin-tint-500: #{$ouds-color-decorative-skin-tint-500-light}; + --#{$prefix}color-decorative-skin-tint-600: #{$ouds-color-decorative-skin-tint-600-light}; + --#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700-light}; + --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-light}; + --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-light}; + --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none-light}; + --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-light}; + --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-light}; + --#{$prefix}elevation-color-overlay-default: #{$ouds-elevation-color-overlay-default-light}; + --#{$prefix}elevation-color-overlay-emphasized: #{$ouds-elevation-color-overlay-emphasized-light}; + --#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default-light}; + --#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized-light}; + --#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled-light}; +} + +[data-bs-theme="dark"] { + --#{$prefix}color-transparent-default: #{$ouds-color-transparent-default-dark}; + --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-dark}; + // --#{$prefix}color-action-disabled-on-bg-emphasized: #{$ouds-color-action-disabled-on-bg-emphasized-dark}; + --#{$prefix}color-action-negative-enabled: #{$ouds-color-action-negative-enabled-dark}; + --#{$prefix}color-action-negative-focus: #{$ouds-color-action-negative-focus-dark}; + --#{$prefix}color-action-negative-hover: #{$ouds-color-action-negative-hover-dark}; + --#{$prefix}color-action-negative-loading: #{$ouds-color-action-negative-loading-dark}; + --#{$prefix}color-action-negative-pressed: #{$ouds-color-action-negative-pressed-dark}; + --#{$prefix}color-action-primary-enabled: #{$ouds-color-action-primary-enabled-dark}; + // --#{$prefix}color-action-primary-enabled-on-bg-emphasized: #{$ouds-color-action-primary-enabled-on-bg-emphasized-dark}; + --#{$prefix}color-action-primary-focus: #{$ouds-color-action-primary-focus-dark}; + // --#{$prefix}color-action-primary-focus-on-bg-emphasized: #{$ouds-color-action-primary-focus-on-bg-emphasized-dark}; + --#{$prefix}color-action-primary-hover: #{$ouds-color-action-primary-hover-dark}; + // --#{$prefix}color-action-primary-hover-on-bg-emphasized: #{$ouds-color-action-primary-hover-on-bg-emphasized-dark}; + --#{$prefix}color-action-primary-loading: #{$ouds-color-action-primary-loading-dark}; + // --#{$prefix}color-action-primary-loading-on-bg-emphasized: #{$ouds-color-action-primary-loading-on-bg-emphasized-dark}; + --#{$prefix}color-action-primary-pressed: #{$ouds-color-action-primary-pressed-dark}; + // --#{$prefix}color-action-primary-pressed-on-bg-emphasized: #{$ouds-color-action-primary-pressed-on-bg-emphasized-dark}; + --#{$prefix}color-action-secondary-enabled: #{$ouds-color-action-secondary-enabled-dark}; + // --#{$prefix}color-action-secondary-enabled-on-bg-emphasized: #{$ouds-color-action-secondary-enabled-on-bg-emphasized-dark}; + --#{$prefix}color-action-secondary-focus: #{$ouds-color-action-secondary-focus-dark}; + // --#{$prefix}color-action-secondary-focus-on-bg-emphasized: #{$ouds-color-action-secondary-focus-on-bg-emphasized-dark}; + --#{$prefix}color-action-secondary-hover: #{$ouds-color-action-secondary-hover-dark}; + // --#{$prefix}color-action-secondary-hover-on-bg-emphasized: #{$ouds-color-action-secondary-hover-on-bg-emphasized-dark}; + --#{$prefix}color-action-secondary-loading: #{$ouds-color-action-secondary-loading-dark}; + // --#{$prefix}color-action-secondary-loading-on-bg-emphasized: #{$ouds-color-action-secondary-loading-on-bg-emphasized-dark}; + --#{$prefix}color-action-secondary-pressed: #{$ouds-color-action-secondary-pressed-dark}; + // --#{$prefix}color-action-secondary-pressed-on-bg-emphasized: #{$ouds-color-action-secondary-pressed-on-bg-emphasized-dark}; + --#{$prefix}color-action-selected: #{$ouds-color-action-selected-dark}; + // --#{$prefix}color-action-selected-on-bg-emphasized: #{$ouds-color-action-selected-on-bg-emphasized-dark}; + --#{$prefix}color-action-visited: #{$ouds-color-action-visited-dark}; + // --#{$prefix}color-action-visited-on-bg-emphasized: #{$ouds-color-action-visited-on-bg-emphasized-dark}; + --#{$prefix}color-always-accent: #{$ouds-color-always-accent-dark}; + --#{$prefix}color-always-black: #{$ouds-color-always-black-dark}; + --#{$prefix}color-always-info: #{$ouds-color-always-info-dark}; + --#{$prefix}color-always-negative: #{$ouds-color-always-negative-dark}; + --#{$prefix}color-always-on-accent: #{$ouds-color-always-on-accent-dark}; + --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black-dark}; + --#{$prefix}color-always-on-info: #{$ouds-color-always-on-info-dark}; + --#{$prefix}color-always-on-negative: #{$ouds-color-always-on-negative-dark}; + --#{$prefix}color-always-on-positive: #{$ouds-color-always-on-positive-dark}; + --#{$prefix}color-always-on-warning: #{$ouds-color-always-on-warning-dark}; + --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white-dark}; + --#{$prefix}color-always-positive: #{$ouds-color-always-positive-dark}; + --#{$prefix}color-always-warning: #{$ouds-color-always-warning-dark}; + --#{$prefix}color-always-white: #{$ouds-color-always-white-dark}; + --#{$prefix}color-bg-brand-primary: #{$ouds-color-bg-brand-primary-dark}; + // --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-dark}; + --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-dark}; + --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-dark}; + --#{$prefix}color-bg-status-accent-emphasized: #{$ouds-color-bg-status-accent-emphasized-dark}; + --#{$prefix}color-bg-status-accent-muted: #{$ouds-color-bg-status-accent-muted-dark}; + // --#{$prefix}color-bg-status-accent-muted-on-bg-emphasized: #{$ouds-color-bg-status-accent-muted-on-bg-emphasized-dark}; + --#{$prefix}color-bg-status-info-emphasized: #{$ouds-color-bg-status-info-emphasized-dark}; + --#{$prefix}color-bg-status-info-muted: #{$ouds-color-bg-status-info-muted-dark}; + // --#{$prefix}color-bg-status-info-muted-on-bg-emphasized: #{$ouds-color-bg-status-info-muted-on-bg-emphasized-dark}; + --#{$prefix}color-bg-status-negative-emphasized: #{$ouds-color-bg-status-negative-emphasized-dark}; + --#{$prefix}color-bg-status-negative-muted: #{$ouds-color-bg-status-negative-muted-dark}; + // --#{$prefix}color-bg-status-negative-muted-on-bg-emphasized: #{$ouds-color-bg-status-negative-muted-on-bg-emphasized-dark}; + --#{$prefix}color-bg-status-neutral: #{$ouds-color-bg-status-neutral-dark}; + // --#{$prefix}color-bg-status-neutral-on-bg-emphasized: #{$ouds-color-bg-status-neutral-on-bg-emphasized-dark}; + --#{$prefix}color-bg-status-positive-emphasized: #{$ouds-color-bg-status-positive-emphasized-dark}; + --#{$prefix}color-bg-status-positive-muted: #{$ouds-color-bg-status-positive-muted-dark}; + // --#{$prefix}color-bg-status-positive-muted-on-bg-emphasized: #{$ouds-color-bg-status-positive-muted-on-bg-emphasized-dark}; + --#{$prefix}color-bg-status-warning-emphasized: #{$ouds-color-bg-status-warning-emphasized-dark}; + --#{$prefix}color-bg-status-warning-muted: #{$ouds-color-bg-status-warning-muted-dark}; + // --#{$prefix}color-bg-status-warning-muted-on-bg-emphasized: #{$ouds-color-bg-status-warning-muted-on-bg-emphasized-dark}; + --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-dark}; + --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-dark}; + // --#{$prefix}color-border-brand-primary-on-bg-emphasized: #{$ouds-color-border-brand-primary-on-bg-emphasized-dark}; + --#{$prefix}color-border-default: #{$ouds-color-border-default-dark}; + // --#{$prefix}color-border-default-on-bg-emphasized: #{$ouds-color-border-default-on-bg-emphasized-dark}; + --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-dark}; + // --#{$prefix}color-border-emphasized-on-bg-emphasized: #{$ouds-color-border-emphasized-on-bg-emphasized-dark}; + --#{$prefix}color-border-focus: #{$ouds-color-border-focus-dark}; + --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-dark}; + // --#{$prefix}color-border-focus-inset-on-bg-emphasized: #{$ouds-color-border-focus-inset-on-bg-emphasized-dark}; + // --#{$prefix}color-border-focus-on-bg-emphasized: #{$ouds-color-border-focus-on-bg-emphasized-dark}; + --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-dark}; + --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-dark}; + // --#{$prefix}color-content-brand-primary-on-bg-emphasized: #{$ouds-color-content-brand-primary-on-bg-emphasized-dark}; + --#{$prefix}color-content-default: #{$ouds-color-content-default-dark}; + // --#{$prefix}color-content-default-on-bg-emphasized: #{$ouds-color-content-default-on-bg-emphasized-dark}; + --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-dark}; + // --#{$prefix}color-content-disabled-on-bg-emphasized: #{$ouds-color-content-disabled-on-bg-emphasized-dark}; + --#{$prefix}color-content-muted: #{$ouds-color-content-muted-dark}; + // --#{$prefix}color-content-muted-on-bg-emphasized: #{$ouds-color-content-muted-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-dark}; + // --#{$prefix}color-content-on-action-disabled-on-bg-emphasized: #{$ouds-color-content-on-action-disabled-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-action-negative: #{$ouds-color-content-on-action-negative-dark}; + --#{$prefix}color-content-on-action-primary-enabled: #{$ouds-color-content-on-action-primary-enabled-dark}; + // --#{$prefix}color-content-on-action-primary-enabled-on-bg-emphasized: #{$ouds-color-content-on-action-primary-enabled-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-action-primary-focus: #{$ouds-color-content-on-action-primary-focus-dark}; + // --#{$prefix}color-content-on-action-primary-focus-on-bg-emphasized: #{$ouds-color-content-on-action-primary-focus-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-action-primary-hover: #{$ouds-color-content-on-action-primary-hover-dark}; + // --#{$prefix}color-content-on-action-primary-hover-on-bg-emphasized: #{$ouds-color-content-on-action-primary-hover-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-action-primary-loading: #{$ouds-color-content-on-action-primary-loading-dark}; + // --#{$prefix}color-content-on-action-primary-loading-on-bg-emphasized: #{$ouds-color-content-on-action-primary-loading-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-action-primary-pressed: #{$ouds-color-content-on-action-primary-pressed-dark}; + // --#{$prefix}color-content-on-action-primary-pressed-on-bg-emphasized: #{$ouds-color-content-on-action-primary-pressed-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-dark}; + --#{$prefix}color-content-on-status-accent-emphasized: #{$ouds-color-content-on-status-accent-emphasized-dark}; + --#{$prefix}color-content-on-status-accent-muted: #{$ouds-color-content-on-status-accent-muted-dark}; + // --#{$prefix}color-content-on-status-accent-muted-on-bg-emphasized: #{$ouds-color-content-on-status-accent-muted-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-status-info-emphasized: #{$ouds-color-content-on-status-info-emphasized-dark}; + --#{$prefix}color-content-on-status-info-muted: #{$ouds-color-content-on-status-info-muted-dark}; + // --#{$prefix}color-content-on-status-info-muted-on-bg-emphasized: #{$ouds-color-content-on-status-info-muted-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-status-negative-emphasized: #{$ouds-color-content-on-status-negative-emphasized-dark}; + --#{$prefix}color-content-on-status-negative-muted: #{$ouds-color-content-on-status-negative-muted-dark}; + // --#{$prefix}color-content-on-status-negative-muted-on-bg-emphasized: #{$ouds-color-content-on-status-negative-muted-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-status-positive-emphasized: #{$ouds-color-content-on-status-positive-emphasized-dark}; + --#{$prefix}color-content-on-status-positive-muted: #{$ouds-color-content-on-status-positive-muted-dark}; + // --#{$prefix}color-content-on-status-positive-muted-on-bg-emphasized: #{$ouds-color-content-on-status-positive-muted-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-status-warning-emphasized: #{$ouds-color-content-on-status-warning-emphasized-dark}; + --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-dark}; + // --#{$prefix}color-content-on-status-warning-muted-on-bg-emphasized: #{$ouds-color-content-on-status-warning-muted-on-bg-emphasized-dark}; + --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-dark}; + --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-dark}; + --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-dark}; + --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-dark}; + --#{$prefix}color-elevation-drag: #{$ouds-color-elevation-drag-dark}; + // --#{$prefix}color-elevation-drag-on-bg-emphasized: #{$ouds-color-elevation-drag-on-bg-emphasized-dark}; + --#{$prefix}color-elevation-drag-on-bg-secondary: #{$ouds-color-elevation-drag-on-bg-secondary-dark}; + --#{$prefix}color-elevation-modal: #{$ouds-color-elevation-modal-dark}; + --#{$prefix}color-elevation-overlay-default: #{$ouds-color-elevation-overlay-default-dark}; + // --#{$prefix}color-elevation-overlay-default-on-bg-emphasized: #{$ouds-color-elevation-overlay-default-on-bg-emphasized-dark}; + --#{$prefix}color-elevation-overlay-default-on-bg-secondary: #{$ouds-color-elevation-overlay-default-on-bg-secondary-dark}; + --#{$prefix}color-elevation-overlay-emphasized: #{$ouds-color-elevation-overlay-emphasized-dark}; + // --#{$prefix}color-elevation-overlay-emphasized-on-bg-emphasized: #{$ouds-color-elevation-overlay-emphasized-on-bg-emphasized-dark}; + --#{$prefix}color-elevation-overlay-emphasized-on-bg-secondary: #{$ouds-color-elevation-overlay-emphasized-on-bg-secondary-dark}; + --#{$prefix}color-elevation-raised: #{$ouds-color-elevation-raised-dark}; + // --#{$prefix}color-elevation-raised-on-bg-emphasized: #{$ouds-color-elevation-raised-on-bg-emphasized-dark}; + --#{$prefix}color-elevation-raised-on-bg-secondary: #{$ouds-color-elevation-raised-on-bg-secondary-dark}; + --#{$prefix}color-gradient-skeleton-middle: #{$ouds-color-gradient-skeleton-middle-dark}; + // --#{$prefix}color-gradient-skeleton-middle-on-bg-emphasized: #{$ouds-color-gradient-skeleton-middle-on-bg-emphasized-dark}; + --#{$prefix}color-gradient-skeleton-start-end: #{$ouds-color-gradient-skeleton-start-end-dark}; + // --#{$prefix}color-gradient-skeleton-start-end-on-bg-emphasized: #{$ouds-color-gradient-skeleton-start-end-on-bg-emphasized-dark}; + --#{$prefix}color-decorative-accent-1-default: #{$ouds-color-decorative-accent-1-default-dark}; + --#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized-dark}; + --#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted-dark}; + --#{$prefix}color-decorative-accent-2-default: #{$ouds-color-decorative-accent-2-default-dark}; + --#{$prefix}color-decorative-accent-2-emphasized: #{$ouds-color-decorative-accent-2-emphasized-dark}; + --#{$prefix}color-decorative-accent-2-muted: #{$ouds-color-decorative-accent-2-muted-dark}; + --#{$prefix}color-decorative-accent-3-default: #{$ouds-color-decorative-accent-3-default-dark}; + --#{$prefix}color-decorative-accent-3-emphasized: #{$ouds-color-decorative-accent-3-emphasized-dark}; + --#{$prefix}color-decorative-accent-3-muted: #{$ouds-color-decorative-accent-3-muted-dark}; + --#{$prefix}color-decorative-accent-4-default: #{$ouds-color-decorative-accent-4-default-dark}; + --#{$prefix}color-decorative-accent-4-emphasized: #{$ouds-color-decorative-accent-4-emphasized-dark}; + --#{$prefix}color-decorative-accent-4-muted: #{$ouds-color-decorative-accent-4-muted-dark}; + --#{$prefix}color-decorative-accent-5-default: #{$ouds-color-decorative-accent-5-default-dark}; + --#{$prefix}color-decorative-accent-5-emphasized: #{$ouds-color-decorative-accent-5-emphasized-dark}; + --#{$prefix}color-decorative-accent-5-muted: #{$ouds-color-decorative-accent-5-muted-dark}; + --#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary-dark}; + --#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary-dark}; + --#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary-dark}; + --#{$prefix}color-decorative-neutral-default: #{$ouds-color-decorative-neutral-default-dark}; + --#{$prefix}color-decorative-neutral-emphasized: #{$ouds-color-decorative-neutral-emphasized-dark}; + --#{$prefix}color-decorative-neutral-muted: #{$ouds-color-decorative-neutral-muted-dark}; + --#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100-dark}; + --#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200-dark}; + --#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300-dark}; + --#{$prefix}color-decorative-skin-tint-400: #{$ouds-color-decorative-skin-tint-400-dark}; + --#{$prefix}color-decorative-skin-tint-500: #{$ouds-color-decorative-skin-tint-500-dark}; + --#{$prefix}color-decorative-skin-tint-600: #{$ouds-color-decorative-skin-tint-600-dark}; + --#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700-dark}; + --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-dark}; + --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-dark}; + --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none-dark}; + --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-dark}; + --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-dark}; + --#{$prefix}elevation-color-overlay-default: #{$ouds-elevation-color-overlay-default-dark}; + --#{$prefix}elevation-color-overlay-emphasized: #{$ouds-elevation-color-overlay-emphasized-dark}; + --#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default-dark}; + --#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized-dark}; + --#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled-dark}; +} diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js index cef0af5479..678e3b7313 100644 --- a/site/assets/js/stackblitz.js +++ b/site/assets/js/stackblitz.js @@ -43,7 +43,7 @@ const openOUDSWebSnippet = (htmlSnippet, jsSnippet, classes) => { OUDS Web Example <${'script'} defer src="${jsBundleCdn}"> - + ${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').trimEnd()} diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index 4236193637..de6196bf34 100644 --- a/site/assets/scss/_colors.scss +++ b/site/assets/scss/_colors.scss @@ -150,7 +150,6 @@ .bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; } .bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; } .bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; } -.bd-gray-950 { color: color-contrast($gray-950); background-color: $gray-950; } .bd-white { color: color-contrast($white); background-color: $white; } .bd-black { color: color-contrast($black); background-color: $black; } @@ -174,7 +173,8 @@ @return $level; } -@each $color, $value in map-merge($colors, map-merge($grays, ("supporting-yellow": $supporting-yellow, "black": $black))) { +// 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); background-color: #{$value}; diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 9dd7658bd7..ac6d23152c 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -6,7 +6,7 @@ display: flex; // OUDS mod flex-direction: column; // OUDS mod margin: 0 ($bd-gutter-x * -.5) 1rem; - border: solid var(--bs-border-color-subtle); // OUDS mod: instead of `var(--bs-border-color)` + border: solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-color)` border-width: 1px 0; @include media-breakpoint-up(md) { @@ -23,7 +23,7 @@ position: relative; padding: var(--bd-example-padding); margin: 0 ($bd-gutter-x * -.5) 1rem; - border: solid var(--bs-border-color-subtle); // OUDS mod: instead of `var(--bs-border-color)` + border: solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-color)` border-width: 1px 0; @include clearfix(); @@ -208,7 +208,7 @@ font-weight: $font-weight-bold; // OUDS mod color: var(--bs-secondary-color); background-color: var(--bs-secondary-bg); // OUDS mod: instead of `var(--bs-tertiary-bg)` - border: var(--bs-border-width) solid var(--bs-border-color-subtle); // OUDS mod: instead of `var(--bs-border-width) solid var(--bs-border-color)` + border: var(--bs-border-width) solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-width) solid var(--bs-border-color)` > div { display: flex; @@ -473,7 +473,7 @@ // scss-docs-end sticker-fs-xl .border-subtle { - --bs-border-color: var(--bs-border-color-subtle); + --bs-border-color: var(--bs-color-border-emphasized); } .color-copy:hover svg { @@ -487,13 +487,13 @@ .double-figure-svg { padding-top: 10px; padding-bottom: 10px; - background: linear-gradient(to bottom, $white, $white 50%, $gray-950 50%, $gray-950 100%); + background: linear-gradient(to bottom, $white, $white 50%, $ouds-color-functional-dark-gray-880 50%, $ouds-color-functional-dark-gray-880 100%); } .double-figure { padding-top: 10px; padding-bottom: 10px; - background: linear-gradient(to bottom, $white, $white calc((100% - 1.875rem) * .5), $gray-950 calc((100% - 1.875rem) * .5), $gray-950 calc(100% - 1.875rem), transparent calc(100% - 1.875rem)); // stylelint-disable-line function-disallowed-list + background: linear-gradient(to bottom, $white, $white calc((100% - 1.875rem) * .5), $ouds-color-functional-dark-gray-880 calc((100% - 1.875rem) * .5), $ouds-color-functional-dark-gray-880 calc(100% - 1.875rem), transparent calc(100% - 1.875rem)); // stylelint-disable-line function-disallowed-list figcaption { height: 1.875rem; diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 34009f615f..5960d4c67f 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -78,14 +78,14 @@ white-space: nowrap; } - .border-top-1 { - border-top: 1px solid var(--bs-border-color-subtle); + .border-top-thin { + border-top: 1px solid var(--bs-color-border-emphasized); } .border-color { width: 60px; height: 60px; - border: 1px solid var(--bs-border-color-subtle); + border: 1px solid var(--bs-color-border-emphasized); } td:last-child:not(:first-child) { diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 3d7cf4d929..8146d1785b 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -16,7 +16,7 @@ .bd-code-snippet { margin: 0; - border-color: var(--bs-border-color-subtle); + border-color: var(--bs-color-border-emphasized); border-width: 1px; @include border-radius(calc(.5rem - 1px)); } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index f69df291d0..719ad47cb5 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -50,7 +50,7 @@ } .DocSearch-Modal { - border: var(--bs-border-width) solid var(--bs-border-color-subtle); + border: var(--bs-border-width) solid var(--bs-color-border-emphasized); @include border-radius(0, 0); } @@ -98,7 +98,7 @@ } .DocSearch-Form { - box-shadow: var(--bs-border-color-subtle) 0 0 0 .125rem inset; + box-shadow: var(--bs-color-border-emphasized) 0 0 0 .125rem inset; @include border-radius(0, 0); &:focus-within { diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index bcb0d430d5..d3fea053d5 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -26,7 +26,7 @@ // Right now, values are from Bootstrap from `--base00` to `--baseOF` and the 4 remaining one are copied from OUDS Web's light mode @include color-mode(dark, true) { - --base00: #{$gray-950}; + --base00: #{$ouds-color-functional-dark-gray-880}; --base01: #{$gray-500}; --base02: #{$teal-300}; --base03: #{$cyan-300}; diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss index bace60c7fd..ebc6c522d2 100644 --- a/site/assets/scss/_tarteaucitron.scss +++ b/site/assets/scss/_tarteaucitron.scss @@ -38,7 +38,7 @@ font-weight: $font-weight-bold; color: $white; background: $black; - border-top: var(--bs-border-width) solid var(--bs-border-color-subtle); + border-top: var(--bs-border-width) solid var(--bs-color-border-emphasized); &[style*="display: block"] { display: flex !important; // stylelint-disable-line declaration-no-important diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index fb63acd50b..bf4295e9b9 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -2,7 +2,7 @@ // stylelint-disable-next-line function-disallowed-list $bd-primary-light: lighten(saturate($primary, 5%), 15%); // OUDS mod // stylelint-disable-next-line function-disallowed-list -$bd-primary-dark: darken(saturate($supporting-orange, 5%), 15%); // OUDS mod +$bd-primary-dark: darken(saturate($ouds-color-orange-500, 5%), 15%); // OUDS mod $bd-purple: #4c0bce; $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list // OUDS mod: np $bd-purple-light diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 3b661f047b..e192fa2aff 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -23,9 +23,11 @@ // Happy Bootstrapping! // Load Bootstrap variables and mixins +@import "../../../scss/config"; @import "../../../scss/functions"; @import "../../../scss/tokens/raw"; @import "../../../scss/tokens/semantic"; +@import "../../../scss/tokens/semantic-colors-custom-props"; @import "../../../scss/tokens/composite"; @import "../../../scss/tokens/component"; @import "../../../scss/variables"; diff --git a/site/assets/scss/search.scss b/site/assets/scss/search.scss index 5a3420798f..aca9bd4d94 100644 --- a/site/assets/scss/search.scss +++ b/site/assets/scss/search.scss @@ -5,9 +5,11 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ +@import "../../../scss/config"; @import "../../../scss/functions"; @import "../../../scss/tokens/raw"; @import "../../../scss/tokens/semantic"; +@import "../../../scss/tokens/semantic-colors-custom-props"; @import "../../../scss/tokens/composite"; @import "../../../scss/tokens/component"; @import "../../../scss/variables"; diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md index b9bfa0a81d..3b1bc001c3 100644 --- a/site/content/docs/0.0/content/reboot.md +++ b/site/content/docs/0.0/content/reboot.md @@ -146,8 +146,8 @@ The `
` element has been simplified. Similar to browser defaults, `
`s are
-
-
--> +
+
--> + +{{< palette.inline >}} +{{- range where $.Site.Data.palette "category" "OUDS colors" }} + {{- range $subcategory := .subcategories }} +
+ {{- range $color := .colors }} +
+ +
+ {{ $color.hex }} +
+ {{- $color.variable -}} +
+
+ {{ end -}} +
+ {{ end -}} +{{ end -}} +{{< /palette.inline >}} + +## Bootstrap's palette + +Bootstrap defines a color palette on its own. We worked on a mapping between Orange Unified Design System's colors and Bootstrap's ones in cases where users will use Bootstrap-based plugins or libraries so that, when used with Boosted CSS, provides an acceptable automatic rendering. + +
+See Bootstrap palette +
+

All colors

+ +{{< callout danger >}} +Some of the colors below do not belong to the Orange Unified Design System specifications. + +Please refer to our [color palette section](#palette). +{{< /callout >}} + +{{< callout warning >}} +All OUDS Web colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#palette). + +Please note that in the OUDS Web colors, the indigo colors are the same as the purple ones. +{{< /callout >}} + +Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black. + +
+ {{< theme-colors.inline >}} + {{- range $color := $.Site.Data.colors }} + {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }} +
+
+ ${{ $color.name }} + {{ $color.hex }} +
+ {{ range (seq 100 100 900) }} +
${{ $color.name }}-{{ . }}
+ {{ end }} +
+ {{ end -}} + {{ end -}} + +
+
+ $gray-500 + #707070 +
+ {{- range $.Site.Data.grays }} +
$gray-{{ .name }}
+ {{ end -}} +
+ {{< /theme-colors.inline >}} + +
+
+ $black + #000 +
+
+ $white + #fff +
+
+
+ +

Notes on Sass

+ +Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We then map all the created variables to one of our raw color tokens that are coming from the design directly. + +

Example

+ +Here's how you should not use these in your Sass: + +```scss +.alpha { color: $purple; } +.beta { + color: $ouds-color-decorative-sun-100; + background-color: $indigo-900; +} +``` + + +
+ +## CSS + +OUDS Web sets an additional layer to use Orange Unified Design System's color tokens names—defined first and mapped to Bootstrap core variables. +OUDS Web core uses Bootstrap's naming for maintenance ease, but you're encouraged to use Orange semantic color tokens (using CSS variables is even better) when it comes to custom code. + +### Sass tokens + +#### Raw tokens + +A first layer of color raw tokens Sass variables. **Not to be used as-is**. + +{{< scss-docs name="ouds-raw-color" file="scss/tokens/_raw.scss" >}} + +#### Semantic tokens + +Color semantic tokens as Sass variables. **Not to be used as-is**. Please use our [Color semantic tokens as CSS variables](#). + +### Sass variables + + + +### Sass maps + + + + diff --git a/site/content/docs/0.0/customize/custom-libraries.md b/site/content/docs/0.0/customize/custom-libraries.md index 0724b55990..0c383a576c 100644 --- a/site/content/docs/0.0/customize/custom-libraries.md +++ b/site/content/docs/0.0/customize/custom-libraries.md @@ -22,10 +22,16 @@ The [`scss/tokens/_raw.scss`]({{< param repo >}}/blob/v{{< param current_version ### Semantic tokens -The [`scss/tokens/_semantic.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_semantic.scss) file contains all the semantic tokens. Unlike raw tokens, these are intended to be used directly in projects. They are built on raw tokens, assigning them semantic meaning through media queries or specific contexts. Most of these tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a token and its value defined by a raw token. +The [`scss/tokens/_semantic.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_semantic.scss) file contains all the semantic tokens. Unlike raw tokens, these are intended to be used directly in projects (Be careful of the color ones, and prefer using [our color custom properties](#semantic-colors-custom-properties-tokens)). They are built on raw tokens, assigning them semantic meaning through media queries or specific contexts. Most of these tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a token and its value defined by a raw token. Some semantic tokens are grouped into maps to simplify their transformation into helpers or utilities via the utilities API. These maps are defined in the [`scss/_maps.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/_maps.scss) file. +### Semantic colors custom properties tokens + +The [`scss/tokens/_semantic-colors-custom-props.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_semantic-colors-custom-props.scss) file contains all the usable semantic color tokens. Unlike basic semantic color tokens, these are intended to be used directly in projects. They are built on semantic tokens, assigning them mode theming through media queries or specific contexts. Most of these tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a semantic token and its value defined by a raw token can. + +Some semantic color tokens are grouped into maps to simplify their transformation into helpers or utilities via the utilities API. These maps are defined in the [`scss/_maps.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/_maps.scss) file. + ### Composite tokens The [`scss/tokens/_composite.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_composite.scss) file contains all the composite tokens. Unlike raw tokens, these are intended to be used directly in projects. They are built (manually until now) on top of semantic tokens, they usually are an aggregation of several semantic tokens. These tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a token and its value defined by a raw or a semantic token. diff --git a/site/content/docs/0.0/examples/cheatsheet/cheatsheet.css b/site/content/docs/0.0/examples/cheatsheet/cheatsheet.css new file mode 100644 index 0000000000..5721a028e9 --- /dev/null +++ b/site/content/docs/0.0/examples/cheatsheet/cheatsheet.css @@ -0,0 +1,163 @@ +body { + scroll-behavior: smooth; +} + +/** + * Bootstrap "Journal code" icon + * @link https://icons.getbootstrap.com/icons/journal-code/ + */ +.bd-heading a::before { + display: inline-block; + width: 1em; + height: 1em; + margin-right: .25rem; + content: ""; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-size: 1em; +} + +/* stylelint-disable-next-line selector-max-universal */ +.bd-heading + div > * + * { + margin-top: 3rem; +} + +/* Table of contents */ +.bd-aside a { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: .3125rem; + color: var(--bs-body-color); +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: var(--bs-body-color); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .active { + font-weight: 600; + color: var(--bs-body-color); +} + +.bd-aside .btn { + padding: .25rem .5rem; + font-weight: 600; + color: var(--bs-body-color); +} + +.bd-aside .btn:hover, +.bd-aside .btn:focus { + color: var(--bs-body-color); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .btn:focus { + box-shadow: 0 0 0 1px rgba(121, 82, 179, .7); +} + +.bd-aside .btn::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + + /* rtl:raw: + transform: rotate(180deg) translateX(-2px); + */ + transform-origin: .5em 50%; +} + +.bd-aside .btn[aria-expanded="true"]::before { + transform: rotate(90deg)/* rtl:ignore */; +} + + +/* Examples */ +.scrollspy-example { + height: 200px; +} + +[id="modal"] .bd-example .btn, +[id="buttons"] .bd-example .btn, +[id="tooltips"] .bd-example .btn, +[id="popovers"] .bd-example .btn, +[id="dropdowns"] .bd-example .btn-group, +[id="dropdowns"] .bd-example .dropdown, +[id="dropdowns"] .bd-example .dropup, +[id="dropdowns"] .bd-example .dropend, +[id="dropdowns"] .bd-example .dropstart { + margin: 0 1rem 1rem 0; +} + +/* Layout */ +@media (min-width: 1200px) { + body { + display: grid; + grid-template-rows: auto; + grid-template-columns: 1fr 4fr 1fr; + gap: 1rem; + } + + .bd-header { + position: fixed; + top: 0; + /* rtl:begin:ignore */ + right: 0; + left: 0; + /* rtl:end:ignore */ + z-index: 1030; + grid-column: 1 / span 3; + } + + .bd-aside, + .bd-cheatsheet { + padding-top: 4rem; + } + + /** + * 1. Too bad only Firefox supports subgrids ATM + */ + .bd-cheatsheet, + .bd-cheatsheet section, + .bd-cheatsheet article { + display: inherit; /* 1 */ + grid-template-rows: auto; + grid-template-columns: 1fr 4fr; + grid-column: 1 / span 2; + gap: inherit; /* 1 */ + } + + .bd-aside { + grid-area: 1 / 3; + scroll-margin-top: 4rem; + } + + .bd-cheatsheet section, + .bd-cheatsheet section > h2 { + top: 2rem; + scroll-margin-top: 2rem; + } + + .bd-cheatsheet section > h2::before { + position: absolute; + /* rtl:begin:ignore */ + top: 0; + right: 0; + bottom: -2rem; + left: 0; + /* rtl:end:ignore */ + z-index: -1; + content: ""; + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/0.0/examples/cheatsheet/cheatsheet.js b/site/content/docs/0.0/examples/cheatsheet/cheatsheet.js new file mode 100644 index 0000000000..e25a89e75d --- /dev/null +++ b/site/content/docs/0.0/examples/cheatsheet/cheatsheet.js @@ -0,0 +1,73 @@ +/* global bootstrap: false */ + +(() => { + 'use strict' + + // Tooltip and popover demos + document.querySelectorAll('.tooltip-demo') + .forEach(tooltip => { + new bootstrap.Tooltip(tooltip, { + selector: '[data-bs-toggle="tooltip"]' + }) + }) + + document.querySelectorAll('[data-bs-toggle="popover"]') + .forEach(popover => { + new bootstrap.Popover(popover) + }) + + document.querySelectorAll('.toast') + .forEach(toastNode => { + const toast = new bootstrap.Toast(toastNode, { + autohide: false + }) + + toast.show() + }) + + // Disable empty links and submit buttons + document.querySelectorAll('[href="#"], [type="submit"]') + .forEach(link => { + link.addEventListener('click', event => { + event.preventDefault() + }) + }) + + function setActiveItem() { + const { hash } = window.location + + if (hash === '') { + return + } + + const link = document.querySelector(`.bd-aside a[href="${hash}"]`) + + if (!link) { + return + } + + const active = document.querySelector('.bd-aside .active') + const parent = link.parentNode.parentNode.previousElementSibling + + link.classList.add('active') + + if (parent.classList.contains('collapsed')) { + parent.click() + } + + if (!active) { + return + } + + const expanded = active.parentNode.parentNode.previousElementSibling + + active.classList.remove('active') + + if (expanded && parent !== expanded) { + expanded.click() + } + } + + setActiveItem() + window.addEventListener('hashchange', setActiveItem) +})() diff --git a/site/content/docs/0.0/examples/cheatsheet/index.html b/site/content/docs/0.0/examples/cheatsheet/index.html new file mode 100644 index 0000000000..e6650a91ce --- /dev/null +++ b/site/content/docs/0.0/examples/cheatsheet/index.html @@ -0,0 +1,1606 @@ +--- +layout: examples +title: Cheatsheet +extra_css: + - "cheatsheet.css" +extra_js: + - src: "cheatsheet.js" + defer: true +body_class: "bg-body-tertiary" +--- + +
+
+

+ Bootstrap + Cheatsheet +

+
+
+ +
+
+

Contents

+ +
+
+

Typography

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +

Display 1

+

Display 2

+

Display 3

+

Display 4

+

Display 5

+

Display 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+

Heading 5

+

Heading 6

+ {{< /example >}} + + {{< example show_markup="false" >}} +

+ This is a lead paragraph. It stands out from regular paragraphs. +

+ {{< /example >}} + + {{< example show_markup="false" >}} +

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined.

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

This line rendered as italicized text.

+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+

A well-known quote, contained in a blockquote element.

+
Someone famous in Source Title
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • This is a list.
    • +
  • It appears completely unstyled.
    • +
  • Structurally, it's still a list.
    • +
  • However, this style only applies to immediate child elements.
    • +
  • Nested lists: +
      +
    • are unaffected by this style
      • +
    • will still show a bullet
      • +
    • and have appropriate left margin
      • +
    +
    • +
  • This may still come in handy in some situations.
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • This is a list item.
    • +
  • And another one.
    • +
  • But they're displayed inline.
    • +
+ {{< /example >}} +
+
+
+
+

Images

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}} + {{< /example >}} +
+
+
+
+

Tables

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + + + + + {{- end -}} + {{< /table.inline >}} + +
ClassHeadingHeading
DefaultCellCell
{{ .name | title }}CellCell
+ {{< /example >}} + + {{< example show_markup="false" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ {{< /example >}} +
+
+
+
+

Figures

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} +
A caption for the above image.
+
+ {{< /example >}} +
+
+
+ +
+

Forms

+ +
+
+

Overview

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
We'll never share your email with anyone else.
+
+
+ + +
+
+ + +
+
+ + +
+
+ Radios buttons +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ {{< /example >}} +
+
+
+
+

Disabled forms

+ }}#disabled-forms">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ Disabled radios buttons +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {{< /example >}} +
+
+
+
+

Sizing

+ }}#sizing">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ +
+
+ +
+
+ +
+ {{< /example >}} +
+
+
+
+

Input group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+ @ + +
+
+ + @example.com +
+ +
+ https://example.com/users/ + +
+
+ $ + + .00 +
+
+ With textarea + +
+ {{< /example >}} +
+
+
+
+

Floating labels

+ +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+
+ + +
+
+ {{< /example >}} +
+
+
+
+

Validation

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+ @ + +
+ Please choose a username. +
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please select a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+
+ + +
+ You must agree before submitting. +
+
+
+
+ +
+
+ {{< /example >}} +
+
+
+ +
+

Components

+ +
+
+

Accordion

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+

+ +

+
+
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+ {{< /example >}} +
+
+
+
+

Alerts

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Badge

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+ {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + {{ .name | title }}{{- end -}} + {{< /badge.inline >}} + {{< /example >}} +
+
+ +
+
+

Buttons

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + + + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + + + + {{< /example >}} +
+
+
+
+

Button group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Card

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
+
+
+ Featured +
+
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+ 2 days ago +
+
+
+
+
+
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+
+ Card link + Another link +
+
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="Image" >}} +
+
+
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+
+
+ {{< /example >}} +
+
+ + +
+
+

List group

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
    +
  • A disabled item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+ A simple default list group item + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + A simple {{ .name }} list group item + {{- end -}} + {{< /list.inline >}} +
+ {{< /example >}} +
+
+ + + +
+
+

Pagination

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + {{< /example >}} +
+
+
+
+

Popovers

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + + {{< /example >}} + + {{< example show_markup="false" >}} + + + + + {{< /example >}} +
+
+
+
+

Progress

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} +
+
0%
+
+
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+ {{< /example >}} + + {{< example show_markup="false" >}} +
+
+
+
+
+
+
+
+ {{< /example >}} +
+
+
+
+

Scrollspy

+ }}">Documentation +
+ +
+
+ +
+

First heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Second heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Third heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Fourth heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Fifth heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+
+
+
+
+
+
+

Spinners

+ }}">Documentation +
+ +
+ {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} +
+
+
+
+

Toasts

+ }}">Documentation +
+ +
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + + {{< /example >}} +
+
+
+
+

Tooltips

+ }}">Documentation +
+ +
+ {{< example show_markup="false" class="tooltip-demo" >}} + + + + + + {{< /example >}} +
+
+
+
+ + + + + diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md index aa4fa07686..a39c357b7a 100644 --- a/site/content/docs/0.0/layout/containers.md +++ b/site/content/docs/0.0/layout/containers.md @@ -126,16 +126,18 @@ If necessary, in specific cases, you can define a custom maximum width for the f This adjustment will apply to all containers using the `.container-max-width`class, ensuring that your layout stays within the specific width. Once the layout exceeds the `$ouds-size-max-width-grid` value at larger breakpoints, the container's margins and gutter values will remain unchanged. ```scss -@import "../node_modules/ouds-web/scss/functions"; +@import "../node_modules/@ouds/web/scss/config"; +@import "../node_modules/@ouds/web/scss/functions"; $ouds-size-max-width-grid: 3500px; // Custom container max width -@import "../node_modules/ouds-web/tokens/raw"; -@import "../node_modules/ouds-web/tokens/semantic"; -@import "../node_modules/ouds-web/tokens/composite"; -@import "../node_modules/ouds-web/tokens/component"; -@import "../node_modules/ouds-web/variables"; -@import "../node_modules/ouds-web/variables-dark"; +@import "../node_modules/@ouds/web/scss/tokens/raw"; +@import "../node_modules/@ouds/web/scss/tokens/semantic"; +@import "../node_modules/@ouds/web/scss/tokens/semantic-colors-custom-props"; +@import "../node_modules/@ouds/web/scss/tokens/composite"; +@import "../node_modules/@ouds/web/scss/tokens/component"; +@import "../node_modules/@ouds/web/scss/variables"; +@import "../node_modules/@ouds/web/scss/variables-dark"; // etc ``` diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 2ff0395a60..ed5967f5bb 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -321,9 +321,11 @@ All responsive classes, helpers, and utilities have been updated accordingly to See the new import stack ```diff + + @import "config"; @import "functions"; + @import "tokens/raw"; + @import "tokens/semantic"; + + @import "tokens/semantic-colors-custom-props"; + @import "tokens/composite"; + @import "tokens/component"; @import "variables"; diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 2810b5b866..51e72ebd67 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -230,9 +230,11 @@ toc: true See the new import stack ```diff + + @import "config"; @import "functions"; @import "tokens/raw"; @import "tokens/semantic"; + + @import "tokens/semantic-colors-custom-props"; + @import "tokens/composite"; @import "tokens/component"; ``` diff --git a/site/content/docs/0.0/utilities/api.md b/site/content/docs/0.0/utilities/api.md index 8cec871cba..3b9d36d654 100644 --- a/site/content/docs/0.0/utilities/api.md +++ b/site/content/docs/0.0/utilities/api.md @@ -409,16 +409,18 @@ $utilities: ( New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values. ```scss -@import "ouds-web/scss/functions"; -@import "ouds-web/scss/tokens/raw"; -@import "ouds-web/scss/tokens/semantic"; -@import "ouds-web/scss/tokens/composite"; -@import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/variables"; -@import "ouds-web/scss/variables-dark"; -@import "ouds-web/scss/maps"; -@import "ouds-web/scss/mixins"; -@import "ouds-web/scss/utilities"; +@import "@ouds/web/scss/config"; +@import "@ouds/web/scss/functions"; +@import "@ouds/web/scss/tokens/raw"; +@import "@ouds/web/scss/tokens/semantic"; +@import "@ouds/web/scss/tokens/semantic-colors-custom-props"; +@import "@ouds/web/scss/tokens/composite"; +@import "@ouds/web/scss/tokens/component"; +@import "@ouds/web/scss/variables"; +@import "@ouds/web/scss/variables-dark"; +@import "@ouds/web/scss/maps"; +@import "@ouds/web/scss/mixins"; +@import "@ouds/web/scss/utilities"; $utilities: map-merge( $utilities, @@ -432,7 +434,7 @@ $utilities: map-merge( ) ); -@import "ouds-web/scss/utilities/api"; +@import "@ouds/web/scss/utilities/api"; ``` ### Modify utilities @@ -440,16 +442,18 @@ $utilities: map-merge( Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values. ```scss -@import "ouds-web/scss/functions"; -@import "ouds-web/scss/tokens/raw"; -@import "ouds-web/scss/tokens/semantic"; -@import "ouds-web/scss/tokens/composite"; -@import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/variables"; -@import "ouds-web/scss/variables-dark"; -@import "ouds-web/scss/maps"; -@import "ouds-web/scss/mixins"; -@import "ouds-web/scss/utilities"; +@import "@ouds/web/scss/config"; +@import "@ouds/web/scss/functions"; +@import "@ouds/web/scss/tokens/raw"; +@import "@ouds/web/scss/tokens/semantic"; +@import "@ouds/web/scss/tokens/semantic-colors-custom-props"; +@import "@ouds/web/scss/tokens/composite"; +@import "@ouds/web/scss/tokens/component"; +@import "@ouds/web/scss/variables"; +@import "@ouds/web/scss/variables-dark"; +@import "@ouds/web/scss/maps"; +@import "@ouds/web/scss/mixins"; +@import "@ouds/web/scss/utilities"; $utilities: map-merge( $utilities, @@ -466,7 +470,7 @@ $utilities: map-merge( ) ); -@import "ouds-web/scss/utilities/api"; +@import "@ouds/web/scss/utilities/api"; ``` #### Enable responsive @@ -474,16 +478,18 @@ $utilities: map-merge( You can enable responsive classes for an existing set of utilities that are not currently responsive by default. For example, to make the `border` classes responsive: ```scss -@import "ouds-web/scss/functions"; -@import "ouds-web/scss/tokens/raw"; -@import "ouds-web/scss/tokens/semantic"; -@import "ouds-web/scss/tokens/composite"; -@import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/variables"; -@import "ouds-web/scss/variables-dark"; -@import "ouds-web/scss/maps"; -@import "ouds-web/scss/mixins"; -@import "ouds-web/scss/utilities"; +@import "@ouds/web/scss/config"; +@import "@ouds/web/scss/functions"; +@import "@ouds/web/scss/tokens/raw"; +@import "@ouds/web/scss/tokens/semantic"; +@import "@ouds/web/scss/tokens/semantic-colors-custom-props"; +@import "@ouds/web/scss/tokens/composite"; +@import "@ouds/web/scss/tokens/component"; +@import "@ouds/web/scss/variables"; +@import "@ouds/web/scss/variables-dark"; +@import "@ouds/web/scss/maps"; +@import "@ouds/web/scss/mixins"; +@import "@ouds/web/scss/utilities"; $utilities: map-merge( $utilities, ( @@ -494,7 +500,7 @@ $utilities: map-merge( ) ); -@import "ouds-web/scss/utilities/api"; +@import "@ouds/web/scss/utilities/api"; ``` This will now generate responsive variations of `.border` and `.border-none` for each breakpoint. Your generated CSS will look like this: @@ -544,16 +550,18 @@ This will now generate responsive variations of `.border` and `.border-none` for Used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to `.ml-*`: ```scss -@import "ouds-web/scss/functions"; -@import "ouds-web/scss/tokens/raw"; -@import "ouds-web/scss/tokens/semantic"; -@import "ouds-web/scss/tokens/composite"; -@import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/variables"; -@import "ouds-web/scss/variables-dark"; -@import "ouds-web/scss/maps"; -@import "ouds-web/scss/mixins"; -@import "ouds-web/scss/utilities"; +@import "@ouds/web/scss/config"; +@import "@ouds/web/scss/functions"; +@import "@ouds/web/scss/tokens/raw"; +@import "@ouds/web/scss/tokens/semantic"; +@import "@ouds/web/scss/tokens/semantic-colors-custom-props"; +@import "@ouds/web/scss/tokens/composite"; +@import "@ouds/web/scss/tokens/component"; +@import "@ouds/web/scss/variables"; +@import "@ouds/web/scss/variables-dark"; +@import "@ouds/web/scss/maps"; +@import "@ouds/web/scss/mixins"; +@import "@ouds/web/scss/utilities"; $utilities: map-merge( $utilities, ( @@ -564,7 +572,7 @@ $utilities: map-merge( ) ); -@import "ouds-web/scss/utilities/api"; +@import "@ouds/web/scss/utilities/api"; ``` ### Remove utilities @@ -572,36 +580,40 @@ $utilities: map-merge( Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map/#remove). ```scss -@import "ouds-web/scss/functions"; -@import "ouds-web/scss/tokens/raw"; -@import "ouds-web/scss/tokens/semantic"; -@import "ouds-web/scss/tokens/composite"; -@import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/variables"; -@import "ouds-web/scss/variables-dark"; -@import "ouds-web/scss/maps"; -@import "ouds-web/scss/mixins"; -@import "ouds-web/scss/utilities"; +@import "@ouds/web/scss/config"; +@import "@ouds/web/scss/functions"; +@import "@ouds/web/scss/tokens/raw"; +@import "@ouds/web/scss/tokens/semantic"; +@import "@ouds/web/scss/tokens/semantic-colors-custom-props"; +@import "@ouds/web/scss/tokens/composite"; +@import "@ouds/web/scss/tokens/component"; +@import "@ouds/web/scss/variables"; +@import "@ouds/web/scss/variables-dark"; +@import "@ouds/web/scss/maps"; +@import "@ouds/web/scss/mixins"; +@import "@ouds/web/scss/utilities"; // Remove multiple utilities with a comma-separated list $utilities: map-remove($utilities, "width", "float"); -@import "ouds-web/scss/utilities/api"; +@import "@ouds/web/scss/utilities/api"; ``` You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge) and set the group key to `null` to remove the utility. ```scss -@import "ouds-web/scss/functions"; -@import "ouds-web/scss/tokens/raw"; -@import "ouds-web/scss/tokens/semantic"; -@import "ouds-web/scss/tokens/composite"; -@import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/variables"; -@import "ouds-web/scss/variables-dark"; -@import "ouds-web/scss/maps"; -@import "ouds-web/scss/mixins"; -@import "ouds-web/scss/utilities"; +@import "@ouds/web/scss/config"; +@import "@ouds/web/scss/functions"; +@import "@ouds/web/scss/tokens/raw"; +@import "@ouds/web/scss/tokens/semantic"; +@import "@ouds/web/scss/tokens/semantic-colors-custom-props"; +@import "@ouds/web/scss/tokens/composite"; +@import "@ouds/web/scss/tokens/component"; +@import "@ouds/web/scss/variables"; +@import "@ouds/web/scss/variables-dark"; +@import "@ouds/web/scss/maps"; +@import "@ouds/web/scss/mixins"; +@import "@ouds/web/scss/utilities"; $utilities: map-merge( $utilities, @@ -610,7 +622,7 @@ $utilities: map-merge( ) ); -@import "ouds-web/scss/utilities/api"; +@import "@ouds/web/scss/utilities/api"; ``` ### Add, remove, modify @@ -618,16 +630,18 @@ $utilities: map-merge( You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map. ```scss -@import "ouds-web/scss/functions"; -@import "ouds-web/scss/tokens/raw"; -@import "ouds-web/scss/tokens/semantic"; -@import "ouds-web/scss/tokens/composite"; -@import "ouds-web/scss/tokens/component"; -@import "ouds-web/scss/variables"; -@import "ouds-web/scss/variables-dark"; -@import "ouds-web/scss/maps"; -@import "ouds-web/scss/mixins"; -@import "ouds-web/scss/utilities"; +@import "@ouds/web/scss/config"; +@import "@ouds/web/scss/functions"; +@import "@ouds/web/scss/tokens/raw"; +@import "@ouds/web/scss/tokens/semantic"; +@import "@ouds/web/scss/tokens/semantic-colors-custom-props"; +@import "@ouds/web/scss/tokens/composite"; +@import "@ouds/web/scss/tokens/component"; +@import "@ouds/web/scss/variables"; +@import "@ouds/web/scss/variables-dark"; +@import "@ouds/web/scss/maps"; +@import "@ouds/web/scss/mixins"; +@import "@ouds/web/scss/utilities"; $utilities: map-merge( $utilities, @@ -651,7 +665,7 @@ $utilities: map-merge( ) ); -@import "ouds-web/scss/utilities/api"; +@import "@ouds/web/scss/utilities/api"; ``` #### Remove utility in RTL diff --git a/site/data/colors.yml b/site/data/colors.yml index 6172598af3..dec02d8410 100644 --- a/site/data/colors.yml +++ b/site/data/colors.yml @@ -1,5 +1,5 @@ - name: blue - hex: "#4170d8" + hex: "#26b2ff" - name: indigo hex: "#a885d8" - name: purple @@ -7,17 +7,17 @@ - name: pink hex: "#ffb4e6" - name: red - hex: "#cd3c14" + hex: "#ea0305" - name: orange hex: "#f16e00" - name: yellow - hex: "#fc0" + hex: "#ffd000" - name: green - hex: "#228722" + hex: "#3de35a" - name: teal hex: "#50be87" - name: cyan - hex: "#4bb4e6" + hex: "#4ab4e6" - name: white hex: "#fff" - name: gray diff --git a/site/data/examples.yml b/site/data/examples.yml index cd25a173b0..ac3b1c5e53 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -46,3 +46,10 @@ description: "Multiple examples of grid layouts with all four tiers, nesting, and more." - name: Grid system description: "OUDS Web default grid system illustration." + +- category: "Bootstrap examples" + bootstrap: true + description: "Example that are the exact one from Bootstrap to see how the enable Bootstrap compatibility work. Do not modify and do not use." + examples: + - name: Cheatsheet + description: "Kitchen sink of Bootstrap components." diff --git a/site/data/grays.yml b/site/data/grays.yml index 40e090dfc4..6c57281c1a 100644 --- a/site/data/grays.yml +++ b/site/data/grays.yml @@ -1,20 +1,18 @@ - name: 100 - hex: "#fafafa" + hex: "#f4f4f4" - name: 200 - hex: "#f6f6f6" -- name: 300 hex: "#eee" +- name: 300 + hex: "#ccc" - name: 400 - hex: "#ddd" + hex: "#bbb" - name: 500 - hex: "#ccc" + hex: "#707070" - name: 600 - hex: "#999" + hex: "#555" - name: 700 - hex: "#666" + hex: "#444" - name: 800 - hex: "#595959" -- name: 900 hex: "#333" -- name: 950 +- name: 900 hex: "#141414" diff --git a/site/data/palette.yml b/site/data/palette.yml index e02e2956b6..9d08667607 100644 --- a/site/data/palette.yml +++ b/site/data/palette.yml @@ -55,195 +55,240 @@ - name: Secondary Color hex: "#666" darkHex: "#999" -- category: ODS colors - name: "ODS colors" +- category: OUDS colors + name: "OUDS colors" subcategories: - subcategory: Orange name: "orange" colors: - - name: Orange 100 - variable: $ods-orange-100 + - name: Orange 500 + variable: $ouds-color-orange-500 hex: "#ff7900" - - name: Orange 200 - variable: $ods-orange-200 + - name: Orange 550 + variable: $ouds-color-orange-550 hex: "#f16e00" + - subcategory: Warm gray + name: "warm-gray" + colors: + - name: Warm gray 100 + variable: $ouds-color-warm-gray-100 + hex: "#f9f5f0" + - name: Warm gray 900 + variable: $ouds-color-warm-gray-900 + hex: "#353228" - subcategory: White name: "white" colors: - - name: White 100 - variable: $ods-white-100 + - name: Functional white + variable: $ouds-color-functional-white hex: "#fff" - - subcategory: Gray - name: "gray" + - subcategory: Light gray + name: "light-gray" colors: - - name: Gray 200 - variable: $ods-gray-200 + - name: Functional light gray 80 + variable: $ouds-color-functional-light-gray-80 + hex: "#f4f4f4" + - name: Functional light gray 160 + variable: $ouds-color-functional-light-gray-160 hex: "#eee" - - name: Gray 300 - variable: $ods-gray-300 - hex: "#ddd" - - name: Gray 400 - variable: $ods-gray-400 + - name: Functional light gray 400 + variable: $ouds-color-functional-light-gray-400 + hex: "#ccc" + - name: Functional light gray 560 + variable: $ouds-color-functional-light-gray-560 hex: "#ccc" - - name: Gray 500 - variable: $ods-gray-500 - hex: "#999" - - name: Gray 600 - variable: $ods-gray-600 - hex: "#666" - - name: Gray 700 - variable: $ods-gray-700 - hex: "#595959" - - name: Gray 800 - variable: $ods-gray-800 + - subcategory: Dark gray + name: "dark-gray" + colors: + - name: Functional dark gray 160 + variable: $ouds-color-functional-dark-gray-160 + hex: "#707070" + - name: Functional dark gray 400 + variable: $ouds-color-functional-dark-gray-400 + hex: "#555" + - name: Functional dark gray 480 + variable: $ouds-color-functional-dark-gray-480 + hex: "#444" + - name: Functional dark gray 560 + variable: $ouds-color-functional-dark-gray-560 + hex: "#3d3d3d" + - name: Functional dark gray 640 + variable: $ouds-color-functional-dark-gray-640 hex: "#333" - - name: Gray 900 - variable: $ods-gray-900 + - name: Functional dark gray 720 + variable: $ouds-color-functional-dark-gray-720 + hex: "#272727" + - name: Functional dark gray 800 + variable: $ouds-color-functional-dark-gray-800 + hex: "#1f1f1f" + - name: Functional dark gray 880 + variable: $ouds-color-functional-dark-gray-880 hex: "#141414" - - subcategory: Black - name: "black" + - subcategory: Functional black + name: "functional-black" colors: - - name: Black 900 - variable: $ods-black-900 + - name: Functional black + variable: $ouds-color-functional-black hex: "#000" - - subcategory: Forest - name: "forest" - colors: - - name: Forest 100 - variable: $ods-forest-100 - hex: "#6c6" - - name: Forest 200 - variable: $ods-forest-200 - hex: "#228722" - - subcategory: Fire - name: "fire" - colors: - - name: Fire 100 - variable: $ods-fire-100 - hex: "#ff4d4d" - - name: Fire 200 - variable: $ods-fire-200 - hex: "#cd3c14" - - subcategory: Water - name: "water" - colors: - - name: Water 100 - variable: $ods-water-100 - hex: "#69f" - - name: Water 200 - variable: $ods-water-200 - hex: "#4170d8" - - subcategory: Sun - name: "sun" - colors: - - name: Sun 100 - variable: $ods-sun-100 - hex: "#fc0" - - name: Sun 200 - variable: $ods-sun-200 - hex: "#8f7200" - - subcategory: Blue - name: "blue" - colors: - - name: Blue 100 - variable: $ods-blue-100 - hex: "#b5e8f7" - - name: Blue 200 - variable: $ods-blue-200 - hex: "#80ceef" - - name: Blue 300 - variable: $ods-blue-300 - hex: "#4bb4e6" - - name: Blue 400 - variable: $ods-blue-400 - hex: "#3e9dd6" - - name: Blue 500 - variable: $ods-blue-500 - hex: "#237eca" - - name: Blue 600 - variable: $ods-blue-600 - hex: "#085ebd" - - category: Green - name: "green" - colors: - - name: Green 100 - variable: $ods-green-100 - hex: "#b8ebd6" - - name: Green 200 - variable: $ods-green-200 - hex: "#84d5af" - - name: Green 300 - variable: $ods-green-300 + - subcategory: Functional malachite + name: "functional-malachite" + colors: + - name: Functional malachite 100 + variable: $ouds-color-functional-malachite-100 + hex: "#edfcf0" + - name: Functional malachite 500 + variable: $ouds-color-functional-malachite-500 + hex: "#3de35a" + - name: Functional malachite 900 + variable: $ouds-color-functional-malachite-900 + hex: "#0a4715" + - subcategory: Functional scarlet + name: "functional-scarlet" + colors: + - name: Functional scarlet 100 + variable: $ouds-color-functional-scarlet-100 + hex: "#ffe5e6" + - name: Functional scarlet 600 + variable: $ouds-color-functional-scarlet-600 + hex: "#ea0305" + - name: Functional scarlet 700 + variable: $ouds-color-functional-scarlet-700 + hex: "#b20002" + - name: Functional scarlet 800 + variable: $ouds-color-functional-scarlet-800 + hex: "#800001" + - name: Functional scarlet 900 + variable: $ouds-color-functional-scarlet-900 + hex: "#4d0001" + - subcategory: Functional dodger + name: "functional-dodger" + colors: + - name: Functional dodger 100 + variable: $ouds-color-functional-dodger-100 + hex: "#f0faff" + - name: Functional dodger 500 + variable: $ouds-color-functional-dodger-500 + hex: "#26b2ff" + - name: Functional dodger 900 + variable: $ouds-color-functional-dodger-900 + hex: "#003857" + - subcategory: Functional sun + name: "functional-sun" + colors: + - name: Functional sun 100 + variable: $ouds-color-functional-sun-100 + hex: "#fff7d6" + - name: Functional sun 200 + variable: $ouds-color-functional-sun-200 + hex: "#ffed99" + - name: Functional sun 500 + variable: $ouds-color-functional-sun-500 + hex: "#ffd000" + - name: Functional sun 600 + variable: $ouds-color-functional-sun-600 + hex: "#d6aa00" + - name: Functional sun 900 + variable: $ouds-color-functional-sun-900 + hex: "#3d3100" + - subcategory: Decorative sky + name: "decorative-sky" + colors: + - name: Decorative sky 200 + variable: $ouds-color-decorative-sky-200 + hex: "#a5daf3" + - name: Decorative sky 400 + variable: $ouds-color-decorative-sky-400 + hex: "#4ab4e6" + - name: Decorative sky 700 + variable: $ouds-color-decorative-sky-700 + hex: "#136186" + - category: Decorative emerald + name: "decorative-emerald" + colors: + - name: Decorative emerald 200 + variable: $ouds-color-decorative-emerald-200 + hex: "#c0e8d4" + - name: Decorative emerald 500 + variable: $ouds-color-decorative-emerald-500 hex: "#50be87" - - name: Green 400 - variable: $ods-green-400 - hex: "#27a971" - - name: Green 500 - variable: $ods-green-500 - hex: "#198c51" - - name: Green 600 - variable: $ods-green-600 - hex: "#0a6e31" - - subcategory: Pink - name: "pink" - colors: - - name: Pink 100 - variable: $ods-pink-100 - hex: "#ffe8f7" - - name: Pink 200 - variable: $ods-pink-200 - hex: "#ffceef" - - name: Pink 300 - variable: $ods-pink-300 + - name: Decorative emerald 700 + variable: $ouds-color-decorative-emerald-700 + hex: "#2e7b54" + - category: Decorative amber + name: "decorative-amber" + colors: + - name: Decorative amber 500 + variable: $ouds-color-decorative-amber-500 + hex: "#ffb400" + - category: Decorative deep peach + name: "decorative-deep-peach" + colors: + - name: Decorative deep peach 100 + variable: $ouds-color-decorative-deep-peach-100 + hex: "#fbebdf" + - name: Decorative deep peach 200 + variable: $ouds-color-decorative-deep-peach-200 + hex: "#f4cfb2" + - name: Decorative deep peach 300 + variable: $ouds-color-decorative-deep-peach-300 + hex: "#e3b591" + - name: Decorative deep peach 400 + variable: $ouds-color-decorative-deep-peach-400 + hex: "#c19372" + - name: Decorative deep peach 500 + variable: $ouds-color-decorative-deep-peach-500 + hex: "#cf7e3f" + - name: Decorative deep peach 600 + variable: $ouds-color-decorative-deep-peach-600 + hex: "#aa6631" + - name: Decorative deep peach 700 + variable: $ouds-color-decorative-deep-peach-700 + hex: "#7e4f2a" + - name: Decorative deep peach 800 + variable: $ouds-color-decorative-deep-peach-800 + hex: "#553720" + - name: Decorative deep peach 900 + variable: $ouds-color-decorative-deep-peach-900 + hex: "#2e2014" + - subcategory: Decorative shocking pink + name: "decorative-shocking-pink" + colors: + - name: Decorative shocking pink 100 + variable: $ouds-color-decorative-shocking-pink-100 + hex: "#ffe5f6" + - name: Decorative shocking pink 200 + variable: $ouds-color-decorative-shocking-pink-200 hex: "#ffb4e6" - - name: Pink 400 - variable: $ods-pink-400 - hex: "#ff8ad4" - - name: Pink 500 - variable: $ods-pink-500 - hex: "#d573bb" - - name: Pink 600 - variable: $ods-pink-600 - hex: "#bc4d9a" - - category: Purple - name: "purple" - colors: - - name: Purple 100 - variable: $ods-purple-100 - hex: "#d9c2f0" - - name: Purple 200 - variable: $ods-purple-200 - hex: "#c1a4e4" - - name: Purple 300 - variable: $ods-purple-300 + - name: Decorative shocking pink 300 + variable: $ouds-color-decorative-shocking-pink-300 + hex: "#ff80d4" + - category: Decorative amethyst + name: "decorative-amethyst" + colors: + - name: Decorative amethyst 200 + variable: $ouds-color-decorative-amethyst-200 + hex: "#e0d4f2" + - name: Decorative amethyst 400 + variable: $ouds-color-decorative-amethyst-400 hex: "#a885d8" - - name: Purple 400 - variable: $ods-purple-400 - hex: "#9373bd" - - name: Purple 500 - variable: $ods-purple-500 - hex: "#6e4aa7" - - name: Purple 600 - variable: $ods-purple-600 - hex: "#492191" - - category: Yellow - name: "yellow" - colors: - - name: Yellow 100 - variable: $ods-yellow-100 - hex: "#fff6b6" - - name: Yellow 200 - variable: $ods-yellow-200 - hex: "#ffe45b" - - name: Yellow 300 - variable: $ods-yellow-300 - hex: "#ffd200" - - name: Yellow 400 - variable: $ods-yellow-400 - hex: "#ffb400" - - name: Yellow 500 - variable: $ods-yellow-500 - hex: "#b98f11" - - name: Yellow 600 - variable: $ods-yellow-600 - hex: "#9d6e06" + - name: Decorative amethyst 600 + variable: $ouds-color-decorative-amethyst-600 + hex: "#5b2f98" + - name: Decorative amethyst 800 + variable: $ouds-color-decorative-amethyst-800 + hex: "#2c174a" + - category: Transparent black + name: "transparent-black" + colors: + - name: Transparent black 0 + variable: $ouds-color-transparent-black-0 + hex: "rgba(0, 0, 0, 0)" + - name: Transparent black 300 + variable: $ouds-color-transparent-black-300 + hex: "rgba(0, 0, 0, .16)" + - name: Transparent black 400 + variable: $ouds-color-transparent-black-400 + hex: "rgba(0, 0, 0, .24)" + - name: Transparent black 500 + variable: $ouds-color-transparent-black-500 + hex: "rgba(0, 0, 0, .32)" diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index d77d6b30d4..9847e431ee 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -36,7 +36,6 @@ draft: true - title: Options - title: Color palette - draft: true - title: Color theme draft: true - title: Color modes diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 97211e4b64..0db857fb50 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -22,7 +22,7 @@ -