@ouds/web-orange-compact 1.1.0

package/scss/tokens/_semantic-colors-custom-props.scss

@@ -0,0 +1,316 @@
+// Semantic custom properties applications
+// OUDS Core tokens version 1.9.0
+// Orange Compact Core tokens version 1.2.0
+// Orange Compact System tokens version 2.3.0
+
+// scss-docs-start ouds-all-semantic-css-color
+// scss-docs-start ouds-semantic-css-color
+@include color-mode(light, true) {
+  --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-light};
+  --#{$prefix}color-action-enabled: #{$ouds-color-action-enabled-light};
+  --#{$prefix}color-action-focus: #{$ouds-color-action-focus-light};
+  --#{$prefix}color-action-highlighted: #{$ouds-color-action-highlighted-light};
+  --#{$prefix}color-action-hover: #{$ouds-color-action-hover-light};
+  --#{$prefix}color-action-loading: #{$ouds-color-action-loading-light};
+  --#{$prefix}color-action-negative-enabled: #{$ouds-color-action-negative-enabled-light};
+  --#{$prefix}color-action-negative-focus: #{$ouds-color-action-negative-focus-light};
+  --#{$prefix}color-action-negative-hover: #{$ouds-color-action-negative-hover-light};
+  --#{$prefix}color-action-negative-loading: #{$ouds-color-action-negative-loading-light};
+  --#{$prefix}color-action-negative-pressed: #{$ouds-color-action-negative-pressed-light};
+  --#{$prefix}color-action-pressed: #{$ouds-color-action-pressed-light};
+  --#{$prefix}color-action-read-only-primary: #{$ouds-color-action-read-only-primary-light};
+  --#{$prefix}color-action-read-only-secondary: #{$ouds-color-action-read-only-secondary-light};
+  --#{$prefix}color-action-selected: #{$ouds-color-action-selected-light};
+  --#{$prefix}color-action-support-disabled: #{$ouds-color-action-support-disabled-light};
+  --#{$prefix}color-action-support-enabled: #{$ouds-color-action-support-enabled-light};
+  --#{$prefix}color-action-support-focus: #{$ouds-color-action-support-focus-light};
+  --#{$prefix}color-action-support-hover: #{$ouds-color-action-support-hover-light};
+  --#{$prefix}color-action-support-loading: #{$ouds-color-action-support-loading-light};
+  --#{$prefix}color-action-support-pressed: #{$ouds-color-action-support-pressed-light};
+  --#{$prefix}color-action-visited: #{$ouds-color-action-visited-light};
+  --#{$prefix}color-always-black: #{$ouds-color-always-black};
+  --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black};
+  --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white};
+  --#{$prefix}color-always-white: #{$ouds-color-always-white};
+  --#{$prefix}color-bg-inverse-high: #{$ouds-color-bg-inverse-high-light};
+  --#{$prefix}color-bg-inverse-low: #{$ouds-color-bg-inverse-low-light};
+  --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-light};
+  --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-light};
+  --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-light};
+  --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-light};
+  --#{$prefix}color-border-default: #{$ouds-color-border-default-light};
+  --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-light};
+  --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-light};
+  --#{$prefix}color-border-focus: #{$ouds-color-border-focus-light};
+  --#{$prefix}color-border-minimal: #{$ouds-color-border-minimal-light};
+  --#{$prefix}color-border-muted: #{$ouds-color-border-muted-light};
+  --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-light};
+  --#{$prefix}color-border-status-accent: #{$ouds-color-border-status-accent-light};
+  --#{$prefix}color-border-status-info: #{$ouds-color-border-status-info-light};
+  --#{$prefix}color-border-status-negative: #{$ouds-color-border-status-negative-light};
+  --#{$prefix}color-border-status-positive: #{$ouds-color-border-status-positive-light};
+  --#{$prefix}color-border-status-warning: #{$ouds-color-border-status-warning-light};
+  --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-light};
+  --#{$prefix}color-content-default: #{$ouds-color-content-default-light};
+  --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-light};
+  --#{$prefix}color-content-inverse: #{$ouds-color-content-inverse-light};
+  --#{$prefix}color-content-muted: #{$ouds-color-content-muted-light};
+  --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-light};
+  --#{$prefix}color-content-on-action-enabled: #{$ouds-color-content-on-action-enabled-light};
+  --#{$prefix}color-content-on-action-focus: #{$ouds-color-content-on-action-focus-light};
+  --#{$prefix}color-content-on-action-highlighted: #{$ouds-color-content-on-action-highlighted-light};
+  --#{$prefix}color-content-on-action-hover: #{$ouds-color-content-on-action-hover-light};
+  --#{$prefix}color-content-on-action-loading: #{$ouds-color-content-on-action-loading-light};
+  --#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-light};
+  --#{$prefix}color-content-on-action-selected: #{$ouds-color-content-on-action-selected-light};
+  --#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-light};
+  --#{$prefix}color-content-on-status-accent-emphasized: #{$ouds-color-content-on-status-accent-emphasized-light};
+  --#{$prefix}color-content-on-status-accent-muted: #{$ouds-color-content-on-status-accent-muted-light};
+  --#{$prefix}color-content-on-status-info-emphasized: #{$ouds-color-content-on-status-info-emphasized-light};
+  --#{$prefix}color-content-on-status-info-muted: #{$ouds-color-content-on-status-info-muted-light};
+  --#{$prefix}color-content-on-status-negative-emphasized: #{$ouds-color-content-on-status-negative-emphasized-light};
+  --#{$prefix}color-content-on-status-negative-muted: #{$ouds-color-content-on-status-negative-muted-light};
+  --#{$prefix}color-content-on-status-positive-emphasized: #{$ouds-color-content-on-status-positive-emphasized-light};
+  --#{$prefix}color-content-on-status-positive-muted: #{$ouds-color-content-on-status-positive-muted-light};
+  --#{$prefix}color-content-on-status-warning-emphasized: #{$ouds-color-content-on-status-warning-emphasized-light};
+  --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-light};
+  --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-light};
+  --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-light};
+  --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-light};
+  --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-light};
+  --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-light};
+  --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-light};
+  --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-light};
+  --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-light};
+  --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-light};
+  --#{$prefix}color-overlay-dropdown: #{$ouds-color-overlay-dropdown-light};
+  --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-light};
+  --#{$prefix}color-overlay-tooltip: #{$ouds-color-overlay-tooltip-light};
+  --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-light};
+  --#{$prefix}color-surface-inverse-high: #{$ouds-color-surface-inverse-high-light};
+  --#{$prefix}color-surface-inverse-low: #{$ouds-color-surface-inverse-low-light};
+  --#{$prefix}color-surface-primary: #{$ouds-color-surface-primary-light};
+  --#{$prefix}color-surface-secondary: #{$ouds-color-surface-secondary-light};
+  --#{$prefix}color-surface-status-accent-emphasized: #{$ouds-color-surface-status-accent-emphasized-light};
+  --#{$prefix}color-surface-status-accent-muted: #{$ouds-color-surface-status-accent-muted-light};
+  --#{$prefix}color-surface-status-info-emphasized: #{$ouds-color-surface-status-info-emphasized-light};
+  --#{$prefix}color-surface-status-info-muted: #{$ouds-color-surface-status-info-muted-light};
+  --#{$prefix}color-surface-status-negative-emphasized: #{$ouds-color-surface-status-negative-emphasized-light};
+  --#{$prefix}color-surface-status-negative-muted: #{$ouds-color-surface-status-negative-muted-light};
+  --#{$prefix}color-surface-status-positive-emphasized: #{$ouds-color-surface-status-positive-emphasized-light};
+  --#{$prefix}color-surface-status-positive-muted: #{$ouds-color-surface-status-positive-muted-light};
+  --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-light};
+  --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-light};
+  --#{$prefix}color-surface-tertiary: #{$ouds-color-surface-tertiary-light};
+  --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-light};
+  --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-light};
+  --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-light};
+  --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none};
+  --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-light};
+  --#{$prefix}elevation-color-sticky: #{$ouds-elevation-color-sticky-light};
+}
+// scss-docs-end ouds-semantic-css-color
+
+@include color-mode(dark, true) {
+  --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-dark};
+  --#{$prefix}color-action-enabled: #{$ouds-color-action-enabled-dark};
+  --#{$prefix}color-action-focus: #{$ouds-color-action-focus-dark};
+  --#{$prefix}color-action-highlighted: #{$ouds-color-action-highlighted-dark};
+  --#{$prefix}color-action-hover: #{$ouds-color-action-hover-dark};
+  --#{$prefix}color-action-loading: #{$ouds-color-action-loading-dark};
+  --#{$prefix}color-action-negative-enabled: #{$ouds-color-action-negative-enabled-dark};
+  --#{$prefix}color-action-negative-focus: #{$ouds-color-action-negative-focus-dark};
+  --#{$prefix}color-action-negative-hover: #{$ouds-color-action-negative-hover-dark};
+  --#{$prefix}color-action-negative-loading: #{$ouds-color-action-negative-loading-dark};
+  --#{$prefix}color-action-negative-pressed: #{$ouds-color-action-negative-pressed-dark};
+  --#{$prefix}color-action-pressed: #{$ouds-color-action-pressed-dark};
+  --#{$prefix}color-action-read-only-primary: #{$ouds-color-action-read-only-primary-dark};
+  --#{$prefix}color-action-read-only-secondary: #{$ouds-color-action-read-only-secondary-dark};
+  --#{$prefix}color-action-selected: #{$ouds-color-action-selected-dark};
+  --#{$prefix}color-action-support-disabled: #{$ouds-color-action-support-disabled-dark};
+  --#{$prefix}color-action-support-enabled: #{$ouds-color-action-support-enabled-dark};
+  --#{$prefix}color-action-support-focus: #{$ouds-color-action-support-focus-dark};
+  --#{$prefix}color-action-support-hover: #{$ouds-color-action-support-hover-dark};
+  --#{$prefix}color-action-support-loading: #{$ouds-color-action-support-loading-dark};
+  --#{$prefix}color-action-support-pressed: #{$ouds-color-action-support-pressed-dark};
+  --#{$prefix}color-action-visited: #{$ouds-color-action-visited-dark};
+  --#{$prefix}color-bg-inverse-high: #{$ouds-color-bg-inverse-high-dark};
+  --#{$prefix}color-bg-inverse-low: #{$ouds-color-bg-inverse-low-dark};
+  --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-dark};
+  --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-dark};
+  --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-dark};
+  --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-dark};
+  --#{$prefix}color-border-default: #{$ouds-color-border-default-dark};
+  --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-dark};
+  --#{$prefix}color-border-focus: #{$ouds-color-border-focus-dark};
+  --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-dark};
+  --#{$prefix}color-border-minimal: #{$ouds-color-border-minimal-dark};
+  --#{$prefix}color-border-muted: #{$ouds-color-border-muted-dark};
+  --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-dark};
+  --#{$prefix}color-border-status-accent: #{$ouds-color-border-status-accent-dark};
+  --#{$prefix}color-border-status-info: #{$ouds-color-border-status-info-dark};
+  --#{$prefix}color-border-status-negative: #{$ouds-color-border-status-negative-dark};
+  --#{$prefix}color-border-status-positive: #{$ouds-color-border-status-positive-dark};
+  --#{$prefix}color-border-status-warning: #{$ouds-color-border-status-warning-dark};
+  --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-dark};
+  --#{$prefix}color-content-default: #{$ouds-color-content-default-dark};
+  --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-dark};
+  --#{$prefix}color-content-inverse: #{$ouds-color-content-inverse-dark};
+  --#{$prefix}color-content-muted: #{$ouds-color-content-muted-dark};
+  --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-dark};
+  --#{$prefix}color-content-on-action-enabled: #{$ouds-color-content-on-action-enabled-dark};
+  --#{$prefix}color-content-on-action-focus: #{$ouds-color-content-on-action-focus-dark};
+  --#{$prefix}color-content-on-action-highlighted: #{$ouds-color-content-on-action-highlighted-dark};
+  --#{$prefix}color-content-on-action-hover: #{$ouds-color-content-on-action-hover-dark};
+  --#{$prefix}color-content-on-action-loading: #{$ouds-color-content-on-action-loading-dark};
+  --#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-dark};
+  --#{$prefix}color-content-on-action-selected: #{$ouds-color-content-on-action-selected-dark};
+  --#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-dark};
+  --#{$prefix}color-content-on-status-accent-emphasized: #{$ouds-color-content-on-status-accent-emphasized-dark};
+  --#{$prefix}color-content-on-status-accent-muted: #{$ouds-color-content-on-status-accent-muted-dark};
+  --#{$prefix}color-content-on-status-info-emphasized: #{$ouds-color-content-on-status-info-emphasized-dark};
+  --#{$prefix}color-content-on-status-info-muted: #{$ouds-color-content-on-status-info-muted-dark};
+  --#{$prefix}color-content-on-status-negative-emphasized: #{$ouds-color-content-on-status-negative-emphasized-dark};
+  --#{$prefix}color-content-on-status-negative-muted: #{$ouds-color-content-on-status-negative-muted-dark};
+  --#{$prefix}color-content-on-status-positive-emphasized: #{$ouds-color-content-on-status-positive-emphasized-dark};
+  --#{$prefix}color-content-on-status-positive-muted: #{$ouds-color-content-on-status-positive-muted-dark};
+  --#{$prefix}color-content-on-status-warning-emphasized: #{$ouds-color-content-on-status-warning-emphasized-dark};
+  --#{$prefix}color-content-on-status-warning-muted: #{$ouds-color-content-on-status-warning-muted-dark};
+  --#{$prefix}color-content-status-accent: #{$ouds-color-content-status-accent-dark};
+  --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-dark};
+  --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-dark};
+  --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-dark};
+  --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-dark};
+  --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-dark};
+  --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-dark};
+  --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-dark};
+  --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-dark};
+  --#{$prefix}color-overlay-dropdown: #{$ouds-color-overlay-dropdown-dark};
+  --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-dark};
+  --#{$prefix}color-overlay-tooltip: #{$ouds-color-overlay-tooltip-dark};
+  --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-dark};
+  --#{$prefix}color-surface-inverse-high: #{$ouds-color-surface-inverse-high-dark};
+  --#{$prefix}color-surface-inverse-low: #{$ouds-color-surface-inverse-low-dark};
+  --#{$prefix}color-surface-primary: #{$ouds-color-surface-primary-dark};
+  --#{$prefix}color-surface-secondary: #{$ouds-color-surface-secondary-dark};
+  --#{$prefix}color-surface-status-accent-emphasized: #{$ouds-color-surface-status-accent-emphasized-dark};
+  --#{$prefix}color-surface-status-accent-muted: #{$ouds-color-surface-status-accent-muted-dark};
+  --#{$prefix}color-surface-status-info-emphasized: #{$ouds-color-surface-status-info-emphasized-dark};
+  --#{$prefix}color-surface-status-info-muted: #{$ouds-color-surface-status-info-muted-dark};
+  --#{$prefix}color-surface-status-negative-emphasized: #{$ouds-color-surface-status-negative-emphasized-dark};
+  --#{$prefix}color-surface-status-negative-muted: #{$ouds-color-surface-status-negative-muted-dark};
+  --#{$prefix}color-surface-status-positive-emphasized: #{$ouds-color-surface-status-positive-emphasized-dark};
+  --#{$prefix}color-surface-status-positive-muted: #{$ouds-color-surface-status-positive-muted-dark};
+  --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-dark};
+  --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-dark};
+  --#{$prefix}color-surface-tertiary: #{$ouds-color-surface-tertiary-dark};
+  --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-dark};
+  --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-dark};
+  --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-dark};
+  --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-dark};
+  --#{$prefix}elevation-color-sticky: #{$ouds-elevation-color-sticky-dark};
+}
+// scss-docs-end ouds-all-semantic-css-color
+
+$ouds-color-action-disabled: var(--#{$prefix}color-action-disabled) !default;
+$ouds-color-action-enabled: var(--#{$prefix}color-action-enabled) !default;
+$ouds-color-action-focus: var(--#{$prefix}color-action-focus) !default;
+$ouds-color-action-highlighted: var(--#{$prefix}color-action-highlighted) !default;
+$ouds-color-action-hover: var(--#{$prefix}color-action-hover) !default;
+$ouds-color-action-loading: var(--#{$prefix}color-action-loading) !default;
+$ouds-color-action-negative-enabled: var(--#{$prefix}color-action-negative-enabled) !default;
+$ouds-color-action-negative-focus: var(--#{$prefix}color-action-negative-focus) !default;
+$ouds-color-action-negative-hover: var(--#{$prefix}color-action-negative-hover) !default;
+$ouds-color-action-negative-loading: var(--#{$prefix}color-action-negative-loading) !default;
+$ouds-color-action-negative-pressed: var(--#{$prefix}color-action-negative-pressed) !default;
+$ouds-color-action-pressed: var(--#{$prefix}color-action-pressed) !default;
+$ouds-color-action-read-only-primary: var(--#{$prefix}color-action-read-only-primary) !default;
+$ouds-color-action-read-only-secondary: var(--#{$prefix}color-action-read-only-secondary) !default;
+$ouds-color-action-selected: var(--#{$prefix}color-action-selected) !default;
+$ouds-color-action-support-disabled: var(--#{$prefix}color-action-support-disabled) !default;
+$ouds-color-action-support-enabled: var(--#{$prefix}color-action-support-enabled) !default;
+$ouds-color-action-support-focus: var(--#{$prefix}color-action-support-focus) !default;
+$ouds-color-action-support-hover: var(--#{$prefix}color-action-support-hover) !default;
+$ouds-color-action-support-loading: var(--#{$prefix}color-action-support-loading) !default;
+$ouds-color-action-support-pressed: var(--#{$prefix}color-action-support-pressed) !default;
+$ouds-color-action-visited: var(--#{$prefix}color-action-visited) !default;
+$ouds-color-always-black: var(--#{$prefix}color-always-black) !default;
+$ouds-color-always-on-black: var(--#{$prefix}color-always-on-black) !default;
+$ouds-color-always-on-white: var(--#{$prefix}color-always-on-white) !default;
+$ouds-color-always-white: var(--#{$prefix}color-always-white) !default;
+$ouds-color-bg-inverse-high: var(--#{$prefix}color-bg-inverse-high) !default;
+$ouds-color-bg-inverse-low: var(--#{$prefix}color-bg-inverse-low) !default;
+$ouds-color-bg-primary: var(--#{$prefix}color-bg-primary) !default;
+$ouds-color-bg-secondary: var(--#{$prefix}color-bg-secondary) !default;
+$ouds-color-bg-tertiary: var(--#{$prefix}color-bg-tertiary) !default;
+$ouds-color-border-brand-primary: var(--#{$prefix}color-border-brand-primary) !default;
+$ouds-color-border-default: var(--#{$prefix}color-border-default) !default;
+$ouds-color-border-emphasized: var(--#{$prefix}color-border-emphasized) !default;
+$ouds-color-border-focus-inset: var(--#{$prefix}color-border-focus-inset) !default;
+$ouds-color-border-focus: var(--#{$prefix}color-border-focus) !default;
+$ouds-color-border-minimal: var(--#{$prefix}color-border-minimal) !default;
+$ouds-color-border-muted: var(--#{$prefix}color-border-muted) !default;
+$ouds-color-border-on-brand-primary: var(--#{$prefix}color-border-on-brand-primary) !default;
+$ouds-color-border-status-accent: var(--#{$prefix}color-border-status-accent) !default;
+$ouds-color-border-status-info: var(--#{$prefix}color-border-status-info) !default;
+$ouds-color-border-status-negative: var(--#{$prefix}color-border-status-negative) !default;
+$ouds-color-border-status-positive: var(--#{$prefix}color-border-status-positive) !default;
+$ouds-color-border-status-warning: var(--#{$prefix}color-border-status-warning) !default;
+$ouds-color-content-brand-primary: var(--#{$prefix}color-content-brand-primary) !default;
+$ouds-color-content-default: var(--#{$prefix}color-content-default) !default;
+$ouds-color-content-disabled: var(--#{$prefix}color-content-disabled) !default;
+$ouds-color-content-inverse: var(--#{$prefix}color-content-inverse) !default;
+$ouds-color-content-muted: var(--#{$prefix}color-content-muted) !default;
+$ouds-color-content-on-action-disabled: var(--#{$prefix}color-content-on-action-disabled) !default;
+$ouds-color-content-on-action-enabled: var(--#{$prefix}color-content-on-action-enabled) !default;
+$ouds-color-content-on-action-focus: var(--#{$prefix}color-content-on-action-focus) !default;
+$ouds-color-content-on-action-highlighted: var(--#{$prefix}color-content-on-action-highlighted) !default;
+$ouds-color-content-on-action-hover: var(--#{$prefix}color-content-on-action-hover) !default;
+$ouds-color-content-on-action-loading: var(--#{$prefix}color-content-on-action-loading) !default;
+$ouds-color-content-on-action-pressed: var(--#{$prefix}color-content-on-action-pressed) !default;
+$ouds-color-content-on-action-selected: var(--#{$prefix}color-content-on-action-selected) !default;
+$ouds-color-content-on-brand-primary: var(--#{$prefix}color-content-on-brand-primary) !default;
+$ouds-color-content-on-status-accent-emphasized: var(--#{$prefix}color-content-on-status-accent-emphasized) !default;
+$ouds-color-content-on-status-accent-muted: var(--#{$prefix}color-content-on-status-accent-muted) !default;
+$ouds-color-content-on-status-info-emphasized: var(--#{$prefix}color-content-on-status-info-emphasized) !default;
+$ouds-color-content-on-status-info-muted: var(--#{$prefix}color-content-on-status-info-muted) !default;
+$ouds-color-content-on-status-negative-emphasized: var(--#{$prefix}color-content-on-status-negative-emphasized) !default;
+$ouds-color-content-on-status-negative-muted: var(--#{$prefix}color-content-on-status-negative-muted) !default;
+$ouds-color-content-on-status-positive-emphasized: var(--#{$prefix}color-content-on-status-positive-emphasized) !default;
+$ouds-color-content-on-status-positive-muted: var(--#{$prefix}color-content-on-status-positive-muted) !default;
+$ouds-color-content-on-status-warning-emphasized: var(--#{$prefix}color-content-on-status-warning-emphasized) !default;
+$ouds-color-content-on-status-warning-muted: var(--#{$prefix}color-content-on-status-warning-muted) !default;
+$ouds-color-content-status-accent: var(--#{$prefix}color-content-status-accent) !default;
+$ouds-color-content-status-info: var(--#{$prefix}color-content-status-info) !default;
+$ouds-color-content-status-negative: var(--#{$prefix}color-content-status-negative) !default;
+$ouds-color-content-status-positive: var(--#{$prefix}color-content-status-positive) !default;
+$ouds-color-content-status-warning: var(--#{$prefix}color-content-status-warning) !default;
+$ouds-color-opacity-lower: var(--#{$prefix}color-opacity-lower) !default;
+$ouds-color-opacity-lowest: var(--#{$prefix}color-opacity-lowest) !default;
+$ouds-color-opacity-transparent: var(--#{$prefix}color-opacity-transparent) !default;
+$ouds-color-overlay-drag: var(--#{$prefix}color-overlay-drag) !default;
+$ouds-color-overlay-dropdown: var(--#{$prefix}color-overlay-dropdown) !default;
+$ouds-color-overlay-modal: var(--#{$prefix}color-overlay-modal) !default;
+$ouds-color-overlay-tooltip: var(--#{$prefix}color-overlay-tooltip) !default;
+$ouds-color-surface-brand-primary: var(--#{$prefix}color-surface-brand-primary) !default;
+$ouds-color-surface-inverse-high: var(--#{$prefix}color-surface-inverse-high) !default;
+$ouds-color-surface-inverse-low: var(--#{$prefix}color-surface-inverse-low) !default;
+$ouds-color-surface-primary: var(--#{$prefix}color-surface-primary) !default;
+$ouds-color-surface-secondary: var(--#{$prefix}color-surface-secondary) !default;
+$ouds-color-surface-status-accent-emphasized: var(--#{$prefix}color-surface-status-accent-emphasized) !default;
+$ouds-color-surface-status-accent-muted: var(--#{$prefix}color-surface-status-accent-muted) !default;
+$ouds-color-surface-status-info-emphasized: var(--#{$prefix}color-surface-status-info-emphasized) !default;
+$ouds-color-surface-status-info-muted: var(--#{$prefix}color-surface-status-info-muted) !default;
+$ouds-color-surface-status-negative-emphasized: var(--#{$prefix}color-surface-status-negative-emphasized) !default;
+$ouds-color-surface-status-negative-muted: var(--#{$prefix}color-surface-status-negative-muted) !default;
+$ouds-color-surface-status-positive-emphasized: var(--#{$prefix}color-surface-status-positive-emphasized) !default;
+$ouds-color-surface-status-positive-muted: var(--#{$prefix}color-surface-status-positive-muted) !default;
+$ouds-color-surface-status-warning-emphasized: var(--#{$prefix}color-surface-status-warning-emphasized) !default;
+$ouds-color-surface-status-warning-muted: var(--#{$prefix}color-surface-status-warning-muted) !default;
+$ouds-color-surface-tertiary: var(--#{$prefix}color-surface-tertiary) !default;
+$ouds-elevation-color-default: var(--#{$prefix}elevation-color-default) !default;
+$ouds-elevation-color-drag: var(--#{$prefix}elevation-color-drag) !default;
+$ouds-elevation-color-emphasized: var(--#{$prefix}elevation-color-emphasized) !default;
+$ouds-elevation-color-none: var(--#{$prefix}elevation-color-none) !default;
+$ouds-elevation-color-raised: var(--#{$prefix}elevation-color-raised) !default;
+$ouds-elevation-color-sticky: var(--#{$prefix}elevation-color-sticky) !default;