From 58fef26bb446c9acb824f95fbd6de54821d0018c Mon Sep 17 00:00:00 2001 From: boosted-bot Date: Wed, 24 Jun 2026 08:58:18 +0200 Subject: [PATCH 01/10] chore: update tokens --- .../_component-colors-custom-props.scss | 4 +- .../scss/tokens/_component.scss | 10 +- packages/orange-compact/scss/tokens/_raw.scss | 2 +- .../tokens/_semantic-colors-custom-props.scss | 2 +- .../orange-compact/scss/tokens/_semantic.scss | 2 +- .../_component-colors-custom-props.scss | 4 +- packages/orange/scss/tokens/_component.scss | 10 +- packages/orange/scss/tokens/_raw.scss | 2 +- .../tokens/_semantic-colors-custom-props.scss | 2 +- packages/orange/scss/tokens/_semantic.scss | 4 +- .../_component-colors-custom-props.scss | 116 +++---- packages/sosh/scss/tokens/_component.scss | 12 +- packages/sosh/scss/tokens/_raw.scss | 268 ++++++++-------- .../tokens/_semantic-colors-custom-props.scss | 4 +- packages/sosh/scss/tokens/_semantic.scss | 296 +++++++++--------- site/data/_components-versions.yml | 20 +- 16 files changed, 400 insertions(+), 358 deletions(-) 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 fac9372849..eebe0d74c2 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.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.4.0 +// Orange Compact System tokens version 2.5.0 // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @@ -51,6 +51,7 @@ --#{$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}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}; @@ -111,6 +112,7 @@ --#{$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}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}; diff --git a/packages/orange-compact/scss/tokens/_component.scss b/packages/orange-compact/scss/tokens/_component.scss index f9576579c4..721f116f61 100644 --- a/packages/orange-compact/scss/tokens/_component.scss +++ b/packages/orange-compact/scss/tokens/_component.scss @@ -2,7 +2,7 @@ // Depends on semantic applications // OUDS Core tokens version 1.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.4.0 +// Orange Compact System tokens version 2.5.0 // Alert @@ -366,6 +366,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 @@ -470,7 +476,9 @@ $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-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-medium !default; diff --git a/packages/orange-compact/scss/tokens/_raw.scss b/packages/orange-compact/scss/tokens/_raw.scss index 18265e5ebd..15d4bc955b 100644 --- a/packages/orange-compact/scss/tokens/_raw.scss +++ b/packages/orange-compact/scss/tokens/_raw.scss @@ -2,7 +2,7 @@ // Insertion of brand foundations // OUDS Core tokens version 1.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.4.0 +// Orange Compact System tokens version 2.5.0 // Border 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 92254a59e2..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.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.4.0 +// Orange Compact System tokens version 2.5.0 // scss-docs-start ouds-all-semantic-css-color // scss-docs-start ouds-semantic-css-color diff --git a/packages/orange-compact/scss/tokens/_semantic.scss b/packages/orange-compact/scss/tokens/_semantic.scss index 3ebd633533..07c06469cc 100644 --- a/packages/orange-compact/scss/tokens/_semantic.scss +++ b/packages/orange-compact/scss/tokens/_semantic.scss @@ -2,7 +2,7 @@ // Depends on raw primitive values // OUDS Core tokens version 1.10.0 // Orange Compact Core tokens version 1.2.0 -// Orange Compact System tokens version 2.4.0 +// Orange Compact System tokens version 2.5.0 // Border diff --git a/packages/orange/scss/tokens/_component-colors-custom-props.scss b/packages/orange/scss/tokens/_component-colors-custom-props.scss index 4ff5f1ad6b..921558586b 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.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.4.0 +// Orange System tokens version 2.5.0 // scss-docs-start ouds-all-component-css-color // scss-docs-start ouds-component-css-color @@ -51,6 +51,7 @@ --#{$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}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}; @@ -112,6 +113,7 @@ --#{$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}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}; diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 6cc3baf741..9642f10b59 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -2,7 +2,7 @@ // Depends on semantic applications // OUDS Core tokens version 1.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.4.0 +// Orange System tokens version 2.5.0 // Alert @@ -366,6 +366,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 @@ -470,7 +476,9 @@ $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-medium !default; diff --git a/packages/orange/scss/tokens/_raw.scss b/packages/orange/scss/tokens/_raw.scss index 85f4f13a9e..5c77e325e0 100644 --- a/packages/orange/scss/tokens/_raw.scss +++ b/packages/orange/scss/tokens/_raw.scss @@ -2,7 +2,7 @@ // Insertion of brand foundations // OUDS Core tokens version 1.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.4.0 +// Orange System tokens version 2.5.0 // Border diff --git a/packages/orange/scss/tokens/_semantic-colors-custom-props.scss b/packages/orange/scss/tokens/_semantic-colors-custom-props.scss index 708e77dc52..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.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.4.0 +// Orange System tokens version 2.5.0 // scss-docs-start ouds-all-semantic-css-color // scss-docs-start ouds-semantic-css-color diff --git a/packages/orange/scss/tokens/_semantic.scss b/packages/orange/scss/tokens/_semantic.scss index 09323fcadc..9a712c2342 100644 --- a/packages/orange/scss/tokens/_semantic.scss +++ b/packages/orange/scss/tokens/_semantic.scss @@ -2,7 +2,7 @@ // Depends on raw primitive values // OUDS Core tokens version 1.10.0 // Orange Core tokens version 1.2.0 -// Orange System tokens version 2.4.0 +// Orange System tokens version 2.5.0 // Border @@ -138,7 +138,7 @@ $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; diff --git a/packages/sosh/scss/tokens/_component-colors-custom-props.scss b/packages/sosh/scss/tokens/_component-colors-custom-props.scss index 4ca151145f..db876e4345 100644 --- a/packages/sosh/scss/tokens/_component-colors-custom-props.scss +++ b/packages/sosh/scss/tokens/_component-colors-custom-props.scss @@ -1,60 +1,61 @@ // Components custom properties applications // OUDS Core tokens version 1.10.0 -// Sosh Core tokens version 1.3.0 -// Sosh System tokens version 2.4.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}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}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-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}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}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}; @@ -68,58 +69,59 @@ // 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}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300}; + --#{$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-ouds-color-functional-sun-500}; - --#{$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-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}button-color-bg-brand-enabled: #{$ouds-color-surface-brand-tertiary-dark}; - --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-ouds-color-functional-sun-750}; + --#{$prefix}icon-color-content-status-warning-inverse-internal-shape: #{$core-sosh-color-turbo-750}; --#{$prefix}control-item-color-bg-hover: #{$ouds-color-action-support-hover-dark}; // Deprecated --#{$prefix}control-item-color-bg-pressed: #{$ouds-color-action-support-pressed-dark}; // Deprecated --#{$prefix}control-item-color-bg-loading: #{$ouds-color-action-support-loading-dark}; // Deprecated diff --git a/packages/sosh/scss/tokens/_component.scss b/packages/sosh/scss/tokens/_component.scss index 9b217e3cd0..df8dad4de0 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.10.0 -// Sosh Core tokens version 1.3.0 -// Sosh System tokens version 2.4.0 +// Sosh Core tokens version 1.4.0 +// Sosh System tokens version 2.5.0 // Alert @@ -366,6 +366,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 @@ -470,7 +476,9 @@ $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; diff --git a/packages/sosh/scss/tokens/_raw.scss b/packages/sosh/scss/tokens/_raw.scss index e77c8e72e2..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.10.0 -// Sosh Core tokens version 1.3.0 -// Sosh System tokens version 2.4.0 +// Sosh Core tokens version 1.4.0 +// Sosh System tokens version 2.5.0 // Border @@ -38,83 +38,6 @@ $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; $core-ouds-color-functional-amethyst-400: #a885d8 !default; $core-ouds-color-functional-amethyst-600: #5b2f98 !default; $core-ouds-color-functional-black: #000 !default; @@ -240,56 +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-blue-duck-dark-960-800: rgba(6, 22, 24, .8) !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 @@ -533,8 +535,8 @@ $core-ouds-opacity-960: .96 !default; $core-ouds-opacity-1000: 1 !default; // scss-docs-end ouds-raw-opacity -// Version: "1.3.0" !default; +// Version: "1.4.0" !default; -// scss-docs-start ouds-raw-version: "1.3.0" !default; -$core-sosh-version: "1.3.0" !default; -// scss-docs-end ouds-raw-version: "1.3.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 f99c21a87e..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.10.0 -// Sosh Core tokens version 1.3.0 -// Sosh System tokens version 2.4.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 diff --git a/packages/sosh/scss/tokens/_semantic.scss b/packages/sosh/scss/tokens/_semantic.scss index d90409100e..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.10.0 -// Sosh Core tokens version 1.3.0 -// Sosh System tokens version 2.4.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,188 +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-functional-gray-light-160 !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-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-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-ouds-color-functional-sun-750 !default; -$ouds-color-content-status-inverse-warning-light: $core-ouds-color-functional-sun-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-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-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-sheet-dark: $core-sosh-color-blue-duck-dark-800 !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-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-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; @@ -294,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 diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml index 0dc4682c0d..ab2b6f2354 100644 --- a/site/data/_components-versions.yml +++ b/site/data/_components-versions.yml @@ -1,7 +1,9 @@ # Components versions - 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' @@ -9,7 +11,7 @@ - name: 'badge-icon' value: '1.3.0' - name: 'bottom_sheet' - value: '1.0.0' + value: '0.0.0' - name: 'breadcrumb' value: '1.1.0' - name: 'bullet-list' @@ -25,7 +27,7 @@ - name: 'expand-link' value: '2.3.0' - name: 'fab' - value: '1.0.0' + value: '0.0.0' - name: 'filter-chip' value: '1.4.0' - name: 'filter-chip-expand' @@ -51,16 +53,24 @@ - 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.4.0' - name: 'switch' value: '1.5.0' +- name: 'tab-bar' + value: '1.0.0' - name: 'tag' value: '1.5.0' - name: 'text-area' - value: '1.1.0' + value: '1.2.0' - name: 'text-input' 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 From 4d0f6087c6d006490105136562d9cb1f26358458 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Wed, 24 Jun 2026 09:59:33 +0200 Subject: [PATCH 02/10] make it compile and test --- packages/sosh/scss/tokens/_raw.scss | 77 +++++++++++++++++++ .../_ouds-web-bootstrap-grid.test.scss | 16 +++- .../_ouds-web-bootstrap-utilities.test.scss | 8 +- 3 files changed, 95 insertions(+), 6 deletions(-) diff --git a/packages/sosh/scss/tokens/_raw.scss b/packages/sosh/scss/tokens/_raw.scss index 8bb8815be2..bf948c9bcd 100644 --- a/packages/sosh/scss/tokens/_raw.scss +++ b/packages/sosh/scss/tokens/_raw.scss @@ -38,6 +38,83 @@ $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; $core-ouds-color-functional-amethyst-400: #a885d8 !default; $core-ouds-color-functional-amethyst-600: #5b2f98 !default; $core-ouds-color-functional-black: #000 !default; diff --git a/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss index 7e7b401421..55954ce40e 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss @@ -162,7 +162,7 @@ $enable-bootstrap-compatibility: null !default; --bs-color-bg-inverse-low: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; - --bs-color-bg-tertiary: #353228; + --bs-color-bg-tertiary: #23211a; --bs-color-border-brand-primary: #ff7900; --bs-color-border-default: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-emphasized: #eee; @@ -289,6 +289,7 @@ $enable-bootstrap-compatibility: null !default; --bs-switch-color-track-selected-interaction: #138126; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #ccc; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero @@ -352,6 +353,7 @@ $enable-bootstrap-compatibility: null !default; --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #444; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero @@ -2902,7 +2904,7 @@ $enable-bootstrap-compatibility: null !default; --bs-color-bg-inverse-low: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; - --bs-color-bg-tertiary: #353228; + --bs-color-bg-tertiary: #23211a; --bs-color-border-brand-primary: #ff7900; --bs-color-border-default: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-emphasized: #eee; @@ -3029,6 +3031,7 @@ $enable-bootstrap-compatibility: null !default; --bs-switch-color-track-selected-interaction: #138126; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #ccc; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero @@ -3092,6 +3095,7 @@ $enable-bootstrap-compatibility: null !default; --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #444; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero @@ -3375,7 +3379,7 @@ $enable-bootstrap-compatibility: null !default; --bs-color-bg-inverse-low: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; - --bs-color-bg-tertiary: #353228; + --bs-color-bg-tertiary: #23211a; --bs-color-border-brand-primary: #ff7900; --bs-color-border-default: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-emphasized: #eee; @@ -3502,6 +3506,7 @@ $enable-bootstrap-compatibility: null !default; --bs-switch-color-track-selected-interaction: #138126; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #ccc; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero @@ -3565,6 +3570,7 @@ $enable-bootstrap-compatibility: null !default; --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #444; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero @@ -3759,7 +3765,7 @@ $enable-bootstrap-compatibility: null !default; --bs-color-bg-inverse-low: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; - --bs-color-bg-tertiary: #353228; + --bs-color-bg-tertiary: #23211a; --bs-color-border-brand-primary: #ff7900; --bs-color-border-default: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-emphasized: #eee; @@ -3886,6 +3892,7 @@ $enable-bootstrap-compatibility: null !default; --bs-switch-color-track-selected-interaction: #138126; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #ccc; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero @@ -3949,6 +3956,7 @@ $enable-bootstrap-compatibility: null !default; --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #444; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index d722fa63d4..451968e82a 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -959,7 +959,7 @@ $utilities: (); --bs-color-bg-inverse-low: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; - --bs-color-bg-tertiary: #353228; + --bs-color-bg-tertiary: #23211a; --bs-color-border-brand-primary: #ff7900; --bs-color-border-default: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-emphasized: #eee; @@ -1086,6 +1086,7 @@ $utilities: (); --bs-switch-color-track-selected-interaction: #138126; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #ccc; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero @@ -1149,6 +1150,7 @@ $utilities: (); --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #444; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero @@ -12158,7 +12160,7 @@ $utilities: (); --bs-color-bg-inverse-low: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; - --bs-color-bg-tertiary: #353228; + --bs-color-bg-tertiary: #23211a; --bs-color-border-brand-primary: #ff7900; --bs-color-border-default: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-emphasized: #eee; @@ -12285,6 +12287,7 @@ $utilities: (); --bs-switch-color-track-selected-interaction: #138126; --bs-switch-color-track-unselected: rgba(0, 0, 0, 0.44); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #ccc; --bs-link-mono-color-content-enabled: #000; --bs-link-mono-color-content-hover: #000; --bs-link-mono-color-content-pressed: rgba(0, 0, 0, 0.52); // stylelint-disable-line @stylistic/number-leading-zero @@ -12348,6 +12351,7 @@ $utilities: (); --bs-switch-color-track-selected-interaction: #94f0a4; --bs-switch-color-track-unselected: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero --bs-switch-color-track-unselected-interaction: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero + --bs-progress-indicator-color-bg: #444; --bs-link-mono-color-content-enabled: #fff; --bs-link-mono-color-content-hover: #fff; --bs-link-mono-color-content-pressed: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero From 18a5f837023e19ad47c03b33be893a2f9b4345f0 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 24 Jun 2026 10:59:30 +0200 Subject: [PATCH 03/10] feat(lib): Add List item component --- packages/orange-compact/scss/ouds-web.scss | 1 + .../scss/tokens/_composite.scss | 5 + packages/orange/scss/ouds-web.scss | 1 + packages/orange/scss/tokens/_component.scss | 60 +- packages/orange/scss/tokens/_composite.scss | 5 + packages/sosh/scss/ouds-web.scss | 1 + packages/sosh/scss/tokens/_composite.scss | 5 + scss/_list-item.scss | 340 +++++++++++ scss/_skeleton.scss | 2 +- site/data/sidebar-components.yml | 1 + .../src/content/docs/components/list-item.mdx | 552 ++++++++++++++++++ 11 files changed, 942 insertions(+), 31 deletions(-) create mode 100644 scss/_list-item.scss create mode 100644 site/src/content/docs/components/list-item.mdx diff --git a/packages/orange-compact/scss/ouds-web.scss b/packages/orange-compact/scss/ouds-web.scss index ac4b885dff..9b41a0a30f 100644 --- a/packages/orange-compact/scss/ouds-web.scss +++ b/packages/orange-compact/scss/ouds-web.scss @@ -39,6 +39,7 @@ @import "@ouds/web-common/scss/alert"; @import "@ouds/web-common/scss/progress"; @import "@ouds/web-common/scss/list-group"; +@import "@ouds/web-common/scss/list-item"; // OUDS mod: no @import "@ouds/web-common/scss/close"; @import "@ouds/web-common/scss/toasts"; @import "@ouds/web-common/scss/modal"; diff --git a/packages/orange-compact/scss/tokens/_composite.scss b/packages/orange-compact/scss/tokens/_composite.scss index 2ea3435a3d..15e6695a0b 100644 --- a/packages/orange-compact/scss/tokens/_composite.scss +++ b/packages/orange-compact/scss/tokens/_composite.scss @@ -130,6 +130,11 @@ $badge-icon-warning-internal: url("data:image/svg+xml,") !default; +// Navigation list item +$list-item-external-icon: url("data:image/svg+xml,") !default; +$list-item-next-icon: url("data:image/svg+xml,") !default; +$list-item-previous-icon: url("data:image/svg+xml,") !default; + //// SVG used several times $svg-as-custom-props: ( "chevron": $chevron-icon, diff --git a/packages/orange/scss/ouds-web.scss b/packages/orange/scss/ouds-web.scss index 92cbe10b3e..a1552aa0f0 100644 --- a/packages/orange/scss/ouds-web.scss +++ b/packages/orange/scss/ouds-web.scss @@ -39,6 +39,7 @@ @import "@ouds/web-common/scss/alert"; @import "@ouds/web-common/scss/progress"; @import "@ouds/web-common/scss/list-group"; +@import "@ouds/web-common/scss/list-item"; // OUDS mod: no @import "@ouds/web-common/scss/close"; @import "@ouds/web-common/scss/toasts"; @import "@ouds/web-common/scss/modal"; diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 9642f10b59..37961e5321 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -235,58 +235,58 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default; // Control // scss-docs-start ouds-component-control -$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-current-indicator: $ouds-border-radius-none !default; +$ouds-control-item-border-radius-default: $ouds-border-radius-default !default; // TODO: Control-item $ouds-control-item-border-radius-item-only: $ouds-border-radius-default !default; // Deprecated $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-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-bg-focus: var(--#{$prefix}control-item-color-bg-focus) !default; -$ouds-control-item-color-bg-hover: var(--#{$prefix}control-item-color-bg-hover) !default; -$ouds-control-item-color-bg-loading: var(--#{$prefix}control-item-color-bg-loading) !default; -$ouds-control-item-color-bg-pressed: var(--#{$prefix}control-item-color-bg-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-color-content-loader: var(--#{$prefix}control-item-color-content-loader) !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-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-bg-focus: var(--#{$prefix}control-item-color-bg-focus) !default; // TODO: Control-item +$ouds-control-item-color-bg-hover: var(--#{$prefix}control-item-color-bg-hover) !default; // TODO: Control-item +$ouds-control-item-color-bg-loading: var(--#{$prefix}control-item-color-bg-loading) !default; // TODO: Control-item +$ouds-control-item-color-bg-pressed: var(--#{$prefix}control-item-color-bg-pressed) !default; // TODO: Control-item +// $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-color-content-loader: var(--#{$prefix}control-item-color-content-loader) !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-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-error-icon: $ouds-size-icon-with-label-large-size-small !default; // Deprecated -$ouds-control-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; +// $ouds-control-item-size-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default; $ouds-control-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default; // Deprecated $ouds-control-item-size-loader: $ouds-size-icon-with-label-large-size-small !default; // Deprecated $ouds-control-item-size-max-height-assets-container: $core-ouds-dimension-1200 !default; // Deprecated $ouds-control-item-size-max-width: $core-ouds-dimension-4000 !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-size-min-width: $core-ouds-dimension-2000 !default; // TODO: Control-item $ouds-control-item-space-column-gap: $ouds-space-column-gap-medium !default; $ouds-control-item-space-padding-block-bottom-slot: $ouds-space-padding-block-3xsmall !default; $ouds-control-item-space-padding-block-default: $ouds-space-padding-block-medium !default; // Deprecated -$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-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-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; diff --git a/packages/orange/scss/tokens/_composite.scss b/packages/orange/scss/tokens/_composite.scss index 2ea3435a3d..15e6695a0b 100644 --- a/packages/orange/scss/tokens/_composite.scss +++ b/packages/orange/scss/tokens/_composite.scss @@ -130,6 +130,11 @@ $badge-icon-warning-internal: url("data:image/svg+xml,") !default; +// Navigation list item +$list-item-external-icon: url("data:image/svg+xml,") !default; +$list-item-next-icon: url("data:image/svg+xml,") !default; +$list-item-previous-icon: url("data:image/svg+xml,") !default; + //// SVG used several times $svg-as-custom-props: ( "chevron": $chevron-icon, diff --git a/packages/sosh/scss/ouds-web.scss b/packages/sosh/scss/ouds-web.scss index c59f318311..235875a421 100644 --- a/packages/sosh/scss/ouds-web.scss +++ b/packages/sosh/scss/ouds-web.scss @@ -39,6 +39,7 @@ @import "@ouds/web-common/scss/alert"; @import "@ouds/web-common/scss/progress"; @import "@ouds/web-common/scss/list-group"; +@import "@ouds/web-common/scss/list-item"; // OUDS mod: no @import "@ouds/web-common/scss/close"; @import "@ouds/web-common/scss/toasts"; @import "@ouds/web-common/scss/modal"; diff --git a/packages/sosh/scss/tokens/_composite.scss b/packages/sosh/scss/tokens/_composite.scss index ea7f92ef87..16d20e1b40 100644 --- a/packages/sosh/scss/tokens/_composite.scss +++ b/packages/sosh/scss/tokens/_composite.scss @@ -121,6 +121,11 @@ $badge-icon-warning-internal: url("data:image/svg+xml,") !default; +// Navigation list item +$list-item-external-icon: url("data:image/svg+xml,") !default; +$list-item-next-icon: url("data:image/svg+xml,") !default; +$list-item-previous-icon: url("data:image/svg+xml,") !default; + //// SVG used several times $svg-as-custom-props: ( "chevron": $chevron-icon, diff --git a/scss/_list-item.scss b/scss/_list-item.scss new file mode 100644 index 0000000000..b3f439f244 --- /dev/null +++ b/scss/_list-item.scss @@ -0,0 +1,340 @@ +// +// Base styles +// + +.item { + display: block; + background-color: var(--#{$prefix}list-item-outlined-bg, var(--#{$prefix}list-item-bg, $ouds-color-action-support-enabled)); + border: var(--#{$prefix}list-item-border-width, 0) solid var(--#{$prefix}list-item-border-color, $ouds-color-border-default); + border-bottom-width: var(--#{$prefix}list-item-border-width, $ouds-control-item-border-width-default); + + &.item-interactive:focus-visible, + &:has(.item-interactive:focus-visible) { + @include focus-visible(); + } +} + +.item-main { + display: flex; + column-gap: $ouds-control-item-space-column-gap; + align-items: var(--#{$prefix}list-item-align-items, center); + min-height: var(--#{$prefix}list-item-min-height, $ouds-control-item-size-min-height-default); + padding: calc(var(--#{$prefix}list-item-padding-top, $ouds-control-item-space-padding-block-density-default) - var(--#{$prefix}list-item-border-width, 0px)) calc($ouds-control-item-space-padding-inline - var(--#{$prefix}list-item-border-width, 0px)) calc(var(--#{$prefix}list-item-padding-bottom, $ouds-control-item-space-padding-block-density-default) - var(--#{$prefix}list-item-border-width, $ouds-control-item-border-width-default)); +} + +.item-list, +.item-wrapper, +.item { + &.component-max-width { + max-width: px-to-rem($ouds-control-item-size-max-width); + } +} + +// Building blocks +.item > .item-slot { + width: calc(100% - $ouds-control-item-space-padding-inline * 2); + min-height: $ouds-control-item-size-asset-medium; + margin: 0 $ouds-control-item-space-padding-inline 16px; // TODO: Add token when available +} + +.item-text-container .item-slot { + width: 100%; + margin-top: 4px; // TODO: Add token when available + margin-bottom: 4px; // TODO: Add token when available + + &:last-child:not(:only-child) { + margin-top: $ouds-control-item-space-padding-block-default; + margin-bottom: $ouds-control-item-space-padding-block-bottom-slot; + } +} + +.item-leading-container, +.item-trailing-container { + &.item-slot { + max-width: 96px; // TODO: Add token when available + height: unset; + max-height: 96px; // TODO: Add token when available + aspect-ratio: unset; + padding: 5px; + margin: -5px; // Workaround to handle focus outline correctly + } +} + +.item-slot-clickable { + position: relative; + z-index: 2; +} + +.item-leading-container { + flex-shrink: 0; + height: var(--#{$prefix}list-item-leading-container-size, $ouds-control-item-size-asset-medium); + aspect-ratio: 1; + overflow: hidden; + color: $ouds-color-content-default; + @include border-radius(var(--#{$prefix}list-item-leading-container-border-radius, $ouds-control-item-border-radius-media), var(--#{$prefix}list-item-leading-container-border-radius, $ouds-control-item-border-radius-media)); +} + +.item-text-container { + flex-grow: 1; + row-gap: var(--#{$prefix}list-item-container-row-gap, $ouds-control-item-space-row-gap); + align-items: var(--#{$prefix}list-item-align-items, center); +} + +.item-trailing-container { + flex-shrink: 0; + row-gap: var(--#{$prefix}list-item-container-row-gap, $ouds-control-item-space-row-gap); + align-items: var(--#{$prefix}list-item-align-items, center); + min-height: $ouds-control-item-size-asset-medium; + white-space: nowrap; +} + +.item-overline { + display: block; + margin-bottom: 0; + @include get-font-size("label-small"); + font-weight: $ouds-font-weight-web-label-moderate; + color: $ouds-color-content-muted; +} + +.item-label { + display: block; + margin-bottom: 0; + @include get-font-size("label-large"); + font-weight: $ouds-font-weight-web-label-default; + color: $ouds-color-content-default; +} + +.item-extra-label { + display: block; + margin-bottom: 0; + @include get-font-size("label-medium"); + font-weight: $ouds-font-weight-web-label-strong; + color: $ouds-color-content-default; +} + +.item-description { + display: block; + margin-bottom: 0; + @include get-font-size("label-medium"); + font-weight: $ouds-font-weight-web-label-default; + color: $ouds-color-content-muted; +} + +.item-helper { + display: block; + padding: $ouds-control-item-space-padding-block-top-helper-text $ouds-control-item-space-padding-inline 0; + margin-bottom: 0; + font-weight: $ouds-font-weight-web-label-default; + color: $ouds-color-content-muted; + @include get-font-size("label-medium"); +} + +.item-interactive { + text-decoration: none; + + &::before { + position: absolute; + inset: 0; + z-index: 1; + content: ""; + } + + &, + &:hover, + &:focus-visible, + &:active { + color: $ouds-color-content-default; + outline: 0; + box-shadow: none; + } +} + +.item-icon { + position: relative; + width: 100%; + height: 100%; + + &::before { + position: absolute; + inset: 0; + content: ""; + background-color: var(--#{$prefix}list-item-icon-color); + mask: var(--#{$prefix}list-item-icon) center / contain no-repeat; + } + + &::after { + position: absolute; + inset: 0; + content: ""; + background-color: var(--#{$prefix}list-item-icon-color-internal); + mask: var(--#{$prefix}list-item-icon-internal) center / contain no-repeat; + } +} + +// Variants +.item-list { + --#{$prefix}list-item-border-radius: 0px; + --#{$prefix}list-item-bg: transparent; + + @include list-unstyled(); + padding: 5px; // Workaround to handle focus outline correctly + margin: -5px; +} + +.use-rounded-corner-item { + --#{$prefix}list-item-border-radius: #{$ouds-control-item-border-radius-rounded}; +} + +.item-bg { + --#{$prefix}list-item-bg: #{$ouds-color-action-support-enabled}; +} + +.item-no-bg { + --#{$prefix}list-item-bg: transparent; +} + +.item-no-divider { + --#{$prefix}list-item-border-width: 0px; +} + +.item-outlined { + --#{$prefix}list-item-outlined-bg: transparent; + --#{$prefix}list-item-border-width: #{$ouds-control-item-border-width-default}; + --#{$prefix}list-item-border-width: var(--#{$prefix}list-item-arrow-color); +} + +.item-top { + --#{$prefix}list-item-align-items: flex-start; + --#{$prefix}list-item-padding-top: var(--#{$prefix}list-item-counterweight-padding-top, #{$ouds-control-item-space-padding-block-density-default-top-alignment-top-counterweight}); + + .item-text-container { // TODO: CSS variable here or keep it like that ? + margin-top: var(--#{$prefix}list-item-text-container-margin-top, $ouds-control-item-space-padding-block-density-default-top-alignment-top-text-container); + } +} + +.item-leading-large { + --#{$prefix}list-item-leading-container-size: #{$ouds-control-item-size-asset-large}; +} + +.item-leading-xlarge { + --#{$prefix}list-item-leading-container-size: #{$ouds-control-item-size-asset-xlarge}; +} + +.item-leading-rounded { + --#{$prefix}list-item-leading-container-border-radius: #{$ouds-control-item-border-radius-media-rounded-corner}; +} + +.item-trailing-large { + --#{$prefix}list-item-trailing-container-size: #{$ouds-control-item-size-asset-large}; +} + +.item-trailing-xlarge { + --#{$prefix}list-item-trailing-container-size: #{$ouds-control-item-size-asset-xlarge}; +} + +.item-trailing-rounded { + --#{$prefix}list-item-trailing-container-border-radius: #{$ouds-control-item-border-radius-media-rounded-corner}; +} + +.item-status-positive { + --#{$prefix}list-item-icon: #{$alert-icon-success}; + --#{$prefix}list-item-icon-color: #{$ouds-color-content-status-positive}; +} + +.item-status-info { + --#{$prefix}list-item-icon: #{$alert-icon-info}; + --#{$prefix}list-item-icon-color: #{$ouds-color-content-status-info}; +} + +.item-status-warning { + --#{$prefix}list-item-icon: #{$alert-icon-warning-external}; + --#{$prefix}list-item-icon-color: var(--#{$prefix}icon-color-content-status-warning-external-shape); + --#{$prefix}list-item-icon-internal: #{$alert-icon-warning-internal}; + --#{$prefix}list-item-icon-color-internal: var(--#{$prefix}icon-color-content-status-warning-internal-shape); +} + +.item-status-negative { + --#{$prefix}list-item-icon: #{$alert-icon-important}; + --#{$prefix}list-item-icon-color: #{$ouds-color-content-status-negative}; +} + +.item-small { + --#{$prefix}list-item-min-height: #{$ouds-control-item-size-min-height-compact}; + --#{$prefix}list-item-padding-top: #{$ouds-control-item-space-padding-block-density-compact}; + --#{$prefix}list-item-counterweight-padding-top: #{$ouds-control-item-space-padding-block-density-compact-top-alignment-top-counterweight}; + --#{$prefix}list-item-padding-bottom: #{$ouds-control-item-space-padding-block-density-compact}; + --#{$prefix}list-item-container-row-gap: 0; + --#{$prefix}list-item-text-container-margin-top: #{$ouds-control-item-space-padding-block-density-compact-top-alignment-top-text-container}; + --#{$prefix}list-item-leading-container-size: #{$ouds-control-item-size-asset-small}; +} + + +// +// Navigation specific styles +// + +.item-navigation { + position: relative; + + .item-main::after { + display: flex; + width: $ouds-control-item-size-asset-small; + min-height: $ouds-control-item-size-asset-medium; + content: ""; + background-color: var(--#{$prefix}list-item-chevron-color, $ouds-link-color-chevron-enabled); + mask-image: $list-item-next-icon; + mask-position: center; + } + + &.item-external-link, + &:has(.item-external-link) { + .item-main::after { + mask-image: $list-item-external-icon; + } + } + + &.item-previous, + &:has(.item-previous) { + .item-main::after { + order: -1; + mask-image: $list-item-previous-icon; + } + } + + &.item-interactive:hover, + &:has(.item-interactive:hover) { + --#{$prefix}list-item-chevron-color: #{$ouds-color-action-hover}; + --#{$prefix}list-item-bg: #{$ouds-color-action-support-hover}; + + &.item-outlined { + --#{$prefix}list-item-border-color: #{$ouds-color-action-hover}; + } + } + + &.item-interactive:focus-visible, + &:has(.item-interactive:focus-visible) { + --#{$prefix}list-item-chevron-color: #{$ouds-color-action-focus}; + --#{$prefix}list-item-bg: #{$ouds-color-action-support-focus}; + + &.item-outlined { + --#{$prefix}list-item-border-color: #{$ouds-color-action-focus}; + } + } + + &.item-interactive:active, + &:has(.item-interactive:active) { + --#{$prefix}list-item-chevron-color: #{$ouds-color-action-pressed}; + --#{$prefix}list-item-bg: #{$ouds-color-action-support-pressed}; + + &.item-outlined { + --#{$prefix}list-item-border-color: #{$ouds-color-action-pressed}; + } + } +} + +// TODO +@if $enable-bootstrap-compatibility { + .list-group { + display: block; + } +} diff --git a/scss/_skeleton.scss b/scss/_skeleton.scss index 473fab7a34..552c9af824 100644 --- a/scss/_skeleton.scss +++ b/scss/_skeleton.scss @@ -57,7 +57,7 @@ } // List of components with security margins - :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item) { + :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .list-item) { @extend %skeleton-placeholder; } } diff --git a/site/data/sidebar-components.yml b/site/data/sidebar-components.yml index 21e1f36773..b9197840bb 100644 --- a/site/data/sidebar-components.yml +++ b/site/data/sidebar-components.yml @@ -16,6 +16,7 @@ draft: true - title: Icon - title: Links + - title: List item - title: Password input - title: Radio button - title: Select input diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx new file mode 100644 index 0000000000..33c183c5a3 --- /dev/null +++ b/site/src/content/docs/components/list-item.mdx @@ -0,0 +1,552 @@ +--- +title: List item +description: List items are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. +aliases: + - "/docs/components/item/" +toc: true +--- + +import { getVersionedDocsPath } from '@libs/path' + + +
+
+
+ +
+
+

Overline

+

Label

+

Extra label

+

Description

+ +
+
+
+

Helper text

+ +
+
+
+ +
+

Overline

+ Label +

Extra label

+

Description

+
+
+ +
+
+
+ +
+ +
+

Overline

+

Label

+

Extra label

+

Description

+
+
+ +

Helper text

+
+
    +
  • +
    +
    + +
    +

    Overline

    +

    Label

    +

    Extra label

    +

    Description

    + +
    +
    +

    Label

    +

    Extra label

    +
    +
    +
    +
    • +
  • +
    +
    + +
    +

    Overline

    +

    Label

    +

    Extra label

    +

    Description

    +
    +
    +
    +
    • +
+ + `} /> + +## Overview + +### Component types + +
    +
  • +
    +
    +
    +
    +
    +
    +
    +

    Label

    +
    +
    +
    +
    +
    +
    +
    Static item is a UI element that displays a unit of information.
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    + Label +
    +
    +
    +
    +
    +
    +
    Navigation item is a UI element that displays a unit of information and allows users to navigate between different pages or sections within a multi-page interface.
    +
    +
    • +
+ +For the two types of items, OUDS Web has a common base `.item`, and `.item-main` classes that set up default styles such as padding and content alignment. The `.item` class is intended to be used in conjunction with our item variants, or to serve as a basis for your own custom styles. The most basic item is the `.item-navigation` variant. + + +
+
+
+

Label

+
+
+
+ `} /> + + +
+
+
+ Label +
+
+
+ `} /> + +### Approach + +#### Card item + +#### List item + +### Accessibility + +## Static item + +### Standard display + + +
+
+
+
+

Label

+
+
+
+
+ + +
    +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
`} /> + +### Variants + +#### With asset + +##### Text + +There are four text elements that are meant to be used in the `.item-text-container`. + +They always appear in the following order: +1. [Overline](#overline) using `.item-overline` (optional) +2. [Label](#label) using `.item-label`, that can optionally be bold (using `.fw-bold`) (required) +3. [Extra label](#extra-label) using `.item-extra-label` (optional) +4. [Description](#description) using `.item-description` (optional) + + +
+
+
+

Overline

+

Label

+

Extra label

+

Description

+
+
+
+ + +
+
+
+
+

Overline

+

Label

+

Extra label

+

Description

+
+
+
+
`} /> + +##### Leading container + +The leading container using `.item-leading-container`. + +Here is a table of the different assets that we support in the leading container, along with their corresponding classes and notes. + + + Please note that none of the sizes above should be used in a [small list item](#sizes). + + + +| Asset | Sizes | Ratio | Rounded corners | Extra classes | Notes | +| --- | ----- | ----- | --------------- | ------------- | ----- | +| **Icon** | `.item-leading-large` | | | you may use `.item-status-positive`, `.item-status-warning`, `.item-status-info` or `.item-status-negative` for color and icon in addition of `.item-icon` | {/*(using our [badge]([[docsref:/components/badge]]))*/} | +| **Image** | `.item-leading-large`, `.item-leading-xlarge` | [ratio utilities]([[docsref:/utility/aspect-ratio]]) | `.item-leading-rounded` | | All these classes can be combined as needed and placed on a parent element. | +| **Video** | `.item-leading-large`
`.item-leading-xlarge` | [ratio utilities]([[docsref:/utility/aspect-ratio]]) | `.item-leading-rounded` | | All these classes can be combined as needed and placed on a parent element. | +| **Slot** | | | `.item-leading-rounded` | | `.item-slot` must be combined with `.item-leading-container`. Limited in size to `96px x 96px`. {/* TODO: replace value by token once added */} | +{/* **Avatar** */} +{/* **Flag** */} + + + +
+
+
+
+ +
+
+

Label

+
+
+
+
+ +
+
+
+
+
+
+
+

Label

+
+
+
+
+ + +
+
+
+
+ +
+
+

Label

+
+
+
+
+ + +
+
+
+
+ +
+
+

Label

+
+
+
+
+ + +
+
+
+
+

Tag

+
+
+

Label

+
+
+
+
`} /> + +##### Slot + + + +##### Trailing assets + + + +#### Alignment + + + +#### Helper text + + + +#### With background + + + +#### Outlined + + + +#### Rounded corners + + + +### States + +#### Disabled + + + +#### Skeleton + + + +### Sizes + + + +### Layout + + + +#### Max width + + + +## Navigation item + +### Key concepts + + + +### Base class + + + +### Standard display + + + +### Variants + +#### Back chevron + + + +#### External link + + + +#### Alignment + + + +#### With asset + +##### Leading assets + + + +##### Text + + + +##### Slot + + + +##### Trailing assets + + + +#### Helper text + + + +#### With background + + + +#### Outlined + + + +#### Rounded corners + + + +### States + +#### Disabled + + + +#### Skeleton + + + +### Sizes + + + +### Layout + +#### List + + + +#### Standalone (card) + + From 92e5b02ff562022b94ec02c116cc4cebbe6ed9b8 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Thu, 25 Jun 2026 09:02:38 +0200 Subject: [PATCH 04/10] . --- scss/_list-item.scss | 10 +- .../src/content/docs/components/list-item.mdx | 266 +++++++++++++++--- 2 files changed, 238 insertions(+), 38 deletions(-) diff --git a/scss/_list-item.scss b/scss/_list-item.scss index b3f439f244..c3f7cee278 100644 --- a/scss/_list-item.scss +++ b/scss/_list-item.scss @@ -84,8 +84,14 @@ flex-shrink: 0; row-gap: var(--#{$prefix}list-item-container-row-gap, $ouds-control-item-space-row-gap); align-items: var(--#{$prefix}list-item-align-items, center); - min-height: $ouds-control-item-size-asset-medium; + overflow: hidden; white-space: nowrap; + @include border-radius(var(--#{$prefix}list-item-trailing-container-border-radius, $ouds-control-item-border-radius-media), var(--#{$prefix}list-item-trailing-container-border-radius, $ouds-control-item-border-radius-media)); + + &:has(svg, img, .icon, .item-icon, video) { + height: var(--#{$prefix}list-item-trailing-container-size, $ouds-control-item-size-asset-medium); + aspect-ratio: 1; + } } .item-overline { @@ -237,7 +243,7 @@ } .item-status-positive { - --#{$prefix}list-item-icon: #{$alert-icon-success}; + --#{$prefix}list-item-icon: #{$alert-icon-success}; // TODO: Decide if we make a common css variable with alert --#{$prefix}list-item-icon-color: #{$ouds-color-content-status-positive}; } diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index 33c183c5a3..56fa206d80 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -284,16 +284,116 @@ For the two types of items, OUDS Web has a common base `.item`, and `.item-main` #### With asset -##### Text +The main container of a static item can contain up to 3 elements. They always appear in the following order: +1. [Leading container](#leading-container) using `.item-leading-container` (optional) +2. [Text container](#text) using `.item-text-container` (required) +3. [Trailing container](#trailing-container) using `.item-trailing-container` (optional) + +##### Leading container + +The leading container using `.item-leading-container`. + +Here is a table of the different assets that we support in the leading container, along with their corresponding classes and notes. + + + Please note that the sizes below shouldn't be used in a [small list item](#sizes). The slot shouldn't be used as well in this size. + + + +| Asset | Sizes | Ratio | Rounded corners | Notes | +| ----- | ----- | ----- | --------------- | ----- | +| **Icon** | `.item-leading-large` | | | you may use `.item-status-positive`, `.item-status-warning`, `.item-status-info` or `.item-status-negative` for color and icon in addition of `.item-icon` | +| **Image** | `.item-leading-large`, `.item-leading-xlarge` | [ratio utilities]([[docsref:/utilities/aspect-ratio]]) | `.item-leading-rounded` | All these classes can be combined as needed and placed on a parent element. | +| **Video** | `.item-leading-large`
`.item-leading-xlarge` | [ratio utilities]([[docsref:/utilities/aspect-ratio]]) | `.item-leading-rounded` | All these classes can be combined as needed and placed on a parent element. | +| **Slot** | | | `.item-leading-rounded` | `.item-slot` must be combined with `.item-leading-container`. Limited in size to `96px x 96px`. {/* TODO: replace value by token once added */} | +{/* **Avatar** */} +{/* **Flag** */} + + + +
+
+
+
+ +
+
+

Label

+
+
+
+
-There are four text elements that are meant to be used in the `.item-text-container`. +
+
+
+
+
+
+
+

Label

+
+
+
+
-They always appear in the following order: + +
+
+
+
+ +
+
+

Label

+
+
+
+
+ + +
+
+
+
+ +
+
+

Label

+
+
+
+
+ + +
+
+
+
+

Slot

+
+
+

Label

+
+
+
+
`} /> + +##### Text + +There are four text elements that are meant to be used in the `.item-text-container`. They always appear in the following order: 1. [Overline](#overline) using `.item-overline` (optional) 2. [Label](#label) using `.item-label`, that can optionally be bold (using `.fw-bold`) (required) 3. [Extra label](#extra-label) using `.item-extra-label` (optional) 4. [Description](#description) using `.item-description` (optional) +Optionally, a slot can be added at the end of the text container using `.item-slot` and/or in place of the label if it replaces it. +
@@ -307,6 +407,7 @@ They always appear in the following order:
+
@@ -318,54 +419,129 @@ They always appear in the following order:
+ + + +
+
+
+
+

Overline

+

Label

+

Extra label

+

Description

+
+
+
+
+ + +
+
+
+
+

Overline

+

Label

+

Extra label

+

Description

+

Slot

+
+
+
`} /> -##### Leading container +##### Trailing container -The leading container using `.item-leading-container`. +The trailing container using `.item-trailing-container`. -Here is a table of the different assets that we support in the leading container, along with their corresponding classes and notes. +Here is a table of the different assets that we support in the trailing container, along with their corresponding classes and notes. - Please note that none of the sizes above should be used in a [small list item](#sizes). + Please note that the sizes below shouldn't be used in a [small list item](#sizes). The slot shouldn't be used as well in this size. -| Asset | Sizes | Ratio | Rounded corners | Extra classes | Notes | -| --- | ----- | ----- | --------------- | ------------- | ----- | -| **Icon** | `.item-leading-large` | | | you may use `.item-status-positive`, `.item-status-warning`, `.item-status-info` or `.item-status-negative` for color and icon in addition of `.item-icon` | {/*(using our [badge]([[docsref:/components/badge]]))*/} | -| **Image** | `.item-leading-large`, `.item-leading-xlarge` | [ratio utilities]([[docsref:/utility/aspect-ratio]]) | `.item-leading-rounded` | | All these classes can be combined as needed and placed on a parent element. | -| **Video** | `.item-leading-large`
`.item-leading-xlarge` | [ratio utilities]([[docsref:/utility/aspect-ratio]]) | `.item-leading-rounded` | | All these classes can be combined as needed and placed on a parent element. | -| **Slot** | | | `.item-leading-rounded` | | `.item-slot` must be combined with `.item-leading-container`. Limited in size to `96px x 96px`. {/* TODO: replace value by token once added */} | +| Asset | Sizes | Ratio | Rounded corners | Notes | +| ----- | ----- | ----- | --------------- | ----- | +| **Text** | | | | you may use `.item-label` with either `.fw-bold`, `.text-muted`, or [`.item-extra-label` (only if not item small)](#text) | +| **Badge** | | | | only variants of [Badge]([[docsref:/components/badge#badge]]) and [Badge - count]([[docsref:/components/badge#badge---count]]) are allowed | +| **Tag** | | | | all the variants of [Tag]([[docsref:/components/tag#tag]]) are allowed | +| **Icon** | `.item-trailing-large` | | | you may use `.item-status-positive`, `.item-status-warning`, `.item-status-info` or `.item-status-negative` for color and icon in addition of `.item-icon` | | +| **Image** | `.item-trailing-large`, `.item-trailing-xlarge` | [ratio utilities]([[docsref:/utilities/aspect-ratio]]) | `.item-trailing-rounded` | All these classes can be combined as needed and placed on a parent element. | +| **Video** | `.item-trailing-large`
`.item-trailing-xlarge` | [ratio utilities]([[docsref:/utilities/aspect-ratio]]) | `.item-trailing-rounded` | All these classes can be combined as needed and placed on a parent element. | +| **Slot** | | | `.item-trailing-rounded` | `.item-slot` must be combined with `.item-trailing-container`. Limited in size to `96px x 96px`. {/* TODO: replace value by token once added */} | {/* **Avatar** */} {/* **Flag** */} - +
-
+
+

Label

+
+
+

Label

+

Extra label

+
+
+
+
+ + +
+
+
+
+

Label

+
+
+
+
+
+ +
+
+

Label

+
+
+
+
-
-
+
+

Label

+
+
+

12

+
+
+
+ + +
+
+

Label

+
+

Tag

+
@@ -374,12 +550,12 @@ Here is a table of the different assets that we support in the leading container
-
- -

Label

+
+ +
@@ -388,15 +564,15 @@ Here is a table of the different assets that we support in the leading container
-
+
+

Label

+
+
-
-

Label

-
@@ -405,23 +581,45 @@ Here is a table of the different assets that we support in the leading container
-
-

Tag

-

Label

+
+ +
`} /> ##### Slot - +This component contains many slots that can be used to add custom content. The main slots are located in the leading container, the text container, and the trailing container. The slots are intended to be used for custom content that is not covered by the other elements of the component. We can add another slot outside of the main container as well. -##### Trailing assets +Here is a small resume of the slots that can be used in a static item: +* [Leading container](#leading-container) using `.item-slot` (optional) +* [Text container](#text) using `.item-slot` (optional) +* [Trailing container](#trailing-container) using `.item-slot` (optional) +* A slot outside of the main container using `.item-slot` (optional) - + +
+
+
+

Label

+
+
+
+
+
+
+
+

Alert message

+
+
+
+
+
+
`} /> #### Alignment @@ -543,10 +741,6 @@ Here is a table of the different assets that we support in the leading container ### Layout -#### List - - - -#### Standalone (card) +#### Max width - +#### Using `` around From 6f13894128f0c90f1c6bf9e40ddbe3841a5a7500 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 26 Jun 2026 08:35:28 +0200 Subject: [PATCH 05/10] . --- packages/orange/scss/tokens/_component.scss | 12 +- scss/_list-item.scss | 15 +- .../src/content/docs/components/list-item.mdx | 128 +++++++++++++++++- 3 files changed, 139 insertions(+), 16 deletions(-) diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 37961e5321..5c08a60849 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -236,7 +236,7 @@ $ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default; // scss-docs-start ouds-component-control // $ouds-control-item-border-radius-current-indicator: $ouds-border-radius-none !default; -$ouds-control-item-border-radius-default: $ouds-border-radius-default !default; // TODO: Control-item +$ouds-control-item-border-radius-default: $ouds-border-radius-default !default; $ouds-control-item-border-radius-item-only: $ouds-border-radius-default !default; // Deprecated $ouds-control-item-border-radius-media-rounded-corner: $ouds-border-radius-small !default; $ouds-control-item-border-radius-media: $ouds-border-radius-default !default; @@ -249,10 +249,10 @@ $ouds-control-item-border-width-default: $ouds-border-width-default !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-bg-focus: var(--#{$prefix}control-item-color-bg-focus) !default; // TODO: Control-item -$ouds-control-item-color-bg-hover: var(--#{$prefix}control-item-color-bg-hover) !default; // TODO: Control-item -$ouds-control-item-color-bg-loading: var(--#{$prefix}control-item-color-bg-loading) !default; // TODO: Control-item -$ouds-control-item-color-bg-pressed: var(--#{$prefix}control-item-color-bg-pressed) !default; // TODO: Control-item +$ouds-control-item-color-bg-focus: var(--#{$prefix}control-item-color-bg-focus) !default; +$ouds-control-item-color-bg-hover: var(--#{$prefix}control-item-color-bg-hover) !default; +$ouds-control-item-color-bg-loading: var(--#{$prefix}control-item-color-bg-loading) !default; +$ouds-control-item-color-bg-pressed: var(--#{$prefix}control-item-color-bg-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; @@ -278,7 +278,7 @@ $ouds-control-item-size-max-height-assets-container: $core-ouds-dimension-1200 ! $ouds-control-item-size-max-width: $core-ouds-dimension-4000 !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; // TODO: Control-item +$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-bottom-slot: $ouds-space-padding-block-3xsmall !default; $ouds-control-item-space-padding-block-default: $ouds-space-padding-block-medium !default; // Deprecated diff --git a/scss/_list-item.scss b/scss/_list-item.scss index c3f7cee278..73805988a1 100644 --- a/scss/_list-item.scss +++ b/scss/_list-item.scss @@ -75,15 +75,21 @@ } .item-text-container { + display: flex; flex-grow: 1; + flex-direction: column; row-gap: var(--#{$prefix}list-item-container-row-gap, $ouds-control-item-space-row-gap); - align-items: var(--#{$prefix}list-item-align-items, center); + justify-content: center; } .item-trailing-container { + display: flex; flex-shrink: 0; + flex-direction: column; row-gap: var(--#{$prefix}list-item-container-row-gap, $ouds-control-item-space-row-gap); - align-items: var(--#{$prefix}list-item-align-items, center); + align-items: flex-end; + justify-content: center; + min-height: var(--#{$prefix}list-item-trailing-container-size, $ouds-control-item-size-asset-medium); overflow: hidden; white-space: nowrap; @include border-radius(var(--#{$prefix}list-item-trailing-container-border-radius, $ouds-control-item-border-radius-media), var(--#{$prefix}list-item-trailing-container-border-radius, $ouds-control-item-border-radius-media)); @@ -206,14 +212,15 @@ .item-outlined { --#{$prefix}list-item-outlined-bg: transparent; --#{$prefix}list-item-border-width: #{$ouds-control-item-border-width-default}; - --#{$prefix}list-item-border-width: var(--#{$prefix}list-item-arrow-color); + --#{$prefix}list-item-border-color: var(--#{$prefix}list-item-arrow-color); } .item-top { --#{$prefix}list-item-align-items: flex-start; --#{$prefix}list-item-padding-top: var(--#{$prefix}list-item-counterweight-padding-top, #{$ouds-control-item-space-padding-block-density-default-top-alignment-top-counterweight}); - .item-text-container { // TODO: CSS variable here or keep it like that ? + .item-text-container, + .item-trailing-container:has(.item-label) { // TODO: CSS variable here margin-top: var(--#{$prefix}list-item-text-container-margin-top, $ouds-control-item-space-padding-block-density-default-top-alignment-top-text-container); } } diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index 56fa206d80..d17addc8a3 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -360,6 +360,7 @@ Here is a table of the different assets that we support in the leading container
@@ -452,6 +453,21 @@ Optionally, a slot can be added at the end of the text container using `.item-sl ##### Trailing container + + The trailing container using `.item-trailing-container`. Here is a table of the different assets that we support in the trailing container, along with their corresponding classes and notes. @@ -460,6 +476,8 @@ Here is a table of the different assets that we support in the trailing containe Please note that the sizes below shouldn't be used in a [small list item](#sizes). The slot shouldn't be used as well in this size. +{/* TODO: Try to have a filter with only one of them displ */} + | Asset | Sizes | Ratio | Rounded corners | Notes | | ----- | ----- | ----- | --------------- | ----- | @@ -570,6 +588,7 @@ Here is a table of the different assets that we support in the trailing containe
@@ -599,7 +618,7 @@ Here is a small resume of the slots that can be used in a static item: * [Leading container](#leading-container) using `.item-slot` (optional) * [Text container](#text) using `.item-slot` (optional) * [Trailing container](#trailing-container) using `.item-slot` (optional) -* A slot outside of the main container using `.item-slot` (optional) +* A slot outside of the main container, direct child of `.item` using `.item-slot` (optional)
@@ -623,19 +642,116 @@ Here is a small resume of the slots that can be used in a static item: #### Alignment - +By default all static item are vertically centered. You can change the alignment of the content using `.item-top` by setting it on the `.item-main` or any ancestors. + + +
+
+
+ +
+
+

Overline

+

Label

+

Extra label

+

Description

+
+
+

1

+
+
+
+
+
+
+
+

Alert message

+
+
+
+
+
+
`} /> #### Helper text - +Optionally, a helper text can be added below the main `.item` container using `.item-helper`. -#### With background + +
+
+
+

Label

+
+
+
+

Helper text

+
`} /> - +#### Background + +By default, alone items have a background-color, while list items don't. This behavior can be modified by using `.item-no-bg` or `.item-bg` on the element `.item` or any ancestors up to the `.item-list` container if it exists. + + +
+
+
+
+

Label

+
+
+
+
+ + +
    +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
`} /> #### Outlined - +By default every item comes with a divider. The divider may be removed or transformed into an outline using `.item-no-divider` or `.item-outlined` on the element `.item` or any ancestors. + + +
+
+
+
+

Label

+
+
+
+
+ + +
+
+
+
+

Label

+
+
+
+
`} /> #### Rounded corners From dc39d3bd373974102cf8b728d9f3a02d35301cff Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Mon, 29 Jun 2026 10:55:21 +0200 Subject: [PATCH 06/10] . --- scss/_list-item.scss | 13 +- scss/_skeleton.scss | 2 +- .../src/content/docs/components/list-item.mdx | 457 ++++++++++++++++-- site/src/scss/_component-examples.scss | 42 ++ stories/create-stories-from-doc.js | 4 +- 5 files changed, 460 insertions(+), 58 deletions(-) diff --git a/scss/_list-item.scss b/scss/_list-item.scss index 73805988a1..890c78545f 100644 --- a/scss/_list-item.scss +++ b/scss/_list-item.scss @@ -7,6 +7,7 @@ background-color: var(--#{$prefix}list-item-outlined-bg, var(--#{$prefix}list-item-bg, $ouds-color-action-support-enabled)); border: var(--#{$prefix}list-item-border-width, 0) solid var(--#{$prefix}list-item-border-color, $ouds-color-border-default); border-bottom-width: var(--#{$prefix}list-item-border-width, $ouds-control-item-border-width-default); + @include border-radius(var(--#{$prefix}list-item-border-radius, $ouds-control-item-border-radius-default), var(--#{$prefix}list-item-border-radius, $ouds-control-item-border-radius-default)); &.item-interactive:focus-visible, &:has(.item-interactive:focus-visible) { @@ -23,8 +24,7 @@ } .item-list, -.item-wrapper, -.item { +.item-wrapper { &.component-max-width { max-width: px-to-rem($ouds-control-item-size-max-width); } @@ -35,6 +35,7 @@ width: calc(100% - $ouds-control-item-space-padding-inline * 2); min-height: $ouds-control-item-size-asset-medium; margin: 0 $ouds-control-item-space-padding-inline 16px; // TODO: Add token when available + opacity: var(--#{$prefix}list-item-disabled-opacity, 1); } .item-text-container .item-slot { @@ -184,6 +185,10 @@ } // Variants +.use-rounded-corner-items { + --#{$prefix}list-item-border-radius: #{$ouds-control-item-border-radius-rounded}; +} + .item-list { --#{$prefix}list-item-border-radius: 0px; --#{$prefix}list-item-bg: transparent; @@ -193,10 +198,6 @@ margin: -5px; } -.use-rounded-corner-item { - --#{$prefix}list-item-border-radius: #{$ouds-control-item-border-radius-rounded}; -} - .item-bg { --#{$prefix}list-item-bg: #{$ouds-color-action-support-enabled}; } diff --git a/scss/_skeleton.scss b/scss/_skeleton.scss index 552c9af824..c76c56301f 100644 --- a/scss/_skeleton.scss +++ b/scss/_skeleton.scss @@ -57,7 +57,7 @@ } // List of components with security margins - :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .list-item) { + :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper) { @extend %skeleton-placeholder; } } diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index d17addc8a3..0a6f45d39d 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -453,20 +453,225 @@ Optionally, a slot can be added at the end of the text container using `.item-sl ##### Trailing container -
    -
  • - Active +The trailing container using `.item-trailing-container`. + +Here is a list of the different assets that we support in the trailing container, along with their corresponding classes and notes. + + + Please note that the sizes below shouldn't be used in a [small list item](#sizes). The slot shouldn't be used as well in this size. + + + +
    +
    + Text should use `.item-label` with either `.item-extra-label` (only if not item small), `.text-muted`, or `.fw-bold`. + + +
    +
    +
    +

    Label

    +
    +
    +

    Label

    +

    Extra label

    +
    +
    +
    +
    + +
    +
    +
    +
    +

    Label

    +
    +
    +

    Label

    +
    +
    +
    +
    + +
    +
    +
    +
    +

    Label

    +
    +
    +

    Label

    +
    +
    +
    +
    `} /> +
    +
    + All variants of [Badge]([[docsref:/components/badge#badge]]) and [Badge - count]([[docsref:/components/badge#badge---count]]) are allowed. + + +
    +
    +
    +

    Label

    +
    +
    +

    12

    +
    +
    +
    +
    + +
    +
    +
    +
    +

    Label

    +
    +
    + +
    +
    +
    +
    `} /> +
+
+ All variants of [tags]([[docsref:/components/tag#tag]]) are allowed. + + +
+
+
+

Label

+
+
+

Tag

+
+
+
+
`} /> + +
+ The icon may be large using `.item-trailing-large` (only if not small item). If you need to use any of the status icon, you may use `.item-status-positive`, `.item-status-warning`, `.item-status-info` or `.item-status-negative` for color and icon in addition of `.item-icon`. + + +
+
+
+

Label

+
+
+ +
+
+
+
+ +
+
+
+
+

Label

+
+
+
+
+
+
+
`} /> + +
+ Images can be sized with `item-trailing-large` or `item-trailing-xlarge` and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element. + + +
+
+
+

Label

+
+
+ +
+
+
+
+ +
+
+
+
+

Label

+
+
+ +
+
+
+
`} /> + +
+ Videos can be sized with `item-trailing-large` or `item-trailing-xlarge` and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element. + + +
+
+
+

Label

+
+
+ +
+
+
+
`} /> + +
+ To add a slot, `item-slot` must be combined with `.item-trailing-container`. Limited in size to `96px x 96px`. {/* TODO: replace value by token once added */} A slot can be rounded using `item-trailing-rounded`. + + +
+
+
+

Label

+
+
+ +
+
+
+
`} /> + + + +##### Trailing container 2 The trailing container using `.item-trailing-container`. @@ -640,41 +845,6 @@ Here is a small resume of the slots that can be used in a static item: `} /> -#### Alignment - -By default all static item are vertically centered. You can change the alignment of the content using `.item-top` by setting it on the `.item-main` or any ancestors. - - -
-
-
- -
-
-

Overline

-

Label

-

Extra label

-

Description

-
-
-

1

-
-
-
-
-
-
-
-

Alert message

-
-
-
-
-
- `} /> - #### Helper text Optionally, a helper text can be added below the main `.item` container using `.item-helper`. @@ -753,31 +923,218 @@ By default every item comes with a divider. The divider may be removed or transf `} /> + #### Rounded corners - +Rounded corners items is a project-wide option therefore all your items should either be rounded or not. Add `.use-rounded-corner-items` on a top container (for example ``) to use rounded corners. + + + Rounded corners could be used in more emotional, immersive contexts or those tied to specific visual identities. **For standard or business-oriented usage, keep the default square corners.** + + + + We use a `
` as a parent container because we cannot use `` in an example. + + + + Items in a list won't have rounded corners even using this class. + + + + +
+
+
+
+

Label

+
+
+
+
+ + +
    +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
+
`} /> + ### States #### Disabled - +{/* TODO */} + +Static items can be disabled by using `.disabled` on the element `.item-wrapper` or any ancestors.The disabled state is also applied to all interactive elements inside the item. + +If the static item is in a disabled context, the static item will automatically take the disabled state without needing to add the `.disabled` class. This works if the ancestor element has the `[disabled]` attribute, the `[aria-disabled="true"]` attribute, or the `.disabled` class. + + +
+
+
+
+

Label

+
+
+
+
+ `} /> #### Skeleton - + + + +
+
+
+
+

Label

+
+
+
+
+ `} /> ### Sizes - +By default every item comes with a default size. The size can be adapted using `.item-small` on the element `.item-wrapper` or any ancestors. + +{/* TODO: Which element to document in every paragraph ? */} + + + The small size come with some restrictions: + + * The [assets](#with-asset) not being components shouldn't use any size classes + * There shouldn't be any [slot](#slot) in the item + + + +
+
+
+
+

Label

+
+
+
+
+ + +
    +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
`} /> ### Layout - +#### Alignment + +By default all static item are vertically centered. You can change the alignment of the content using `.item-top` by setting it on the `.item-main` or any ancestors. + + +
+
+
+ +
+
+

Overline

+

Label

+

Extra label

+

Description

+
+
+

1

+
+
+
+
+
+
+
+

Alert message

+
+
+
+
+
+ `} /> #### Max width - +By default, static items will span the whole width of their parent container, to limit the width of the static item on wider parent container, add a `.component-max-width` to the `.item-wrapper` or `.item-list` container. + +{/* TODO: Not the same size displayed */} + + +
+
+
+
+

Label

+
+
+
+
+ + +
    +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
  • +
    +
    +
    +

    Label

    +
    +
    +
    +
    • +
`} /> ## Navigation item diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index eec1f6956b..c2f4dafaee 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -516,3 +516,45 @@ } // scss-docs-end icon-warning // End mod + +.chip-interactive[aria-selected="true"] { + --#{$prefix}chip-bg: #{$ouds-chip-color-bg-selected-enabled}; + --#{$prefix}chip-border-color: #{$ouds-chip-color-border-selected-enabled}; + --#{$prefix}chip-border-width: #{px-to-rem($ouds-chip-border-width-selected)}; + --#{$prefix}chip-color: #{$ouds-chip-color-content-selected-enabled}; + --#{$prefix}chip-padding-start: #{$ouds-chip-space-padding-inline-icon}; + --#{$prefix}chip-tick-color: #{$ouds-chip-color-content-selected-tick-enabled}; + + &:hover { + --#{$prefix}chip-bg: #{$ouds-chip-color-bg-selected-hover}; + --#{$prefix}chip-border-color: #{$ouds-chip-color-border-selected-hover}; + --#{$prefix}chip-color: #{$ouds-chip-color-content-selected-hover}; + --#{$prefix}chip-tick-color: currentcolor; + } + + &:focus-visible { + --#{$prefix}chip-bg: #{$ouds-chip-color-bg-selected-focus}; + --#{$prefix}chip-border-color: #{$ouds-chip-color-border-selected-focus}; + --#{$prefix}chip-color: #{$ouds-chip-color-content-selected-focus}; + --#{$prefix}chip-tick-color: currentcolor; + } + + &:active { + --#{$prefix}chip-bg: #{$ouds-chip-color-bg-selected-pressed}; + --#{$prefix}chip-border-color: #{$ouds-chip-color-border-selected-pressed}; + --#{$prefix}chip-color: #{$ouds-chip-color-content-selected-pressed}; + --#{$prefix}chip-tick-color: currentcolor; + } + + &::before { + width: 1em; + height: 1em; + overflow: hidden; + font-size: px-to-rem($ouds-chip-size-icon); + line-height: 1; + color: var(--#{$prefix}chip-tick-color); + content: ""; + background-color: currentcolor; + mask: $chip-tick-icon no-repeat 50% / px-to-rem($ouds-chip-size-icon); + } +} diff --git a/stories/create-stories-from-doc.js b/stories/create-stories-from-doc.js index ba3a5a4f52..4c4f2fb392 100644 --- a/stories/create-stories-from-doc.js +++ b/stories/create-stories-from-doc.js @@ -11,6 +11,7 @@ const fs = require('node:fs') const path = require('node:path') const puppeteer = require('puppeteer') // eslint-disable-line import/no-extraneous-dependencies +const packageJson = require('../package.json') function createDirectoryIfNeeded(path) { if (fs.existsSync(path)) { @@ -53,6 +54,7 @@ const toPascalCase = str => { // Get all stories that might be displayed const files = fs.readdirSync(path.resolve(__dirname, `../site/src/content/docs/components/`)).map(fileName => [toPascalCase(fileName.replace('.mdx', '')), 'components']) const snippets = fs.readFileSync(path.resolve(__dirname, '../site/src/assets/partials/snippets.js'), { encoding: 'utf8' }) +const docsVersion = packageJson.version.split('.').slice(0, 2).join('.') const outputDirectory = `${__dirname}/auto` createDirectoryIfNeeded(outputDirectory); @@ -71,7 +73,7 @@ createDirectoryIfNeeded(outputDirectory); // 'Error: Execution context was destroyed, most likely because of a navigation.': await Promise.all([ page.waitForNavigation(), - page.goto(`file://${__dirname}/../_site/docs/${file[1]}/${convertToKebabCase(file[0])}/index.html`), + page.goto(`file://${__dirname}/../_site/orange/docs/${docsVersion}/${file[1]}/${convertToKebabCase(file[0])}/index.html`), page.waitForNavigation() ]) From 37e6be354a2edae5a39205f3957abdc2491d04bd Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 30 Jun 2026 09:50:56 +0200 Subject: [PATCH 07/10] First draft for Static list-item --- scss/_list-item.scss | 70 +++++++++++++------ .../src/content/docs/components/list-item.mdx | 45 +++++++++--- 2 files changed, 83 insertions(+), 32 deletions(-) diff --git a/scss/_list-item.scss b/scss/_list-item.scss index 890c78545f..3f6843348a 100644 --- a/scss/_list-item.scss +++ b/scss/_list-item.scss @@ -19,7 +19,7 @@ display: flex; column-gap: $ouds-control-item-space-column-gap; align-items: var(--#{$prefix}list-item-align-items, center); - min-height: var(--#{$prefix}list-item-min-height, $ouds-control-item-size-min-height-default); + min-height: calc(var(--#{$prefix}list-item-min-height, $ouds-control-item-size-min-height-default) - 2 * var(--#{$prefix}list-item-border-width, $ouds-control-item-border-width-default / 2)); padding: calc(var(--#{$prefix}list-item-padding-top, $ouds-control-item-space-padding-block-density-default) - var(--#{$prefix}list-item-border-width, 0px)) calc($ouds-control-item-space-padding-inline - var(--#{$prefix}list-item-border-width, 0px)) calc(var(--#{$prefix}list-item-padding-bottom, $ouds-control-item-space-padding-block-density-default) - var(--#{$prefix}list-item-border-width, $ouds-control-item-border-width-default)); } @@ -52,6 +52,7 @@ .item-leading-container, .item-trailing-container { &.item-slot { + box-sizing: content-box; max-width: 96px; // TODO: Add token when available height: unset; max-height: 96px; // TODO: Add token when available @@ -59,6 +60,11 @@ padding: 5px; margin: -5px; // Workaround to handle focus outline correctly } + + img, + video { + opacity: var(--#{$prefix}list-item-disabled-opacity, 1); + } } .item-slot-clickable { @@ -71,7 +77,7 @@ height: var(--#{$prefix}list-item-leading-container-size, $ouds-control-item-size-asset-medium); aspect-ratio: 1; overflow: hidden; - color: $ouds-color-content-default; + color: var(--#{$prefix}list-item-disabled-color, $ouds-color-content-default); @include border-radius(var(--#{$prefix}list-item-leading-container-border-radius, $ouds-control-item-border-radius-media), var(--#{$prefix}list-item-leading-container-border-radius, $ouds-control-item-border-radius-media)); } @@ -92,6 +98,7 @@ justify-content: center; min-height: var(--#{$prefix}list-item-trailing-container-size, $ouds-control-item-size-asset-medium); overflow: hidden; + color: var(--#{$prefix}list-item-disabled-color, $ouds-color-content-default); white-space: nowrap; @include border-radius(var(--#{$prefix}list-item-trailing-container-border-radius, $ouds-control-item-border-radius-media), var(--#{$prefix}list-item-trailing-container-border-radius, $ouds-control-item-border-radius-media)); @@ -106,7 +113,7 @@ margin-bottom: 0; @include get-font-size("label-small"); font-weight: $ouds-font-weight-web-label-moderate; - color: $ouds-color-content-muted; + color: var(--#{$prefix}list-item-disabled-color, $ouds-color-content-muted); } .item-label { @@ -114,7 +121,7 @@ margin-bottom: 0; @include get-font-size("label-large"); font-weight: $ouds-font-weight-web-label-default; - color: $ouds-color-content-default; + color: var(--#{$prefix}list-item-disabled-color, $ouds-color-content-default); } .item-extra-label { @@ -122,7 +129,7 @@ margin-bottom: 0; @include get-font-size("label-medium"); font-weight: $ouds-font-weight-web-label-strong; - color: $ouds-color-content-default; + color: var(--#{$prefix}list-item-disabled-color, $ouds-color-content-default); } .item-description { @@ -130,16 +137,16 @@ margin-bottom: 0; @include get-font-size("label-medium"); font-weight: $ouds-font-weight-web-label-default; - color: $ouds-color-content-muted; + color: var(--#{$prefix}list-item-disabled-color, $ouds-color-content-muted); } .item-helper { display: block; padding: $ouds-control-item-space-padding-block-top-helper-text $ouds-control-item-space-padding-inline 0; margin-bottom: 0; - font-weight: $ouds-font-weight-web-label-default; - color: $ouds-color-content-muted; @include get-font-size("label-medium"); + font-weight: $ouds-font-weight-web-label-default; + color: var(--#{$prefix}list-item-disabled-color, $ouds-color-content-muted); } .item-interactive { @@ -185,15 +192,35 @@ } // Variants +:disabled, +[aria-disabled="true"], +.disabled { + &.item-wrapper, + .item-wrapper { + --#{$prefix}list-item-bg: #{$ouds-color-action-support-disabled}; + --#{$prefix}list-item-border-color: #{$ouds-color-border-muted}; + --#{$prefix}list-item-disabled-color: #{$ouds-color-action-disabled}; + --#{$prefix}list-item-disabled-opacity: #{$ouds-opacity-disabled}; + } + + .item-icon { + --#{$prefix}list-item-icon-color: #{$ouds-color-action-disabled}; + --#{$prefix}list-item-icon-color-internal: transparent; + } +} + .use-rounded-corner-items { --#{$prefix}list-item-border-radius: #{$ouds-control-item-border-radius-rounded}; } .item-list { - --#{$prefix}list-item-border-radius: 0px; - --#{$prefix}list-item-bg: transparent; + .item-wrapper { // Handle disabled state for the whole list + --#{$prefix}list-item-border-radius: 0px; + --#{$prefix}list-item-bg: transparent; + } @include list-unstyled(); + box-sizing: content-box; padding: 5px; // Workaround to handle focus outline correctly margin: -5px; } @@ -216,6 +243,10 @@ --#{$prefix}list-item-border-color: var(--#{$prefix}list-item-arrow-color); } +// .item-no-outline:not(:has(.item-interactive:hover, .item-interactive:focus-visible, .item-interactive:active)) { +// --#{$prefix}list-item-border-width: 0px; +// } + .item-top { --#{$prefix}list-item-align-items: flex-start; --#{$prefix}list-item-padding-top: var(--#{$prefix}list-item-counterweight-padding-top, #{$ouds-control-item-space-padding-block-density-default-top-alignment-top-counterweight}); @@ -251,24 +282,24 @@ } .item-status-positive { - --#{$prefix}list-item-icon: #{$alert-icon-success}; // TODO: Decide if we make a common css variable with alert + --#{$prefix}list-item-icon: var(--#{$prefix}success-icon); --#{$prefix}list-item-icon-color: #{$ouds-color-content-status-positive}; } .item-status-info { - --#{$prefix}list-item-icon: #{$alert-icon-info}; + --#{$prefix}list-item-icon: var(--#{$prefix}info-icon); --#{$prefix}list-item-icon-color: #{$ouds-color-content-status-info}; } .item-status-warning { - --#{$prefix}list-item-icon: #{$alert-icon-warning-external}; + --#{$prefix}list-item-icon: var(--#{$prefix}warning-icon); --#{$prefix}list-item-icon-color: var(--#{$prefix}icon-color-content-status-warning-external-shape); - --#{$prefix}list-item-icon-internal: #{$alert-icon-warning-internal}; + --#{$prefix}list-item-icon-internal: var(--#{$prefix}warning-internal-icon); --#{$prefix}list-item-icon-color-internal: var(--#{$prefix}icon-color-content-status-warning-internal-shape); } .item-status-negative { - --#{$prefix}list-item-icon: #{$alert-icon-important}; + --#{$prefix}list-item-icon: var(--#{$prefix}error-icon); --#{$prefix}list-item-icon-color: #{$ouds-color-content-status-negative}; } @@ -286,7 +317,7 @@ // // Navigation specific styles // - +// TODO: refactor to set the interactive part in the common part. .item-navigation { position: relative; @@ -345,10 +376,3 @@ } } } - -// TODO -@if $enable-bootstrap-compatibility { - .list-group { - display: block; - } -} diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index 0a6f45d39d..c832400a26 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -605,7 +605,7 @@ Here is a list of the different assets that we support in the trailing container `} />
- Images can be sized with `item-trailing-large` or `item-trailing-xlarge` and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element. + Images can be sized with `item-trailing-large` (only if not item small) or `item-trailing-xlarge` (only if not item small) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element.
@@ -634,7 +634,7 @@ Here is a list of the different assets that we support in the trailing container
`} />
- Videos can be sized with `item-trailing-large` or `item-trailing-xlarge` and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element. + Videos can be sized with `item-trailing-large` (only if not item small) or `item-trailing-xlarge` (only if not item small) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element.
@@ -899,7 +899,7 @@ By default, alone items have a background-color, while list items don't. This be #### Outlined -By default every item comes with a divider. The divider may be removed or transformed into an outline using `.item-no-divider` or `.item-outlined` on the element `.item` or any ancestors. +By default every item comes with a divider. The divider may be removed or transformed into an outline using `.item-no-divider` or `.item-outlined` on the element `.item` or any ancestors. {/* TODO: You may remove the outline on default state by using `.item-no-outline` on the element `.item` or any ancestors. */}
@@ -980,19 +980,48 @@ Rounded corners items is a project-wide option therefore all your items should e #### Disabled -{/* TODO */} - -Static items can be disabled by using `.disabled` on the element `.item-wrapper` or any ancestors.The disabled state is also applied to all interactive elements inside the item. +Static items can be disabled by using `.disabled` on the element `.item-wrapper` or any ancestors. The disabled state is also applied to all interactive elements inside the item. If the static item is in a disabled context, the static item will automatically take the disabled state without needing to add the `.disabled` class. This works if the ancestor element has the `[disabled]` attribute, the `[aria-disabled="true"]` attribute, or the `.disabled` class. +You may handle on your own the [slots](#slot) regarding accessibility or design. For example, if you have a slot with a button, you may want to disable the button to apply the right behavior and the correct visual state. + + + The images and videos inside the disabled static item will be grayed out using opacity. You'll still need to handle it correclty from an accessibility point of view. + + -
+
+
+
+

Label

+
+ +
+
+
+
+ +
+
+
+
+ + +
+
+

Label

+

Extra label

+
+
+ +

Tag

+
@@ -1101,8 +1130,6 @@ By default all static item are vertically centered. You can change the alignment By default, static items will span the whole width of their parent container, to limit the width of the static item on wider parent container, add a `.component-max-width` to the `.item-wrapper` or `.item-list` container. -{/* TODO: Not the same size displayed */} -
From 1ce3f584b8c0bd58610d781aedc0fc5208fa4468 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 30 Jun 2026 11:37:32 +0200 Subject: [PATCH 08/10] Better UX --- site/src/content/docs/components/list-item.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index c832400a26..765e175f25 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -461,7 +461,7 @@ Here is a list of the different assets that we support in the trailing container Please note that the sizes below shouldn't be used in a [small list item](#sizes). The slot shouldn't be used as well in this size. -

Helper text

-
-
+
+
-
- +
+
`} /> -## Navigation item +## [[comp]] Navigation item ### Key concepts diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts index a211e9349a..16033974ec 100644 --- a/site/src/types/auto-import.d.ts +++ b/site/src/types/auto-import.d.ts @@ -7,6 +7,8 @@ */ export declare global { export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default + export const AssetsNavTab: typeof import('@shortcodes/AssetsNavTab.astro').default + export const AssetsTab: typeof import('@shortcodes/AssetsTab.astro').default export const BootstrapCompatibility: typeof import('@shortcodes/BootstrapCompatibility.astro').default export const BrandSpecific: typeof import('@shortcodes/BrandSpecific.astro').default export const BsTable: typeof import('@shortcodes/BsTable.astro').default