From 3f768fc6a504a1bd1c1a18b2322d53adb5cc5769 Mon Sep 17 00:00:00 2001 From: "OUDS Bot [bot]" <130566815+boosted-bot@users.noreply.github.com> Date: Fri, 6 Dec 2024 10:31:56 +0100 Subject: [PATCH] chore: update tokens (#2816) --------- Co-authored-by: boosted-bot Co-authored-by: louismaxime.piton --- scss/_maps.scss | 21 +- scss/_root.scss | 126 ++-- scss/_variables.scss | 6 +- scss/helpers/_icon.scss | 28 +- scss/mixins/_fonts.scss | 2 +- .../_ouds-web-bootstrap-utilities.test.scss | 60 +- scss/tokens/_component.scss | 462 ++++++++++--- scss/tokens/_composite.scss | 6 +- scss/tokens/_raw.scss | 130 ++-- scss/tokens/_semantic.scss | 644 +++++++----------- site/content/docs/0.0/helpers/icon.md | 222 +++--- .../docs/0.0/migration-from-boosted.md | 370 ++++++++-- site/content/docs/0.0/migration.md | 374 ++++++++-- site/content/docs/0.0/utilities/opacity.md | 4 +- site/content/docs/0.0/utilities/shadows.md | 6 +- site/layouts/partials/docs-sidebar.html | 2 +- 16 files changed, 1613 insertions(+), 850 deletions(-) diff --git a/scss/_maps.scss b/scss/_maps.scss index 0a45c22aa3..a4b3c3a56c 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -72,11 +72,11 @@ $ouds-dimension-negative-space-fixed: if($enable-negative-margins, negativify-ma // scss-docs-start ouds-maps-elevations $ouds-elevations: ( + "default": $ouds-elevation-default, + "drag": $ouds-elevation-drag, + "emphasized": $ouds-elevation-emphasized, "none": $ouds-elevation-none, "raised": $ouds-elevation-raised, - "drag": $ouds-elevation-drag, - "overlay-default": $ouds-elevation-overlay-default, - "overlay-emphasized": $ouds-elevation-overlay-emphasized, "sticky-default": $ouds-elevation-sticky-default, "sticky-emphasized": $ouds-elevation-sticky-emphasized, "sticky-navigation-scrolled": $ouds-elevation-sticky-navigation-scrolled @@ -85,7 +85,6 @@ $ouds-elevations: ( // scss-docs-start ouds-maps-font $ouds-font-sizes: ( - cs: "/code-small", cm: "/code-medium", bs: "/body-small", bm: "/body-medium", @@ -104,17 +103,17 @@ $ouds-font-weights: ( bold: $ouds-font-weight-strong ) !default; -$ouds-icon-sizes: ("short", "medium", "tall") !default; +$ouds-icon-sizes: ("sm", "md", "lg") !default; // scss-docs-end ouds-maps-font // scss-docs-start ouds-maps-opacities $ouds-opacities: ( - "transparent": $ouds-opacity-transparent, - "weaker": $ouds-opacity-weaker, - "weak": $ouds-opacity-weak, - "medium": $ouds-opacity-medium, - "strong": $ouds-opacity-strong, - "opaque": $ouds-opacity-opaque + "invisible": $ouds-opacity-invisible, + "weaker": $ouds-opacity-weaker, + "weak": $ouds-opacity-weak, + "medium": $ouds-opacity-medium, + "strong": $ouds-opacity-strong, + "opaque": $ouds-opacity-opaque ) !default; // scss-docs-end ouds-maps-opacities // End mod diff --git a/scss/_root.scss b/scss/_root.scss index b181ee518a..007583cfab 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -310,74 +310,74 @@ // scss-docs-end root-space-scaled-var-ouds // scss-docs-start root-size-scaled-var-ouds - --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-mobile)}; - --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-mobile)}; - --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-mobile)}; - --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-mobile)}; - --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-mobile)}; - --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-mobile)}; - --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-mobile)}; - --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-mobile)}; - --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-mobile)}; - --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-mobile)}; - --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-mobile)}; - --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-mobile)}; - --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-mobile)}; - --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-mobile)}; - --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-mobile)}; - --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-mobile)}; - --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-mobile)}; - --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-mobile)}; - --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-mobile)}; - --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-mobile)}; - --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-mobile)}; + --#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-mobile)}; + --#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-mobile)}; + --#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-mobile)}; + --#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-mobile)}; + --#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-mobile)}; + --#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-mobile)}; + --#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-mobile)}; + --#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-mobile)}; + --#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-mobile)}; + --#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-mobile)}; + --#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-mobile)}; + --#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-mobile)}; + --#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-mobile)}; + --#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-mobile)}; + --#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-mobile)}; + --#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-mobile)}; + --#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-mobile)}; + --#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-mobile)}; + --#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-mobile)}; + --#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-mobile)}; + --#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-mobile)}; @include media-breakpoint-up(md) { - --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-tablet)}; - --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-tablet)}; - --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-tablet)}; - --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-tablet)}; - --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-tablet)}; - --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-tablet)}; - --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-tablet)}; - --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-tablet)}; - --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-tablet)}; - --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-tablet)}; - --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-tablet)}; - --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-tablet)}; - --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-tablet)}; - --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-tablet)}; - --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-tablet)}; - --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-tablet)}; - --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-tablet)}; - --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-tablet)}; - --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-tablet)}; - --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-tablet)}; - --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-tablet)}; + --#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-tablet)}; + --#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-tablet)}; + --#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-tablet)}; + --#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-tablet)}; + --#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-tablet)}; + --#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-tablet)}; + --#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-tablet)}; + --#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-tablet)}; + --#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-tablet)}; + --#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-tablet)}; + --#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-tablet)}; + --#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-tablet)}; + --#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-tablet)}; + --#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-tablet)}; + --#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-tablet)}; + --#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-tablet)}; + --#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-tablet)}; + --#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-tablet)}; + --#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-tablet)}; + --#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-tablet)}; + --#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-tablet)}; } @include media-breakpoint-up(xl) { - --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-desktop)}; - --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-desktop)}; - --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-desktop)}; - --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-desktop)}; - --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-desktop)}; - --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-desktop)}; - --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-desktop)}; - --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-desktop)}; - --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-desktop)}; - --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-desktop)}; - --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-desktop)}; - --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-desktop)}; - --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-desktop)}; - --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-desktop)}; - --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-desktop)}; - --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-desktop)}; - --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-desktop)}; - --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-desktop)}; - --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-desktop)}; - --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-desktop)}; - --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-desktop)}; + --#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-desktop)}; + --#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-desktop)}; + --#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-desktop)}; + --#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-desktop)}; + --#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-desktop)}; + --#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-desktop)}; + --#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-desktop)}; + --#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-desktop)}; + --#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-desktop)}; + --#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-desktop)}; + --#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-desktop)}; + --#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-desktop)}; + --#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-desktop)}; + --#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-desktop)}; + --#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-desktop)}; + --#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-desktop)}; + --#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-desktop)}; + --#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-desktop)}; + --#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-desktop)}; + --#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-desktop)}; + --#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-desktop)}; } // scss-docs-end root-size-scaled-var-ouds // End mod diff --git a/scss/_variables.scss b/scss/_variables.scss index 68420fb680..7d1bc3b4b0 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -662,9 +662,9 @@ $focus-visible-outer-color: $black !default; // OUDS mod // scss-docs-end focus-visible-variables // scss-docs-start box-shadow-variables -$box-shadow: $ouds-elevation-overlay-default !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)` -$box-shadow-sm: $ouds-elevation-overlay-default !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)` -$box-shadow-lg: $ouds-elevation-overlay-emphasized !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)` +$box-shadow: $ouds-elevation-default !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)` +$box-shadow-sm: $ouds-elevation-default !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)` +$box-shadow-lg: $ouds-elevation-emphasized !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)` $box-shadow-inset: null !default; // OUDS mod: instead of `inset 0 1px 2px rgba($black, .075)` // scss-docs-end box-shadow-variables diff --git a/scss/helpers/_icon.scss b/scss/helpers/_icon.scss index 73730e8229..9b97d886c1 100644 --- a/scss/helpers/_icon.scss +++ b/scss/helpers/_icon.scss @@ -20,37 +20,37 @@ } } -.decorative-shortest-icon { +.decorative-2xs-icon { @extend %icon-size; - font-size: $ouds-size-icon-decorative-shortest if($enable-important-utilities, !important, null); + font-size: $ouds-size-icon-decorative-2xs if($enable-important-utilities, !important, null); } -.decorative-shorter-icon { +.decorative-xs-icon { @extend %icon-size; - font-size: $ouds-size-icon-decorative-shorter if($enable-important-utilities, !important, null); + font-size: $ouds-size-icon-decorative-xs if($enable-important-utilities, !important, null); } -.decorative-short-icon { +.decorative-sm-icon { @extend %icon-size; - font-size: $ouds-size-icon-decorative-short if($enable-important-utilities, !important, null); + font-size: $ouds-size-icon-decorative-sm if($enable-important-utilities, !important, null); } -.decorative-medium-icon { +.decorative-md-icon { @extend %icon-size; - font-size: $ouds-size-icon-decorative-medium if($enable-important-utilities, !important, null); + font-size: $ouds-size-icon-decorative-md if($enable-important-utilities, !important, null); } -.decorative-tall-icon { +.decorative-lg-icon { @extend %icon-size; - font-size: $ouds-size-icon-decorative-tall if($enable-important-utilities, !important, null); + font-size: $ouds-size-icon-decorative-lg if($enable-important-utilities, !important, null); } -.decorative-taller-icon { +.decorative-xl-icon { @extend %icon-size; - font-size: $ouds-size-icon-decorative-taller if($enable-important-utilities, !important, null); + font-size: $ouds-size-icon-decorative-xl if($enable-important-utilities, !important, null); } -.decorative-tallest-icon { +.decorative-2xl-icon { @extend %icon-size; - font-size: $ouds-size-icon-decorative-tallest if($enable-important-utilities, !important, null); + font-size: $ouds-size-icon-decorative-2xl if($enable-important-utilities, !important, null); } diff --git a/scss/mixins/_fonts.scss b/scss/mixins/_fonts.scss index bb65a7480b..4285173cc4 100644 --- a/scss/mixins/_fonts.scss +++ b/scss/mixins/_fonts.scss @@ -1,5 +1,5 @@ // scss-docs-start ouds-mixin-font -// $font-size-ref can be one of: "code-small", "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large" +// $font-size-ref can be one of: "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large" @mixin get-font-size($font-size-ref: "display-large") { @if str-slice($font-size-ref, 1, 5) != "label" and str-slice($font-size-ref, 1, 4) != "code" { diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index 18589b97b2..5ae81294ff 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -767,7 +767,7 @@ $utilities: (); @import "../../utilities/api"; } @include expect() { - .opacity-transparent { + .opacity-invisible { opacity: 0 !important; } @@ -3041,14 +3041,6 @@ $utilities: (); /* rtl:end:remove */ - .fs-cs { - font-size: var(--bs-font-size-code-small); - line-height: var(--bs-font-line-height-code-small); - - /* rtl:remove */ - letter-spacing: var(--bs-font-letter-spacing-code-small); - } - .fs-cm { font-size: var(--bs-font-size-code-medium); line-height: var(--bs-font-line-height-code-medium); @@ -3155,24 +3147,24 @@ $utilities: (); font-weight: 700 !important; } - .shadow-none { - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; - } - - .shadow-raised { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero + .shadow-default { + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero } .shadow-drag { box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero } - .shadow-overlay-default { - box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero + .shadow-emphasized { + box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero } - .shadow-overlay-emphasized { - box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + .shadow-none { + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; + } + + .shadow-raised { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero } .shadow-sticky-default { @@ -10329,7 +10321,7 @@ $utilities: (); opacity: 1 !important; } - .opacity-transparent { + .opacity-invisible { opacity: 0 !important; } @@ -13287,14 +13279,6 @@ $utilities: (); /* rtl:end:remove */ - .fs-cs { - font-size: var(--bs-font-size-code-small); - line-height: var(--bs-font-line-height-code-small); - - /* rtl:remove */ - letter-spacing: var(--bs-font-letter-spacing-code-small); - } - .fs-cm { font-size: var(--bs-font-size-code-medium); line-height: var(--bs-font-line-height-code-medium); @@ -13413,24 +13397,24 @@ $utilities: (); box-shadow: var(--bs-box-shadow-lg) !important; } - .shadow-none { - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; - } - - .shadow-raised { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero + .shadow-default { + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero } .shadow-drag { box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero } - .shadow-overlay-default { - box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero + .shadow-emphasized { + box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero } - .shadow-overlay-emphasized { - box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero + .shadow-none { + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; + } + + .shadow-raised { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero } .shadow-sticky-default { diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index f322db8584..d0743f2b9b 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -12,85 +12,395 @@ // $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-bg-default-focus-mono: $ouds-color-repository-opacity-black-higher !default; +// $ouds-button-color-bg-default-hover-mono: $ouds-color-repository-opacity-black-higher !default; +// $ouds-button-color-bg-default-loading-mono: $ouds-color-repository-opacity-white-higher !default; +// $ouds-button-color-bg-default-pressed-mono: $ouds-color-repository-opacity-white-higher !default; +// $ouds-button-color-bg-minimal-focus-mono: $ouds-color-repository-opacity-black-higher !default; +// $ouds-button-color-bg-minimal-hover-mono: $ouds-color-repository-opacity-black-higher !default; +// $ouds-button-color-bg-minimal-loading-mono: $ouds-color-repository-opacity-white-higher !default; +// $ouds-button-color-bg-minimal-pressed-mono: $ouds-color-repository-opacity-white-higher !default; +// $ouds-button-color-bg-strong-disabled-mono: $ouds-color-repository-opacity-black-medium !default; +// $ouds-button-color-bg-strong-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-bg-strong-focus-mono: $ouds-color-repository-opacity-black-higher !default; +// $ouds-button-color-bg-strong-hover-mono: $ouds-color-repository-opacity-black-higher !default; +// $ouds-button-color-bg-strong-loading-mono: $ouds-color-repository-opacity-white-higher !default; +// $ouds-button-color-bg-strong-pressed-mono: $ouds-color-repository-opacity-white-higher !default; +// $ouds-button-color-border-default-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-content-default-disabled-mono: $ouds-color-repository-opacity-black-medium !default; +// $ouds-button-color-content-default-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-content-default-focus-mono: $ouds-color-repository-neutral-muted-white !default; +// $ouds-button-color-content-default-hover-mono: $ouds-color-repository-neutral-muted-white !default; +// $ouds-button-color-content-default-loading-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-content-default-pressed-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-content-minimal-disabled-mono: $ouds-color-repository-opacity-black-medium !default; +// $ouds-button-color-content-minimal-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-content-minimal-focus-mono: $ouds-color-repository-neutral-muted-white !default; +// $ouds-button-color-content-minimal-hover-mono: $ouds-color-repository-neutral-muted-white !default; +// $ouds-button-color-content-minimal-loading-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-content-minimal-pressed-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-content-strong-disabled-mono: $ouds-color-repository-opacity-white-high !default; +// $ouds-button-color-content-strong-enabled-mono: $ouds-color-repository-neutral-muted-white !default; +// $ouds-button-color-content-strong-focus-mono: $ouds-color-repository-neutral-muted-white !default; +// $ouds-button-color-content-strong-hover-mono: $ouds-color-repository-neutral-muted-white !default; +// $ouds-button-color-content-strong-loading-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-content-strong-pressed-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-button-color-bg-default-disabled: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-disabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-disabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-enabled: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-enabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-enabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-focus: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-focus-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-hover: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-hover-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-loading: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-loading-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-pressed: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-default-pressed-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-minimal-disabled: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-minimal-disabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-minimal-disabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-minimal-enabled: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-minimal-enabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-minimal-enabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-bg-minimal-focus: $ouds-color-action-support-focus !default; +// $ouds-button-color-bg-minimal-focus-inverse: $ouds-color-action-support-focus-inverse !default; +// $ouds-button-color-bg-minimal-hover: $ouds-color-action-support-hover !default; +// $ouds-button-color-bg-minimal-hover-inverse: $ouds-color-action-support-hover-inverse !default; +// $ouds-button-color-bg-minimal-loading: $ouds-color-action-support-loading !default; +// $ouds-button-color-bg-minimal-loading-inverse: $ouds-color-action-support-loading-inverse !default; +// $ouds-button-color-bg-minimal-pressed: $ouds-color-action-support-pressed !default; +// $ouds-button-color-bg-minimal-pressed-inverse: $ouds-color-action-support-pressed-inverse !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-border-default-disabled-inverse: $ouds-color-action-disabled-inverse !default; +// $ouds-button-color-border-default-disabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-default-enabled: $ouds-color-action-enabled !default; +// $ouds-button-color-border-default-enabled-inverse: $ouds-color-action-enabled-inverse !default; +// $ouds-button-color-border-default-focus: $ouds-color-action-focus !default; +// $ouds-button-color-border-default-focus-inverse: $ouds-color-action-focus-inverse !default; +// $ouds-button-color-border-default-focus-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-default-hover: $ouds-color-action-hover !default; +// $ouds-button-color-border-default-hover-inverse: $ouds-color-action-hover-inverse !default; +// $ouds-button-color-border-default-hover-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-default-loading: $ouds-color-action-loading !default; +// $ouds-button-color-border-default-loading-inverse: $ouds-color-action-loading-inverse !default; +// $ouds-button-color-border-default-loading-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-default-pressed: $ouds-color-action-pressed !default; +// $ouds-button-color-border-default-pressed-inverse: $ouds-color-action-pressed-inverse !default; +// $ouds-button-color-border-default-pressed-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-disabled: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-disabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-disabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-enabled: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-enabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-enabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-focus: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-focus-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-focus-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-hover: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-hover-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-hover-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-loading: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-loading-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-loading-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-pressed: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-pressed-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-minimal-pressed-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-strong-disabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-strong-enabled-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-strong-focus-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-strong-hover-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-strong-loading-mono: $ouds-color-opacity-invisible-black !default; +// $ouds-button-color-border-strong-pressed-mono: $ouds-color-opacity-invisible-black !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-default-disabled-inverse: $ouds-color-action-disabled-inverse !default; +// $ouds-button-color-content-default-enabled: $ouds-color-action-enabled !default; +// $ouds-button-color-content-default-enabled-inverse: $ouds-color-action-enabled-inverse !default; +// $ouds-button-color-content-default-focus: $ouds-color-action-focus !default; +// $ouds-button-color-content-default-focus-inverse: $ouds-color-action-focus-inverse !default; +// $ouds-button-color-content-default-hover: $ouds-color-action-hover !default; +// $ouds-button-color-content-default-hover-inverse: $ouds-color-action-hover-inverse !default; +// $ouds-button-color-content-default-loading: $ouds-color-action-loading !default; +// $ouds-button-color-content-default-loading-inverse: $ouds-color-action-loading-inverse !default; +// $ouds-button-color-content-default-pressed: $ouds-color-action-pressed !default; +// $ouds-button-color-content-default-pressed-inverse: $ouds-color-action-pressed-inverse !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-color-content-minimal-disabled-inverse: $ouds-color-action-disabled-inverse !default; +// $ouds-button-color-content-minimal-enabled: $ouds-color-action-enabled !default; +// $ouds-button-color-content-minimal-enabled-inverse: $ouds-color-action-enabled-inverse !default; +// $ouds-button-color-content-minimal-focus: $ouds-color-action-focus !default; +// $ouds-button-color-content-minimal-focus-inverse: $ouds-color-action-focus-inverse !default; +// $ouds-button-color-content-minimal-hover: $ouds-color-action-hover !default; +// $ouds-button-color-content-minimal-hover-inverse: $ouds-color-action-hover-inverse !default; +// $ouds-button-color-content-minimal-loading: $ouds-color-action-loading !default; +// $ouds-button-color-content-minimal-loading-inverse: $ouds-color-action-loading-inverse !default; +// $ouds-button-color-content-minimal-pressed: $ouds-color-action-pressed !default; +// $ouds-button-color-content-minimal-pressed-inverse: $ouds-color-action-pressed-inverse !default; +// $ouds-button-color-content-strong-disabled: $ouds-color-action-disabled !default; +// $ouds-button-color-content-strong-disabled-inverse: $ouds-color-action-disabled-inverse !default; +// $ouds-button-color-content-strong-enabled: $ouds-color-action-enabled !default; +// $ouds-button-color-content-strong-enabled-inverse: $ouds-color-action-enabled-inverse !default; +// $ouds-button-color-content-strong-focus: $ouds-color-action-focus !default; +// $ouds-button-color-content-strong-focus-inverse: $ouds-color-action-focus-inverse !default; +// $ouds-button-color-content-strong-hover: $ouds-color-action-hover !default; +// $ouds-button-color-content-strong-hover-inverse: $ouds-color-action-hover-inverse !default; +// $ouds-button-color-content-strong-loading: $ouds-color-action-loading !default; +// $ouds-button-color-content-strong-loading-inverse: $ouds-color-action-loading-inverse !default; +// $ouds-button-color-content-strong-pressed: $ouds-color-action-pressed !default; +// $ouds-button-color-content-strong-pressed-inverse: $ouds-color-action-pressed-inverse !default; +// $ouds-button-size-icon: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-sm !default; +// $ouds-button-size-loader: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-button-space-column-gap-arrow: $ouds-space-column-gap-shorter !default; +// $ouds-button-space-column-gap-icon: $ouds-space-column-gap-short !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-space-padding-inline-arrow-end: $ouds-space-padding-inline-tall !default; +// $ouds-button-space-padding-inline-arrow-start: $ouds-space-padding-inline-tall !default; +// $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-spacious !default; +// $ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-huge !default; +// $ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-taller !default; +// $ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-spacious !default; // scss-docs-end ouds-component-button + +// Indicator + +// scss-docs-start ouds-component-indicator +// $ouds-indicator-skeleton-color-bg: $ouds-color-repository-opacity-black-lowest !default; +// $ouds-indicator-skeleton-color-bg-inverse: $ouds-color-repository-opacity-white-lowest !default; +// $ouds-indicator-skeleton-color-gradient-middle: $ouds-color-repository-opacity-black-lower !default; +// $ouds-indicator-skeleton-color-gradient-middle-inverse: $ouds-color-repository-opacity-white-lower !default; +// $ouds-indicator-skeleton-color-gradient-start-end: $ouds-color-opacity-invisible-black !default; +// $ouds-indicator-skeleton-color-gradient-start-end-inverse: $ouds-color-opacity-invisible-black-inverse !default; +// scss-docs-end ouds-component-indicator + +// Input + +// scss-docs-start ouds-component-input +// $ouds-input-checkbox-size-max-height-container-icon: $ouds-dimension-600 !default; +// $ouds-input-checkbox-size-min-height: $ouds-dimension-600 !default; +// $ouds-input-checkbox-size-min-height-icon-only: $ouds-dimension-600 !default; +// $ouds-input-checkbox-size-min-width: $ouds-dimension-600 !default; +// $ouds-input-checkbox-size-min-width-icon-only: $ouds-dimension-600 !default; +// $ouds-input-input-text-size-max-height: $ouds-dimension-600 !default; +// $ouds-input-input-text-size-min-height: $ouds-dimension-600 !default; +// $ouds-input-input-text-size-min-width: $ouds-dimension-600 !default; +// $ouds-input-radio-button-size-max-height-container-icon: $ouds-dimension-600 !default; +// $ouds-input-radio-button-size-min-height: $ouds-dimension-600 !default; +// $ouds-input-radio-button-size-min-height-icon-only: $ouds-dimension-600 !default; +// $ouds-input-radio-button-size-min-width: $ouds-dimension-600 !default; +// $ouds-input-radio-button-size-min-width-icon-only: $ouds-dimension-600 !default; +// $ouds-input-checkbox-border-radius: $ouds-border-radius-none !default; +// $ouds-input-checkbox-border-width: $ouds-border-width-none !default; +// $ouds-input-input-text-border-radius: $ouds-border-radius-none !default; +// $ouds-input-input-text-border-width-default: $ouds-border-width-default !default; +// $ouds-input-input-text-border-width-default-interaction: $ouds-border-width-medium !default; +// $ouds-input-radio-button-border-radius: $ouds-border-radius-none !default; +// $ouds-input-radio-button-border-width: $ouds-border-width-none !default; +// $ouds-input-radio-button-border-width-highlight: $ouds-border-width-default !default; +// $ouds-input-checkbox-color-bg-disabled: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-bg-disabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-bg-enabled: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-bg-enabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-bg-focus: $ouds-color-action-support-focus !default; +// $ouds-input-checkbox-color-bg-focus-inverse: $ouds-color-action-support-focus-inverse !default; +// $ouds-input-checkbox-color-bg-hover: $ouds-color-action-support-hover !default; +// $ouds-input-checkbox-color-bg-hover-inverse: $ouds-color-action-support-hover-inverse !default; +// $ouds-input-checkbox-color-bg-loading: $ouds-color-action-support-loading !default; +// $ouds-input-checkbox-color-bg-loading-inverse: $ouds-color-action-support-loading-inverse !default; +// $ouds-input-checkbox-color-bg-pressed: $ouds-color-action-support-pressed !default; +// $ouds-input-checkbox-color-bg-pressed-inverse: $ouds-color-action-support-pressed-inverse !default; +// $ouds-input-checkbox-color-border-disabled: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-disabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-enabled: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-enabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-hover: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-hover-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-loading: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-loading-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-pressed: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-border-pressed-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-checkbox-color-content-content-disabled: $ouds-color-content-disabled !default; +// $ouds-input-checkbox-color-content-content-disabled-inverse: $ouds-color-content-disabled-inverse !default; +// $ouds-input-checkbox-color-content-content-enabled: $ouds-color-content-default !default; +// $ouds-input-checkbox-color-content-content-enabled-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-checkbox-color-content-content-focus: $ouds-color-content-default !default; +// $ouds-input-checkbox-color-content-content-focus-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-checkbox-color-content-content-hover: $ouds-color-content-default !default; +// $ouds-input-checkbox-color-content-content-hover-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-checkbox-color-content-content-loading: $ouds-color-content-default !default; +// $ouds-input-checkbox-color-content-content-loading-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-checkbox-color-content-content-pressed: $ouds-color-content-default !default; +// $ouds-input-checkbox-color-content-content-pressed-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-checkbox-color-content-helper-text-disabled: $ouds-color-content-disabled !default; +// $ouds-input-checkbox-color-content-helper-text-disabled-inverse: $ouds-color-content-disabled-inverse !default; +// $ouds-input-checkbox-color-content-helper-text-enabled: $ouds-color-content-muted !default; +// $ouds-input-checkbox-color-content-helper-text-enabled-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-checkbox-color-content-helper-text-focus: $ouds-color-content-muted !default; +// $ouds-input-checkbox-color-content-helper-text-focus-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-checkbox-color-content-helper-text-hover: $ouds-color-content-muted !default; +// $ouds-input-checkbox-color-content-helper-text-hover-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-checkbox-color-content-helper-text-loading: $ouds-color-content-muted !default; +// $ouds-input-checkbox-color-content-helper-text-loading-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-checkbox-color-content-helper-text-pressed: $ouds-color-content-muted !default; +// $ouds-input-checkbox-color-content-helper-text-pressed-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-checkbox-size-check-box: $ouds-size-icon-with-label-large-size-sm !default; +// $ouds-input-checkbox-size-icon: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-input-checkbox-size-loader: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-input-checkbox-space-column-gap: $ouds-space-column-gap-tall !default; +// $ouds-input-checkbox-space-padding-inset: $ouds-space-inset-medium !default; +// $ouds-input-checkbox-space-row-gap: $ouds-space-row-gap-none !default; +// $ouds-input-input-text-color-bg-default-disabled: $ouds-color-action-support-enabled !default; +// $ouds-input-input-text-color-bg-default-disabled-inverse: $ouds-color-action-support-enabled-inverse !default; +// $ouds-input-input-text-color-bg-default-enabled: $ouds-color-action-support-enabled !default; +// $ouds-input-input-text-color-bg-default-enabled-inverse: $ouds-color-action-support-enabled-inverse !default; +// $ouds-input-input-text-color-bg-default-focus: $ouds-color-action-support-focus !default; +// $ouds-input-input-text-color-bg-default-focus-inverse: $ouds-color-action-support-focus-inverse !default; +// $ouds-input-input-text-color-bg-default-hover: $ouds-color-action-support-hover !default; +// $ouds-input-input-text-color-bg-default-hover-inverse: $ouds-color-action-support-hover-inverse !default; +// $ouds-input-input-text-color-bg-default-loading: $ouds-color-action-support-loading !default; +// $ouds-input-input-text-color-bg-default-loading-inverse: $ouds-color-action-support-loading-inverse !default; +// $ouds-input-input-text-color-bg-default-pressed: $ouds-color-action-support-pressed !default; +// $ouds-input-input-text-color-bg-default-pressed-inverse: $ouds-color-action-support-pressed-inverse !default; +// $ouds-input-input-text-color-border-default-disabled: $ouds-color-action-disabled !default; +// $ouds-input-input-text-color-border-default-disabled-inverse: $ouds-color-action-disabled-inverse !default; +// $ouds-input-input-text-color-border-default-loading: $ouds-color-action-loading !default; +// $ouds-input-input-text-color-border-default-loading-inverse: $ouds-color-action-loading-inverse !default; +// $ouds-input-input-text-color-border-default-pressed: $ouds-color-action-pressed !default; +// $ouds-input-input-text-color-border-default-pressed-inverse: $ouds-color-action-pressed-inverse !default; +// $ouds-input-input-text-color-border-default-enabled: $ouds-color-border-default-inverse !default; +// $ouds-input-input-text-color-border-default-enabled-inverse: $ouds-color-action-enabled-inverse !default; +// $ouds-input-input-text-color-border-default-hover: $ouds-color-action-enabled !default; +// $ouds-input-input-text-color-border-default-hover-inverse: $ouds-color-action-hover-inverse !default; +// $ouds-input-input-text-color-content-default-disabled: $ouds-color-content-disabled !default; +// $ouds-input-input-text-color-content-default-disabled-inverse: $ouds-color-content-disabled-inverse !default; +// $ouds-input-input-text-color-content-default-enabled: $ouds-color-content-default !default; +// $ouds-input-input-text-color-content-default-enabled-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-input-text-color-content-default-focus: $ouds-color-content-default !default; +// $ouds-input-input-text-color-content-default-focus-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-input-text-color-content-default-hover: $ouds-color-content-default !default; +// $ouds-input-input-text-color-content-default-hover-2: $ouds-color-content-default !default; +// $ouds-input-input-text-color-content-default-hover-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-input-text-color-content-default-loading: $ouds-color-content-default !default; +// $ouds-input-input-text-color-content-default-loading-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-input-text-color-content-default-pressed: $ouds-color-content-default !default; +// $ouds-input-input-text-color-content-default-pressed-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-input-text-size-icon: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-input-input-text-size-loader: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-input-input-text-size-prefix-text-height: $ouds-size-icon-with-label-large-size-sm !default; +// $ouds-input-input-text-size-suffix-text-height: $ouds-size-icon-with-label-large-size-sm !default; +// $ouds-input-input-text-space-column-gap-arrow: $ouds-space-column-gap-shorter !default; +// $ouds-input-input-text-space-column-gap-icon: $ouds-space-column-gap-short !default; +// $ouds-input-input-text-space-inset-icon-alone: $ouds-space-inset-medium !default; +// $ouds-input-input-text-space-padding-block: $ouds-space-padding-block-medium !default; +// $ouds-input-input-text-space-padding-inline-arrow-end: $ouds-space-padding-inline-tall !default; +// $ouds-input-input-text-space-padding-inline-arrow-start: $ouds-space-padding-inline-tall !default; +// $ouds-input-input-text-space-padding-inline-end-icon-start: $ouds-space-padding-inline-spacious !default; +// $ouds-input-input-text-space-padding-inline-icon-none: $ouds-space-padding-inline-huge !default; +// $ouds-input-input-text-space-padding-inline-icon-start: $ouds-space-padding-inline-taller !default; +// $ouds-input-input-text-space-padding-inline-start-icon-end: $ouds-space-padding-inline-spacious !default; +// $ouds-input-radio-button-color-bg-disabled: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-bg-disabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-bg-enabled: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-bg-enabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-bg-focus: $ouds-color-action-support-focus !default; +// $ouds-input-radio-button-color-bg-focus-inverse: $ouds-color-action-support-focus-inverse !default; +// $ouds-input-radio-button-color-bg-hover: $ouds-color-action-support-hover !default; +// $ouds-input-radio-button-color-bg-hover-inverse: $ouds-color-action-support-hover-inverse !default; +// $ouds-input-radio-button-color-bg-loading: $ouds-color-action-support-loading !default; +// $ouds-input-radio-button-color-bg-loading-inverse: $ouds-color-action-support-loading-inverse !default; +// $ouds-input-radio-button-color-bg-pressed: $ouds-color-action-support-pressed !default; +// $ouds-input-radio-button-color-bg-pressed-inverse: $ouds-color-action-support-pressed-inverse !default; +// $ouds-input-radio-button-color-border-disabled: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-disabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-enabled: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-enabled-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-hover: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-hover-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-loading: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-loading-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-pressed: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-border-pressed-inverse: $ouds-color-opacity-invisible-black !default; +// $ouds-input-radio-button-color-content-content-disabled: $ouds-color-content-disabled !default; +// $ouds-input-radio-button-color-content-content-disabled-inverse: $ouds-color-content-disabled-inverse !default; +// $ouds-input-radio-button-color-content-content-enabled: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-content-enabled-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-content-focus: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-content-focus-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-content-hover: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-content-hover-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-content-loading: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-content-loading-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-content-pressed: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-content-pressed-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-helper-text-disabled: $ouds-color-content-disabled !default; +// $ouds-input-radio-button-color-content-helper-text-disabled-inverse: $ouds-color-content-disabled-inverse !default; +// $ouds-input-radio-button-color-content-helper-text-enabled: $ouds-color-content-muted !default; +// $ouds-input-radio-button-color-content-helper-text-enabled-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-radio-button-color-content-helper-text-focus: $ouds-color-content-muted !default; +// $ouds-input-radio-button-color-content-helper-text-focus-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-radio-button-color-content-helper-text-hover: $ouds-color-content-muted !default; +// $ouds-input-radio-button-color-content-helper-text-hover-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-radio-button-color-content-helper-text-loading: $ouds-color-content-muted !default; +// $ouds-input-radio-button-color-content-helper-text-loading-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-radio-button-color-content-helper-text-pressed: $ouds-color-content-muted !default; +// $ouds-input-radio-button-color-content-helper-text-pressed-inverse: $ouds-color-content-muted-inverse !default; +// $ouds-input-radio-button-color-content-price-disabled: $ouds-color-content-disabled !default; +// $ouds-input-radio-button-color-content-price-disabled-inverse: $ouds-color-content-disabled-inverse !default; +// $ouds-input-radio-button-color-content-price-enabled: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-price-enabled-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-price-focus: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-price-focus-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-price-hover: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-price-hover-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-price-loading: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-price-loading-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-color-content-price-pressed: $ouds-color-content-default !default; +// $ouds-input-radio-button-color-content-price-pressed-inverse: $ouds-color-content-default-inverse !default; +// $ouds-input-radio-button-size-check-box: $ouds-size-icon-with-label-large-size-sm !default; +// $ouds-input-radio-button-size-icon: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-input-radio-button-size-loader: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-input-radio-button-space-column-gap: $ouds-space-column-gap-tall !default; +// $ouds-input-radio-button-space-padding-inset: $ouds-space-inset-medium !default; +// $ouds-input-radio-button-space-row-gap: $ouds-space-row-gap-none !default; +// scss-docs-end ouds-component-input + +// Navigation + +// scss-docs-start ouds-component-navigation +// $ouds-navigation-link-size-min-height-medium: $ouds-dimension-600 !default; +// $ouds-navigation-link-size-min-height-small: $ouds-dimension-550 !default; +// $ouds-navigation-link-size-min-width-medium: $ouds-dimension-600 !default; +// $ouds-navigation-link-size-min-width-small: $ouds-dimension-550 !default; +// $ouds-navigation-link-color-content-disabled-mono: $ouds-color-repository-opacity-black-medium !default; +// $ouds-navigation-link-color-content-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-navigation-link-color-content-focus-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-navigation-link-color-content-hover-mono: $ouds-color-repository-neutral-emphasized-black !default; +// $ouds-navigation-link-color-content-pressed-mono: $ouds-color-repository-opacity-black-higher !default; +// $ouds-navigation-link-color-arrow-enabled: $ouds-color-content-brand-primary !default; +// $ouds-navigation-link-color-arrow-enabled-inverse: $ouds-color-content-brand-primary-inverse !default; +// $ouds-navigation-link-color-arrow-focus: $ouds-color-content-brand-primary !default; +// $ouds-navigation-link-color-arrow-focus-inverse: $ouds-color-content-brand-primary-inverse !default; +// $ouds-navigation-link-color-arrow-hover: $ouds-color-content-brand-primary !default; +// $ouds-navigation-link-color-arrow-hover-inverse: $ouds-color-content-brand-primary-inverse !default; +// $ouds-navigation-link-color-arrow-pressed: $ouds-color-content-brand-primary !default; +// $ouds-navigation-link-color-arrow-pressed-inverse: $ouds-color-content-brand-primary-inverse !default; +// $ouds-navigation-link-color-content-enabled: $ouds-color-action-enabled !default; +// $ouds-navigation-link-color-content-enabled-inverse: $ouds-color-action-enabled-inverse !default; +// $ouds-navigation-link-color-content-focus: $ouds-color-action-focus !default; +// $ouds-navigation-link-color-content-focus-inverse: $ouds-color-action-focus-inverse !default; +// $ouds-navigation-link-color-content-hover: $ouds-color-action-hover !default; +// $ouds-navigation-link-color-content-hover-inverse: $ouds-color-action-hover-inverse !default; +// $ouds-navigation-link-color-content-pressed: $ouds-color-action-pressed !default; +// $ouds-navigation-link-color-content-pressed-inverse: $ouds-color-action-pressed-inverse !default; +// $ouds-navigation-link-size-icon-medium: $ouds-size-icon-with-label-large-size-xs !default; +// $ouds-navigation-link-size-icon-small: $ouds-size-icon-with-label-medium-size-sm !default; +// $ouds-navigation-link-space-column-gap-arrow-medium: $ouds-space-column-gap-shorter !default; +// $ouds-navigation-link-space-column-gap-arrow-small: $ouds-space-column-gap-shortest !default; +// $ouds-navigation-link-space-column-gap-icon-medium: $ouds-space-column-gap-short !default; +// $ouds-navigation-link-space-column-gap-icon-small: $ouds-space-column-gap-shorter !default; +// $ouds-navigation-link-space-padding-block: $ouds-space-padding-block-medium !default; +// $ouds-navigation-link-space-padding-inline: $ouds-space-padding-inline-none !default; +// scss-docs-end ouds-component-navigation diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss index 806658c05b..53eb1ac552 100644 --- a/scss/tokens/_composite.scss +++ b/scss/tokens/_composite.scss @@ -4,11 +4,11 @@ // Elevation // scss-docs-start ouds-composite-elevation +$ouds-elevation-default: $ouds-elevation-x-default $ouds-elevation-y-default $ouds-elevation-blur-default $ouds-elevation-spread-default $ouds-elevation-color-default-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-emphasized: $ouds-elevation-x-emphasized $ouds-elevation-y-emphasized $ouds-elevation-blur-emphasized $ouds-elevation-spread-emphasized $ouds-elevation-color-emphasized-light !default; $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; diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index d8eadd97bf..c8330dcd29 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -29,6 +29,7 @@ $ouds-border-width-25: $ouds-border-base * .25 !default; // 1 $ouds-border-width-50: $ouds-border-base * .5 !default; // 2 $ouds-border-width-75: $ouds-border-base * .75 !default; // 3 $ouds-border-width-100: $ouds-border-base * 1 !default; // 4 +$ouds-border-width-125: $ouds-border-base * 1.25 !default; // 5 // $ouds-border-width-150: $ouds-border-base * 1.5 !default; // 6 // $ouds-border-width-200: $ouds-border-base * 2 !default; // 8 // scss-docs-end ouds-raw-border @@ -96,16 +97,16 @@ $ouds-color-functional-black: #000 !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; -$ouds-color-functional-dark-gray-480: #444 !default; -$ouds-color-functional-dark-gray-560: #3d3d3d !default; +// $ouds-color-functional-dark-gray-480: #444 !default; +// $ouds-color-functional-dark-gray-560: #3d3d3d !default; $ouds-color-functional-dark-gray-640: #333 !default; $ouds-color-functional-dark-gray-720: #272727 !default; $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-100: #f0faff !default; // $ouds-color-functional-dodger-blue-200: #bde7ff !default; -// $ouds-color-functional-dodger-blue-300: #8ad5ff !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; @@ -116,7 +117,7 @@ $ouds-color-functional-light-gray-80: #f4f4f4 !default; $ouds-color-functional-light-gray-160: #eee !default; // $ouds-color-functional-light-gray-240: #e0e0e0 !default; // $ouds-color-functional-light-gray-320: #d6d6d6 !default; -$ouds-color-functional-light-gray-400: #ccc !default; +// $ouds-color-functional-light-gray-400: #ccc !default; // $ouds-color-functional-light-gray-480: #c2c2c2 !default; $ouds-color-functional-light-gray-560: #bbb !default; // $ouds-color-functional-light-gray-640: #adadad !default; @@ -124,9 +125,9 @@ $ouds-color-functional-light-gray-560: #bbb !default; // $ouds-color-functional-light-gray-800: #999 !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-100: #edfcf0 !default; // $ouds-color-functional-malachite-200: #c1f6ca !default; -// $ouds-color-functional-malachite-300: #94f0a4 !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; @@ -134,17 +135,17 @@ $ouds-color-functional-malachite-500: #3de35a !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-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-100: #fff7d6 !default; $ouds-color-functional-sun-200: #ffed99 !default; -// $ouds-color-functional-sun-300: #ffe270 !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; @@ -152,33 +153,67 @@ $ouds-color-functional-sun-500: #ffd000 !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; -// $ouds-color-transparent-black-100: rgba(0, 0, 0, .04) !default; -// $ouds-color-transparent-black-200: rgba(0, 0, 0, .08) !default; -$ouds-color-transparent-black-300: rgba(0, 0, 0, .16) !default; -$ouds-color-transparent-black-400: rgba(0, 0, 0, .24) !default; -$ouds-color-transparent-black-500: rgba(0, 0, 0, .32) !default; -// $ouds-color-transparent-black-600: rgba(0, 0, 0, .48) !default; -// $ouds-color-transparent-black-700: rgba(0, 0, 0, .64) !default; -// $ouds-color-transparent-black-800: rgba(0, 0, 0, .88) !default; -// $ouds-color-transparent-black-900: #000 !default; -// $ouds-color-transparent-white-0: rgba(255, 255, 255, 0) !default; -// $ouds-color-transparent-white-100: rgba(255, 255, 255, .04) !default; -// $ouds-color-transparent-white-200: rgba(255, 255, 255, .08) !default; -// $ouds-color-transparent-white-300: rgba(255, 255, 255, .16) !default; -// $ouds-color-transparent-white-400: rgba(255, 255, 255, .24) !default; -// $ouds-color-transparent-white-500: rgba(255, 255, 255, .32) !default; -// $ouds-color-transparent-white-600: rgba(255, 255, 255, .48) !default; -// $ouds-color-transparent-white-700: rgba(255, 255, 255, .64) !default; -// $ouds-color-transparent-white-800: rgba(255, 255, 255, .88) !default; -// $ouds-color-transparent-white-900: #fff !default; +$ouds-color-opacity-black-0: rgba(0, 0, 0, 0) !default; +$ouds-color-opacity-black-40: rgba(0, 0, 0, .04) !default; +$ouds-color-opacity-black-80: rgba(0, 0, 0, .08) !default; +// $ouds-color-opacity-black-120: rgba(0, 0, 0, .12) !default; +$ouds-color-opacity-black-160: rgba(0, 0, 0, .16) !default; +$ouds-color-opacity-black-200: rgba(0, 0, 0, .2) !default; +$ouds-color-opacity-black-240: rgba(0, 0, 0, .24) !default; +// $ouds-color-opacity-black-280: rgba(0, 0, 0, .28) !default; +$ouds-color-opacity-black-320: rgba(0, 0, 0, .32) !default; +// $ouds-color-opacity-black-360: rgba(0, 0, 0, .36) !default; +// $ouds-color-opacity-black-400: rgba(0, 0, 0, .4) !default; +// $ouds-color-opacity-black-440: rgba(0, 0, 0, .44) !default; +// $ouds-color-opacity-black-480: rgba(0, 0, 0, .48) !default; +// $ouds-color-opacity-black-520: rgba(0, 0, 0, .52) !default; +// $ouds-color-opacity-black-560: rgba(0, 0, 0, .56) !default; +// $ouds-color-opacity-black-600: rgba(0, 0, 0, .6) !default; +// $ouds-color-opacity-black-640: rgba(0, 0, 0, .64) !default; +$ouds-color-opacity-black-680: rgba(0, 0, 0, .68) !default; +// $ouds-color-opacity-black-720: rgba(0, 0, 0, .72) !default; +// $ouds-color-opacity-black-760: rgba(0, 0, 0, .76) !default; +// $ouds-color-opacity-black-800: rgba(0, 0, 0, .8) !default; +$ouds-color-opacity-black-840: rgba(0, 0, 0, .84) !default; +// $ouds-color-opacity-black-880: rgba(0, 0, 0, .88) !default; +// $ouds-color-opacity-black-920: rgba(0, 0, 0, .92) !default; +// $ouds-color-opacity-black-960: rgba(0, 0, 0, .96) !default; +$ouds-color-opacity-dodger-blue: rgba(38, 178, 255, .08) !default; +$ouds-color-opacity-malachite: rgba(61, 227, 90, .12) !default; +$ouds-color-opacity-scarlet: rgba(234, 3, 5, .08) !default; +$ouds-color-opacity-sun: rgba(255, 208, 0, .16) !default; +$ouds-color-opacity-white-0: rgba(255, 255, 255, 0) !default; +$ouds-color-opacity-white-40: rgba(255, 255, 255, .04) !default; +$ouds-color-opacity-white-80: rgba(255, 255, 255, .08) !default; +// $ouds-color-opacity-white-120: rgba(255, 255, 255, .12) !default; +// $ouds-color-opacity-white-160: rgba(255, 255, 255, .16) !default; +$ouds-color-opacity-white-200: rgba(255, 255, 255, .2) !default; +// $ouds-color-opacity-white-240: rgba(255, 255, 255, .24) !default; +// $ouds-color-opacity-white-280: rgba(255, 255, 255, .28) !default; +// $ouds-color-opacity-white-320: rgba(255, 255, 255, .32) !default; +// $ouds-color-opacity-white-360: rgba(255, 255, 255, .36) !default; +// $ouds-color-opacity-white-400: rgba(255, 255, 255, .4) !default; +// $ouds-color-opacity-white-440: rgba(255, 255, 255, .44) !default; +// $ouds-color-opacity-white-480: rgba(255, 255, 255, .48) !default; +// $ouds-color-opacity-white-520: rgba(255, 255, 255, .52) !default; +// $ouds-color-opacity-white-560: rgba(255, 255, 255, .56) !default; +// $ouds-color-opacity-white-600: rgba(255, 255, 255, .6) !default; +$ouds-color-opacity-white-640: rgba(255, 255, 255, .64) !default; +// $ouds-color-opacity-white-680: rgba(255, 255, 255, .68) !default; +// $ouds-color-opacity-white-720: rgba(255, 255, 255, .72) !default; +// $ouds-color-opacity-white-760: rgba(255, 255, 255, .76) !default; +$ouds-color-opacity-white-800: rgba(255, 255, 255, .8) !default; +// $ouds-color-opacity-white-840: rgba(255, 255, 255, .84) !default; +// $ouds-color-opacity-white-880: rgba(255, 255, 255, .88) !default; +$ouds-color-opacity-white-920: rgba(255, 255, 255, .92) !default; +// $ouds-color-opacity-white-960: rgba(255, 255, 255, .96) !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-500: #ff7900 !default; -$ouds-color-orange-550: #f16e00 !default; +$ouds-color-orange-550: #f15e00 !default; // $ouds-color-orange-600: #e86e00 !default; // $ouds-color-orange-700: #b55600 !default; // $ouds-color-orange-800: #8c4300 !default; @@ -395,13 +430,28 @@ $ouds-grid-margin-2500: $ouds-dimension-base * 28 !default; // 112 // scss-docs-start ouds-raw-opacity $ouds-opacity-0: 0 !default; -$ouds-opacity-100: .04 !default; -// $ouds-opacity-200: .08 !default; -$ouds-opacity-300: .16 !default; -// $ouds-opacity-400: .24 !default; -$ouds-opacity-500: .32 !default; -// $ouds-opacity-600: .48 !default; -$ouds-opacity-700: .64 !default; +$ouds-opacity-40: .04 !default; +// $ouds-opacity-80: .08 !default; +// $ouds-opacity-120: .12 !default; +$ouds-opacity-160: .16 !default; +// $ouds-opacity-200: .2 !default; +// $ouds-opacity-240: .24 !default; +// $ouds-opacity-280: .28 !default; +$ouds-opacity-320: .32 !default; +// $ouds-opacity-360: .36 !default; +// $ouds-opacity-400: .4 !default; +// $ouds-opacity-440: .44 !default; +// $ouds-opacity-480: .48 !default; +// $ouds-opacity-520: .52 !default; +// $ouds-opacity-560: .56 !default; +// $ouds-opacity-600: .6 !default; +$ouds-opacity-640: .64 !default; +// $ouds-opacity-680: .68 !default; +// $ouds-opacity-720: .72 !default; +// $ouds-opacity-760: .76 !default; // $ouds-opacity-800: .8 !default; -$ouds-opacity-900: 1 !default; +// $ouds-opacity-880: .88 !default; +// $ouds-opacity-920: .92 !default; +// $ouds-opacity-960: .96 !default; +$ouds-opacity-1000: 1 !default; // scss-docs-end ouds-raw-opacity diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index cf15006283..e4e12dfe94 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -13,8 +13,8 @@ $ouds-border-radius-tall: $ouds-border-radius-300 !default; $ouds-border-style-default: $ouds-border-style-solid !default; $ouds-border-style-drag: $ouds-border-style-dashed !default; $ouds-border-width-default: $ouds-border-width-25 !default; -$ouds-border-width-focus: $ouds-border-width-50 !default; -$ouds-border-width-focus-inset: $ouds-border-width-100 !default; +$ouds-border-width-focus: $ouds-border-width-125 !default; +$ouds-border-width-focus-inset: $ouds-border-width-50 !default; $ouds-border-width-medium: $ouds-border-width-50 !default; $ouds-border-width-none: $ouds-border-width-0 !default; $ouds-border-width-thick: $ouds-border-width-75 !default; @@ -25,230 +25,106 @@ $ouds-border-width-thin: $ouds-border-width-25 !default; // Color // scss-docs-start ouds-semantic-color -$ouds-color-transparent-default-light: $ouds-color-transparent-black-0 !default; -$ouds-color-transparent-default-dark: $ouds-color-transparent-black-0 !default; -$ouds-color-action-disabled-light: $ouds-color-functional-light-gray-400 !default; -$ouds-color-action-disabled-on-bg-emphasized-light: $ouds-color-functional-dark-gray-400 !default; +$ouds-color-opacity-invisible-black-light: $ouds-color-opacity-black-0 !default; +$ouds-color-opacity-invisible-white-light: $ouds-color-opacity-white-0 !default; +$ouds-color-opacity-invisible-black-dark: $ouds-color-opacity-white-0 !default; +$ouds-color-opacity-invisible-white-dark: $ouds-color-opacity-white-0 !default; +$ouds-color-action-disabled-light: $ouds-color-opacity-black-200 !default; +$ouds-color-action-enabled-light: $ouds-color-functional-black !default; +$ouds-color-action-focus-light: $ouds-color-opacity-black-680 !default; +$ouds-color-action-highlighted-light: $ouds-color-functional-black !default; +$ouds-color-action-hover-light: $ouds-color-opacity-black-680 !default; +$ouds-color-action-loading-light: $ouds-color-orange-550 !default; $ouds-color-action-negative-enabled-light: $ouds-color-functional-scarlet-600 !default; $ouds-color-action-negative-focus-light: $ouds-color-functional-scarlet-700 !default; $ouds-color-action-negative-hover-light: $ouds-color-functional-scarlet-700 !default; $ouds-color-action-negative-loading-light: $ouds-color-functional-scarlet-800 !default; $ouds-color-action-negative-pressed-light: $ouds-color-functional-scarlet-800 !default; -$ouds-color-action-negative-enabled-dark: $ouds-color-functional-scarlet-600 !default; -$ouds-color-action-negative-focus-dark: $ouds-color-functional-scarlet-700 !default; -$ouds-color-action-negative-hover-dark: $ouds-color-functional-scarlet-700 !default; -$ouds-color-action-negative-loading-dark: $ouds-color-functional-scarlet-800 !default; -$ouds-color-action-negative-pressed-dark: $ouds-color-functional-scarlet-800 !default; -$ouds-color-action-primary-enabled-light: $ouds-color-functional-black !default; -$ouds-color-action-primary-enabled-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-action-primary-focus-light: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-action-primary-focus-on-bg-emphasized-light: $ouds-color-functional-light-gray-560 !default; -$ouds-color-action-primary-hover-light: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-action-primary-hover-on-bg-emphasized-light: $ouds-color-functional-light-gray-560 !default; -$ouds-color-action-primary-loading-light: $ouds-color-orange-550 !default; -$ouds-color-action-primary-loading-on-bg-emphasized-light: $ouds-color-orange-500 !default; -$ouds-color-action-primary-pressed-light: $ouds-color-orange-550 !default; -$ouds-color-action-primary-pressed-on-bg-emphasized-light: $ouds-color-orange-500 !default; -$ouds-color-action-primary-enabled-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-action-primary-enabled-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-action-primary-focus-dark: $ouds-color-functional-light-gray-560 !default; -$ouds-color-action-primary-focus-on-bg-emphasized-dark: $ouds-color-functional-light-gray-560 !default; -$ouds-color-action-primary-hover-dark: $ouds-color-functional-light-gray-560 !default; -$ouds-color-action-primary-hover-on-bg-emphasized-dark: $ouds-color-functional-light-gray-560 !default; -$ouds-color-action-primary-loading-dark: $ouds-color-orange-500 !default; -$ouds-color-action-primary-loading-on-bg-emphasized-dark: $ouds-color-orange-500 !default; -$ouds-color-action-primary-pressed-dark: $ouds-color-orange-500 !default; -$ouds-color-action-primary-pressed-on-bg-emphasized-dark: $ouds-color-orange-500 !default; -$ouds-color-action-secondary-enabled-light: $ouds-color-functional-light-gray-80 !default; -$ouds-color-action-secondary-enabled-on-bg-emphasized-light: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-action-secondary-focus-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-action-secondary-focus-on-bg-emphasized-light: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-hover-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-action-secondary-hover-on-bg-emphasized-light: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-loading-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-action-secondary-loading-on-bg-emphasized-light: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-pressed-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-action-secondary-pressed-on-bg-emphasized-light: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-enabled-dark: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-action-secondary-enabled-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-action-secondary-focus-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-focus-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-hover-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-hover-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-loading-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-loading-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-pressed-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-action-secondary-pressed-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-640 !default; +$ouds-color-action-negative-enabled-dark: $ouds-color-functional-scarlet-300 !default; +$ouds-color-action-negative-focus-dark: $ouds-color-functional-scarlet-200 !default; +$ouds-color-action-negative-hover-dark: $ouds-color-functional-scarlet-200 !default; +$ouds-color-action-negative-loading-dark: $ouds-color-functional-scarlet-100 !default; +$ouds-color-action-negative-pressed-dark: $ouds-color-functional-scarlet-100 !default; +$ouds-color-action-pressed-light: $ouds-color-orange-550 !default; $ouds-color-action-selected-light: $ouds-color-orange-550 !default; -$ouds-color-action-selected-on-bg-emphasized-light: $ouds-color-orange-500 !default; +$ouds-color-action-support-enabled-light: $ouds-color-opacity-black-40 !default; +$ouds-color-action-support-focus-light: $ouds-color-opacity-black-80 !default; +$ouds-color-action-support-hover-light: $ouds-color-opacity-black-80 !default; +$ouds-color-action-support-loading-light: $ouds-color-opacity-black-80 !default; +$ouds-color-action-support-pressed-light: $ouds-color-opacity-black-80 !default; +$ouds-color-action-support-enabled-dark: $ouds-color-opacity-white-40 !default; +$ouds-color-action-support-focus-dark: $ouds-color-opacity-white-80 !default; +$ouds-color-action-support-hover-dark: $ouds-color-opacity-white-80 !default; +$ouds-color-action-support-loading-dark: $ouds-color-opacity-white-80 !default; +$ouds-color-action-support-pressed-dark: $ouds-color-opacity-white-80 !default; $ouds-color-action-visited-light: $ouds-color-decorative-amethyst-600 !default; -$ouds-color-action-visited-on-bg-emphasized-light: $ouds-color-decorative-amethyst-400 !default; -$ouds-color-action-disabled-dark: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-action-disabled-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-400 !default; +$ouds-color-action-disabled-dark: $ouds-color-opacity-white-200 !default; +$ouds-color-action-enabled-dark: $ouds-color-functional-light-gray-160 !default; +$ouds-color-action-focus-dark: $ouds-color-opacity-white-640 !default; +$ouds-color-action-highlighted-dark: $ouds-color-functional-light-gray-160 !default; +$ouds-color-action-hover-dark: $ouds-color-opacity-white-640 !default; +$ouds-color-action-loading-dark: $ouds-color-orange-500 !default; +$ouds-color-action-pressed-dark: $ouds-color-orange-500 !default; $ouds-color-action-selected-dark: $ouds-color-orange-500 !default; -$ouds-color-action-selected-on-bg-emphasized-dark: $ouds-color-orange-500 !default; $ouds-color-action-visited-dark: $ouds-color-decorative-amethyst-400 !default; -$ouds-color-action-visited-on-bg-emphasized-dark: $ouds-color-decorative-amethyst-400 !default; -$ouds-color-always-accent-light: $ouds-color-functional-sun-500 !default; $ouds-color-always-black-light: $ouds-color-functional-black !default; -$ouds-color-always-info-light: $ouds-color-functional-dodger-blue-500 !default; -$ouds-color-always-negative-light: $ouds-color-functional-scarlet-600 !default; -$ouds-color-always-on-accent-light: $ouds-color-functional-black !default; $ouds-color-always-on-black-light: $ouds-color-functional-white !default; -$ouds-color-always-on-info-light: $ouds-color-functional-black !default; -$ouds-color-always-on-negative-light: $ouds-color-functional-white !default; -$ouds-color-always-on-positive-light: $ouds-color-functional-black !default; -$ouds-color-always-on-warning-light: $ouds-color-functional-black !default; $ouds-color-always-on-white-light: $ouds-color-functional-black !default; -$ouds-color-always-positive-light: $ouds-color-functional-malachite-500 !default; -$ouds-color-always-warning-light: $ouds-color-functional-sun-500 !default; $ouds-color-always-white-light: $ouds-color-functional-white !default; -$ouds-color-always-accent-dark: $ouds-color-functional-sun-500 !default; $ouds-color-always-black-dark: $ouds-color-functional-black !default; -$ouds-color-always-info-dark: $ouds-color-functional-dodger-blue-500 !default; -$ouds-color-always-negative-dark: $ouds-color-functional-scarlet-600 !default; -$ouds-color-always-on-accent-dark: $ouds-color-functional-dark-gray-880 !default; $ouds-color-always-on-black-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-always-on-info-dark: $ouds-color-functional-dark-gray-880 !default; -$ouds-color-always-on-negative-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-always-on-positive-dark: $ouds-color-functional-dark-gray-880 !default; -$ouds-color-always-on-warning-dark: $ouds-color-functional-dark-gray-880 !default; -$ouds-color-always-on-white-dark: $ouds-color-functional-dark-gray-880 !default; -$ouds-color-always-positive-dark: $ouds-color-functional-malachite-500 !default; -$ouds-color-always-warning-dark: $ouds-color-functional-sun-500 !default; +$ouds-color-always-on-white-dark: $ouds-color-functional-black !default; $ouds-color-always-white-dark: $ouds-color-functional-white !default; -$ouds-color-bg-brand-primary-light: $ouds-color-orange-550 !default; $ouds-color-bg-emphasized-light: $ouds-color-functional-dark-gray-880 !default; $ouds-color-bg-primary-light: $ouds-color-functional-white !default; $ouds-color-bg-secondary-light: $ouds-color-functional-light-gray-80 !default; -$ouds-color-bg-status-accent-emphasized-light: $ouds-color-functional-sun-500 !default; -$ouds-color-bg-status-accent-muted-light: $ouds-color-warm-gray-100 !default; -$ouds-color-bg-status-accent-muted-on-bg-emphasized-light: $ouds-color-warm-gray-900 !default; -$ouds-color-bg-status-info-emphasized-light: $ouds-color-functional-dodger-blue-500 !default; -$ouds-color-bg-status-info-muted-light: $ouds-color-functional-dodger-blue-100 !default; -$ouds-color-bg-status-info-muted-on-bg-emphasized-light: $ouds-color-functional-dodger-blue-900 !default; -$ouds-color-bg-status-negative-emphasized-light: $ouds-color-functional-scarlet-600 !default; -$ouds-color-bg-status-negative-muted-light: $ouds-color-functional-scarlet-100 !default; -$ouds-color-bg-status-negative-muted-on-bg-emphasized-light: $ouds-color-functional-scarlet-900 !default; -$ouds-color-bg-status-neutral-light: $ouds-color-functional-light-gray-80 !default; -$ouds-color-bg-status-neutral-on-bg-emphasized-light: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-bg-status-positive-emphasized-light: $ouds-color-functional-malachite-500 !default; -$ouds-color-bg-status-positive-muted-light: $ouds-color-functional-malachite-100 !default; -$ouds-color-bg-status-positive-muted-on-bg-emphasized-light: $ouds-color-functional-malachite-900 !default; -$ouds-color-bg-status-warning-emphasized-light: $ouds-color-functional-sun-500 !default; -$ouds-color-bg-status-warning-muted-light: $ouds-color-functional-sun-100 !default; -$ouds-color-bg-status-warning-muted-on-bg-emphasized-light: $ouds-color-functional-sun-900 !default; -$ouds-color-bg-status-accent-emphasized-dark: $ouds-color-functional-sun-500 !default; -$ouds-color-bg-status-accent-muted-dark: $ouds-color-warm-gray-900 !default; -$ouds-color-bg-status-accent-muted-on-bg-emphasized-dark: $ouds-color-warm-gray-900 !default; -$ouds-color-bg-status-info-emphasized-dark: $ouds-color-functional-dodger-blue-500 !default; -$ouds-color-bg-status-info-muted-dark: $ouds-color-functional-dodger-blue-900 !default; -$ouds-color-bg-status-info-muted-on-bg-emphasized-dark: $ouds-color-functional-dodger-blue-900 !default; -$ouds-color-bg-status-negative-emphasized-dark: $ouds-color-functional-scarlet-600 !default; -$ouds-color-bg-status-negative-muted-dark: $ouds-color-functional-scarlet-900 !default; -$ouds-color-bg-status-negative-muted-on-bg-emphasized-dark: $ouds-color-functional-scarlet-900 !default; -$ouds-color-bg-status-neutral-dark: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-bg-status-neutral-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-bg-status-positive-emphasized-dark: $ouds-color-functional-malachite-500 !default; -$ouds-color-bg-status-positive-muted-dark: $ouds-color-functional-malachite-900 !default; -$ouds-color-bg-status-positive-muted-on-bg-emphasized-dark: $ouds-color-functional-malachite-900 !default; -$ouds-color-bg-status-warning-emphasized-dark: $ouds-color-functional-sun-500 !default; -$ouds-color-bg-status-warning-muted-dark: $ouds-color-functional-sun-900 !default; -$ouds-color-bg-status-warning-muted-on-bg-emphasized-dark: $ouds-color-functional-sun-900 !default; $ouds-color-bg-tertiary-light: $ouds-color-warm-gray-100 !default; -$ouds-color-bg-brand-primary-dark: $ouds-color-orange-500 !default; $ouds-color-bg-emphasized-dark: $ouds-color-functional-dark-gray-640 !default; $ouds-color-bg-primary-dark: $ouds-color-functional-dark-gray-880 !default; $ouds-color-bg-secondary-dark: $ouds-color-functional-dark-gray-800 !default; $ouds-color-bg-tertiary-dark: $ouds-color-warm-gray-900 !default; $ouds-color-border-brand-primary-light: $ouds-color-orange-550 !default; -$ouds-color-border-brand-primary-on-bg-emphasized-light: $ouds-color-orange-500 !default; -$ouds-color-border-default-light: $ouds-color-functional-light-gray-400 !default; -$ouds-color-border-default-on-bg-emphasized-light: $ouds-color-functional-dark-gray-400 !default; +$ouds-color-border-default-light: $ouds-color-opacity-black-200 !default; $ouds-color-border-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-border-emphasized-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; $ouds-color-border-focus-light: $ouds-color-functional-black !default; $ouds-color-border-focus-inset-light: $ouds-color-functional-white !default; -$ouds-color-border-focus-inset-on-bg-emphasized-light: $ouds-color-functional-dark-gray-880 !default; -$ouds-color-border-focus-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-border-on-brand-primary-light: $ouds-color-functional-white !default; +$ouds-color-border-on-brand-primary-light: $ouds-color-functional-black !default; $ouds-color-border-on-brand-primary-dark: $ouds-color-functional-black !default; $ouds-color-border-brand-primary-dark: $ouds-color-orange-500 !default; -$ouds-color-border-brand-primary-on-bg-emphasized-dark: $ouds-color-orange-500 !default; -$ouds-color-border-default-dark: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-border-default-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-border-emphasized-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-border-emphasized-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; +$ouds-color-border-default-dark: $ouds-color-opacity-white-200 !default; +$ouds-color-border-emphasized-dark: $ouds-color-opacity-white-920 !default; $ouds-color-border-focus-dark: $ouds-color-functional-light-gray-160 !default; $ouds-color-border-focus-inset-dark: $ouds-color-functional-dark-gray-880 !default; -$ouds-color-border-focus-inset-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-border-focus-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-880 !default; $ouds-color-content-brand-primary-light: $ouds-color-orange-550 !default; -$ouds-color-content-brand-primary-on-bg-emphasized-light: $ouds-color-orange-500 !default; $ouds-color-content-default-light: $ouds-color-functional-black !default; -$ouds-color-content-default-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-disabled-light: $ouds-color-functional-light-gray-400 !default; -$ouds-color-content-disabled-on-bg-emphasized-light: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-content-muted-light: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-content-muted-on-bg-emphasized-light: $ouds-color-functional-light-gray-560 !default; +$ouds-color-content-disabled-light: $ouds-color-opacity-black-200 !default; +$ouds-color-content-muted-light: $ouds-color-opacity-black-680 !default; $ouds-color-content-on-action-disabled-light: $ouds-color-functional-white !default; -$ouds-color-content-on-action-disabled-on-bg-emphasized-light: $ouds-color-functional-black !default; +$ouds-color-content-on-action-enabled-light: $ouds-color-functional-white !default; +$ouds-color-content-on-action-focus-light: $ouds-color-functional-white !default; +$ouds-color-content-on-action-highlighted-light: $ouds-color-functional-white !default; +$ouds-color-content-on-action-hover-light: $ouds-color-functional-white !default; +$ouds-color-content-on-action-loading-light: $ouds-color-functional-white !default; $ouds-color-content-on-action-negative-light: $ouds-color-functional-white !default; -$ouds-color-content-on-action-primary-enabled-light: $ouds-color-functional-white !default; -$ouds-color-content-on-action-primary-enabled-on-bg-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-focus-light: $ouds-color-functional-white !default; -$ouds-color-content-on-action-primary-focus-on-bg-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-hover-light: $ouds-color-functional-white !default; -$ouds-color-content-on-action-primary-hover-on-bg-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-loading-light: $ouds-color-functional-white !default; -$ouds-color-content-on-action-primary-loading-on-bg-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-pressed-light: $ouds-color-functional-white !default; -$ouds-color-content-on-action-primary-pressed-on-bg-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-enabled-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-enabled-on-bg-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-focus-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-focus-on-bg-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-hover-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-hover-on-bg-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-loading-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-loading-on-bg-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-pressed-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-primary-pressed-on-bg-emphasized-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-action-pressed-light: $ouds-color-functional-white !default; $ouds-color-content-on-action-disabled-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-disabled-on-bg-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-action-negative-dark: $ouds-color-functional-white !default; -$ouds-color-content-on-brand-primary-light: $ouds-color-functional-white !default; +$ouds-color-content-on-action-enabled-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-action-focus-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-action-highlighted-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-action-hover-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-action-loading-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-action-negative-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-action-pressed-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-brand-primary-light: $ouds-color-functional-black !default; $ouds-color-content-on-brand-primary-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-status-accent-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-accent-muted-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-accent-muted-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-info-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-info-muted-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-info-muted-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-negative-emphasized-light: $ouds-color-functional-white !default; -$ouds-color-content-on-status-negative-muted-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-negative-muted-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-positive-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-positive-muted-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-positive-muted-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-warning-emphasized-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-warning-muted-light: $ouds-color-functional-black !default; -$ouds-color-content-on-status-warning-muted-on-bg-emphasized-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-accent-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-status-accent-muted-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-accent-muted-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-info-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-status-info-muted-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-info-muted-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-negative-emphasized-dark: $ouds-color-functional-white !default; -$ouds-color-content-on-status-negative-muted-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-negative-muted-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-positive-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-status-positive-muted-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-positive-muted-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-warning-emphasized-dark: $ouds-color-functional-black !default; -$ouds-color-content-on-status-warning-muted-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-on-status-warning-muted-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; +$ouds-color-content-on-overlay-emphasized-light: $ouds-color-functional-white !default; +$ouds-color-content-on-overlay-emphasized-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-status-emphasized-light: $ouds-color-functional-black !default; +$ouds-color-content-on-status-emphasized-neutral-light: $ouds-color-functional-white !default; +$ouds-color-content-on-status-muted-light: $ouds-color-functional-black !default; +$ouds-color-content-on-status-emphasized-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-status-emphasized-neutral-dark: $ouds-color-functional-black !default; +$ouds-color-content-on-status-muted-dark: $ouds-color-functional-light-gray-160 !default; $ouds-color-content-status-info-light: $ouds-color-functional-dodger-blue-500 !default; $ouds-color-content-status-negative-light: $ouds-color-functional-scarlet-600 !default; $ouds-color-content-status-positive-light: $ouds-color-functional-malachite-500 !default; @@ -258,47 +134,43 @@ $ouds-color-content-status-negative-dark: $ouds-color-functional-scarlet-600 !de $ouds-color-content-status-positive-dark: $ouds-color-functional-malachite-500 !default; $ouds-color-content-status-warning-dark: $ouds-color-functional-sun-500 !default; $ouds-color-content-brand-primary-dark: $ouds-color-orange-500 !default; -$ouds-color-content-brand-primary-on-bg-emphasized-dark: $ouds-color-orange-500 !default; $ouds-color-content-default-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-default-on-bg-emphasized-dark: $ouds-color-functional-light-gray-160 !default; -$ouds-color-content-disabled-dark: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-content-disabled-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-content-muted-dark: $ouds-color-functional-light-gray-560 !default; -$ouds-color-content-muted-on-bg-emphasized-dark: $ouds-color-functional-light-gray-560 !default; -$ouds-color-elevation-drag-light: $ouds-color-functional-light-gray-80 !default; -$ouds-color-elevation-drag-on-bg-emphasized-light: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-elevation-drag-on-bg-secondary-light: $ouds-color-functional-light-gray-80 !default; -$ouds-color-elevation-modal-light: $ouds-color-functional-white !default; -$ouds-color-elevation-overlay-default-light: $ouds-color-functional-white !default; -$ouds-color-elevation-overlay-default-on-bg-emphasized-light: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-elevation-overlay-default-on-bg-secondary-light: $ouds-color-functional-white !default; -$ouds-color-elevation-overlay-emphasized-light: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-elevation-overlay-emphasized-on-bg-emphasized-light: $ouds-color-functional-light-gray-80 !default; -$ouds-color-elevation-overlay-emphasized-on-bg-secondary-light: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-elevation-raised-light: $ouds-color-functional-white !default; -$ouds-color-elevation-raised-on-bg-emphasized-light: $ouds-color-functional-dark-gray-800 !default; -$ouds-color-elevation-raised-on-bg-secondary-light: $ouds-color-functional-white !default; -$ouds-color-elevation-drag-dark: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-elevation-drag-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-480 !default; -$ouds-color-elevation-drag-on-bg-secondary-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-elevation-modal-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-elevation-overlay-default-dark: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-elevation-overlay-default-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-480 !default; -$ouds-color-elevation-overlay-default-on-bg-secondary-dark: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-elevation-overlay-emphasized-dark: $ouds-color-functional-dark-gray-480 !default; -$ouds-color-elevation-overlay-emphasized-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-400 !default; -$ouds-color-elevation-overlay-emphasized-on-bg-secondary-dark: $ouds-color-functional-dark-gray-480 !default; -$ouds-color-elevation-raised-dark: $ouds-color-functional-dark-gray-800 !default; -$ouds-color-elevation-raised-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-560 !default; -$ouds-color-elevation-raised-on-bg-secondary-dark: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-gradient-skeleton-middle-light: $ouds-color-functional-light-gray-160 !default; -$ouds-color-gradient-skeleton-middle-on-bg-emphasized-light: $ouds-color-functional-dark-gray-640 !default; -$ouds-color-gradient-skeleton-start-end-light: $ouds-color-functional-light-gray-80 !default; -$ouds-color-gradient-skeleton-start-end-on-bg-emphasized-light: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-gradient-skeleton-middle-dark: $ouds-color-functional-dark-gray-720 !default; -$ouds-color-gradient-skeleton-middle-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-480 !default; -$ouds-color-gradient-skeleton-start-end-dark: $ouds-color-functional-dark-gray-800 !default; -$ouds-color-gradient-skeleton-start-end-on-bg-emphasized-dark: $ouds-color-functional-dark-gray-560 !default; +$ouds-color-content-disabled-dark: $ouds-color-opacity-white-200 !default; +$ouds-color-content-muted-dark: $ouds-color-opacity-white-640 !default; +$ouds-color-overlay-default-light: $ouds-color-functional-white !default; +$ouds-color-overlay-drag-light: $ouds-color-opacity-black-40 !default; +$ouds-color-overlay-emphasized-light: $ouds-color-functional-dark-gray-720 !default; +$ouds-color-overlay-modal-light: $ouds-color-functional-white !default; +$ouds-color-overlay-default-dark: $ouds-color-opacity-white-80 !default; +$ouds-color-overlay-drag-dark: $ouds-color-opacity-white-200 !default; +$ouds-color-overlay-emphasized-dark: $ouds-color-functional-light-gray-160 !default; +$ouds-color-overlay-modal-dark: $ouds-color-functional-dark-gray-640 !default; +$ouds-color-surface-brand-primary-light: $ouds-color-orange-500 !default; +$ouds-color-surface-brand-primary-dark: $ouds-color-orange-500 !default; +$ouds-color-surface-status-accent-emphasized-light: $ouds-color-functional-sun-500 !default; +$ouds-color-surface-status-accent-muted-light: $ouds-color-opacity-sun !default; +$ouds-color-surface-status-accent-emphasized-dark: $ouds-color-functional-sun-300 !default; +$ouds-color-surface-status-accent-muted-dark: $ouds-color-warm-gray-900 !default; +$ouds-color-surface-status-info-emphasized-light: $ouds-color-functional-dodger-blue-500 !default; +$ouds-color-surface-status-info-muted-light: $ouds-color-opacity-dodger-blue !default; +$ouds-color-surface-status-info-emphasized-dark: $ouds-color-functional-dodger-blue-300 !default; +$ouds-color-surface-status-info-muted-dark: $ouds-color-functional-dodger-blue-900 !default; +$ouds-color-surface-status-negative-emphasized-light: $ouds-color-functional-scarlet-600 !default; +$ouds-color-surface-status-negative-muted-light: $ouds-color-opacity-scarlet !default; +$ouds-color-surface-status-negative-emphasized-dark: $ouds-color-functional-scarlet-300 !default; +$ouds-color-surface-status-negative-muted-dark: $ouds-color-functional-scarlet-900 !default; +$ouds-color-surface-status-neutral-emphasized-light: $ouds-color-opacity-black-840 !default; +$ouds-color-surface-status-neutral-muted-light: $ouds-color-opacity-black-40 !default; +$ouds-color-surface-status-neutral-emphasized-dark: $ouds-color-opacity-white-800 !default; +$ouds-color-surface-status-neutral-muted-dark: $ouds-color-opacity-white-80 !default; +$ouds-color-surface-status-positive-emphasized-light: $ouds-color-functional-malachite-500 !default; +$ouds-color-surface-status-positive-muted-light: $ouds-color-opacity-malachite !default; +$ouds-color-surface-status-positive-emphasized-dark: $ouds-color-functional-malachite-300 !default; +$ouds-color-surface-status-positive-muted-dark: $ouds-color-functional-malachite-900 !default; +$ouds-color-surface-status-warning-emphasized-light: $ouds-color-functional-sun-500 !default; +$ouds-color-surface-status-warning-muted-light: $ouds-color-opacity-sun !default; +$ouds-color-surface-status-warning-emphasized-dark: $ouds-color-functional-sun-300 !default; +$ouds-color-surface-status-warning-muted-dark: $ouds-color-functional-sun-900 !default; $ouds-color-decorative-accent-1-default-light: $ouds-color-decorative-emerald-500 !default; $ouds-color-decorative-accent-1-emphasized-light: $ouds-color-decorative-emerald-700 !default; $ouds-color-decorative-accent-1-muted-light: $ouds-color-decorative-emerald-200 !default; @@ -394,54 +266,54 @@ $ouds-dimension-xs: $ouds-dimension-400 !default; // Elevation // scss-docs-start ouds-semantic-elevation +$ouds-elevation-blur-default: $ouds-elevation-blur-300 !default; $ouds-elevation-blur-drag: $ouds-elevation-blur-400 !default; +$ouds-elevation-blur-emphasized: $ouds-elevation-blur-600 !default; $ouds-elevation-blur-none: $ouds-elevation-blur-0 !default; -$ouds-elevation-blur-overlay-default: $ouds-elevation-blur-300 !default; -$ouds-elevation-blur-overlay-emphasized: $ouds-elevation-blur-600 !default; $ouds-elevation-blur-raised: $ouds-elevation-blur-200 !default; $ouds-elevation-blur-sticky-default: $ouds-elevation-blur-400 !default; $ouds-elevation-blur-sticky-emphasized: $ouds-elevation-blur-400 !default; $ouds-elevation-blur-sticky-navigation-scrolled: $ouds-elevation-blur-400 !default; +$ouds-elevation-spread-default: $ouds-elevation-spread-n100 !default; $ouds-elevation-spread-drag: $ouds-elevation-spread-n100 !default; +$ouds-elevation-spread-emphasized: $ouds-elevation-spread-n300 !default; $ouds-elevation-spread-none: $ouds-elevation-spread-0 !default; -$ouds-elevation-spread-overlay-default: $ouds-elevation-spread-n100 !default; -$ouds-elevation-spread-overlay-emphasized: $ouds-elevation-spread-n300 !default; $ouds-elevation-spread-raised: $ouds-elevation-spread-0 !default; $ouds-elevation-spread-sticky-default: $ouds-elevation-spread-n100 !default; $ouds-elevation-spread-sticky-emphasized: $ouds-elevation-spread-n100 !default; $ouds-elevation-spread-sticky-navigation-scrolled: $ouds-elevation-spread-n100 !default; +$ouds-elevation-x-default: $ouds-elevation-x-0 !default; $ouds-elevation-x-drag: $ouds-elevation-x-0 !default; +$ouds-elevation-x-emphasized: $ouds-elevation-x-0 !default; $ouds-elevation-x-none: $ouds-elevation-x-0 !default; -$ouds-elevation-x-overlay-default: $ouds-elevation-x-0 !default; -$ouds-elevation-x-overlay-emphasized: $ouds-elevation-x-0 !default; $ouds-elevation-x-raised: $ouds-elevation-x-0 !default; $ouds-elevation-x-sticky-default: $ouds-elevation-x-0 !default; $ouds-elevation-x-sticky-emphasized: $ouds-elevation-x-0 !default; $ouds-elevation-x-sticky-navigation-scrolled: $ouds-elevation-x-0 !default; +$ouds-elevation-y-default: $ouds-elevation-y-200 !default; $ouds-elevation-y-drag: $ouds-elevation-y-300 !default; +$ouds-elevation-y-emphasized: $ouds-elevation-y-500 !default; $ouds-elevation-y-none: $ouds-elevation-y-0 !default; -$ouds-elevation-y-overlay-default: $ouds-elevation-y-200 !default; -$ouds-elevation-y-overlay-emphasized: $ouds-elevation-y-500 !default; $ouds-elevation-y-raised: $ouds-elevation-y-100 !default; $ouds-elevation-y-sticky-default: $ouds-elevation-y-300 !default; $ouds-elevation-y-sticky-emphasized: $ouds-elevation-y-300 !default; $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default; -$ouds-elevation-color-drag-light: $ouds-color-transparent-black-500 !default; -$ouds-elevation-color-none-light: $ouds-color-transparent-black-0 !default; -$ouds-elevation-color-overlay-default-light: $ouds-color-transparent-black-400 !default; -$ouds-elevation-color-overlay-emphasized-light: $ouds-color-transparent-black-300 !default; -$ouds-elevation-color-raised-light: $ouds-color-transparent-black-500 !default; -$ouds-elevation-color-sticky-default-light: $ouds-color-transparent-black-300 !default; -$ouds-elevation-color-sticky-emphasized-light: $ouds-color-transparent-black-300 !default; -$ouds-elevation-color-sticky-navigation-scrolled-light: $ouds-color-transparent-black-300 !default; -$ouds-elevation-color-drag-dark: $ouds-color-transparent-black-500 !default; -$ouds-elevation-color-none-dark: $ouds-color-transparent-black-0 !default; -$ouds-elevation-color-overlay-default-dark: $ouds-color-transparent-black-400 !default; -$ouds-elevation-color-overlay-emphasized-dark: $ouds-color-transparent-black-300 !default; -$ouds-elevation-color-raised-dark: $ouds-color-transparent-black-500 !default; -$ouds-elevation-color-sticky-default-dark: $ouds-color-transparent-black-300 !default; -$ouds-elevation-color-sticky-emphasized-dark: $ouds-color-transparent-black-300 !default; -$ouds-elevation-color-sticky-navigation-scrolled-dark: $ouds-color-transparent-black-300 !default; +$ouds-elevation-color-default-light: $ouds-color-opacity-black-240 !default; +$ouds-elevation-color-drag-light: $ouds-color-opacity-black-320 !default; +$ouds-elevation-color-emphasized-light: $ouds-color-opacity-black-160 !default; +$ouds-elevation-color-none-light: $ouds-color-opacity-black-0 !default; +$ouds-elevation-color-raised-light: $ouds-color-opacity-black-320 !default; +$ouds-elevation-color-sticky-default-light: $ouds-color-opacity-black-160 !default; +$ouds-elevation-color-sticky-emphasized-light: $ouds-color-opacity-black-160 !default; +$ouds-elevation-color-sticky-navigation-scrolled-light: $ouds-color-opacity-black-160 !default; +$ouds-elevation-color-default-dark: $ouds-color-opacity-black-240 !default; +$ouds-elevation-color-drag-dark: $ouds-color-opacity-black-320 !default; +$ouds-elevation-color-emphasized-dark: $ouds-color-opacity-black-160 !default; +$ouds-elevation-color-none-dark: $ouds-color-opacity-black-0 !default; +$ouds-elevation-color-raised-dark: $ouds-color-opacity-black-320 !default; +$ouds-elevation-color-sticky-default-dark: $ouds-color-opacity-black-160 !default; +$ouds-elevation-color-sticky-emphasized-dark: $ouds-color-opacity-black-160 !default; +$ouds-elevation-color-sticky-navigation-scrolled-dark: $ouds-color-opacity-black-160 !default; // scss-docs-end ouds-semantic-elevation // Font @@ -458,7 +330,6 @@ $ouds-font-letter-spacing-body-small-desktop: $ouds-font-letter-spacing-200 !def $ouds-font-letter-spacing-body-small-mobile: $ouds-font-letter-spacing-150 !default; $ouds-font-letter-spacing-body-small-tablet: $ouds-font-letter-spacing-150 !default; $ouds-font-letter-spacing-code-medium: $ouds-font-letter-spacing-200 !default; -$ouds-font-letter-spacing-code-small: $ouds-font-letter-spacing-150 !default; $ouds-font-letter-spacing-display-large-desktop: $ouds-font-letter-spacing-1850 !default; $ouds-font-letter-spacing-display-large-mobile: $ouds-font-letter-spacing-850 !default; $ouds-font-letter-spacing-display-large-tablet: $ouds-font-letter-spacing-1450 !default; @@ -494,7 +365,6 @@ $ouds-font-line-height-body-small-desktop: $ouds-font-line-height-350 !default; $ouds-font-line-height-body-small-mobile: $ouds-font-line-height-250 !default; $ouds-font-line-height-body-small-tablet: $ouds-font-line-height-250 !default; $ouds-font-line-height-code-medium: $ouds-font-line-height-350 !default; -$ouds-font-line-height-code-small: $ouds-font-line-height-250 !default; $ouds-font-line-height-display-large-desktop: $ouds-font-line-height-2050 !default; $ouds-font-line-height-display-large-mobile: $ouds-font-line-height-1050 !default; $ouds-font-line-height-display-large-tablet: $ouds-font-line-height-1850 !default; @@ -530,7 +400,6 @@ $ouds-font-size-body-small-desktop: $ouds-font-size-200 !default; $ouds-font-size-body-small-mobile: $ouds-font-size-150 !default; $ouds-font-size-body-small-tablet: $ouds-font-size-150 !default; $ouds-font-size-code-medium: $ouds-font-size-200 !default; -$ouds-font-size-code-small: $ouds-font-size-150 !default; $ouds-font-size-display-large-desktop: $ouds-font-size-1850 !default; $ouds-font-size-display-large-mobile: $ouds-font-size-850 !default; $ouds-font-size-display-large-tablet: $ouds-font-size-1450 !default; @@ -622,87 +491,87 @@ $ouds-grid-xs-width: $ouds-grid-width-200 !default; // Opacity // scss-docs-start ouds-semantic-opacity -$ouds-opacity-medium: $ouds-opacity-500 !default; -$ouds-opacity-opaque: $ouds-opacity-900 !default; -$ouds-opacity-strong: $ouds-opacity-700 !default; -$ouds-opacity-transparent: $ouds-opacity-0 !default; -$ouds-opacity-weak: $ouds-opacity-300 !default; -$ouds-opacity-weaker: $ouds-opacity-100 !default; +$ouds-opacity-invisible: $ouds-opacity-0 !default; +$ouds-opacity-medium: $ouds-opacity-320 !default; +$ouds-opacity-opaque: $ouds-opacity-1000 !default; +$ouds-opacity-strong: $ouds-opacity-640 !default; +$ouds-opacity-weak: $ouds-opacity-160 !default; +$ouds-opacity-weaker: $ouds-opacity-40 !default; // scss-docs-end ouds-semantic-opacity // Size // scss-docs-start ouds-semantic-size -$ouds-size-icon-decorative-medium: $ouds-dimension-500 !default; -$ouds-size-icon-decorative-short: $ouds-dimension-400 !default; -$ouds-size-icon-decorative-shorter: $ouds-dimension-300 !default; -$ouds-size-icon-decorative-shortest: $ouds-dimension-200 !default; -$ouds-size-icon-decorative-tall: $ouds-dimension-600 !default; -$ouds-size-icon-decorative-taller: $ouds-dimension-700 !default; -$ouds-size-icon-decorative-tallest: $ouds-dimension-900 !default; -$ouds-size-icon-with-body-large-size-medium-desktop: $ouds-dimension-500 !default; -$ouds-size-icon-with-body-large-size-medium-mobile: $ouds-dimension-300 !default; -$ouds-size-icon-with-body-large-size-medium-tablet: $ouds-dimension-300 !default; -$ouds-size-icon-with-body-large-size-short-desktop: $ouds-dimension-400 !default; -$ouds-size-icon-with-body-large-size-short-mobile: $ouds-dimension-250 !default; -$ouds-size-icon-with-body-large-size-short-tablet: $ouds-dimension-250 !default; -$ouds-size-icon-with-body-large-size-tall-desktop: $ouds-dimension-550 !default; -$ouds-size-icon-with-body-large-size-tall-mobile: $ouds-dimension-350 !default; -$ouds-size-icon-with-body-large-size-tall-tablet: $ouds-dimension-350 !default; -$ouds-size-icon-with-body-medium-size-medium-desktop: $ouds-dimension-300 !default; -$ouds-size-icon-with-body-medium-size-medium-mobile: $ouds-dimension-250 !default; -$ouds-size-icon-with-body-medium-size-medium-tablet: $ouds-dimension-250 !default; -$ouds-size-icon-with-body-medium-size-short-desktop: $ouds-dimension-250 !default; -$ouds-size-icon-with-body-medium-size-short-mobile: $ouds-dimension-200 !default; -$ouds-size-icon-with-body-medium-size-short-tablet: $ouds-dimension-200 !default; -$ouds-size-icon-with-body-medium-size-tall-desktop: $ouds-dimension-350 !default; -$ouds-size-icon-with-body-medium-size-tall-mobile: $ouds-dimension-300 !default; -$ouds-size-icon-with-body-medium-size-tall-tablet: $ouds-dimension-300 !default; -$ouds-size-icon-with-body-small-size-medium-desktop: $ouds-dimension-250 !default; -$ouds-size-icon-with-body-small-size-medium-mobile: $ouds-dimension-200 !default; -$ouds-size-icon-with-body-small-size-medium-tablet: $ouds-dimension-200 !default; -$ouds-size-icon-with-body-small-size-short-desktop: $ouds-dimension-200 !default; -$ouds-size-icon-with-body-small-size-short-mobile: $ouds-dimension-150 !default; -$ouds-size-icon-with-body-small-size-short-tablet: $ouds-dimension-150 !default; -$ouds-size-icon-with-body-small-size-tall-desktop: $ouds-dimension-300 !default; -$ouds-size-icon-with-body-small-size-tall-mobile: $ouds-dimension-250 !default; -$ouds-size-icon-with-body-small-size-tall-tablet: $ouds-dimension-250 !default; -$ouds-size-icon-with-heading-large-size-medium-desktop: $ouds-dimension-650 !default; -$ouds-size-icon-with-heading-large-size-medium-mobile: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-large-size-medium-tablet: $ouds-dimension-600 !default; -$ouds-size-icon-with-heading-large-size-short-desktop: $ouds-dimension-600 !default; -$ouds-size-icon-with-heading-large-size-short-mobile: $ouds-dimension-500 !default; -$ouds-size-icon-with-heading-large-size-short-tablet: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-large-size-tall-desktop: $ouds-dimension-700 !default; -$ouds-size-icon-with-heading-large-size-tall-mobile: $ouds-dimension-600 !default; -$ouds-size-icon-with-heading-large-size-tall-tablet: $ouds-dimension-650 !default; -$ouds-size-icon-with-heading-medium-size-medium-desktop: $ouds-dimension-600 !default; -$ouds-size-icon-with-heading-medium-size-medium-mobile: $ouds-dimension-500 !default; -$ouds-size-icon-with-heading-medium-size-medium-tablet: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-medium-size-short-desktop: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-medium-size-short-mobile: $ouds-dimension-400 !default; -$ouds-size-icon-with-heading-medium-size-short-tablet: $ouds-dimension-500 !default; -$ouds-size-icon-with-heading-medium-size-tall-desktop: $ouds-dimension-650 !default; -$ouds-size-icon-with-heading-medium-size-tall-mobile: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-medium-size-tall-tablet: $ouds-dimension-600 !default; -$ouds-size-icon-with-heading-small-size-medium-desktop: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-small-size-medium-mobile: $ouds-dimension-500 !default; -$ouds-size-icon-with-heading-small-size-medium-tablet: $ouds-dimension-500 !default; -$ouds-size-icon-with-heading-small-size-short-desktop: $ouds-dimension-500 !default; -$ouds-size-icon-with-heading-small-size-short-mobile: $ouds-dimension-400 !default; -$ouds-size-icon-with-heading-small-size-short-tablet: $ouds-dimension-400 !default; -$ouds-size-icon-with-heading-small-size-tall-desktop: $ouds-dimension-600 !default; -$ouds-size-icon-with-heading-small-size-tall-mobile: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-small-size-tall-tablet: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-xlarge-size-medium-desktop: $ouds-dimension-750 !default; -$ouds-size-icon-with-heading-xlarge-size-medium-mobile: $ouds-dimension-600 !default; -$ouds-size-icon-with-heading-xlarge-size-medium-tablet: $ouds-dimension-700 !default; -$ouds-size-icon-with-heading-xlarge-size-short-desktop: $ouds-dimension-700 !default; -$ouds-size-icon-with-heading-xlarge-size-short-mobile: $ouds-dimension-550 !default; -$ouds-size-icon-with-heading-xlarge-size-short-tablet: $ouds-dimension-650 !default; -$ouds-size-icon-with-heading-xlarge-size-tall-desktop: $ouds-dimension-800 !default; -$ouds-size-icon-with-heading-xlarge-size-tall-mobile: $ouds-dimension-650 !default; -$ouds-size-icon-with-heading-xlarge-size-tall-tablet: $ouds-dimension-800 !default; +$ouds-size-icon-decorative-2xl: $ouds-dimension-900 !default; +$ouds-size-icon-decorative-2xs: $ouds-dimension-200 !default; +$ouds-size-icon-decorative-lg: $ouds-dimension-600 !default; +$ouds-size-icon-decorative-md: $ouds-dimension-500 !default; +$ouds-size-icon-decorative-sm: $ouds-dimension-400 !default; +$ouds-size-icon-decorative-xl: $ouds-dimension-700 !default; +$ouds-size-icon-decorative-xs: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-large-size-lg-desktop: $ouds-dimension-550 !default; +$ouds-size-icon-with-body-large-size-lg-mobile: $ouds-dimension-350 !default; +$ouds-size-icon-with-body-large-size-lg-tablet: $ouds-dimension-350 !default; +$ouds-size-icon-with-body-large-size-md-desktop: $ouds-dimension-500 !default; +$ouds-size-icon-with-body-large-size-md-mobile: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-large-size-md-tablet: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-large-size-sm-desktop: $ouds-dimension-400 !default; +$ouds-size-icon-with-body-large-size-sm-mobile: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-large-size-sm-tablet: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-medium-size-lg-desktop: $ouds-dimension-350 !default; +$ouds-size-icon-with-body-medium-size-lg-mobile: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-medium-size-lg-tablet: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-medium-size-md-desktop: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-medium-size-md-mobile: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-medium-size-md-tablet: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-medium-size-sm-desktop: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-medium-size-sm-mobile: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-medium-size-sm-tablet: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-small-size-lg-desktop: $ouds-dimension-300 !default; +$ouds-size-icon-with-body-small-size-lg-mobile: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-small-size-lg-tablet: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-small-size-md-desktop: $ouds-dimension-250 !default; +$ouds-size-icon-with-body-small-size-md-mobile: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-small-size-md-tablet: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-small-size-sm-desktop: $ouds-dimension-200 !default; +$ouds-size-icon-with-body-small-size-sm-mobile: $ouds-dimension-150 !default; +$ouds-size-icon-with-body-small-size-sm-tablet: $ouds-dimension-150 !default; +$ouds-size-icon-with-heading-large-size-lg-desktop: $ouds-dimension-700 !default; +$ouds-size-icon-with-heading-large-size-lg-mobile: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-large-size-lg-tablet: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-large-size-md-desktop: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-large-size-md-mobile: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-large-size-md-tablet: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-large-size-sm-desktop: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-large-size-sm-mobile: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-large-size-sm-tablet: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-medium-size-lg-desktop: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-medium-size-lg-mobile: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-medium-size-lg-tablet: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-medium-size-md-desktop: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-medium-size-md-mobile: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-medium-size-md-tablet: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-medium-size-sm-desktop: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-medium-size-sm-mobile: $ouds-dimension-400 !default; +$ouds-size-icon-with-heading-medium-size-sm-tablet: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-small-size-lg-desktop: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-small-size-lg-mobile: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-small-size-lg-tablet: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-small-size-md-desktop: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-small-size-md-mobile: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-small-size-md-tablet: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-small-size-sm-desktop: $ouds-dimension-500 !default; +$ouds-size-icon-with-heading-small-size-sm-mobile: $ouds-dimension-400 !default; +$ouds-size-icon-with-heading-small-size-sm-tablet: $ouds-dimension-400 !default; +$ouds-size-icon-with-heading-xlarge-size-lg-desktop: $ouds-dimension-800 !default; +$ouds-size-icon-with-heading-xlarge-size-lg-mobile: $ouds-dimension-650 !default; +$ouds-size-icon-with-heading-xlarge-size-lg-tablet: $ouds-dimension-800 !default; +$ouds-size-icon-with-heading-xlarge-size-md-desktop: $ouds-dimension-750 !default; +$ouds-size-icon-with-heading-xlarge-size-md-mobile: $ouds-dimension-600 !default; +$ouds-size-icon-with-heading-xlarge-size-md-tablet: $ouds-dimension-700 !default; +$ouds-size-icon-with-heading-xlarge-size-sm-desktop: $ouds-dimension-700 !default; +$ouds-size-icon-with-heading-xlarge-size-sm-mobile: $ouds-dimension-550 !default; +$ouds-size-icon-with-heading-xlarge-size-sm-tablet: $ouds-dimension-650 !default; $ouds-size-max-width-grid: $ouds-grid-max-width-650 !default; $ouds-size-max-width-type-body-large-desktop: $ouds-dimension-7000 !default; $ouds-size-max-width-type-body-large-mobile: $ouds-dimension-6000 !default; @@ -734,20 +603,20 @@ $ouds-size-max-width-type-heading-small-tablet: $ouds-dimension-6000 !default; $ouds-size-max-width-type-heading-xlarge-desktop: $ouds-dimension-11000 !default; $ouds-size-max-width-type-heading-xlarge-mobile: $ouds-dimension-9000 !default; $ouds-size-max-width-type-heading-xlarge-tablet: $ouds-dimension-9000 !default; -$ouds-size-icon-with-label-large-size-medium: $ouds-dimension-2xs !default; -$ouds-size-icon-with-label-large-size-short: $ouds-dimension-3xs !default; -$ouds-size-icon-with-label-large-size-shorter: $ouds-dimension-4xs !default; -$ouds-size-icon-with-label-large-size-tall: $ouds-dimension-xs !default; -$ouds-size-icon-with-label-large-size-taller: $ouds-dimension-lg !default; -$ouds-size-icon-with-label-medium-size-medium: $ouds-dimension-4xs !default; -$ouds-size-icon-with-label-medium-size-short: $ouds-dimension-5xs !default; -$ouds-size-icon-with-label-medium-size-tall: $ouds-dimension-3xs !default; -$ouds-size-icon-with-label-small-size-medium: $ouds-dimension-5xs !default; -$ouds-size-icon-with-label-small-size-short: $ouds-dimension-6xs !default; -$ouds-size-icon-with-label-small-size-tall: $ouds-dimension-4xs !default; -$ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-md !default; -$ouds-size-icon-with-label-xlarge-size-short: $ouds-dimension-xs !default; -$ouds-size-icon-with-label-xlarge-size-tall: $ouds-dimension-lg !default; +$ouds-size-icon-with-label-large-size-lg: $ouds-dimension-xs !default; +$ouds-size-icon-with-label-large-size-md: $ouds-dimension-2xs !default; +$ouds-size-icon-with-label-large-size-sm: $ouds-dimension-3xs !default; +$ouds-size-icon-with-label-large-size-xl: $ouds-dimension-lg !default; +$ouds-size-icon-with-label-large-size-xs: $ouds-dimension-4xs !default; +$ouds-size-icon-with-label-medium-size-lg: $ouds-dimension-3xs !default; +$ouds-size-icon-with-label-medium-size-md: $ouds-dimension-4xs !default; +$ouds-size-icon-with-label-medium-size-sm: $ouds-dimension-5xs !default; +$ouds-size-icon-with-label-small-size-lg: $ouds-dimension-4xs !default; +$ouds-size-icon-with-label-small-size-md: $ouds-dimension-5xs !default; +$ouds-size-icon-with-label-small-size-sm: $ouds-dimension-6xs !default; +$ouds-size-icon-with-label-xlarge-size-lg: $ouds-dimension-lg !default; +$ouds-size-icon-with-label-xlarge-size-md: $ouds-dimension-md !default; +$ouds-size-icon-with-label-xlarge-size-sm: $ouds-dimension-xs !default; // scss-docs-end ouds-semantic-size // Space @@ -795,24 +664,15 @@ $ouds-space-scaled-taller-tablet: $ouds-dimension-500 !default; $ouds-space-scaled-tallest-desktop: $ouds-dimension-700 !default; $ouds-space-scaled-tallest-mobile: $ouds-dimension-500 !default; $ouds-space-scaled-tallest-tablet: $ouds-dimension-600 !default; -$ouds-space-column-gap-medium: $ouds-dimension-5xs !default; +$ouds-space-column-gap-medium: $ouds-dimension-6xs !default; $ouds-space-column-gap-none: $ouds-dimension-none !default; $ouds-space-column-gap-short: $ouds-dimension-7xs !default; -$ouds-space-column-gap-shorter: $ouds-dimension-9xs !default; -$ouds-space-column-gap-tall: $ouds-dimension-3xs !default; -$ouds-space-column-gap-taller: $ouds-dimension-xs !default; -$ouds-space-column-gap-with-arrow-medium: $ouds-dimension-7xs !default; -$ouds-space-column-gap-with-arrow-none: $ouds-dimension-none !default; -$ouds-space-column-gap-with-arrow-short: $ouds-dimension-8xs !default; -$ouds-space-column-gap-with-arrow-shorter: $ouds-dimension-9xs !default; -$ouds-space-column-gap-with-arrow-shortest: $ouds-dimension-10xs !default; -$ouds-space-column-gap-with-arrow-tall: $ouds-dimension-5xs !default; -$ouds-space-column-gap-with-icon-medium: $ouds-dimension-7xs !default; -$ouds-space-column-gap-with-icon-none: $ouds-dimension-none !default; -$ouds-space-column-gap-with-icon-short: $ouds-dimension-8xs !default; -$ouds-space-column-gap-with-icon-shorter: $ouds-dimension-9xs !default; -$ouds-space-column-gap-with-icon-shortest: $ouds-dimension-10xs !default; -$ouds-space-column-gap-with-icon-tall: $ouds-dimension-5xs !default; +$ouds-space-column-gap-shorter: $ouds-dimension-8xs !default; +$ouds-space-column-gap-shortest: $ouds-dimension-9xs !default; +$ouds-space-column-gap-smash: $ouds-dimension-10xs !default; +$ouds-space-column-gap-tall: $ouds-dimension-5xs !default; +$ouds-space-column-gap-taller: $ouds-dimension-4xs !default; +$ouds-space-column-gap-tallest: $ouds-dimension-3xs !default; $ouds-space-inset-medium: $ouds-dimension-6xs !default; $ouds-space-inset-none: $ouds-dimension-none !default; $ouds-space-inset-short: $ouds-dimension-7xs !default; @@ -823,53 +683,33 @@ $ouds-space-inset-spacious: $ouds-dimension-md !default; $ouds-space-inset-tall: $ouds-dimension-5xs !default; $ouds-space-inset-taller: $ouds-dimension-3xs !default; $ouds-space-inset-tallest: $ouds-dimension-xs !default; +$ouds-space-padding-block-huge: $ouds-dimension-xs !default; $ouds-space-padding-block-medium: $ouds-dimension-6xs !default; $ouds-space-padding-block-none: $ouds-dimension-none !default; $ouds-space-padding-block-short: $ouds-dimension-7xs !default; -$ouds-space-padding-block-shorter: $ouds-dimension-9xs !default; +$ouds-space-padding-block-shorter: $ouds-dimension-8xs !default; +$ouds-space-padding-block-shortest: $ouds-dimension-9xs !default; +$ouds-space-padding-block-smash: $ouds-dimension-10xs !default; +$ouds-space-padding-block-spacious: $ouds-dimension-2xs !default; $ouds-space-padding-block-tall: $ouds-dimension-5xs !default; -$ouds-space-padding-block-taller: $ouds-dimension-3xs !default; -$ouds-space-padding-block-tallest: $ouds-dimension-xs !default; -$ouds-space-padding-block-with-icon-medium: $ouds-dimension-7xs !default; -$ouds-space-padding-block-with-icon-none: $ouds-dimension-none !default; -$ouds-space-padding-block-with-icon-short: $ouds-dimension-8xs !default; -$ouds-space-padding-block-with-icon-shorter: $ouds-dimension-9xs !default; -$ouds-space-padding-block-with-icon-shortest: $ouds-dimension-10xs !default; -$ouds-space-padding-block-with-icon-tall: $ouds-dimension-6xs !default; -$ouds-space-padding-block-with-icon-taller: $ouds-dimension-5xs !default; -$ouds-space-padding-inline-medium: $ouds-dimension-5xs !default; +$ouds-space-padding-block-taller: $ouds-dimension-4xs !default; +$ouds-space-padding-block-tallest: $ouds-dimension-3xs !default; +$ouds-space-padding-inline-huge: $ouds-dimension-xs !default; +$ouds-space-padding-inline-medium: $ouds-dimension-6xs !default; $ouds-space-padding-inline-none: $ouds-dimension-none !default; $ouds-space-padding-inline-short: $ouds-dimension-7xs !default; -$ouds-space-padding-inline-shorter: $ouds-dimension-9xs !default; -$ouds-space-padding-inline-tall: $ouds-dimension-3xs !default; -$ouds-space-padding-inline-taller: $ouds-dimension-2xs !default; -$ouds-space-padding-inline-tallest: $ouds-dimension-xs !default; -$ouds-space-padding-inline-with-arrow-medium: $ouds-dimension-7xs !default; -$ouds-space-padding-inline-with-arrow-none: $ouds-dimension-none !default; -$ouds-space-padding-inline-with-arrow-short: $ouds-dimension-8xs !default; -$ouds-space-padding-inline-with-arrow-shorter: $ouds-dimension-9xs !default; -$ouds-space-padding-inline-with-arrow-shortest: $ouds-dimension-10xs !default; -$ouds-space-padding-inline-with-arrow-tall: $ouds-dimension-5xs !default; -$ouds-space-padding-inline-with-arrow-taller: $ouds-dimension-4xs !default; -$ouds-space-padding-inline-with-arrow-tallest: $ouds-dimension-3xs !default; -$ouds-space-padding-inline-with-icon-medium: $ouds-dimension-5xs !default; -$ouds-space-padding-inline-with-icon-none: $ouds-dimension-none !default; -$ouds-space-padding-inline-with-icon-short: $ouds-dimension-7xs !default; -$ouds-space-padding-inline-with-icon-shorter: $ouds-dimension-9xs !default; -$ouds-space-padding-inline-with-icon-shortest: $ouds-dimension-10xs !default; -$ouds-space-padding-inline-with-icon-tall: $ouds-dimension-4xs !default; -$ouds-space-padding-inline-with-icon-taller: $ouds-dimension-3xs !default; -$ouds-space-padding-inline-with-icon-tallest: $ouds-dimension-2xs !default; -$ouds-space-row-gap-medium: $ouds-dimension-7xs !default; +$ouds-space-padding-inline-shorter: $ouds-dimension-8xs !default; +$ouds-space-padding-inline-shortest: $ouds-dimension-9xs !default; +$ouds-space-padding-inline-smash: $ouds-dimension-10xs !default; +$ouds-space-padding-inline-spacious: $ouds-dimension-2xs !default; +$ouds-space-padding-inline-tall: $ouds-dimension-5xs !default; +$ouds-space-padding-inline-taller: $ouds-dimension-4xs !default; +$ouds-space-padding-inline-tallest: $ouds-dimension-3xs !default; +$ouds-space-row-gap-medium: $ouds-dimension-6xs !default; $ouds-space-row-gap-none: $ouds-dimension-none !default; -$ouds-space-row-gap-short: $ouds-dimension-8xs !default; -$ouds-space-row-gap-shorter: $ouds-dimension-9xs !default; -$ouds-space-row-gap-shortest: $ouds-dimension-10xs !default; +$ouds-space-row-gap-short: $ouds-dimension-7xs !default; +$ouds-space-row-gap-shorter: $ouds-dimension-8xs !default; +$ouds-space-row-gap-shortest: $ouds-dimension-9xs !default; +$ouds-space-row-gap-smash: $ouds-dimension-10xs !default; $ouds-space-row-gap-tall: $ouds-dimension-5xs !default; -$ouds-space-row-gap-with-icon-medium: $ouds-dimension-7xs !default; -$ouds-space-row-gap-with-icon-none: $ouds-dimension-none !default; -$ouds-space-row-gap-with-icon-short: $ouds-dimension-8xs !default; -$ouds-space-row-gap-with-icon-shorter: $ouds-dimension-9xs !default; -$ouds-space-row-gap-with-icon-shortest: $ouds-dimension-10xs !default; -$ouds-space-row-gap-with-icon-tall: $ouds-dimension-5xs !default; // scss-docs-end ouds-semantic-space diff --git a/site/content/docs/0.0/helpers/icon.md b/site/content/docs/0.0/helpers/icon.md index 1b7d521621..9465b88a82 100644 --- a/site/content/docs/0.0/helpers/icon.md +++ b/site/content/docs/0.0/helpers/icon.md @@ -26,24 +26,24 @@ Here are the rules to follow for headings. These icons' sizes are responsive. {{< bs-table >}} | Icon class | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| `.hxl-tall-icon` | `3.25rem` (52px) | `4rem` (64px) | `4rem` (64px) | -| `.hxl-medium-icon` | `3rem` (48px) | `3.5rem` (56px) | `3.75rem` (60px) | -| `.hxl-short-icon` | `2.75rem` (44px) | `3.25rem` (52px) | `3.5rem` (56px) | -| `.hl-tall-icon` | `3rem` (48px) | `3.25rem` (52px) | `3.5rem` (56px) | -| `.hl-medium-icon` | `2.75rem` (44px) | `3rem` (48px) | `3.25rem` (52px) | -| `.hl-short-icon` | `2.5rem` (40px) | `2.75rem` (44px) | `3rem` (48px) | -| `.hm-tall-icon` | `2.75rem` (44px) | `3rem` (48px) | `3.25rem` (52px) | -| `.hm-medium-icon` | `2.5rem` (40px) | `2.75rem` (44px) | `3rem` (48px) | -| `.hm-short-icon` | `2rem` (32px) | `2.5rem` (40px) | `2.75rem` (44px) | -| `.hs-tall-icon` | `2.75rem` (44px) | `2.75rem` (44px) | `3rem` (48px) | -| `.hs-medium-icon` | `2.5rem` (40px) | `2.5rem` (40px) | `2.75rem` (44px) | -| `.hs-short-icon` | `2rem` (32px) | `2rem` (32px) | `2.5rem` (40px) | -| `.bl-tall-icon` | `1.75rem` (28px) | `1.75rem` (28px) | `2.75rem` (44px) | -| `.bl-medium-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `2.5rem` (40px) | -| `.bl-short-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `2rem` (32px) | -| `.bm-tall-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `1.75rem` (28px) | -| `.bm-medium-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) | -| `.bm-short-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) | +| `.hxl-lg-icon` | `3.25rem` (52px) | `4rem` (64px) | `4rem` (64px) | +| `.hxl-md-icon` | `3rem` (48px) | `3.5rem` (56px) | `3.75rem` (60px) | +| `.hxl-sm-icon` | `2.75rem` (44px) | `3.25rem` (52px) | `3.5rem` (56px) | +| `.hl-lg-icon` | `3rem` (48px) | `3.25rem` (52px) | `3.5rem` (56px) | +| `.hl-md-icon` | `2.75rem` (44px) | `3rem` (48px) | `3.25rem` (52px) | +| `.hl-sm-icon` | `2.5rem` (40px) | `2.75rem` (44px) | `3rem` (48px) | +| `.hm-lg-icon` | `2.75rem` (44px) | `3rem` (48px) | `3.25rem` (52px) | +| `.hm-md-icon` | `2.5rem` (40px) | `2.75rem` (44px) | `3rem` (48px) | +| `.hm-sm-icon` | `2rem` (32px) | `2.5rem` (40px) | `2.75rem` (44px) | +| `.hs-lg-icon` | `2.75rem` (44px) | `2.75rem` (44px) | `3rem` (48px) | +| `.hs-md-icon` | `2.5rem` (40px) | `2.5rem` (40px) | `2.75rem` (44px) | +| `.hs-sm-icon` | `2rem` (32px) | `2rem` (32px) | `2.5rem` (40px) | +| `.bl-lg-icon` | `1.75rem` (28px) | `1.75rem` (28px) | `2.75rem` (44px) | +| `.bl-md-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `2.5rem` (40px) | +| `.bl-sm-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `2rem` (32px) | +| `.bm-lg-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `1.75rem` (28px) | +| `.bm-md-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) | +| `.bm-sm-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) | {{< /bs-table >}} @@ -51,132 +51,132 @@ Here are the rules to follow for headings. These icons' sizes are responsive. {{< example >}}
-

H1 with tall icon

+

H1 with large icon

-

H1 with medium icon

-

H1 with short icon

+

H1 with small icon

-

H2 with tall icon

+

H2 with large icon

-

H2 with medium icon

-

H2 with short icon

+

H2 with small icon

-

H3 with tall icon

+

H3 with large icon

-

H3 with medium icon

-

H3 with short icon

+

H3 with small icon

-

H4 with tall icon

+

H4 with large icon

-

H4 with medium icon

-

H4 with short icon

+

H4 with small icon

-
H5 with tall icon
+
H5 with large icon
-
H5 with medium icon
-
H5 with short icon
+
H5 with small icon
-
H6 with tall icon
+
H6 with lg icon
-
H6 with medium icon
-
H6 with short icon
+
H6 with small icon
{{< /example >}} @@ -194,15 +194,15 @@ Here are the rules to follow for regular texts. These icons' sizes are responsiv {{< bs-table >}} | Icon class | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper | | --- | --- | --- | --- | -| `.bl-tall-icon` | `1.75rem` (28px) | `1.75rem` (28px) | `2.75rem` (44px) | -| `.bl-medium-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `2.5rem` (40px) | -| `.bl-short-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `2rem` (32px) | -| `.bm-tall-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `1.75rem` (28px) | -| `.bm-medium-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) | -| `.bm-short-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) | -| `.bs-tall-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) | -| `.bs-medium-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) | -| `.bs-short-icon` | `.75rem` (12px) | `.75rem` (12px) | `1rem` (16px) | +| `.bl-lg-icon` | `1.75rem` (28px) | `1.75rem` (28px) | `2.75rem` (44px) | +| `.bl-md-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `2.5rem` (40px) | +| `.bl-sm-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `2rem` (32px) | +| `.bm-lg-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `1.75rem` (28px) | +| `.bm-md-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) | +| `.bm-sm-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) | +| `.bs-lg-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) | +| `.bs-md-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) | +| `.bs-sm-icon` | `.75rem` (12px) | `.75rem` (12px) | `1rem` (16px) | {{< /bs-table >}} @@ -210,15 +210,15 @@ Here are the rules to follow for regular texts. These icons' sizes are responsiv {{< example >}}
-

- Lead paragraph with tall icon + Lead paragraph with large icon

-

@@ -226,11 +226,11 @@ Here are the rules to follow for regular texts. These icons' sizes are responsiv

-

- Lead paragraph with short icon + Lead paragraph with small icon

@@ -238,15 +238,15 @@ Here are the rules to follow for regular texts. These icons' sizes are responsiv
-

- Default paragraph with tall icon + Default paragraph with large icon

-

@@ -254,11 +254,11 @@ Here are the rules to follow for regular texts. These icons' sizes are responsiv

-

- Default paragraph with short icon + Default paragraph with small icon

@@ -266,15 +266,15 @@ Here are the rules to follow for regular texts. These icons' sizes are responsiv
-

- Small paragraph with tall icon + Small paragraph with large icon

-

@@ -282,11 +282,11 @@ Here are the rules to follow for regular texts. These icons' sizes are responsiv

-

- Small paragraph with short icon + Small paragraph with small icon

{{< /example >}} @@ -301,13 +301,13 @@ Here are the rules to follow for decorative icons. Be careful using these icons' {{< bs-table >}} | Icon class | Value | | --- | --- | -| `.decorative-shortest-icon` | `1rem` (16px) | -| `.decorative-shorter-icon` | `1.5rem` (24px) | -| `.decorative-short-icon` | `2rem` (32px) | -| `.decorative-medium-icon` | `2.5rem` (40px) | -| `.decorative-tall-icon` | `3rem` (48px) | -| `.decorative-taller-icon` | `3.5rem` (56px) | -| `.decorative-tallest-icon` | `4.5rem` (72px) | +| `.decorative-2xs-icon` | `1rem` (16px) | +| `.decorative-xs-icon` | `1.5rem` (24px) | +| `.decorative-sm-icon` | `2rem` (32px) | +| `.decorative-md-icon` | `2.5rem` (40px) | +| `.decorative-lg-icon` | `3rem` (48px) | +| `.decorative-xl-icon` | `3.5rem` (56px) | +| `.decorative-2xl-icon` | `4.5rem` (72px) | {{< /bs-table >}} @@ -315,40 +315,40 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
-

Shortest decorative icon

+

2x-small decorative icon

coreGlobalDimension200 (1rem or 16px at zoom 100%)

-
-

Shorter decorative icon

+

X-small decorative icon

coreGlobalDimension300 (1.5rem or 24px at zoom 100%)

-
-

Short decorative icon

+

Small decorative icon

coreGlobalDimension400 (2rem or 32px at zoom 100%)

-
@@ -359,47 +359,47 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
-

Tall decorative icon

+

Large decorative icon

coreGlobalDimension600 (3rem or 48px at zoom 100%)

-
-

Taller decorative icon

+

X-large decorative icon

coreGlobalDimension700 (3.5rem or 56px at zoom 100%)

-
-

Tallest decorative icon

+

2x-large decorative icon

coreGlobalDimension900 (4.5rem or 72px at zoom 100%)

```html - - - - - - - + + + + + + + ``` ## Multiple lines @@ -412,20 +412,20 @@ This is the default behavior of our DOM. {{< example >}}
-

H1 with tall icon and a very long title to see how it behaves while being wrapped

+

H1 with large icon and a very long title to see how it behaves while being wrapped

{{< /example >}} {{< example >}}
-

- Default long paragraph with tall icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors. + Default long paragraph with large icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors.

{{< /example >}} @@ -436,20 +436,20 @@ You can also have the icon above the text block. {{< example >}}
-

H1 with tall icon and a very long title to see how it behaves while being wrapped

+

H1 with large icon and a very long title to see how it behaves while being wrapped

{{< /example >}} {{< example >}}
-

- Default long paragraph with tall icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors. + Default long paragraph with large icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors.

{{< /example >}} @@ -460,12 +460,12 @@ SVG Sprite is the preferred choice for flexibility, performance and accessibilit {{< example >}}
- -

H1 with tall icon

+ +

H1 with large icon

- -

H1 with tall icon

+ +

H1 with large icon

{{< /example >}} diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 2ff0395a60..e38f5ef057 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -153,13 +153,13 @@ All responsive classes, helpers, and utilities have been updated accordingly to ### Opacity - Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]({{< docsref "/utilities/opacity" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. -- New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. +- New Opacity utilities: `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. ### Shadow - Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]({{< docsref "/utilities/shadows" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. - New Shadows utilities: -`.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-overlay-default`, `.shadow-overlay-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. +`.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-default`, `.shadow-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. ### Sizing @@ -313,7 +313,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to ## CSS and Sass variables - New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. - - For instance, without the Bootstrap compatibility mode, you won't have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the semantic OUDS Web utilities such as `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, etc. + - For instance, without the Bootstrap compatibility mode, you won't have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the semantic OUDS Web utilities such as `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, etc. - New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables. @@ -356,6 +356,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to
  • $ouds-border-width-50
  • $ouds-border-width-75
  • $ouds-border-width-100
    • +
  • $ouds-border-width-125
  • $ouds-border-width-default
  • $ouds-border-width-medium
  • $ouds-border-width-none
    • @@ -393,27 +394,35 @@ All responsive classes, helpers, and utilities have been updated accordingly to
  • $ouds-elevation-blur-300
  • $ouds-elevation-blur-400
  • $ouds-elevation-blur-600
    • +
  • $ouds-elevation-blur-default
  • $ouds-elevation-blur-drag
    • +
  • $ouds-elevation-blur-emphasized
  • $ouds-elevation-blur-none
    • -
  • $ouds-elevation-blur-overlay-default
    • -
  • $ouds-elevation-blur-overlay-emphasized
  • $ouds-elevation-blur-raised
  • $ouds-elevation-blur-sticky-default
  • $ouds-elevation-blur-sticky-emphasized
  • $ouds-elevation-blur-sticky-navigation-scrolled
    • +
  • $ouds-elevation-color-default-dark
    • +
  • $ouds-elevation-color-default-light
    • +
  • $ouds-elevation-color-drag-dark
  • $ouds-elevation-color-drag-light
    • +
  • $ouds-elevation-color-emphasized-dark
    • +
  • $ouds-elevation-color-emphasized-light
    • +
  • $ouds-elevation-color-none-dark
  • $ouds-elevation-color-none-light
    • -
  • $ouds-elevation-color-overlay-default-light
    • -
  • $ouds-elevation-color-overlay-emphasized-light
    • +
  • $ouds-elevation-color-raised-dark
  • $ouds-elevation-color-raised-light
    • +
  • $ouds-elevation-color-sticky-default-dark
  • $ouds-elevation-color-sticky-default-light
    • +
  • $ouds-elevation-color-sticky-emphasized-dark
  • $ouds-elevation-color-sticky-emphasized-light
  • $ouds-elevation-color-sticky-navigation-scrolled-light
    • +
  • $ouds-elevation-color-sticky-navigation-scrolled-dark
    • +
  • $ouds-elevation-default
  • $ouds-elevation-drag
    • +
  • $ouds-elevation-emphasized
  • $ouds-elevation-focus
  • $ouds-elevation-none
    • -
  • $ouds-elevation-overlay-default
    • -
  • $ouds-elevation-overlay-emphasized
  • $ouds-elevation-raised
  • $ouds-elevation-spread-0
  • $ouds-elevation-spread-300
    • @@ -421,8 +430,8 @@ All responsive classes, helpers, and utilities have been updated accordingly to
  • $ouds-elevation-spread-n100
  • $ouds-elevation-spread-n300
  • $ouds-elevation-spread-none
    • -
  • $ouds-elevation-spread-overlay-default
    • -
  • $ouds-elevation-spread-overlay-emphasized
    • +
  • $ouds-elevation-spread-default
    • +
  • $ouds-elevation-spread-emphasized
  • $ouds-elevation-spread-raised
  • $ouds-elevation-spread-sticky-default
  • $ouds-elevation-spread-sticky-emphasized
    • @@ -433,8 +442,8 @@ All responsive classes, helpers, and utilities have been updated accordingly to
  • $ouds-elevation-x-0
  • $ouds-elevation-x-drag
  • $ouds-elevation-x-none
    • -
  • $ouds-elevation-x-overlay-default
    • -
  • $ouds-elevation-x-overlay-emphasized
    • +
  • $ouds-elevation-x-default
    • +
  • $ouds-elevation-x-emphasized
  • $ouds-elevation-x-raised
  • $ouds-elevation-x-sticky-default
  • $ouds-elevation-x-sticky-emphasized
    • @@ -446,14 +455,173 @@ All responsive classes, helpers, and utilities have been updated accordingly to
  • $ouds-elevation-y-500
  • $ouds-elevation-y-drag
  • $ouds-elevation-y-none
    • -
  • $ouds-elevation-y-overlay-default
    • -
  • $ouds-elevation-y-overlay-emphasized
    • +
  • $ouds-elevation-y-default
    • +
  • $ouds-elevation-y-emphasized
  • $ouds-elevation-y-raised
  • $ouds-elevation-y-sticky-default
  • $ouds-elevation-y-sticky-emphasized
  • $ouds-elevation-y-sticky-navigation-scrolled
    • +
  • $ouds-font-family
    • +
  • $ouds-font-family-brand-default
  • $ouds-font-family-monospace-stack
  • $ouds-font-family-sans-serif-stack
    • +
  • $ouds-font-letter-spacing-150
    • +
  • $ouds-font-letter-spacing-200
    • +
  • $ouds-font-letter-spacing-250
    • +
  • $ouds-font-letter-spacing-300
    • +
  • $ouds-font-letter-spacing-350
    • +
  • $ouds-font-letter-spacing-450
    • +
  • $ouds-font-letter-spacing-550
    • +
  • $ouds-font-letter-spacing-650
    • +
  • $ouds-font-letter-spacing-750
    • +
  • $ouds-font-letter-spacing-850
    • +
  • $ouds-font-letter-spacing-1050
    • +
  • $ouds-font-letter-spacing-1250
    • +
  • $ouds-font-letter-spacing-1450
    • +
  • $ouds-font-letter-spacing-1850
    • +
  • $ouds-font-letter-spacing-body-large-desktop
    • +
  • $ouds-font-letter-spacing-body-large-mobile
    • +
  • $ouds-font-letter-spacing-body-large-tablet
    • +
  • $ouds-font-letter-spacing-body-medium-desktop
    • +
  • $ouds-font-letter-spacing-body-medium-mobile
    • +
  • $ouds-font-letter-spacing-body-medium-tablet
    • +
  • $ouds-font-letter-spacing-body-small-desktop
    • +
  • $ouds-font-letter-spacing-body-small-mobile
    • +
  • $ouds-font-letter-spacing-body-small-tablet
    • +
  • $ouds-font-letter-spacing-code-medium:
    • +
  • $ouds-font-letter-spacing-display-large-desktop
    • +
  • $ouds-font-letter-spacing-display-large-mobile
    • +
  • $ouds-font-letter-spacing-display-large-tablet
    • +
  • $ouds-font-letter-spacing-display-medium-desktop
    • +
  • $ouds-font-letter-spacing-display-medium-mobile
    • +
  • $ouds-font-letter-spacing-display-medium-tablet
    • +
  • $ouds-font-letter-spacing-display-small-desktop
    • +
  • $ouds-font-letter-spacing-display-small-mobile
    • +
  • $ouds-font-letter-spacing-display-small-tablet
    • +
  • $ouds-font-letter-spacing-heading-large-desktop
    • +
  • $ouds-font-letter-spacing-heading-large-mobile
    • +
  • $ouds-font-letter-spacing-heading-large-tablet
    • +
  • $ouds-font-letter-spacing-heading-medium-desktop
    • +
  • $ouds-font-letter-spacing-heading-medium-mobile
    • +
  • $ouds-font-letter-spacing-heading-medium-tablet
    • +
  • $ouds-font-letter-spacing-heading-small-desktop
    • +
  • $ouds-font-letter-spacing-heading-small-mobile
    • +
  • $ouds-font-letter-spacing-heading-small-tablet
    • +
  • $ouds-font-letter-spacing-heading-xlarge-desktop
    • +
  • $ouds-font-letter-spacing-heading-xlarge-mobile
    • +
  • $ouds-font-letter-spacing-heading-xlarge-tablet
    • +
  • $ouds-font-letter-spacing-label-large
    • +
  • $ouds-font-letter-spacing-label-medium
    • +
  • $ouds-font-letter-spacing-label-small
    • +
  • $ouds-font-letter-spacing-label-xlarge
    • +
  • $ouds-font-line-height-250
    • +
  • $ouds-font-line-height-350
    • +
  • $ouds-font-line-height-450
    • +
  • $ouds-font-line-height-550
    • +
  • $ouds-font-line-height-650
    • +
  • $ouds-font-line-height-750
    • +
  • $ouds-font-line-height-850
    • +
  • $ouds-font-line-height-950
    • +
  • $ouds-font-line-height-1050
    • +
  • $ouds-font-line-height-1250
    • +
  • $ouds-font-line-height-1450
    • +
  • $ouds-font-line-height-1850
    • +
  • $ouds-font-line-height-2050
    • +
  • $ouds-font-line-height-body-large-desktop
    • +
  • $ouds-font-line-height-body-large-mobile
    • +
  • $ouds-font-line-height-body-large-tablet
    • +
  • $ouds-font-line-height-body-medium-desktop
    • +
  • $ouds-font-line-height-body-medium-mobile
    • +
  • $ouds-font-line-height-body-medium-tablet
    • +
  • $ouds-font-line-height-body-small-desktop
    • +
  • $ouds-font-line-height-body-small-mobile
    • +
  • $ouds-font-line-height-body-small-tablet
    • +
  • $ouds-font-line-height-code-medium
    • +
  • $ouds-font-line-height-display-large-desktop
    • +
  • $ouds-font-line-height-display-large-mobile
    • +
  • $ouds-font-line-height-display-large-tablet
    • +
  • $ouds-font-line-height-display-medium-desktop
    • +
  • $ouds-font-line-height-display-medium-mobile
    • +
  • $ouds-font-line-height-display-medium-tablet
    • +
  • $ouds-font-line-height-display-small-desktop
    • +
  • $ouds-font-line-height-display-small-mobile
    • +
  • $ouds-font-line-height-display-small-tablet
    • +
  • $ouds-font-line-height-heading-large-desktop
    • +
  • $ouds-font-line-height-heading-large-mobile
    • +
  • $ouds-font-line-height-heading-large-tablet
    • +
  • $ouds-font-line-height-heading-medium-desktop
    • +
  • $ouds-font-line-height-heading-medium-mobile
    • +
  • $ouds-font-line-height-heading-medium-tablet
    • +
  • $ouds-font-line-height-heading-small-desktop
    • +
  • $ouds-font-line-height-heading-small-mobile
    • +
  • $ouds-font-line-height-heading-small-tablet
    • +
  • $ouds-font-line-height-heading-xlarge-desktop
    • +
  • $ouds-font-line-height-heading-xlarge-mobile
    • +
  • $ouds-font-line-height-heading-xlarge-tablet
    • +
  • $ouds-font-line-height-label-large
    • +
  • $ouds-font-line-height-label-medium
    • +
  • $ouds-font-line-height-label-small
    • +
  • $ouds-font-line-height-label-xlarge
    • +
  • $ouds-font-size-150
    • +
  • $ouds-font-size-200
    • +
  • $ouds-font-size-250
    • +
  • $ouds-font-size-300
    • +
  • $ouds-font-size-350
    • +
  • $ouds-font-size-450
    • +
  • $ouds-font-size-550
    • +
  • $ouds-font-size-650
    • +
  • $ouds-font-size-750
    • +
  • $ouds-font-size-850
    • +
  • $ouds-font-size-1050
    • +
  • $ouds-font-size-1250
    • +
  • $ouds-font-size-1450
    • +
  • $ouds-font-size-1850
    • +
  • $ouds-font-size-body-large-desktop
    • +
  • $ouds-font-size-body-large-mobile
    • +
  • $ouds-font-size-body-large-tablet
    • +
  • $ouds-font-size-body-medium-desktop
    • +
  • $ouds-font-size-body-medium-mobile
    • +
  • $ouds-font-size-body-medium-tablet
    • +
  • $ouds-font-size-body-small-desktop
    • +
  • $ouds-font-size-body-small-mobile
    • +
  • $ouds-font-size-body-small-tablet
    • +
  • $ouds-font-size-code-medium: $oud
    • +
  • $ouds-font-size-display-large-desktop
    • +
  • $ouds-font-size-display-large-mobile
    • +
  • $ouds-font-size-display-large-tablet
    • +
  • $ouds-font-size-display-medium-desktop
    • +
  • $ouds-font-size-display-medium-mobile
    • +
  • $ouds-font-size-display-medium-tablet
    • +
  • $ouds-font-size-display-small-desktop
    • +
  • $ouds-font-size-display-small-mobile
    • +
  • $ouds-font-size-display-small-tablet
    • +
  • $ouds-font-size-heading-large-desktop
    • +
  • $ouds-font-size-heading-large-mobile
    • +
  • $ouds-font-size-heading-large-tablet
    • +
  • $ouds-font-size-heading-medium-desktop
    • +
  • $ouds-font-size-heading-medium-mobile
    • +
  • $ouds-font-size-heading-medium-tablet
    • +
  • $ouds-font-size-heading-small-desktop
    • +
  • $ouds-font-size-heading-small-mobile
    • +
  • $ouds-font-size-heading-small-tablet
    • +
  • $ouds-font-size-heading-xlarge-desktop
    • +
  • $ouds-font-size-heading-xlarge-mobile
    • +
  • $ouds-font-size-heading-xlarge-tablet
    • +
  • $ouds-font-size-label-large
    • +
  • $ouds-font-size-label-medium
    • +
  • $ouds-font-size-label-small
    • +
  • $ouds-font-size-label-xlarge
    • +
  • $ouds-font-weight-400
    • +
  • $ouds-font-weight-700
    • +
  • $ouds-font-weight-code
    • +
  • $ouds-font-weight-default
    • +
  • $ouds-font-weight-strong
    • +
  • $ouds-font-weight-body-default
    • +
  • $ouds-font-weight-body-strong
    • +
  • $ouds-font-weight-display
    • +
  • $ouds-font-weight-heading
    • +
  • $ouds-font-weight-label-default
    • +
  • $ouds-font-weight-label-strong
  • $ouds-grid-2xl-column-gap
  • $ouds-grid-2xl-margin
  • $ouds-grid-2xl-min-width
    • @@ -478,7 +646,6 @@ All responsive classes, helpers, and utilities have been updated accordingly to
  • $ouds-grid-margin-400
  • $ouds-grid-margin-500
  • $ouds-grid-margin-700
    • -
  • $ouds-size-max-width-grid
  • $ouds-grid-md-column-gap
  • $ouds-grid-md-margin
  • $ouds-grid-md-min-width
    • @@ -499,17 +666,132 @@ All responsive classes, helpers, and utilities have been updated accordingly to
  • $ouds-grid-xs-margin
  • $ouds-grid-xs-min-width
  • $ouds-opacity-0
    • -
  • $ouds-opacity-100
    • -
  • $ouds-opacity-300
    • -
  • $ouds-opacity-500
    • -
  • $ouds-opacity-700
    • -
  • $ouds-opacity-900
    • +
  • $ouds-opacity-40
    • +
  • $ouds-opacity-160
    • +
  • $ouds-opacity-320
    • +
  • $ouds-opacity-640
    • +
  • $ouds-opacity-1000
    • +
  • $ouds-opacity-invisible
  • $ouds-opacity-medium
  • $ouds-opacity-opaque
  • $ouds-opacity-strong
    • -
  • $ouds-opacity-transparent
  • $ouds-opacity-weak
  • $ouds-opacity-weaker
    • +
  • $ouds-size-icon-decorative-2xl
    • +
  • $ouds-size-icon-decorative-2xs
    • +
  • $ouds-size-icon-decorative-lg
    • +
  • $ouds-size-icon-decorative-md
    • +
  • $ouds-size-icon-decorative-sm
    • +
  • $ouds-size-icon-decorative-xl
    • +
  • $ouds-size-icon-decorative-xs
    • +
  • $ouds-size-icon-with-body-large-size-lg-desktop
    • +
  • $ouds-size-icon-with-body-large-size-lg-mobile
    • +
  • $ouds-size-icon-with-body-large-size-lg-tablet
    • +
  • $ouds-size-icon-with-body-large-size-md-desktop
    • +
  • $ouds-size-icon-with-body-large-size-md-mobile
    • +
  • $ouds-size-icon-with-body-large-size-md-tablet
    • +
  • $ouds-size-icon-with-body-large-size-sm-desktop
    • +
  • $ouds-size-icon-with-body-large-size-sm-mobile
    • +
  • $ouds-size-icon-with-body-large-size-sm-tablet
    • +
  • $ouds-size-icon-with-body-medium-size-lg-desktop
    • +
  • $ouds-size-icon-with-body-medium-size-lg-mobile
    • +
  • $ouds-size-icon-with-body-medium-size-lg-tablet
    • +
  • $ouds-size-icon-with-body-medium-size-md-desktop
    • +
  • $ouds-size-icon-with-body-medium-size-md-mobile
    • +
  • $ouds-size-icon-with-body-medium-size-md-tablet
    • +
  • $ouds-size-icon-with-body-medium-size-sm-desktop
    • +
  • $ouds-size-icon-with-body-medium-size-sm-mobile
    • +
  • $ouds-size-icon-with-body-medium-size-sm-tablet
    • +
  • $ouds-size-icon-with-body-small-size-lg-desktop
    • +
  • $ouds-size-icon-with-body-small-size-lg-mobile
    • +
  • $ouds-size-icon-with-body-small-size-lg-tablet
    • +
  • $ouds-size-icon-with-body-small-size-md-desktop
    • +
  • $ouds-size-icon-with-body-small-size-md-mobile
    • +
  • $ouds-size-icon-with-body-small-size-md-tablet
    • +
  • $ouds-size-icon-with-body-small-size-sm-desktop
    • +
  • $ouds-size-icon-with-body-small-size-sm-mobile
    • +
  • $ouds-size-icon-with-body-small-size-sm-tablet
    • +
  • $ouds-size-icon-with-heading-large-size-lg-desktop
    • +
  • $ouds-size-icon-with-heading-large-size-lg-mobile
    • +
  • $ouds-size-icon-with-heading-large-size-lg-tablet
    • +
  • $ouds-size-icon-with-heading-large-size-md-desktop
    • +
  • $ouds-size-icon-with-heading-large-size-md-mobile
    • +
  • $ouds-size-icon-with-heading-large-size-md-tablet
    • +
  • $ouds-size-icon-with-heading-large-size-sm-desktop
    • +
  • $ouds-size-icon-with-heading-large-size-sm-mobile
    • +
  • $ouds-size-icon-with-heading-large-size-sm-tablet
    • +
  • $ouds-size-icon-with-heading-medium-size-lg-desktop
    • +
  • $ouds-size-icon-with-heading-medium-size-lg-mobile
    • +
  • $ouds-size-icon-with-heading-medium-size-lg-tablet
    • +
  • $ouds-size-icon-with-heading-medium-size-md-desktop
    • +
  • $ouds-size-icon-with-heading-medium-size-md-mobile
    • +
  • $ouds-size-icon-with-heading-medium-size-md-tablet
    • +
  • $ouds-size-icon-with-heading-medium-size-sm-desktop
    • +
  • $ouds-size-icon-with-heading-medium-size-sm-mobile
    • +
  • $ouds-size-icon-with-heading-medium-size-sm-tablet
    • +
  • $ouds-size-icon-with-heading-small-size-lg-desktop
    • +
  • $ouds-size-icon-with-heading-small-size-lg-mobile
    • +
  • $ouds-size-icon-with-heading-small-size-lg-tablet
    • +
  • $ouds-size-icon-with-heading-small-size-md-desktop
    • +
  • $ouds-size-icon-with-heading-small-size-md-mobile
    • +
  • $ouds-size-icon-with-heading-small-size-md-tablet
    • +
  • $ouds-size-icon-with-heading-small-size-sm-desktop
    • +
  • $ouds-size-icon-with-heading-small-size-sm-mobile
    • +
  • $ouds-size-icon-with-heading-small-size-sm-tablet
    • +
  • $ouds-size-icon-with-heading-xlarge-size-lg-desktop
    • +
  • $ouds-size-icon-with-heading-xlarge-size-lg-mobile
    • +
  • $ouds-size-icon-with-heading-xlarge-size-lg-tablet
    • +
  • $ouds-size-icon-with-heading-xlarge-size-md-desktop
    • +
  • $ouds-size-icon-with-heading-xlarge-size-md-mobile
    • +
  • $ouds-size-icon-with-heading-xlarge-size-md-tablet
    • +
  • $ouds-size-icon-with-heading-xlarge-size-sm-desktop
    • +
  • $ouds-size-icon-with-heading-xlarge-size-sm-mobile
    • +
  • $ouds-size-icon-with-heading-xlarge-size-sm-tablet
    • +
  • $ouds-size-icon-with-label-large-size-lg
    • +
  • $ouds-size-icon-with-label-large-size-md
    • +
  • $ouds-size-icon-with-label-large-size-sm
    • +
  • $ouds-size-icon-with-label-large-size-xl
    • +
  • $ouds-size-icon-with-label-large-size-xs
    • +
  • $ouds-size-icon-with-label-medium-size-lg
    • +
  • $ouds-size-icon-with-label-medium-size-md
    • +
  • $ouds-size-icon-with-label-medium-size-sm
    • +
  • $ouds-size-icon-with-label-small-size-lg
    • +
  • $ouds-size-icon-with-label-small-size-md
    • +
  • $ouds-size-icon-with-label-small-size-sm
    • +
  • $ouds-size-icon-with-label-xlarge-size-lg
    • +
  • $ouds-size-icon-with-label-xlarge-size-md
    • +
  • $ouds-size-icon-with-label-xlarge-size-sm
    • +
  • $ouds-size-max-width-grid
    • +
  • $ouds-size-max-width-type-body-large-desktop
    • +
  • $ouds-size-max-width-type-body-large-mobile
    • +
  • $ouds-size-max-width-type-body-large-tablet
    • +
  • $ouds-size-max-width-type-body-medium-desktop
    • +
  • $ouds-size-max-width-type-body-medium-mobile
    • +
  • $ouds-size-max-width-type-body-medium-tablet
    • +
  • $ouds-size-max-width-type-body-small-desktop
    • +
  • $ouds-size-max-width-type-body-small-mobile
    • +
  • $ouds-size-max-width-type-body-small-tablet
    • +
  • $ouds-size-max-width-type-display-large-desktop
    • +
  • $ouds-size-max-width-type-display-large-mobile
    • +
  • $ouds-size-max-width-type-display-large-tablet
    • +
  • $ouds-size-max-width-type-display-medium-desktop
    • +
  • $ouds-size-max-width-type-display-medium-mobile
    • +
  • $ouds-size-max-width-type-display-medium-tablet
    • +
  • $ouds-size-max-width-type-display-small-desktop
    • +
  • $ouds-size-max-width-type-display-small-mobile
    • +
  • $ouds-size-max-width-type-display-small-tablet
    • +
  • $ouds-size-max-width-type-heading-large-desktop
    • +
  • $ouds-size-max-width-type-heading-large-mobile
    • +
  • $ouds-size-max-width-type-heading-large-tablet
    • +
  • $ouds-size-max-width-type-heading-medium-desktop
    • +
  • $ouds-size-max-width-type-heading-medium-mobile
    • +
  • $ouds-size-max-width-type-heading-medium-tablet
    • +
  • $ouds-size-max-width-type-heading-small-desktop
    • +
  • $ouds-size-max-width-type-heading-small-mobile
    • +
  • $ouds-size-max-width-type-heading-small-tablet
    • +
  • $ouds-size-max-width-type-heading-xlarge-desktop
    • +
  • $ouds-size-max-width-type-heading-xlarge-mobile
    • +
  • $ouds-size-max-width-type-heading-xlarge-tablet
  • $ouds-space-fixed-huge
  • $ouds-space-fixed-jumbo
  • $ouds-space-fixed-medium
    • @@ -711,27 +993,27 @@ All responsive classes, helpers, and utilities have been updated accordingly to
  • --bs-font-max-width-body-large
  • --bs-font-max-width-body-medium
  • --bs-font-max-width-body-small
    • -
  • --bs-icon-short-with-heading-xlarge
    • -
  • --bs-icon-medium-with-heading-xlarge
    • -
  • --bs-icon-tall-with-heading-xlarge
    • -
  • --bs-icon-short-with-heading-large
    • -
  • --bs-icon-medium-with-heading-large
    • -
  • --bs-icon-tall-with-heading-large
    • -
  • --bs-icon-short-with-heading-medium
    • -
  • --bs-icon-medium-with-heading-medium
    • -
  • --bs-icon-tall-with-heading-medium
    • -
  • --bs-icon-short-with-heading-small
    • -
  • --bs-icon-medium-with-heading-small
    • -
  • --bs-icon-tall-with-heading-small
    • -
  • --bs-icon-short-with-body-large
    • -
  • --bs-icon-medium-with-body-large
    • -
  • --bs-icon-tall-with-body-large
    • -
  • --bs-icon-short-with-body-medium
    • -
  • --bs-icon-medium-with-body-medium
    • -
  • --bs-icon-tall-with-body-medium
    • -
  • --bs-icon-short-with-body-small
    • -
  • --bs-icon-medium-with-body-small
    • -
  • --bs-icon-tall-with-body-small
    • +
  • --bs-icon-lg-with-body-large
    • +
  • --bs-icon-lg-with-body-medium
    • +
  • --bs-icon-lg-with-body-small
    • +
  • --bs-icon-lg-with-heading-large
    • +
  • --bs-icon-lg-with-heading-medium
    • +
  • --bs-icon-lg-with-heading-small
    • +
  • --bs-icon-lg-with-heading-xlarge
    • +
  • --bs-icon-md-with-body-large
    • +
  • --bs-icon-md-with-body-medium
    • +
  • --bs-icon-md-with-body-small
    • +
  • --bs-icon-md-with-heading-large
    • +
  • --bs-icon-md-with-heading-medium
    • +
  • --bs-icon-md-with-heading-small
    • +
  • --bs-icon-md-with-heading-xlarge
    • +
  • --bs-icon-sm-with-body-large
    • +
  • --bs-icon-sm-with-body-medium
    • +
  • --bs-icon-sm-with-body-small
    • +
  • --bs-icon-sm-with-heading-large
    • +
  • --bs-icon-sm-with-heading-medium
    • +
  • --bs-icon-sm-with-heading-small
    • +
  • --bs-icon-sm-with-heading-xlarge
  • --bs-space-scaled-medium
  • --bs-space-scaled-none
  • --bs-space-scaled-short
    • @@ -904,4 +1186,4 @@ All responsive classes, helpers, and utilities have been updated accordingly to ## Sass mixins -- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-small"`, `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]({{< docsref "/content/typography/#sass-mixins" >}}) for more details. +- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]({{< docsref "/content/typography/#sass-mixins" >}}) for more details. diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 2810b5b866..66e7a8cbf3 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -102,12 +102,12 @@ toc: true #### Opacity -- Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong`. +- Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong` and `.opacity-transparent` has been renamed `.opacity-invisible`. #### Shadow - New Shadows utilities: - `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-overlay-default`, `.shadow-overlay-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. + `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-default`, `.shadow-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. #### Sizing @@ -268,6 +268,7 @@ toc: true
  • $ouds-border-width-50
  • $ouds-border-width-75
  • $ouds-border-width-100
    • +
  • $ouds-border-width-125
  • $ouds-border-width-default
  • $ouds-border-width-medium
  • $ouds-border-width-none
    • @@ -305,27 +306,35 @@ toc: true
  • $ouds-elevation-blur-300
  • $ouds-elevation-blur-400
  • $ouds-elevation-blur-600
    • +
  • $ouds-elevation-blur-default
  • $ouds-elevation-blur-drag
    • +
  • $ouds-elevation-blur-emphasized
  • $ouds-elevation-blur-none
    • -
  • $ouds-elevation-blur-overlay-default
    • -
  • $ouds-elevation-blur-overlay-emphasized
  • $ouds-elevation-blur-raised
  • $ouds-elevation-blur-sticky-default
  • $ouds-elevation-blur-sticky-emphasized
  • $ouds-elevation-blur-sticky-navigation-scrolled
    • +
  • $ouds-elevation-color-default-dark
    • +
  • $ouds-elevation-color-default-light
    • +
  • $ouds-elevation-color-drag-dark
  • $ouds-elevation-color-drag-light
    • +
  • $ouds-elevation-color-emphasized-dark
    • +
  • $ouds-elevation-color-emphasized-light
    • +
  • $ouds-elevation-color-none-dark
  • $ouds-elevation-color-none-light
    • -
  • $ouds-elevation-color-overlay-default-light
    • -
  • $ouds-elevation-color-overlay-emphasized-light
    • +
  • $ouds-elevation-color-raised-dark
  • $ouds-elevation-color-raised-light
    • +
  • $ouds-elevation-color-sticky-default-dark
  • $ouds-elevation-color-sticky-default-light
    • +
  • $ouds-elevation-color-sticky-emphasized-dark
  • $ouds-elevation-color-sticky-emphasized-light
  • $ouds-elevation-color-sticky-navigation-scrolled-light
    • +
  • $ouds-elevation-color-sticky-navigation-scrolled-dark
    • +
  • $ouds-elevation-default
  • $ouds-elevation-drag
    • +
  • $ouds-elevation-emphasized
  • $ouds-elevation-focus
  • $ouds-elevation-none
    • -
  • $ouds-elevation-overlay-default
    • -
  • $ouds-elevation-overlay-emphasized
  • $ouds-elevation-raised
  • $ouds-elevation-spread-0
  • $ouds-elevation-spread-300
    • @@ -333,8 +342,8 @@ toc: true
  • $ouds-elevation-spread-n100
  • $ouds-elevation-spread-n300
  • $ouds-elevation-spread-none
    • -
  • $ouds-elevation-spread-overlay-default
    • -
  • $ouds-elevation-spread-overlay-emphasized
    • +
  • $ouds-elevation-spread-default
    • +
  • $ouds-elevation-spread-emphasized
  • $ouds-elevation-spread-raised
  • $ouds-elevation-spread-sticky-default
  • $ouds-elevation-spread-sticky-emphasized
    • @@ -345,8 +354,8 @@ toc: true
  • $ouds-elevation-x-0
  • $ouds-elevation-x-drag
  • $ouds-elevation-x-none
    • -
  • $ouds-elevation-x-overlay-default
    • -
  • $ouds-elevation-x-overlay-emphasized
    • +
  • $ouds-elevation-x-default
    • +
  • $ouds-elevation-x-emphasized
  • $ouds-elevation-x-raised
  • $ouds-elevation-x-sticky-default
  • $ouds-elevation-x-sticky-emphasized
    • @@ -358,14 +367,173 @@ toc: true
  • $ouds-elevation-y-500
  • $ouds-elevation-y-drag
  • $ouds-elevation-y-none
    • -
  • $ouds-elevation-y-overlay-default
    • -
  • $ouds-elevation-y-overlay-emphasized
    • +
  • $ouds-elevation-y-default
    • +
  • $ouds-elevation-y-emphasized
  • $ouds-elevation-y-raised
  • $ouds-elevation-y-sticky-default
  • $ouds-elevation-y-sticky-emphasized
  • $ouds-elevation-y-sticky-navigation-scrolled
    • +
  • $ouds-font-family
    • +
  • $ouds-font-family-brand-default
  • $ouds-font-family-monospace-stack
  • $ouds-font-family-sans-serif-stack
    • +
  • $ouds-font-letter-spacing-150
    • +
  • $ouds-font-letter-spacing-200
    • +
  • $ouds-font-letter-spacing-250
    • +
  • $ouds-font-letter-spacing-300
    • +
  • $ouds-font-letter-spacing-350
    • +
  • $ouds-font-letter-spacing-450
    • +
  • $ouds-font-letter-spacing-550
    • +
  • $ouds-font-letter-spacing-650
    • +
  • $ouds-font-letter-spacing-750
    • +
  • $ouds-font-letter-spacing-850
    • +
  • $ouds-font-letter-spacing-1050
    • +
  • $ouds-font-letter-spacing-1250
    • +
  • $ouds-font-letter-spacing-1450
    • +
  • $ouds-font-letter-spacing-1850
    • +
  • $ouds-font-letter-spacing-body-large-desktop
    • +
  • $ouds-font-letter-spacing-body-large-mobile
    • +
  • $ouds-font-letter-spacing-body-large-tablet
    • +
  • $ouds-font-letter-spacing-body-medium-desktop
    • +
  • $ouds-font-letter-spacing-body-medium-mobile
    • +
  • $ouds-font-letter-spacing-body-medium-tablet
    • +
  • $ouds-font-letter-spacing-body-small-desktop
    • +
  • $ouds-font-letter-spacing-body-small-mobile
    • +
  • $ouds-font-letter-spacing-body-small-tablet
    • +
  • $ouds-font-letter-spacing-code-medium:
    • +
  • $ouds-font-letter-spacing-display-large-desktop
    • +
  • $ouds-font-letter-spacing-display-large-mobile
    • +
  • $ouds-font-letter-spacing-display-large-tablet
    • +
  • $ouds-font-letter-spacing-display-medium-desktop
    • +
  • $ouds-font-letter-spacing-display-medium-mobile
    • +
  • $ouds-font-letter-spacing-display-medium-tablet
    • +
  • $ouds-font-letter-spacing-display-small-desktop
    • +
  • $ouds-font-letter-spacing-display-small-mobile
    • +
  • $ouds-font-letter-spacing-display-small-tablet
    • +
  • $ouds-font-letter-spacing-heading-large-desktop
    • +
  • $ouds-font-letter-spacing-heading-large-mobile
    • +
  • $ouds-font-letter-spacing-heading-large-tablet
    • +
  • $ouds-font-letter-spacing-heading-medium-desktop
    • +
  • $ouds-font-letter-spacing-heading-medium-mobile
    • +
  • $ouds-font-letter-spacing-heading-medium-tablet
    • +
  • $ouds-font-letter-spacing-heading-small-desktop
    • +
  • $ouds-font-letter-spacing-heading-small-mobile
    • +
  • $ouds-font-letter-spacing-heading-small-tablet
    • +
  • $ouds-font-letter-spacing-heading-xlarge-desktop
    • +
  • $ouds-font-letter-spacing-heading-xlarge-mobile
    • +
  • $ouds-font-letter-spacing-heading-xlarge-tablet
    • +
  • $ouds-font-letter-spacing-label-large
    • +
  • $ouds-font-letter-spacing-label-medium
    • +
  • $ouds-font-letter-spacing-label-small
    • +
  • $ouds-font-letter-spacing-label-xlarge
    • +
  • $ouds-font-line-height-250
    • +
  • $ouds-font-line-height-350
    • +
  • $ouds-font-line-height-450
    • +
  • $ouds-font-line-height-550
    • +
  • $ouds-font-line-height-650
    • +
  • $ouds-font-line-height-750
    • +
  • $ouds-font-line-height-850
    • +
  • $ouds-font-line-height-950
    • +
  • $ouds-font-line-height-1050
    • +
  • $ouds-font-line-height-1250
    • +
  • $ouds-font-line-height-1450
    • +
  • $ouds-font-line-height-1850
    • +
  • $ouds-font-line-height-2050
    • +
  • $ouds-font-line-height-body-large-desktop
    • +
  • $ouds-font-line-height-body-large-mobile
    • +
  • $ouds-font-line-height-body-large-tablet
    • +
  • $ouds-font-line-height-body-medium-desktop
    • +
  • $ouds-font-line-height-body-medium-mobile
    • +
  • $ouds-font-line-height-body-medium-tablet
    • +
  • $ouds-font-line-height-body-small-desktop
    • +
  • $ouds-font-line-height-body-small-mobile
    • +
  • $ouds-font-line-height-body-small-tablet
    • +
  • $ouds-font-line-height-code-medium
    • +
  • $ouds-font-line-height-display-large-desktop
    • +
  • $ouds-font-line-height-display-large-mobile
    • +
  • $ouds-font-line-height-display-large-tablet
    • +
  • $ouds-font-line-height-display-medium-desktop
    • +
  • $ouds-font-line-height-display-medium-mobile
    • +
  • $ouds-font-line-height-display-medium-tablet
    • +
  • $ouds-font-line-height-display-small-desktop
    • +
  • $ouds-font-line-height-display-small-mobile
    • +
  • $ouds-font-line-height-display-small-tablet
    • +
  • $ouds-font-line-height-heading-large-desktop
    • +
  • $ouds-font-line-height-heading-large-mobile
    • +
  • $ouds-font-line-height-heading-large-tablet
    • +
  • $ouds-font-line-height-heading-medium-desktop
    • +
  • $ouds-font-line-height-heading-medium-mobile
    • +
  • $ouds-font-line-height-heading-medium-tablet
    • +
  • $ouds-font-line-height-heading-small-desktop
    • +
  • $ouds-font-line-height-heading-small-mobile
    • +
  • $ouds-font-line-height-heading-small-tablet
    • +
  • $ouds-font-line-height-heading-xlarge-desktop
    • +
  • $ouds-font-line-height-heading-xlarge-mobile
    • +
  • $ouds-font-line-height-heading-xlarge-tablet
    • +
  • $ouds-font-line-height-label-large
    • +
  • $ouds-font-line-height-label-medium
    • +
  • $ouds-font-line-height-label-small
    • +
  • $ouds-font-line-height-label-xlarge
    • +
  • $ouds-font-size-150
    • +
  • $ouds-font-size-200
    • +
  • $ouds-font-size-250
    • +
  • $ouds-font-size-300
    • +
  • $ouds-font-size-350
    • +
  • $ouds-font-size-450
    • +
  • $ouds-font-size-550
    • +
  • $ouds-font-size-650
    • +
  • $ouds-font-size-750
    • +
  • $ouds-font-size-850
    • +
  • $ouds-font-size-1050
    • +
  • $ouds-font-size-1250
    • +
  • $ouds-font-size-1450
    • +
  • $ouds-font-size-1850
    • +
  • $ouds-font-size-body-large-desktop
    • +
  • $ouds-font-size-body-large-mobile
    • +
  • $ouds-font-size-body-large-tablet
    • +
  • $ouds-font-size-body-medium-desktop
    • +
  • $ouds-font-size-body-medium-mobile
    • +
  • $ouds-font-size-body-medium-tablet
    • +
  • $ouds-font-size-body-small-desktop
    • +
  • $ouds-font-size-body-small-mobile
    • +
  • $ouds-font-size-body-small-tablet
    • +
  • $ouds-font-size-code-medium: $oud
    • +
  • $ouds-font-size-display-large-desktop
    • +
  • $ouds-font-size-display-large-mobile
    • +
  • $ouds-font-size-display-large-tablet
    • +
  • $ouds-font-size-display-medium-desktop
    • +
  • $ouds-font-size-display-medium-mobile
    • +
  • $ouds-font-size-display-medium-tablet
    • +
  • $ouds-font-size-display-small-desktop
    • +
  • $ouds-font-size-display-small-mobile
    • +
  • $ouds-font-size-display-small-tablet
    • +
  • $ouds-font-size-heading-large-desktop
    • +
  • $ouds-font-size-heading-large-mobile
    • +
  • $ouds-font-size-heading-large-tablet
    • +
  • $ouds-font-size-heading-medium-desktop
    • +
  • $ouds-font-size-heading-medium-mobile
    • +
  • $ouds-font-size-heading-medium-tablet
    • +
  • $ouds-font-size-heading-small-desktop
    • +
  • $ouds-font-size-heading-small-mobile
    • +
  • $ouds-font-size-heading-small-tablet
    • +
  • $ouds-font-size-heading-xlarge-desktop
    • +
  • $ouds-font-size-heading-xlarge-mobile
    • +
  • $ouds-font-size-heading-xlarge-tablet
    • +
  • $ouds-font-size-label-large
    • +
  • $ouds-font-size-label-medium
    • +
  • $ouds-font-size-label-small
    • +
  • $ouds-font-size-label-xlarge
    • +
  • $ouds-font-weight-400
    • +
  • $ouds-font-weight-700
    • +
  • $ouds-font-weight-code
    • +
  • $ouds-font-weight-default
    • +
  • $ouds-font-weight-strong
    • +
  • $ouds-font-weight-body-default
    • +
  • $ouds-font-weight-body-strong
    • +
  • $ouds-font-weight-display
    • +
  • $ouds-font-weight-heading
    • +
  • $ouds-font-weight-label-default
    • +
  • $ouds-font-weight-label-strong
  • $ouds-grid-2xl-column-gap
  • $ouds-grid-2xl-margin
  • $ouds-grid-2xl-min-width
    • @@ -409,13 +577,132 @@ toc: true
  • $ouds-grid-xs-column-gap
  • $ouds-grid-xs-margin
  • $ouds-grid-xs-min-width
    • +
  • $ouds-opacity-40
    • +
  • $ouds-opacity-160
    • +
  • $ouds-opacity-320
    • +
  • $ouds-opacity-640
    • +
  • $ouds-opacity-1000
    • +
  • $ouds-opacity-invisible
  • $ouds-opacity-medium
  • $ouds-opacity-opaque
  • $ouds-opacity-strong
    • -
  • $ouds-opacity-transparent
  • $ouds-opacity-weak
  • $ouds-opacity-weaker
    • +
  • $ouds-size-icon-decorative-2xl
    • +
  • $ouds-size-icon-decorative-2xs
    • +
  • $ouds-size-icon-decorative-lg
    • +
  • $ouds-size-icon-decorative-md
    • +
  • $ouds-size-icon-decorative-sm
    • +
  • $ouds-size-icon-decorative-xl
    • +
  • $ouds-size-icon-decorative-xs
    • +
  • $ouds-size-icon-with-body-large-size-lg-desktop
    • +
  • $ouds-size-icon-with-body-large-size-lg-mobile
    • +
  • $ouds-size-icon-with-body-large-size-lg-tablet
    • +
  • $ouds-size-icon-with-body-large-size-md-desktop
    • +
  • $ouds-size-icon-with-body-large-size-md-mobile
    • +
  • $ouds-size-icon-with-body-large-size-md-tablet
    • +
  • $ouds-size-icon-with-body-large-size-sm-desktop
    • +
  • $ouds-size-icon-with-body-large-size-sm-mobile
    • +
  • $ouds-size-icon-with-body-large-size-sm-tablet
    • +
  • $ouds-size-icon-with-body-medium-size-lg-desktop
    • +
  • $ouds-size-icon-with-body-medium-size-lg-mobile
    • +
  • $ouds-size-icon-with-body-medium-size-lg-tablet
    • +
  • $ouds-size-icon-with-body-medium-size-md-desktop
    • +
  • $ouds-size-icon-with-body-medium-size-md-mobile
    • +
  • $ouds-size-icon-with-body-medium-size-md-tablet
    • +
  • $ouds-size-icon-with-body-medium-size-sm-desktop
    • +
  • $ouds-size-icon-with-body-medium-size-sm-mobile
    • +
  • $ouds-size-icon-with-body-medium-size-sm-tablet
    • +
  • $ouds-size-icon-with-body-small-size-lg-desktop
    • +
  • $ouds-size-icon-with-body-small-size-lg-mobile
    • +
  • $ouds-size-icon-with-body-small-size-lg-tablet
    • +
  • $ouds-size-icon-with-body-small-size-md-desktop
    • +
  • $ouds-size-icon-with-body-small-size-md-mobile
    • +
  • $ouds-size-icon-with-body-small-size-md-tablet
    • +
  • $ouds-size-icon-with-body-small-size-sm-desktop
    • +
  • $ouds-size-icon-with-body-small-size-sm-mobile
    • +
  • $ouds-size-icon-with-body-small-size-sm-tablet
    • +
  • $ouds-size-icon-with-heading-large-size-lg-desktop
    • +
  • $ouds-size-icon-with-heading-large-size-lg-mobile
    • +
  • $ouds-size-icon-with-heading-large-size-lg-tablet
    • +
  • $ouds-size-icon-with-heading-large-size-md-desktop
    • +
  • $ouds-size-icon-with-heading-large-size-md-mobile
    • +
  • $ouds-size-icon-with-heading-large-size-md-tablet
    • +
  • $ouds-size-icon-with-heading-large-size-sm-desktop
    • +
  • $ouds-size-icon-with-heading-large-size-sm-mobile
    • +
  • $ouds-size-icon-with-heading-large-size-sm-tablet
    • +
  • $ouds-size-icon-with-heading-medium-size-lg-desktop
    • +
  • $ouds-size-icon-with-heading-medium-size-lg-mobile
    • +
  • $ouds-size-icon-with-heading-medium-size-lg-tablet
    • +
  • $ouds-size-icon-with-heading-medium-size-md-desktop
    • +
  • $ouds-size-icon-with-heading-medium-size-md-mobile
    • +
  • $ouds-size-icon-with-heading-medium-size-md-tablet
    • +
  • $ouds-size-icon-with-heading-medium-size-sm-desktop
    • +
  • $ouds-size-icon-with-heading-medium-size-sm-mobile
    • +
  • $ouds-size-icon-with-heading-medium-size-sm-tablet
    • +
  • $ouds-size-icon-with-heading-small-size-lg-desktop
    • +
  • $ouds-size-icon-with-heading-small-size-lg-mobile
    • +
  • $ouds-size-icon-with-heading-small-size-lg-tablet
    • +
  • $ouds-size-icon-with-heading-small-size-md-desktop
    • +
  • $ouds-size-icon-with-heading-small-size-md-mobile
    • +
  • $ouds-size-icon-with-heading-small-size-md-tablet
    • +
  • $ouds-size-icon-with-heading-small-size-sm-desktop
    • +
  • $ouds-size-icon-with-heading-small-size-sm-mobile
    • +
  • $ouds-size-icon-with-heading-small-size-sm-tablet
    • +
  • $ouds-size-icon-with-heading-xlarge-size-lg-desktop
    • +
  • $ouds-size-icon-with-heading-xlarge-size-lg-mobile
    • +
  • $ouds-size-icon-with-heading-xlarge-size-lg-tablet
    • +
  • $ouds-size-icon-with-heading-xlarge-size-md-desktop
    • +
  • $ouds-size-icon-with-heading-xlarge-size-md-mobile
    • +
  • $ouds-size-icon-with-heading-xlarge-size-md-tablet
    • +
  • $ouds-size-icon-with-heading-xlarge-size-sm-desktop
    • +
  • $ouds-size-icon-with-heading-xlarge-size-sm-mobile
    • +
  • $ouds-size-icon-with-heading-xlarge-size-sm-tablet
    • +
  • $ouds-size-icon-with-label-large-size-lg
    • +
  • $ouds-size-icon-with-label-large-size-md
    • +
  • $ouds-size-icon-with-label-large-size-sm
    • +
  • $ouds-size-icon-with-label-large-size-xl
    • +
  • $ouds-size-icon-with-label-large-size-xs
    • +
  • $ouds-size-icon-with-label-medium-size-lg
    • +
  • $ouds-size-icon-with-label-medium-size-md
    • +
  • $ouds-size-icon-with-label-medium-size-sm
    • +
  • $ouds-size-icon-with-label-small-size-lg
    • +
  • $ouds-size-icon-with-label-small-size-md
    • +
  • $ouds-size-icon-with-label-small-size-sm
    • +
  • $ouds-size-icon-with-label-xlarge-size-lg
    • +
  • $ouds-size-icon-with-label-xlarge-size-md
    • +
  • $ouds-size-icon-with-label-xlarge-size-sm
  • $ouds-size-max-width-grid
    • +
  • $ouds-size-max-width-type-body-large-desktop
    • +
  • $ouds-size-max-width-type-body-large-mobile
    • +
  • $ouds-size-max-width-type-body-large-tablet
    • +
  • $ouds-size-max-width-type-body-medium-desktop
    • +
  • $ouds-size-max-width-type-body-medium-mobile
    • +
  • $ouds-size-max-width-type-body-medium-tablet
    • +
  • $ouds-size-max-width-type-body-small-desktop
    • +
  • $ouds-size-max-width-type-body-small-mobile
    • +
  • $ouds-size-max-width-type-body-small-tablet
    • +
  • $ouds-size-max-width-type-display-large-desktop
    • +
  • $ouds-size-max-width-type-display-large-mobile
    • +
  • $ouds-size-max-width-type-display-large-tablet
    • +
  • $ouds-size-max-width-type-display-medium-desktop
    • +
  • $ouds-size-max-width-type-display-medium-mobile
    • +
  • $ouds-size-max-width-type-display-medium-tablet
    • +
  • $ouds-size-max-width-type-display-small-desktop
    • +
  • $ouds-size-max-width-type-display-small-mobile
    • +
  • $ouds-size-max-width-type-display-small-tablet
    • +
  • $ouds-size-max-width-type-heading-large-desktop
    • +
  • $ouds-size-max-width-type-heading-large-mobile
    • +
  • $ouds-size-max-width-type-heading-large-tablet
    • +
  • $ouds-size-max-width-type-heading-medium-desktop
    • +
  • $ouds-size-max-width-type-heading-medium-mobile
    • +
  • $ouds-size-max-width-type-heading-medium-tablet
    • +
  • $ouds-size-max-width-type-heading-small-desktop
    • +
  • $ouds-size-max-width-type-heading-small-mobile
    • +
  • $ouds-size-max-width-type-heading-small-tablet
    • +
  • $ouds-size-max-width-type-heading-xlarge-desktop
    • +
  • $ouds-size-max-width-type-heading-xlarge-mobile
    • +
  • $ouds-size-max-width-type-heading-xlarge-tablet
  • $ouds-space-fixed-huge
  • $ouds-space-fixed-jumbo
  • $ouds-space-fixed-medium
    • @@ -632,27 +919,27 @@ toc: true
  • --bs-font-max-width-body-large
  • --bs-font-max-width-body-medium
  • --bs-font-max-width-body-small
    • -
  • --bs-icon-short-with-heading-xlarge
    • -
  • --bs-icon-medium-with-heading-xlarge
    • -
  • --bs-icon-tall-with-heading-xlarge
    • -
  • --bs-icon-short-with-heading-large
    • -
  • --bs-icon-medium-with-heading-large
    • -
  • --bs-icon-tall-with-heading-large
    • -
  • --bs-icon-short-with-heading-medium
    • -
  • --bs-icon-medium-with-heading-medium
    • -
  • --bs-icon-tall-with-heading-medium
    • -
  • --bs-icon-short-with-heading-small
    • -
  • --bs-icon-medium-with-heading-small
    • -
  • --bs-icon-tall-with-heading-small
    • -
  • --bs-icon-short-with-body-large
    • -
  • --bs-icon-medium-with-body-large
    • -
  • --bs-icon-tall-with-body-large
    • -
  • --bs-icon-short-with-body-medium
    • -
  • --bs-icon-medium-with-body-medium
    • -
  • --bs-icon-tall-with-body-medium
    • -
  • --bs-icon-short-with-body-small
    • -
  • --bs-icon-medium-with-body-small
    • -
  • --bs-icon-tall-with-body-small
    • +
  • --bs-icon-lg-with-body-large
    • +
  • --bs-icon-lg-with-body-medium
    • +
  • --bs-icon-lg-with-body-small
    • +
  • --bs-icon-lg-with-heading-large
    • +
  • --bs-icon-lg-with-heading-medium
    • +
  • --bs-icon-lg-with-heading-small
    • +
  • --bs-icon-lg-with-heading-xlarge
    • +
  • --bs-icon-md-with-body-large
    • +
  • --bs-icon-md-with-body-medium
    • +
  • --bs-icon-md-with-body-small
    • +
  • --bs-icon-md-with-heading-large
    • +
  • --bs-icon-md-with-heading-medium
    • +
  • --bs-icon-md-with-heading-small
    • +
  • --bs-icon-md-with-heading-xlarge
    • +
  • --bs-icon-sm-with-body-large
    • +
  • --bs-icon-sm-with-body-medium
    • +
  • --bs-icon-sm-with-body-small
    • +
  • --bs-icon-sm-with-heading-large
    • +
  • --bs-icon-sm-with-heading-medium
    • +
  • --bs-icon-sm-with-heading-small
    • +
  • --bs-icon-sm-with-heading-xlarge
  • --bs-space-scaled-medium
  • --bs-space-scaled-none
  • --bs-space-scaled-short
    • @@ -666,9 +953,20 @@ toc: true +-
    + Warning Dropped Sass variables: +
      +
    • $ouds-opacity-100
      • +
    • $ouds-opacity-300
      • +
    • $ouds-opacity-500
      • +
    • $ouds-opacity-700
      • +
    • $ouds-opacity-900
      • +
    +
    + ### Sass mixins -- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-small"`, `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]({{< docsref "/content/typography/#sass-mixins" >}}) for more details. +- New The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of: `"code-medium"`, `"label-small"`, `"label-medium"`, `"label-large"`, `"label-xlarge"`, `"body-small"`, `"body-medium"`, `"body-large"`, `"heading-small"`, `"heading-medium"`, `"heading-large"`, `"heading-xlarge"`, `"display-small"`, `"display-medium"`, `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]({{< docsref "/content/typography/#sass-mixins" >}}) for more details. ## v0.0.3 @@ -686,7 +984,7 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers, ### CSS and Sass variables - New `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode. - - For instance, without the Bootstrap compatibility mode, you won't have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the OUDS Web utilities such as `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, etc. [Learn more about Bootstrap compatibility]({{< docsref "/extend/approach/#bootstrap-compatibility" >}}). + - For instance, without the Bootstrap compatibility mode, you won't have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the OUDS Web utilities such as `.opacity-invisible`, `.opacity-weaker`, `.opacity-weak`, etc. [Learn more about Bootstrap compatibility]({{< docsref "/extend/approach/#bootstrap-compatibility" >}}). - New OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables. diff --git a/site/content/docs/0.0/utilities/opacity.md b/site/content/docs/0.0/utilities/opacity.md index 60eeec3d62..4a224a8ab0 100644 --- a/site/content/docs/0.0/utilities/opacity.md +++ b/site/content/docs/0.0/utilities/opacity.md @@ -18,7 +18,7 @@ Set the opacity of an element using `.opacity-{value}` utilities.
    -
    +
    ```html @@ -27,7 +27,7 @@ Set the opacity of an element using `.opacity-{value}` utilities.
    ...
    ...
    ...
    -
    ...
    +
    ...
    ``` {{< bootstrap-compatibility >}} diff --git a/site/content/docs/0.0/utilities/shadows.md b/site/content/docs/0.0/utilities/shadows.md index eb4cab1970..13ede6d34c 100644 --- a/site/content/docs/0.0/utilities/shadows.md +++ b/site/content/docs/0.0/utilities/shadows.md @@ -19,10 +19,10 @@ You can quickly add or remove a shadow with our `box-shadow` utility {{< example class="overflow-hidden" >}}
    No shadow
    -
    Raised shadow
    +
    Default shadow
    Drag shadow
    -
    Overlay default shadow
    -
    Overlay emphasized shadow
    +
    Emphasized shadow
    +
    Raised shadow
    Sticky default shadow
    Sticky emphasized shadow
    Sticky navigation shadow
    diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index 75ae6c14f4..9a149bce7b 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -18,7 +18,7 @@
  • {{- if $group.icon }} - + {{- end }} {{ $group.title }}