From 5e65b7daf593c7ab25c84068030c6a2ef78cd5f9 Mon Sep 17 00:00:00 2001 From: boosted-bot Date: Thu, 24 Oct 2024 14:35:46 +0200 Subject: [PATCH] chore: update tokens --- scss/tokens/_component.scss | 98 ++++++++++++++++++++- scss/tokens/_raw.scss | 4 +- scss/tokens/_semantic.scss | 168 +++++++++++++++++++----------------- 3 files changed, 185 insertions(+), 85 deletions(-) diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index 9ca7339bf4..737ee242c4 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -1,2 +1,96 @@ -//// Component applications -//// Depends on semantic applications +// Component application +// Depends on semantic applications + +// Button + +// scss-docs-start ouds-component-button +$ouds-button-size-max-height: $ouds-dimension-600 !default; +$ouds-button-size-min-height: $ouds-dimension-600 !default; +$ouds-button-size-min-width: $ouds-dimension-600 !default; +$ouds-button-border-radius: $ouds-border-radius-none !default; +$ouds-button-border-width-default: $ouds-border-width-default !default; +$ouds-button-border-width-default-interaction: $ouds-border-width-medium !default; +$ouds-button-border-width-minimal: $ouds-border-width-none !default; +$ouds-button-border-width-minimal-interaction: $ouds-border-width-none !default; +$ouds-button-color-background-default-disabled: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-enabled: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-focus: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-focus-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-hover: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-hover-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-loading: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-loading-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-pressed: $ouds-color-transparent-default !default; +$ouds-button-color-background-default-pressed-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-background-minimal-disabled: $ouds-color-transparent-default !default; +$ouds-button-color-background-minimal-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-background-minimal-enabled: $ouds-color-transparent-default !default; +$ouds-button-color-background-minimal-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-disabled: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-disabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-enabled: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-enabled-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-hover: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-hover-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-loading: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-loading-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-pressed: $ouds-color-transparent-default !default; +$ouds-button-color-border-minimal-pressed-on-bg-emphasized: $ouds-color-transparent-default !default; +$ouds-button-color-background-minimal-focus: $ouds-color-action-secondary-focus !default; +$ouds-button-color-background-minimal-focus-on-bg-emphasized: $ouds-color-action-secondary-focus-on-bg-emphasized !default; +$ouds-button-color-background-minimal-hover: $ouds-color-action-secondary-hover !default; +$ouds-button-color-background-minimal-hover-on-bg-emphasized: $ouds-color-action-secondary-hover-on-bg-emphasized !default; +$ouds-button-color-background-minimal-loading: $ouds-color-action-secondary-loading !default; +$ouds-button-color-background-minimal-loading-on-bg-emphasized: $ouds-color-action-secondary-loading-on-bg-emphasized !default; +$ouds-button-color-background-minimal-pressed: $ouds-color-action-secondary-pressed !default; +$ouds-button-color-background-minimal-pressed-on-bg-emphasized: $ouds-color-action-secondary-pressed-on-bg-emphasized !default; +$ouds-button-color-border-default-disabled: $ouds-color-action-disabled !default; +$ouds-button-color-border-default-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; +$ouds-button-color-border-default-enabled: $ouds-color-action-primary-enabled !default; +$ouds-button-color-border-default-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; +$ouds-button-color-border-default-hover: $ouds-color-action-primary-hover !default; +$ouds-button-color-border-default-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; +$ouds-button-color-border-default-loading: $ouds-color-action-primary-loading !default; +$ouds-button-color-border-default-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; +$ouds-button-color-border-default-pressed: $ouds-color-action-primary-pressed !default; +$ouds-button-color-border-default-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; +$ouds-button-color-content-default-disabled: $ouds-color-action-disabled !default; +$ouds-button-color-content-default-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; +$ouds-button-color-content-default-enabled: $ouds-color-action-primary-enabled !default; +$ouds-button-color-content-default-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; +$ouds-button-color-content-default-focus: $ouds-color-action-primary-focus !default; +$ouds-button-color-content-default-focus-on-bg-emphasized: $ouds-color-action-primary-focus-on-bg-emphasized !default; +$ouds-button-color-content-default-hover: $ouds-color-action-primary-hover !default; +$ouds-button-color-content-default-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; +$ouds-button-color-content-default-loading: $ouds-color-action-primary-loading !default; +$ouds-button-color-content-default-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; +$ouds-button-color-content-default-pressed: $ouds-color-action-primary-pressed !default; +$ouds-button-color-content-default-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; +$ouds-button-color-content-minimal-disabled: $ouds-color-action-disabled !default; +$ouds-button-color-content-minimal-disabled-on-bg-emphasized: $ouds-color-action-disabled-on-bg-emphasized !default; +$ouds-button-color-content-minimal-enabled: $ouds-color-action-primary-enabled !default; +$ouds-button-color-content-minimal-enabled-on-bg-emphasized: $ouds-color-action-primary-enabled-on-bg-emphasized !default; +$ouds-button-color-content-minimal-focus: $ouds-color-action-primary-focus !default; +$ouds-button-color-content-minimal-focus-on-bg-emphasized: $ouds-color-action-primary-focus-on-bg-emphasized !default; +$ouds-button-color-content-minimal-hover: $ouds-color-action-primary-hover !default; +$ouds-button-color-content-minimal-hover-on-bg-emphasized: $ouds-color-action-primary-hover-on-bg-emphasized !default; +$ouds-button-color-content-minimal-loading: $ouds-color-action-primary-loading !default; +$ouds-button-color-content-minimal-loading-on-bg-emphasized: $ouds-color-action-primary-loading-on-bg-emphasized !default; +$ouds-button-color-content-minimal-pressed: $ouds-color-action-primary-pressed !default; +$ouds-button-color-content-minimal-pressed-on-bg-emphasized: $ouds-color-action-primary-pressed-on-bg-emphasized !default; +$ouds-button-size-icon: $ouds-size-icon-with-label-large-size-shorter !default; +$ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-short !default; +$ouds-button-size-loader: $ouds-size-icon-with-label-large-size-shorter !default; +$ouds-button-space-column-gap-arrow: $ouds-space-column-gap-with-arrow-short !default; +$ouds-button-space-column-gap-icon: $ouds-space-column-gap-with-icon-medium !default; +$ouds-button-space-inset-icon-alone: $ouds-space-inset-medium !default; +$ouds-button-space-padding-block: $ouds-space-padding-block-medium !default; +$ouds-button-space-padding-inline-arrow-end: $ouds-space-padding-inline-with-arrow-tall !default; +$ouds-button-space-padding-inline-arrow-start: $ouds-space-padding-inline-with-arrow-tall !default; +$ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-taller !default; +$ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-tallest !default; +$ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-with-icon-tall !default; +$ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-taller !default; +// scss-docs-end ouds-component-button diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index be8ac7bf39..c2e7a736da 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -118,7 +118,7 @@ $ouds-color-functional-light-gray-160: #eee !default; // $ouds-color-functional-light-gray-320: #d6d6d6 !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-560: #bbb !default; // $ouds-color-functional-light-gray-640: #adadad !default; // $ouds-color-functional-light-gray-720: #a3a3a3 !default; // $ouds-color-functional-light-gray-800: #999 !default; @@ -355,7 +355,7 @@ $ouds-grid-max-width-500: 1319px !default; $ouds-grid-max-width-600: 1639px !default; $ouds-grid-max-width-650: 1680px !default; $ouds-grid-max-width-700: 1879px !default; -$ouds-grid-max-width-800: 1920px !default; +// $ouds-grid-max-width-800: 1920px !default; $ouds-grid-min-width-100: 1px !default; $ouds-grid-min-width-200: 390px !default; $ouds-grid-min-width-300: 480px !default; diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss index 225795b257..5326403e69 100644 --- a/scss/tokens/_semantic.scss +++ b/scss/tokens/_semantic.scss @@ -14,7 +14,7 @@ $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-75 !default; +$ouds-border-width-focus-inset: $ouds-border-width-100 !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; @@ -49,9 +49,10 @@ $ouds-color-brand-neutral-emphasized-lower: $ouds-color-functional-dark-gray-480 $ouds-color-brand-neutral-emphasized-lowest: $ouds-color-functional-dark-gray-400 !default; $ouds-color-brand-neutral-emphasized-medium: $ouds-color-functional-dark-gray-640 !default; $ouds-color-brand-neutral-muted-highest: $ouds-color-functional-dark-gray-160 !default; +$ouds-color-brand-neutral-muted-low: $ouds-color-functional-light-gray-400 !default; $ouds-color-brand-neutral-muted-lower: $ouds-color-functional-light-gray-160 !default; $ouds-color-brand-neutral-muted-lowest: $ouds-color-functional-light-gray-80 !default; -$ouds-color-brand-neutral-muted-medium: $ouds-color-functional-light-gray-400 !default; +$ouds-color-brand-neutral-muted-medium: $ouds-color-functional-light-gray-560 !default; $ouds-color-brand-neutral-muted-white: $ouds-color-functional-white !default; $ouds-color-brand-positive-default: $ouds-color-functional-malachite-500 !default; $ouds-color-brand-positive-highest: $ouds-color-functional-malachite-900 !default; @@ -77,11 +78,12 @@ $ouds-color-decorative-accent-4-muted: $ouds-color-decorative-amethyst-200 !defa $ouds-color-decorative-accent-5-default: $ouds-color-decorative-shocking-pink-200 !default; $ouds-color-decorative-accent-5-emphasized: $ouds-color-decorative-shocking-pink-300 !default; $ouds-color-decorative-accent-5-muted: $ouds-color-decorative-shocking-pink-100 !default; +$ouds-color-decorative-brand-primary: $ouds-color-orange-500 !default; +$ouds-color-decorative-brand-secondary: $ouds-color-functional-black !default; +$ouds-color-decorative-brand-tertiary: $ouds-color-functional-white !default; $ouds-color-decorative-neutral-default: $ouds-color-functional-dark-gray-400 !default; $ouds-color-decorative-neutral-emphasized: $ouds-color-functional-dark-gray-640 !default; $ouds-color-decorative-neutral-muted: $ouds-color-functional-light-gray-160 !default; -$ouds-color-decorative-primary: $ouds-color-orange-500 !default; -$ouds-color-decorative-secondary: $ouds-color-functional-black !default; $ouds-color-decorative-skin-tint-100: $ouds-color-decorative-deep-peach-100 !default; $ouds-color-decorative-skin-tint-200: $ouds-color-decorative-deep-peach-200 !default; $ouds-color-decorative-skin-tint-300: $ouds-color-decorative-deep-peach-300 !default; @@ -91,27 +93,13 @@ $ouds-color-decorative-skin-tint-600: $ouds-color-decorative-deep-peach-600 !def $ouds-color-decorative-skin-tint-700: $ouds-color-decorative-deep-peach-700 !default; $ouds-color-decorative-skin-tint-800: $ouds-color-decorative-deep-peach-800 !default; $ouds-color-decorative-skin-tint-900: $ouds-color-decorative-deep-peach-900 !default; -$ouds-color-decorative-tertiary: $ouds-color-functional-white !default; -$ouds-color-action-disabled: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-action-disabled: $ouds-color-brand-neutral-muted-low !default; $ouds-color-action-disabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-lowest !default; $ouds-color-action-negative-enabled: $ouds-color-brand-negative-default !default; $ouds-color-action-negative-focus: $ouds-color-brand-negative-high !default; $ouds-color-action-negative-hover: $ouds-color-brand-negative-high !default; $ouds-color-action-negative-loading: $ouds-color-brand-negative-higher !default; $ouds-color-action-negative-pressed: $ouds-color-brand-negative-higher !default; -$ouds-color-action-on-bg-action-disabled: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-action-on-bg-action-disabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-action-on-bg-action-negative: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-action-on-bg-action-primary-enabled: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-action-on-bg-action-primary-enabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-action-on-bg-action-primary-focus: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-action-on-bg-action-primary-focus-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-action-on-bg-action-primary-hover: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-action-on-bg-action-primary-hover-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-action-on-bg-action-primary-loading: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-action-on-bg-action-primary-loading-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-action-on-bg-action-primary-pressed: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-action-on-bg-action-primary-pressed-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; $ouds-color-action-primary-enabled: $ouds-color-brand-neutral-emphasized-black !default; $ouds-color-action-primary-enabled-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; $ouds-color-action-primary-focus: $ouds-color-brand-neutral-emphasized-lowest !default; @@ -138,13 +126,13 @@ $ouds-color-always-accent: $ouds-color-brand-warning-default !default; $ouds-color-always-black: $ouds-color-brand-neutral-emphasized-black !default; $ouds-color-always-info: $ouds-color-brand-info-default !default; $ouds-color-always-negative: $ouds-color-brand-negative-default !default; -$ouds-color-always-on-bg-accent: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-always-on-bg-black: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-always-on-bg-info: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-always-on-bg-negative: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-always-on-bg-positive: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-always-on-bg-warning: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-always-on-bg-white: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-accent: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-black: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-always-on-info: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-always-on-positive: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-warning: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-always-on-white: $ouds-color-brand-neutral-emphasized-black !default; $ouds-color-always-positive: $ouds-color-brand-positive-default !default; $ouds-color-always-warning: $ouds-color-brand-warning-default !default; $ouds-color-always-white: $ouds-color-brand-neutral-muted-white !default; @@ -172,37 +160,52 @@ $ouds-color-bg-status-warning-muted-on-bg-emphasized: $ouds-color-brand-warning- $ouds-color-bg-tertiary: $ouds-color-brand-accent-lowest !default; $ouds-color-border-brand-primary: $ouds-color-brand-primary-default !default; $ouds-color-border-brand-primary-on-bg-emphasized: $ouds-color-brand-primary-low !default; -$ouds-color-border-default: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-border-default: $ouds-color-brand-neutral-muted-low !default; $ouds-color-border-default-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-lowest !default; $ouds-color-border-emphasized: $ouds-color-brand-neutral-emphasized-black !default; $ouds-color-border-emphasized-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; -$ouds-color-border-focus: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-border-focus-inset: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-border-on-bg-brand-primary: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-border-focus: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-border-focus-inset: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-border-focus-inset-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-highest !default; +$ouds-color-border-focus-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-border-on-brand-primary: $ouds-color-brand-neutral-muted-white !default; $ouds-color-content-brand-primary: $ouds-color-brand-primary-default !default; $ouds-color-content-brand-primary-on-bg-emphasized: $ouds-color-brand-primary-low !default; $ouds-color-content-default: $ouds-color-brand-neutral-emphasized-black !default; $ouds-color-content-default-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; -$ouds-color-content-disabled: $ouds-color-brand-neutral-muted-medium !default; +$ouds-color-content-disabled: $ouds-color-brand-neutral-muted-low !default; $ouds-color-content-disabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-lowest !default; $ouds-color-content-muted: $ouds-color-brand-neutral-emphasized-lowest !default; $ouds-color-content-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-medium !default; -$ouds-color-content-on-bg-brand-primary: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-content-on-bg-status-accent-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-accent-muted: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-accent-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; -$ouds-color-content-on-bg-status-info-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-info-muted: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-info-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; -$ouds-color-content-on-bg-status-negative-emphasized: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-content-on-bg-status-negative-muted: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-negative-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; -$ouds-color-content-on-bg-status-positive-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-positive-muted: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-positive-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; -$ouds-color-content-on-bg-status-warning-emphasized: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-warning-muted: $ouds-color-brand-neutral-emphasized-black !default; -$ouds-color-content-on-bg-status-warning-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-action-disabled: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-action-disabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-action-negative: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-action-primary-enabled: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-action-primary-enabled-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-action-primary-focus: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-action-primary-focus-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-action-primary-hover: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-action-primary-hover-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-action-primary-loading: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-action-primary-loading-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-action-primary-pressed: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-action-primary-pressed-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-brand-primary: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-status-accent-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-accent-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-accent-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-status-info-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-info-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-info-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-status-negative-emphasized: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-content-on-status-negative-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-negative-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-status-positive-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-positive-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-positive-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-content-on-status-warning-emphasized: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-warning-muted: $ouds-color-brand-neutral-emphasized-black !default; +$ouds-color-content-on-status-warning-muted-on-bg-emphasized: $ouds-color-brand-neutral-muted-lower !default; $ouds-color-content-status-info: $ouds-color-brand-info-default !default; $ouds-color-content-status-negative: $ouds-color-brand-negative-default !default; $ouds-color-content-status-positive: $ouds-color-brand-positive-default !default; @@ -214,12 +217,16 @@ $ouds-color-elevation-modal: $ouds-color-brand-neutral-muted-white !default; $ouds-color-elevation-overlay-default: $ouds-color-brand-neutral-muted-white !default; $ouds-color-elevation-overlay-default-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-high !default; $ouds-color-elevation-overlay-default-on-bg-secondary: $ouds-color-brand-neutral-muted-white !default; -$ouds-color-elevation-overlay-emphased-on-bg-emphasized: $ouds-color-brand-neutral-muted-lowest !default; $ouds-color-elevation-overlay-emphasized: $ouds-color-brand-neutral-emphasized-medium !default; +$ouds-color-elevation-overlay-emphasized-on-bg-emphasized: $ouds-color-brand-neutral-muted-lowest !default; $ouds-color-elevation-overlay-emphasized-on-bg-secondary: $ouds-color-brand-neutral-emphasized-medium !default; $ouds-color-elevation-raised: $ouds-color-brand-neutral-muted-white !default; $ouds-color-elevation-raised-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-higher !default; $ouds-color-elevation-raised-on-bg-secondary: $ouds-color-brand-neutral-muted-white !default; +$ouds-color-gradient-skeleton-middle: $ouds-color-brand-neutral-muted-lower !default; +$ouds-color-gradient-skeleton-middle-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-medium !default; +$ouds-color-gradient-skeleton-start-end: $ouds-color-brand-neutral-muted-lowest !default; +$ouds-color-gradient-skeleton-start-end-on-bg-emphasized: $ouds-color-brand-neutral-emphasized-high !default; // scss-docs-end ouds-semantic-color // Dimension @@ -426,8 +433,7 @@ $ouds-font-weight-web-label-strong: $ouds-font-weight-web-strong !default; $ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default; $ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default; $ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default; -$ouds-grid-2xl-max-width-public-website: $ouds-grid-max-width-650 !default; -$ouds-grid-2xl-max-width-specific-tools: $ouds-grid-max-width-700 !default; +$ouds-grid-2xl-max-width: $ouds-grid-max-width-700 !default; $ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default; $ouds-grid-2xl-width: $ouds-grid-width-700 !default; $ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default; @@ -439,7 +445,6 @@ $ouds-grid-2xs-width: $ouds-grid-width-100 !default; $ouds-grid-3xl-column-count: $ouds-grid-column-count-1200 !default; $ouds-grid-3xl-column-gap: $ouds-grid-column-gap-800 !default; $ouds-grid-3xl-margin: $ouds-grid-margin-2500 !default; -$ouds-grid-3xl-max-width: $ouds-grid-max-width-800 !default; $ouds-grid-3xl-min-width: $ouds-grid-min-width-800 !default; $ouds-grid-3xl-width: $ouds-grid-width-800 !default; $ouds-grid-lg-column-count: $ouds-grid-column-count-600 !default; @@ -558,36 +563,37 @@ $ouds-size-icon-with-heading-xlarge-size-short-tablet: $ouds-dimension-650 !defa $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-type-max-width-body-large-desktop: $ouds-dimension-7000 !default; -$ouds-size-type-max-width-body-large-mobile: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-body-large-tablet: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-body-medium-desktop: $ouds-dimension-7000 !default; -$ouds-size-type-max-width-body-medium-mobile: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-body-medium-tablet: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-body-small-desktop: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-body-small-mobile: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-body-small-tablet: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-display-large-desktop: $ouds-dimension-11000 !default; -$ouds-size-type-max-width-display-large-mobile: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-display-large-tablet: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-display-medium-desktop: $ouds-dimension-11000 !default; -$ouds-size-type-max-width-display-medium-mobile: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-display-medium-tablet: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-display-small-desktop: $ouds-dimension-11000 !default; -$ouds-size-type-max-width-display-small-mobile: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-display-small-tablet: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-heading-large-desktop: $ouds-dimension-11000 !default; -$ouds-size-type-max-width-heading-large-mobile: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-heading-large-tablet: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-heading-medium-desktop: $ouds-dimension-11000 !default; -$ouds-size-type-max-width-heading-medium-mobile: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-heading-medium-tablet: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-heading-small-desktop: $ouds-dimension-7000 !default; -$ouds-size-type-max-width-heading-small-mobile: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-heading-small-tablet: $ouds-dimension-6000 !default; -$ouds-size-type-max-width-heading-xlarge-desktop: $ouds-dimension-11000 !default; -$ouds-size-type-max-width-heading-xlarge-mobile: $ouds-dimension-9000 !default; -$ouds-size-type-max-width-heading-xlarge-tablet: $ouds-dimension-9000 !default; +$ouds-size-max-width-grid-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; +$ouds-size-max-width-type-body-large-tablet: $ouds-dimension-6000 !default; +$ouds-size-max-width-type-body-medium-desktop: $ouds-dimension-7000 !default; +$ouds-size-max-width-type-body-medium-mobile: $ouds-dimension-6000 !default; +$ouds-size-max-width-type-body-medium-tablet: $ouds-dimension-6000 !default; +$ouds-size-max-width-type-body-small-desktop: $ouds-dimension-6000 !default; +$ouds-size-max-width-type-body-small-mobile: $ouds-dimension-6000 !default; +$ouds-size-max-width-type-body-small-tablet: $ouds-dimension-6000 !default; +$ouds-size-max-width-type-display-large-desktop: $ouds-dimension-11000 !default; +$ouds-size-max-width-type-display-large-mobile: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-display-large-tablet: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-display-medium-desktop: $ouds-dimension-11000 !default; +$ouds-size-max-width-type-display-medium-mobile: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-display-medium-tablet: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-display-small-desktop: $ouds-dimension-11000 !default; +$ouds-size-max-width-type-display-small-mobile: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-display-small-tablet: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-heading-large-desktop: $ouds-dimension-11000 !default; +$ouds-size-max-width-type-heading-large-mobile: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-heading-large-tablet: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-heading-medium-desktop: $ouds-dimension-11000 !default; +$ouds-size-max-width-type-heading-medium-mobile: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-heading-medium-tablet: $ouds-dimension-9000 !default; +$ouds-size-max-width-type-heading-small-desktop: $ouds-dimension-7000 !default; +$ouds-size-max-width-type-heading-small-mobile: $ouds-dimension-6000 !default; +$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;