@ouds/web-orange-compact 1.1.0

package/scss/tokens/_component.scss

@@ -0,0 +1,459 @@
+// Component application
+// Depends on semantic applications
+// OUDS Core tokens version 1.9.0
+// Orange Compact Core tokens version 1.2.0
+// Orange Compact System tokens version 2.3.0
+
+// Alert
+
+// scss-docs-start ouds-component-alert
+$ouds-alert-border-radius-default: $ouds-border-radius-default !default;
+$ouds-alert-border-radius-rounded: $ouds-border-radius-large !default;
+$ouds-alert-border-width: $ouds-border-width-none !default;
+$ouds-alert-size-icon: $ouds-size-icon-with-label-large-size-small !default;
+$ouds-alert-size-min-height-bottom-action-placement: $core-ouds-dimension-1050 !default;
+$ouds-alert-size-min-height: $ouds-size-min-interactive-area !default;
+$ouds-alert-size-min-width: $core-ouds-dimension-1800 !default;
+$ouds-alert-space-column-gap-action: $ouds-space-column-gap-small !default;
+$ouds-alert-space-column-gap: $ouds-space-column-gap-medium !default;
+$ouds-alert-space-padding-block: $ouds-space-padding-block-medium !default;
+$ouds-alert-space-padding-inline: $ouds-space-padding-inline-large !default;
+$ouds-alert-space-row-gap-action: $ouds-space-row-gap-2xsmall !default;
+$ouds-alert-space-row-gap-bullet: $ouds-space-row-gap-2xsmall !default;
+$ouds-alert-space-row-gap: $ouds-space-row-gap-small !default;
+// scss-docs-end ouds-component-alert
+
+// Badge
+
+// scss-docs-start ouds-component-badge
+$ouds-badge-size-large: $ouds-dimension-3xsmall !default;
+$ouds-badge-size-medium: $ouds-dimension-4xsmall !default;
+$ouds-badge-size-small: $ouds-dimension-5xsmall !default;
+$ouds-badge-size-xsmall: $ouds-dimension-8xsmall !default;
+$ouds-badge-space-inset: $core-ouds-dimension-out-of-system-75 !default;
+$ouds-badge-space-padding-inline-large: $ouds-space-padding-inline-2xsmall !default;
+$ouds-badge-space-padding-inline-medium: $ouds-space-padding-inline-3xsmall !default;
+// scss-docs-end ouds-component-badge
+
+// Breadcrumb
+
+// scss-docs-start ouds-component-breadcrumb
+$ouds-breadcrumb-size-icon: $ouds-size-icon-with-label-medium-size-small !default;
+$ouds-breadcrumb-space-column-gap-links: $ouds-space-column-gap-2xsmall !default;
+// scss-docs-end ouds-component-breadcrumb
+
+// Bullet
+
+// scss-docs-start ouds-component-bullet
+$ouds-bullet-list-space-column-gap-body-large: $ouds-space-column-gap-small !default;
+$ouds-bullet-list-space-column-gap-body-medium: $ouds-space-column-gap-small !default;
+$ouds-bullet-list-space-padding-block-body-large: $ouds-space-padding-block-2xsmall !default;
+$ouds-bullet-list-space-padding-block-body-medium: $ouds-space-padding-block-2xsmall !default;
+$ouds-bullet-list-space-padding-inline-level-0: $core-ouds-dimension-50 !default;
+$ouds-bullet-list-space-padding-inline-level-1: $core-ouds-dimension-450 !default;
+$ouds-bullet-list-space-padding-inline-level-2: $core-ouds-dimension-850 !default;
+// scss-docs-end ouds-component-bullet
+
+// Button
+
+// scss-docs-start ouds-component-button
+$ouds-button-border-radius-default: $ouds-border-radius-default !default;
+$ouds-button-border-radius-rounded: $ouds-border-radius-medium !default;
+$ouds-button-border-radius-social: $ouds-border-radius-pill !default;
+$ouds-button-border-width-default-interaction-mono: $ouds-border-width-none !default;
+$ouds-button-border-width-default-interaction: $ouds-border-width-medium !default;
+$ouds-button-border-width-default: $ouds-border-width-default !default;
+$ouds-button-color-bg-brand-enabled: $ouds-color-surface-brand-primary !default;
+$ouds-button-color-bg-brand-focus: $ouds-color-action-focus !default;
+$ouds-button-color-bg-brand-hover: $ouds-color-action-hover !default;
+$ouds-button-color-bg-brand-loading: var(--#{$prefix}button-color-bg-brand-loading) !default;
+$ouds-button-color-bg-brand-pressed: var(--#{$prefix}button-color-bg-brand-pressed) !default;
+$ouds-button-color-bg-default-disabled: $ouds-color-opacity-transparent !default;
+$ouds-button-color-bg-default-enabled: $ouds-color-opacity-transparent !default;
+$ouds-button-color-bg-default-focus: $ouds-color-opacity-transparent !default;
+$ouds-button-color-bg-default-hover: $ouds-color-opacity-transparent !default;
+$ouds-button-color-bg-default-loading: $ouds-color-opacity-transparent !default;
+$ouds-button-color-bg-default-pressed: $ouds-color-opacity-transparent !default;
+$ouds-button-color-bg-minimal-focus: $ouds-color-action-support-focus !default;
+$ouds-button-color-bg-minimal-hover: $ouds-color-action-support-hover !default;
+$ouds-button-color-bg-minimal-pressed: $ouds-color-action-support-pressed !default;
+$ouds-button-color-border-default-disabled: $ouds-color-action-disabled !default;
+$ouds-button-color-border-default-enabled: $ouds-color-action-enabled !default;
+$ouds-button-color-border-default-focus: $ouds-color-action-focus !default;
+$ouds-button-color-border-default-hover: $ouds-color-action-hover !default;
+$ouds-button-color-border-default-loading: $ouds-color-action-loading !default;
+$ouds-button-color-border-default-pressed: $ouds-color-action-pressed !default;
+$ouds-button-color-content-brand-enabled: $ouds-color-content-on-brand-primary !default;
+$ouds-button-color-content-brand-focus: $ouds-color-content-on-action-focus !default;
+$ouds-button-color-content-brand-hover: $ouds-color-content-on-action-hover !default;
+$ouds-button-color-content-brand-loading: var(--#{$prefix}button-color-content-brand-loading) !default;
+$ouds-button-color-content-brand-pressed: var(--#{$prefix}button-color-content-brand-pressed) !default;
+$ouds-button-color-content-default-disabled: $ouds-color-action-disabled !default;
+$ouds-button-color-content-default-enabled: $ouds-color-action-enabled !default;
+$ouds-button-color-content-default-focus: $ouds-color-action-focus !default;
+$ouds-button-color-content-default-hover: $ouds-color-action-hover !default;
+$ouds-button-color-content-default-loading: $ouds-color-action-loading !default;
+$ouds-button-color-content-default-pressed: $ouds-color-action-pressed !default;
+$ouds-button-color-content-minimal-disabled: $ouds-color-action-disabled !default;
+$ouds-button-color-content-minimal-enabled: $ouds-color-action-enabled !default;
+$ouds-button-color-content-minimal-focus: $ouds-color-action-focus !default;
+$ouds-button-color-content-minimal-hover: $ouds-color-action-hover !default;
+$ouds-button-color-content-minimal-loading: $ouds-color-content-default !default;
+$ouds-button-color-content-minimal-pressed: $ouds-color-action-pressed !default;
+$ouds-button-mono-color-bg-default-disabled: $ouds-color-opacity-transparent !default;
+$ouds-button-mono-color-bg-default-enabled: $ouds-color-opacity-transparent !default;
+$ouds-button-mono-color-bg-default-focus: var(--#{$prefix}button-mono-color-bg-default-focus) !default;
+$ouds-button-mono-color-bg-default-hover: var(--#{$prefix}button-mono-color-bg-default-hover) !default;
+$ouds-button-mono-color-bg-default-loading: var(--#{$prefix}button-mono-color-bg-default-loading) !default;
+$ouds-button-mono-color-bg-default-pressed: var(--#{$prefix}button-mono-color-bg-default-pressed) !default;
+$ouds-button-mono-color-bg-minimal-focus: var(--#{$prefix}button-mono-color-bg-minimal-focus) !default;
+$ouds-button-mono-color-bg-minimal-hover: var(--#{$prefix}button-mono-color-bg-minimal-hover) !default;
+$ouds-button-mono-color-bg-minimal-pressed: var(--#{$prefix}button-mono-color-bg-minimal-pressed) !default;
+$ouds-button-mono-color-bg-strong-disabled: var(--#{$prefix}button-mono-color-bg-strong-disabled) !default;
+$ouds-button-mono-color-bg-strong-enabled: var(--#{$prefix}button-mono-color-bg-strong-enabled) !default;
+$ouds-button-mono-color-bg-strong-focus: var(--#{$prefix}button-mono-color-bg-strong-focus) !default;
+$ouds-button-mono-color-bg-strong-hover: var(--#{$prefix}button-mono-color-bg-strong-hover) !default;
+$ouds-button-mono-color-bg-strong-loading: var(--#{$prefix}button-mono-color-bg-strong-loading) !default;
+$ouds-button-mono-color-bg-strong-pressed: var(--#{$prefix}button-mono-color-bg-strong-pressed) !default;
+$ouds-button-mono-color-border-default-disabled: var(--#{$prefix}button-mono-color-border-default-disabled) !default;
+$ouds-button-mono-color-border-default-enabled: var(--#{$prefix}button-mono-color-border-default-enabled) !default;
+$ouds-button-mono-color-border-default-focus: $ouds-color-opacity-transparent !default;
+$ouds-button-mono-color-border-default-hover: $ouds-color-opacity-transparent !default;
+$ouds-button-mono-color-border-default-loading: $ouds-color-opacity-transparent !default;
+$ouds-button-mono-color-border-default-pressed: $ouds-color-opacity-transparent !default;
+$ouds-button-mono-color-content-default-disabled: var(--#{$prefix}button-mono-color-content-default-disabled) !default;
+$ouds-button-mono-color-content-default-enabled: var(--#{$prefix}button-mono-color-content-default-enabled) !default;
+$ouds-button-mono-color-content-default-focus: var(--#{$prefix}button-mono-color-content-default-focus) !default;
+$ouds-button-mono-color-content-default-hover: var(--#{$prefix}button-mono-color-content-default-hover) !default;
+$ouds-button-mono-color-content-default-loading: var(--#{$prefix}button-mono-color-content-default-loading) !default;
+$ouds-button-mono-color-content-default-pressed: var(--#{$prefix}button-mono-color-content-default-pressed) !default;
+$ouds-button-mono-color-content-minimal-disabled: var(--#{$prefix}button-mono-color-content-minimal-disabled) !default;
+$ouds-button-mono-color-content-minimal-enabled: var(--#{$prefix}button-mono-color-content-minimal-enabled) !default;
+$ouds-button-mono-color-content-minimal-focus: var(--#{$prefix}button-mono-color-content-minimal-focus) !default;
+$ouds-button-mono-color-content-minimal-hover: var(--#{$prefix}button-mono-color-content-minimal-hover) !default;
+$ouds-button-mono-color-content-minimal-loading: var(--#{$prefix}button-mono-color-content-minimal-loading) !default;
+$ouds-button-mono-color-content-minimal-pressed: var(--#{$prefix}button-mono-color-content-minimal-pressed) !default;
+$ouds-button-mono-color-content-strong-disabled: var(--#{$prefix}button-mono-color-content-strong-disabled) !default;
+$ouds-button-mono-color-content-strong-enabled: var(--#{$prefix}button-mono-color-content-strong-enabled) !default;
+$ouds-button-mono-color-content-strong-focus: var(--#{$prefix}button-mono-color-content-strong-focus) !default;
+$ouds-button-mono-color-content-strong-hover: var(--#{$prefix}button-mono-color-content-strong-hover) !default;
+$ouds-button-mono-color-content-strong-loading: var(--#{$prefix}button-mono-color-content-strong-loading) !default;
+$ouds-button-mono-color-content-strong-pressed: var(--#{$prefix}button-mono-color-content-strong-pressed) !default;
+$ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-small !default;
+$ouds-button-size-icon: $ouds-size-icon-with-label-large-size-xsmall !default;
+$ouds-button-size-loader: $ouds-size-icon-with-label-large-size-xsmall !default;
+$ouds-button-size-max-height-icon-only: $ouds-size-min-interactive-area !default;
+$ouds-button-size-min-height: $ouds-size-min-interactive-area !default;
+$ouds-button-size-min-width: $ouds-size-min-interactive-area !default;
+$ouds-button-space-column-gap-chevron: $ouds-space-column-gap-xsmall !default;
+$ouds-button-space-column-gap-icon-chevron: $ouds-space-column-gap-2xsmall !default;
+$ouds-button-space-column-gap-icon: $ouds-space-column-gap-small !default;
+$ouds-button-space-inset-icon-only: $ouds-space-inset-medium !default;
+$ouds-button-space-padding-block: $ouds-space-padding-block-medium !default;
+$ouds-button-space-padding-inline-chevron-end: $ouds-space-padding-inline-large !default;
+$ouds-button-space-padding-inline-chevron-start: $ouds-space-padding-inline-large !default;
+$ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-3xlarge !default;
+$ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-4xlarge !default;
+$ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-xlarge !default;
+$ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-3xlarge !default;
+// scss-docs-end ouds-component-button
+
+// Checkbox
+
+// scss-docs-start ouds-component-checkbox
+$ouds-checkbox-border-radius: $ouds-border-radius-default !default;
+$ouds-checkbox-border-width-selected-focus: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-selected-hover: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-selected-pressed: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-selected: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-unselected-focus: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-unselected-hover: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-unselected-pressed: $ouds-border-width-medium !default;
+$ouds-checkbox-border-width-unselected: $ouds-border-width-thin !default;
+$ouds-checkbox-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default;
+$ouds-checkbox-size-max-height: $ouds-size-min-interactive-area !default;
+$ouds-checkbox-size-min-height: $ouds-size-min-interactive-area !default;
+$ouds-checkbox-size-min-width: $ouds-size-min-interactive-area !default;
+// scss-docs-end ouds-component-checkbox
+
+// Chip
+
+// scss-docs-start ouds-component-chip
+$ouds-chip-badge-color-bg: $ouds-color-surface-inverse-high !default;
+$ouds-chip-badge-color-content: $ouds-color-content-inverse !default;
+$ouds-chip-border-radius: $ouds-border-radius-pill !default;
+$ouds-chip-border-width-selected: $ouds-border-width-medium !default;
+$ouds-chip-border-width-unselected-interaction: $ouds-border-width-medium !default;
+$ouds-chip-border-width-unselected: $ouds-border-width-default !default;
+$ouds-chip-color-bg-selected-disabled: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-selected-enabled: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-selected-focus: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-selected-hover: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-selected-pressed: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-unselected-disabled: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-unselected-enabled: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-unselected-focus: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-unselected-hover: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-bg-unselected-pressed: $ouds-color-opacity-transparent !default;
+$ouds-chip-color-border-selected-disabled: $ouds-color-action-disabled !default;
+$ouds-chip-color-border-selected-enabled: $ouds-color-action-selected !default;
+$ouds-chip-color-border-selected-focus: $ouds-color-action-focus !default;
+$ouds-chip-color-border-selected-hover: $ouds-color-action-hover !default;
+$ouds-chip-color-border-selected-pressed: $ouds-color-action-pressed !default;
+$ouds-chip-color-border-unselected-disabled: $ouds-color-action-disabled !default;
+$ouds-chip-color-border-unselected-enabled: $ouds-color-border-default !default;
+$ouds-chip-color-border-unselected-focus: $ouds-color-action-focus !default;
+$ouds-chip-color-border-unselected-hover: $ouds-color-action-hover !default;
+$ouds-chip-color-border-unselected-pressed: $ouds-color-action-pressed !default;
+$ouds-chip-color-content-selected-disabled: $ouds-color-action-disabled !default;
+$ouds-chip-color-content-selected-enabled: $ouds-color-action-enabled !default;
+$ouds-chip-color-content-selected-focus: $ouds-color-action-focus !default;
+$ouds-chip-color-content-selected-hover: $ouds-color-action-hover !default;
+$ouds-chip-color-content-selected-pressed: $ouds-color-action-pressed !default;
+$ouds-chip-color-content-selected-tick-enabled: $ouds-color-action-selected !default;
+$ouds-chip-color-content-unselected-disabled: $ouds-color-action-disabled !default;
+$ouds-chip-color-content-unselected-enabled: $ouds-color-action-enabled !default;
+$ouds-chip-color-content-unselected-focus: $ouds-color-action-focus !default;
+$ouds-chip-color-content-unselected-hover: $ouds-color-action-hover !default;
+$ouds-chip-color-content-unselected-pressed: $ouds-color-action-pressed !default;
+$ouds-chip-size-icon: $ouds-size-icon-with-label-medium-size-small !default;
+$ouds-chip-size-min-height-interactive-area: $ouds-size-min-interactive-area !default;
+$ouds-chip-size-min-height: $ouds-dimension-xsmall !default;
+$ouds-chip-size-min-width: $ouds-dimension-2xlarge !default;
+$ouds-chip-space-column-gap-badge-chevron: $ouds-space-column-gap-2xsmall !default;
+$ouds-chip-space-column-gap-icon: $ouds-space-column-gap-xsmall !default;
+$ouds-chip-space-padding-block-icon-only: $ouds-space-padding-block-xsmall !default;
+$ouds-chip-space-padding-block: $ouds-space-padding-block-2xsmall !default;
+$ouds-chip-space-padding-inline-badge-start: $ouds-space-padding-inline-4xsmall !default;
+$ouds-chip-space-padding-inline-chevron-end: $ouds-space-padding-inline-2xsmall !default;
+$ouds-chip-space-padding-inline-icon-none: $ouds-space-padding-inline-large !default;
+$ouds-chip-space-padding-inline-icon: $ouds-space-padding-inline-small !default;
+// scss-docs-end ouds-component-chip
+
+// Control
+
+// scss-docs-start ouds-component-control
+$ouds-control-item-border-radius-item-only: $ouds-border-radius-default !default;
+$ouds-control-item-border-radius: $ouds-border-radius-none !default;
+$ouds-control-item-color-bg-focus: $ouds-color-action-support-focus !default;
+$ouds-control-item-color-bg-hover: $ouds-color-action-support-hover !default;
+$ouds-control-item-color-bg-loading: $ouds-color-action-support-loading !default;
+$ouds-control-item-color-bg-pressed: $ouds-color-action-support-pressed !default;
+$ouds-control-item-color-content-loader: $ouds-color-content-default !default;
+$ouds-control-item-size-error-icon: $ouds-size-icon-with-label-large-size-small !default;
+$ouds-control-item-size-icon: $ouds-size-icon-with-label-large-size-medium !default;
+$ouds-control-item-size-loader: $ouds-size-icon-with-label-large-size-small !default;
+$ouds-control-item-size-max-height-assets-container: $core-ouds-dimension-1000 !default;
+$ouds-control-item-size-max-width: $core-ouds-dimension-4000 !default;
+$ouds-control-item-size-min-height: $core-ouds-dimension-500 !default;
+$ouds-control-item-size-min-width: $core-ouds-dimension-1800 !default;
+$ouds-control-item-space-column-gap: $ouds-space-column-gap-medium !default;
+$ouds-control-item-space-padding-block-default: $ouds-space-padding-block-medium !default;
+$ouds-control-item-space-padding-block-top-error-text: $ouds-space-padding-block-xsmall !default;
+$ouds-control-item-space-padding-inline-error-icon: $ouds-space-padding-inline-4xsmall !default;
+$ouds-control-item-space-padding-inline: $ouds-space-padding-inline-large !default;
+$ouds-control-item-space-row-gap: $ouds-space-row-gap-none !default;
+// scss-docs-end ouds-component-control
+
+// Divider
+
+// scss-docs-start ouds-component-divider
+$ouds-divider-border-width: $ouds-border-width-thin !default;
+// scss-docs-end ouds-component-divider
+
+// Expand
+
+// scss-docs-start ouds-component-expand
+$ouds-expand-link-icon-end: true !default;
+$ouds-expand-link-icon-start: false !default;
+// scss-docs-end ouds-component-expand
+
+// Input
+
+// scss-docs-start ouds-component-input
+$ouds-input-tag-border-width-default-interaction: $ouds-border-width-medium !default;
+$ouds-input-tag-border-width-default: $ouds-border-width-default !default;
+$ouds-input-tag-color-bg-enabled: $ouds-color-action-support-enabled !default;
+$ouds-input-tag-color-bg-focus: $ouds-color-action-support-focus !default;
+$ouds-input-tag-color-bg-hover: $ouds-color-action-support-hover !default;
+$ouds-input-tag-color-bg-pressed: $ouds-color-action-support-pressed !default;
+$ouds-input-tag-color-border-enabled: $ouds-color-border-default !default;
+$ouds-input-tag-color-border-focus: $ouds-color-action-focus !default;
+$ouds-input-tag-color-border-hover: $ouds-color-action-hover !default;
+$ouds-input-tag-color-border-pressed: $ouds-color-action-pressed !default;
+$ouds-input-tag-color-content-enabled: $ouds-color-action-enabled !default;
+$ouds-input-tag-color-content-focus: $ouds-color-action-focus !default;
+$ouds-input-tag-color-content-hover: $ouds-color-action-hover !default;
+$ouds-input-tag-color-content-pressed: $ouds-color-action-pressed !default;
+// scss-docs-end ouds-component-input
+
+// Link
+
+// scss-docs-start ouds-component-link
+$ouds-link-color-chevron-enabled: $ouds-color-content-brand-primary !default;
+$ouds-link-color-chevron-focus: $ouds-color-content-brand-primary !default;
+$ouds-link-color-chevron-hover: $ouds-color-content-brand-primary !default;
+$ouds-link-color-chevron-pressed: $ouds-color-content-brand-primary !default;
+$ouds-link-color-content-enabled: $ouds-color-action-enabled !default;
+$ouds-link-color-content-focus: $ouds-color-action-focus !default;
+$ouds-link-color-content-hover: $ouds-color-action-hover !default;
+$ouds-link-color-content-pressed: $ouds-color-action-pressed !default;
+$ouds-link-mono-color-content-disabled: var(--#{$prefix}link-mono-color-content-disabled) !default;
+$ouds-link-mono-color-content-enabled: var(--#{$prefix}link-mono-color-content-enabled) !default;
+$ouds-link-mono-color-content-focus: var(--#{$prefix}link-mono-color-content-focus) !default;
+$ouds-link-mono-color-content-hover: var(--#{$prefix}link-mono-color-content-hover) !default;
+$ouds-link-mono-color-content-pressed: var(--#{$prefix}link-mono-color-content-pressed) !default;
+$ouds-link-size-icon-default: $ouds-size-icon-with-label-large-size-xsmall !default;
+$ouds-link-size-icon-small: $ouds-size-icon-with-label-medium-size-small !default;
+$ouds-link-size-min-height-default: $ouds-size-min-interactive-area !default;
+$ouds-link-size-min-height-small: $core-ouds-dimension-450 !default;
+$ouds-link-size-min-width-default: $ouds-size-min-interactive-area !default;
+$ouds-link-size-min-width-small: $core-ouds-dimension-450 !default;
+$ouds-link-space-column-gap-chevron-default: $ouds-space-column-gap-2xsmall !default;
+$ouds-link-space-column-gap-chevron-small: $ouds-space-column-gap-2xsmall !default;
+$ouds-link-space-column-gap-icon-default: $ouds-space-column-gap-xsmall !default;
+$ouds-link-space-column-gap-icon-small: $ouds-space-column-gap-xsmall !default;
+$ouds-link-space-padding-block: $ouds-space-padding-block-medium !default;
+$ouds-link-space-padding-inline: $ouds-space-padding-inline-none !default;
+// scss-docs-end ouds-component-link
+
+// Pin
+
+// scss-docs-start ouds-component-pin
+$ouds-pin-code-input-size-max-width: $ouds-dimension-3xlarge !default;
+$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
+
+// Quantity
+
+// scss-docs-start ouds-component-quantity
+$ouds-quantity-input-size-max-width: $core-ouds-dimension-3000 !default;
+$ouds-quantity-input-size-min-width: $core-ouds-dimension-2225 !default;
+$ouds-quantity-input-space-column-gap-default: $ouds-space-column-gap-xsmall !default;
+$ouds-quantity-input-space-column-gap-leading-icon: $ouds-space-column-gap-medium !default;
+$ouds-quantity-input-space-column-gap-quantity-selector: $core-ouds-dimension-out-of-system-25 !default;
+// scss-docs-end ouds-component-quantity
+
+// Radio
+
+// scss-docs-start ouds-component-radio
+$ouds-radio-button-border-radius: $ouds-border-radius-pill !default;
+$ouds-radio-button-border-width-selected-focus: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-selected-hover: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-selected-pressed: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-selected: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-unselected-focus: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-unselected-hover: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-unselected-pressed: $ouds-border-width-medium !default;
+$ouds-radio-button-border-width-unselected: $ouds-border-width-thin !default;
+$ouds-radio-button-size-indicator: $ouds-size-icon-with-label-large-size-xsmall !default;
+$ouds-radio-button-size-max-height: $ouds-size-min-interactive-area !default;
+$ouds-radio-button-size-min-height: $ouds-size-min-interactive-area !default;
+$ouds-radio-button-size-min-width: $ouds-size-min-interactive-area !default;
+// scss-docs-end ouds-component-radio
+
+// Select
+
+// scss-docs-start ouds-component-select
+$ouds-select-input-size-min-width: $ouds-dimension-8xlarge !default;
+// scss-docs-end ouds-component-select
+
+// Skeleton
+
+// scss-docs-start ouds-component-skeleton
+$ouds-skeleton-color-bg: $ouds-color-opacity-lowest !default;
+$ouds-skeleton-color-gradient-middle: $ouds-color-opacity-lower !default;
+$ouds-skeleton-color-gradient-start-end: $ouds-color-opacity-transparent !default;
+// scss-docs-end ouds-component-skeleton
+
+// Switch
+
+// scss-docs-start ouds-component-switch
+$ouds-switch-border-radius-cursor: $ouds-border-radius-pill !default;
+$ouds-switch-border-radius-track: $ouds-border-radius-pill !default;
+$ouds-switch-color-check-interaction: $ouds-color-content-default !default;
+$ouds-switch-color-check: $ouds-color-content-default !default;
+$ouds-switch-color-cursor: var(--#{$prefix}switch-color-cursor) !default;
+$ouds-switch-color-track-selected-interaction: var(--#{$prefix}switch-color-track-selected-interaction) !default;
+$ouds-switch-color-track-selected: var(--#{$prefix}switch-color-track-selected) !default;
+$ouds-switch-color-track-unselected-interaction: var(--#{$prefix}switch-color-track-unselected-interaction) !default;
+$ouds-switch-color-track-unselected: var(--#{$prefix}switch-color-track-unselected) !default;
+$ouds-switch-opacity-check: $ouds-opacity-opaque !default;
+$ouds-switch-size-height-cursor-selected: $ouds-dimension-3xsmall !default;
+$ouds-switch-size-height-cursor-unselected: $ouds-dimension-5xsmall !default;
+$ouds-switch-size-height-track: $ouds-dimension-xsmall !default;
+$ouds-switch-size-max-height: $ouds-dimension-xsmall !default;
+$ouds-switch-size-min-height-interactive-area: $ouds-size-min-interactive-area !default;
+$ouds-switch-size-min-height: $ouds-dimension-xsmall !default;
+$ouds-switch-size-min-width: $ouds-dimension-2xlarge !default;
+$ouds-switch-size-width-cursor-selected-pressed: $ouds-dimension-xsmall !default;
+$ouds-switch-size-width-cursor-selected: $ouds-dimension-3xsmall !default;
+$ouds-switch-size-width-cursor-unselected-pressed: $ouds-dimension-3xsmall !default;
+$ouds-switch-size-width-cursor-unselected: $ouds-dimension-5xsmall !default;
+$ouds-switch-size-width-track: $ouds-dimension-2xlarge !default;
+$ouds-switch-space-padding-inline-selected: $ouds-space-padding-inline-3xsmall !default;
+$ouds-switch-space-padding-inline-unselected: $ouds-space-padding-inline-xsmall !default;
+// scss-docs-end ouds-component-switch
+
+// Tag
+
+// scss-docs-start ouds-component-tag
+$ouds-tag-border-radius: $ouds-border-radius-pill !default;
+$ouds-tag-size-asset-default: $ouds-size-icon-with-label-medium-size-small !default;
+$ouds-tag-size-asset-small: $ouds-size-icon-with-label-small-size-small !default;
+$ouds-tag-size-min-height-default: $ouds-dimension-xsmall !default;
+$ouds-tag-size-min-height-interactive-area: $ouds-size-min-interactive-area !default;
+$ouds-tag-size-min-height-small: $ouds-dimension-3xsmall !default;
+$ouds-tag-size-min-width-default: $ouds-dimension-xlarge !default;
+$ouds-tag-size-min-width-small: $ouds-dimension-large !default;
+$ouds-tag-space-column-gap-default: $ouds-space-column-gap-2xsmall !default;
+$ouds-tag-space-column-gap-small: $ouds-space-column-gap-2xsmall !default;
+$ouds-tag-space-inset-bullet-default: $core-ouds-dimension-out-of-system-75 !default;
+$ouds-tag-space-inset-bullet-small: $ouds-space-inset-3xsmall !default;
+$ouds-tag-space-inset-icon-default: $ouds-space-inset-4xsmall !default;
+$ouds-tag-space-inset-icon-small: $ouds-space-inset-none !default;
+$ouds-tag-space-inset-loader-default: $ouds-space-inset-3xsmall !default;
+$ouds-tag-space-inset-loader-small: $ouds-space-inset-4xsmall !default;
+$ouds-tag-space-padding-block-default: $ouds-space-padding-block-2xsmall !default;
+$ouds-tag-space-padding-block-small: $ouds-space-padding-block-3xsmall !default;
+$ouds-tag-space-padding-inline-asset-default: $ouds-space-padding-inline-2xsmall !default;
+$ouds-tag-space-padding-inline-asset-small: $ouds-space-padding-inline-2xsmall !default;
+$ouds-tag-space-padding-inline-default: $ouds-space-padding-inline-medium !default;
+$ouds-tag-space-padding-inline-small: $ouds-space-padding-inline-small !default;
+// scss-docs-end ouds-component-tag
+
+// Text
+
+// scss-docs-start ouds-component-text
+$ouds-text-area-size-max-height-assets-container: $core-ouds-dimension-950 !default;
+$ouds-text-area-size-max-height-input: $core-ouds-dimension-2500 !default;
+$ouds-text-area-size-max-width: $core-ouds-dimension-6000 !default;
+$ouds-text-area-size-min-height-input: $core-ouds-dimension-750 !default;
+$ouds-text-area-space-padding-block: $ouds-space-padding-block-small !default;
+$ouds-text-input-border-radius-default: $ouds-border-radius-default !default;
+$ouds-text-input-border-radius-rounded: $ouds-border-radius-small !default;
+$ouds-text-input-border-width-default: $ouds-border-width-default !default;
+$ouds-text-input-border-width-focus: $ouds-border-width-medium !default;
+$ouds-text-input-color-border-enabled: $ouds-color-border-default !default;
+$ouds-text-input-color-border-focus: $ouds-color-border-emphasized !default;
+$ouds-text-input-color-border-hover: $ouds-color-action-hover !default;
+$ouds-text-input-color-border-loading: $ouds-color-border-emphasized !default;
+$ouds-text-input-size-country-selector-flag-height: $ouds-size-icon-with-label-large-size-xsmall !default;
+$ouds-text-input-size-label-max-height: $core-ouds-dimension-500 !default;
+$ouds-text-input-size-leading-icon: $ouds-size-icon-with-label-large-size-small !default;
+$ouds-text-input-size-max-width: $core-ouds-dimension-4000 !default;
+$ouds-text-input-size-min-height: $core-ouds-dimension-650 !default;
+$ouds-text-input-size-min-width: $core-ouds-dimension-2500 !default;
+$ouds-text-input-size-vertical-divider-height: $ouds-dimension-4xsmall !default;
+$ouds-text-input-space-column-gap-default: $ouds-space-column-gap-medium !default;
+$ouds-text-input-space-column-gap-inline-text: $ouds-space-column-gap-xsmall !default;
+$ouds-text-input-space-column-gap-trailing-error-action: $ouds-space-column-gap-xsmall !default;
+$ouds-text-input-space-padding-block-default: $ouds-space-padding-block-2xsmall !default;
+$ouds-text-input-space-padding-block-top-helper-text: $ouds-space-padding-block-xsmall !default;
+$ouds-text-input-space-padding-inline-country-selector-end: $ouds-space-padding-inline-xsmall !default;
+$ouds-text-input-space-padding-inline-country-selector-start: $ouds-space-padding-inline-small !default;
+$ouds-text-input-space-padding-inline-default: $ouds-space-padding-inline-large !default;
+$ouds-text-input-space-padding-inline-trailing-action: $ouds-space-padding-inline-2xsmall !default;
+$ouds-text-input-space-row-gap-label-input: $ouds-space-row-gap-none !default;
+// scss-docs-end ouds-component-text

package/scss/tokens/_composite.scss

@@ -0,0 +1,124 @@
+//// Composite values
+//// Manual insertion of composite values
+
+// Elevation
+
+// scss-docs-start ouds-composite-elevation
+$ouds-elevation-default: $ouds-elevation-x-default $ouds-elevation-y-default $ouds-elevation-blur-default $ouds-elevation-spread-default var(--#{$prefix}elevation-color-default) !default;
+$ouds-elevation-drag: $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag var(--#{$prefix}elevation-color-drag) !default;
+$ouds-elevation-emphasized: $ouds-elevation-x-emphasized $ouds-elevation-y-emphasized $ouds-elevation-blur-emphasized $ouds-elevation-spread-emphasized var(--#{$prefix}elevation-color-emphasized) !default;
+$ouds-elevation-none: $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none var(--#{$prefix}elevation-color-none) !default;
+$ouds-elevation-raised: $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised var(--#{$prefix}elevation-color-raised) !default;
+$ouds-elevation-sticky: $ouds-elevation-x-sticky $ouds-elevation-y-sticky $ouds-elevation-blur-sticky $ouds-elevation-spread-sticky var(--#{$prefix}elevation-color-sticky) !default;
+// scss-docs-end ouds-composite-elevation
+
+// Font
+
+// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
+// scss-docs-start ouds-composite-font-sans-serif
+$custom-font-name: "HelvNeueOrange" !default;
+
+// Map of CDN URLs for custom font, with weight as keys
+$custom-font-cdn-urls: (
+  $ouds-font-weight-system-web-default: "https://mastermedia.dam-broadcast.com/pm_12751_490_490071-myaimdgylf--HelveticaNeue-Default.woff2",
+  $ouds-font-weight-system-web-moderate: "https://mastermedia.dam-broadcast.com/pm_12751_490_490074-tqtijgs7e4--HelveticaNeue-Moderate.woff2",
+  $ouds-font-weight-system-web-strong: "https://mastermedia.dam-broadcast.com/pm_12751_490_490077-wejriti88u--HelveticaNeue-Strong.woff2"
+) !default;
+
+$ouds-font-family-sans-serif-stack:
+  // OUDS custom font
+  $custom-font-name,
+  // Older macOS and iOS
+  "Helvetica Neue",
+  // Some Windows
+  Helvetica,
+  // Safari for macOS and iOS
+  "SF Pro",
+  // Android
+  Roboto,
+  // Basic web fallback
+  Arial,
+  "Noto Sans",
+  "Liberation Sans",
+  sans-serif,
+  // Emojis fonts
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji" !default;
+// scss-docs-end ouds-composite-font-sans-serif
+// scss-docs-start ouds-composite-font-monospace
+$ouds-font-family-monospace-stack:
+  // Windows
+  Consolas,
+  // Safari for macOS and iOS
+  "SFMono-Regular",
+  // Android
+  "Roboto Mono",
+  // Basic web fallback
+  "Liberation Mono",
+  Menlo,
+  monospace !default;
+// scss-docs-end ouds-composite-font-monospace
+// stylelint-enable value-keyword-case, scss/dollar-variable-colon-space-after
+
+// Icons as data URIs
+
+$chevron-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M597.22 225 402.78 421.43 325 500l77.78 78.57L597.22 775 675 696.43 480.56 500 675 303.57z'/></svg>") !default;
+$cross-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='m15 17.121-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
+$cross-icon-stroke:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m18.75 7.178-1.928-1.929L12 10.071 7.178 5.25 5.249 7.18 10.071 12 5.25 16.822l1.93 1.929L12 13.929l4.822 4.822 1.929-1.929L13.929 12l4.822-4.822Z'/></svg>") !default;
+$burger-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M28 21v2H2v-2h26Zm0-7v2H2v-2h26Zm0-7v2H2V7h26Z'/></svg>") !default;
+$burger-icon-small:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path d='M2 19h21v-2H2v2Zm0-6h21v-2H2v2Zm0-6h21V5H2v2Z'/></svg>") !default;
+$add-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='currentColor' d='M14 6H8V0H6v6H0v2h6v6h2V8h6V6z'/></svg>") !default;
+$remove-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 2'><path fill='currentColor' d='M0 0h14v2H0z'/></svg>") !default;
+$add-icon-sm:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M10 4H6V0H4v4H0v2h4v4h2V6h4V4z'/></svg>") !default;
+$remove-icon-sm:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'><path d='M0 0h10v2H0z'/></svg>") !default;
+$play-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M12.138 16.8 3 21.6V2.4l9.138 4.8L21 12z' fill-rule='evenodd'/></svg>") !default;
+$pause-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M10.2 21H3V3h7.2v18ZM21 21h-7.2V3H21v18Z' fill-rule='evenodd'/></svg>") !default;
+$helper-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M500 75C265.277 75 75 265.279 75 500s190.277 425 425 425 425-190.279 425-425S734.721 75 500 75Zm30.8 680.633a54.149 54.149 0 0 1-37.069 14.267 56.1 56.1 0 0 1-37.95-14.085q-16.233-14.079-16.226-39.384 0-22.458 15.679-37.781t38.5-15.324q22.464 0 37.789 15.324t15.324 37.781q-.003 24.951-16.047 39.202Zm133.12-330.046a162.251 162.251 0 0 1-29.23 39.38q-16.92 16.574-60.772 55.785A248.236 248.236 0 0 0 554.5 540.18a79.146 79.146 0 0 0-10.868 15.32 75.1 75.1 0 0 0-5.529 13.9q-1.953 6.954-5.879 24.42-6.762 37.068-42.413 37.069-18.541 0-31.192-12.119t-12.647-36q0-29.945 9.262-51.863a131.346 131.346 0 0 1 24.6-38.491q15.319-16.577 41.35-39.4 22.789-19.946 32.962-30.113a101.987 101.987 0 0 0 17.105-22.632 54.714 54.714 0 0 0 6.955-27.086q0-28.517-21.213-48.119t-54.7-19.6q-39.213 0-57.743 19.783t-31.359 58.272Q401.059 423.8 367.2 423.8q-19.964 0-33.683-14.079T319.8 379.248q0-33.852 21.739-68.606t63.447-57.562q41.7-22.814 97.3-22.813 51.66 0 91.244 19.069 39.549 19.074 61.119 51.856t21.571 71.286q.004 30.297-12.297 53.109Z'/></svg>") !default;
+
+// Breadcrumb
+$breadcrumb-divider:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><path d='M6.651 12.75 11.5 8 6.651 3.25 5.266 4.606 8.73 8l-3.464 3.392z'/></svg>") !default; // OUDS mod
+
+// Bullet list
+$bullet-list-marker-level-0: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6.25 6.25h7.5v7.5h-7.5z'/></svg>") !default;
+$bullet-list-marker-level-1: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6.25 8.75h7.5v2.5h-7.5z'/></svg>") !default;
+$bullet-list-marker-level-2: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M7.813 7.813h4.375v4.375H7.813z'/></svg>") !default;
+$bullet-list-empty-marker: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'></svg>") !default;
+$bullet-list-marker-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='m16.615 6.308-7.587 8.75c-.217.25-.55.41-.925.41s-.708-.16-.926-.41l-3.793-4.375a1.038 1.038 0 0 1-.26-.683c0-.302.133-.575.348-.773l.474-.438c.214-.198.51-.32.838-.32.294 0 .564.1.771.263l2.31 2.362 7.013-6.267c.212-.183.498-.296.811-.296.655 0 1.185.49 1.185 1.094 0 .259-.097.496-.26.683Z'/></svg>") !default;
+
+// Chip
+$chip-tick-icon:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m13.292 5.047-6.07 7a.978.978 0 0 1-.74.328.977.977 0 0 1-.74-.329l-3.035-3.5A.83.83 0 0 1 2.5 8a.84.84 0 0 1 .277-.619l.38-.35a.986.986 0 0 1 .67-.256c.236 0 .451.08.617.21l1.849 1.89 5.61-5.013a.989.989 0 0 1 .648-.237c.524 0 .948.392.948.875a.83.83 0 0 1-.207.547Z'/></svg>") !default;
+
+// Control item
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='m15.262 7.047-6.034 7a.97.97 0 0 1-.737.328.97.97 0 0 1-.736-.329l-3.017-3.5A.833.833 0 0 1 4.53 10c0-.242.106-.46.276-.619l.378-.35a.978.978 0 0 1 .666-.256c.235 0 .449.08.614.21l1.838 1.89 5.578-5.013a.98.98 0 0 1 .645-.237c.52 0 .943.392.943.875a.833.833 0 0 1-.207.547Z'/></svg>") !default;
+$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='M14.0635 10C14.0635 12.2437 12.2446 14.0625 10.001 14.0625C7.75732 14.0625 5.93848 12.2437 5.93848 10C5.93848 7.75634 7.75732 5.9375 10.001 5.9375C12.2446 5.9375 14.0635 7.75634 14.0635 10Z'/></svg>") !default;
+$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='M4.5 9.375c0-.345.28-.625.625-.625h9.75c.345 0 .625.28.625.625v1.25c0 .345-.28.625-.625.625h-9.75a.625.625 0 0 1-.625-.625v-1.25Z'/></svg>") !default;
+$form-switch-checked-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#000' d='m17.413 8.962-6.207 7.2a.998.998 0 0 1-.758.338.997.997 0 0 1-.757-.338l-3.103-3.6A.857.857 0 0 1 6.375 12c0-.248.109-.473.284-.636l.388-.36c.175-.163.418-.264.686-.264.24 0 .461.082.63.217l1.891 1.943 5.738-5.157c.173-.15.407-.243.663-.243.536 0 .97.403.97.9 0 .213-.08.408-.212.562Z'/></svg>") !default;
+
+// Alert
+// icon tick-confirmation-fill v1.4
+$alert-icon-success: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4A9.6 9.6 0 0 0 2.4 12a9.6 9.6 0 0 0 9.6 9.6 9.6 9.6 0 0 0 9.6-9.6A9.6 9.6 0 0 0 12 2.4Zm4.97 8.148-5.408 5.407c-.09.09-.178.171-.265.245-.04.053-.085.105-.136.156a1.27 1.27 0 0 1-.596.336 1.205 1.205 0 0 1-.266.033 1.206 1.206 0 0 1-.263-.033 1.277 1.277 0 0 1-.597-.337 1.47 1.47 0 0 1-.136-.155 4.53 4.53 0 0 1-.265-.245L7.035 13.95c-.853-.852-.997-1.549-.412-2.134.574-.574 1.282-.44 2.134.412l1.543 1.543 4.947-4.947c.853-.853 1.55-.997 2.134-.412.574.574.44 1.282-.411 2.134Z'/></svg>") !default;
+// icon info-fill v1.4
+$alert-icon-info: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4A9.6 9.6 0 0 0 2.4 12a9.6 9.6 0 0 0 9.6 9.6 9.6 9.6 0 0 0 9.6-9.6A9.6 9.6 0 0 0 12 2.4Zm1.2 13.994c0 1.188-.4 1.758-1.2 1.758-.8 0-1.2-.57-1.2-1.758v-4.535c0-1.188.384-1.774 1.2-1.774.8 0 1.2.586 1.2 1.774v4.535Zm-1.213-7.32A1.39 1.39 0 0 1 10.6 7.681c0-.768.622-1.407 1.387-1.407.766 0 1.388.624 1.388 1.407a1.38 1.38 0 0 1-1.388 1.391Z'/></svg>") !default;
+// icon warning-external-shape v1.4
+$alert-icon-warning-external: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.852 16.98 14.205 3.064a2.556 2.556 0 0 0-4.41 0L2.17 16.942l-.001.002-.021.036a2.54 2.54 0 0 0-.009 2.552 2.55 2.55 0 0 0 2.214 1.276h15.293a2.549 2.549 0 0 0 2.214-1.276 2.542 2.542 0 0 0-.008-2.553ZM10.8 8.031c0-1.187.4-1.758 1.2-1.758.8 0 1.2.57 1.2 1.758v4.535c0 1.188-.384 1.774-1.2 1.774s-1.2-.585-1.2-1.774V8.031Zm1.188 10.119a1.394 1.394 0 0 1-1.388-1.407 1.38 1.38 0 0 1 1.388-1.391 1.39 1.39 0 0 1 1.387 1.39c0 .768-.622 1.408-1.387 1.408Z'/></svg>") !default;
+// icon warning-internal-shape v1.4
+$alert-icon-warning-internal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.8 8.031c0-1.187.4-1.758 1.2-1.758.8 0 1.2.57 1.2 1.758v4.535c0 1.188-.384 1.774-1.2 1.774s-1.2-.585-1.2-1.774V8.031Zm1.188 10.119a1.394 1.394 0 0 1-1.388-1.407 1.38 1.38 0 0 1 1.388-1.391 1.39 1.39 0 0 1 1.387 1.39c0 .768-.622 1.408-1.387 1.408Z'/></svg>") !default;
+// icon important-fill v1.4
+$alert-icon-important: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4A9.6 9.6 0 0 0 2.4 12a9.6 9.6 0 0 0 9.6 9.6 9.6 9.6 0 0 0 9.6-9.6A9.6 9.6 0 0 0 12 2.4Zm-1.2 5.631c0-1.187.4-1.758 1.2-1.758.8 0 1.2.57 1.2 1.758v4.535c0 1.188-.385 1.774-1.2 1.774-.8 0-1.2-.585-1.2-1.774V8.031Zm1.187 10.119a1.394 1.394 0 0 1-1.387-1.407 1.38 1.38 0 0 1 1.387-1.391 1.39 1.39 0 0 1 1.388 1.39c0 .768-.622 1.408-1.388 1.408Z'/></svg>") !default;
+
+// Select input
+$select-input-chevron:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.874 9.977 12 17.25l7.125-7.273-2.034-2.079L12 13.095 6.91 7.898 4.874 9.977Z'/></svg>") !default;
+$select-input-expanded-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.124 14.023 12 6.75l-7.125 7.273 2.035 2.079L12 10.905l5.088 5.197 2.037-2.079Z'/></svg>") !default;
+
+//// SVG used several times
+$svg-as-custom-props: (
+  "chevron":          $chevron-icon,
+  "close":            $cross-icon-stroke,
+  "success":          $alert-icon-success,
+  "info":             $alert-icon-info,
+  "warning":          $alert-icon-warning-external,
+  "warning-internal": $alert-icon-warning-internal,
+  "error":            $alert-icon-important
+) !default;

package/scss/tokens/_index.scss

@@ -0,0 +1,6 @@
+@import "raw";
+@import "semantic";
+@import "semantic-colors-custom-props";
+@import "composite";
+@import "component-colors-custom-props";
+@import "component";