From 58fef26bb446c9acb824f95fbd6de54821d0018c Mon Sep 17 00:00:00 2001 From: boosted-bot Date: Wed, 24 Jun 2026 08:58:18 +0200 Subject: [PATCH 01/17] 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/17] 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/17] 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/17] . --- 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/17] . --- 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/17] . --- 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/17] 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/17] 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 From b8a0a6a5f1f664863b063bce3d773a45aef4de4f Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Sun, 5 Jul 2026 17:15:51 +0200 Subject: [PATCH 11/17] . --- .bundlewatch.config.json | 14 +- packages/orange-compact/config.yml | 2 +- packages/orange/config.yml | 2 +- packages/sosh/config.yml | 2 +- scss/_list-item.scss | 4 +- .../components/shortcodes/AssetsNavTab.astro | 28 ++- .../src/components/shortcodes/AssetsTab.astro | 11 +- .../src/content/docs/components/list-item.mdx | 207 ++++++++---------- 8 files changed, 127 insertions(+), 143 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 5f2a906251..9c1a1a8b4c 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./packages/orange/dist/css/ouds-web-bootstrap.css", - "maxSize": "83.0 kB" + "maxSize": "85.0 kB" }, { "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css", - "maxSize": "79.25 kB" + "maxSize": "81.0 kB" }, { "path": "./packages/orange/dist/css/ouds-web-grid.css", @@ -34,11 +34,11 @@ }, { "path": "./packages/orange/dist/css/ouds-web.css", - "maxSize": "66.5 kB" + "maxSize": "68.5 kB" }, { "path": "./packages/orange/dist/css/ouds-web.min.css", - "maxSize": "62.5 kB" + "maxSize": "64.25 kB" }, { "path": "./dist/js/ouds-web.bundle.js", @@ -66,6 +66,8 @@ } ], "ci": { - "trackBranches": ["ouds/main"] + "trackBranches": [ + "ouds/main" + ] } -} +} \ No newline at end of file diff --git a/packages/orange-compact/config.yml b/packages/orange-compact/config.yml index 153d547db4..d0a847f777 100644 --- a/packages/orange-compact/config.yml +++ b/packages/orange-compact/config.yml @@ -57,7 +57,7 @@ cdn: anchors: min: 2 - max: 5 + max: 6 toc: min: 2 diff --git a/packages/orange/config.yml b/packages/orange/config.yml index 6af02eabf8..a3c6cd7ae2 100644 --- a/packages/orange/config.yml +++ b/packages/orange/config.yml @@ -57,7 +57,7 @@ cdn: anchors: min: 2 - max: 5 + max: 6 toc: min: 2 diff --git a/packages/sosh/config.yml b/packages/sosh/config.yml index 018d411703..7d20b7253b 100644 --- a/packages/sosh/config.yml +++ b/packages/sosh/config.yml @@ -57,7 +57,7 @@ cdn: anchors: min: 2 - max: 5 + max: 6 toc: min: 2 diff --git a/scss/_list-item.scss b/scss/_list-item.scss index 8edd2b9b9b..47b607d26d 100644 --- a/scss/_list-item.scss +++ b/scss/_list-item.scss @@ -63,8 +63,6 @@ height: unset; max-height: px-to-rem(96px); // TODO: Add token when available aspect-ratio: unset; - padding: 5px; - margin: -5px; // Workaround to handle focus outline correctly } img, @@ -76,6 +74,8 @@ .item-slot-clickable { position: relative; z-index: 2; + padding: 5px; + margin: -5px; // Workaround to handle focus outline correctly } // Containers diff --git a/site/src/components/shortcodes/AssetsNavTab.astro b/site/src/components/shortcodes/AssetsNavTab.astro index 7d93416380..861ee15fbe 100644 --- a/site/src/components/shortcodes/AssetsNavTab.astro +++ b/site/src/components/shortcodes/AssetsNavTab.astro @@ -20,7 +20,7 @@ while ((match = tabRegex.exec(html)) !== null) { ---
)) }
+ + diff --git a/site/src/components/shortcodes/AssetsTab.astro b/site/src/components/shortcodes/AssetsTab.astro index ff6099ad52..e5ef9c69dc 100644 --- a/site/src/components/shortcodes/AssetsTab.astro +++ b/site/src/components/shortcodes/AssetsTab.astro @@ -10,13 +10,6 @@ interface Props { const { name, active } = Astro.props --- -
+
-
+ diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index fd9ccb4990..35e686864d 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -210,7 +210,7 @@ import { getVersionedDocsPath } from '@libs/path'
-
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.
+
Navigation item is a UI element that displays a unit of information and allows users to navigate.
@@ -247,6 +247,8 @@ There are 2 main categories inside the item group of components: Consider [Navigation items](#navigation-item) as an extension of [Static items](#static-item), with the added functionality of being able to navigate to different pages or sections within a multi-page interface. +{/* TODO explain the basic structure */} + #### Card item The card item is the default item when the item components are used. @@ -308,7 +310,7 @@ This is used to display a unit of information without any interaction. It can be #### With asset -The main container of a static item can contain up to 3 elements. They always appear in the following order: +The main container `.item-main` of an 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) @@ -319,13 +321,17 @@ 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. - +You can navigate through the different assets using the tabs below. + + 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. - The icon may be large using `.item-leading-large` (only if not [small item](#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`. + ###### Icon + + Icons can be sized with `item-leading-large` (only if not [small item](#small-item)). For status icons, add `.item-icon` with one of these classes: `.item-status-positive`, `.item-status-warning`, `.item-status-info`, or `.item-status-negative`.
@@ -345,8 +351,8 @@ Here is a table of the different assets that we support in the leading container
-
-
+
+

Label

@@ -355,61 +361,10 @@ Here is a table of the different assets that we support in the leading container
`} /> - - Test2 - - - Test3 - - - -
-
- The icon may be large using `.item-leading-large` (only if not [small item](#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

-
-
-
-
+ + ###### Image -
-
-
-
-
-
-
-

Label

-
-
-
-
`} /> -
-
Images can be sized with `item-leading-large` (only if not [small item](#small-item)) or `item-leading-xlarge` (only if not [small item](#small-item)) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-leading-rounded`. All these classes can be combined as needed and placed on a parent element. @@ -437,9 +392,12 @@ Here is a table of the different assets that we support in the leading container
`} /> -
-
- 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. + + + + ###### Video + + Videos can be sized with `item-leading-large` (only if not [small item](#small-item)) or `item-leading-xlarge` (only if not [small item](#small-item)) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-leading-rounded`. All these classes can be combined as needed and placed on a parent element such as an [`.item-list`](#list-item).
@@ -457,34 +415,43 @@ Here is a table of the different assets that we support in the leading container
`} /> -
-
- 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`. + + + + ###### Slot + + + The slot shouldn't be used in a [small list item](#sizes). + + + To add a slot, `item-slot` must be combined with `.item-leading-container`. Limited in size to `96px x 96px`. A slot can be rounded using `item-leading-rounded`. {/* TODO: replace value by token once added */}
+
+ +

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) (not in [small item](#sizes)) +There are four text elements that are meant to be used in the `.item-text-container` (required) which is placed directly inside the `.item-main` container. + +They always appear in the following order: +1. [Overline](#overline) using `.item-overline` (optional) (only if not [small item](#small-item)) 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) (not in [small item](#sizes)) +3. [Extra label](#extra-label) using `.item-extra-label` (optional) (only if not [small item](#small-item)) 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. +Optionally, a slot can be added at the end of the text container using `.item-slot` and/or in place of the `.item-label` if it replaces it.
@@ -552,32 +519,11 @@ 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. - -
-
- Text should use `.item-label` with either `.item-extra-label` (only if not item small), `.text-muted`, or `.fw-bold`. + + + ###### Text + + Text should use `.item-label` with either `.item-extra-label` (only if not item small), `.text-muted`, `.fw-bold`, or nothing.
@@ -618,8 +564,11 @@ Here is a list of the different assets that we support in the trailing container
`} /> -
-
+ + + + ###### Badge + All variants of [Badge]([[docsref:/components/badge#badge]]) and [Badge - count]([[docsref:/components/badge#badge---count]]) are allowed. @@ -647,8 +596,10 @@ Here is a list of the different assets that we support in the trailing container
`} /> - -
+ + + ###### Tag + All variants of [tags]([[docsref:/components/tag#tag]]) are allowed. @@ -663,9 +614,11 @@ Here is a list of the different assets that we support in the trailing container
`} /> - -
- 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`. + + + ###### Icon + + Icons can be sized with `item-leading-large` (only if not [small item](#small-item)). For status icons, add `.item-icon` with one of these classes: `.item-status-positive`, `.item-status-warning`, `.item-status-info`, or `.item-status-negative`.
@@ -688,15 +641,17 @@ Here is a list of the different assets that we support in the trailing container

Label

-
-
+
+
`} /> - -
- 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. + + + ###### Image + + Images can be sized with `item-trailing-large` (only if not [small item](#small-item)) or `item-trailing-xlarge` (only if not [small item](#small-item)) 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.
@@ -723,9 +678,11 @@ Here is a list of the different assets that we support in the trailing container
`} /> - -
- 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. + + + ###### Video + + Videos can be sized with `item-trailing-large` (only if not [small item](#small-item)) or `item-trailing-xlarge` (only if not [small item](#small-item)) 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 such as an [`.item-list`](#list-item).
@@ -743,9 +700,11 @@ Here is a list of the different assets that we support in the trailing container
`} /> - -
- 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`. + + + ###### Slot + + To add a slot, `item-slot` must be combined with `.item-leading-container`. Limited in size to `96px x 96px`. A slot can be rounded using `item-leading-rounded`. {/* TODO: replace value by token once added */}
@@ -759,19 +718,25 @@ Here is a list of the different assets that we support in the trailing container
`} /> - - + + -##### Slot +##### Slots 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. + + The slots shouldn't be used in a [small list item](#sizes). + + 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, direct child of `.item` using `.item-slot` (optional) +Optionally, if a slot is interactive you can add `.item-slot-clickable` to the slot. Please note that the slot won't be [rounded](#rounded-corners) anymore. +
From 6db8ab594b6c6323e3de651139cd10842b4d3f61 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 8 Jul 2026 12:02:14 +0200 Subject: [PATCH 12/17] First final touch --- scss/_list-item.scss | 2 +- site/data/components-details.ts | 32 + .../src/content/docs/components/list-item.mdx | 616 ++++++++---------- site/src/content/docs/components/skeleton.mdx | 21 + 4 files changed, 309 insertions(+), 362 deletions(-) diff --git a/scss/_list-item.scss b/scss/_list-item.scss index 47b607d26d..281b536976 100644 --- a/scss/_list-item.scss +++ b/scss/_list-item.scss @@ -396,7 +396,7 @@ // Navigation variants -.item-external-link { +.item-external { --#{$prefix}list-item-nav-icon: #{$list-item-external-icon}; } diff --git a/site/data/components-details.ts b/site/data/components-details.ts index a1cca06d11..fa13fa3a53 100644 --- a/site/data/components-details.ts +++ b/site/data/components-details.ts @@ -192,6 +192,38 @@ export const componentsDetails: ComponentCardData[] = [ category: 'Navigation', snippet: `Label` }, + { + name: 'Static list item', + slug: 'static-list-item', + link: 'list-item#static-list-item', + category: 'Control', + snippet: ` +
+
+
+
+

Label

+
+
+
+
` + }, + { + name: 'Navigation list item', + slug: 'navigation-list-item', + link: 'list-item#navigation-list-item', + category: 'Control', + snippet: ` +
+
+
+
+ Label +
+
+
+
` + }, { name: 'Navigation button', slug: 'navigation-button', diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index 35e686864d..4cfe6563ba 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -5,173 +5,14 @@ aliases: - "/docs/components/item/" toc: true types: - - Static item - - Navigation item + - Navigation card item + - Navigation list item + - Static card item + - Static list item --- 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 @@ -182,7 +23,7 @@ import { getVersionedDocsPath } from '@libs/path'
-
+

Label

@@ -192,15 +33,15 @@ import { getVersionedDocsPath } from '@libs/path'
-
Static item is a UI element that displays a unit of information.
+
Static item is a UI element that displays a unit of information.
  • -
    -
    +
    +
    Label @@ -210,7 +51,7 @@ import { getVersionedDocsPath } from '@libs/path'
    -
    Navigation item is a UI element that displays a unit of information and allows users to navigate.
    +
    Navigation item is a UI element that displays a unit of information and allows users to navigate.
    • @@ -218,7 +59,7 @@ import { getVersionedDocsPath } from '@libs/path' 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

    @@ -227,8 +68,8 @@ For the two types of items, OUDS Web has a common base `.item`, and `.item-main`
    `} /> - -
    + +
    Label @@ -243,37 +84,44 @@ There are 2 main categories inside the item group of components: - The [card item](#card-item) is a single item that can be used as a standalone component. - The [list item](#list-item) is designed to be used within a list, allowing multiple items to be displayed together. -[Static items](#static-item) and [Navigation items](#navigation-item) can be used in both categories. +[Static items](#static-list-item) and [Navigation items](#navigation-list-item) can be used in both categories. -Consider [Navigation items](#navigation-item) as an extension of [Static items](#static-item), with the added functionality of being able to navigate to different pages or sections within a multi-page interface. +Consider [Navigation items](#navigation-list-item) as an extension of [Static items](#static-list-item), with the added functionality of being able to navigate to different pages or sections within a multi-page interface. -{/* TODO explain the basic structure */} +The basic structure includes: +* `.item-wrapper` as the outermost container, which is used to add additional styles or behavior. +* `.item` as the container before the divider. +* `.item-main` as the main container for the primary content of the item. +* `.item-text-container` as the container for the text content of the item. +* `.item-interactive` as the class for interactive elements within the item, such as links or buttons. It's mandatory on the link for the [navigation item](#navigation-list-item). #### Card item The card item is the default item when the item components are used. -It is not meant to be used in a list. Most of the variants can be applied to this kind of item. It comes with a background and a divider by default. +Its behavior change once used in a list. Most of the variants can be applied to this kind of item. It comes with a background and a divider by default. #### List item -The list item is designed to be used within a list, allowing multiple items to be displayed together. By default, they have a divider but no background. Add `.item-list` to the `
      ` element. +The list item is designed to be used within a list, allowing multiple items [card items](#card-item) to be displayed together. By default, they have a divider but no background. They are surrounded by `.item-list` added to the `
        ` element. Some variants shouldn't be applied to this kind of item. Warning will be done about it in: - [Outlined](#outlined) variants -- [Rounded](#rounded) variant +- [Rounded](#rounded-corners) variant ### Accessibility -## [[comp]] Static item +## [[comp]] Static list item This is used to display a unit of information without any interaction. It can be used as a [standalone component](#card-item) or within a [list](#list-item). -### Standard display +Here is the base DOM and classes you should use for a static item. + +All the available variants can be found in the [common parts section](#common-parts). - +
        @@ -306,20 +154,113 @@ This is used to display a unit of information without any interaction. It can be
      `} /> +## [[comp]] Navigation list item + +This is used to display a unit of information and allow to navigate. It can be used as a [standalone component](#card-item) or within a [list](#list-item). + +Here is the base DOM and classes you should use for a navigation item. It needs an `.item-navigation` at the `.item-wrapper` level and an `.item-interactive` at the link level. + +All the available variants can be found in the [common parts section](#common-parts). + + +
      +
      +
      +
      + Label +
      +
      +
      +
      + + +
        +
      • +
        +
        +
        + Label +
        +
        +
        +
        • +
      • +
        +
        +
        + Label +
        +
        +
        +
        • +
      `} /> + +### Exclusive variants + +These variants are exclusive to the navigation item. They are used to indicate a specific type of navigation. + +#### Back chevron + +Add `.item-previous` to the `.item-navigation` to indicate that the item is a back navigation item. This will add a back chevron icon to the start of the item. + + +
      +
      +
      + Label +
      +
      +
      +
    `} /> + +#### External link + +Add `.item-external` to the `.item-navigation` to indicate that the item is an external link. This will add an external link icon to the end of the item. + + +
    +
    +
    + Label +
    +
    +
    +
    `} /> + +### Layout + +#### Using `` around + +Optionally, the `` element can wrap the entire `.item` instead of just the label. + + + +
    +
    +

    Label

    +
    +
    +     +
    `} /> + +## Common parts + +These variants can be used in both [Static items](#static-list-item) and [Navigation items](#navigation-list-item) whether they are [Card items](#card-item) or [List items](#list-item). + ### Variants #### With asset The main container `.item-main` of an 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) +2. [Text container](#texts) using `.item-text-container` (required) 3. [Trailing container](#trailing-container) using `.item-trailing-container` (optional) ##### Leading container -The leading container using `.item-leading-container`. +The leading container uses `.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. +Here is a list of the different assets that we support in the leading container, along with their corresponding classes and notes. You can navigate through the different assets using the tabs below. @@ -331,9 +272,11 @@ You can navigate through the different assets using the tabs below. ###### Icon - Icons can be sized with `item-leading-large` (only if not [small item](#small-item)). For status icons, add `.item-icon` with one of these classes: `.item-status-positive`, `.item-status-warning`, `.item-status-info`, or `.item-status-negative`. + Icons can be sized with `item-leading-large` (only if not [small item](#sizes)). - + For status icons, add `.item-icon` with one of these classes: `.item-status-positive`, `.item-status-warning`, `.item-status-info`, or `.item-status-negative`. + +
    @@ -365,25 +308,16 @@ You can navigate through the different assets using the tabs below. ###### Image - Images can be sized with `item-leading-large` (only if not [small item](#small-item)) or `item-leading-xlarge` (only if not [small item](#small-item)) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-leading-rounded`. All these classes can be combined as needed and placed on a parent element. + Images can be sized with `item-leading-large` (only if not [small item](#sizes)) or `item-leading-xlarge` (only if not [small item](#sizes)). - -
    -
    -
    - -
    -
    -

    Label

    -
    -
    -
    -
    + [Ratio utilities]([[docsref:/utilities/aspect-ratio]]) may also be used along with `.item-leading-rounded`. -
    + All these classes can be combined as needed and placed on `.item-leading-container`. + +
    -
    +
    @@ -397,9 +331,13 @@ You can navigate through the different assets using the tabs below. ###### Video - Videos can be sized with `item-leading-large` (only if not [small item](#small-item)) or `item-leading-xlarge` (only if not [small item](#small-item)) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-leading-rounded`. All these classes can be combined as needed and placed on a parent element such as an [`.item-list`](#list-item). + Videos can be sized with `item-leading-large` (only if not [small item](#sizes)) or `item-leading-xlarge` (only if not [small item](#sizes)). + + [Ratio utilities]([[docsref:/utilities/aspect-ratio]]) may also be used along with `.item-leading-rounded`. + + All these classes can be combined as needed and placed on `.item-leading-container`. - +
    @@ -424,9 +362,11 @@ You can navigate through the different assets using the tabs below. The slot shouldn't be used in a [small list item](#sizes). - To add a slot, `item-slot` must be combined with `.item-leading-container`. Limited in size to `96px x 96px`. A slot can be rounded using `item-leading-rounded`. {/* TODO: replace value by token once added */} + To add a slot, `item-slot` must be combined with `.item-leading-container`. - + Its size is limited to `96px x 96px`. A slot can be rounded using `item-leading-rounded`. {/* TODO: replace value by token once added */} + +
    @@ -441,19 +381,19 @@ You can navigate through the different assets using the tabs below. -##### Text +##### Texts -There are four text elements that are meant to be used in the `.item-text-container` (required) which is placed directly inside the `.item-main` container. +There are 4 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) (only if not [small item](#small-item)) -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) (only if not [small item](#small-item)) -4. [Description](#description) using `.item-description` (optional) +1. Overline using `.item-overline` (optional) (only if not [small item](#sizes)) +2. Label using `.item-label`, that can optionally be bold (using `.fw-bold`) (required) +3. Extra label using `.item-extra-label` (optional) (only if not [small item](#sizes)) +4. 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 `.item-label` if it replaces it. - +
    @@ -511,11 +451,11 @@ 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`. +The trailing container uses `.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. @@ -523,9 +463,9 @@ Here is a list of the different assets that we support in the trailing container ###### Text - Text should use `.item-label` with either `.item-extra-label` (only if not item small), `.text-muted`, `.fw-bold`, or nothing. + Text should use `.item-label`. Optionally you can use it with either `.item-extra-label` (only if not [small item](#sizes)), `.text-muted`, or `.fw-bold`. - +
    @@ -571,7 +511,7 @@ Here is a list of the different assets that we support in the trailing container All variants of [Badge]([[docsref:/components/badge#badge]]) and [Badge - count]([[docsref:/components/badge#badge---count]]) are allowed. - +
    @@ -602,7 +542,7 @@ Here is a list of the different assets that we support in the trailing container All variants of [tags]([[docsref:/components/tag#tag]]) are allowed. - +
    @@ -618,9 +558,11 @@ Here is a list of the different assets that we support in the trailing container ###### Icon - Icons can be sized with `item-leading-large` (only if not [small item](#small-item)). For status icons, add `.item-icon` with one of these classes: `.item-status-positive`, `.item-status-warning`, `.item-status-info`, or `.item-status-negative`. + Icons can be sized with `item-trailing-large` (only if not [small item](#sizes)). - + For status icons, add `.item-icon` with one of these classes: `.item-status-positive`, `.item-status-warning`, `.item-status-info`, or `.item-status-negative`. + +
    @@ -651,28 +593,19 @@ Here is a list of the different assets that we support in the trailing container ###### Image - Images can be sized with `item-trailing-large` (only if not [small item](#small-item)) or `item-trailing-xlarge` (only if not [small item](#small-item)) 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 [small item](#sizes)) or `item-trailing-xlarge` (only if not [small item](#sizes)). - -
    -
    -
    -

    Label

    -
    -
    - -
    -
    -
    -
    + [Ratio utilities]([[docsref:/utilities/aspect-ratio]]) may also be used along with `.item-trailing-rounded`. -
    + All these classes can be combined as needed and placed on `.item-trailing-container`. + +

    Label

    -
    +
    @@ -682,9 +615,13 @@ Here is a list of the different assets that we support in the trailing container ###### Video - Videos can be sized with `item-trailing-large` (only if not [small item](#small-item)) or `item-trailing-xlarge` (only if not [small item](#small-item)) 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 such as an [`.item-list`](#list-item). + Videos can be sized with `item-trailing-large` (only if not [small item](#sizes)) or `item-trailing-xlarge` (only if not [small item](#sizes)). - + [Ratio utilities]([[docsref:/utilities/aspect-ratio]]) may also be used along with `.item-trailing-rounded`. + + All these classes can be combined as needed and placed on `.item-trailing-container`. + +
    @@ -704,9 +641,11 @@ Here is a list of the different assets that we support in the trailing container ###### Slot - To add a slot, `item-slot` must be combined with `.item-leading-container`. Limited in size to `96px x 96px`. A slot can be rounded using `item-leading-rounded`. {/* TODO: replace value by token once added */} + To add a slot, `item-slot` must be combined with `.item-trailing-container`. + + Its size is limited to `96px x 96px`. A slot can be rounded using `item-trailing-rounded`. {/* TODO: replace value by token once added */} - +
    @@ -723,7 +662,7 @@ Here is a list of the different assets that we support in the trailing container ##### Slots -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. +This component contains many slots that can be used to add custom content. The main slots are located in the [leading container](#leading-container), the [text container](#texts), and the [trailing container](#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 `.item-main` container as well. The slots shouldn't be used in a [small list item](#sizes). @@ -731,13 +670,13 @@ This component contains many slots that can be used to add custom content. The m 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) +* [Text container](#texts) using `.item-slot` (optional) * [Trailing container](#trailing-container) using `.item-slot` (optional) -* A slot outside of the main container, direct child of `.item` using `.item-slot` (optional) +* A slot outside of the `.item-main` container, direct child of `.item` using `.item-slot` (optional) -Optionally, if a slot is interactive you can add `.item-slot-clickable` to the slot. Please note that the slot won't be [rounded](#rounded-corners) anymore. +Optionally, if the item is and a slot is also interactive, you can add `.item-slot-clickable` to the slot. Please note that the slot won't be [rounded](#rounded-corners) anymore. - +
    @@ -761,7 +700,7 @@ Optionally, if a slot is interactive you can add `.item-slot-clickable` to the s Optionally, a helper text can be added below the main `.item` container using `.item-helper`. - +
    @@ -774,14 +713,14 @@ Optionally, a helper text can be added below the main `.item` container using `. #### 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. +By default, [card items](#card-item) have a background-color, while [list items](#list-item) don't. This behavior can be modified by using `.item-no-bg` or `.item-bg` on the `.item-wrapper` or `.item-list` container. These modifiers only modify the no interaction background of the items. - -
    -
    + +
    +
    -

    Label

    + Label
    @@ -798,6 +737,34 @@ By default, alone items have a background-color, while list items don't. This be
    +
  • +
    +
    +
    + Label +
    +
    +
    +
    • + `} /> + +#### Divider + +You can remove the divider by using `.item-no-divider` on the `.item-wrapper` or `.item-list`. + + +
    +
    +
    +
    +

    Label

    +
    +
    +
    +
    + + +
    • @@ -807,39 +774,50 @@ By default, alone items have a background-color, while list items don't. This be
      • +
    • +
      +
      +
      + 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` or `.item-no-outline` on the element `.item` or any ancestors. It applies only on Card element. {/* TODO: You may remove the outline on default state by using `.item-no-outline` 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-outlined` and/or `.item-no-outline` on the element `.item-wrapper` or any ancestors. `.item-no-divider` can also be applied for another rendering. + +[Static items](#static-list-item) only have the non-interactive version. + +
    -

    Label

    + Label
    - -
    +
    -

    Label

    + Label
    -
    +
    -

    Label

    + Label
    @@ -859,11 +837,11 @@ Rounded corners items is a project-wide option therefore all your items should e - Items in a list won't have rounded corners even using this class. + Items in a [list](#list-item) won't have rounded corners even using this class. - +
    @@ -902,17 +880,17 @@ Rounded corners items is a project-wide option therefore all your items should e #### Disabled -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. +Items can be disabled by using `.disabled` on the element `.item-wrapper` or any ancestors. The disabled style 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. +If the item is in a disabled context, the 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. +You may handle on your own the [slots](#slot) regarding accessibility and 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. - +
    @@ -951,9 +929,9 @@ You may handle on your own the [slots](#slot) regarding accessibility or design. #### Skeleton - + - +
    @@ -967,19 +945,17 @@ You may handle on your own the [slots](#slot) regarding accessibility or design. ### 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 ? */} +By default every item comes with a default size. The size can be adapted using `.item-small` on the element `.item-wrapper` or `.item-list`. 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 - * The [text](#text) should only use the [label](#label), or [description](#description) and not the [overline](#overline), or [extra label](#extra-label) + * The assets within the [leading container](#leading-container) and the [trailing container](#trailing-container) not being components shouldn't use any size classes + * There shouldn't be any [slot](#slots) in the item + * The [text container](#texts) should only have the label, or description inside and not the overline, or extra label - +
    @@ -1016,10 +992,10 @@ By default every item comes with a default size. The size can be adapted using ` #### 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. +By default all items are vertically centered. You can change the alignment of the content using `.item-top` by setting it on the `.item-wrapper` or `.item-list`. - -
    + +

    Overline

    -

    Label

    + Label

    Extra label

    Description

    @@ -1051,9 +1027,9 @@ By default all static item are vertically centered. You can change the alignment #### 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. +By default, items will span the whole width of their parent container, to limit the width of the item on wider parent container, add a `.component-max-width` to the `.item-wrapper` or `.item-list` container. - +
    @@ -1085,85 +1061,3 @@ By default, static items will span the whole width of their parent container, to
    `} /> - -## [[comp]] 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 - -#### Max width - -#### Using `` around diff --git a/site/src/content/docs/components/skeleton.mdx b/site/src/content/docs/components/skeleton.mdx index 3667ed0f57..f24c45f22d 100644 --- a/site/src/content/docs/components/skeleton.mdx +++ b/site/src/content/docs/components/skeleton.mdx @@ -165,6 +165,27 @@ To set components in skeleton state, you can wrap any of them in an `[aria-busy= Link +
      +
    • +
      +
      +
      +

      Label

      +
      +
      +
      +
      • +
    • +
      +
      +
      +

      Label

      +
      +
      +
      +
      • +
    +
    +
    -

    Label

    + Label
    @@ -214,15 +214,17 @@ export const componentsDetails: ComponentCardData[] = [ link: 'list-item#navigation-list-item', category: 'Control', snippet: ` -
    -
    -
    -
    - Label +
    -
    ` + + ` }, { name: 'Navigation button', @@ -301,6 +303,40 @@ export const componentsDetails: ComponentCardData[] = [ ` }, + { + name: 'Static card item', + slug: 'static-list-item', + link: 'list-item#static-list-item', + category: 'Control', + snippet: ` +
    +
    +
    +
    +

    Label

    +
    +
    +
    +
    ` + }, + { + name: 'Static list item', + slug: 'static-list-item', + link: 'list-item#static-list-item', + category: 'Control', + snippet: ` +
      +
    • +
      +
      +
      +

      Label

      +
      +
      +
      +
      • +
    ` + }, { name: 'Switch', category: 'Control', diff --git a/site/src/components/shortcodes/AssetsNavTab.astro b/site/src/components/shortcodes/AssetsNavTab.astro index 861ee15fbe..32abc05ae7 100644 --- a/site/src/components/shortcodes/AssetsNavTab.astro +++ b/site/src/components/shortcodes/AssetsNavTab.astro @@ -34,7 +34,7 @@ while ((match = tabRegex.exec(html)) !== null) { data-bs-target={`#${id}-tab-${tab.kebabName}`} type="button" role="tab" - aria-controls={`#${id}-tab-${tab.kebabName}`} + aria-controls={`${id}-tab-${tab.kebabName}`} aria-selected={index === 0} > {tab.name} diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index 4cfe6563ba..03a3a8825d 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -343,7 +343,6 @@ You can navigate through the different assets using the tabs below.
    @@ -630,7 +629,6 @@ Here is a list of the different assets that we support in the trailing container
    From 894949a7a597907b42faf13196ff3a0216a73891 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 10 Jul 2026 10:23:48 +0200 Subject: [PATCH 14/17] . --- package.json | 2 +- .../__snapshots__/ouds-web-bootstrap.css | 375 +++++++++++++++++- .../snapshot-tests/__snapshots__/ouds-web.css | 375 +++++++++++++++++- 3 files changed, 741 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index dfb02b0967..c33729efae 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*", "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --ignore-pattern \"__snapshots__\" --cache --cache-location .cache/.stylelintcache", "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/src/assets/examples/**/*.css\"", - "css-snapshot-refresh": "npm run css && cp packages/orange/dist/css/ouds-web.css scss/tests/snapshot-tests/__snapshots__/ouds-web.css && cp packages/orange/dist/css/ouds-web-bootstrap.css scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css && git restore packages/*/dist", + "css-snapshot-refresh": "npm run css-dev-orange && cp packages/orange/dist/css/ouds-web.css scss/tests/snapshot-tests/__snapshots__/ouds-web.css && cp packages/orange/dist/css/ouds-web-bootstrap.css scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css && git restore packages/**/dist", "css-test": "jasmine --config=scss/tests/jasmine.js", "css-snapshot-test": "vitest --config=scss/tests/snapshot-tests/vitest.config.ts", "js": "npm-run-all js-compile js-minify", diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index ba48824c9f..5772abd6f3 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -12270,6 +12270,371 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-list-group-item-padding-x: var(--bs-card-spacer-x); } +.item { + display: block; + background-color: var(--bs-list-item-outlined-bg, var(--bs-list-item-disabled-bg, var(--bs-list-item-bg, var(--bs-color-action-support-enabled)))); + border-color: var(--bs-list-item-disabled-border-color, var(--bs-list-item-border-color, transparent)) var(--bs-list-item-disabled-border-color, var(--bs-list-item-border-color, transparent)) var(--bs-list-item-disabled-border-color, var(--bs-list-item-border-color, var(--bs-color-border-default))); + border-style: solid; + border-width: var(--bs-list-item-border-width, 0) var(--bs-list-item-border-width, 0) var(--bs-list-item-border-width, 1px); + border-radius: var(--bs-list-item-border-radius, 0px); +} +.item.item-interactive:focus-visible, .item:has(.item-interactive:focus-visible) { + isolation: isolate; + outline: 3px solid var(--bs-color-border-focus); + outline-offset: 2px; + box-shadow: 0 0 0 2px var(--bs-color-border-focus-inset); +} + +.item-main { + display: flex; + -moz-column-gap: 12px; + column-gap: 12px; + align-items: var(--bs-list-item-align-items, center); + min-height: calc(var(--bs-list-item-min-height, 60px) - 2 * var(--bs-list-item-border-width, 0.5px)); + padding: calc(var(--bs-list-item-padding-top, 12px) - var(--bs-list-item-border-width, 0px)) calc(16px - var(--bs-list-item-border-width, 0px)) calc(var(--bs-list-item-padding-bottom, 12px) - var(--bs-list-item-border-width, 1px)); +} + +.item-list.component-max-width, +.item-wrapper.component-max-width { + max-width: 30rem; +} + +.item > .item-slot { + width: calc(100% - 32px); + min-height: 28px; + margin: 0 16px 16px; +} + +.item-text-container .item-slot { + width: 100%; + margin-top: 4px; + margin-bottom: 4px; +} +.item-text-container .item-slot:last-child:not(:only-child) { + margin-top: 12px; + margin-bottom: 4px; +} + +.item-leading-container.item-slot, +.item-trailing-container.item-slot { + box-sizing: content-box; + max-width: 6rem; + height: unset; + max-height: 6rem; + aspect-ratio: unset; +} +.item-leading-container img, +.item-leading-container video, +.item-trailing-container img, +.item-trailing-container video { + opacity: var(--bs-list-item-disabled-opacity, 1); +} + +.item-slot-clickable { + position: relative; + z-index: 2; + padding: 5px; + margin: -5px; +} + +.item-leading-container { + flex-shrink: 0; + height: var(--bs-list-item-leading-container-size, 1.75rem); + aspect-ratio: 1; + overflow: hidden; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); + border-radius: var(--bs-list-item-leading-container-border-radius, 0px); +} + +.item-text-container { + display: flex; + flex-grow: 1; + flex-direction: column; + row-gap: var(--bs-list-item-container-row-gap, 0px); + justify-content: center; + margin-top: var(--bs-list-item-top-text-container-margin-top, 0); +} + +.item-trailing-container { + display: flex; + flex-shrink: 0; + flex-direction: column; + row-gap: var(--bs-list-item-container-row-gap, 0px); + align-items: flex-end; + justify-content: center; + min-height: var(--bs-list-item-trailing-container-size, 1.75rem); + overflow: hidden; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); + white-space: nowrap; + border-radius: var(--bs-list-item-trailing-container-border-radius, 0px); +} +.item-trailing-container:has(svg, img, .icon, .item-icon, video) { + height: var(--bs-list-item-trailing-container-size, 1.75rem); + aspect-ratio: 1; +} +.item-trailing-container:has(.item-label) { + margin-top: var(--bs-list-item-top-text-container-margin-top, 0); +} + +.item-overline { + display: block; + margin-bottom: 0; + font-size: var(--bs-font-size-label-small); + line-height: var(--bs-font-line-height-label-small); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-small); + font-weight: 500; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-muted)); +} + +.item-label { + display: block; + margin-bottom: 0; + font-size: var(--bs-font-size-label-large); + line-height: var(--bs-font-line-height-label-large); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-large); + font-weight: 400; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); +} + +.item-extra-label { + display: block; + margin-bottom: 0; + font-size: var(--bs-font-size-label-medium); + line-height: var(--bs-font-line-height-label-medium); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-medium); + font-weight: 700; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); +} + +.item-description { + display: block; + margin-bottom: 0; + font-size: var(--bs-font-size-label-medium); + line-height: var(--bs-font-line-height-label-medium); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-medium); + font-weight: 400; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-muted)); +} + +.item-helper { + display: block; + padding: 8px 16px 0; + margin-bottom: 0; + font-size: var(--bs-font-size-label-medium); + line-height: var(--bs-font-line-height-label-medium); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-medium); + font-weight: 400; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-muted)); +} + +.item-icon { + position: relative; + width: 100%; + height: 100%; +} +.item-icon::before { + position: absolute; + inset: 0; + content: ""; + background-color: var(--bs-list-item-disabled-icon-color, var(--bs-list-item-icon-color)); + -webkit-mask: var(--bs-list-item-icon) center/contain no-repeat; + mask: var(--bs-list-item-icon) center/contain no-repeat; +} +.item-icon::after { + position: absolute; + inset: 0; + content: ""; + background-color: var(--bs-list-item-disabled-icon-color-internal, var(--bs-list-item-icon-color-internal)); + -webkit-mask: var(--bs-list-item-icon-internal) center/contain no-repeat; + mask: var(--bs-list-item-icon-internal) center/contain no-repeat; +} + +.item-interactive { + text-decoration: none; + pointer-events: var(--bs-list-item-disabled-interactive, auto); +} +.item-interactive::before { + position: absolute; + inset: 0; + z-index: 1; + content: ""; +} +.item-interactive, .item-interactive:hover, .item-interactive:focus-visible, .item-interactive:active { + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); + outline: 0; + box-shadow: none; +} + +:disabled, +[aria-disabled=true], +.disabled { + --bs-list-item-disabled-bg: var(--bs-color-action-support-disabled); + --bs-list-item-disabled-border-color: var(--bs-color-border-muted); + --bs-list-item-disabled-color: var(--bs-color-action-disabled); + --bs-list-item-disabled-opacity: 0.2; + --bs-list-item-disabled-icon-color: var(--bs-color-action-disabled); + --bs-list-item-disabled-icon-color-internal: transparent; + --bs-list-item-disabled-interactive: none; +} + +.use-rounded-corner-items { + --bs-list-item-border-radius: 8px; +} + +.item-list { + --bs-list-item-border-radius: 0px; + --bs-list-item-bg: transparent; + max-width: initial; + padding-left: 0; + list-style: none; + box-sizing: content-box; + padding: 5px; + margin: -5px; +} + +.item-bg { + --bs-list-item-bg: var(--bs-color-action-support-enabled); +} + +.item-no-bg { + --bs-list-item-bg: transparent; +} + +.item-outlined { + --bs-list-item-outlined-bg: transparent; + --bs-list-item-border-width: 1px; + --bs-list-item-border-color: var(--bs-color-border-default); +} + +.item-no-outline { + --bs-list-item-border-color: initial; +} + +.item-no-divider { + --bs-list-item-border-color: transparent; +} + +.item-top { + --bs-list-item-align-items: flex-start; + --bs-list-item-padding-top: var(--bs-list-item-counterweight-padding-top, 10px); + --bs-list-item-top-text-container-margin-top: var(--bs-list-item-text-container-margin-top, 2px); +} + +.item-leading-large { + --bs-list-item-leading-container-size: 2.5rem; +} + +.item-leading-xlarge { + --bs-list-item-leading-container-size: 3.5rem; +} + +.item-leading-rounded { + --bs-list-item-leading-container-border-radius: 4px; +} + +.item-trailing-large { + --bs-list-item-trailing-container-size: 2.5rem; +} + +.item-trailing-xlarge { + --bs-list-item-trailing-container-size: 3.5rem; +} + +.item-trailing-rounded { + --bs-list-item-trailing-container-border-radius: 4px; +} + +.item-status-positive { + --bs-list-item-icon: var(--bs-success-icon); + --bs-list-item-icon-color: var(--bs-color-content-status-positive); +} + +.item-status-info { + --bs-list-item-icon: var(--bs-info-icon); + --bs-list-item-icon-color: var(--bs-color-content-status-info); +} + +.item-status-warning { + --bs-list-item-icon: var(--bs-warning-icon); + --bs-list-item-icon-color: var(--bs-icon-color-content-status-warning-external-shape); + --bs-list-item-icon-internal: var(--bs-warning-internal-icon); + --bs-list-item-icon-color-internal: var(--bs-icon-color-content-status-warning-internal-shape); +} + +.item-status-negative { + --bs-list-item-icon: var(--bs-error-icon); + --bs-list-item-icon-color: var(--bs-color-content-status-negative); +} + +.item-small { + --bs-list-item-min-height: 48px; + --bs-list-item-padding-top: 8px; + --bs-list-item-counterweight-padding-top: 8px; + --bs-list-item-padding-bottom: 8px; + --bs-list-item-container-row-gap: 0; + --bs-list-item-text-container-margin-top: 0px; + --bs-list-item-leading-container-size: 1.5rem; +} + +.item-navigation .item { + position: relative; +} +.item-navigation .item-main::after { + display: flex; + flex-shrink: 0; + order: var(--bs-list-item-nav-order, 1); + width: 1.5rem; + min-height: 1.75rem; + content: ""; + background-color: var(--bs-list-item-disabled-icon-color, var(--bs-list-item-chevron-color, var(--bs-color-content-brand-primary))); + -webkit-mask-image: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")); + mask-image: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")); + -webkit-mask-position: center; + mask-position: center; +} +.item-navigation.item-interactive:hover, .item-navigation:has(.item-interactive:hover) { + --bs-list-item-chevron-color: var(--bs-color-action-hover); + --bs-list-item-bg: var(--bs-color-action-support-hover); +} +.item-navigation.item-interactive:focus-visible, .item-navigation:has(.item-interactive:focus-visible) { + --bs-list-item-chevron-color: var(--bs-color-action-focus); + --bs-list-item-bg: var(--bs-color-action-support-focus); +} +.item-navigation.item-interactive:active, .item-navigation:has(.item-interactive:active) { + --bs-list-item-chevron-color: var(--bs-color-action-pressed); + --bs-list-item-bg: var(--bs-color-action-support-pressed); +} + +.item-outlined.item-navigation.item-interactive:hover, .item-outlined.item-navigation:has(.item-interactive:hover), +.item-outlined .item-navigation.item-interactive:hover, +.item-outlined .item-navigation:has(.item-interactive:hover) { + --bs-list-item-border-color: var(--bs-color-action-hover); +} +.item-outlined.item-navigation.item-interactive:focus-visible, .item-outlined.item-navigation:has(.item-interactive:focus-visible), +.item-outlined .item-navigation.item-interactive:focus-visible, +.item-outlined .item-navigation:has(.item-interactive:focus-visible) { + --bs-list-item-border-color: var(--bs-color-action-focus); +} +.item-outlined.item-navigation.item-interactive:active, .item-outlined.item-navigation:has(.item-interactive:active), +.item-outlined .item-navigation.item-interactive:active, +.item-outlined .item-navigation:has(.item-interactive:active) { + --bs-list-item-border-color: var(--bs-color-action-pressed); +} + +.item-external { + --bs-list-item-nav-icon: url("data:image/svg+xml,"); +} + +.item-previous { + --bs-list-item-nav-order: -1; + --bs-list-item-nav-icon: url("data:image/svg+xml,"); +} + .toast { --bs-toast-zindex: 1090; --bs-toast-padding-x: 0.5rem; @@ -14163,7 +14528,7 @@ ol.bullet-list > li > ol > li > ol > li::before { transform: translate3d(100%, 0, 0); } } -.skeleton, .placeholder, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item), [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input) { +.skeleton, .placeholder, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper), [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input) { position: relative; height: var(--bs-skeleton-height); overflow: hidden; @@ -14171,10 +14536,10 @@ ol.bullet-list > li > ol > li > ol > li::before { background-color: transparent; border: 0; } -.skeleton > *, .placeholder > *, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item) > *, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input) > * { +.skeleton > *, .placeholder > *, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper) > *, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input) > * { visibility: hidden; } -.skeleton::before, .placeholder::before, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item)::before, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input)::before, .skeleton::after, .placeholder::after, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item)::after, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input)::after { +.skeleton::before, .placeholder::before, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper)::before, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input)::before, .skeleton::after, .placeholder::after, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper)::after, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input)::after { all: unset; position: absolute; inset: var(--bs-skeleton-margin-block, 4px) 0; @@ -14182,14 +14547,14 @@ ol.bullet-list > li > ol > li > ol > li::before { display: block; content: ""; } -.skeleton::before, .placeholder::before, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item)::before, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input)::before { +.skeleton::before, .placeholder::before, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper)::before, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input)::before { width: unset !important; height: unset !important; background-color: var(--bs-color-opacity-lowest) !important; -webkit-mask: unset !important; mask: unset !important; } -.skeleton::after, .placeholder::after, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item)::after, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input)::after { +.skeleton::after, .placeholder::after, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper)::after, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .icon-link, .radio-button-standalone, .select-input, .form-select, .switch-standalone > .control-item-indicator, .switch-standalone > .form-check-input, .tag, .text-area, .text-input)::after { background: linear-gradient(270deg, var(--bs-color-opacity-transparent) 3%, var(--bs-color-opacity-lower) 47%, var(--bs-color-opacity-transparent) 97%); transform: translate3d(-100%, 0, 0); animation: skeleton-wave 1.25s 2s ease-in-out infinite; diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index 20693e3bf3..11c5dc8ea9 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -10058,6 +10058,371 @@ ol.bullet-list > li > ol > li > ol > li::before { --bs-list-group-item-padding-x: var(--bs-card-spacer-x); } +.item { + display: block; + background-color: var(--bs-list-item-outlined-bg, var(--bs-list-item-disabled-bg, var(--bs-list-item-bg, var(--bs-color-action-support-enabled)))); + border-color: var(--bs-list-item-disabled-border-color, var(--bs-list-item-border-color, transparent)) var(--bs-list-item-disabled-border-color, var(--bs-list-item-border-color, transparent)) var(--bs-list-item-disabled-border-color, var(--bs-list-item-border-color, var(--bs-color-border-default))); + border-style: solid; + border-width: var(--bs-list-item-border-width, 0) var(--bs-list-item-border-width, 0) var(--bs-list-item-border-width, 1px); + border-radius: var(--bs-list-item-border-radius, 0px); +} +.item.item-interactive:focus-visible, .item:has(.item-interactive:focus-visible) { + isolation: isolate; + outline: 3px solid var(--bs-color-border-focus); + outline-offset: 2px; + box-shadow: 0 0 0 2px var(--bs-color-border-focus-inset); +} + +.item-main { + display: flex; + -moz-column-gap: 12px; + column-gap: 12px; + align-items: var(--bs-list-item-align-items, center); + min-height: calc(var(--bs-list-item-min-height, 60px) - 2 * var(--bs-list-item-border-width, 0.5px)); + padding: calc(var(--bs-list-item-padding-top, 12px) - var(--bs-list-item-border-width, 0px)) calc(16px - var(--bs-list-item-border-width, 0px)) calc(var(--bs-list-item-padding-bottom, 12px) - var(--bs-list-item-border-width, 1px)); +} + +.item-list.component-max-width, +.item-wrapper.component-max-width { + max-width: 30rem; +} + +.item > .item-slot { + width: calc(100% - 32px); + min-height: 28px; + margin: 0 16px 16px; +} + +.item-text-container .item-slot { + width: 100%; + margin-top: 4px; + margin-bottom: 4px; +} +.item-text-container .item-slot:last-child:not(:only-child) { + margin-top: 12px; + margin-bottom: 4px; +} + +.item-leading-container.item-slot, +.item-trailing-container.item-slot { + box-sizing: content-box; + max-width: 6rem; + height: unset; + max-height: 6rem; + aspect-ratio: unset; +} +.item-leading-container img, +.item-leading-container video, +.item-trailing-container img, +.item-trailing-container video { + opacity: var(--bs-list-item-disabled-opacity, 1); +} + +.item-slot-clickable { + position: relative; + z-index: 2; + padding: 5px; + margin: -5px; +} + +.item-leading-container { + flex-shrink: 0; + height: var(--bs-list-item-leading-container-size, 1.75rem); + aspect-ratio: 1; + overflow: hidden; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); + border-radius: var(--bs-list-item-leading-container-border-radius, 0px); +} + +.item-text-container { + display: flex; + flex-grow: 1; + flex-direction: column; + row-gap: var(--bs-list-item-container-row-gap, 0px); + justify-content: center; + margin-top: var(--bs-list-item-top-text-container-margin-top, 0); +} + +.item-trailing-container { + display: flex; + flex-shrink: 0; + flex-direction: column; + row-gap: var(--bs-list-item-container-row-gap, 0px); + align-items: flex-end; + justify-content: center; + min-height: var(--bs-list-item-trailing-container-size, 1.75rem); + overflow: hidden; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); + white-space: nowrap; + border-radius: var(--bs-list-item-trailing-container-border-radius, 0px); +} +.item-trailing-container:has(svg, img, .icon, .item-icon, video) { + height: var(--bs-list-item-trailing-container-size, 1.75rem); + aspect-ratio: 1; +} +.item-trailing-container:has(.item-label) { + margin-top: var(--bs-list-item-top-text-container-margin-top, 0); +} + +.item-overline { + display: block; + margin-bottom: 0; + font-size: var(--bs-font-size-label-small); + line-height: var(--bs-font-line-height-label-small); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-small); + font-weight: 500; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-muted)); +} + +.item-label { + display: block; + margin-bottom: 0; + font-size: var(--bs-font-size-label-large); + line-height: var(--bs-font-line-height-label-large); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-large); + font-weight: 400; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); +} + +.item-extra-label { + display: block; + margin-bottom: 0; + font-size: var(--bs-font-size-label-medium); + line-height: var(--bs-font-line-height-label-medium); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-medium); + font-weight: 700; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); +} + +.item-description { + display: block; + margin-bottom: 0; + font-size: var(--bs-font-size-label-medium); + line-height: var(--bs-font-line-height-label-medium); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-medium); + font-weight: 400; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-muted)); +} + +.item-helper { + display: block; + padding: 8px 16px 0; + margin-bottom: 0; + font-size: var(--bs-font-size-label-medium); + line-height: var(--bs-font-line-height-label-medium); + /* rtl:remove */ + letter-spacing: var(--bs-font-letter-spacing-label-medium); + font-weight: 400; + color: var(--bs-list-item-disabled-color, var(--bs-color-content-muted)); +} + +.item-icon { + position: relative; + width: 100%; + height: 100%; +} +.item-icon::before { + position: absolute; + inset: 0; + content: ""; + background-color: var(--bs-list-item-disabled-icon-color, var(--bs-list-item-icon-color)); + -webkit-mask: var(--bs-list-item-icon) center/contain no-repeat; + mask: var(--bs-list-item-icon) center/contain no-repeat; +} +.item-icon::after { + position: absolute; + inset: 0; + content: ""; + background-color: var(--bs-list-item-disabled-icon-color-internal, var(--bs-list-item-icon-color-internal)); + -webkit-mask: var(--bs-list-item-icon-internal) center/contain no-repeat; + mask: var(--bs-list-item-icon-internal) center/contain no-repeat; +} + +.item-interactive { + text-decoration: none; + pointer-events: var(--bs-list-item-disabled-interactive, auto); +} +.item-interactive::before { + position: absolute; + inset: 0; + z-index: 1; + content: ""; +} +.item-interactive, .item-interactive:hover, .item-interactive:focus-visible, .item-interactive:active { + color: var(--bs-list-item-disabled-color, var(--bs-color-content-default)); + outline: 0; + box-shadow: none; +} + +:disabled, +[aria-disabled=true], +.disabled { + --bs-list-item-disabled-bg: var(--bs-color-action-support-disabled); + --bs-list-item-disabled-border-color: var(--bs-color-border-muted); + --bs-list-item-disabled-color: var(--bs-color-action-disabled); + --bs-list-item-disabled-opacity: 0.2; + --bs-list-item-disabled-icon-color: var(--bs-color-action-disabled); + --bs-list-item-disabled-icon-color-internal: transparent; + --bs-list-item-disabled-interactive: none; +} + +.use-rounded-corner-items { + --bs-list-item-border-radius: 8px; +} + +.item-list { + --bs-list-item-border-radius: 0px; + --bs-list-item-bg: transparent; + max-width: initial; + padding-left: 0; + list-style: none; + box-sizing: content-box; + padding: 5px; + margin: -5px; +} + +.item-bg { + --bs-list-item-bg: var(--bs-color-action-support-enabled); +} + +.item-no-bg { + --bs-list-item-bg: transparent; +} + +.item-outlined { + --bs-list-item-outlined-bg: transparent; + --bs-list-item-border-width: 1px; + --bs-list-item-border-color: var(--bs-color-border-default); +} + +.item-no-outline { + --bs-list-item-border-color: initial; +} + +.item-no-divider { + --bs-list-item-border-color: transparent; +} + +.item-top { + --bs-list-item-align-items: flex-start; + --bs-list-item-padding-top: var(--bs-list-item-counterweight-padding-top, 10px); + --bs-list-item-top-text-container-margin-top: var(--bs-list-item-text-container-margin-top, 2px); +} + +.item-leading-large { + --bs-list-item-leading-container-size: 2.5rem; +} + +.item-leading-xlarge { + --bs-list-item-leading-container-size: 3.5rem; +} + +.item-leading-rounded { + --bs-list-item-leading-container-border-radius: 4px; +} + +.item-trailing-large { + --bs-list-item-trailing-container-size: 2.5rem; +} + +.item-trailing-xlarge { + --bs-list-item-trailing-container-size: 3.5rem; +} + +.item-trailing-rounded { + --bs-list-item-trailing-container-border-radius: 4px; +} + +.item-status-positive { + --bs-list-item-icon: var(--bs-success-icon); + --bs-list-item-icon-color: var(--bs-color-content-status-positive); +} + +.item-status-info { + --bs-list-item-icon: var(--bs-info-icon); + --bs-list-item-icon-color: var(--bs-color-content-status-info); +} + +.item-status-warning { + --bs-list-item-icon: var(--bs-warning-icon); + --bs-list-item-icon-color: var(--bs-icon-color-content-status-warning-external-shape); + --bs-list-item-icon-internal: var(--bs-warning-internal-icon); + --bs-list-item-icon-color-internal: var(--bs-icon-color-content-status-warning-internal-shape); +} + +.item-status-negative { + --bs-list-item-icon: var(--bs-error-icon); + --bs-list-item-icon-color: var(--bs-color-content-status-negative); +} + +.item-small { + --bs-list-item-min-height: 48px; + --bs-list-item-padding-top: 8px; + --bs-list-item-counterweight-padding-top: 8px; + --bs-list-item-padding-bottom: 8px; + --bs-list-item-container-row-gap: 0; + --bs-list-item-text-container-margin-top: 0px; + --bs-list-item-leading-container-size: 1.5rem; +} + +.item-navigation .item { + position: relative; +} +.item-navigation .item-main::after { + display: flex; + flex-shrink: 0; + order: var(--bs-list-item-nav-order, 1); + width: 1.5rem; + min-height: 1.75rem; + content: ""; + background-color: var(--bs-list-item-disabled-icon-color, var(--bs-list-item-chevron-color, var(--bs-color-content-brand-primary))); + -webkit-mask-image: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")); + mask-image: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")); + -webkit-mask-position: center; + mask-position: center; +} +.item-navigation.item-interactive:hover, .item-navigation:has(.item-interactive:hover) { + --bs-list-item-chevron-color: var(--bs-color-action-hover); + --bs-list-item-bg: var(--bs-color-action-support-hover); +} +.item-navigation.item-interactive:focus-visible, .item-navigation:has(.item-interactive:focus-visible) { + --bs-list-item-chevron-color: var(--bs-color-action-focus); + --bs-list-item-bg: var(--bs-color-action-support-focus); +} +.item-navigation.item-interactive:active, .item-navigation:has(.item-interactive:active) { + --bs-list-item-chevron-color: var(--bs-color-action-pressed); + --bs-list-item-bg: var(--bs-color-action-support-pressed); +} + +.item-outlined.item-navigation.item-interactive:hover, .item-outlined.item-navigation:has(.item-interactive:hover), +.item-outlined .item-navigation.item-interactive:hover, +.item-outlined .item-navigation:has(.item-interactive:hover) { + --bs-list-item-border-color: var(--bs-color-action-hover); +} +.item-outlined.item-navigation.item-interactive:focus-visible, .item-outlined.item-navigation:has(.item-interactive:focus-visible), +.item-outlined .item-navigation.item-interactive:focus-visible, +.item-outlined .item-navigation:has(.item-interactive:focus-visible) { + --bs-list-item-border-color: var(--bs-color-action-focus); +} +.item-outlined.item-navigation.item-interactive:active, .item-outlined.item-navigation:has(.item-interactive:active), +.item-outlined .item-navigation.item-interactive:active, +.item-outlined .item-navigation:has(.item-interactive:active) { + --bs-list-item-border-color: var(--bs-color-action-pressed); +} + +.item-external { + --bs-list-item-nav-icon: url("data:image/svg+xml,"); +} + +.item-previous { + --bs-list-item-nav-order: -1; + --bs-list-item-nav-icon: url("data:image/svg+xml,"); +} + .toast { --bs-toast-zindex: 1090; --bs-toast-padding-x: 0.5rem; @@ -11846,7 +12211,7 @@ ol.bullet-list > li > ol > li > ol > li::before { transform: translate3d(100%, 0, 0); } } -.skeleton, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item), [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input) { +.skeleton, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper), [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input) { position: relative; height: var(--bs-skeleton-height); overflow: hidden; @@ -11854,10 +12219,10 @@ ol.bullet-list > li > ol > li > ol > li::before { background-color: transparent; border: 0; } -.skeleton > *, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item) > *, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input) > * { +.skeleton > *, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper) > *, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input) > * { visibility: hidden; } -.skeleton::before, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item)::before, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input)::before, .skeleton::after, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item)::after, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input)::after { +.skeleton::before, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper)::before, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input)::before, .skeleton::after, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper)::after, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input)::after { all: unset; position: absolute; inset: var(--bs-skeleton-margin-block, 4px) 0; @@ -11865,14 +12230,14 @@ ol.bullet-list > li > ol > li > ol > li::before { display: block; content: ""; } -.skeleton::before, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item)::before, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input)::before { +.skeleton::before, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper)::before, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input)::before { width: unset !important; height: unset !important; background-color: var(--bs-color-opacity-lowest) !important; -webkit-mask: unset !important; mask: unset !important; } -.skeleton::after, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item)::after, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input)::after { +.skeleton::after, [aria-busy=true] :is(.bullet-list > li, .checkbox-item, .radio-button-item, .switch-item, .item-wrapper)::after, [aria-busy=true] :is(.alert, .btn, .btn-close, .checkbox-standalone, .chip-interactive, .link, .link-chevron, .radio-button-standalone, .select-input, .switch-standalone > .control-item-indicator, .tag, .text-area, .text-input)::after { background: linear-gradient(270deg, var(--bs-color-opacity-transparent) 3%, var(--bs-color-opacity-lower) 47%, var(--bs-color-opacity-transparent) 97%); transform: translate3d(-100%, 0, 0); animation: skeleton-wave 1.25s 2s ease-in-out infinite; From de08c9e102aa5e523c61cd013f509788c9063069 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 10 Jul 2026 10:39:44 +0200 Subject: [PATCH 15/17] fix review --- packages/orange/scss/tokens/_component.scss | 48 +++++++++---------- scss/_list-item.scss | 13 +++-- site/data/_components-versions.yml | 2 +- .../components/shortcodes/AssetsNavTab.astro | 4 +- .../src/components/shortcodes/AssetsTab.astro | 5 +- .../src/content/docs/components/list-item.mdx | 8 ++-- 6 files changed, 39 insertions(+), 41 deletions(-) diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 5c08a60849..9642f10b59 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -235,43 +235,43 @@ $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-current-indicator: $ouds-border-radius-none !default; $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; $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-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-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 @@ -282,11 +282,11 @@ $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 -// $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/scss/_list-item.scss b/scss/_list-item.scss index 281b536976..6971a7ed8c 100644 --- a/scss/_list-item.scss +++ b/scss/_list-item.scss @@ -74,8 +74,8 @@ .item-slot-clickable { position: relative; z-index: 2; - padding: 5px; - margin: -5px; // Workaround to handle focus outline correctly + padding: calc($focus-visible-outer-width + $focus-visible-inner-width); // Workaround to handle focus outline correctly + margin: calc(-1 * ($focus-visible-outer-width + $focus-visible-inner-width)); } // Containers @@ -237,13 +237,13 @@ } .item-list { // Needs to be after .use-rounded-corner-items to override the variable - --#{$prefix}list-item-border-radius: 0px; + --#{$prefix}list-item-border-radius: #{$ouds-border-radius-none}; --#{$prefix}list-item-bg: transparent; @include list-unstyled(); box-sizing: content-box; - padding: 5px; // Workaround to handle focus outline correctly - margin: -5px; + padding: calc($focus-visible-outer-width + $focus-visible-inner-width); // Workaround to handle focus outline correctly + margin: calc(-1 * ($focus-visible-outer-width + $focus-visible-inner-width)); } .item-bg { // Needs to be after .item-list to override the variable @@ -352,8 +352,7 @@ min-height: px-to-rem($ouds-control-item-size-asset-medium); content: ""; background-color: var(--#{$prefix}list-item-disabled-icon-color, var(--#{$prefix}list-item-chevron-color, $ouds-link-color-chevron-enabled)); - mask-image: var(--#{$prefix}list-item-nav-icon, $list-item-next-icon); - mask-position: center; + mask: var(--#{$prefix}list-item-nav-icon, $list-item-next-icon) center / contain no-repeat; } &.item-interactive:hover, diff --git a/site/data/_components-versions.yml b/site/data/_components-versions.yml index f0b7ca48cf..7672e58807 100644 --- a/site/data/_components-versions.yml +++ b/site/data/_components-versions.yml @@ -53,7 +53,7 @@ - name: 'radio-button' value: '1.4.0' - name: 'select-input' - value: '1.3.0' + value: '1.2.0' - name: 'skeleton' value: '1.0.0' - name: 'suggestion-chip' diff --git a/site/src/components/shortcodes/AssetsNavTab.astro b/site/src/components/shortcodes/AssetsNavTab.astro index 32abc05ae7..084bd7e47d 100644 --- a/site/src/components/shortcodes/AssetsNavTab.astro +++ b/site/src/components/shortcodes/AssetsNavTab.astro @@ -1,6 +1,6 @@ --- /* - * Outputs badge to identify the first version something was added + * Outputs a tabbed navigation wrapper for asset examples. */ interface Props { id: string @@ -66,7 +66,7 @@ while ((match = tabRegex.exec(html)) !== null) { const targetTab = document.getElementById(hash)?.closest('.tab-pane')?.getAttribute('aria-labelledby') if (targetTab) { document.addEventListener('show.bs.tab', (event) => { - (event.target as HTMLElement)?.scrollIntoView({ behavior: 'smooth', block: 'start' }) + (event.target as HTMLElement)?.scrollIntoView({ behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth', block: 'start' }) }, { once: true }) oudsWeb.Tab.getOrCreateInstance(`#${targetTab}`).show() } diff --git a/site/src/components/shortcodes/AssetsTab.astro b/site/src/components/shortcodes/AssetsTab.astro index e5ef9c69dc..1e885287e2 100644 --- a/site/src/components/shortcodes/AssetsTab.astro +++ b/site/src/components/shortcodes/AssetsTab.astro @@ -1,13 +1,12 @@ --- /* - * Outputs badge to identify the first version something was added + * Outputs a tab for AssetsNavTab.astro. */ interface Props { name: string - active?: boolean } -const { name, active } = Astro.props +const { name } = Astro.props ---
    diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index 03a3a8825d..3868702381 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -99,7 +99,7 @@ The basic structure includes: The card item is the default item when the item components are used. -Its behavior change once used in a list. Most of the variants can be applied to this kind of item. It comes with a background and a divider by default. +Its behavior changes once used in a list. Most of the variants can be applied to this kind of item. It comes with a background and a divider by default. #### List item @@ -672,7 +672,7 @@ Here is a small resume of the slots that can be used in a static item: * [Trailing container](#trailing-container) using `.item-slot` (optional) * A slot outside of the `.item-main` container, direct child of `.item` using `.item-slot` (optional) -Optionally, if the item is and a slot is also interactive, you can add `.item-slot-clickable` to the slot. Please note that the slot won't be [rounded](#rounded-corners) anymore. +Optionally, if the item is a [navigation item](#navigation-item) and a slot is also interactive, you can add `.item-slot-clickable` to the slot. Please note that the slot won't be [rounded](#rounded-corners) anymore.
    @@ -882,10 +882,10 @@ Items can be disabled by using `.disabled` on the element `.item-wrapper` or any If the item is in a disabled context, the 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 and 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. +You may handle on your own the [slots](#slots) regarding accessibility and 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. + The images and videos inside the disabled static item will be grayed out using opacity. You'll still need to handle it correctly from an accessibility point of view. From 901e66fc64a4c5620e65edb32fb4cdce18a46755 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 10 Jul 2026 10:41:23 +0200 Subject: [PATCH 16/17] . --- .../snapshot-tests/__snapshots__/ouds-web-bootstrap.css | 6 ++---- scss/tests/snapshot-tests/__snapshots__/ouds-web.css | 6 ++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css index 5772abd6f3..76e757a66e 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css @@ -12592,10 +12592,8 @@ ol.bullet-list > li > ol > li > ol > li::before { min-height: 1.75rem; content: ""; background-color: var(--bs-list-item-disabled-icon-color, var(--bs-list-item-chevron-color, var(--bs-color-content-brand-primary))); - -webkit-mask-image: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")); - mask-image: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")); - -webkit-mask-position: center; - mask-position: center; + -webkit-mask: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")) center/contain no-repeat; + mask: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")) center/contain no-repeat; } .item-navigation.item-interactive:hover, .item-navigation:has(.item-interactive:hover) { --bs-list-item-chevron-color: var(--bs-color-action-hover); diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css index 11c5dc8ea9..ceb1663bb0 100644 --- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css +++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css @@ -10380,10 +10380,8 @@ ol.bullet-list > li > ol > li > ol > li::before { min-height: 1.75rem; content: ""; background-color: var(--bs-list-item-disabled-icon-color, var(--bs-list-item-chevron-color, var(--bs-color-content-brand-primary))); - -webkit-mask-image: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")); - mask-image: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")); - -webkit-mask-position: center; - mask-position: center; + -webkit-mask: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")) center/contain no-repeat; + mask: var(--bs-list-item-nav-icon, url("data:image/svg+xml,")) center/contain no-repeat; } .item-navigation.item-interactive:hover, .item-navigation:has(.item-interactive:hover) { --bs-list-item-chevron-color: var(--bs-color-action-hover); From 4c2ad891c64188316db6eb6d99ee5096d0c37f70 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Mon, 20 Jul 2026 16:15:55 +0200 Subject: [PATCH 17/17] feat: reorganize Overview to list every components of the group --- .../src/content/docs/components/list-item.mdx | 290 +++++++++++------- site/src/libs/toc.ts | 2 +- 2 files changed, 175 insertions(+), 117 deletions(-) diff --git a/site/src/content/docs/components/list-item.mdx b/site/src/content/docs/components/list-item.mdx index 3868702381..9e64a265bb 100644 --- a/site/src/content/docs/components/list-item.mdx +++ b/site/src/content/docs/components/list-item.mdx @@ -1,6 +1,6 @@ --- 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. +description: List items are flexible and powerful components for displaying a series of content. Modify and extend them to support just about any content within. aliases: - "/docs/components/item/" toc: true @@ -17,8 +17,8 @@ import { getVersionedDocsPath } from '@libs/path' ### Component types -
      -
    • +
        +
      • @@ -33,10 +33,10 @@ import { getVersionedDocsPath } from '@libs/path'
        -
        Static item is a UI element that displays a unit of information.
        +
        Static card item is a UI element that displays a unit of information.
    -
  • +
  • @@ -51,42 +51,89 @@ import { getVersionedDocsPath } from '@libs/path'
    -
    Navigation item is a UI element that displays a unit of information and allows users to navigate.
    +
    Navigation card item is a UI element that displays a unit of information and allows users to navigate.
    • - - -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

      +
      +
      +
      +
      • +
    • +
      +
      +
      +

      Label

      +
      +
      +
      +
      • +
    +
    Static list item is a UI element that displays a list of information.
    -
    • `} /> - - -
    -
    -
    - Label + +
  • +
    +
    +
    +
      +
    • +
      +
      +
      +

      Label

      +
      +
      +
      +
      • +
    • +
      +
      +
      +

      Label

      +
      +
      +
      +
      • +
    +
    Navigation list item is a UI element that displays a list of information and allows users to navigate.
    -
    • `} /> + + + +For each 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. ### Approach -There are 2 main categories inside the item group of components: -- The [card item](#card-item) is a single item that can be used as a standalone component. -- The [list item](#list-item) is designed to be used within a list, allowing multiple items to be displayed together. +There are 2 main categories inside the items group of components: +- [Card items](#card-items) are single items that can be used as standalone components. +- [List items](#list-items) are designed to be used within a list, allowing multiple items to be displayed together. -[Static items](#static-list-item) and [Navigation items](#navigation-list-item) can be used in both categories. +Inside these categories, there are 2 sub-categories: +- Navigation items, which allow navigation. +- Static items, which are not interactive. -Consider [Navigation items](#navigation-list-item) as an extension of [Static items](#static-list-item), with the added functionality of being able to navigate to different pages or sections within a multi-page interface. +The following table summarizes the different types of items and their categories. + + + | Categories | Card | List | + | -------------- | -------------------- | -------------------- | + | *Static* | Static card item | Static list item | + | *Navigation* | Navigation card item | Navigation list item | + The basic structure includes: * `.item-wrapper` as the outermost container, which is used to add additional styles or behavior. @@ -95,45 +142,83 @@ The basic structure includes: * `.item-text-container` as the container for the text content of the item. * `.item-interactive` as the class for interactive elements within the item, such as links or buttons. It's mandatory on the link for the [navigation item](#navigation-list-item). -#### Card item +### Accessibility -The card item is the default item when the item components are used. +TBD -Its behavior changes once used in a list. Most of the variants can be applied to this kind of item. It comes with a background and a divider by default. +## Card items -#### List item +Card items are self-contained UI elements that can be used to present a group of related content. They can be used independently or within a card-based layout. -The list item is designed to be used within a list, allowing multiple items [card items](#card-item) to be displayed together. By default, they have a divider but no background. They are surrounded by `.item-list` added to the `
      ` element. +### [[comp]] Static card item -Some variants shouldn't be applied to this kind of item. Warning will be done about it in: -- [Outlined](#outlined) variants - -- [Rounded](#rounded-corners) variant - +Static card item is a non-interactive UI element used to present a self-contained group or related content. +The card surface does not navigate, trigger an action or receive interactive state. When additional navigation is required, consider using a [navigation card item](#navigation-card-item) instead. -### Accessibility +All the available variants can be found in the [common variants](#common-variants). -## [[comp]] Static list item + +
      +
      +
      +

      Label

      +
      +
      +
      +
    `} /> -This is used to display a unit of information without any interaction. It can be used as a [standalone component](#card-item) or within a [list](#list-item). +### [[comp]] Navigation card item -Here is the base DOM and classes you should use for a static item. +A navigation card item is an interactive, self-contained card UI element that takes users to one internal or external destination. +Use it when navigational content requires stronger visual grouping or prominence than a standard [navigation list item](#navigation-list-item). -All the available variants can be found in the [common parts section](#common-parts). +The card may be displayed independently or within a card-based layout and may use a distinct background, outline or rounded corners. The entire card acts as a single navigation target and supports the required hover, focus and pressed states. Do not use a Navigation card item when the card must contain several destinations or independent interactive controls. - -
    +Add a `.item-navigation` on the `.item-wrapper` level and an `.item-interactive` at the link level to create a navigation card item. + +Available variants can be found in the [common variants section](#common-variants) and [navigation items variants section](#navigation-items-variants). + +
    -

    Label

    + Label
    -
    +
    `} /> - -
    `} /> + +## List items + +The list items are UI elements used inside structured lists. They are surrounded by `.item-list` added to the `
      ` element. + +Some variants shouldn't be applied to this kind of items. Warning will be done about it in: +- [Outlined](#outlined) variants + +- [Rounded](#rounded-corners) variant + + +### [[comp]] Static list item + +A static list item is a non-interactive horizontal row UI element used to present a unit of information within a structured list. +It supports quick scanning and comparison between related items and may include supporting text, leading or trailing content, and status information. It does not navigate, trigger an action, or receive interactive states. + +All the available variants can be found in the [common variants section](#common-variants). + +
    • @@ -154,27 +239,18 @@ All the available variants can be found in the [common parts section](#common-pa
    `} /> -## [[comp]] Navigation list item +### [[comp]] Navigation list item -This is used to display a unit of information and allow to navigate. It can be used as a [standalone component](#card-item) or within a [list](#list-item). +A navigation list item is an interactive horizontal row UI element that takes users to another internal or external destination +when activated. -Here is the base DOM and classes you should use for a navigation item. It needs an `.item-navigation` at the `.item-wrapper` level and an `.item-interactive` at the link level. +It is intended for structured lists where users need to scan and access related destinations quickly. The entire item acts as a single navigation target and supports the required hover, pressed and keyboard focus states. -All the available variants can be found in the [common parts section](#common-parts). +Add a `.item-navigation` on the `.item-wrapper` level and an `.item-interactive` at the link level. - -
    -
    -
    -
    - Label -
    -
    -
    -
    +Available variants can be found in the [common variants section](#common-variants) and [navigation items variants section](#navigation-items-variants). - -
      +
    • @@ -195,11 +271,11 @@ All the available variants can be found in the [common parts section](#common-pa
    `} /> -### Exclusive variants +## Navigation items variants -These variants are exclusive to the navigation item. They are used to indicate a specific type of navigation. +These variants are exclusive to the navigation items. They are used to indicate a specific type of navigation. The other common variants can be found in the [common variants section](#common-variants). -#### Back chevron +### Back chevron Add `.item-previous` to the `.item-navigation` to indicate that the item is a back navigation item. This will add a back chevron icon to the start of the item. @@ -213,7 +289,7 @@ Add `.item-previous` to the `.item-navigation` to indicate that the item is a ba
    `} /> -#### External link +### External link Add `.item-external` to the `.item-navigation` to indicate that the item is an external link. This will add an external link icon to the end of the item. @@ -227,36 +303,18 @@ Add `.item-external` to the `.item-navigation` to indicate that the item is an e
    `} /> -### Layout +## Common variants -#### Using `` around +These variants can be used in all types of items. -Optionally, the `` element can wrap the entire `.item` instead of just the label. - - - -
    -
    -

    Label

    -
    -
    -     -
    `} /> - -## Common parts - -These variants can be used in both [Static items](#static-list-item) and [Navigation items](#navigation-list-item) whether they are [Card items](#card-item) or [List items](#list-item). - -### Variants - -#### With asset +### With asset The main container `.item-main` of an 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](#texts) using `.item-text-container` (required) 3. [Trailing container](#trailing-container) using `.item-trailing-container` (optional) -##### Leading container +#### Leading container The leading container uses `.item-leading-container`. @@ -270,7 +328,7 @@ You can navigate through the different assets using the tabs below. - ###### Icon + ##### Icon Icons can be sized with `item-leading-large` (only if not [small item](#sizes)). @@ -306,7 +364,7 @@ You can navigate through the different assets using the tabs below. - ###### Image + ##### Image Images can be sized with `item-leading-large` (only if not [small item](#sizes)) or `item-leading-xlarge` (only if not [small item](#sizes)). @@ -329,7 +387,7 @@ You can navigate through the different assets using the tabs below. - ###### Video + ##### Video Videos can be sized with `item-leading-large` (only if not [small item](#sizes)) or `item-leading-xlarge` (only if not [small item](#sizes)). @@ -355,7 +413,7 @@ You can navigate through the different assets using the tabs below. - ###### Slot + ##### Slot The slot shouldn't be used in a [small list item](#sizes). @@ -380,7 +438,7 @@ You can navigate through the different assets using the tabs below. -##### Texts +#### Texts There are 4 text elements that are meant to be used in the `.item-text-container`. @@ -448,7 +506,7 @@ Optionally, a slot can be added at the end of the text container using `.item-sl
    `} /> -##### Trailing container +#### Trailing container The trailing container uses `.item-trailing-container`. @@ -460,7 +518,7 @@ Here is a list of the different assets that we support in the trailing container - ###### Text + ##### Text Text should use `.item-label`. Optionally you can use it with either `.item-extra-label` (only if not [small item](#sizes)), `.text-muted`, or `.fw-bold`. @@ -506,7 +564,7 @@ Here is a list of the different assets that we support in the trailing container - ###### Badge + ##### Badge All variants of [Badge]([[docsref:/components/badge#badge]]) and [Badge - count]([[docsref:/components/badge#badge---count]]) are allowed. @@ -537,7 +595,7 @@ Here is a list of the different assets that we support in the trailing container
    `} /> - ###### Tag + ##### Tag All variants of [tags]([[docsref:/components/tag#tag]]) are allowed. @@ -590,7 +648,7 @@ Here is a list of the different assets that we support in the trailing container
    `} /> - ###### Image + ##### Image Images can be sized with `item-trailing-large` (only if not [small item](#sizes)) or `item-trailing-xlarge` (only if not [small item](#sizes)). @@ -612,7 +670,7 @@ Here is a list of the different assets that we support in the trailing container
    `} /> - ###### Video + ##### Video Videos can be sized with `item-trailing-large` (only if not [small item](#sizes)) or `item-trailing-xlarge` (only if not [small item](#sizes)). @@ -637,7 +695,7 @@ Here is a list of the different assets that we support in the trailing container
    `} /> - ###### Slot + ##### Slot To add a slot, `item-slot` must be combined with `.item-trailing-container`. @@ -658,7 +716,7 @@ Here is a list of the different assets that we support in the trailing container -##### Slots +#### Slots This component contains many slots that can be used to add custom content. The main slots are located in the [leading container](#leading-container), the [text container](#texts), and the [trailing container](#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 `.item-main` container as well. @@ -694,7 +752,7 @@ Optionally, if the item is a [navigation item](#navigation-item) and a slot is a
    `} /> -#### Helper text +### Helper text Optionally, a helper text can be added below the main `.item` container using `.item-helper`. @@ -709,7 +767,7 @@ Optionally, a helper text can be added below the main `.item` container using `.

    Helper text

    `} /> -#### Background +### Background By default, [card items](#card-item) have a background-color, while [list items](#list-item) don't. This behavior can be modified by using `.item-no-bg` or `.item-bg` on the `.item-wrapper` or `.item-list` container. These modifiers only modify the no interaction background of the items. @@ -746,7 +804,7 @@ By default, [card items](#card-item) have a background-color, while [list items] `} /> -#### Divider +### Divider You can remove the divider by using `.item-no-divider` on the `.item-wrapper` or `.item-list`. @@ -783,7 +841,7 @@ You can remove the divider by using `.item-no-divider` on the `.item-wrapper` or `} /> -#### Outlined +### Outlined @@ -822,7 +880,7 @@ By default every item comes with a divider. The divider may be removed or transf
    `} /> -#### Rounded corners +### 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. @@ -874,9 +932,9 @@ Rounded corners items is a project-wide option therefore all your items should e
    `} /> -### States +## States -#### Disabled +### Disabled Items can be disabled by using `.disabled` on the element `.item-wrapper` or any ancestors. The disabled style is also applied to all interactive elements inside the item. @@ -925,7 +983,7 @@ You may handle on your own the [slots](#slots) regarding accessibility and desig
    `} /> -#### Skeleton +### Skeleton @@ -941,7 +999,7 @@ You may handle on your own the [slots](#slots) regarding accessibility and desig
    `} /> -### Sizes +## Sizes By default every item comes with a default size. The size can be adapted using `.item-small` on the element `.item-wrapper` or `.item-list`. @@ -986,9 +1044,9 @@ By default every item comes with a default size. The size can be adapted using ` `} /> -### Layout +## Layout -#### Alignment +### Alignment By default all items are vertically centered. You can change the alignment of the content using `.item-top` by setting it on the `.item-wrapper` or `.item-list`. @@ -1023,7 +1081,7 @@ By default all items are vertically centered. You can change the alignment of th
    `} /> -#### Max width +### Max width By default, items will span the whole width of their parent container, to limit the width of the item on wider parent container, add a `.component-max-width` to the `.item-wrapper` or `.item-list` container. diff --git a/site/src/libs/toc.ts b/site/src/libs/toc.ts index 4e840389a3..1816a113cc 100644 --- a/site/src/libs/toc.ts +++ b/site/src/libs/toc.ts @@ -16,7 +16,7 @@ export function generateToc(allHeadings: MarkdownHeading[], types?: string[]) { continue } - if (hasComponentTypes && heading.depth === 2 && types?.includes(heading.text)) { + if (hasComponentTypes && types?.includes(heading.text)) { heading.text = `[[comp]] ${heading.text}` }