diff --git a/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss b/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss index 6a17086205..472616abb5 100644 --- a/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss +++ b/packages/orange-compact/scss/tokens/_component-colors-custom-props.scss @@ -1,7 +1,7 @@ // Components custom properties applications -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.3.0 +// Orange Compact System tokens version 2.5.0 // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @@ -43,19 +43,21 @@ --#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-black-280}; - --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; - --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; - --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; - --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280}; - --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-white}; --#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-700}; --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-750}; --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-black-440}; --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-black-520}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; - --#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-black}; + --#{$prefix}progress-indicator-color-bg: #{$core-ouds-color-functional-gray-light-400}; + --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; + --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; + --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; + --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280}; + --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black}; + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; } // scss-docs-end ouds-component-css-color @@ -97,18 +99,20 @@ --#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-white-440}; - --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; - --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; - --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-white-440}; - --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-white}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-gray-dark-880}; --#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-600}; --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-300}; --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-white-640}; --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-gray-light-160}; + --#{$prefix}progress-indicator-color-bg: #{$core-ouds-color-functional-gray-dark-480}; + --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; + --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; + --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; + --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-white-440}; + --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-white}; + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/orange-compact/scss/tokens/_component.scss b/packages/orange-compact/scss/tokens/_component.scss index a853911be6..0c625d9d8d 100644 --- a/packages/orange-compact/scss/tokens/_component.scss +++ b/packages/orange-compact/scss/tokens/_component.scss @@ -1,8 +1,8 @@ // Component application // Depends on semantic applications -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.3.0 +// Orange Compact System tokens version 2.5.0 // Alert @@ -30,7 +30,9 @@ $ouds-badge-size-large: $ouds-dimension-3xsmall !default; $ouds-badge-size-medium: $ouds-dimension-4xsmall !default; $ouds-badge-size-small: $ouds-dimension-5xsmall !default; $ouds-badge-size-xsmall: $ouds-dimension-8xsmall !default; -$ouds-badge-space-inset: $core-ouds-dimension-out-of-system-75 !default; +$ouds-badge-space-inset-medium-large: $core-ouds-dimension-out-of-system-75 !default; +$ouds-badge-space-inset-small: $core-ouds-dimension-out-of-system-50 !default; +$ouds-badge-space-inset-xsmall: $core-ouds-dimension-out-of-system-25 !default; $ouds-badge-space-padding-inline-large: $ouds-space-padding-inline-2xsmall !default; $ouds-badge-space-padding-inline-medium: $ouds-space-padding-inline-3xsmall !default; // scss-docs-end ouds-component-badge @@ -170,7 +172,6 @@ $ouds-checkbox-border-width-unselected-focus: $ouds-border-width-medium !default $ouds-checkbox-border-width-unselected-hover: $ouds-border-width-medium !default; $ouds-checkbox-border-width-unselected-pressed: $ouds-border-width-medium !default; $ouds-checkbox-border-width-unselected: $ouds-border-width-thin !default; -$ouds-checkbox-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-checkbox-size-max-height: $ouds-size-min-interactive-area !default; $ouds-checkbox-size-min-height: $ouds-size-min-interactive-area !default; $ouds-checkbox-size-min-width: $ouds-size-min-interactive-area !default; @@ -233,24 +234,51 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default; // Control // scss-docs-start ouds-component-control -$ouds-control-item-border-radius-item-only: $ouds-border-radius-default !default; -$ouds-control-item-border-radius: $ouds-border-radius-none !default; -$ouds-control-item-color-bg-focus: $ouds-color-action-support-focus !default; -$ouds-control-item-color-bg-hover: $ouds-color-action-support-hover !default; -$ouds-control-item-color-bg-loading: $ouds-color-action-support-loading !default; -$ouds-control-item-color-bg-pressed: $ouds-color-action-support-pressed !default; -$ouds-control-item-color-content-loader: $ouds-color-content-default !default; -$ouds-control-item-size-error-icon: $ouds-size-icon-with-label-large-size-small !default; -$ouds-control-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default; -$ouds-control-item-size-loader: $ouds-size-icon-with-label-large-size-small !default; -$ouds-control-item-size-max-height-assets-container: $core-ouds-dimension-1000 !default; +$ouds-control-item-border-radius-current-indicator: $ouds-border-radius-none !default; +$ouds-control-item-border-radius-default: $ouds-border-radius-default !default; +$ouds-control-item-border-radius-media-rounded-corner: $ouds-border-radius-small !default; +$ouds-control-item-border-radius-media: $ouds-border-radius-default !default; +$ouds-control-item-border-radius-rounded: $ouds-border-radius-medium !default; +$ouds-control-item-border-width-current-page: $ouds-border-width-medium !default; +$ouds-control-item-border-width-default: $ouds-border-width-default !default; +$ouds-control-item-color-badge-safety-area: $ouds-color-bg-primary !default; +$ouds-control-item-color-bg-current-disabled: $ouds-color-action-support-disabled !default; +$ouds-control-item-color-bg-current-enabled: $ouds-color-action-support-enabled !default; +$ouds-control-item-color-bg-current-focus: $ouds-color-action-support-focus !default; +$ouds-control-item-color-bg-current-hover: $ouds-color-action-support-hover !default; +$ouds-control-item-color-bg-current-pressed: $ouds-color-action-support-pressed !default; +$ouds-control-item-color-content-current-disabled: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-enabled: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-focus: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-hover: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-pressed: $ouds-color-content-default !default; +$ouds-control-item-font-letter-spacing-avatar-initial-xlarge: $core-ouds-font-letter-spacing-350 !default; +$ouds-control-item-font-line-height-avatar-initial-xlarge: $core-ouds-font-line-height-550 !default; +$ouds-control-item-font-size-avatar-initial-xlarge: $core-ouds-font-size-350 !default; +$ouds-control-item-opacity-current-divider: $ouds-opacity-opaque !default; +$ouds-control-item-opacity-current-indicator: $ouds-opacity-opaque !default; +$ouds-control-item-size-asset-large: $ouds-dimension-medium !default; +$ouds-control-item-size-asset-medium: $ouds-size-icon-with-label-large-size-medium !default; +$ouds-control-item-size-asset-small: $ouds-size-icon-with-label-large-size-small !default; +$ouds-control-item-size-asset-xlarge: $ouds-dimension-3xlarge !default; +$ouds-control-item-size-control-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; +$ouds-control-item-size-current-indicator-width: $core-ouds-dimension-50 !default; +$ouds-control-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-control-item-size-max-width: $core-ouds-dimension-4000 !default; -$ouds-control-item-size-min-height: $core-ouds-dimension-500 !default; +$ouds-control-item-size-min-height-compact: $ouds-size-min-interactive-area !default; +$ouds-control-item-size-min-height-default: $core-ouds-dimension-650 !default; $ouds-control-item-size-min-width: $core-ouds-dimension-1800 !default; $ouds-control-item-space-column-gap: $ouds-space-column-gap-medium !default; -$ouds-control-item-space-padding-block-default: $ouds-space-padding-block-medium !default; -$ouds-control-item-space-padding-block-top-error-text: $ouds-space-padding-block-xsmall !default; -$ouds-control-item-space-padding-inline-error-icon: $ouds-space-padding-inline-4xsmall !default; +$ouds-control-item-space-padding-block-bottom-slot: $ouds-space-padding-block-4xsmall !default; +$ouds-control-item-space-padding-block-density-compact-bottom-expand-container: $ouds-space-padding-block-2xlarge !default; +$ouds-control-item-space-padding-block-density-compact-top-alignment-top-counterweight: $ouds-space-padding-block-xsmall !default; +$ouds-control-item-space-padding-block-density-compact-top-alignment-top-text-container: $ouds-space-padding-block-none !default; +$ouds-control-item-space-padding-block-density-compact: $ouds-space-padding-block-xsmall !default; +$ouds-control-item-space-padding-block-density-default-bottom-expand-container: $ouds-space-padding-block-3xlarge !default; +$ouds-control-item-space-padding-block-density-default-top-alignment-top-counterweight: $ouds-space-padding-block-small !default; +$ouds-control-item-space-padding-block-density-default-top-alignment-top-text-container: $ouds-space-padding-block-none !default; +$ouds-control-item-space-padding-block-density-default: $ouds-space-padding-block-medium !default; +$ouds-control-item-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default; $ouds-control-item-space-padding-inline: $ouds-space-padding-inline-large !default; $ouds-control-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-control @@ -325,6 +353,12 @@ $ouds-pin-code-input-size-min-width: $ouds-dimension-large !default; $ouds-pin-code-input-space-column-gap-digit-input: $ouds-space-column-gap-medium !default; // scss-docs-end ouds-component-pin +// Progress + +// scss-docs-start ouds-component-progress +$ouds-progress-indicator-color-bg: var(--#{$prefix}progress-indicator-color-bg) !default; +// scss-docs-end ouds-component-progress + // Quantity // scss-docs-start ouds-component-quantity @@ -347,7 +381,6 @@ $ouds-radio-button-border-width-unselected-focus: $ouds-border-width-medium !def $ouds-radio-button-border-width-unselected-hover: $ouds-border-width-medium !default; $ouds-radio-button-border-width-unselected-pressed: $ouds-border-width-medium !default; $ouds-radio-button-border-width-unselected: $ouds-border-width-thin !default; -$ouds-radio-button-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-radio-button-size-max-height: $ouds-size-min-interactive-area !default; $ouds-radio-button-size-min-height: $ouds-size-min-interactive-area !default; $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area !default; @@ -405,8 +438,8 @@ $ouds-tag-size-asset-small: $ouds-size-icon-with-label-small-size-small !default $ouds-tag-size-min-height-default: $ouds-dimension-xsmall !default; $ouds-tag-size-min-height-interactive-area: $ouds-size-min-interactive-area !default; $ouds-tag-size-min-height-small: $ouds-dimension-3xsmall !default; -$ouds-tag-size-min-width-default: $ouds-dimension-xsmall !default; // Manually changed to take design decision in advance -$ouds-tag-size-min-width-small: $ouds-dimension-2xsmall !default; // Manually changed to take design decision in advance +$ouds-tag-size-min-width-default: $ouds-dimension-xsmall !default; +$ouds-tag-size-min-width-small: $ouds-dimension-2xsmall !default; $ouds-tag-space-column-gap-default: $ouds-space-column-gap-2xsmall !default; $ouds-tag-space-column-gap-small: $ouds-space-column-gap-2xsmall !default; $ouds-tag-space-inset-bullet-default: $core-ouds-dimension-out-of-system-75 !default; @@ -430,9 +463,12 @@ $ouds-text-area-size-max-height-assets-container: $core-ouds-dimension-950 !defa $ouds-text-area-size-max-height-input: $core-ouds-dimension-2500 !default; $ouds-text-area-size-max-width: $core-ouds-dimension-6000 !default; $ouds-text-area-size-min-height-input: $core-ouds-dimension-750 !default; -$ouds-text-area-space-padding-block: $ouds-space-padding-block-small !default; +$ouds-text-area-space-padding-block-empty-trailing-container: $ouds-space-padding-block-xsmall !default; +$ouds-text-area-space-padding-block-top-empty: $ouds-space-padding-block-large !default; +$ouds-text-area-space-padding-block-trailing-container: $ouds-space-padding-block-large !default; +$ouds-text-area-space-padding-block: $ouds-space-padding-block-xsmall !default; $ouds-text-input-border-radius-default: $ouds-border-radius-default !default; -$ouds-text-input-border-radius-rounded: $ouds-border-radius-small !default; +$ouds-text-input-border-radius-rounded: $ouds-border-radius-medium !default; $ouds-text-input-border-width-default: $ouds-border-width-default !default; $ouds-text-input-border-width-focus: $ouds-border-width-medium !default; $ouds-text-input-color-border-enabled: $ouds-color-border-default !default; @@ -448,6 +484,8 @@ $ouds-text-input-size-min-width: $core-ouds-dimension-2500 !default; $ouds-text-input-size-vertical-divider-height: $ouds-dimension-4xsmall !default; $ouds-text-input-space-column-gap-default: $ouds-space-column-gap-medium !default; $ouds-text-input-space-column-gap-inline-text: $ouds-space-column-gap-xsmall !default; +$ouds-text-input-space-column-gap-label-asterisk: $ouds-space-column-gap-2xsmall !default; +$ouds-text-input-space-column-gap-label-small-asterisk: $core-ouds-dimension-out-of-system-75 !default; $ouds-text-input-space-column-gap-trailing-error-action: $ouds-space-column-gap-xsmall !default; $ouds-text-input-space-padding-block-default: $ouds-space-padding-block-2xsmall !default; $ouds-text-input-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default; diff --git a/packages/orange-compact/scss/tokens/_raw.scss b/packages/orange-compact/scss/tokens/_raw.scss index e4290d2bd0..15d4bc955b 100644 --- a/packages/orange-compact/scss/tokens/_raw.scss +++ b/packages/orange-compact/scss/tokens/_raw.scss @@ -1,8 +1,8 @@ // Raw primitive values // Insertion of brand foundations -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.3.0 +// Orange Compact System tokens version 2.5.0 // Border @@ -208,8 +208,7 @@ $core-ouds-color-opacity-black-920: rgba(0, 0, 0, .92) !default; $core-ouds-color-opacity-black-960: rgba(0, 0, 0, .96) !default; $core-ouds-color-opacity-dodger-blue-80: rgba(38, 178, 255, .08) !default; $core-ouds-color-opacity-dodger-blue-520: rgba(0, 89, 138, .52) !default; -$core-ouds-color-opacity-gray-dark-800-800: rgba(31, 31, 31, .8) !default; -$core-ouds-color-opacity-gray-light-80-800: rgba(244, 244, 244, .8) !default; +$core-ouds-color-opacity-gray-dark-880-800: rgba(20, 20, 20, .8) !default; $core-ouds-color-opacity-malachite-120: rgba(61, 227, 90, .12) !default; $core-ouds-color-opacity-malachite-640: rgba(14, 98, 29, .64) !default; $core-ouds-color-opacity-scarlet-80: rgba(219, 0, 2, .08) !default; @@ -295,8 +294,8 @@ $core-ouds-dimension-out-of-system-250: $core-ouds-dimension-base * 2.5 !default // Effect // scss-docs-start ouds-raw-effect -$core-ouds-effect-blur-160: 16px !default; $core-ouds-effect-blur-320: 32px !default; +$core-ouds-effect-blur-480: 48px !default; // scss-docs-end ouds-raw-effect // Elevation @@ -419,7 +418,7 @@ $core-ouds-grid-max-width-600: 1639px !default; $core-ouds-grid-max-width-650: 1680px !default; $core-ouds-grid-max-width-700: 1879px !default; $core-ouds-grid-max-width-800: 1920px !default; -$core-ouds-grid-min-width-100: 1px !default; +$core-ouds-grid-min-width-100: 320px !default; $core-ouds-grid-min-width-200: 390px !default; $core-ouds-grid-min-width-300: 480px !default; $core-ouds-grid-min-width-400: 736px !default; diff --git a/packages/orange-compact/scss/tokens/_semantic-colors-custom-props.scss b/packages/orange-compact/scss/tokens/_semantic-colors-custom-props.scss index c91995e232..ad7a579309 100644 --- a/packages/orange-compact/scss/tokens/_semantic-colors-custom-props.scss +++ b/packages/orange-compact/scss/tokens/_semantic-colors-custom-props.scss @@ -1,7 +1,7 @@ // Semantic custom properties applications -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.3.0 +// Orange Compact System tokens version 2.5.0 // scss-docs-start ouds-all-semantic-css-color // scss-docs-start ouds-semantic-css-color @@ -76,15 +76,20 @@ --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-light}; --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-light}; --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-light}; + --#{$prefix}color-content-status-inverse-info: #{$ouds-color-content-status-inverse-info-light}; + --#{$prefix}color-content-status-inverse-negative: #{$ouds-color-content-status-inverse-negative-light}; + --#{$prefix}color-content-status-inverse-positive: #{$ouds-color-content-status-inverse-positive-light}; + --#{$prefix}color-content-status-inverse-warning: #{$ouds-color-content-status-inverse-warning-light}; --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-light}; --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-light}; --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-light}; --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-light}; --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-light}; --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-light}; + --#{$prefix}color-overlay-backdrop: #{$ouds-color-overlay-backdrop-light}; --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-light}; --#{$prefix}color-overlay-dropdown: #{$ouds-color-overlay-dropdown-light}; - --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-light}; + --#{$prefix}color-overlay-modal-sheet: #{$ouds-color-overlay-modal-sheet-light}; --#{$prefix}color-overlay-tooltip: #{$ouds-color-overlay-tooltip-light}; --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-light}; --#{$prefix}color-surface-inverse-high: #{$ouds-color-surface-inverse-high-light}; @@ -102,8 +107,8 @@ --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-light}; --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-light}; --#{$prefix}color-surface-tertiary: #{$ouds-color-surface-tertiary-light}; - --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-light}; --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-light}; + --#{$prefix}elevation-color-elevated: #{$ouds-elevation-color-elevated-light}; --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-light}; --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none}; --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-light}; @@ -178,15 +183,20 @@ --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-dark}; --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-dark}; --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-dark}; + --#{$prefix}color-content-status-inverse-info: #{$ouds-color-content-status-inverse-info-dark}; + --#{$prefix}color-content-status-inverse-negative: #{$ouds-color-content-status-inverse-negative-dark}; + --#{$prefix}color-content-status-inverse-positive: #{$ouds-color-content-status-inverse-positive-dark}; + --#{$prefix}color-content-status-inverse-warning: #{$ouds-color-content-status-inverse-warning-dark}; --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-dark}; --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-dark}; --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-dark}; --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-dark}; --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-dark}; --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}color-overlay-backdrop: #{$ouds-color-overlay-backdrop-dark}; --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-dark}; --#{$prefix}color-overlay-dropdown: #{$ouds-color-overlay-dropdown-dark}; - --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-dark}; + --#{$prefix}color-overlay-modal-sheet: #{$ouds-color-overlay-modal-sheet-dark}; --#{$prefix}color-overlay-tooltip: #{$ouds-color-overlay-tooltip-dark}; --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-dark}; --#{$prefix}color-surface-inverse-high: #{$ouds-color-surface-inverse-high-dark}; @@ -204,8 +214,8 @@ --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-dark}; --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-dark}; --#{$prefix}color-surface-tertiary: #{$ouds-color-surface-tertiary-dark}; - --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-dark}; --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-dark}; + --#{$prefix}elevation-color-elevated: #{$ouds-elevation-color-elevated-dark}; --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-dark}; --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-dark}; --#{$prefix}elevation-color-sticky: #{$ouds-elevation-color-sticky-dark}; @@ -282,15 +292,20 @@ $ouds-color-content-on-status-warning-emphasized: var(--#{$prefix}color-content- $ouds-color-content-on-status-warning-muted: var(--#{$prefix}color-content-on-status-warning-muted) !default; $ouds-color-content-status-accent: var(--#{$prefix}color-content-status-accent) !default; $ouds-color-content-status-info: var(--#{$prefix}color-content-status-info) !default; +$ouds-color-content-status-inverse-info: var(--#{$prefix}color-content-status-inverse-info) !default; +$ouds-color-content-status-inverse-negative: var(--#{$prefix}color-content-status-inverse-negative) !default; +$ouds-color-content-status-inverse-positive: var(--#{$prefix}color-content-status-inverse-positive) !default; +$ouds-color-content-status-inverse-warning: var(--#{$prefix}color-content-status-inverse-warning) !default; $ouds-color-content-status-negative: var(--#{$prefix}color-content-status-negative) !default; $ouds-color-content-status-positive: var(--#{$prefix}color-content-status-positive) !default; $ouds-color-content-status-warning: var(--#{$prefix}color-content-status-warning) !default; $ouds-color-opacity-lower: var(--#{$prefix}color-opacity-lower) !default; $ouds-color-opacity-lowest: var(--#{$prefix}color-opacity-lowest) !default; $ouds-color-opacity-transparent: var(--#{$prefix}color-opacity-transparent) !default; +$ouds-color-overlay-backdrop: var(--#{$prefix}color-overlay-backdrop) !default; $ouds-color-overlay-drag: var(--#{$prefix}color-overlay-drag) !default; $ouds-color-overlay-dropdown: var(--#{$prefix}color-overlay-dropdown) !default; -$ouds-color-overlay-modal: var(--#{$prefix}color-overlay-modal) !default; +$ouds-color-overlay-modal-sheet: var(--#{$prefix}color-overlay-modal-sheet) !default; $ouds-color-overlay-tooltip: var(--#{$prefix}color-overlay-tooltip) !default; $ouds-color-surface-brand-primary: var(--#{$prefix}color-surface-brand-primary) !default; $ouds-color-surface-inverse-high: var(--#{$prefix}color-surface-inverse-high) !default; @@ -308,8 +323,8 @@ $ouds-color-surface-status-positive-muted: var(--#{$prefix}color-surface-status- $ouds-color-surface-status-warning-emphasized: var(--#{$prefix}color-surface-status-warning-emphasized) !default; $ouds-color-surface-status-warning-muted: var(--#{$prefix}color-surface-status-warning-muted) !default; $ouds-color-surface-tertiary: var(--#{$prefix}color-surface-tertiary) !default; -$ouds-elevation-color-default: var(--#{$prefix}elevation-color-default) !default; $ouds-elevation-color-drag: var(--#{$prefix}elevation-color-drag) !default; +$ouds-elevation-color-elevated: var(--#{$prefix}elevation-color-elevated) !default; $ouds-elevation-color-emphasized: var(--#{$prefix}elevation-color-emphasized) !default; $ouds-elevation-color-none: var(--#{$prefix}elevation-color-none) !default; $ouds-elevation-color-raised: var(--#{$prefix}elevation-color-raised) !default; diff --git a/packages/orange-compact/scss/tokens/_semantic.scss b/packages/orange-compact/scss/tokens/_semantic.scss index 40fa156bb0..07c06469cc 100644 --- a/packages/orange-compact/scss/tokens/_semantic.scss +++ b/packages/orange-compact/scss/tokens/_semantic.scss @@ -1,8 +1,8 @@ // Semantic applications // Depends on raw primitive values -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.3.0 +// Orange Compact System tokens version 2.5.0 // Border @@ -144,7 +144,7 @@ $ouds-color-border-brand-primary-dark: $core-orange-color-orange-500 !default; $ouds-color-border-brand-primary-light: $core-orange-color-orange-550 !default; $ouds-color-border-default-dark: $core-ouds-color-opacity-white-200 !default; $ouds-color-border-default-light: $core-ouds-color-opacity-black-200 !default; -$ouds-color-border-emphasized-dark: $core-ouds-color-opacity-white-920 !default; +$ouds-color-border-emphasized-dark: $core-ouds-color-functional-gray-light-160 !default; $ouds-color-border-emphasized-light: $core-ouds-color-functional-black !default; $ouds-color-border-focus-dark: $core-ouds-color-functional-gray-light-160 !default; $ouds-color-border-focus-inset-dark: $core-ouds-color-functional-black !default; @@ -218,6 +218,14 @@ $ouds-color-content-status-accent-dark: $core-orange-color-orange-500 !default; $ouds-color-content-status-accent-light: $core-orange-color-orange-500 !default; $ouds-color-content-status-info-dark: $core-ouds-color-functional-dodger-blue-300 !default; $ouds-color-content-status-info-light: $core-ouds-color-functional-dodger-blue-700 !default; +$ouds-color-content-status-inverse-info-dark: $core-ouds-color-functional-dodger-blue-700 !default; +$ouds-color-content-status-inverse-info-light: $core-ouds-color-functional-dodger-blue-300 !default; +$ouds-color-content-status-inverse-negative-dark: $core-ouds-color-functional-scarlet-600 !default; +$ouds-color-content-status-inverse-negative-light: $core-ouds-color-functional-scarlet-300 !default; +$ouds-color-content-status-inverse-positive-dark: $core-ouds-color-functional-malachite-750 !default; +$ouds-color-content-status-inverse-positive-light: $core-ouds-color-functional-malachite-300 !default; +$ouds-color-content-status-inverse-warning-dark: $core-ouds-color-functional-sun-750 !default; +$ouds-color-content-status-inverse-warning-light: $core-ouds-color-functional-sun-300 !default; $ouds-color-content-status-negative-dark: $core-ouds-color-functional-scarlet-300 !default; $ouds-color-content-status-negative-light: $core-ouds-color-functional-scarlet-600 !default; $ouds-color-content-status-positive-dark: $core-ouds-color-functional-malachite-300 !default; @@ -230,12 +238,14 @@ $ouds-color-opacity-lowest-dark: $core-ouds-color-opacity-white-40 !default; $ouds-color-opacity-lowest-light: $core-ouds-color-opacity-black-40 !default; $ouds-color-opacity-transparent-dark: $core-ouds-color-opacity-white-0 !default; $ouds-color-opacity-transparent-light: $core-ouds-color-opacity-black-0 !default; +$ouds-color-overlay-backdrop-dark: $core-ouds-color-opacity-black-680 !default; +$ouds-color-overlay-backdrop-light: $core-ouds-color-opacity-black-680 !default; $ouds-color-overlay-drag-dark: $core-ouds-color-opacity-white-80 !default; $ouds-color-overlay-drag-light: $core-ouds-color-opacity-black-40 !default; $ouds-color-overlay-dropdown-dark: $core-ouds-color-functional-gray-dark-560 !default; $ouds-color-overlay-dropdown-light: $core-ouds-color-functional-white !default; -$ouds-color-overlay-modal-dark: $core-ouds-color-functional-gray-dark-640 !default; -$ouds-color-overlay-modal-light: $core-ouds-color-functional-white !default; +$ouds-color-overlay-modal-sheet-dark: $core-ouds-color-functional-gray-dark-720 !default; +$ouds-color-overlay-modal-sheet-light: $core-ouds-color-functional-white !default; $ouds-color-overlay-tooltip-dark: $core-ouds-color-functional-gray-dark-560 !default; $ouds-color-overlay-tooltip-light: $core-ouds-color-functional-gray-dark-720 !default; $ouds-color-surface-brand-primary-dark: $core-orange-color-orange-500 !default; @@ -307,22 +317,22 @@ $ouds-dimension-xsmall: $core-ouds-dimension-350 !default; // Effect // scss-docs-start ouds-semantic-effect -$ouds-effect-blur-drag: $core-ouds-effect-blur-320 !default; +$ouds-effect-blur-drag: $core-ouds-effect-blur-480 !default; // scss-docs-end ouds-semantic-effect // Elevation // scss-docs-start ouds-semantic-elevation -$ouds-elevation-blur-default: $core-ouds-elevation-blur-300 !default; $ouds-elevation-blur-drag: $core-ouds-elevation-blur-400 !default; +$ouds-elevation-blur-elevated: $core-ouds-elevation-blur-300 !default; $ouds-elevation-blur-emphasized: $core-ouds-elevation-blur-600 !default; $ouds-elevation-blur-none: $core-ouds-elevation-blur-0 !default; $ouds-elevation-blur-raised: $core-ouds-elevation-blur-200 !default; $ouds-elevation-blur-sticky: $core-ouds-elevation-blur-400 !default; -$ouds-elevation-color-default-dark: $core-ouds-color-opacity-black-240 !default; -$ouds-elevation-color-default-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-drag-dark: $core-ouds-color-opacity-black-320 !default; $ouds-elevation-color-drag-light: $core-ouds-color-opacity-black-240 !default; +$ouds-elevation-color-elevated-dark: $core-ouds-color-opacity-black-240 !default; +$ouds-elevation-color-elevated-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-emphasized-dark: $core-ouds-color-opacity-black-160 !default; $ouds-elevation-color-emphasized-light: $core-ouds-color-opacity-black-160 !default; $ouds-elevation-color-none: $core-ouds-color-opacity-black-0 !default; @@ -330,20 +340,20 @@ $ouds-elevation-color-raised-dark: $core-ouds-color-opacity-black-320 !default; $ouds-elevation-color-raised-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-sticky-dark: $core-ouds-color-opacity-black-160 !default; $ouds-elevation-color-sticky-light: $core-ouds-color-opacity-black-160 !default; -$ouds-elevation-spread-default: $core-ouds-elevation-spread-n100 !default; $ouds-elevation-spread-drag: $core-ouds-elevation-spread-n100 !default; +$ouds-elevation-spread-elevated: $core-ouds-elevation-spread-n100 !default; $ouds-elevation-spread-emphasized: $core-ouds-elevation-spread-n300 !default; $ouds-elevation-spread-none: $core-ouds-elevation-spread-0 !default; $ouds-elevation-spread-raised: $core-ouds-elevation-spread-0 !default; $ouds-elevation-spread-sticky: $core-ouds-elevation-spread-n100 !default; -$ouds-elevation-x-default: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-drag: $core-ouds-elevation-x-0 !default; +$ouds-elevation-x-elevated: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-emphasized: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-none: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-raised: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-sticky: $core-ouds-elevation-x-0 !default; -$ouds-elevation-y-default: $core-ouds-elevation-y-200 !default; $ouds-elevation-y-drag: $core-ouds-elevation-y-300 !default; +$ouds-elevation-y-elevated: $core-ouds-elevation-y-200 !default; $ouds-elevation-y-emphasized: $core-ouds-elevation-y-500 !default; $ouds-elevation-y-none: $core-ouds-elevation-y-0 !default; $ouds-elevation-y-raised: $core-ouds-elevation-y-100 !default; @@ -497,6 +507,7 @@ $ouds-grid-2xs-width: $core-ouds-grid-width-100 !default; $ouds-grid-3xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-3xl-column-gap: $core-ouds-grid-column-gap-300 !default; $ouds-grid-3xl-margin: $core-ouds-grid-margin-1000 !default; +$ouds-grid-3xl-max-width: $core-ouds-grid-max-width-800 !default; $ouds-grid-3xl-min-width: $core-ouds-grid-min-width-800 !default; $ouds-grid-3xl-width: $core-ouds-grid-width-800 !default; $ouds-grid-lg-column-count: $core-ouds-grid-column-count-600 !default; @@ -610,48 +621,48 @@ $ouds-size-icon-with-heading-xlarge-size-medium-tablet: $core-ouds-dimension-450 $ouds-size-icon-with-heading-xlarge-size-small-desktop: $core-ouds-dimension-450 !default; $ouds-size-icon-with-heading-xlarge-size-small-mobile: $core-ouds-dimension-400 !default; $ouds-size-icon-with-heading-xlarge-size-small-tablet: $core-ouds-dimension-400 !default; -$ouds-size-max-width-type-body-large-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-body-large-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-large-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-medium-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-medium-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-medium-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-display-large-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-large-mobile: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-large-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-medium-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-medium-mobile: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-medium-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-small-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-small-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-display-small-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-large-desktop: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-large-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-large-tablet: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-medium-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-medium-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-heading-medium-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-heading-small-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-heading-small-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-heading-xlarge-desktop: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-xlarge-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-xlarge-tablet: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-label-large-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-label-large-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-large-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-xlarge-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-label-xlarge-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-xlarge-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-large-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-body-large-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-large-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-medium-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-medium-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-medium-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-display-large-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-large-mobile: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-large-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-medium-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-medium-mobile: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-medium-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-small-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-small-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-display-small-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-large-desktop: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-large-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-large-tablet: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-medium-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-medium-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-heading-medium-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-heading-small-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-heading-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-heading-xlarge-desktop: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-xlarge-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-xlarge-tablet: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-label-large-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-label-large-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-large-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-xlarge-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-label-xlarge-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-xlarge-tablet: $core-ouds-dimension-6000 !default; $ouds-size-min-interactive-area: $core-ouds-dimension-500 !default; $ouds-size-icon-decorative-2xlarge: $ouds-dimension-6xlarge !default; $ouds-size-icon-decorative-2xsmall: $ouds-dimension-4xsmall !default; @@ -665,7 +676,7 @@ $ouds-size-icon-decorative-xsmall: $ouds-dimension-3xsmall !default; $ouds-size-icon-with-label-large-size-large: $ouds-dimension-xsmall !default; $ouds-size-icon-with-label-large-size-medium: $ouds-dimension-2xsmall !default; $ouds-size-icon-with-label-large-size-small: $ouds-dimension-3xsmall !default; -$ouds-size-icon-with-label-large-size-xlarge: $ouds-dimension-large !default; +$ouds-size-icon-with-label-large-size-xlarge: $ouds-dimension-small !default; $ouds-size-icon-with-label-large-size-xsmall: $ouds-dimension-4xsmall !default; $ouds-size-icon-with-label-medium-size-large: $ouds-dimension-3xsmall !default; $ouds-size-icon-with-label-medium-size-medium: $ouds-dimension-4xsmall !default; @@ -675,9 +686,10 @@ $ouds-size-icon-with-label-small-size-large: $ouds-dimension-4xsmall !default; $ouds-size-icon-with-label-small-size-medium: $ouds-dimension-4xsmall !default; $ouds-size-icon-with-label-small-size-small: $ouds-dimension-5xsmall !default; $ouds-size-icon-with-label-small-size-xsmall: $ouds-dimension-7xsmall !default; -$ouds-size-icon-with-label-xlarge-size-large: $ouds-dimension-large !default; -$ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-medium !default; +$ouds-size-icon-with-label-xlarge-size-large: $ouds-dimension-medium !default; +$ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-small !default; $ouds-size-icon-with-label-xlarge-size-small: $ouds-dimension-xsmall !default; +$ouds-size-icon-with-label-xlarge-size-xsmall: $ouds-dimension-2xsmall !default; // scss-docs-end ouds-semantic-size // Space diff --git a/packages/orange/scss/tokens/_component-colors-custom-props.scss b/packages/orange/scss/tokens/_component-colors-custom-props.scss index 8fdd5d9788..e578b628a9 100644 --- a/packages/orange/scss/tokens/_component-colors-custom-props.scss +++ b/packages/orange/scss/tokens/_component-colors-custom-props.scss @@ -1,7 +1,7 @@ // Components custom properties applications -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.3.0 +// Orange System tokens version 2.5.0 // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @@ -43,19 +43,22 @@ --#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-black-280}; - --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; - --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; - --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; - --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280}; - --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-300}; --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-white}; --#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-700}; --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-750}; --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-black-440}; --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-black-520}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; - --#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-black}; + --#{$prefix}progress-indicator-color-bg: #{$core-ouds-color-functional-gray-light-400}; + --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; + --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; + --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; + --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280}; + --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black}; + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}control-item-color-bg-current-enabled: #{$ouds-color-action-support-enabled-light}; } // scss-docs-end ouds-component-css-color @@ -97,18 +100,21 @@ --#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-white-440}; - --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; - --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; - --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-white-440}; - --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-white}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-ouds-color-functional-sun-500}; --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-gray-dark-880}; --#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-600}; --#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-300}; --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-white-640}; --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-gray-light-160}; + --#{$prefix}progress-indicator-color-bg: #{$core-ouds-color-functional-gray-dark-480}; + --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; + --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; + --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; + --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-white-440}; + --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-white}; + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}control-item-color-bg-current-enabled: #{$ouds-color-action-support-hover-dark}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 85e2d72648..62c2da26b8 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -1,8 +1,8 @@ // Component application // Depends on semantic applications -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.3.0 +// Orange System tokens version 2.5.0 // Alert @@ -30,7 +30,9 @@ $ouds-badge-size-large: $ouds-dimension-4xsmall !default; $ouds-badge-size-medium: $ouds-dimension-5xsmall !default; $ouds-badge-size-small: $ouds-dimension-6xsmall !default; $ouds-badge-size-xsmall: $ouds-dimension-8xsmall !default; -$ouds-badge-space-inset: $core-ouds-dimension-out-of-system-75 !default; +$ouds-badge-space-inset-medium-large: $core-ouds-dimension-out-of-system-75 !default; +$ouds-badge-space-inset-small: $core-ouds-dimension-out-of-system-50 !default; +$ouds-badge-space-inset-xsmall: $core-ouds-dimension-out-of-system-25 !default; $ouds-badge-space-padding-inline-large: $ouds-space-padding-inline-2xsmall !default; $ouds-badge-space-padding-inline-medium: $ouds-space-padding-inline-3xsmall !default; // scss-docs-end ouds-component-badge @@ -170,7 +172,6 @@ $ouds-checkbox-border-width-unselected-focus: $ouds-border-width-medium !default $ouds-checkbox-border-width-unselected-hover: $ouds-border-width-medium !default; $ouds-checkbox-border-width-unselected-pressed: $ouds-border-width-medium !default; $ouds-checkbox-border-width-unselected: $ouds-border-width-thin !default; -$ouds-checkbox-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-checkbox-size-max-height: $ouds-size-min-interactive-area !default; $ouds-checkbox-size-min-height: $ouds-size-min-interactive-area !default; $ouds-checkbox-size-min-width: $ouds-size-min-interactive-area !default; @@ -233,24 +234,51 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default; // Control // scss-docs-start ouds-component-control -$ouds-control-item-border-radius-item-only: $ouds-border-radius-default !default; -$ouds-control-item-border-radius: $ouds-border-radius-none !default; -$ouds-control-item-color-bg-focus: $ouds-color-action-support-focus !default; -$ouds-control-item-color-bg-hover: $ouds-color-action-support-hover !default; -$ouds-control-item-color-bg-loading: $ouds-color-action-support-loading !default; -$ouds-control-item-color-bg-pressed: $ouds-color-action-support-pressed !default; -$ouds-control-item-color-content-loader: $ouds-color-content-default !default; -$ouds-control-item-size-error-icon: $ouds-size-icon-with-label-large-size-small !default; -$ouds-control-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default; -$ouds-control-item-size-loader: $ouds-size-icon-with-label-large-size-small !default; -$ouds-control-item-size-max-height-assets-container: $core-ouds-dimension-1200 !default; +$ouds-control-item-border-radius-current-indicator: $ouds-border-radius-none !default; +$ouds-control-item-border-radius-default: $ouds-border-radius-default !default; +$ouds-control-item-border-radius-media-rounded-corner: $ouds-border-radius-small !default; +$ouds-control-item-border-radius-media: $ouds-border-radius-default !default; +$ouds-control-item-border-radius-rounded: $ouds-border-radius-medium !default; +$ouds-control-item-border-width-current-page: $ouds-border-width-medium !default; +$ouds-control-item-border-width-default: $ouds-border-width-default !default; +$ouds-control-item-color-badge-safety-area: $ouds-color-bg-primary !default; +$ouds-control-item-color-bg-current-disabled: $ouds-color-action-support-disabled !default; +$ouds-control-item-color-bg-current-enabled: var(--#{$prefix}control-item-color-bg-current-enabled) !default; +$ouds-control-item-color-bg-current-focus: $ouds-color-action-support-focus !default; +$ouds-control-item-color-bg-current-hover: $ouds-color-action-support-hover !default; +$ouds-control-item-color-bg-current-pressed: $ouds-color-action-support-pressed !default; +$ouds-control-item-color-content-current-disabled: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-enabled: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-focus: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-hover: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-pressed: $ouds-color-content-default !default; +$ouds-control-item-font-letter-spacing-avatar-initial-xlarge: $core-ouds-font-letter-spacing-450 !default; +$ouds-control-item-font-line-height-avatar-initial-xlarge: $core-ouds-font-line-height-650 !default; +$ouds-control-item-font-size-avatar-initial-xlarge: $core-ouds-font-size-450 !default; +$ouds-control-item-opacity-current-divider: $ouds-opacity-opaque !default; +$ouds-control-item-opacity-current-indicator: $ouds-opacity-opaque !default; +$ouds-control-item-size-asset-large: $ouds-dimension-medium !default; +$ouds-control-item-size-asset-medium: $ouds-size-icon-with-label-large-size-medium !default; +$ouds-control-item-size-asset-small: $ouds-size-icon-with-label-large-size-small !default; +$ouds-control-item-size-asset-xlarge: $ouds-dimension-3xlarge !default; +$ouds-control-item-size-control-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; +$ouds-control-item-size-current-indicator-width: $core-ouds-dimension-50 !default; +$ouds-control-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-control-item-size-max-width: $core-ouds-dimension-4000 !default; -$ouds-control-item-size-min-height: $core-ouds-dimension-650 !default; +$ouds-control-item-size-min-height-compact: $ouds-size-min-interactive-area !default; +$ouds-control-item-size-min-height-default: $core-ouds-dimension-750 !default; $ouds-control-item-size-min-width: $core-ouds-dimension-2000 !default; $ouds-control-item-space-column-gap: $ouds-space-column-gap-medium !default; -$ouds-control-item-space-padding-block-default: $ouds-space-padding-block-medium !default; -$ouds-control-item-space-padding-block-top-error-text: $ouds-space-padding-block-xsmall !default; -$ouds-control-item-space-padding-inline-error-icon: $ouds-space-padding-inline-4xsmall !default; +$ouds-control-item-space-padding-block-bottom-slot: $ouds-space-padding-block-3xsmall !default; +$ouds-control-item-space-padding-block-density-compact-bottom-expand-container: $ouds-space-padding-block-2xlarge !default; +$ouds-control-item-space-padding-block-density-compact-top-alignment-top-counterweight: $ouds-space-padding-block-xsmall !default; +$ouds-control-item-space-padding-block-density-compact-top-alignment-top-text-container: $ouds-space-padding-block-none !default; +$ouds-control-item-space-padding-block-density-compact: $ouds-space-padding-block-xsmall !default; +$ouds-control-item-space-padding-block-density-default-bottom-expand-container: $ouds-space-padding-block-3xlarge !default; +$ouds-control-item-space-padding-block-density-default-top-alignment-top-counterweight: $ouds-space-padding-block-small !default; +$ouds-control-item-space-padding-block-density-default-top-alignment-top-text-container: $ouds-space-padding-block-4xsmall !default; +$ouds-control-item-space-padding-block-density-default: $ouds-space-padding-block-medium !default; +$ouds-control-item-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default; $ouds-control-item-space-padding-inline: $ouds-space-padding-inline-large !default; $ouds-control-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-control @@ -325,6 +353,12 @@ $ouds-pin-code-input-size-min-width: $ouds-dimension-large !default; $ouds-pin-code-input-space-column-gap-digit-input: $ouds-space-column-gap-medium !default; // scss-docs-end ouds-component-pin +// Progress + +// scss-docs-start ouds-component-progress +$ouds-progress-indicator-color-bg: var(--#{$prefix}progress-indicator-color-bg) !default; +// scss-docs-end ouds-component-progress + // Quantity // scss-docs-start ouds-component-quantity @@ -347,7 +381,6 @@ $ouds-radio-button-border-width-unselected-focus: $ouds-border-width-medium !def $ouds-radio-button-border-width-unselected-hover: $ouds-border-width-medium !default; $ouds-radio-button-border-width-unselected-pressed: $ouds-border-width-medium !default; $ouds-radio-button-border-width-unselected: $ouds-border-width-thin !default; -$ouds-radio-button-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-radio-button-size-max-height: $ouds-size-min-interactive-area !default; $ouds-radio-button-size-min-height: $ouds-size-min-interactive-area !default; $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area !default; @@ -405,8 +438,8 @@ $ouds-tag-size-asset-small: $ouds-size-icon-with-label-small-size-small !default $ouds-tag-size-min-height-default: $ouds-dimension-xsmall !default; $ouds-tag-size-min-height-interactive-area: $ouds-size-min-interactive-area !default; $ouds-tag-size-min-height-small: $ouds-dimension-3xsmall !default; -$ouds-tag-size-min-width-default: $ouds-dimension-xsmall !default; // Manually changed to take design decision in advance -$ouds-tag-size-min-width-small: $ouds-dimension-3xsmall !default; // Manually changed to take design decision in advance +$ouds-tag-size-min-width-default: $ouds-dimension-xsmall !default; +$ouds-tag-size-min-width-small: $ouds-dimension-3xsmall !default; $ouds-tag-space-column-gap-default: $ouds-space-column-gap-2xsmall !default; $ouds-tag-space-column-gap-small: $ouds-space-column-gap-2xsmall !default; $ouds-tag-space-inset-bullet-default: $core-ouds-dimension-out-of-system-75 !default; @@ -430,9 +463,12 @@ $ouds-text-area-size-max-height-assets-container: $core-ouds-dimension-1100 !def $ouds-text-area-size-max-height-input: $core-ouds-dimension-2500 !default; $ouds-text-area-size-max-width: $core-ouds-dimension-6000 !default; $ouds-text-area-size-min-height-input: $core-ouds-dimension-900 !default; +$ouds-text-area-space-padding-block-empty-trailing-container: $ouds-space-padding-block-xsmall !default; +$ouds-text-area-space-padding-block-top-empty: $ouds-space-padding-block-medium !default; +$ouds-text-area-space-padding-block-trailing-container: $ouds-space-padding-block-small !default; $ouds-text-area-space-padding-block: $ouds-space-padding-block-small !default; $ouds-text-input-border-radius-default: $ouds-border-radius-default !default; -$ouds-text-input-border-radius-rounded: $ouds-border-radius-small !default; +$ouds-text-input-border-radius-rounded: $ouds-border-radius-medium !default; $ouds-text-input-border-width-default: $ouds-border-width-default !default; $ouds-text-input-border-width-focus: $ouds-border-width-medium !default; $ouds-text-input-color-border-enabled: $ouds-color-border-default !default; @@ -448,6 +484,8 @@ $ouds-text-input-size-min-width: $core-ouds-dimension-2500 !default; $ouds-text-input-size-vertical-divider-height: $ouds-dimension-4xsmall !default; $ouds-text-input-space-column-gap-default: $ouds-space-column-gap-medium !default; $ouds-text-input-space-column-gap-inline-text: $ouds-space-column-gap-xsmall !default; +$ouds-text-input-space-column-gap-label-asterisk: $ouds-space-column-gap-2xsmall !default; +$ouds-text-input-space-column-gap-label-small-asterisk: $core-ouds-dimension-out-of-system-75 !default; $ouds-text-input-space-column-gap-trailing-error-action: $ouds-space-column-gap-xsmall !default; $ouds-text-input-space-padding-block-default: $ouds-space-padding-block-2xsmall !default; $ouds-text-input-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default; diff --git a/packages/orange/scss/tokens/_raw.scss b/packages/orange/scss/tokens/_raw.scss index b97df0bcfc..5c77e325e0 100644 --- a/packages/orange/scss/tokens/_raw.scss +++ b/packages/orange/scss/tokens/_raw.scss @@ -1,8 +1,8 @@ // Raw primitive values // Insertion of brand foundations -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.3.0 +// Orange System tokens version 2.5.0 // Border @@ -208,8 +208,7 @@ $core-ouds-color-opacity-black-920: rgba(0, 0, 0, .92) !default; $core-ouds-color-opacity-black-960: rgba(0, 0, 0, .96) !default; $core-ouds-color-opacity-dodger-blue-80: rgba(38, 178, 255, .08) !default; $core-ouds-color-opacity-dodger-blue-520: rgba(0, 89, 138, .52) !default; -$core-ouds-color-opacity-gray-dark-800-800: rgba(31, 31, 31, .8) !default; -$core-ouds-color-opacity-gray-light-80-800: rgba(244, 244, 244, .8) !default; +$core-ouds-color-opacity-gray-dark-880-800: rgba(20, 20, 20, .8) !default; $core-ouds-color-opacity-malachite-120: rgba(61, 227, 90, .12) !default; $core-ouds-color-opacity-malachite-640: rgba(14, 98, 29, .64) !default; $core-ouds-color-opacity-scarlet-80: rgba(219, 0, 2, .08) !default; @@ -295,8 +294,8 @@ $core-ouds-dimension-out-of-system-250: $core-ouds-dimension-base * 2.5 !default // Effect // scss-docs-start ouds-raw-effect -$core-ouds-effect-blur-160: 16px !default; $core-ouds-effect-blur-320: 32px !default; +$core-ouds-effect-blur-480: 48px !default; // scss-docs-end ouds-raw-effect // Elevation @@ -419,7 +418,7 @@ $core-ouds-grid-max-width-600: 1639px !default; $core-ouds-grid-max-width-650: 1680px !default; $core-ouds-grid-max-width-700: 1879px !default; $core-ouds-grid-max-width-800: 1920px !default; -$core-ouds-grid-min-width-100: 1px !default; +$core-ouds-grid-min-width-100: 320px !default; $core-ouds-grid-min-width-200: 390px !default; $core-ouds-grid-min-width-300: 480px !default; $core-ouds-grid-min-width-400: 736px !default; diff --git a/packages/orange/scss/tokens/_semantic-colors-custom-props.scss b/packages/orange/scss/tokens/_semantic-colors-custom-props.scss index f0b931d617..7ed60d2884 100644 --- a/packages/orange/scss/tokens/_semantic-colors-custom-props.scss +++ b/packages/orange/scss/tokens/_semantic-colors-custom-props.scss @@ -1,7 +1,7 @@ // Semantic custom properties applications -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.3.0 +// Orange System tokens version 2.5.0 // scss-docs-start ouds-all-semantic-css-color // scss-docs-start ouds-semantic-css-color @@ -76,15 +76,20 @@ --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-light}; --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-light}; --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-light}; + --#{$prefix}color-content-status-inverse-info: #{$ouds-color-content-status-inverse-info-light}; + --#{$prefix}color-content-status-inverse-negative: #{$ouds-color-content-status-inverse-negative-light}; + --#{$prefix}color-content-status-inverse-positive: #{$ouds-color-content-status-inverse-positive-light}; + --#{$prefix}color-content-status-inverse-warning: #{$ouds-color-content-status-inverse-warning-light}; --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-light}; --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-light}; --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-light}; --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-light}; --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-light}; --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-light}; + --#{$prefix}color-overlay-backdrop: #{$ouds-color-overlay-backdrop-light}; --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-light}; --#{$prefix}color-overlay-dropdown: #{$ouds-color-overlay-dropdown-light}; - --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-light}; + --#{$prefix}color-overlay-modal-sheet: #{$ouds-color-overlay-modal-sheet-light}; --#{$prefix}color-overlay-tooltip: #{$ouds-color-overlay-tooltip-light}; --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-light}; --#{$prefix}color-surface-inverse-high: #{$ouds-color-surface-inverse-high-light}; @@ -102,8 +107,8 @@ --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-light}; --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-light}; --#{$prefix}color-surface-tertiary: #{$ouds-color-surface-tertiary-light}; - --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-light}; --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-light}; + --#{$prefix}elevation-color-elevated: #{$ouds-elevation-color-elevated-light}; --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-light}; --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none}; --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-light}; @@ -178,15 +183,20 @@ --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-dark}; --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-dark}; --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-dark}; + --#{$prefix}color-content-status-inverse-info: #{$ouds-color-content-status-inverse-info-dark}; + --#{$prefix}color-content-status-inverse-negative: #{$ouds-color-content-status-inverse-negative-dark}; + --#{$prefix}color-content-status-inverse-positive: #{$ouds-color-content-status-inverse-positive-dark}; + --#{$prefix}color-content-status-inverse-warning: #{$ouds-color-content-status-inverse-warning-dark}; --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-dark}; --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-dark}; --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-dark}; --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-dark}; --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-dark}; --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}color-overlay-backdrop: #{$ouds-color-overlay-backdrop-dark}; --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-dark}; --#{$prefix}color-overlay-dropdown: #{$ouds-color-overlay-dropdown-dark}; - --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-dark}; + --#{$prefix}color-overlay-modal-sheet: #{$ouds-color-overlay-modal-sheet-dark}; --#{$prefix}color-overlay-tooltip: #{$ouds-color-overlay-tooltip-dark}; --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-dark}; --#{$prefix}color-surface-inverse-high: #{$ouds-color-surface-inverse-high-dark}; @@ -204,8 +214,8 @@ --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-dark}; --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-dark}; --#{$prefix}color-surface-tertiary: #{$ouds-color-surface-tertiary-dark}; - --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-dark}; --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-dark}; + --#{$prefix}elevation-color-elevated: #{$ouds-elevation-color-elevated-dark}; --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-dark}; --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-dark}; --#{$prefix}elevation-color-sticky: #{$ouds-elevation-color-sticky-dark}; @@ -282,15 +292,20 @@ $ouds-color-content-on-status-warning-emphasized: var(--#{$prefix}color-content- $ouds-color-content-on-status-warning-muted: var(--#{$prefix}color-content-on-status-warning-muted) !default; $ouds-color-content-status-accent: var(--#{$prefix}color-content-status-accent) !default; $ouds-color-content-status-info: var(--#{$prefix}color-content-status-info) !default; +$ouds-color-content-status-inverse-info: var(--#{$prefix}color-content-status-inverse-info) !default; +$ouds-color-content-status-inverse-negative: var(--#{$prefix}color-content-status-inverse-negative) !default; +$ouds-color-content-status-inverse-positive: var(--#{$prefix}color-content-status-inverse-positive) !default; +$ouds-color-content-status-inverse-warning: var(--#{$prefix}color-content-status-inverse-warning) !default; $ouds-color-content-status-negative: var(--#{$prefix}color-content-status-negative) !default; $ouds-color-content-status-positive: var(--#{$prefix}color-content-status-positive) !default; $ouds-color-content-status-warning: var(--#{$prefix}color-content-status-warning) !default; $ouds-color-opacity-lower: var(--#{$prefix}color-opacity-lower) !default; $ouds-color-opacity-lowest: var(--#{$prefix}color-opacity-lowest) !default; $ouds-color-opacity-transparent: var(--#{$prefix}color-opacity-transparent) !default; +$ouds-color-overlay-backdrop: var(--#{$prefix}color-overlay-backdrop) !default; $ouds-color-overlay-drag: var(--#{$prefix}color-overlay-drag) !default; $ouds-color-overlay-dropdown: var(--#{$prefix}color-overlay-dropdown) !default; -$ouds-color-overlay-modal: var(--#{$prefix}color-overlay-modal) !default; +$ouds-color-overlay-modal-sheet: var(--#{$prefix}color-overlay-modal-sheet) !default; $ouds-color-overlay-tooltip: var(--#{$prefix}color-overlay-tooltip) !default; $ouds-color-surface-brand-primary: var(--#{$prefix}color-surface-brand-primary) !default; $ouds-color-surface-inverse-high: var(--#{$prefix}color-surface-inverse-high) !default; @@ -308,8 +323,8 @@ $ouds-color-surface-status-positive-muted: var(--#{$prefix}color-surface-status- $ouds-color-surface-status-warning-emphasized: var(--#{$prefix}color-surface-status-warning-emphasized) !default; $ouds-color-surface-status-warning-muted: var(--#{$prefix}color-surface-status-warning-muted) !default; $ouds-color-surface-tertiary: var(--#{$prefix}color-surface-tertiary) !default; -$ouds-elevation-color-default: var(--#{$prefix}elevation-color-default) !default; $ouds-elevation-color-drag: var(--#{$prefix}elevation-color-drag) !default; +$ouds-elevation-color-elevated: var(--#{$prefix}elevation-color-elevated) !default; $ouds-elevation-color-emphasized: var(--#{$prefix}elevation-color-emphasized) !default; $ouds-elevation-color-none: var(--#{$prefix}elevation-color-none) !default; $ouds-elevation-color-raised: var(--#{$prefix}elevation-color-raised) !default; diff --git a/packages/orange/scss/tokens/_semantic.scss b/packages/orange/scss/tokens/_semantic.scss index bafe58248d..9a712c2342 100644 --- a/packages/orange/scss/tokens/_semantic.scss +++ b/packages/orange/scss/tokens/_semantic.scss @@ -1,8 +1,8 @@ // Semantic applications // Depends on raw primitive values -// OUDS Core tokens version 1.9.0 +// OUDS Core tokens version 1.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.3.0 +// Orange System tokens version 2.5.0 // Border @@ -138,13 +138,13 @@ $ouds-color-bg-primary-dark: $core-ouds-color-functional-gray-dark-880 !default; $ouds-color-bg-primary-light: $core-ouds-color-functional-white !default; $ouds-color-bg-secondary-dark: $core-ouds-color-functional-gray-dark-800 !default; $ouds-color-bg-secondary-light: $core-ouds-color-functional-gray-light-80 !default; -$ouds-color-bg-tertiary-dark: $core-orange-color-warm-gray-900 !default; +$ouds-color-bg-tertiary-dark: $core-orange-color-warm-gray-1000 !default; $ouds-color-bg-tertiary-light: $core-orange-color-warm-gray-100 !default; $ouds-color-border-brand-primary-dark: $core-orange-color-orange-500 !default; $ouds-color-border-brand-primary-light: $core-orange-color-orange-550 !default; $ouds-color-border-default-dark: $core-ouds-color-opacity-white-200 !default; $ouds-color-border-default-light: $core-ouds-color-opacity-black-200 !default; -$ouds-color-border-emphasized-dark: $core-ouds-color-opacity-white-920 !default; +$ouds-color-border-emphasized-dark: $core-ouds-color-functional-gray-light-160 !default; $ouds-color-border-emphasized-light: $core-ouds-color-functional-black !default; $ouds-color-border-focus-dark: $core-ouds-color-functional-gray-light-160 !default; $ouds-color-border-focus-inset-dark: $core-ouds-color-functional-gray-dark-880 !default; @@ -218,6 +218,14 @@ $ouds-color-content-status-accent-dark: $core-orange-color-orange-500 !default; $ouds-color-content-status-accent-light: $core-orange-color-orange-500 !default; $ouds-color-content-status-info-dark: $core-ouds-color-functional-dodger-blue-300 !default; $ouds-color-content-status-info-light: $core-ouds-color-functional-dodger-blue-700 !default; +$ouds-color-content-status-inverse-info-dark: $core-ouds-color-functional-dodger-blue-700 !default; +$ouds-color-content-status-inverse-info-light: $core-ouds-color-functional-dodger-blue-300 !default; +$ouds-color-content-status-inverse-negative-dark: $core-ouds-color-functional-scarlet-600 !default; +$ouds-color-content-status-inverse-negative-light: $core-ouds-color-functional-scarlet-300 !default; +$ouds-color-content-status-inverse-positive-dark: $core-ouds-color-functional-malachite-750 !default; +$ouds-color-content-status-inverse-positive-light: $core-ouds-color-functional-malachite-300 !default; +$ouds-color-content-status-inverse-warning-dark: $core-ouds-color-functional-sun-750 !default; +$ouds-color-content-status-inverse-warning-light: $core-ouds-color-functional-sun-300 !default; $ouds-color-content-status-negative-dark: $core-ouds-color-functional-scarlet-300 !default; $ouds-color-content-status-negative-light: $core-ouds-color-functional-scarlet-600 !default; $ouds-color-content-status-positive-dark: $core-ouds-color-functional-malachite-300 !default; @@ -230,12 +238,14 @@ $ouds-color-opacity-lowest-dark: $core-ouds-color-opacity-white-40 !default; $ouds-color-opacity-lowest-light: $core-ouds-color-opacity-black-40 !default; $ouds-color-opacity-transparent-dark: $core-ouds-color-opacity-white-0 !default; $ouds-color-opacity-transparent-light: $core-ouds-color-opacity-black-0 !default; +$ouds-color-overlay-backdrop-dark: $core-ouds-color-opacity-black-680 !default; +$ouds-color-overlay-backdrop-light: $core-ouds-color-opacity-black-680 !default; $ouds-color-overlay-drag-dark: $core-ouds-color-opacity-white-80 !default; $ouds-color-overlay-drag-light: $core-ouds-color-opacity-black-40 !default; $ouds-color-overlay-dropdown-dark: $core-ouds-color-functional-gray-dark-560 !default; $ouds-color-overlay-dropdown-light: $core-ouds-color-functional-white !default; -$ouds-color-overlay-modal-dark: $core-ouds-color-functional-gray-dark-640 !default; -$ouds-color-overlay-modal-light: $core-ouds-color-functional-white !default; +$ouds-color-overlay-modal-sheet-dark: $core-ouds-color-functional-gray-dark-720 !default; +$ouds-color-overlay-modal-sheet-light: $core-ouds-color-functional-white !default; $ouds-color-overlay-tooltip-dark: $core-ouds-color-functional-gray-dark-560 !default; $ouds-color-overlay-tooltip-light: $core-ouds-color-functional-gray-dark-720 !default; $ouds-color-surface-brand-primary-dark: $core-orange-color-orange-500 !default; @@ -307,22 +317,22 @@ $ouds-dimension-xsmall: $core-ouds-dimension-400 !default; // Effect // scss-docs-start ouds-semantic-effect -$ouds-effect-blur-drag: $core-ouds-effect-blur-320 !default; +$ouds-effect-blur-drag: $core-ouds-effect-blur-480 !default; // scss-docs-end ouds-semantic-effect // Elevation // scss-docs-start ouds-semantic-elevation -$ouds-elevation-blur-default: $core-ouds-elevation-blur-300 !default; $ouds-elevation-blur-drag: $core-ouds-elevation-blur-400 !default; +$ouds-elevation-blur-elevated: $core-ouds-elevation-blur-300 !default; $ouds-elevation-blur-emphasized: $core-ouds-elevation-blur-500 !default; $ouds-elevation-blur-none: $core-ouds-elevation-blur-0 !default; $ouds-elevation-blur-raised: $core-ouds-elevation-blur-200 !default; $ouds-elevation-blur-sticky: $core-ouds-elevation-blur-400 !default; -$ouds-elevation-color-default-dark: $core-ouds-color-opacity-black-320 !default; -$ouds-elevation-color-default-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-drag-dark: $core-ouds-color-opacity-black-320 !default; $ouds-elevation-color-drag-light: $core-ouds-color-opacity-black-240 !default; +$ouds-elevation-color-elevated-dark: $core-ouds-color-opacity-black-320 !default; +$ouds-elevation-color-elevated-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-emphasized-dark: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-emphasized-light: $core-ouds-color-opacity-black-160 !default; $ouds-elevation-color-none: $core-ouds-color-opacity-black-0 !default; @@ -330,20 +340,20 @@ $ouds-elevation-color-raised-dark: $core-ouds-color-opacity-black-320 !default; $ouds-elevation-color-raised-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-sticky-dark: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-sticky-light: $core-ouds-color-opacity-black-160 !default; -$ouds-elevation-spread-default: $core-ouds-elevation-spread-n100 !default; $ouds-elevation-spread-drag: $core-ouds-elevation-spread-n100 !default; +$ouds-elevation-spread-elevated: $core-ouds-elevation-spread-n100 !default; $ouds-elevation-spread-emphasized: $core-ouds-elevation-spread-n200 !default; $ouds-elevation-spread-none: $core-ouds-elevation-spread-0 !default; $ouds-elevation-spread-raised: $core-ouds-elevation-spread-0 !default; $ouds-elevation-spread-sticky: $core-ouds-elevation-spread-n100 !default; -$ouds-elevation-x-default: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-drag: $core-ouds-elevation-x-0 !default; +$ouds-elevation-x-elevated: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-emphasized: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-none: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-raised: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-sticky: $core-ouds-elevation-x-0 !default; -$ouds-elevation-y-default: $core-ouds-elevation-y-200 !default; $ouds-elevation-y-drag: $core-ouds-elevation-y-300 !default; +$ouds-elevation-y-elevated: $core-ouds-elevation-y-200 !default; $ouds-elevation-y-emphasized: $core-ouds-elevation-y-400 !default; $ouds-elevation-y-none: $core-ouds-elevation-y-0 !default; $ouds-elevation-y-raised: $core-ouds-elevation-y-100 !default; @@ -497,6 +507,7 @@ $ouds-grid-2xs-width: $core-ouds-grid-width-100 !default; $ouds-grid-3xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-3xl-column-gap: $core-ouds-grid-column-gap-800 !default; $ouds-grid-3xl-margin: $core-ouds-grid-margin-2500 !default; +$ouds-grid-3xl-max-width: $core-ouds-grid-max-width-800 !default; $ouds-grid-3xl-min-width: $core-ouds-grid-min-width-800 !default; $ouds-grid-3xl-width: $core-ouds-grid-width-800 !default; $ouds-grid-lg-column-count: $core-ouds-grid-column-count-600 !default; @@ -610,48 +621,48 @@ $ouds-size-icon-with-heading-xlarge-size-medium-tablet: $core-ouds-dimension-600 $ouds-size-icon-with-heading-xlarge-size-small-desktop: $core-ouds-dimension-650 !default; $ouds-size-icon-with-heading-xlarge-size-small-mobile: $core-ouds-dimension-450 !default; $ouds-size-icon-with-heading-xlarge-size-small-tablet: $core-ouds-dimension-550 !default; -$ouds-size-max-width-type-body-large-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-body-large-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-large-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-medium-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-body-medium-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-medium-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-display-large-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-large-mobile: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-large-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-medium-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-medium-mobile: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-medium-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-small-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-small-mobile: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-small-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-large-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-heading-large-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-large-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-medium-desktop: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-medium-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-medium-tablet: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-small-desktop: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-heading-small-tablet: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-xlarge-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-heading-xlarge-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-xlarge-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-label-large-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-label-large-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-large-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-xlarge-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-label-xlarge-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-xlarge-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-large-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-body-large-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-large-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-medium-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-body-medium-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-medium-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-display-large-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-large-mobile: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-large-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-medium-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-medium-mobile: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-medium-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-small-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-small-mobile: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-small-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-large-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-heading-large-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-large-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-medium-desktop: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-medium-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-medium-tablet: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-small-desktop: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-heading-small-tablet: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-xlarge-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-heading-xlarge-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-xlarge-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-label-large-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-label-large-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-large-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-xlarge-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-label-xlarge-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-xlarge-tablet: $core-ouds-dimension-6000 !default; $ouds-size-min-interactive-area: $core-ouds-dimension-600 !default; $ouds-size-icon-decorative-2xlarge: $ouds-dimension-6xlarge !default; $ouds-size-icon-decorative-2xsmall: $ouds-dimension-5xsmall !default; @@ -665,7 +676,7 @@ $ouds-size-icon-decorative-xsmall: $ouds-dimension-3xsmall !default; $ouds-size-icon-with-label-large-size-large: $ouds-dimension-xsmall !default; $ouds-size-icon-with-label-large-size-medium: $ouds-dimension-2xsmall !default; $ouds-size-icon-with-label-large-size-small: $ouds-dimension-3xsmall !default; -$ouds-size-icon-with-label-large-size-xlarge: $ouds-dimension-large !default; +$ouds-size-icon-with-label-large-size-xlarge: $ouds-dimension-small !default; $ouds-size-icon-with-label-large-size-xsmall: $ouds-dimension-4xsmall !default; $ouds-size-icon-with-label-medium-size-large: $ouds-dimension-3xsmall !default; $ouds-size-icon-with-label-medium-size-medium: $ouds-dimension-4xsmall !default; @@ -675,9 +686,10 @@ $ouds-size-icon-with-label-small-size-large: $ouds-dimension-4xsmall !default; $ouds-size-icon-with-label-small-size-medium: $ouds-dimension-5xsmall !default; $ouds-size-icon-with-label-small-size-small: $ouds-dimension-6xsmall !default; $ouds-size-icon-with-label-small-size-xsmall: $ouds-dimension-7xsmall !default; -$ouds-size-icon-with-label-xlarge-size-large: $ouds-dimension-large !default; -$ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-medium !default; +$ouds-size-icon-with-label-xlarge-size-large: $ouds-dimension-medium !default; +$ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-small !default; $ouds-size-icon-with-label-xlarge-size-small: $ouds-dimension-xsmall !default; +$ouds-size-icon-with-label-xlarge-size-xsmall: $ouds-dimension-2xsmall !default; // scss-docs-end ouds-semantic-size // Space diff --git a/packages/sosh/scss/tokens/_component-colors-custom-props.scss b/packages/sosh/scss/tokens/_component-colors-custom-props.scss index aed916e409..e5fcce49f7 100644 --- a/packages/sosh/scss/tokens/_component-colors-custom-props.scss +++ b/packages/sosh/scss/tokens/_component-colors-custom-props.scss @@ -1,118 +1,122 @@ // Components custom properties applications -// OUDS Core tokens version 1.9.0 -// Sosh Core tokens version 1.2.0 -// Sosh System tokens version 2.3.0 +// OUDS Core tokens version 1.10.0 +// Sosh Core tokens version 1.4.0 +// Sosh System tokens version 2.5.0 // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @include color-mode(light, true) { - --#{$prefix}button-color-bg-brand-pressed: #{$core-sosh-color-magenta-500}; - --#{$prefix}button-color-bg-brand-loading: #{$core-sosh-color-magenta-500}; + --#{$prefix}button-color-bg-brand-pressed: #{$core-sosh-color-raspberry-500}; + --#{$prefix}button-color-bg-brand-loading: #{$core-sosh-color-raspberry-500}; --#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-white}; --#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-white}; - --#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-default-pressed: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-default-loading: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-default-focus: #{$core-ouds-color-opacity-black-680}; + --#{$prefix}button-mono-color-bg-default-hover: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-default-pressed: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-default-loading: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-default-focus: #{$core-sosh-color-opacity-black-720}; --#{$prefix}button-mono-color-bg-strong-enabled: #{$core-ouds-color-functional-black}; - --#{$prefix}button-mono-color-bg-strong-hover: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-strong-pressed: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-strong-loading: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-strong-disabled: #{$core-ouds-color-opacity-black-280}; - --#{$prefix}button-mono-color-bg-strong-focus: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-minimal-hover: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-minimal-pressed: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-minimal-focus: #{$core-ouds-color-opacity-black-680}; + --#{$prefix}button-mono-color-bg-strong-hover: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-strong-pressed: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-strong-loading: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-strong-disabled: #{$core-sosh-color-opacity-black-280}; + --#{$prefix}button-mono-color-bg-strong-focus: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-minimal-hover: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-minimal-pressed: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-minimal-focus: #{$core-sosh-color-opacity-black-720}; --#{$prefix}button-mono-color-content-default-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-default-hover: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-default-pressed: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-default-loading: #{$core-ouds-color-functional-black}; - --#{$prefix}button-mono-color-content-default-disabled: #{$core-ouds-color-opacity-black-280}; + --#{$prefix}button-mono-color-content-default-disabled: #{$core-sosh-color-opacity-black-280}; --#{$prefix}button-mono-color-content-default-focus: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-minimal-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-minimal-hover: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-minimal-pressed: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-minimal-loading: #{$core-ouds-color-functional-black}; - --#{$prefix}button-mono-color-content-minimal-disabled: #{$core-ouds-color-opacity-black-280}; + --#{$prefix}button-mono-color-content-minimal-disabled: #{$core-sosh-color-opacity-black-280}; --#{$prefix}button-mono-color-content-minimal-focus: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-strong-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-strong-hover: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-strong-pressed: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-strong-loading: #{$core-ouds-color-functional-black}; - --#{$prefix}button-mono-color-content-strong-disabled: #{$core-ouds-color-opacity-white-640}; + --#{$prefix}button-mono-color-content-strong-disabled: #{$core-sosh-color-opacity-white-640}; --#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-black}; - --#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-black-280}; + --#{$prefix}button-mono-color-border-default-disabled: #{$core-sosh-color-opacity-black-280}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-500}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-sosh-color-turbo-750}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-300}; + --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-white}; + --#{$prefix}switch-color-track-selected: #{$core-sosh-color-lochmara-dark-240}; + --#{$prefix}switch-color-track-selected-interaction: #{$core-sosh-color-lochmara-dark-480}; + --#{$prefix}switch-color-track-unselected: #{$core-sosh-color-opacity-black-440}; + --#{$prefix}switch-color-track-unselected-interaction: #{$core-sosh-color-opacity-black-520}; + --#{$prefix}progress-indicator-color-bg: #{$core-ouds-color-functional-gray-light-400}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-black}; - --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-black-520}; - --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280}; + --#{$prefix}link-mono-color-content-pressed: #{$core-sosh-color-opacity-black-520}; + --#{$prefix}link-mono-color-content-disabled: #{$core-sosh-color-opacity-black-280}; --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black}; - --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-white}; - --#{$prefix}switch-color-track-selected: #{$core-sosh-color-blue-duck-dark-400}; - --#{$prefix}switch-color-track-selected-interaction: #{$core-sosh-color-blue-duck-dark-560}; - --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-black-440}; - --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-black-520}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750}; - --#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-black}; --#{$prefix}button-color-bg-brand-enabled: #{$ouds-color-surface-brand-secondary-light}; + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$ouds-color-opacity-transparent-dark}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-content-brand-primary-light}; } // scss-docs-end ouds-component-css-color @include color-mode(dark, true) { - --#{$prefix}button-color-bg-brand-pressed: #{$core-sosh-color-blue-duck-light-800}; - --#{$prefix}button-color-bg-brand-loading: #{$core-sosh-color-blue-duck-light-800}; + --#{$prefix}button-color-bg-brand-pressed: #{$core-sosh-color-lochmara-light-640}; + --#{$prefix}button-color-bg-brand-loading: #{$core-sosh-color-lochmara-light-640}; --#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-black}; --#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-black}; - --#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-default-pressed: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-default-loading: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-default-focus: #{$core-ouds-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-default-hover: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-default-pressed: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-default-loading: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-default-focus: #{$core-sosh-color-opacity-white-800}; --#{$prefix}button-mono-color-bg-strong-enabled: #{$core-ouds-color-functional-white}; - --#{$prefix}button-mono-color-bg-strong-hover: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-strong-pressed: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-strong-loading: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-strong-disabled: #{$core-ouds-color-opacity-white-440}; - --#{$prefix}button-mono-color-bg-strong-focus: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-minimal-hover: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}button-mono-color-bg-minimal-pressed: #{$core-ouds-color-opacity-black-680}; - --#{$prefix}button-mono-color-bg-minimal-focus: #{$core-ouds-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-strong-hover: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-strong-pressed: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-strong-loading: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-strong-disabled: #{$core-sosh-color-opacity-white-440}; + --#{$prefix}button-mono-color-bg-strong-focus: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-minimal-hover: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}button-mono-color-bg-minimal-pressed: #{$core-sosh-color-opacity-black-720}; + --#{$prefix}button-mono-color-bg-minimal-focus: #{$core-sosh-color-opacity-white-800}; --#{$prefix}button-mono-color-content-default-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-default-hover: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-default-pressed: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-default-loading: #{$core-ouds-color-functional-white}; - --#{$prefix}button-mono-color-content-default-disabled: #{$core-ouds-color-opacity-white-440}; + --#{$prefix}button-mono-color-content-default-disabled: #{$core-sosh-color-opacity-white-440}; --#{$prefix}button-mono-color-content-default-focus: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-minimal-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-minimal-hover: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-minimal-pressed: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-minimal-loading: #{$core-ouds-color-functional-white}; - --#{$prefix}button-mono-color-content-minimal-disabled: #{$core-ouds-color-opacity-white-440}; + --#{$prefix}button-mono-color-content-minimal-disabled: #{$core-sosh-color-opacity-white-440}; --#{$prefix}button-mono-color-content-minimal-focus: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-strong-enabled: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-strong-hover: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-content-strong-pressed: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-content-strong-loading: #{$core-ouds-color-functional-white}; - --#{$prefix}button-mono-color-content-strong-disabled: #{$core-ouds-color-opacity-black-440}; + --#{$prefix}button-mono-color-content-strong-disabled: #{$core-sosh-color-opacity-black-440}; --#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-white}; - --#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-white-440}; + --#{$prefix}button-mono-color-border-default-disabled: #{$core-sosh-color-opacity-white-440}; + --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-sosh-color-turbo-300}; + --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}icon-color-content-status-warning-inverse-external-shape: #{$core-sosh-color-turbo-500}; + --#{$prefix}switch-color-cursor: #{$core-sosh-color-functional-gray-dark-880}; + --#{$prefix}switch-color-track-selected: #{$core-sosh-color-lochmara-light-640}; + --#{$prefix}switch-color-track-selected-interaction: #{$core-sosh-color-lochmara-light-80}; + --#{$prefix}switch-color-track-unselected: #{$core-sosh-color-opacity-white-640}; + --#{$prefix}switch-color-track-unselected-interaction: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}progress-indicator-color-bg: #{$core-ouds-color-functional-gray-dark-480}; --#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white}; --#{$prefix}link-mono-color-content-hover: #{$core-ouds-color-functional-white}; - --#{$prefix}link-mono-color-content-pressed: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-white-440}; + --#{$prefix}link-mono-color-content-pressed: #{$core-sosh-color-opacity-white-800}; + --#{$prefix}link-mono-color-content-disabled: #{$core-sosh-color-opacity-white-440}; --#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-white}; - --#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-gray-dark-880}; - --#{$prefix}switch-color-track-selected: #{$core-sosh-color-blue-duck-light-800}; - --#{$prefix}switch-color-track-selected-interaction: #{$core-sosh-color-blue-duck-light-80}; - --#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-white-640}; - --#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-white-800}; - --#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; - --#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark}; - --#{$prefix}icon-color-content-default: #{$core-ouds-color-functional-gray-light-160}; --#{$prefix}button-color-bg-brand-enabled: #{$ouds-color-surface-brand-tertiary-dark}; + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-sosh-color-turbo-750}; --#{$prefix}link-color-chevron-hover: #{$ouds-color-action-enabled-dark}; } // scss-docs-end ouds-all-component-css-color diff --git a/packages/sosh/scss/tokens/_component.scss b/packages/sosh/scss/tokens/_component.scss index 0359b5e73d..2ad9314e18 100644 --- a/packages/sosh/scss/tokens/_component.scss +++ b/packages/sosh/scss/tokens/_component.scss @@ -1,8 +1,8 @@ // Component application // Depends on semantic applications -// OUDS Core tokens version 1.9.0 -// Sosh Core tokens version 1.2.0 -// Sosh System tokens version 2.3.0 +// OUDS Core tokens version 1.10.0 +// Sosh Core tokens version 1.4.0 +// Sosh System tokens version 2.5.0 // Alert @@ -30,7 +30,9 @@ $ouds-badge-size-large: $ouds-dimension-4xsmall !default; $ouds-badge-size-medium: $ouds-dimension-5xsmall !default; $ouds-badge-size-small: $ouds-dimension-6xsmall !default; $ouds-badge-size-xsmall: $ouds-dimension-8xsmall !default; -$ouds-badge-space-inset: $core-ouds-dimension-out-of-system-75 !default; +$ouds-badge-space-inset-medium-large: $core-ouds-dimension-out-of-system-75 !default; +$ouds-badge-space-inset-small: $core-ouds-dimension-out-of-system-50 !default; +$ouds-badge-space-inset-xsmall: $core-ouds-dimension-out-of-system-25 !default; $ouds-badge-space-padding-inline-large: $ouds-space-padding-inline-2xsmall !default; $ouds-badge-space-padding-inline-medium: $ouds-space-padding-inline-3xsmall !default; // scss-docs-end ouds-component-badge @@ -63,7 +65,7 @@ $ouds-button-border-radius-social: $ouds-border-radius-pill !default; $ouds-button-border-width-default-interaction-mono: $ouds-border-width-none !default; $ouds-button-border-width-default-interaction: $ouds-border-width-default !default; $ouds-button-border-width-default: $ouds-border-width-default !default; -$ouds-button-color-bg-brand-enabled: $ouds-color-surface-brand-secondary !default; +$ouds-button-color-bg-brand-enabled: var(--#{$prefix}button-color-bg-brand-enabled) !default; $ouds-button-color-bg-brand-focus: $ouds-color-action-focus !default; $ouds-button-color-bg-brand-hover: $ouds-color-action-hover !default; $ouds-button-color-bg-brand-loading: var(--#{$prefix}button-color-bg-brand-loading) !default; @@ -170,7 +172,6 @@ $ouds-checkbox-border-width-unselected-focus: $ouds-border-width-medium !default $ouds-checkbox-border-width-unselected-hover: $ouds-border-width-medium !default; $ouds-checkbox-border-width-unselected-pressed: $ouds-border-width-medium !default; $ouds-checkbox-border-width-unselected: $ouds-border-width-thin !default; -$ouds-checkbox-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-checkbox-size-max-height: $ouds-size-min-interactive-area !default; $ouds-checkbox-size-min-height: $ouds-size-min-interactive-area !default; $ouds-checkbox-size-min-width: $ouds-size-min-interactive-area !default; @@ -233,24 +234,51 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default; // Control // scss-docs-start ouds-component-control -$ouds-control-item-border-radius-item-only: $ouds-border-radius-default !default; -$ouds-control-item-border-radius: $ouds-border-radius-none !default; -$ouds-control-item-color-bg-focus: $ouds-color-action-support-focus !default; -$ouds-control-item-color-bg-hover: $ouds-color-action-support-hover !default; -$ouds-control-item-color-bg-loading: $ouds-color-action-support-loading !default; -$ouds-control-item-color-bg-pressed: $ouds-color-action-support-pressed !default; -$ouds-control-item-color-content-loader: $ouds-color-content-default !default; -$ouds-control-item-size-error-icon: $ouds-size-icon-with-label-large-size-small !default; -$ouds-control-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default; -$ouds-control-item-size-loader: $ouds-size-icon-with-label-large-size-small !default; -$ouds-control-item-size-max-height-assets-container: $core-ouds-dimension-1200 !default; +$ouds-control-item-border-radius-current-indicator: $ouds-border-radius-default !default; +$ouds-control-item-border-radius-default: $ouds-border-radius-default !default; +$ouds-control-item-border-radius-media-rounded-corner: $ouds-border-radius-default !default; +$ouds-control-item-border-radius-media: $ouds-border-radius-default !default; +$ouds-control-item-border-radius-rounded: $ouds-border-radius-default !default; +$ouds-control-item-border-width-current-page: $ouds-border-width-medium !default; +$ouds-control-item-border-width-default: $ouds-border-width-default !default; +$ouds-control-item-color-badge-safety-area: $ouds-color-bg-primary !default; +$ouds-control-item-color-bg-current-disabled: $ouds-color-action-support-disabled !default; +$ouds-control-item-color-bg-current-enabled: $ouds-color-action-support-enabled !default; +$ouds-control-item-color-bg-current-focus: $ouds-color-action-support-focus !default; +$ouds-control-item-color-bg-current-hover: $ouds-color-action-support-hover !default; +$ouds-control-item-color-bg-current-pressed: $ouds-color-action-support-pressed !default; +$ouds-control-item-color-content-current-disabled: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-enabled: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-focus: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-hover: $ouds-color-content-default !default; +$ouds-control-item-color-content-current-pressed: $ouds-color-content-default !default; +$ouds-control-item-font-letter-spacing-avatar-initial-xlarge: $core-ouds-font-letter-spacing-450 !default; +$ouds-control-item-font-line-height-avatar-initial-xlarge: $core-ouds-font-line-height-650 !default; +$ouds-control-item-font-size-avatar-initial-xlarge: $core-ouds-font-size-450 !default; +$ouds-control-item-opacity-current-divider: $ouds-opacity-opaque !default; +$ouds-control-item-opacity-current-indicator: $ouds-opacity-opaque !default; +$ouds-control-item-size-asset-large: $ouds-dimension-medium !default; +$ouds-control-item-size-asset-medium: $ouds-size-icon-with-label-large-size-medium !default; +$ouds-control-item-size-asset-small: $ouds-size-icon-with-label-large-size-small !default; +$ouds-control-item-size-asset-xlarge: $ouds-dimension-3xlarge !default; +$ouds-control-item-size-control-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; +$ouds-control-item-size-current-indicator-width: $core-ouds-dimension-50 !default; +$ouds-control-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-control-item-size-max-width: $core-ouds-dimension-4000 !default; -$ouds-control-item-size-min-height: $core-ouds-dimension-650 !default; +$ouds-control-item-size-min-height-compact: $ouds-size-min-interactive-area !default; +$ouds-control-item-size-min-height-default: $core-ouds-dimension-750 !default; $ouds-control-item-size-min-width: $core-ouds-dimension-2000 !default; $ouds-control-item-space-column-gap: $ouds-space-column-gap-medium !default; -$ouds-control-item-space-padding-block-default: $ouds-space-padding-block-medium !default; -$ouds-control-item-space-padding-block-top-error-text: $ouds-space-padding-block-xsmall !default; -$ouds-control-item-space-padding-inline-error-icon: $ouds-space-padding-inline-4xsmall !default; +$ouds-control-item-space-padding-block-bottom-slot: $ouds-space-padding-block-3xsmall !default; +$ouds-control-item-space-padding-block-density-compact-bottom-expand-container: $ouds-space-padding-block-2xlarge !default; +$ouds-control-item-space-padding-block-density-compact-top-alignment-top-counterweight: $ouds-space-padding-block-xsmall !default; +$ouds-control-item-space-padding-block-density-compact-top-alignment-top-text-container: $ouds-space-padding-block-none !default; +$ouds-control-item-space-padding-block-density-compact: $ouds-space-padding-block-xsmall !default; +$ouds-control-item-space-padding-block-density-default-bottom-expand-container: $ouds-space-padding-block-3xlarge !default; +$ouds-control-item-space-padding-block-density-default-top-alignment-top-counterweight: $ouds-space-padding-block-small !default; +$ouds-control-item-space-padding-block-density-default-top-alignment-top-text-container: $ouds-space-padding-block-4xsmall !default; +$ouds-control-item-space-padding-block-density-default: $ouds-space-padding-block-medium !default; +$ouds-control-item-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default; $ouds-control-item-space-padding-inline: $ouds-space-padding-inline-large !default; $ouds-control-item-space-row-gap: $ouds-space-row-gap-none !default; // scss-docs-end ouds-component-control @@ -292,7 +320,7 @@ $ouds-input-tag-color-content-pressed: $ouds-color-action-pressed !default; // scss-docs-start ouds-component-link $ouds-link-color-chevron-enabled: $ouds-color-action-enabled !default; $ouds-link-color-chevron-focus: $ouds-color-action-enabled !default; -$ouds-link-color-chevron-hover: $ouds-color-content-brand-primary !default; +$ouds-link-color-chevron-hover: var(--#{$prefix}link-color-chevron-hover) !default; $ouds-link-color-chevron-pressed: $ouds-color-action-pressed !default; $ouds-link-color-content-enabled: $ouds-color-content-default !default; $ouds-link-color-content-focus: $ouds-color-action-focus !default; @@ -325,6 +353,12 @@ $ouds-pin-code-input-size-min-width: $ouds-dimension-large !default; $ouds-pin-code-input-space-column-gap-digit-input: $ouds-space-column-gap-medium !default; // scss-docs-end ouds-component-pin +// Progress + +// scss-docs-start ouds-component-progress +$ouds-progress-indicator-color-bg: var(--#{$prefix}progress-indicator-color-bg) !default; +// scss-docs-end ouds-component-progress + // Quantity // scss-docs-start ouds-component-quantity @@ -347,7 +381,6 @@ $ouds-radio-button-border-width-unselected-focus: $ouds-border-width-medium !def $ouds-radio-button-border-width-unselected-hover: $ouds-border-width-medium !default; $ouds-radio-button-border-width-unselected-pressed: $ouds-border-width-medium !default; $ouds-radio-button-border-width-unselected: $ouds-border-width-thin !default; -$ouds-radio-button-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-radio-button-size-max-height: $ouds-size-min-interactive-area !default; $ouds-radio-button-size-min-height: $ouds-size-min-interactive-area !default; $ouds-radio-button-size-min-width: $ouds-size-min-interactive-area !default; @@ -405,8 +438,8 @@ $ouds-tag-size-asset-small: $ouds-size-icon-with-label-small-size-small !default $ouds-tag-size-min-height-default: $ouds-dimension-xsmall !default; $ouds-tag-size-min-height-interactive-area: $ouds-size-min-interactive-area !default; $ouds-tag-size-min-height-small: $ouds-dimension-3xsmall !default; -$ouds-tag-size-min-width-default: $ouds-dimension-xsmall !default; // Manually changed to take design decision in advance -$ouds-tag-size-min-width-small: $ouds-dimension-3xsmall !default; // Manually changed to take design decision in advance +$ouds-tag-size-min-width-default: $ouds-dimension-xsmall !default; +$ouds-tag-size-min-width-small: $ouds-dimension-3xsmall !default; $ouds-tag-space-column-gap-default: $ouds-space-column-gap-2xsmall !default; $ouds-tag-space-column-gap-small: $ouds-space-column-gap-2xsmall !default; $ouds-tag-space-inset-bullet-default: $core-ouds-dimension-out-of-system-75 !default; @@ -430,10 +463,13 @@ $ouds-text-area-size-max-height-assets-container: $core-ouds-dimension-1100 !def $ouds-text-area-size-max-height-input: $core-ouds-dimension-2500 !default; $ouds-text-area-size-max-width: $core-ouds-dimension-6000 !default; $ouds-text-area-size-min-height-input: $core-ouds-dimension-900 !default; +$ouds-text-area-space-padding-block-empty-trailing-container: $ouds-space-padding-block-xsmall !default; +$ouds-text-area-space-padding-block-top-empty: $ouds-space-padding-block-medium !default; +$ouds-text-area-space-padding-block-trailing-container: $ouds-space-padding-block-small !default; $ouds-text-area-space-padding-block: $ouds-space-padding-block-small !default; $ouds-text-input-border-radius-default: $ouds-border-radius-default !default; $ouds-text-input-border-radius-rounded: $ouds-border-radius-default !default; -$ouds-text-input-border-width-default: $ouds-border-width-thin !default; +$ouds-text-input-border-width-default: $ouds-border-width-default !default; $ouds-text-input-border-width-focus: $ouds-border-width-medium !default; $ouds-text-input-color-border-enabled: $ouds-color-border-default !default; $ouds-text-input-color-border-focus: $ouds-color-border-emphasized !default; @@ -448,6 +484,8 @@ $ouds-text-input-size-min-width: $core-ouds-dimension-2500 !default; $ouds-text-input-size-vertical-divider-height: $ouds-dimension-4xsmall !default; $ouds-text-input-space-column-gap-default: $ouds-space-column-gap-medium !default; $ouds-text-input-space-column-gap-inline-text: $ouds-space-column-gap-xsmall !default; +$ouds-text-input-space-column-gap-label-asterisk: $ouds-space-column-gap-2xsmall !default; +$ouds-text-input-space-column-gap-label-small-asterisk: $core-ouds-dimension-out-of-system-75 !default; $ouds-text-input-space-column-gap-trailing-error-action: $ouds-space-column-gap-xsmall !default; $ouds-text-input-space-padding-block-default: $ouds-space-padding-block-2xsmall !default; $ouds-text-input-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default; diff --git a/packages/sosh/scss/tokens/_raw.scss b/packages/sosh/scss/tokens/_raw.scss index 10ce043cda..8bb8815be2 100644 --- a/packages/sosh/scss/tokens/_raw.scss +++ b/packages/sosh/scss/tokens/_raw.scss @@ -1,8 +1,8 @@ // Raw primitive values // Insertion of brand foundations -// OUDS Core tokens version 1.9.0 -// Sosh Core tokens version 1.2.0 -// Sosh System tokens version 2.3.0 +// OUDS Core tokens version 1.10.0 +// Sosh Core tokens version 1.4.0 +// Sosh System tokens version 2.5.0 // Border @@ -37,83 +37,7 @@ $core-ouds-border-width-200: $core-ouds-border-base * 2 !default; // 8px // Color -// scss-docs-start ouds-raw-color$core-orange-color-decorative-amber-100: #fff0cc !default; -$core-orange-color-decorative-amber-200: #ffe199 !default; -$core-orange-color-decorative-amber-300: #ffd266 !default; -$core-orange-color-decorative-amber-400: #ffc333 !default; -$core-orange-color-decorative-amber-500: #ffb400 !default; -$core-orange-color-decorative-amber-600: #cc9000 !default; -$core-orange-color-decorative-amber-700: #996c00 !default; -$core-orange-color-decorative-amber-800: #664800 !default; -$core-orange-color-decorative-amber-900: #332400 !default; -$core-orange-color-decorative-amethyst-100: #f1ecf9 !default; -$core-orange-color-decorative-amethyst-200: #e0d4f2 !default; -$core-orange-color-decorative-amethyst-300: #c5ade6 !default; -$core-orange-color-decorative-amethyst-400: #a885d8 !default; -$core-orange-color-decorative-amethyst-500: #8d60cd !default; -$core-orange-color-decorative-amethyst-600: #5b2f98 !default; -$core-orange-color-decorative-amethyst-700: #432371 !default; -$core-orange-color-decorative-amethyst-800: #2c174a !default; -$core-orange-color-decorative-amethyst-900: #150b23 !default; -$core-orange-color-decorative-deep-peach-100: #fbebdf !default; -$core-orange-color-decorative-deep-peach-200: #f4cfb2 !default; -$core-orange-color-decorative-deep-peach-300: #e3b591 !default; -$core-orange-color-decorative-deep-peach-400: #c19372 !default; -$core-orange-color-decorative-deep-peach-500: #cf7e3f !default; -$core-orange-color-decorative-deep-peach-600: #aa6631 !default; -$core-orange-color-decorative-deep-peach-700: #7e4f2a !default; -$core-orange-color-decorative-deep-peach-800: #553720 !default; -$core-orange-color-decorative-deep-peach-900: #2e2014 !default; -$core-orange-color-decorative-emerald-100: #e5f5ed !default; -$core-orange-color-decorative-emerald-200: #c0e8d4 !default; -$core-orange-color-decorative-emerald-300: #9bdaba !default; -$core-orange-color-decorative-emerald-400: #75cca1 !default; -$core-orange-color-decorative-emerald-500: #50be87 !default; -$core-orange-color-decorative-emerald-600: #3ba06e !default; -$core-orange-color-decorative-emerald-700: #2e7b54 !default; -$core-orange-color-decorative-emerald-800: #20563b !default; -$core-orange-color-decorative-emerald-900: #123021 !default; -$core-orange-color-decorative-shocking-pink-100: #ffe5f6 !default; -$core-orange-color-decorative-shocking-pink-200: #ffb4e6 !default; -$core-orange-color-decorative-shocking-pink-300: #ff80d4 !default; -$core-orange-color-decorative-shocking-pink-400: #ff4dc3 !default; -$core-orange-color-decorative-shocking-pink-500: #ff1ab2 !default; -$core-orange-color-decorative-shocking-pink-600: #e50099 !default; -$core-orange-color-decorative-shocking-pink-700: #b20077 !default; -$core-orange-color-decorative-shocking-pink-800: #800055 !default; -$core-orange-color-decorative-shocking-pink-900: #4d0033 !default; -$core-orange-color-decorative-sky-100: #d2ecf9 !default; -$core-orange-color-decorative-sky-200: #a5daf3 !default; -$core-orange-color-decorative-sky-300: #79c7ec !default; -$core-orange-color-decorative-sky-400: #4ab4e6 !default; -$core-orange-color-decorative-sky-500: #1fa2e0 !default; -$core-orange-color-decorative-sky-600: #1982b3 !default; -$core-orange-color-decorative-sky-700: #136186 !default; -$core-orange-color-decorative-sky-800: #0c415a !default; -$core-orange-color-decorative-sky-900: #06202d !default; -$core-orange-color-opacity-warm-gray-80: rgba(189, 121, 60, .08) !default; -$core-orange-color-opacity-warm-gray-400: rgba(104, 93, 80, .4) !default; -$core-orange-color-orange-50: #fff2e6 !default; -$core-orange-color-orange-100: #ffd5b0 !default; -$core-orange-color-orange-200: #ffc18a !default; -$core-orange-color-orange-300: #ffa554 !default; -$core-orange-color-orange-400: #ff9433 !default; -$core-orange-color-orange-500: #ff7900 !default; -$core-orange-color-orange-550: #f15e00 !default; -$core-orange-color-orange-600: #e86e00 !default; -$core-orange-color-orange-700: #b55600 !default; -$core-orange-color-orange-800: #8c4300 !default; -$core-orange-color-orange-900: #6b3300 !default; -$core-orange-color-warm-gray-100: #f9f5f0 !default; -$core-orange-color-warm-gray-200: #e9ddce !default; -$core-orange-color-warm-gray-300: #d6c4ae !default; -$core-orange-color-warm-gray-400: #c1ab90 !default; -$core-orange-color-warm-gray-500: #a99275 !default; -$core-orange-color-warm-gray-600: #8a7860 !default; -$core-orange-color-warm-gray-700: #685d50 !default; -$core-orange-color-warm-gray-800: #48433d !default; -$core-orange-color-warm-gray-900: #353228 !default; -$core-orange-color-warm-gray-1000: #23211a !default; +// scss-docs-start ouds-raw-color $core-ouds-color-functional-amethyst-400: #a885d8 !default; $core-ouds-color-functional-amethyst-600: #5b2f98 !default; $core-ouds-color-functional-black: #000 !default; @@ -207,8 +131,7 @@ $core-ouds-color-opacity-black-920: rgba(0, 0, 0, .92) !default; $core-ouds-color-opacity-black-960: rgba(0, 0, 0, .96) !default; $core-ouds-color-opacity-dodger-blue-80: rgba(38, 178, 255, .08) !default; $core-ouds-color-opacity-dodger-blue-520: rgba(0, 89, 138, .52) !default; -$core-ouds-color-opacity-gray-dark-800-800: rgba(31, 31, 31, .8) !default; -$core-ouds-color-opacity-gray-light-80-800: rgba(244, 244, 244, .8) !default; +$core-ouds-color-opacity-gray-dark-880-800: rgba(20, 20, 20, .8) !default; $core-ouds-color-opacity-malachite-120: rgba(61, 227, 90, .12) !default; $core-ouds-color-opacity-malachite-640: rgba(14, 98, 29, .64) !default; $core-ouds-color-opacity-scarlet-80: rgba(219, 0, 2, .08) !default; @@ -240,55 +163,135 @@ $core-ouds-color-opacity-white-840: rgba(255, 255, 255, .84) !default; $core-ouds-color-opacity-white-880: rgba(255, 255, 255, .88) !default; $core-ouds-color-opacity-white-920: rgba(255, 255, 255, .92) !default; $core-ouds-color-opacity-white-960: rgba(255, 255, 255, .96) !default; -$core-sosh-color-blue-duck-dark-80: #33b1c1 !default; -$core-sosh-color-blue-duck-dark-160: #2fa3b1 !default; -$core-sosh-color-blue-duck-dark-240: #2b94a1 !default; -$core-sosh-color-blue-duck-dark-320: #26828e !default; -$core-sosh-color-blue-duck-dark-400: #247a85 !default; -$core-sosh-color-blue-duck-dark-480: #1e6771 !default; -$core-sosh-color-blue-duck-dark-560: #1a5961 !default; -$core-sosh-color-blue-duck-dark-640: #154a51 !default; -$core-sosh-color-blue-duck-dark-720: #113b40 !default; -$core-sosh-color-blue-duck-dark-800: #0e2f34 !default; -$core-sosh-color-blue-duck-dark-880: #0b2428 !default; -$core-sosh-color-blue-duck-dark-960: #061618 !default; -$core-sosh-color-blue-duck-light-80: #f0f7fa !default; -$core-sosh-color-blue-duck-light-160: #dff4f6 !default; -$core-sosh-color-blue-duck-light-240: #cfeef2 !default; -$core-sosh-color-blue-duck-light-320: #bfe8ee !default; -$core-sosh-color-blue-duck-light-400: #aee3ea !default; -$core-sosh-color-blue-duck-light-480: #9edde5 !default; -$core-sosh-color-blue-duck-light-560: #8ed8e1 !default; -$core-sosh-color-blue-duck-light-640: #7ed2dd !default; -$core-sosh-color-blue-duck-light-720: #6eccd8 !default; -$core-sosh-color-blue-duck-light-800: #5ec7d4 !default; -$core-sosh-color-blue-duck-light-880: #4ec1d0 !default; -$core-sosh-color-blue-duck-light-960: #3ebbcc !default; -$core-sosh-color-citrine-50: #f6f5ee !default; -$core-sosh-color-citrine-100: #fff6cc !default; -$core-sosh-color-citrine-200: #ffec99 !default; -$core-sosh-color-citrine-300: #ffe366 !default; -$core-sosh-color-citrine-400: #ffd92e !default; -$core-sosh-color-citrine-500: #fbcd00 !default; -$core-sosh-color-citrine-600: #c7a200 !default; -$core-sosh-color-citrine-700: #997d00 !default; -$core-sosh-color-citrine-800: #665300 !default; -$core-sosh-color-citrine-900: #332a00 !default; -$core-sosh-color-citrine-950: #241d00 !default; -$core-sosh-color-citrine-1000: #191500 !default; -$core-sosh-color-magenta-50: #fce9ee !default; -$core-sosh-color-magenta-100: #f8d3dc !default; -$core-sosh-color-magenta-200: #f2a6b9 !default; -$core-sosh-color-magenta-300: #eb7a96 !default; -$core-sosh-color-magenta-400: #e55277 !default; -$core-sosh-color-magenta-500: #d5204e !default; // Test for support Figma -$core-sosh-color-magenta-600: #b61b42 !default; -$core-sosh-color-magenta-700: #851430 !default; -$core-sosh-color-magenta-800: #590d20 !default; -$core-sosh-color-magenta-900: #2c0710 !default; -$core-sosh-color-magenta-950: #160308 !default; -$core-sosh-color-opacity-magenta-120: rgba(229, 82, 119, .12) !default; // Test for support Figma -$core-sosh-color-opacity-magenta-640: rgba(133, 20, 48, .64) !default; // Test for support Figma +$core-sosh-color-functional-gray-dark-80: #5e8097 !default; +$core-sosh-color-functional-gray-dark-160: #56758a !default; +$core-sosh-color-functional-gray-dark-240: #4e6b7e !default; +$core-sosh-color-functional-gray-dark-320: #476071 !default; +$core-sosh-color-functional-gray-dark-400: #3f5564 !default; +$core-sosh-color-functional-gray-dark-480: #374b58 !default; +$core-sosh-color-functional-gray-dark-560: #2f404b !default; +$core-sosh-color-functional-gray-dark-640: #27353f !default; +$core-sosh-color-functional-gray-dark-720: #1f2b32 !default; +$core-sosh-color-functional-gray-dark-800: #182026 !default; +$core-sosh-color-functional-gray-dark-880: #101519 !default; +$core-sosh-color-functional-gray-dark-960: #080b0d !default; +$core-sosh-color-functional-gray-light-80: #f7f9fa !default; +$core-sosh-color-functional-gray-light-160: #e9eef1 !default; +$core-sosh-color-functional-gray-light-240: #d9e2e7 !default; +$core-sosh-color-functional-gray-light-320: #cdd8e0 !default; +$core-sosh-color-functional-gray-light-400: #c0ced8 !default; +$core-sosh-color-functional-gray-light-480: #b4c5d0 !default; +$core-sosh-color-functional-gray-light-560: #a7bbc8 !default; +$core-sosh-color-functional-gray-light-640: #9bb1c0 !default; +$core-sosh-color-functional-gray-light-720: #8ea7b8 !default; +$core-sosh-color-functional-gray-light-800: #819eb1 !default; +$core-sosh-color-functional-gray-light-880: #7594a9 !default; +$core-sosh-color-functional-gray-light-960: #688aa1 !default; +$core-sosh-color-lochmara-dark-80: #0191f4 !default; +$core-sosh-color-lochmara-dark-160: #0182da !default; +$core-sosh-color-lochmara-dark-240: #0173c1 !default; +$core-sosh-color-lochmara-dark-320: #016ab2 !default; +$core-sosh-color-lochmara-dark-400: #0161a2 !default; +$core-sosh-color-lochmara-dark-480: #01558e !default; +$core-sosh-color-lochmara-dark-560: #01487a !default; +$core-sosh-color-lochmara-dark-640: #003c66 !default; +$core-sosh-color-lochmara-dark-720: #003051 !default; +$core-sosh-color-lochmara-dark-800: #002742 !default; +$core-sosh-color-lochmara-dark-880: #002138 !default; +$core-sosh-color-lochmara-dark-960: #001524 !default; +$core-sosh-color-lochmara-light-80: #edf6fd !default; +$core-sosh-color-lochmara-light-160: #d6eeff !default; +$core-sosh-color-lochmara-light-240: #c2e6ff !default; +$core-sosh-color-lochmara-light-320: #aedeff !default; +$core-sosh-color-lochmara-light-400: #99d5ff !default; +$core-sosh-color-lochmara-light-480: #85cdfe !default; +$core-sosh-color-lochmara-light-560: #71c5fe !default; +$core-sosh-color-lochmara-light-640: #5dbcfe !default; +$core-sosh-color-lochmara-light-720: #48b4fe !default; +$core-sosh-color-lochmara-light-800: #34acfe !default; +$core-sosh-color-lochmara-light-880: #20a3fe !default; +$core-sosh-color-lochmara-light-960: #0b9bfe !default; +$core-sosh-color-opacity-black-0: rgba(0, 15, 25, 0) !default; +$core-sosh-color-opacity-black-40: rgba(0, 15, 25, .04) !default; +$core-sosh-color-opacity-black-80: rgba(0, 15, 25, .08) !default; +$core-sosh-color-opacity-black-120: rgba(0, 15, 25, .12) !default; +$core-sosh-color-opacity-black-160: rgba(0, 15, 25, .16) !default; +$core-sosh-color-opacity-black-200: rgba(0, 15, 25, .2) !default; +$core-sosh-color-opacity-black-240: rgba(0, 15, 25, .24) !default; +$core-sosh-color-opacity-black-280: rgba(0, 15, 25, .28) !default; +$core-sosh-color-opacity-black-320: rgba(0, 15, 25, .32) !default; +$core-sosh-color-opacity-black-360: rgba(0, 15, 25, .36) !default; +$core-sosh-color-opacity-black-400: rgba(0, 15, 25, .4) !default; +$core-sosh-color-opacity-black-440: rgba(0, 15, 25, .44) !default; +$core-sosh-color-opacity-black-480: rgba(0, 15, 25, .48) !default; +$core-sosh-color-opacity-black-520: rgba(0, 15, 25, .52) !default; +$core-sosh-color-opacity-black-560: rgba(0, 15, 25, .56) !default; +$core-sosh-color-opacity-black-600: rgba(0, 15, 25, .6) !default; +$core-sosh-color-opacity-black-640: rgba(0, 15, 25, .64) !default; +$core-sosh-color-opacity-black-680: rgba(0, 15, 25, .68) !default; +$core-sosh-color-opacity-black-720: rgba(0, 15, 25, .72) !default; +$core-sosh-color-opacity-black-760: rgba(0, 15, 25, .76) !default; +$core-sosh-color-opacity-black-800: rgba(0, 15, 25, .8) !default; +$core-sosh-color-opacity-black-840: rgba(0, 15, 25, .84) !default; +$core-sosh-color-opacity-black-880: rgba(0, 15, 25, .88) !default; +$core-sosh-color-opacity-black-920: rgba(0, 15, 25, .92) !default; +$core-sosh-color-opacity-black-960: rgba(0, 15, 25, .96) !default; +$core-sosh-color-opacity-lochmara-dark-880-520: rgba(1, 85, 142, .52) !default; +$core-sosh-color-opacity-lochmara-dark-960-800: rgba(0, 21, 36, .8) !default; +$core-sosh-color-opacity-lochmara-light-800-80: rgba(52, 172, 254, .08) !default; +$core-sosh-color-opacity-raspberry-100: rgba(252, 105, 153, .1) !default; // Test for support Figma +$core-sosh-color-opacity-raspberry-640: rgba(150, 3, 51, .64) !default; // Test for support Figma +$core-sosh-color-opacity-turbo-160: rgba(255, 229, 0, .16) !default; // Test for support Figma +$core-sosh-color-opacity-turbo-480: rgba(102, 92, 0, .48) !default; // Test for support Figma +$core-sosh-color-opacity-white-0: rgba(237, 246, 252, 0) !default; +$core-sosh-color-opacity-white-40: rgba(237, 246, 252, .04) !default; +$core-sosh-color-opacity-white-80: rgba(237, 246, 252, .08) !default; +$core-sosh-color-opacity-white-120: rgba(237, 246, 252, .12) !default; +$core-sosh-color-opacity-white-160: rgba(237, 246, 252, .16) !default; +$core-sosh-color-opacity-white-200: rgba(237, 246, 252, .2) !default; +$core-sosh-color-opacity-white-240: rgba(237, 246, 252, .24) !default; +$core-sosh-color-opacity-white-280: rgba(237, 246, 252, .28) !default; +$core-sosh-color-opacity-white-320: rgba(237, 246, 252, .32) !default; +$core-sosh-color-opacity-white-360: rgba(237, 246, 252, .36) !default; +$core-sosh-color-opacity-white-400: rgba(237, 246, 252, .4) !default; +$core-sosh-color-opacity-white-440: rgba(237, 246, 252, .44) !default; +$core-sosh-color-opacity-white-480: rgba(237, 246, 252, .48) !default; +$core-sosh-color-opacity-white-520: rgba(237, 246, 252, .52) !default; +$core-sosh-color-opacity-white-560: rgba(237, 246, 252, .56) !default; +$core-sosh-color-opacity-white-600: rgba(237, 246, 252, .6) !default; +$core-sosh-color-opacity-white-640: rgba(237, 246, 252, .64) !default; +$core-sosh-color-opacity-white-680: rgba(237, 246, 252, .68) !default; +$core-sosh-color-opacity-white-720: rgba(237, 246, 252, .72) !default; +$core-sosh-color-opacity-white-760: rgba(237, 246, 252, .76) !default; +$core-sosh-color-opacity-white-800: rgba(237, 246, 252, .8) !default; +$core-sosh-color-opacity-white-840: rgba(237, 246, 252, .84) !default; +$core-sosh-color-opacity-white-880: rgba(237, 246, 252, .88) !default; +$core-sosh-color-opacity-white-920: rgba(237, 246, 252, .92) !default; +$core-sosh-color-opacity-white-960: rgba(237, 246, 252, .96) !default; +$core-sosh-color-raspberry-50: #ffe6ee !default; +$core-sosh-color-raspberry-100: #fecddd !default; +$core-sosh-color-raspberry-200: #fd9bbb !default; +$core-sosh-color-raspberry-300: #fc6999 !default; +$core-sosh-color-raspberry-400: #fb226a !default; +$core-sosh-color-raspberry-500: #de034b !default; +$core-sosh-color-raspberry-600: #bf0341 !default; +$core-sosh-color-raspberry-700: #960333 !default; +$core-sosh-color-raspberry-800: #640222 !default; +$core-sosh-color-raspberry-900: #320111 !default; +$core-sosh-color-raspberry-950: #190009 !default; +$core-sosh-color-turbo-50: #fcfae8 !default; +$core-sosh-color-turbo-100: #fffacc !default; +$core-sosh-color-turbo-200: #fff599 !default; +$core-sosh-color-turbo-300: #ffef66 !default; +$core-sosh-color-turbo-400: #ffea33 !default; +$core-sosh-color-turbo-500: #ffe500 !default; +$core-sosh-color-turbo-600: #ccb700 !default; +$core-sosh-color-turbo-700: #998900 !default; +$core-sosh-color-turbo-750: #7a6e00 !default; +$core-sosh-color-turbo-800: #665c00 !default; +$core-sosh-color-turbo-900: #332e00 !default; +$core-sosh-color-turbo-950: #221f02 !default; +$core-sosh-color-turbo-1000: #1a1700 !default; // scss-docs-end ouds-raw-color // Dimension @@ -343,8 +346,8 @@ $core-ouds-dimension-out-of-system-250: $core-ouds-dimension-base * 2.5 !default // Effect // scss-docs-start ouds-raw-effect -$core-ouds-effect-blur-160: 16px !default; $core-ouds-effect-blur-320: 32px !default; +$core-ouds-effect-blur-480: 48px !default; // scss-docs-end ouds-raw-effect // Elevation @@ -467,7 +470,7 @@ $core-ouds-grid-max-width-600: 1639px !default; $core-ouds-grid-max-width-650: 1680px !default; $core-ouds-grid-max-width-700: 1879px !default; $core-ouds-grid-max-width-800: 1920px !default; -$core-ouds-grid-min-width-100: 1px !default; +$core-ouds-grid-min-width-100: 320px !default; $core-ouds-grid-min-width-200: 390px !default; $core-ouds-grid-min-width-300: 480px !default; $core-ouds-grid-min-width-400: 736px !default; @@ -532,8 +535,8 @@ $core-ouds-opacity-960: .96 !default; $core-ouds-opacity-1000: 1 !default; // scss-docs-end ouds-raw-opacity -// Version: "1.2.0" !default; +// Version: "1.4.0" !default; -// scss-docs-start ouds-raw-version: "1.2.0" !default; -$core-sosh-version: "1.2.0" !default; -// scss-docs-end ouds-raw-version: "1.2.0" !default; +// scss-docs-start ouds-raw-version: "1.4.0" !default; +$core-sosh-version: "1.4.0" !default; +// scss-docs-end ouds-raw-version: "1.4.0" !default; diff --git a/packages/sosh/scss/tokens/_semantic-colors-custom-props.scss b/packages/sosh/scss/tokens/_semantic-colors-custom-props.scss index b8ee0b6280..ff52f88477 100644 --- a/packages/sosh/scss/tokens/_semantic-colors-custom-props.scss +++ b/packages/sosh/scss/tokens/_semantic-colors-custom-props.scss @@ -1,7 +1,7 @@ // Semantic custom properties applications -// OUDS Core tokens version 1.9.0 -// Sosh Core tokens version 1.2.0 -// Sosh System tokens version 2.3.0 +// OUDS Core tokens version 1.10.0 +// Sosh Core tokens version 1.4.0 +// Sosh System tokens version 2.5.0 // scss-docs-start ouds-all-semantic-css-color // scss-docs-start ouds-semantic-css-color @@ -84,15 +84,20 @@ --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-light}; --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-light}; --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-light}; + --#{$prefix}color-content-status-inverse-info: #{$ouds-color-content-status-inverse-info-light}; + --#{$prefix}color-content-status-inverse-negative: #{$ouds-color-content-status-inverse-negative-light}; + --#{$prefix}color-content-status-inverse-positive: #{$ouds-color-content-status-inverse-positive-light}; + --#{$prefix}color-content-status-inverse-warning: #{$ouds-color-content-status-inverse-warning-light}; --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-light}; --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-light}; --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-light}; --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-light}; --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-light}; --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-light}; + --#{$prefix}color-overlay-backdrop: #{$ouds-color-overlay-backdrop-light}; --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-light}; --#{$prefix}color-overlay-dropdown: #{$ouds-color-overlay-dropdown-light}; - --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-light}; + --#{$prefix}color-overlay-modal-sheet: #{$ouds-color-overlay-modal-sheet-light}; --#{$prefix}color-overlay-tooltip: #{$ouds-color-overlay-tooltip-light}; --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-light}; --#{$prefix}color-surface-brand-secondary: #{$ouds-color-surface-brand-secondary-light}; @@ -112,8 +117,8 @@ --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-light}; --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-light}; --#{$prefix}color-surface-tertiary: #{$ouds-color-surface-tertiary-light}; - --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-light}; --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-light}; + --#{$prefix}elevation-color-elevated: #{$ouds-elevation-color-elevated-light}; --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-light}; --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none}; --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-light}; @@ -196,15 +201,20 @@ --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-dark}; --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-dark}; --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-dark}; + --#{$prefix}color-content-status-inverse-info: #{$ouds-color-content-status-inverse-info-dark}; + --#{$prefix}color-content-status-inverse-negative: #{$ouds-color-content-status-inverse-negative-dark}; + --#{$prefix}color-content-status-inverse-positive: #{$ouds-color-content-status-inverse-positive-dark}; + --#{$prefix}color-content-status-inverse-warning: #{$ouds-color-content-status-inverse-warning-dark}; --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-dark}; --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-dark}; --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-dark}; --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-dark}; --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-dark}; --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-dark}; + --#{$prefix}color-overlay-backdrop: #{$ouds-color-overlay-backdrop-dark}; --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-dark}; --#{$prefix}color-overlay-dropdown: #{$ouds-color-overlay-dropdown-dark}; - --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-dark}; + --#{$prefix}color-overlay-modal-sheet: #{$ouds-color-overlay-modal-sheet-dark}; --#{$prefix}color-overlay-tooltip: #{$ouds-color-overlay-tooltip-dark}; --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-dark}; --#{$prefix}color-surface-brand-secondary: #{$ouds-color-surface-brand-secondary-dark}; @@ -224,8 +234,8 @@ --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-dark}; --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-dark}; --#{$prefix}color-surface-tertiary: #{$ouds-color-surface-tertiary-dark}; - --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-dark}; --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-dark}; + --#{$prefix}elevation-color-elevated: #{$ouds-elevation-color-elevated-dark}; --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-dark}; --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-dark}; --#{$prefix}elevation-color-sticky: #{$ouds-elevation-color-sticky-dark}; @@ -310,15 +320,20 @@ $ouds-color-content-on-status-warning-emphasized: var(--#{$prefix}color-content- $ouds-color-content-on-status-warning-muted: var(--#{$prefix}color-content-on-status-warning-muted) !default; $ouds-color-content-status-accent: var(--#{$prefix}color-content-status-accent) !default; $ouds-color-content-status-info: var(--#{$prefix}color-content-status-info) !default; +$ouds-color-content-status-inverse-info: var(--#{$prefix}color-content-status-inverse-info) !default; +$ouds-color-content-status-inverse-negative: var(--#{$prefix}color-content-status-inverse-negative) !default; +$ouds-color-content-status-inverse-positive: var(--#{$prefix}color-content-status-inverse-positive) !default; +$ouds-color-content-status-inverse-warning: var(--#{$prefix}color-content-status-inverse-warning) !default; $ouds-color-content-status-negative: var(--#{$prefix}color-content-status-negative) !default; $ouds-color-content-status-positive: var(--#{$prefix}color-content-status-positive) !default; $ouds-color-content-status-warning: var(--#{$prefix}color-content-status-warning) !default; $ouds-color-opacity-lower: var(--#{$prefix}color-opacity-lower) !default; $ouds-color-opacity-lowest: var(--#{$prefix}color-opacity-lowest) !default; $ouds-color-opacity-transparent: var(--#{$prefix}color-opacity-transparent) !default; +$ouds-color-overlay-backdrop: var(--#{$prefix}color-overlay-backdrop) !default; $ouds-color-overlay-drag: var(--#{$prefix}color-overlay-drag) !default; $ouds-color-overlay-dropdown: var(--#{$prefix}color-overlay-dropdown) !default; -$ouds-color-overlay-modal: var(--#{$prefix}color-overlay-modal) !default; +$ouds-color-overlay-modal-sheet: var(--#{$prefix}color-overlay-modal-sheet) !default; $ouds-color-overlay-tooltip: var(--#{$prefix}color-overlay-tooltip) !default; $ouds-color-surface-brand-primary: var(--#{$prefix}color-surface-brand-primary) !default; $ouds-color-surface-brand-secondary: var(--#{$prefix}color-surface-brand-secondary) !default; @@ -338,8 +353,8 @@ $ouds-color-surface-status-positive-muted: var(--#{$prefix}color-surface-status- $ouds-color-surface-status-warning-emphasized: var(--#{$prefix}color-surface-status-warning-emphasized) !default; $ouds-color-surface-status-warning-muted: var(--#{$prefix}color-surface-status-warning-muted) !default; $ouds-color-surface-tertiary: var(--#{$prefix}color-surface-tertiary) !default; -$ouds-elevation-color-default: var(--#{$prefix}elevation-color-default) !default; $ouds-elevation-color-drag: var(--#{$prefix}elevation-color-drag) !default; +$ouds-elevation-color-elevated: var(--#{$prefix}elevation-color-elevated) !default; $ouds-elevation-color-emphasized: var(--#{$prefix}elevation-color-emphasized) !default; $ouds-elevation-color-none: var(--#{$prefix}elevation-color-none) !default; $ouds-elevation-color-raised: var(--#{$prefix}elevation-color-raised) !default; diff --git a/packages/sosh/scss/tokens/_semantic.scss b/packages/sosh/scss/tokens/_semantic.scss index 0cb502da7f..566b36026e 100644 --- a/packages/sosh/scss/tokens/_semantic.scss +++ b/packages/sosh/scss/tokens/_semantic.scss @@ -1,8 +1,8 @@ // Semantic applications // Depends on raw primitive values -// OUDS Core tokens version 1.9.0 -// Sosh Core tokens version 1.2.0 -// Sosh System tokens version 2.3.0 +// OUDS Core tokens version 1.10.0 +// Sosh Core tokens version 1.4.0 +// Sosh System tokens version 2.5.0 // Border @@ -82,18 +82,18 @@ $ouds-color-modes-on-surface-secondary-dark: dark !default; $ouds-color-modes-on-surface-secondary-light: light !default; $ouds-color-modes-on-surface-tertiary-dark: dark !default; $ouds-color-modes-on-surface-tertiary-light: light !default; -$ouds-color-action-disabled-dark: $core-ouds-color-opacity-white-200 !default; -$ouds-color-action-disabled-light: $core-ouds-color-opacity-black-200 !default; -$ouds-color-action-enabled-dark: $core-sosh-color-blue-duck-light-800 !default; -$ouds-color-action-enabled-light: $core-sosh-color-magenta-500 !default; -$ouds-color-action-focus-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-action-disabled-dark: $core-sosh-color-opacity-white-200 !default; +$ouds-color-action-disabled-light: $core-sosh-color-opacity-black-200 !default; +$ouds-color-action-enabled-dark: $core-sosh-color-lochmara-light-640 !default; +$ouds-color-action-enabled-light: $core-sosh-color-raspberry-500 !default; +$ouds-color-action-focus-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-action-focus-light: $core-ouds-color-functional-black !default; -$ouds-color-action-highlighted-dark: $core-ouds-color-functional-gray-light-160 !default; -$ouds-color-action-highlighted-light: $core-sosh-color-blue-duck-dark-400 !default; -$ouds-color-action-hover-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-action-highlighted-dark: $core-sosh-color-functional-gray-light-160 !default; +$ouds-color-action-highlighted-light: $core-sosh-color-lochmara-dark-240 !default; +$ouds-color-action-hover-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-action-hover-light: $core-ouds-color-functional-black !default; -$ouds-color-action-loading-dark: $core-sosh-color-citrine-300 !default; -$ouds-color-action-loading-light: $core-sosh-color-blue-duck-dark-400 !default; +$ouds-color-action-loading-dark: $core-sosh-color-turbo-300 !default; +$ouds-color-action-loading-light: $core-sosh-color-lochmara-dark-240 !default; $ouds-color-action-negative-enabled-dark: $core-ouds-color-functional-scarlet-300 !default; $ouds-color-action-negative-enabled-light: $core-ouds-color-functional-scarlet-600 !default; $ouds-color-action-negative-focus-dark: $core-ouds-color-functional-scarlet-200 !default; @@ -104,178 +104,188 @@ $ouds-color-action-negative-loading-dark: $core-ouds-color-functional-scarlet-10 $ouds-color-action-negative-loading-light: $core-ouds-color-functional-scarlet-800 !default; $ouds-color-action-negative-pressed-dark: $core-ouds-color-functional-scarlet-100 !default; $ouds-color-action-negative-pressed-light: $core-ouds-color-functional-scarlet-800 !default; -$ouds-color-action-pressed-dark: $core-sosh-color-citrine-300 !default; -$ouds-color-action-pressed-light: $core-sosh-color-blue-duck-dark-400 !default; -$ouds-color-action-read-only-primary-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-action-pressed-dark: $core-sosh-color-turbo-300 !default; +$ouds-color-action-pressed-light: $core-sosh-color-lochmara-dark-240 !default; +$ouds-color-action-read-only-primary-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-action-read-only-primary-light: $core-ouds-color-functional-black !default; -$ouds-color-action-read-only-secondary-dark: $core-ouds-color-opacity-white-200 !default; -$ouds-color-action-read-only-secondary-light: $core-ouds-color-opacity-black-200 !default; -$ouds-color-action-selected-dark: $core-sosh-color-blue-duck-light-800 !default; -$ouds-color-action-selected-light: $core-sosh-color-magenta-500 !default; -$ouds-color-action-support-disabled-dark: $core-ouds-color-opacity-white-40 !default; -$ouds-color-action-support-disabled-light: $core-ouds-color-opacity-black-40 !default; -$ouds-color-action-support-enabled-dark: $core-ouds-color-opacity-white-40 !default; -$ouds-color-action-support-enabled-light: $core-ouds-color-opacity-black-40 !default; -$ouds-color-action-support-focus-dark: $core-ouds-color-opacity-white-80 !default; -$ouds-color-action-support-focus-light: $core-ouds-color-opacity-black-80 !default; -$ouds-color-action-support-hover-dark: $core-ouds-color-opacity-white-80 !default; -$ouds-color-action-support-hover-light: $core-ouds-color-opacity-black-80 !default; -$ouds-color-action-support-loading-dark: $core-ouds-color-opacity-white-120 !default; -$ouds-color-action-support-loading-light: $core-ouds-color-opacity-black-120 !default; -$ouds-color-action-support-pressed-dark: $core-ouds-color-opacity-white-120 !default; -$ouds-color-action-support-pressed-light: $core-ouds-color-opacity-black-120 !default; +$ouds-color-action-read-only-secondary-dark: $core-sosh-color-opacity-white-200 !default; +$ouds-color-action-read-only-secondary-light: $core-sosh-color-opacity-black-200 !default; +$ouds-color-action-selected-dark: $core-sosh-color-lochmara-light-640 !default; +$ouds-color-action-selected-light: $core-sosh-color-raspberry-500 !default; +$ouds-color-action-support-disabled-dark: $core-sosh-color-opacity-white-40 !default; +$ouds-color-action-support-disabled-light: $core-sosh-color-opacity-black-40 !default; +$ouds-color-action-support-enabled-dark: $core-sosh-color-opacity-white-40 !default; +$ouds-color-action-support-enabled-light: $core-sosh-color-opacity-black-40 !default; +$ouds-color-action-support-focus-dark: $core-sosh-color-opacity-white-80 !default; +$ouds-color-action-support-focus-light: $core-sosh-color-opacity-black-80 !default; +$ouds-color-action-support-hover-dark: $core-sosh-color-opacity-white-80 !default; +$ouds-color-action-support-hover-light: $core-sosh-color-opacity-black-80 !default; +$ouds-color-action-support-loading-dark: $core-sosh-color-opacity-white-120 !default; +$ouds-color-action-support-loading-light: $core-sosh-color-opacity-black-120 !default; +$ouds-color-action-support-pressed-dark: $core-sosh-color-opacity-white-120 !default; +$ouds-color-action-support-pressed-light: $core-sosh-color-opacity-black-120 !default; $ouds-color-action-visited-dark: $core-ouds-color-functional-amethyst-400 !default; $ouds-color-action-visited-light: $core-ouds-color-functional-amethyst-600 !default; $ouds-color-always-black: $core-ouds-color-functional-black !default; -$ouds-color-always-on-black: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-always-on-black: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-always-on-white: $core-ouds-color-functional-black !default; $ouds-color-always-white: $core-ouds-color-functional-white !default; -$ouds-color-bg-inverse-high-dark: $core-ouds-color-functional-gray-light-160 !default; -$ouds-color-bg-inverse-high-light: $core-sosh-color-blue-duck-dark-880 !default; -$ouds-color-bg-inverse-low-dark: $core-sosh-color-blue-duck-dark-720 !default; -$ouds-color-bg-inverse-low-light: $core-sosh-color-blue-duck-dark-880 !default; -$ouds-color-bg-primary-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-bg-inverse-high-dark: $core-sosh-color-lochmara-light-80 !default; +$ouds-color-bg-inverse-high-light: $core-sosh-color-lochmara-dark-880 !default; +$ouds-color-bg-inverse-low-dark: $core-sosh-color-lochmara-dark-720 !default; +$ouds-color-bg-inverse-low-light: $core-sosh-color-lochmara-dark-880 !default; +$ouds-color-bg-primary-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-bg-primary-light: $core-ouds-color-functional-white !default; -$ouds-color-bg-secondary-dark: $core-sosh-color-blue-duck-dark-880 !default; -$ouds-color-bg-secondary-light: $core-sosh-color-blue-duck-light-80 !default; -$ouds-color-bg-tertiary-dark: $core-sosh-color-citrine-950 !default; -$ouds-color-bg-tertiary-light: $core-sosh-color-citrine-50 !default; -$ouds-color-border-brand-primary-dark: $core-sosh-color-magenta-300 !default; -$ouds-color-border-brand-primary-light: $core-sosh-color-magenta-500 !default; -$ouds-color-border-brand-secondary-dark: $core-sosh-color-blue-duck-light-800 !default; -$ouds-color-border-brand-secondary-light: $core-sosh-color-blue-duck-dark-400 !default; -$ouds-color-border-brand-tertiary-dark: $core-sosh-color-citrine-300 !default; -$ouds-color-border-brand-tertiary-light: $core-sosh-color-citrine-500 !default; -$ouds-color-border-default-dark: $core-ouds-color-opacity-white-200 !default; -$ouds-color-border-default-light: $core-ouds-color-opacity-black-200 !default; -$ouds-color-border-emphasized-dark: $core-ouds-color-opacity-white-920 !default; +$ouds-color-bg-secondary-dark: $core-sosh-color-lochmara-dark-880 !default; +$ouds-color-bg-secondary-light: $core-sosh-color-lochmara-light-80 !default; +$ouds-color-bg-tertiary-dark: $core-sosh-color-turbo-950 !default; +$ouds-color-bg-tertiary-light: $core-sosh-color-turbo-50 !default; +$ouds-color-border-brand-primary-dark: $core-sosh-color-raspberry-300 !default; +$ouds-color-border-brand-primary-light: $core-sosh-color-raspberry-500 !default; +$ouds-color-border-brand-secondary-dark: $core-sosh-color-lochmara-light-640 !default; +$ouds-color-border-brand-secondary-light: $core-sosh-color-lochmara-dark-240 !default; +$ouds-color-border-brand-tertiary-dark: $core-sosh-color-turbo-300 !default; +$ouds-color-border-brand-tertiary-light: $core-sosh-color-turbo-500 !default; +$ouds-color-border-default-dark: $core-sosh-color-opacity-white-200 !default; +$ouds-color-border-default-light: $core-sosh-color-opacity-black-200 !default; +$ouds-color-border-emphasized-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-border-emphasized-light: $core-ouds-color-functional-black !default; -$ouds-color-border-focus-dark: $core-ouds-color-functional-gray-light-160 !default; -$ouds-color-border-focus-inset-dark: $core-ouds-color-functional-gray-dark-880 !default; +$ouds-color-border-focus-dark: $core-sosh-color-functional-gray-light-160 !default; +$ouds-color-border-focus-inset-dark: $core-sosh-color-functional-gray-dark-880 !default; $ouds-color-border-focus-inset-light: $core-ouds-color-functional-white !default; $ouds-color-border-focus-light: $core-ouds-color-functional-black !default; -$ouds-color-border-minimal-dark: $core-ouds-color-opacity-white-40 !default; -$ouds-color-border-minimal-light: $core-ouds-color-opacity-black-40 !default; -$ouds-color-border-muted-dark: $core-ouds-color-opacity-white-80 !default; -$ouds-color-border-muted-light: $core-ouds-color-opacity-black-80 !default; -$ouds-color-border-on-brand-primary-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-border-minimal-dark: $core-sosh-color-opacity-white-40 !default; +$ouds-color-border-minimal-light: $core-sosh-color-opacity-black-40 !default; +$ouds-color-border-muted-dark: $core-sosh-color-opacity-white-80 !default; +$ouds-color-border-muted-light: $core-sosh-color-opacity-black-80 !default; +$ouds-color-border-on-brand-primary-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-border-on-brand-primary-light: $core-ouds-color-functional-white !default; -$ouds-color-border-on-brand-secondary-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-border-on-brand-secondary-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-border-on-brand-secondary-light: $core-ouds-color-functional-white !default; -$ouds-color-border-on-brand-tertiary-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-border-on-brand-tertiary-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-border-on-brand-tertiary-light: $core-ouds-color-functional-black !default; -$ouds-color-border-status-accent-dark: $core-sosh-color-magenta-300 !default; -$ouds-color-border-status-accent-light: $core-sosh-color-magenta-500 !default; -$ouds-color-border-status-info-dark: $core-ouds-color-functional-dodger-blue-300 !default; -$ouds-color-border-status-info-light: $core-ouds-color-functional-dodger-blue-700 !default; +$ouds-color-border-status-accent-dark: $core-sosh-color-raspberry-300 !default; +$ouds-color-border-status-accent-light: $core-sosh-color-raspberry-500 !default; +$ouds-color-border-status-info-dark: $core-sosh-color-lochmara-light-400 !default; +$ouds-color-border-status-info-light: $core-sosh-color-lochmara-dark-240 !default; $ouds-color-border-status-negative-dark: $core-ouds-color-functional-scarlet-300 !default; $ouds-color-border-status-negative-light: $core-ouds-color-functional-scarlet-600 !default; $ouds-color-border-status-positive-dark: $core-ouds-color-functional-malachite-300 !default; $ouds-color-border-status-positive-light: $core-ouds-color-functional-malachite-750 !default; -$ouds-color-border-status-warning-dark: $core-ouds-color-functional-sun-300 !default; -$ouds-color-border-status-warning-light: $core-ouds-color-functional-sun-500 !default; -$ouds-color-content-brand-primary-dark: $core-sosh-color-magenta-300 !default; -$ouds-color-content-brand-primary-light: $core-sosh-color-magenta-500 !default; // Test for support Figma -$ouds-color-content-brand-secondary-dark: $core-sosh-color-blue-duck-light-800 !default; -$ouds-color-content-brand-secondary-light: $core-sosh-color-blue-duck-dark-400 !default; -$ouds-color-content-brand-tertiary-dark: $core-sosh-color-citrine-300 !default; -$ouds-color-content-brand-tertiary-light: $core-sosh-color-citrine-500 !default; -$ouds-color-content-default-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-border-status-warning-dark: $core-sosh-color-turbo-300 !default; +$ouds-color-border-status-warning-light: $core-sosh-color-turbo-500 !default; +$ouds-color-content-brand-primary-dark: $core-sosh-color-raspberry-300 !default; +$ouds-color-content-brand-primary-light: $core-sosh-color-raspberry-500 !default; // Test for support Figma +$ouds-color-content-brand-secondary-dark: $core-sosh-color-lochmara-light-640 !default; +$ouds-color-content-brand-secondary-light: $core-sosh-color-lochmara-dark-240 !default; +$ouds-color-content-brand-tertiary-dark: $core-sosh-color-turbo-300 !default; +$ouds-color-content-brand-tertiary-light: $core-sosh-color-turbo-500 !default; +$ouds-color-content-default-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-content-default-light: $core-ouds-color-functional-black !default; -$ouds-color-content-disabled-dark: $core-ouds-color-opacity-white-200 !default; -$ouds-color-content-disabled-light: $core-ouds-color-opacity-black-200 !default; +$ouds-color-content-disabled-dark: $core-sosh-color-opacity-white-200 !default; +$ouds-color-content-disabled-light: $core-sosh-color-opacity-black-200 !default; $ouds-color-content-inverse-dark: $core-ouds-color-functional-black !default; $ouds-color-content-inverse-light: $core-ouds-color-functional-white !default; -$ouds-color-content-muted-dark: $core-ouds-color-opacity-white-640 !default; -$ouds-color-content-muted-light: $core-ouds-color-opacity-black-680 !default; -$ouds-color-content-on-action-disabled-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-muted-dark: $core-sosh-color-opacity-white-640 !default; +$ouds-color-content-muted-light: $core-sosh-color-opacity-black-720 !default; +$ouds-color-content-on-action-disabled-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-action-disabled-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-action-enabled-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-action-enabled-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-action-enabled-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-action-focus-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-action-focus-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-action-focus-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-action-highlighted-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-action-highlighted-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-action-highlighted-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-action-hover-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-action-hover-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-action-hover-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-action-loading-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-action-loading-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-action-loading-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-action-pressed-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-action-pressed-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-action-pressed-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-action-selected-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-action-selected-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-action-selected-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-brand-primary-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-brand-primary-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-brand-primary-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-brand-secondary-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-brand-secondary-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-brand-secondary-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-brand-tertiary-dark: $core-sosh-color-blue-duck-dark-960 !default; +$ouds-color-content-on-brand-tertiary-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-brand-tertiary-light: $core-ouds-color-functional-black !default; -$ouds-color-content-on-status-accent-emphasized-dark: $core-ouds-color-functional-black !default; +$ouds-color-content-on-status-accent-emphasized-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-status-accent-emphasized-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-status-accent-muted-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-content-on-status-accent-muted-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-content-on-status-accent-muted-light: $core-ouds-color-functional-black !default; -$ouds-color-content-on-status-info-emphasized-dark: $core-ouds-color-functional-black !default; +$ouds-color-content-on-status-info-emphasized-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-status-info-emphasized-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-status-info-muted-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-content-on-status-info-muted-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-content-on-status-info-muted-light: $core-ouds-color-functional-black !default; -$ouds-color-content-on-status-negative-emphasized-dark: $core-ouds-color-functional-black !default; +$ouds-color-content-on-status-negative-emphasized-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-status-negative-emphasized-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-status-negative-muted-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-content-on-status-negative-muted-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-content-on-status-negative-muted-light: $core-ouds-color-functional-black !default; -$ouds-color-content-on-status-positive-emphasized-dark: $core-ouds-color-functional-black !default; +$ouds-color-content-on-status-positive-emphasized-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-status-positive-emphasized-light: $core-ouds-color-functional-white !default; -$ouds-color-content-on-status-positive-muted-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-content-on-status-positive-muted-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-content-on-status-positive-muted-light: $core-ouds-color-functional-black !default; -$ouds-color-content-on-status-warning-emphasized-dark: $core-ouds-color-functional-black !default; +$ouds-color-content-on-status-warning-emphasized-dark: $core-sosh-color-lochmara-dark-960 !default; $ouds-color-content-on-status-warning-emphasized-light: $core-ouds-color-functional-black !default; -$ouds-color-content-on-status-warning-muted-dark: $core-ouds-color-functional-gray-light-160 !default; +$ouds-color-content-on-status-warning-muted-dark: $core-sosh-color-functional-gray-light-160 !default; $ouds-color-content-on-status-warning-muted-light: $core-ouds-color-functional-black !default; -$ouds-color-content-status-accent-dark: $core-sosh-color-magenta-300 !default; -$ouds-color-content-status-accent-light: $core-sosh-color-magenta-500 !default; -$ouds-color-content-status-info-dark: $core-ouds-color-functional-dodger-blue-300 !default; -$ouds-color-content-status-info-light: $core-ouds-color-functional-dodger-blue-700 !default; +$ouds-color-content-status-accent-dark: $core-sosh-color-raspberry-300 !default; +$ouds-color-content-status-accent-light: $core-sosh-color-raspberry-500 !default; +$ouds-color-content-status-info-dark: $core-sosh-color-lochmara-light-400 !default; +$ouds-color-content-status-info-light: $core-sosh-color-lochmara-dark-240 !default; +$ouds-color-content-status-inverse-info-dark: $core-sosh-color-lochmara-dark-240 !default; +$ouds-color-content-status-inverse-info-light: $core-sosh-color-lochmara-light-400 !default; +$ouds-color-content-status-inverse-negative-dark: $core-ouds-color-functional-scarlet-600 !default; +$ouds-color-content-status-inverse-negative-light: $core-ouds-color-functional-scarlet-300 !default; +$ouds-color-content-status-inverse-positive-dark: $core-ouds-color-functional-malachite-750 !default; +$ouds-color-content-status-inverse-positive-light: $core-ouds-color-functional-malachite-300 !default; +$ouds-color-content-status-inverse-warning-dark: $core-sosh-color-turbo-750 !default; +$ouds-color-content-status-inverse-warning-light: $core-sosh-color-turbo-300 !default; $ouds-color-content-status-negative-dark: $core-ouds-color-functional-scarlet-300 !default; $ouds-color-content-status-negative-light: $core-ouds-color-functional-scarlet-600 !default; $ouds-color-content-status-positive-dark: $core-ouds-color-functional-malachite-300 !default; $ouds-color-content-status-positive-light: $core-ouds-color-functional-malachite-750 !default; -$ouds-color-content-status-warning-dark: $core-ouds-color-functional-sun-300 !default; -$ouds-color-content-status-warning-light: $core-ouds-color-functional-sun-750 !default; -$ouds-color-opacity-lower-dark: $core-ouds-color-opacity-white-80 !default; -$ouds-color-opacity-lower-light: $core-ouds-color-opacity-black-80 !default; -$ouds-color-opacity-lowest-dark: $core-ouds-color-opacity-white-40 !default; -$ouds-color-opacity-lowest-light: $core-ouds-color-opacity-black-40 !default; -$ouds-color-opacity-transparent-dark: $core-ouds-color-opacity-white-0 !default; -$ouds-color-opacity-transparent-light: $core-ouds-color-opacity-black-0 !default; -$ouds-color-overlay-drag-dark: $core-ouds-color-opacity-white-80 !default; -$ouds-color-overlay-drag-light: $core-ouds-color-opacity-black-40 !default; -$ouds-color-overlay-dropdown-dark: $core-ouds-color-functional-gray-dark-560 !default; +$ouds-color-content-status-warning-dark: $core-sosh-color-turbo-300 !default; +$ouds-color-content-status-warning-light: $core-sosh-color-turbo-750 !default; +$ouds-color-opacity-lower-dark: $core-sosh-color-opacity-white-80 !default; +$ouds-color-opacity-lower-light: $core-sosh-color-opacity-black-80 !default; +$ouds-color-opacity-lowest-dark: $core-sosh-color-opacity-white-40 !default; +$ouds-color-opacity-lowest-light: $core-sosh-color-opacity-black-40 !default; +$ouds-color-opacity-transparent-dark: $core-sosh-color-opacity-white-0 !default; +$ouds-color-opacity-transparent-light: $core-sosh-color-opacity-black-0 !default; +$ouds-color-overlay-backdrop-dark: $core-sosh-color-opacity-black-720 !default; +$ouds-color-overlay-backdrop-light: $core-sosh-color-opacity-black-720 !default; +$ouds-color-overlay-drag-dark: $core-sosh-color-opacity-white-80 !default; +$ouds-color-overlay-drag-light: $core-sosh-color-opacity-black-40 !default; +$ouds-color-overlay-dropdown-dark: $core-sosh-color-functional-gray-dark-560 !default; $ouds-color-overlay-dropdown-light: $core-ouds-color-functional-white !default; -$ouds-color-overlay-modal-dark: $core-sosh-color-blue-duck-dark-720 !default; -$ouds-color-overlay-modal-light: $core-ouds-color-functional-white !default; -$ouds-color-overlay-tooltip-dark: $core-ouds-color-functional-gray-dark-560 !default; -$ouds-color-overlay-tooltip-light: $core-ouds-color-functional-gray-dark-720 !default; -$ouds-color-surface-brand-primary-dark: $core-sosh-color-magenta-300 !default; -$ouds-color-surface-brand-primary-light: $core-sosh-color-magenta-500 !default; -$ouds-color-surface-brand-secondary-dark: $core-sosh-color-blue-duck-light-800 !default; -$ouds-color-surface-brand-secondary-light: $core-sosh-color-blue-duck-dark-400 !default; -$ouds-color-surface-brand-tertiary-dark: $core-sosh-color-citrine-300 !default; -$ouds-color-surface-brand-tertiary-light: $core-sosh-color-citrine-500 !default; -$ouds-color-surface-inverse-high-dark: $core-ouds-color-functional-gray-light-160 !default; -$ouds-color-surface-inverse-high-light: $core-ouds-color-functional-gray-dark-720 !default; -$ouds-color-surface-inverse-low-dark: $core-ouds-color-opacity-white-120 !default; -$ouds-color-surface-inverse-low-light: $core-ouds-color-functional-gray-dark-720 !default; -$ouds-color-surface-primary-dark: $core-ouds-color-opacity-white-40 !default; +$ouds-color-overlay-modal-sheet-dark: $core-sosh-color-lochmara-dark-800 !default; +$ouds-color-overlay-modal-sheet-light: $core-ouds-color-functional-white !default; +$ouds-color-overlay-tooltip-dark: $core-sosh-color-functional-gray-dark-560 !default; +$ouds-color-overlay-tooltip-light: $core-sosh-color-functional-gray-dark-720 !default; +$ouds-color-surface-brand-primary-dark: $core-sosh-color-raspberry-300 !default; +$ouds-color-surface-brand-primary-light: $core-sosh-color-raspberry-500 !default; +$ouds-color-surface-brand-secondary-dark: $core-sosh-color-lochmara-light-640 !default; +$ouds-color-surface-brand-secondary-light: $core-sosh-color-lochmara-dark-240 !default; +$ouds-color-surface-brand-tertiary-dark: $core-sosh-color-turbo-300 !default; +$ouds-color-surface-brand-tertiary-light: $core-sosh-color-turbo-500 !default; +$ouds-color-surface-inverse-high-dark: $core-sosh-color-lochmara-light-80 !default; +$ouds-color-surface-inverse-high-light: $core-sosh-color-lochmara-dark-880 !default; +$ouds-color-surface-inverse-low-dark: $core-sosh-color-opacity-white-120 !default; +$ouds-color-surface-inverse-low-light: $core-sosh-color-lochmara-dark-880 !default; +$ouds-color-surface-primary-dark: $core-sosh-color-opacity-white-40 !default; $ouds-color-surface-primary-light: $core-ouds-color-functional-white !default; -$ouds-color-surface-secondary-dark: $core-ouds-color-opacity-white-80 !default; -$ouds-color-surface-secondary-light: $core-ouds-color-opacity-black-40 !default; -$ouds-color-surface-status-accent-emphasized-dark: $core-sosh-color-magenta-300 !default; -$ouds-color-surface-status-accent-emphasized-light: $core-sosh-color-magenta-500 !default; -$ouds-color-surface-status-accent-muted-dark: $core-sosh-color-opacity-magenta-640 !default; -$ouds-color-surface-status-accent-muted-light: $core-sosh-color-opacity-magenta-120 !default; -$ouds-color-surface-status-info-emphasized-dark: $core-ouds-color-functional-dodger-blue-300 !default; -$ouds-color-surface-status-info-emphasized-light: $core-ouds-color-functional-dodger-blue-700 !default; -$ouds-color-surface-status-info-muted-dark: $core-ouds-color-opacity-dodger-blue-520 !default; -$ouds-color-surface-status-info-muted-light: $core-ouds-color-opacity-dodger-blue-80 !default; +$ouds-color-surface-secondary-dark: $core-sosh-color-opacity-white-80 !default; +$ouds-color-surface-secondary-light: $core-sosh-color-opacity-black-40 !default; +$ouds-color-surface-status-accent-emphasized-dark: $core-sosh-color-raspberry-300 !default; +$ouds-color-surface-status-accent-emphasized-light: $core-sosh-color-raspberry-500 !default; +$ouds-color-surface-status-accent-muted-dark: $core-sosh-color-opacity-raspberry-640 !default; +$ouds-color-surface-status-accent-muted-light: $core-sosh-color-opacity-raspberry-100 !default; +$ouds-color-surface-status-info-emphasized-dark: $core-sosh-color-lochmara-light-400 !default; +$ouds-color-surface-status-info-emphasized-light: $core-sosh-color-lochmara-dark-240 !default; +$ouds-color-surface-status-info-muted-dark: $core-sosh-color-opacity-lochmara-dark-880-520 !default; +$ouds-color-surface-status-info-muted-light: $core-sosh-color-opacity-lochmara-light-800-80 !default; $ouds-color-surface-status-negative-emphasized-dark: $core-ouds-color-functional-scarlet-300 !default; $ouds-color-surface-status-negative-emphasized-light: $core-ouds-color-functional-scarlet-600 !default; $ouds-color-surface-status-negative-muted-dark: $core-ouds-color-opacity-scarlet-320 !default; @@ -284,12 +294,12 @@ $ouds-color-surface-status-positive-emphasized-dark: $core-ouds-color-functional $ouds-color-surface-status-positive-emphasized-light: $core-ouds-color-functional-malachite-750 !default; $ouds-color-surface-status-positive-muted-dark: $core-ouds-color-opacity-malachite-640 !default; $ouds-color-surface-status-positive-muted-light: $core-ouds-color-opacity-malachite-120 !default; -$ouds-color-surface-status-warning-emphasized-dark: $core-ouds-color-functional-sun-300 !default; -$ouds-color-surface-status-warning-emphasized-light: $core-ouds-color-functional-sun-500 !default; -$ouds-color-surface-status-warning-muted-dark: $core-ouds-color-opacity-sun-480 !default; -$ouds-color-surface-status-warning-muted-light: $core-ouds-color-opacity-sun-160 !default; -$ouds-color-surface-tertiary-dark: $core-sosh-color-opacity-magenta-640 !default; -$ouds-color-surface-tertiary-light: $core-sosh-color-opacity-magenta-120 !default; +$ouds-color-surface-status-warning-emphasized-dark: $core-sosh-color-turbo-300 !default; +$ouds-color-surface-status-warning-emphasized-light: $core-sosh-color-turbo-500 !default; +$ouds-color-surface-status-warning-muted-dark: $core-sosh-color-opacity-turbo-480 !default; +$ouds-color-surface-status-warning-muted-light: $core-sosh-color-opacity-turbo-160 !default; +$ouds-color-surface-tertiary-dark: $core-sosh-color-opacity-raspberry-640 !default; +$ouds-color-surface-tertiary-light: $core-sosh-color-opacity-raspberry-100 !default; // scss-docs-end ouds-semantic-color // Dimension @@ -327,22 +337,22 @@ $ouds-dimension-xsmall: $core-ouds-dimension-400 !default; // Effect // scss-docs-start ouds-semantic-effect -$ouds-effect-blur-drag: $core-ouds-effect-blur-320 !default; +$ouds-effect-blur-drag: $core-ouds-effect-blur-480 !default; // scss-docs-end ouds-semantic-effect // Elevation // scss-docs-start ouds-semantic-elevation -$ouds-elevation-blur-default: $core-ouds-elevation-blur-300 !default; $ouds-elevation-blur-drag: $core-ouds-elevation-blur-400 !default; +$ouds-elevation-blur-elevated: $core-ouds-elevation-blur-300 !default; $ouds-elevation-blur-emphasized: $core-ouds-elevation-blur-600 !default; $ouds-elevation-blur-none: $core-ouds-elevation-blur-0 !default; $ouds-elevation-blur-raised: $core-ouds-elevation-blur-200 !default; $ouds-elevation-blur-sticky: $core-ouds-elevation-blur-400 !default; -$ouds-elevation-color-default-dark: $core-ouds-color-opacity-black-240 !default; -$ouds-elevation-color-default-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-drag-dark: $core-ouds-color-opacity-black-320 !default; $ouds-elevation-color-drag-light: $core-ouds-color-opacity-black-240 !default; +$ouds-elevation-color-elevated-dark: $core-ouds-color-opacity-black-240 !default; +$ouds-elevation-color-elevated-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-emphasized-dark: $core-ouds-color-opacity-black-160 !default; $ouds-elevation-color-emphasized-light: $core-ouds-color-opacity-black-160 !default; $ouds-elevation-color-none: $core-ouds-color-opacity-black-0 !default; @@ -350,20 +360,20 @@ $ouds-elevation-color-raised-dark: $core-ouds-color-opacity-black-320 !default; $ouds-elevation-color-raised-light: $core-ouds-color-opacity-black-240 !default; $ouds-elevation-color-sticky-dark: $core-ouds-color-opacity-black-160 !default; $ouds-elevation-color-sticky-light: $core-ouds-color-opacity-black-160 !default; -$ouds-elevation-spread-default: $core-ouds-elevation-spread-n100 !default; $ouds-elevation-spread-drag: $core-ouds-elevation-spread-n100 !default; +$ouds-elevation-spread-elevated: $core-ouds-elevation-spread-n100 !default; $ouds-elevation-spread-emphasized: $core-ouds-elevation-spread-n300 !default; $ouds-elevation-spread-none: $core-ouds-elevation-spread-0 !default; $ouds-elevation-spread-raised: $core-ouds-elevation-spread-0 !default; $ouds-elevation-spread-sticky: $core-ouds-elevation-spread-n100 !default; -$ouds-elevation-x-default: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-drag: $core-ouds-elevation-x-0 !default; +$ouds-elevation-x-elevated: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-emphasized: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-none: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-raised: $core-ouds-elevation-x-0 !default; $ouds-elevation-x-sticky: $core-ouds-elevation-x-0 !default; -$ouds-elevation-y-default: $core-ouds-elevation-y-200 !default; $ouds-elevation-y-drag: $core-ouds-elevation-y-300 !default; +$ouds-elevation-y-elevated: $core-ouds-elevation-y-200 !default; $ouds-elevation-y-emphasized: $core-ouds-elevation-y-500 !default; $ouds-elevation-y-none: $core-ouds-elevation-y-0 !default; $ouds-elevation-y-raised: $core-ouds-elevation-y-100 !default; @@ -517,6 +527,7 @@ $ouds-grid-2xs-width: $core-ouds-grid-width-100 !default; $ouds-grid-3xl-column-count: $core-ouds-grid-column-count-1200 !default; $ouds-grid-3xl-column-gap: $core-ouds-grid-column-gap-800 !default; $ouds-grid-3xl-margin: $core-ouds-grid-margin-2500 !default; +$ouds-grid-3xl-max-width: $core-ouds-grid-max-width-800 !default; $ouds-grid-3xl-min-width: $core-ouds-grid-min-width-800 !default; $ouds-grid-3xl-width: $core-ouds-grid-width-800 !default; $ouds-grid-lg-column-count: $core-ouds-grid-column-count-600 !default; @@ -630,48 +641,48 @@ $ouds-size-icon-with-heading-xlarge-size-medium-tablet: $core-ouds-dimension-600 $ouds-size-icon-with-heading-xlarge-size-small-desktop: $core-ouds-dimension-650 !default; $ouds-size-icon-with-heading-xlarge-size-small-mobile: $core-ouds-dimension-450 !default; $ouds-size-icon-with-heading-xlarge-size-small-tablet: $core-ouds-dimension-550 !default; -$ouds-size-max-width-type-body-large-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-body-large-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-large-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-medium-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-body-medium-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-medium-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-body-small-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-display-large-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-large-mobile: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-large-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-medium-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-medium-mobile: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-medium-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-small-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-display-small-mobile: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-display-small-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-large-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-heading-large-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-large-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-medium-desktop: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-medium-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-medium-tablet: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-small-desktop: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-heading-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-heading-small-tablet: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-xlarge-desktop: $core-ouds-dimension-11000 !default; -$ouds-size-max-width-type-heading-xlarge-mobile: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-heading-xlarge-tablet: $core-ouds-dimension-9000 !default; -$ouds-size-max-width-type-label-large-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-label-large-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-large-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-medium-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-desktop: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-small-tablet: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-xlarge-desktop: $core-ouds-dimension-7000 !default; -$ouds-size-max-width-type-label-xlarge-mobile: $core-ouds-dimension-6000 !default; -$ouds-size-max-width-type-label-xlarge-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-large-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-body-large-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-large-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-medium-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-body-medium-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-medium-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-body-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-display-large-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-large-mobile: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-large-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-medium-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-medium-mobile: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-medium-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-small-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-display-small-mobile: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-display-small-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-large-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-heading-large-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-large-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-medium-desktop: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-medium-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-medium-tablet: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-small-desktop: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-heading-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-heading-small-tablet: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-xlarge-desktop: $core-ouds-dimension-11000 !default; +$ouds-size-max-width-heading-xlarge-mobile: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-heading-xlarge-tablet: $core-ouds-dimension-9000 !default; +$ouds-size-max-width-label-large-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-label-large-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-large-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-medium-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-desktop: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-small-tablet: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-xlarge-desktop: $core-ouds-dimension-7000 !default; +$ouds-size-max-width-label-xlarge-mobile: $core-ouds-dimension-6000 !default; +$ouds-size-max-width-label-xlarge-tablet: $core-ouds-dimension-6000 !default; $ouds-size-min-interactive-area: $core-ouds-dimension-600 !default; $ouds-size-icon-decorative-2xlarge: $ouds-dimension-6xlarge !default; $ouds-size-icon-decorative-2xsmall: $ouds-dimension-5xsmall !default; @@ -685,7 +696,7 @@ $ouds-size-icon-decorative-xsmall: $ouds-dimension-3xsmall !default; $ouds-size-icon-with-label-large-size-large: $ouds-dimension-xsmall !default; $ouds-size-icon-with-label-large-size-medium: $ouds-dimension-2xsmall !default; $ouds-size-icon-with-label-large-size-small: $ouds-dimension-3xsmall !default; -$ouds-size-icon-with-label-large-size-xlarge: $ouds-dimension-large !default; +$ouds-size-icon-with-label-large-size-xlarge: $ouds-dimension-small !default; $ouds-size-icon-with-label-large-size-xsmall: $ouds-dimension-4xsmall !default; $ouds-size-icon-with-label-medium-size-large: $ouds-dimension-3xsmall !default; $ouds-size-icon-with-label-medium-size-medium: $ouds-dimension-4xsmall !default; @@ -695,9 +706,10 @@ $ouds-size-icon-with-label-small-size-large: $ouds-dimension-4xsmall !default; $ouds-size-icon-with-label-small-size-medium: $ouds-dimension-5xsmall !default; $ouds-size-icon-with-label-small-size-small: $ouds-dimension-6xsmall !default; $ouds-size-icon-with-label-small-size-xsmall: $ouds-dimension-7xsmall !default; -$ouds-size-icon-with-label-xlarge-size-large: $ouds-dimension-large !default; -$ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-medium !default; +$ouds-size-icon-with-label-xlarge-size-large: $ouds-dimension-medium !default; +$ouds-size-icon-with-label-xlarge-size-medium: $ouds-dimension-small !default; $ouds-size-icon-with-label-xlarge-size-small: $ouds-dimension-xsmall !default; +$ouds-size-icon-with-label-xlarge-size-xsmall: $ouds-dimension-2xsmall !default; // scss-docs-end ouds-semantic-size // Space diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml index 0b70c53c2a..ab2b6f2354 100644 --- a/site/data/_components-versions.yml +++ b/site/data/_components-versions.yml @@ -1,20 +1,21 @@ # Components versions -# OUDS Core tokens version 1.9.0 -# OUDS Core tokens version 1.2.0 -# OUDS System tokens version 2.3.0 - name: 'alert-message' - value: '1.1.0' + value: '1.1.1' +- name: 'app-bar' + value: '1.0.0' - name: 'badge' value: '1.2.0' - name: 'badge-count' value: '1.2.0' - name: 'badge-icon' - value: '1.2.0' + value: '1.3.0' +- name: 'bottom_sheet' + value: '0.0.0' - name: 'breadcrumb' value: '1.1.0' - name: 'bullet-list' - value: '1.0.0' + value: '1.1.0' - name: 'button' value: '3.2.0' - name: 'checkbox' @@ -25,39 +26,51 @@ value: '3.1.0' - name: 'expand-link' value: '2.3.0' +- name: 'fab' + value: '0.0.0' - name: 'filter-chip' - value: '1.3.0' -- name: 'input-tag' - value: '1.1.0' + value: '1.4.0' +- name: 'filter-chip-expand' + value: '1.4.0' - name: 'inline-alert' value: '1.0.0' +- name: 'input-tag' + value: '1.2.0' - name: 'link' value: '2.2.0' - name: 'navigation-bar' value: '1.0.0' - name: 'navigation-button' - value: '3.2.0' + value: '3.2.1' - name: 'password-input' - value: '1.2.0' + value: '1.3.0' - name: 'phone-number-input' - value: '1.2.0' + value: '1.3.0' - name: 'pin-code-input' - value: '1.2.0' + value: '1.3.0' - name: 'quantity-input' - value: '1.2.0' + value: '1.3.0' - name: 'radio-button' value: '1.4.0' - name: 'select-input' - value: '1.2.0' + value: '1.3.0' - name: 'skeleton' value: '1.0.0' - name: 'suggestion-chip' - value: '1.3.0' + value: '1.4.0' - name: 'switch' value: '1.5.0' +- name: 'tab-bar' + value: '1.0.0' - name: 'tag' - value: '1.4.0' + value: '1.5.0' - name: 'text-area' - value: '1.1.0' + value: '1.2.0' - name: 'text-input' - value: '1.3.0' + value: '1.4.0' +- name: 'toolbar' + value: '1.0.0' +- name: 'toolbar-bottom' + value: '1.0.0' +- name: 'toolbar-top' + value: '1.0.0' \ No newline at end of file