From 5399a221a7722d313eb15c71dc45c62eafc5e809 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 6 Dec 2024 13:20:59 +0100 Subject: [PATCH] First draft on new colors --- scss/_variables.scss | 12 +- .../_ouds-web-bootstrap-utilities.test.scss | 524 +++++++----------- scss/tokens/_component.scss | 318 +++++------ scss/tokens/_composite.scss | 2 +- scss/tokens/_raw.scss | 30 +- .../tokens/_semantic-colors-custom-props.scss | 308 +++------- site/data/grays.yml | 8 +- 7 files changed, 477 insertions(+), 725 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 508d1e34bf..77c0dd27c9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -12,10 +12,10 @@ $gray-100: $ouds-color-functional-light-gray-80 !default; // OUDS mod: instead o $gray-200: $ouds-color-functional-light-gray-160 !default; // OUDS mod: instead of `#e9ecef` $gray-300: $ouds-color-functional-light-gray-400 !default; // OUDS mod: instead of `#dee2e6` $gray-400: $ouds-color-functional-light-gray-560 !default; // OUDS mod: instead of `#ced4da` -$gray-500: $ouds-color-functional-dark-gray-160 !default; // OUDS mod: instead of `#adb5bd` -$gray-600: $ouds-color-functional-dark-gray-400 !default; // OUDS mod: instead of `#6c757d` -$gray-700: $ouds-color-functional-dark-gray-480 !default; // OUDS mod: instead of `#495057` -$gray-800: $ouds-color-functional-dark-gray-640 !default; // OUDS mod: instead of `#343a40` +$gray-500: $ouds-color-functional-light-gray-880 !default; // OUDS mod: instead of `#adb5bd` +$gray-600: $ouds-color-functional-dark-gray-240 !default; // OUDS mod: instead of `#6c757d` +$gray-700: $ouds-color-functional-dark-gray-640 !default; // OUDS mod: instead of `#495057` +$gray-800: $ouds-color-functional-dark-gray-800 !default; // OUDS mod: instead of `#343a40` $gray-900: $ouds-color-functional-dark-gray-880 !default; // OUDS mod: instead of `#212529` $black: $ouds-color-functional-black !default; // OUDS mod: instead of `#000` // scss-docs-end gray-color-variables @@ -953,7 +953,7 @@ $btn-border-width: $input-btn-border-width !default; $btn-default-hover-bg: var(--#{$prefix}highlight-bg) !default; // OUDS mod $btn-default-hover-border: var(--#{$prefix}border-color) !default; // OUDS mod $btn-default-hover-color: var(--#{$prefix}highlight-color) !default; // OUDS mod -$btn-default-active-bg: $ouds-button-color-background-default-pressed !default; // OUDS mod +$btn-default-active-bg: $ouds-button-color-bg-default-pressed !default; // OUDS mod $btn-default-active-border: $ouds-button-color-border-default-pressed !default; // OUDS mod $btn-default-active-color: $black !default; // OUDS mod $btn-default-disabled-bg: var(--#{$prefix}color-content-disabled) !default; // OUDS mod @@ -963,7 +963,7 @@ $btn-default-disabled-color: var(--#{$prefix}highlight-color) !default; // OUDS $btn-outline-default-hover-bg: var(--#{$prefix}btn-color) !default; // OUDS mod $btn-outline-default-hover-border: var(--#{$prefix}btn-border-color) !default; // OUDS mod $btn-outline-default-hover-color: $white !default; // OUDS mod -$btn-outline-default-active-bg: $ouds-button-color-background-default-pressed !default; // OUDS mod +$btn-outline-default-active-bg: $ouds-button-color-bg-default-pressed !default; // OUDS mod $btn-outline-default-active-border: $ouds-button-color-border-default-pressed !default; // OUDS mod $btn-outline-default-active-color: $black !default; // OUDS mod $btn-outline-default-disabled-bg: transparent !default; // OUDS mod diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss index e755114068..3db2734677 100644 --- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss +++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss @@ -771,97 +771,79 @@ $utilities: (); @include expect() { :root, [data-bs-theme="light"] { - --bs-color-transparent-default: rgba(0, 0, 0, 0); - --bs-color-action-disabled: #ccc; + --bs-color-opacity-invisible-black: rgba(0, 0, 0, 0); + --bs-color-opacity-invisible-white: rgba(255, 255, 255, 0); + --bs-color-action-disabled: rgba(0, 0, 0, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-enabled: #000; + --bs-color-action-focus: rgba(0, 0, 0, 0.68); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-highlighted: #000; + --bs-color-action-hover: rgba(0, 0, 0, 0.68); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-loading: #f15e00; --bs-color-action-negative-enabled: #ea0305; --bs-color-action-negative-focus: #b20002; --bs-color-action-negative-hover: #b20002; --bs-color-action-negative-loading: #800001; --bs-color-action-negative-pressed: #800001; - --bs-color-action-primary-enabled: #000; - --bs-color-action-primary-focus: #555; - --bs-color-action-primary-hover: #555; - --bs-color-action-primary-loading: #f16e00; - --bs-color-action-primary-pressed: #f16e00; - --bs-color-action-secondary-enabled: #f4f4f4; - --bs-color-action-secondary-focus: #eee; - --bs-color-action-secondary-hover: #eee; - --bs-color-action-secondary-loading: #eee; - --bs-color-action-secondary-pressed: #eee; - --bs-color-action-selected: #f16e00; + --bs-color-action-pressed: #f15e00; + --bs-color-action-selected: #f15e00; + --bs-color-action-support-enabled: rgba(0, 0, 0, 0.04); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-focus: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-hover: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-loading: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-pressed: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-action-visited: #5b2f98; - --bs-color-always-accent: #ffd000; --bs-color-always-black: #000; - --bs-color-always-info: #26b2ff; - --bs-color-always-negative: #ea0305; - --bs-color-always-on-accent: #000; --bs-color-always-on-black: #fff; - --bs-color-always-on-info: #000; - --bs-color-always-on-negative: #fff; - --bs-color-always-on-positive: #000; - --bs-color-always-on-warning: #000; --bs-color-always-on-white: #000; - --bs-color-always-positive: #3de35a; - --bs-color-always-warning: #ffd000; --bs-color-always-white: #fff; - --bs-color-bg-brand-primary: #f16e00; + --bs-color-bg-emphasized: #141414; --bs-color-bg-primary: #fff; --bs-color-bg-secondary: #f4f4f4; - --bs-color-bg-status-accent-emphasized: #ffd000; - --bs-color-bg-status-accent-muted: #f9f5f0; - --bs-color-bg-status-info-emphasized: #26b2ff; - --bs-color-bg-status-info-muted: #f0faff; - --bs-color-bg-status-negative-emphasized: #ea0305; - --bs-color-bg-status-negative-muted: #ffe5e6; - --bs-color-bg-status-neutral: #f4f4f4; - --bs-color-bg-status-positive-emphasized: #3de35a; - --bs-color-bg-status-positive-muted: #edfcf0; - --bs-color-bg-status-warning-emphasized: #ffd000; - --bs-color-bg-status-warning-muted: #fff7d6; --bs-color-bg-tertiary: #f9f5f0; - --bs-color-border-brand-primary: #f16e00; - --bs-color-border-default: #ccc; + --bs-color-border-brand-primary: #f15e00; + --bs-color-border-default: rgba(0, 0, 0, 0.2); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-emphasized: #000; --bs-color-border-focus: #000; --bs-color-border-focus-inset: #fff; - --bs-color-border-on-brand-primary: #fff; - --bs-color-content-brand-primary: #f16e00; + --bs-color-border-on-brand-primary: #000; + --bs-color-content-brand-primary: #f15e00; --bs-color-content-default: #000; - --bs-color-content-disabled: #ccc; - --bs-color-content-muted: #555; + --bs-color-content-disabled: rgba(0, 0, 0, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-content-muted: rgba(0, 0, 0, 0.68); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-content-on-action-disabled: #fff; + --bs-color-content-on-action-enabled: #fff; + --bs-color-content-on-action-focus: #fff; + --bs-color-content-on-action-highlighted: #fff; + --bs-color-content-on-action-hover: #fff; + --bs-color-content-on-action-loading: #fff; --bs-color-content-on-action-negative: #fff; - --bs-color-content-on-action-primary-enabled: #fff; - --bs-color-content-on-action-primary-focus: #fff; - --bs-color-content-on-action-primary-hover: #fff; - --bs-color-content-on-action-primary-loading: #fff; - --bs-color-content-on-action-primary-pressed: #fff; - --bs-color-content-on-brand-primary: #fff; - --bs-color-content-on-status-accent-emphasized: #000; - --bs-color-content-on-status-accent-muted: #000; - --bs-color-content-on-status-info-emphasized: #000; - --bs-color-content-on-status-info-muted: #000; - --bs-color-content-on-status-negative-emphasized: #fff; - --bs-color-content-on-status-negative-muted: #000; - --bs-color-content-on-status-positive-emphasized: #000; - --bs-color-content-on-status-positive-muted: #000; - --bs-color-content-on-status-warning-emphasized: #000; - --bs-color-content-on-status-warning-muted: #000; + --bs-color-content-on-action-pressed: #fff; + --bs-color-content-on-brand-primary: #000; + --bs-color-content-on-overlay-emphasized: #fff; + --bs-color-content-on-status-emphasized: #000; + --bs-color-content-on-status-emphasized-neutral: #fff; + --bs-color-content-on-status-muted: #000; --bs-color-content-status-info: #26b2ff; --bs-color-content-status-negative: #ea0305; --bs-color-content-status-positive: #3de35a; --bs-color-content-status-warning: #ffd000; - --bs-color-elevation-drag: #f4f4f4; - --bs-color-elevation-drag-on-bg-secondary: #f4f4f4; - --bs-color-elevation-modal: #fff; - --bs-color-elevation-overlay-default: #fff; - --bs-color-elevation-overlay-default-on-bg-secondary: #fff; - --bs-color-elevation-overlay-emphasized: #333; - --bs-color-elevation-overlay-emphasized-on-bg-secondary: #333; - --bs-color-elevation-raised: #fff; - --bs-color-elevation-raised-on-bg-secondary: #fff; - --bs-color-gradient-skeleton-middle: #eee; - --bs-color-gradient-skeleton-start-end: #f4f4f4; + --bs-color-overlay-default: #fff; + --bs-color-overlay-drag: rgba(0, 0, 0, 0.04); + --bs-color-overlay-emphasized: #272727; + --bs-color-overlay-modal: #fff; + --bs-color-surface-brand-primary: #ff7900; + --bs-color-surface-status-accent-emphasized: #ffd000; + --bs-color-surface-status-accent-muted: rgba(255, 208, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-info-emphasized: #26b2ff; + --bs-color-surface-status-info-muted: rgba(38, 178, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-negative-emphasized: #ea0305; + --bs-color-surface-status-negative-muted: rgba(234, 3, 5, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-neutral-emphasized: rgba(0, 0, 0, 0.84); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-neutral-muted: rgba(0, 0, 0, 0.04); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-positive-emphasized: #3de35a; + --bs-color-surface-status-positive-muted: rgba(61, 227, 90, 0.12); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-warning-emphasized: #ffd000; + --bs-color-surface-status-warning-muted: rgba(255, 208, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-decorative-accent-1-default: #50be87; --bs-color-decorative-accent-1-emphasized: #2e7b54; --bs-color-decorative-accent-1-muted: #c0e8d4; @@ -892,108 +874,82 @@ $utilities: (); --bs-color-decorative-skin-tint-700: #7e4f2a; --bs-color-decorative-skin-tint-800: #553720; --bs-color-decorative-skin-tint-900: #2e2014; - --bs-elevation-color-none: rgba(0, 0, 0, 0); - --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-overlay-default: rgba(0, 0, 0, 0.24); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-overlay-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero } [data-bs-theme="dark"] { - --bs-color-transparent-default: rgba(0, 0, 0, 0); - --bs-color-action-disabled: #555; - --bs-color-action-negative-enabled: #ea0305; - --bs-color-action-negative-focus: #b20002; - --bs-color-action-negative-hover: #b20002; - --bs-color-action-negative-loading: #800001; - --bs-color-action-negative-pressed: #800001; - --bs-color-action-primary-enabled: #eee; - --bs-color-action-primary-focus: #bbb; - --bs-color-action-primary-hover: #bbb; - --bs-color-action-primary-loading: #ff7900; - --bs-color-action-primary-pressed: #ff7900; - --bs-color-action-secondary-enabled: #272727; - --bs-color-action-secondary-focus: #333; - --bs-color-action-secondary-hover: #333; - --bs-color-action-secondary-loading: #333; - --bs-color-action-secondary-pressed: #333; + --bs-color-opacity-invisible-black: rgba(255, 255, 255, 0); + --bs-color-opacity-invisible-white: rgba(255, 255, 255, 0); + --bs-color-action-disabled: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-enabled: #eee; + --bs-color-action-focus: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-highlighted: #eee; + --bs-color-action-hover: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-loading: #ff7900; + --bs-color-action-negative-enabled: #ff8081; + --bs-color-action-negative-focus: #ffb2b3; + --bs-color-action-negative-hover: #ffb2b3; + --bs-color-action-negative-loading: #ffe5e6; + --bs-color-action-negative-pressed: #ffe5e6; + --bs-color-action-pressed: #ff7900; --bs-color-action-selected: #ff7900; + --bs-color-action-support-enabled: rgba(255, 255, 255, 0.04); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-focus: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-hover: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-loading: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-pressed: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-action-visited: #a885d8; - --bs-color-always-accent: #ffd000; --bs-color-always-black: #000; - --bs-color-always-info: #26b2ff; - --bs-color-always-negative: #ea0305; - --bs-color-always-on-accent: #141414; --bs-color-always-on-black: #eee; - --bs-color-always-on-info: #141414; - --bs-color-always-on-negative: #eee; - --bs-color-always-on-positive: #141414; - --bs-color-always-on-warning: #141414; - --bs-color-always-on-white: #141414; - --bs-color-always-positive: #3de35a; - --bs-color-always-warning: #ffd000; + --bs-color-always-on-white: #000; --bs-color-always-white: #fff; - --bs-color-bg-brand-primary: #ff7900; + --bs-color-bg-emphasized: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; - --bs-color-bg-status-accent-emphasized: #ffd000; - --bs-color-bg-status-accent-muted: #353228; - --bs-color-bg-status-info-emphasized: #26b2ff; - --bs-color-bg-status-info-muted: #003857; - --bs-color-bg-status-negative-emphasized: #ea0305; - --bs-color-bg-status-negative-muted: #4d0001; - --bs-color-bg-status-neutral: #272727; - --bs-color-bg-status-positive-emphasized: #3de35a; - --bs-color-bg-status-positive-muted: #0a4715; - --bs-color-bg-status-warning-emphasized: #ffd000; - --bs-color-bg-status-warning-muted: #3d3100; --bs-color-bg-tertiary: #353228; --bs-color-border-brand-primary: #ff7900; - --bs-color-border-default: #555; - --bs-color-border-emphasized: #eee; + --bs-color-border-default: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-border-emphasized: rgba(255, 255, 255, 0.92); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-focus: #eee; --bs-color-border-focus-inset: #141414; --bs-color-border-on-brand-primary: #000; --bs-color-content-brand-primary: #ff7900; --bs-color-content-default: #eee; - --bs-color-content-disabled: #555; - --bs-color-content-muted: #bbb; + --bs-color-content-disabled: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-content-muted: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-content-on-action-disabled: #000; - --bs-color-content-on-action-negative: #fff; - --bs-color-content-on-action-primary-enabled: #000; - --bs-color-content-on-action-primary-focus: #000; - --bs-color-content-on-action-primary-hover: #000; - --bs-color-content-on-action-primary-loading: #000; - --bs-color-content-on-action-primary-pressed: #000; + --bs-color-content-on-action-enabled: #000; + --bs-color-content-on-action-focus: #000; + --bs-color-content-on-action-highlighted: #000; + --bs-color-content-on-action-hover: #000; + --bs-color-content-on-action-loading: #000; + --bs-color-content-on-action-negative: #000; + --bs-color-content-on-action-pressed: #000; --bs-color-content-on-brand-primary: #000; - --bs-color-content-on-status-accent-emphasized: #000; - --bs-color-content-on-status-accent-muted: #eee; - --bs-color-content-on-status-info-emphasized: #000; - --bs-color-content-on-status-info-muted: #eee; - --bs-color-content-on-status-negative-emphasized: #fff; - --bs-color-content-on-status-negative-muted: #eee; - --bs-color-content-on-status-positive-emphasized: #000; - --bs-color-content-on-status-positive-muted: #eee; - --bs-color-content-on-status-warning-emphasized: #000; - --bs-color-content-on-status-warning-muted: #eee; + --bs-color-content-on-overlay-emphasized: #000; + --bs-color-content-on-status-emphasized: #000; + --bs-color-content-on-status-emphasized-neutral: #000; + --bs-color-content-on-status-muted: #eee; --bs-color-content-status-info: #26b2ff; --bs-color-content-status-negative: #ea0305; --bs-color-content-status-positive: #3de35a; --bs-color-content-status-warning: #ffd000; - --bs-color-elevation-drag: #272727; - --bs-color-elevation-drag-on-bg-secondary: #333; - --bs-color-elevation-modal: #333; - --bs-color-elevation-overlay-default: #272727; - --bs-color-elevation-overlay-default-on-bg-secondary: #333; - --bs-color-elevation-overlay-emphasized: #444; - --bs-color-elevation-overlay-emphasized-on-bg-secondary: #444; - --bs-color-elevation-raised: #1f1f1f; - --bs-color-elevation-raised-on-bg-secondary: #272727; - --bs-color-gradient-skeleton-middle: #272727; - --bs-color-gradient-skeleton-start-end: #1f1f1f; + --bs-color-overlay-default: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-overlay-drag: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-overlay-emphasized: #eee; + --bs-color-overlay-modal: #333; + --bs-color-surface-brand-primary: #ff7900; + --bs-color-surface-status-accent-emphasized: #ffe270; + --bs-color-surface-status-accent-muted: #353228; + --bs-color-surface-status-info-emphasized: #8ad5ff; + --bs-color-surface-status-info-muted: #003857; + --bs-color-surface-status-negative-emphasized: #ff8081; + --bs-color-surface-status-negative-muted: #4d0001; + --bs-color-surface-status-neutral-emphasized: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-neutral-muted: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-positive-emphasized: #94f0a4; + --bs-color-surface-status-positive-muted: #0a4715; + --bs-color-surface-status-warning-emphasized: #ffe270; + --bs-color-surface-status-warning-muted: #3d3100; --bs-color-decorative-accent-1-default: #50be87; --bs-color-decorative-accent-1-emphasized: #2e7b54; --bs-color-decorative-accent-1-muted: #c0e8d4; @@ -1024,14 +980,6 @@ $utilities: (); --bs-color-decorative-skin-tint-700: #7e4f2a; --bs-color-decorative-skin-tint-800: #553720; --bs-color-decorative-skin-tint-900: #2e2014; - --bs-elevation-color-none: rgba(0, 0, 0, 0); - --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-overlay-default: rgba(0, 0, 0, 0.24); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-overlay-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero } .opacity-invisible { @@ -1098,12 +1046,12 @@ $utilities: (); .border-light { --bs-border-opacity: 1; - border-color: rgba(112, 112, 112, var(--bs-border-opacity)) !important; + border-color: rgba(143, 143, 143, var(--bs-border-opacity)) !important; } .border-dark { --bs-border-opacity: 1; - border-color: rgba(68, 68, 68, var(--bs-border-opacity)) !important; + border-color: rgba(51, 51, 51, var(--bs-border-opacity)) !important; } .border-black { @@ -10572,97 +10520,79 @@ $utilities: (); @include expect() { :root, [data-bs-theme="light"] { - --bs-color-transparent-default: rgba(0, 0, 0, 0); - --bs-color-action-disabled: #ccc; + --bs-color-opacity-invisible-black: rgba(0, 0, 0, 0); + --bs-color-opacity-invisible-white: rgba(255, 255, 255, 0); + --bs-color-action-disabled: rgba(0, 0, 0, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-enabled: #000; + --bs-color-action-focus: rgba(0, 0, 0, 0.68); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-highlighted: #000; + --bs-color-action-hover: rgba(0, 0, 0, 0.68); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-loading: #f15e00; --bs-color-action-negative-enabled: #ea0305; --bs-color-action-negative-focus: #b20002; --bs-color-action-negative-hover: #b20002; --bs-color-action-negative-loading: #800001; --bs-color-action-negative-pressed: #800001; - --bs-color-action-primary-enabled: #000; - --bs-color-action-primary-focus: #555; - --bs-color-action-primary-hover: #555; - --bs-color-action-primary-loading: #f16e00; - --bs-color-action-primary-pressed: #f16e00; - --bs-color-action-secondary-enabled: #f4f4f4; - --bs-color-action-secondary-focus: #eee; - --bs-color-action-secondary-hover: #eee; - --bs-color-action-secondary-loading: #eee; - --bs-color-action-secondary-pressed: #eee; - --bs-color-action-selected: #f16e00; + --bs-color-action-pressed: #f15e00; + --bs-color-action-selected: #f15e00; + --bs-color-action-support-enabled: rgba(0, 0, 0, 0.04); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-focus: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-hover: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-loading: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-pressed: rgba(0, 0, 0, 0.08); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-action-visited: #5b2f98; - --bs-color-always-accent: #ffd000; --bs-color-always-black: #000; - --bs-color-always-info: #26b2ff; - --bs-color-always-negative: #ea0305; - --bs-color-always-on-accent: #000; --bs-color-always-on-black: #fff; - --bs-color-always-on-info: #000; - --bs-color-always-on-negative: #fff; - --bs-color-always-on-positive: #000; - --bs-color-always-on-warning: #000; --bs-color-always-on-white: #000; - --bs-color-always-positive: #3de35a; - --bs-color-always-warning: #ffd000; --bs-color-always-white: #fff; - --bs-color-bg-brand-primary: #f16e00; + --bs-color-bg-emphasized: #141414; --bs-color-bg-primary: #fff; --bs-color-bg-secondary: #f4f4f4; - --bs-color-bg-status-accent-emphasized: #ffd000; - --bs-color-bg-status-accent-muted: #f9f5f0; - --bs-color-bg-status-info-emphasized: #26b2ff; - --bs-color-bg-status-info-muted: #f0faff; - --bs-color-bg-status-negative-emphasized: #ea0305; - --bs-color-bg-status-negative-muted: #ffe5e6; - --bs-color-bg-status-neutral: #f4f4f4; - --bs-color-bg-status-positive-emphasized: #3de35a; - --bs-color-bg-status-positive-muted: #edfcf0; - --bs-color-bg-status-warning-emphasized: #ffd000; - --bs-color-bg-status-warning-muted: #fff7d6; --bs-color-bg-tertiary: #f9f5f0; - --bs-color-border-brand-primary: #f16e00; - --bs-color-border-default: #ccc; + --bs-color-border-brand-primary: #f15e00; + --bs-color-border-default: rgba(0, 0, 0, 0.2); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-emphasized: #000; --bs-color-border-focus: #000; --bs-color-border-focus-inset: #fff; - --bs-color-border-on-brand-primary: #fff; - --bs-color-content-brand-primary: #f16e00; + --bs-color-border-on-brand-primary: #000; + --bs-color-content-brand-primary: #f15e00; --bs-color-content-default: #000; - --bs-color-content-disabled: #ccc; - --bs-color-content-muted: #555; + --bs-color-content-disabled: rgba(0, 0, 0, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-content-muted: rgba(0, 0, 0, 0.68); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-content-on-action-disabled: #fff; + --bs-color-content-on-action-enabled: #fff; + --bs-color-content-on-action-focus: #fff; + --bs-color-content-on-action-highlighted: #fff; + --bs-color-content-on-action-hover: #fff; + --bs-color-content-on-action-loading: #fff; --bs-color-content-on-action-negative: #fff; - --bs-color-content-on-action-primary-enabled: #fff; - --bs-color-content-on-action-primary-focus: #fff; - --bs-color-content-on-action-primary-hover: #fff; - --bs-color-content-on-action-primary-loading: #fff; - --bs-color-content-on-action-primary-pressed: #fff; - --bs-color-content-on-brand-primary: #fff; - --bs-color-content-on-status-accent-emphasized: #000; - --bs-color-content-on-status-accent-muted: #000; - --bs-color-content-on-status-info-emphasized: #000; - --bs-color-content-on-status-info-muted: #000; - --bs-color-content-on-status-negative-emphasized: #fff; - --bs-color-content-on-status-negative-muted: #000; - --bs-color-content-on-status-positive-emphasized: #000; - --bs-color-content-on-status-positive-muted: #000; - --bs-color-content-on-status-warning-emphasized: #000; - --bs-color-content-on-status-warning-muted: #000; + --bs-color-content-on-action-pressed: #fff; + --bs-color-content-on-brand-primary: #000; + --bs-color-content-on-overlay-emphasized: #fff; + --bs-color-content-on-status-emphasized: #000; + --bs-color-content-on-status-emphasized-neutral: #fff; + --bs-color-content-on-status-muted: #000; --bs-color-content-status-info: #26b2ff; --bs-color-content-status-negative: #ea0305; --bs-color-content-status-positive: #3de35a; --bs-color-content-status-warning: #ffd000; - --bs-color-elevation-drag: #f4f4f4; - --bs-color-elevation-drag-on-bg-secondary: #f4f4f4; - --bs-color-elevation-modal: #fff; - --bs-color-elevation-overlay-default: #fff; - --bs-color-elevation-overlay-default-on-bg-secondary: #fff; - --bs-color-elevation-overlay-emphasized: #333; - --bs-color-elevation-overlay-emphasized-on-bg-secondary: #333; - --bs-color-elevation-raised: #fff; - --bs-color-elevation-raised-on-bg-secondary: #fff; - --bs-color-gradient-skeleton-middle: #eee; - --bs-color-gradient-skeleton-start-end: #f4f4f4; + --bs-color-overlay-default: #fff; + --bs-color-overlay-drag: rgba(0, 0, 0, 0.04); + --bs-color-overlay-emphasized: #272727; + --bs-color-overlay-modal: #fff; + --bs-color-surface-brand-primary: #ff7900; + --bs-color-surface-status-accent-emphasized: #ffd000; + --bs-color-surface-status-accent-muted: rgba(255, 208, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-info-emphasized: #26b2ff; + --bs-color-surface-status-info-muted: rgba(38, 178, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-negative-emphasized: #ea0305; + --bs-color-surface-status-negative-muted: rgba(234, 3, 5, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-neutral-emphasized: rgba(0, 0, 0, 0.84); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-neutral-muted: rgba(0, 0, 0, 0.04); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-positive-emphasized: #3de35a; + --bs-color-surface-status-positive-muted: rgba(61, 227, 90, 0.12); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-warning-emphasized: #ffd000; + --bs-color-surface-status-warning-muted: rgba(255, 208, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-decorative-accent-1-default: #50be87; --bs-color-decorative-accent-1-emphasized: #2e7b54; --bs-color-decorative-accent-1-muted: #c0e8d4; @@ -10693,108 +10623,82 @@ $utilities: (); --bs-color-decorative-skin-tint-700: #7e4f2a; --bs-color-decorative-skin-tint-800: #553720; --bs-color-decorative-skin-tint-900: #2e2014; - --bs-elevation-color-none: rgba(0, 0, 0, 0); - --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-overlay-default: rgba(0, 0, 0, 0.24); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-overlay-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero } [data-bs-theme="dark"] { - --bs-color-transparent-default: rgba(0, 0, 0, 0); - --bs-color-action-disabled: #555; - --bs-color-action-negative-enabled: #ea0305; - --bs-color-action-negative-focus: #b20002; - --bs-color-action-negative-hover: #b20002; - --bs-color-action-negative-loading: #800001; - --bs-color-action-negative-pressed: #800001; - --bs-color-action-primary-enabled: #eee; - --bs-color-action-primary-focus: #bbb; - --bs-color-action-primary-hover: #bbb; - --bs-color-action-primary-loading: #ff7900; - --bs-color-action-primary-pressed: #ff7900; - --bs-color-action-secondary-enabled: #272727; - --bs-color-action-secondary-focus: #333; - --bs-color-action-secondary-hover: #333; - --bs-color-action-secondary-loading: #333; - --bs-color-action-secondary-pressed: #333; + --bs-color-opacity-invisible-black: rgba(255, 255, 255, 0); + --bs-color-opacity-invisible-white: rgba(255, 255, 255, 0); + --bs-color-action-disabled: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-enabled: #eee; + --bs-color-action-focus: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-highlighted: #eee; + --bs-color-action-hover: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-loading: #ff7900; + --bs-color-action-negative-enabled: #ff8081; + --bs-color-action-negative-focus: #ffb2b3; + --bs-color-action-negative-hover: #ffb2b3; + --bs-color-action-negative-loading: #ffe5e6; + --bs-color-action-negative-pressed: #ffe5e6; + --bs-color-action-pressed: #ff7900; --bs-color-action-selected: #ff7900; + --bs-color-action-support-enabled: rgba(255, 255, 255, 0.04); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-focus: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-hover: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-loading: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-action-support-pressed: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-action-visited: #a885d8; - --bs-color-always-accent: #ffd000; --bs-color-always-black: #000; - --bs-color-always-info: #26b2ff; - --bs-color-always-negative: #ea0305; - --bs-color-always-on-accent: #141414; --bs-color-always-on-black: #eee; - --bs-color-always-on-info: #141414; - --bs-color-always-on-negative: #eee; - --bs-color-always-on-positive: #141414; - --bs-color-always-on-warning: #141414; - --bs-color-always-on-white: #141414; - --bs-color-always-positive: #3de35a; - --bs-color-always-warning: #ffd000; + --bs-color-always-on-white: #000; --bs-color-always-white: #fff; - --bs-color-bg-brand-primary: #ff7900; + --bs-color-bg-emphasized: #333; --bs-color-bg-primary: #141414; --bs-color-bg-secondary: #1f1f1f; - --bs-color-bg-status-accent-emphasized: #ffd000; - --bs-color-bg-status-accent-muted: #353228; - --bs-color-bg-status-info-emphasized: #26b2ff; - --bs-color-bg-status-info-muted: #003857; - --bs-color-bg-status-negative-emphasized: #ea0305; - --bs-color-bg-status-negative-muted: #4d0001; - --bs-color-bg-status-neutral: #272727; - --bs-color-bg-status-positive-emphasized: #3de35a; - --bs-color-bg-status-positive-muted: #0a4715; - --bs-color-bg-status-warning-emphasized: #ffd000; - --bs-color-bg-status-warning-muted: #3d3100; --bs-color-bg-tertiary: #353228; --bs-color-border-brand-primary: #ff7900; - --bs-color-border-default: #555; - --bs-color-border-emphasized: #eee; + --bs-color-border-default: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-border-emphasized: rgba(255, 255, 255, 0.92); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-border-focus: #eee; --bs-color-border-focus-inset: #141414; --bs-color-border-on-brand-primary: #000; --bs-color-content-brand-primary: #ff7900; --bs-color-content-default: #eee; - --bs-color-content-disabled: #555; - --bs-color-content-muted: #bbb; + --bs-color-content-disabled: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-content-muted: rgba(255, 255, 255, 0.64); // stylelint-disable-line @stylistic/number-leading-zero --bs-color-content-on-action-disabled: #000; - --bs-color-content-on-action-negative: #fff; - --bs-color-content-on-action-primary-enabled: #000; - --bs-color-content-on-action-primary-focus: #000; - --bs-color-content-on-action-primary-hover: #000; - --bs-color-content-on-action-primary-loading: #000; - --bs-color-content-on-action-primary-pressed: #000; + --bs-color-content-on-action-enabled: #000; + --bs-color-content-on-action-focus: #000; + --bs-color-content-on-action-highlighted: #000; + --bs-color-content-on-action-hover: #000; + --bs-color-content-on-action-loading: #000; + --bs-color-content-on-action-negative: #000; + --bs-color-content-on-action-pressed: #000; --bs-color-content-on-brand-primary: #000; - --bs-color-content-on-status-accent-emphasized: #000; - --bs-color-content-on-status-accent-muted: #eee; - --bs-color-content-on-status-info-emphasized: #000; - --bs-color-content-on-status-info-muted: #eee; - --bs-color-content-on-status-negative-emphasized: #fff; - --bs-color-content-on-status-negative-muted: #eee; - --bs-color-content-on-status-positive-emphasized: #000; - --bs-color-content-on-status-positive-muted: #eee; - --bs-color-content-on-status-warning-emphasized: #000; - --bs-color-content-on-status-warning-muted: #eee; + --bs-color-content-on-overlay-emphasized: #000; + --bs-color-content-on-status-emphasized: #000; + --bs-color-content-on-status-emphasized-neutral: #000; + --bs-color-content-on-status-muted: #eee; --bs-color-content-status-info: #26b2ff; --bs-color-content-status-negative: #ea0305; --bs-color-content-status-positive: #3de35a; --bs-color-content-status-warning: #ffd000; - --bs-color-elevation-drag: #272727; - --bs-color-elevation-drag-on-bg-secondary: #333; - --bs-color-elevation-modal: #333; - --bs-color-elevation-overlay-default: #272727; - --bs-color-elevation-overlay-default-on-bg-secondary: #333; - --bs-color-elevation-overlay-emphasized: #444; - --bs-color-elevation-overlay-emphasized-on-bg-secondary: #444; - --bs-color-elevation-raised: #1f1f1f; - --bs-color-elevation-raised-on-bg-secondary: #272727; - --bs-color-gradient-skeleton-middle: #272727; - --bs-color-gradient-skeleton-start-end: #1f1f1f; + --bs-color-overlay-default: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-overlay-drag: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-overlay-emphasized: #eee; + --bs-color-overlay-modal: #333; + --bs-color-surface-brand-primary: #ff7900; + --bs-color-surface-status-accent-emphasized: #ffe270; + --bs-color-surface-status-accent-muted: #353228; + --bs-color-surface-status-info-emphasized: #8ad5ff; + --bs-color-surface-status-info-muted: #003857; + --bs-color-surface-status-negative-emphasized: #ff8081; + --bs-color-surface-status-negative-muted: #4d0001; + --bs-color-surface-status-neutral-emphasized: rgba(255, 255, 255, 0.8); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-neutral-muted: rgba(255, 255, 255, 0.08); // stylelint-disable-line @stylistic/number-leading-zero + --bs-color-surface-status-positive-emphasized: #94f0a4; + --bs-color-surface-status-positive-muted: #0a4715; + --bs-color-surface-status-warning-emphasized: #ffe270; + --bs-color-surface-status-warning-muted: #3d3100; --bs-color-decorative-accent-1-default: #50be87; --bs-color-decorative-accent-1-emphasized: #2e7b54; --bs-color-decorative-accent-1-muted: #c0e8d4; @@ -10825,14 +10729,6 @@ $utilities: (); --bs-color-decorative-skin-tint-700: #7e4f2a; --bs-color-decorative-skin-tint-800: #553720; --bs-color-decorative-skin-tint-900: #2e2014; - --bs-elevation-color-none: rgba(0, 0, 0, 0); - --bs-elevation-color-raised: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-drag: rgba(0, 0, 0, 0.32); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-overlay-default: rgba(0, 0, 0, 0.24); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-overlay-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-default: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-emphasized: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero - --bs-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, 0.16); // stylelint-disable-line @stylistic/number-leading-zero } .opacity-0 { @@ -10939,12 +10835,12 @@ $utilities: (); .border-light { --bs-border-opacity: 1; - border-color: rgba(112, 112, 112, var(--bs-border-opacity)) !important; + border-color: rgba(143, 143, 143, var(--bs-border-opacity)) !important; } .border-dark { --bs-border-opacity: 1; - border-color: rgba(68, 68, 68, var(--bs-border-opacity)) !important; + border-color: rgba(51, 51, 51, var(--bs-border-opacity)) !important; } .border-black { diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss index d0743f2b9b..60b4c2d7f6 100644 --- a/scss/tokens/_component.scss +++ b/scss/tokens/_component.scss @@ -4,165 +4,165 @@ // Button // scss-docs-start ouds-component-button -// $ouds-button-size-max-height: $ouds-dimension-600 !default; -// $ouds-button-size-min-height: $ouds-dimension-600 !default; -// $ouds-button-size-min-width: $ouds-dimension-600 !default; -// $ouds-button-border-radius: $ouds-border-radius-none !default; -// $ouds-button-border-width-default: $ouds-border-width-default !default; -// $ouds-button-border-width-default-interaction: $ouds-border-width-medium !default; -// $ouds-button-border-width-minimal: $ouds-border-width-none !default; -// $ouds-button-border-width-minimal-interaction: $ouds-border-width-none !default; -// $ouds-button-color-bg-default-focus-mono: $ouds-color-repository-opacity-black-higher !default; -// $ouds-button-color-bg-default-hover-mono: $ouds-color-repository-opacity-black-higher !default; -// $ouds-button-color-bg-default-loading-mono: $ouds-color-repository-opacity-white-higher !default; -// $ouds-button-color-bg-default-pressed-mono: $ouds-color-repository-opacity-white-higher !default; -// $ouds-button-color-bg-minimal-focus-mono: $ouds-color-repository-opacity-black-higher !default; -// $ouds-button-color-bg-minimal-hover-mono: $ouds-color-repository-opacity-black-higher !default; -// $ouds-button-color-bg-minimal-loading-mono: $ouds-color-repository-opacity-white-higher !default; -// $ouds-button-color-bg-minimal-pressed-mono: $ouds-color-repository-opacity-white-higher !default; -// $ouds-button-color-bg-strong-disabled-mono: $ouds-color-repository-opacity-black-medium !default; -// $ouds-button-color-bg-strong-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-bg-strong-focus-mono: $ouds-color-repository-opacity-black-higher !default; -// $ouds-button-color-bg-strong-hover-mono: $ouds-color-repository-opacity-black-higher !default; -// $ouds-button-color-bg-strong-loading-mono: $ouds-color-repository-opacity-white-higher !default; -// $ouds-button-color-bg-strong-pressed-mono: $ouds-color-repository-opacity-white-higher !default; -// $ouds-button-color-border-default-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-content-default-disabled-mono: $ouds-color-repository-opacity-black-medium !default; -// $ouds-button-color-content-default-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-content-default-focus-mono: $ouds-color-repository-neutral-muted-white !default; -// $ouds-button-color-content-default-hover-mono: $ouds-color-repository-neutral-muted-white !default; -// $ouds-button-color-content-default-loading-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-content-default-pressed-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-content-minimal-disabled-mono: $ouds-color-repository-opacity-black-medium !default; -// $ouds-button-color-content-minimal-enabled-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-content-minimal-focus-mono: $ouds-color-repository-neutral-muted-white !default; -// $ouds-button-color-content-minimal-hover-mono: $ouds-color-repository-neutral-muted-white !default; -// $ouds-button-color-content-minimal-loading-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-content-minimal-pressed-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-content-strong-disabled-mono: $ouds-color-repository-opacity-white-high !default; -// $ouds-button-color-content-strong-enabled-mono: $ouds-color-repository-neutral-muted-white !default; -// $ouds-button-color-content-strong-focus-mono: $ouds-color-repository-neutral-muted-white !default; -// $ouds-button-color-content-strong-hover-mono: $ouds-color-repository-neutral-muted-white !default; -// $ouds-button-color-content-strong-loading-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-content-strong-pressed-mono: $ouds-color-repository-neutral-emphasized-black !default; -// $ouds-button-color-bg-default-disabled: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-disabled-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-disabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-enabled: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-enabled-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-enabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-focus: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-focus-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-hover: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-hover-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-loading: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-loading-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-pressed: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-default-pressed-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-minimal-disabled: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-minimal-disabled-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-minimal-disabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-minimal-enabled: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-minimal-enabled-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-minimal-enabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-bg-minimal-focus: $ouds-color-action-support-focus !default; -// $ouds-button-color-bg-minimal-focus-inverse: $ouds-color-action-support-focus-inverse !default; -// $ouds-button-color-bg-minimal-hover: $ouds-color-action-support-hover !default; -// $ouds-button-color-bg-minimal-hover-inverse: $ouds-color-action-support-hover-inverse !default; -// $ouds-button-color-bg-minimal-loading: $ouds-color-action-support-loading !default; -// $ouds-button-color-bg-minimal-loading-inverse: $ouds-color-action-support-loading-inverse !default; -// $ouds-button-color-bg-minimal-pressed: $ouds-color-action-support-pressed !default; -// $ouds-button-color-bg-minimal-pressed-inverse: $ouds-color-action-support-pressed-inverse !default; -// $ouds-button-color-border-default-disabled: $ouds-color-action-disabled !default; -// $ouds-button-color-border-default-disabled-inverse: $ouds-color-action-disabled-inverse !default; -// $ouds-button-color-border-default-disabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-default-enabled: $ouds-color-action-enabled !default; -// $ouds-button-color-border-default-enabled-inverse: $ouds-color-action-enabled-inverse !default; -// $ouds-button-color-border-default-focus: $ouds-color-action-focus !default; -// $ouds-button-color-border-default-focus-inverse: $ouds-color-action-focus-inverse !default; -// $ouds-button-color-border-default-focus-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-default-hover: $ouds-color-action-hover !default; -// $ouds-button-color-border-default-hover-inverse: $ouds-color-action-hover-inverse !default; -// $ouds-button-color-border-default-hover-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-default-loading: $ouds-color-action-loading !default; -// $ouds-button-color-border-default-loading-inverse: $ouds-color-action-loading-inverse !default; -// $ouds-button-color-border-default-loading-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-default-pressed: $ouds-color-action-pressed !default; -// $ouds-button-color-border-default-pressed-inverse: $ouds-color-action-pressed-inverse !default; -// $ouds-button-color-border-default-pressed-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-disabled: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-disabled-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-disabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-enabled: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-enabled-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-enabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-focus: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-focus-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-focus-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-hover: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-hover-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-hover-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-loading: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-loading-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-loading-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-pressed: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-pressed-inverse: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-minimal-pressed-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-strong-disabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-strong-enabled-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-strong-focus-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-strong-hover-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-strong-loading-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-border-strong-pressed-mono: $ouds-color-opacity-invisible-black !default; -// $ouds-button-color-content-default-disabled: $ouds-color-action-disabled !default; -// $ouds-button-color-content-default-disabled-inverse: $ouds-color-action-disabled-inverse !default; -// $ouds-button-color-content-default-enabled: $ouds-color-action-enabled !default; -// $ouds-button-color-content-default-enabled-inverse: $ouds-color-action-enabled-inverse !default; -// $ouds-button-color-content-default-focus: $ouds-color-action-focus !default; -// $ouds-button-color-content-default-focus-inverse: $ouds-color-action-focus-inverse !default; -// $ouds-button-color-content-default-hover: $ouds-color-action-hover !default; -// $ouds-button-color-content-default-hover-inverse: $ouds-color-action-hover-inverse !default; -// $ouds-button-color-content-default-loading: $ouds-color-action-loading !default; -// $ouds-button-color-content-default-loading-inverse: $ouds-color-action-loading-inverse !default; -// $ouds-button-color-content-default-pressed: $ouds-color-action-pressed !default; -// $ouds-button-color-content-default-pressed-inverse: $ouds-color-action-pressed-inverse !default; -// $ouds-button-color-content-minimal-disabled: $ouds-color-action-disabled !default; -// $ouds-button-color-content-minimal-disabled-inverse: $ouds-color-action-disabled-inverse !default; -// $ouds-button-color-content-minimal-enabled: $ouds-color-action-enabled !default; -// $ouds-button-color-content-minimal-enabled-inverse: $ouds-color-action-enabled-inverse !default; -// $ouds-button-color-content-minimal-focus: $ouds-color-action-focus !default; -// $ouds-button-color-content-minimal-focus-inverse: $ouds-color-action-focus-inverse !default; -// $ouds-button-color-content-minimal-hover: $ouds-color-action-hover !default; -// $ouds-button-color-content-minimal-hover-inverse: $ouds-color-action-hover-inverse !default; -// $ouds-button-color-content-minimal-loading: $ouds-color-action-loading !default; -// $ouds-button-color-content-minimal-loading-inverse: $ouds-color-action-loading-inverse !default; -// $ouds-button-color-content-minimal-pressed: $ouds-color-action-pressed !default; -// $ouds-button-color-content-minimal-pressed-inverse: $ouds-color-action-pressed-inverse !default; -// $ouds-button-color-content-strong-disabled: $ouds-color-action-disabled !default; -// $ouds-button-color-content-strong-disabled-inverse: $ouds-color-action-disabled-inverse !default; -// $ouds-button-color-content-strong-enabled: $ouds-color-action-enabled !default; -// $ouds-button-color-content-strong-enabled-inverse: $ouds-color-action-enabled-inverse !default; -// $ouds-button-color-content-strong-focus: $ouds-color-action-focus !default; -// $ouds-button-color-content-strong-focus-inverse: $ouds-color-action-focus-inverse !default; -// $ouds-button-color-content-strong-hover: $ouds-color-action-hover !default; -// $ouds-button-color-content-strong-hover-inverse: $ouds-color-action-hover-inverse !default; -// $ouds-button-color-content-strong-loading: $ouds-color-action-loading !default; -// $ouds-button-color-content-strong-loading-inverse: $ouds-color-action-loading-inverse !default; -// $ouds-button-color-content-strong-pressed: $ouds-color-action-pressed !default; -// $ouds-button-color-content-strong-pressed-inverse: $ouds-color-action-pressed-inverse !default; -// $ouds-button-size-icon: $ouds-size-icon-with-label-large-size-xs !default; -// $ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-sm !default; -// $ouds-button-size-loader: $ouds-size-icon-with-label-large-size-xs !default; -// $ouds-button-space-column-gap-arrow: $ouds-space-column-gap-shorter !default; -// $ouds-button-space-column-gap-icon: $ouds-space-column-gap-short !default; -// $ouds-button-space-inset-icon-alone: $ouds-space-inset-medium !default; -// $ouds-button-space-padding-block: $ouds-space-padding-block-medium !default; -// $ouds-button-space-padding-inline-arrow-end: $ouds-space-padding-inline-tall !default; -// $ouds-button-space-padding-inline-arrow-start: $ouds-space-padding-inline-tall !default; -// $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-spacious !default; -// $ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-huge !default; -// $ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-taller !default; -// $ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-spacious !default; +$ouds-button-size-max-height: $ouds-dimension-600 !default; +$ouds-button-size-min-height: $ouds-dimension-600 !default; +$ouds-button-size-min-width: $ouds-dimension-600 !default; +$ouds-button-border-radius: $ouds-border-radius-none !default; +$ouds-button-border-width-default: $ouds-border-width-default !default; +$ouds-button-border-width-default-interaction: $ouds-border-width-medium !default; +$ouds-button-border-width-minimal: $ouds-border-width-none !default; +$ouds-button-border-width-minimal-interaction: $ouds-border-width-none !default; +// $ouds-button-color-bg-default-focus-mono: var(--#{$prefix}color-repository-opacity-black-higher) !default; +// $ouds-button-color-bg-default-hover-mono: var(--#{$prefix}color-repository-opacity-black-higher) !default; +// $ouds-button-color-bg-default-loading-mono: var(--#{$prefix}color-repository-opacity-white-higher) !default; +// $ouds-button-color-bg-default-pressed-mono: var(--#{$prefix}color-repository-opacity-white-higher) !default; +// $ouds-button-color-bg-minimal-focus-mono: var(--#{$prefix}color-repository-opacity-black-higher) !default; +// $ouds-button-color-bg-minimal-hover-mono: var(--#{$prefix}color-repository-opacity-black-higher) !default; +// $ouds-button-color-bg-minimal-loading-mono: var(--#{$prefix}color-repository-opacity-white-higher) !default; +// $ouds-button-color-bg-minimal-pressed-mono: var(--#{$prefix}color-repository-opacity-white-higher) !default; +// $ouds-button-color-bg-strong-disabled-mono: var(--#{$prefix}color-repository-opacity-black-medium) !default; +// $ouds-button-color-bg-strong-enabled-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-bg-strong-focus-mono: var(--#{$prefix}color-repository-opacity-black-higher) !default; +// $ouds-button-color-bg-strong-hover-mono: var(--#{$prefix}color-repository-opacity-black-higher) !default; +// $ouds-button-color-bg-strong-loading-mono: var(--#{$prefix}color-repository-opacity-white-higher) !default; +// $ouds-button-color-bg-strong-pressed-mono: var(--#{$prefix}color-repository-opacity-white-higher) !default; +// $ouds-button-color-border-default-enabled-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-content-default-disabled-mono: var(--#{$prefix}color-repository-opacity-black-medium) !default; +// $ouds-button-color-content-default-enabled-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-content-default-focus-mono: var(--#{$prefix}color-repository-neutral-muted-white) !default; +// $ouds-button-color-content-default-hover-mono: var(--#{$prefix}color-repository-neutral-muted-white) !default; +// $ouds-button-color-content-default-loading-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-content-default-pressed-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-content-minimal-disabled-mono: var(--#{$prefix}color-repository-opacity-black-medium) !default; +// $ouds-button-color-content-minimal-enabled-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-content-minimal-focus-mono: var(--#{$prefix}color-repository-neutral-muted-white) !default; +// $ouds-button-color-content-minimal-hover-mono: var(--#{$prefix}color-repository-neutral-muted-white) !default; +// $ouds-button-color-content-minimal-loading-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-content-minimal-pressed-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-content-strong-disabled-mono: var(--#{$prefix}color-repository-opacity-white-high) !default; +// $ouds-button-color-content-strong-enabled-mono: var(--#{$prefix}color-repository-neutral-muted-white) !default; +// $ouds-button-color-content-strong-focus-mono: var(--#{$prefix}color-repository-neutral-muted-white) !default; +// $ouds-button-color-content-strong-hover-mono: var(--#{$prefix}color-repository-neutral-muted-white) !default; +// $ouds-button-color-content-strong-loading-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +// $ouds-button-color-content-strong-pressed-mono: var(--#{$prefix}color-repository-neutral-emphasized-black) !default; +$ouds-button-color-bg-default-disabled: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-default-disabled-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-default-disabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-bg-default-enabled: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-default-enabled-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-default-enabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-bg-default-focus: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-default-focus-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-bg-default-hover: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-default-hover-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-bg-default-loading: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-default-loading-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-bg-default-pressed: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-default-pressed-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-bg-minimal-disabled: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-minimal-disabled-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-minimal-disabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-bg-minimal-enabled: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-minimal-enabled-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-bg-minimal-enabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-bg-minimal-focus: var(--#{$prefix}color-action-support-focus) !default; +// $ouds-button-color-bg-minimal-focus-inverse: var(--#{$prefix}color-action-support-focus-inverse) !default; +$ouds-button-color-bg-minimal-hover: var(--#{$prefix}color-action-support-hover) !default; +// $ouds-button-color-bg-minimal-hover-inverse: var(--#{$prefix}color-action-support-hover-inverse) !default; +$ouds-button-color-bg-minimal-loading: var(--#{$prefix}color-action-support-loading) !default; +// $ouds-button-color-bg-minimal-loading-inverse: var(--#{$prefix}color-action-support-loading-inverse) !default; +$ouds-button-color-bg-minimal-pressed: var(--#{$prefix}color-action-support-pressed) !default; +// $ouds-button-color-bg-minimal-pressed-inverse: var(--#{$prefix}color-action-support-pressed-inverse) !default; +$ouds-button-color-border-default-disabled: var(--#{$prefix}color-action-disabled) !default; +// $ouds-button-color-border-default-disabled-inverse: var(--#{$prefix}color-action-disabled-inverse) !default; +// $ouds-button-color-border-default-disabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-default-enabled: var(--#{$prefix}color-action-enabled) !default; +// $ouds-button-color-border-default-enabled-inverse: var(--#{$prefix}color-action-enabled-inverse) !default; +$ouds-button-color-border-default-focus: var(--#{$prefix}color-action-focus) !default; +// $ouds-button-color-border-default-focus-inverse: var(--#{$prefix}color-action-focus-inverse) !default; +// $ouds-button-color-border-default-focus-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-default-hover: var(--#{$prefix}color-action-hover) !default; +// $ouds-button-color-border-default-hover-inverse: var(--#{$prefix}color-action-hover-inverse) !default; +// $ouds-button-color-border-default-hover-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-default-loading: var(--#{$prefix}color-action-loading) !default; +// $ouds-button-color-border-default-loading-inverse: var(--#{$prefix}color-action-loading-inverse) !default; +// $ouds-button-color-border-default-loading-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-default-pressed: var(--#{$prefix}color-action-pressed) !default; +// $ouds-button-color-border-default-pressed-inverse: var(--#{$prefix}color-action-pressed-inverse) !default; +// $ouds-button-color-border-default-pressed-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-minimal-disabled: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-disabled-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-disabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-minimal-enabled: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-enabled-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-enabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-minimal-focus: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-focus-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-focus-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-minimal-hover: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-hover-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-hover-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-minimal-loading: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-loading-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-loading-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-minimal-pressed: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-pressed-inverse: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-minimal-pressed-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-strong-disabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-strong-enabled-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-strong-focus-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-strong-hover-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +// $ouds-button-color-border-strong-loading-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-border-strong-pressed-mono: var(--#{$prefix}color-opacity-invisible-black) !default; +$ouds-button-color-content-default-disabled: var(--#{$prefix}color-action-disabled) !default; +// $ouds-button-color-content-default-disabled-inverse: var(--#{$prefix}color-action-disabled-inverse) !default; +$ouds-button-color-content-default-enabled: var(--#{$prefix}color-action-enabled) !default; +// $ouds-button-color-content-default-enabled-inverse: var(--#{$prefix}color-action-enabled-inverse) !default; +$ouds-button-color-content-default-focus: var(--#{$prefix}color-action-focus) !default; +// $ouds-button-color-content-default-focus-inverse: var(--#{$prefix}color-action-focus-inverse) !default; +$ouds-button-color-content-default-hover: var(--#{$prefix}color-action-hover) !default; +// $ouds-button-color-content-default-hover-inverse: var(--#{$prefix}color-action-hover-inverse) !default; +$ouds-button-color-content-default-loading: var(--#{$prefix}color-action-loading) !default; +// $ouds-button-color-content-default-loading-inverse: var(--#{$prefix}color-action-loading-inverse) !default; +$ouds-button-color-content-default-pressed: var(--#{$prefix}color-action-pressed) !default; +// $ouds-button-color-content-default-pressed-inverse: var(--#{$prefix}color-action-pressed-inverse) !default; +$ouds-button-color-content-minimal-disabled: var(--#{$prefix}color-action-disabled) !default; +// $ouds-button-color-content-minimal-disabled-inverse: var(--#{$prefix}color-action-disabled-inverse) !default; +$ouds-button-color-content-minimal-enabled: var(--#{$prefix}color-action-enabled) !default; +// $ouds-button-color-content-minimal-enabled-inverse: var(--#{$prefix}color-action-enabled-inverse) !default; +$ouds-button-color-content-minimal-focus: var(--#{$prefix}color-action-focus) !default; +// $ouds-button-color-content-minimal-focus-inverse: var(--#{$prefix}color-action-focus-inverse) !default; +$ouds-button-color-content-minimal-hover: var(--#{$prefix}color-action-hover) !default; +// $ouds-button-color-content-minimal-hover-inverse: var(--#{$prefix}color-action-hover-inverse) !default; +$ouds-button-color-content-minimal-loading: var(--#{$prefix}color-action-loading) !default; +// $ouds-button-color-content-minimal-loading-inverse: var(--#{$prefix}color-action-loading-inverse) !default; +$ouds-button-color-content-minimal-pressed: var(--#{$prefix}color-action-pressed) !default; +// $ouds-button-color-content-minimal-pressed-inverse: var(--#{$prefix}color-action-pressed-inverse) !default; +$ouds-button-color-content-strong-disabled: var(--#{$prefix}color-action-disabled) !default; +// $ouds-button-color-content-strong-disabled-inverse: var(--#{$prefix}color-action-disabled-inverse) !default; +$ouds-button-color-content-strong-enabled: var(--#{$prefix}color-action-enabled) !default; +// $ouds-button-color-content-strong-enabled-inverse: var(--#{$prefix}color-action-enabled-inverse) !default; +$ouds-button-color-content-strong-focus: var(--#{$prefix}color-action-focus) !default; +// $ouds-button-color-content-strong-focus-inverse: var(--#{$prefix}color-action-focus-inverse) !default; +$ouds-button-color-content-strong-hover: var(--#{$prefix}color-action-hover) !default; +// $ouds-button-color-content-strong-hover-inverse: var(--#{$prefix}color-action-hover-inverse) !default; +$ouds-button-color-content-strong-loading: var(--#{$prefix}color-action-loading) !default; +// $ouds-button-color-content-strong-loading-inverse: var(--#{$prefix}color-action-loading-inverse) !default; +$ouds-button-color-content-strong-pressed: var(--#{$prefix}color-action-pressed) !default; +// $ouds-button-color-content-strong-pressed-inverse: var(--#{$prefix}color-action-pressed-inverse) !default; +$ouds-button-size-icon: $ouds-size-icon-with-label-large-size-xs !default; +$ouds-button-size-icon-only: $ouds-size-icon-with-label-large-size-sm !default; +$ouds-button-size-loader: $ouds-size-icon-with-label-large-size-xs !default; +$ouds-button-space-column-gap-arrow: $ouds-space-column-gap-shorter !default; +$ouds-button-space-column-gap-icon: $ouds-space-column-gap-short !default; +$ouds-button-space-inset-icon-alone: $ouds-space-inset-medium !default; +$ouds-button-space-padding-block: $ouds-space-padding-block-medium !default; +$ouds-button-space-padding-inline-arrow-end: $ouds-space-padding-inline-tall !default; +$ouds-button-space-padding-inline-arrow-start: $ouds-space-padding-inline-tall !default; +$ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-spacious !default; +$ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-huge !default; +$ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-taller !default; +$ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-spacious !default; // scss-docs-end ouds-component-button // Indicator diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss index 377a04ac16..883acc7297 100644 --- a/scss/tokens/_composite.scss +++ b/scss/tokens/_composite.scss @@ -6,7 +6,7 @@ // 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 var(--#{$prefix}elevation-spread-emphasized $ouds-elevation-color-emphasized) !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-default: $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default var(--#{$prefix}elevation-color-sticky-default) !default; diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss index 26eebe14d8..6e495f027b 100644 --- a/scss/tokens/_raw.scss +++ b/scss/tokens/_raw.scss @@ -35,15 +35,15 @@ $ouds-border-width-125: $ouds-border-base * 1.25 !default; // 5 // Color // scss-docs-start ouds-raw-color -// $ouds-color-decorative-amber-100: #fff0cc !default; -// $ouds-color-decorative-amber-200: #ffe199 !default; -// $ouds-color-decorative-amber-300: #ffd266 !default; -// $ouds-color-decorative-amber-400: #ffc333 !default; +$ouds-color-decorative-amber-100: #fff0cc !default; +$ouds-color-decorative-amber-200: #ffe199 !default; +$ouds-color-decorative-amber-300: #ffd266 !default; +$ouds-color-decorative-amber-400: #ffc333 !default; $ouds-color-decorative-amber-500: #ffb400 !default; -// $ouds-color-decorative-amber-600: #cc9000 !default; -// $ouds-color-decorative-amber-700: #996c00 !default; -// $ouds-color-decorative-amber-800: #664800 !default; -// $ouds-color-decorative-amber-900: #332400 !default; +$ouds-color-decorative-amber-600: #cc9000 !default; +$ouds-color-decorative-amber-700: #996c00 !default; +$ouds-color-decorative-amber-800: #664800 !default; +$ouds-color-decorative-amber-900: #332400 !default; $ouds-color-decorative-amethyst-100: #f1ecf9 !default; $ouds-color-decorative-amethyst-200: #e0d4f2 !default; $ouds-color-decorative-amethyst-300: #c5ade6 !default; @@ -91,8 +91,8 @@ $ouds-color-decorative-sky-800: #0c415a !default; $ouds-color-decorative-sky-900: #06202d !default; $ouds-color-functional-black: #000 !default; // $ouds-color-functional-dark-gray-80: #7a7a7a !default; -$ouds-color-functional-dark-gray-160: #707070 !default; -// $ouds-color-functional-dark-gray-240: #666 !default; +// $ouds-color-functional-dark-gray-160: #707070 !default; +$ouds-color-functional-dark-gray-240: #666 !default; // $ouds-color-functional-dark-gray-320: #5c5c5c !default; $ouds-color-functional-dark-gray-400: #555 !default; // $ouds-color-functional-dark-gray-480: #444 !default; @@ -115,14 +115,14 @@ $ouds-color-functional-light-gray-80: #f4f4f4 !default; $ouds-color-functional-light-gray-160: #eee !default; // $ouds-color-functional-light-gray-240: #e0e0e0 !default; // $ouds-color-functional-light-gray-320: #d6d6d6 !default; -// $ouds-color-functional-light-gray-400: #ccc !default; +$ouds-color-functional-light-gray-400: #ccc !default; // $ouds-color-functional-light-gray-480: #c2c2c2 !default; $ouds-color-functional-light-gray-560: #bbb !default; // $ouds-color-functional-light-gray-640: #adadad !default; // $ouds-color-functional-light-gray-720: #a3a3a3 !default; // $ouds-color-functional-light-gray-800: #999 !default; -// $ouds-color-functional-light-gray-880: #8f8f8f !default; -// $ouds-color-functional-light-gray-960: #858585 !default; +$ouds-color-functional-light-gray-880: #8f8f8f !default; +$ouds-color-functional-light-gray-960: #858585 !default; $ouds-color-functional-malachite-100: #edfcf0 !default; $ouds-color-functional-malachite-200: #c1f6ca !default; $ouds-color-functional-malachite-300: #94f0a4 !default; @@ -141,7 +141,7 @@ $ouds-color-functional-scarlet-600: #ea0305 !default; $ouds-color-functional-scarlet-700: #b20002 !default; $ouds-color-functional-scarlet-800: #800001 !default; $ouds-color-functional-scarlet-900: #4d0001 !default; -// $ouds-color-functional-sun-100: #fff7d6 !default; +$ouds-color-functional-sun-100: #fff7d6 !default; $ouds-color-functional-sun-200: #ffed99 !default; $ouds-color-functional-sun-300: #ffe270 !default; $ouds-color-functional-sun-400: #ffd73d !default; @@ -211,7 +211,7 @@ $ouds-color-orange-200: #ffc18a !default; $ouds-color-orange-300: #ffa554 !default; $ouds-color-orange-400: #ff9433 !default; $ouds-color-orange-500: #ff7900 !default; -$ouds-color-orange-550: #f16e00 !default; +$ouds-color-orange-550: #f15e00 !default; $ouds-color-orange-600: #e86e00 !default; $ouds-color-orange-700: #b55600 !default; $ouds-color-orange-800: #8c4300 !default; diff --git a/scss/tokens/_semantic-colors-custom-props.scss b/scss/tokens/_semantic-colors-custom-props.scss index 7a85673770..ed3a87b1d0 100644 --- a/scss/tokens/_semantic-colors-custom-props.scss +++ b/scss/tokens/_semantic-colors-custom-props.scss @@ -1,142 +1,78 @@ :root, [data-bs-theme="light"] { - --#{$prefix}color-transparent-default: #{$ouds-color-transparent-default-light}; + --#{$prefix}color-opacity-invisible-black: #{$ouds-color-opacity-invisible-black-light}; + --#{$prefix}color-opacity-invisible-white: #{$ouds-color-opacity-invisible-white-light}; --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-light}; - // --#{$prefix}color-action-disabled-on-bg-emphasized: #{$ouds-color-action-disabled-on-bg-emphasized-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-primary-enabled: #{$ouds-color-action-primary-enabled-light}; - // --#{$prefix}color-action-primary-enabled-on-bg-emphasized: #{$ouds-color-action-primary-enabled-on-bg-emphasized-light}; - --#{$prefix}color-action-primary-focus: #{$ouds-color-action-primary-focus-light}; - // --#{$prefix}color-action-primary-focus-on-bg-emphasized: #{$ouds-color-action-primary-focus-on-bg-emphasized-light}; - --#{$prefix}color-action-primary-hover: #{$ouds-color-action-primary-hover-light}; - // --#{$prefix}color-action-primary-hover-on-bg-emphasized: #{$ouds-color-action-primary-hover-on-bg-emphasized-light}; - --#{$prefix}color-action-primary-loading: #{$ouds-color-action-primary-loading-light}; - // --#{$prefix}color-action-primary-loading-on-bg-emphasized: #{$ouds-color-action-primary-loading-on-bg-emphasized-light}; - --#{$prefix}color-action-primary-pressed: #{$ouds-color-action-primary-pressed-light}; - // --#{$prefix}color-action-primary-pressed-on-bg-emphasized: #{$ouds-color-action-primary-pressed-on-bg-emphasized-light}; - --#{$prefix}color-action-secondary-enabled: #{$ouds-color-action-secondary-enabled-light}; - // --#{$prefix}color-action-secondary-enabled-on-bg-emphasized: #{$ouds-color-action-secondary-enabled-on-bg-emphasized-light}; - --#{$prefix}color-action-secondary-focus: #{$ouds-color-action-secondary-focus-light}; - // --#{$prefix}color-action-secondary-focus-on-bg-emphasized: #{$ouds-color-action-secondary-focus-on-bg-emphasized-light}; - --#{$prefix}color-action-secondary-hover: #{$ouds-color-action-secondary-hover-light}; - // --#{$prefix}color-action-secondary-hover-on-bg-emphasized: #{$ouds-color-action-secondary-hover-on-bg-emphasized-light}; - --#{$prefix}color-action-secondary-loading: #{$ouds-color-action-secondary-loading-light}; - // --#{$prefix}color-action-secondary-loading-on-bg-emphasized: #{$ouds-color-action-secondary-loading-on-bg-emphasized-light}; - --#{$prefix}color-action-secondary-pressed: #{$ouds-color-action-secondary-pressed-light}; - // --#{$prefix}color-action-secondary-pressed-on-bg-emphasized: #{$ouds-color-action-secondary-pressed-on-bg-emphasized-light}; + --#{$prefix}color-action-pressed: #{$ouds-color-action-pressed-light}; --#{$prefix}color-action-selected: #{$ouds-color-action-selected-light}; - // --#{$prefix}color-action-selected-on-bg-emphasized: #{$ouds-color-action-selected-on-bg-emphasized-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-action-visited-on-bg-emphasized: #{$ouds-color-action-visited-on-bg-emphasized-light}; - --#{$prefix}color-always-accent: #{$ouds-color-always-accent-light}; --#{$prefix}color-always-black: #{$ouds-color-always-black-light}; - --#{$prefix}color-always-info: #{$ouds-color-always-info-light}; - --#{$prefix}color-always-negative: #{$ouds-color-always-negative-light}; - --#{$prefix}color-always-on-accent: #{$ouds-color-always-on-accent-light}; --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black-light}; - --#{$prefix}color-always-on-info: #{$ouds-color-always-on-info-light}; - --#{$prefix}color-always-on-negative: #{$ouds-color-always-on-negative-light}; - --#{$prefix}color-always-on-positive: #{$ouds-color-always-on-positive-light}; - --#{$prefix}color-always-on-warning: #{$ouds-color-always-on-warning-light}; --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white-light}; - --#{$prefix}color-always-positive: #{$ouds-color-always-positive-light}; - --#{$prefix}color-always-warning: #{$ouds-color-always-warning-light}; --#{$prefix}color-always-white: #{$ouds-color-always-white-light}; - --#{$prefix}color-bg-brand-primary: #{$ouds-color-bg-brand-primary-light}; - // --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-light}; + --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-light}; --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-light}; --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-light}; - --#{$prefix}color-bg-status-accent-emphasized: #{$ouds-color-bg-status-accent-emphasized-light}; - --#{$prefix}color-bg-status-accent-muted: #{$ouds-color-bg-status-accent-muted-light}; - // --#{$prefix}color-bg-status-accent-muted-on-bg-emphasized: #{$ouds-color-bg-status-accent-muted-on-bg-emphasized-light}; - --#{$prefix}color-bg-status-info-emphasized: #{$ouds-color-bg-status-info-emphasized-light}; - --#{$prefix}color-bg-status-info-muted: #{$ouds-color-bg-status-info-muted-light}; - // --#{$prefix}color-bg-status-info-muted-on-bg-emphasized: #{$ouds-color-bg-status-info-muted-on-bg-emphasized-light}; - --#{$prefix}color-bg-status-negative-emphasized: #{$ouds-color-bg-status-negative-emphasized-light}; - --#{$prefix}color-bg-status-negative-muted: #{$ouds-color-bg-status-negative-muted-light}; - // --#{$prefix}color-bg-status-negative-muted-on-bg-emphasized: #{$ouds-color-bg-status-negative-muted-on-bg-emphasized-light}; - --#{$prefix}color-bg-status-neutral: #{$ouds-color-bg-status-neutral-light}; - // --#{$prefix}color-bg-status-neutral-on-bg-emphasized: #{$ouds-color-bg-status-neutral-on-bg-emphasized-light}; - --#{$prefix}color-bg-status-positive-emphasized: #{$ouds-color-bg-status-positive-emphasized-light}; - --#{$prefix}color-bg-status-positive-muted: #{$ouds-color-bg-status-positive-muted-light}; - // --#{$prefix}color-bg-status-positive-muted-on-bg-emphasized: #{$ouds-color-bg-status-positive-muted-on-bg-emphasized-light}; - --#{$prefix}color-bg-status-warning-emphasized: #{$ouds-color-bg-status-warning-emphasized-light}; - --#{$prefix}color-bg-status-warning-muted: #{$ouds-color-bg-status-warning-muted-light}; - // --#{$prefix}color-bg-status-warning-muted-on-bg-emphasized: #{$ouds-color-bg-status-warning-muted-on-bg-emphasized-light}; --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-light}; --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-light}; - // --#{$prefix}color-border-brand-primary-on-bg-emphasized: #{$ouds-color-border-brand-primary-on-bg-emphasized-light}; --#{$prefix}color-border-default: #{$ouds-color-border-default-light}; - // --#{$prefix}color-border-default-on-bg-emphasized: #{$ouds-color-border-default-on-bg-emphasized-light}; --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-light}; - // --#{$prefix}color-border-emphasized-on-bg-emphasized: #{$ouds-color-border-emphasized-on-bg-emphasized-light}; --#{$prefix}color-border-focus: #{$ouds-color-border-focus-light}; --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-light}; - // --#{$prefix}color-border-focus-inset-on-bg-emphasized: #{$ouds-color-border-focus-inset-on-bg-emphasized-light}; - // --#{$prefix}color-border-focus-on-bg-emphasized: #{$ouds-color-border-focus-on-bg-emphasized-light}; --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-light}; --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-light}; - // --#{$prefix}color-content-brand-primary-on-bg-emphasized: #{$ouds-color-content-brand-primary-on-bg-emphasized-light}; --#{$prefix}color-content-default: #{$ouds-color-content-default-light}; - // --#{$prefix}color-content-default-on-bg-emphasized: #{$ouds-color-content-default-on-bg-emphasized-light}; --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-light}; - // --#{$prefix}color-content-disabled-on-bg-emphasized: #{$ouds-color-content-disabled-on-bg-emphasized-light}; --#{$prefix}color-content-muted: #{$ouds-color-content-muted-light}; - // --#{$prefix}color-content-muted-on-bg-emphasized: #{$ouds-color-content-muted-on-bg-emphasized-light}; --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-light}; - // --#{$prefix}color-content-on-action-disabled-on-bg-emphasized: #{$ouds-color-content-on-action-disabled-on-bg-emphasized-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-negative: #{$ouds-color-content-on-action-negative-light}; - --#{$prefix}color-content-on-action-primary-enabled: #{$ouds-color-content-on-action-primary-enabled-light}; - // --#{$prefix}color-content-on-action-primary-enabled-on-bg-emphasized: #{$ouds-color-content-on-action-primary-enabled-on-bg-emphasized-light}; - --#{$prefix}color-content-on-action-primary-focus: #{$ouds-color-content-on-action-primary-focus-light}; - // --#{$prefix}color-content-on-action-primary-focus-on-bg-emphasized: #{$ouds-color-content-on-action-primary-focus-on-bg-emphasized-light}; - --#{$prefix}color-content-on-action-primary-hover: #{$ouds-color-content-on-action-primary-hover-light}; - // --#{$prefix}color-content-on-action-primary-hover-on-bg-emphasized: #{$ouds-color-content-on-action-primary-hover-on-bg-emphasized-light}; - --#{$prefix}color-content-on-action-primary-loading: #{$ouds-color-content-on-action-primary-loading-light}; - // --#{$prefix}color-content-on-action-primary-loading-on-bg-emphasized: #{$ouds-color-content-on-action-primary-loading-on-bg-emphasized-light}; - --#{$prefix}color-content-on-action-primary-pressed: #{$ouds-color-content-on-action-primary-pressed-light}; - // --#{$prefix}color-content-on-action-primary-pressed-on-bg-emphasized: #{$ouds-color-content-on-action-primary-pressed-on-bg-emphasized-light}; + --#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-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-accent-muted-on-bg-emphasized: #{$ouds-color-content-on-status-accent-muted-on-bg-emphasized-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-info-muted-on-bg-emphasized: #{$ouds-color-content-on-status-info-muted-on-bg-emphasized-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-negative-muted-on-bg-emphasized: #{$ouds-color-content-on-status-negative-muted-on-bg-emphasized-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-positive-muted-on-bg-emphasized: #{$ouds-color-content-on-status-positive-muted-on-bg-emphasized-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-on-status-warning-muted-on-bg-emphasized: #{$ouds-color-content-on-status-warning-muted-on-bg-emphasized-light}; + --#{$prefix}color-content-on-overlay-emphasized: #{$ouds-color-content-on-overlay-emphasized-light}; + --#{$prefix}color-content-on-status-emphasized: #{$ouds-color-content-on-status-emphasized-light}; + --#{$prefix}color-content-on-status-emphasized-neutral: #{$ouds-color-content-on-status-emphasized-neutral-light}; + --#{$prefix}color-content-on-status-muted: #{$ouds-color-content-on-status-muted-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-elevation-drag: #{$ouds-color-elevation-drag-light}; - // --#{$prefix}color-elevation-drag-on-bg-emphasized: #{$ouds-color-elevation-drag-on-bg-emphasized-light}; - --#{$prefix}color-elevation-drag-on-bg-secondary: #{$ouds-color-elevation-drag-on-bg-secondary-light}; - --#{$prefix}color-elevation-modal: #{$ouds-color-elevation-modal-light}; - --#{$prefix}color-elevation-overlay-default: #{$ouds-color-elevation-overlay-default-light}; - // --#{$prefix}color-elevation-overlay-default-on-bg-emphasized: #{$ouds-color-elevation-overlay-default-on-bg-emphasized-light}; - --#{$prefix}color-elevation-overlay-default-on-bg-secondary: #{$ouds-color-elevation-overlay-default-on-bg-secondary-light}; - --#{$prefix}color-elevation-overlay-emphasized: #{$ouds-color-elevation-overlay-emphasized-light}; - // --#{$prefix}color-elevation-overlay-emphasized-on-bg-emphasized: #{$ouds-color-elevation-overlay-emphasized-on-bg-emphasized-light}; - --#{$prefix}color-elevation-overlay-emphasized-on-bg-secondary: #{$ouds-color-elevation-overlay-emphasized-on-bg-secondary-light}; - --#{$prefix}color-elevation-raised: #{$ouds-color-elevation-raised-light}; - // --#{$prefix}color-elevation-raised-on-bg-emphasized: #{$ouds-color-elevation-raised-on-bg-emphasized-light}; - --#{$prefix}color-elevation-raised-on-bg-secondary: #{$ouds-color-elevation-raised-on-bg-secondary-light}; - --#{$prefix}color-gradient-skeleton-middle: #{$ouds-color-gradient-skeleton-middle-light}; - // --#{$prefix}color-gradient-skeleton-middle-on-bg-emphasized: #{$ouds-color-gradient-skeleton-middle-on-bg-emphasized-light}; - --#{$prefix}color-gradient-skeleton-start-end: #{$ouds-color-gradient-skeleton-start-end-light}; - // --#{$prefix}color-gradient-skeleton-start-end-on-bg-emphasized: #{$ouds-color-gradient-skeleton-start-end-on-bg-emphasized-light}; + --#{$prefix}color-overlay-default: #{$ouds-color-overlay-default-light}; + --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-light}; + --#{$prefix}color-overlay-emphasized: #{$ouds-color-overlay-emphasized-light}; + --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-light}; + --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-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-neutral-emphasized: #{$ouds-color-surface-status-neutral-emphasized-light}; + --#{$prefix}color-surface-status-neutral-muted: #{$ouds-color-surface-status-neutral-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-decorative-accent-1-default: #{$ouds-color-decorative-accent-1-default-light}; --#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized-light}; --#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted-light}; @@ -167,154 +103,82 @@ --#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700-light}; --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-light}; --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-light}; - --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none-light}; - --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-light}; - --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-light}; - --#{$prefix}elevation-color-overlay-default: #{$ouds-elevation-color-overlay-default-light}; - --#{$prefix}elevation-color-overlay-emphasized: #{$ouds-elevation-color-overlay-emphasized-light}; - --#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default-light}; - --#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized-light}; - --#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled-light}; } [data-bs-theme="dark"] { - --#{$prefix}color-transparent-default: #{$ouds-color-transparent-default-dark}; + --#{$prefix}color-opacity-invisible-black: #{$ouds-color-opacity-invisible-black-dark}; + --#{$prefix}color-opacity-invisible-white: #{$ouds-color-opacity-invisible-white-dark}; --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-dark}; - // --#{$prefix}color-action-disabled-on-bg-emphasized: #{$ouds-color-action-disabled-on-bg-emphasized-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-primary-enabled: #{$ouds-color-action-primary-enabled-dark}; - // --#{$prefix}color-action-primary-enabled-on-bg-emphasized: #{$ouds-color-action-primary-enabled-on-bg-emphasized-dark}; - --#{$prefix}color-action-primary-focus: #{$ouds-color-action-primary-focus-dark}; - // --#{$prefix}color-action-primary-focus-on-bg-emphasized: #{$ouds-color-action-primary-focus-on-bg-emphasized-dark}; - --#{$prefix}color-action-primary-hover: #{$ouds-color-action-primary-hover-dark}; - // --#{$prefix}color-action-primary-hover-on-bg-emphasized: #{$ouds-color-action-primary-hover-on-bg-emphasized-dark}; - --#{$prefix}color-action-primary-loading: #{$ouds-color-action-primary-loading-dark}; - // --#{$prefix}color-action-primary-loading-on-bg-emphasized: #{$ouds-color-action-primary-loading-on-bg-emphasized-dark}; - --#{$prefix}color-action-primary-pressed: #{$ouds-color-action-primary-pressed-dark}; - // --#{$prefix}color-action-primary-pressed-on-bg-emphasized: #{$ouds-color-action-primary-pressed-on-bg-emphasized-dark}; - --#{$prefix}color-action-secondary-enabled: #{$ouds-color-action-secondary-enabled-dark}; - // --#{$prefix}color-action-secondary-enabled-on-bg-emphasized: #{$ouds-color-action-secondary-enabled-on-bg-emphasized-dark}; - --#{$prefix}color-action-secondary-focus: #{$ouds-color-action-secondary-focus-dark}; - // --#{$prefix}color-action-secondary-focus-on-bg-emphasized: #{$ouds-color-action-secondary-focus-on-bg-emphasized-dark}; - --#{$prefix}color-action-secondary-hover: #{$ouds-color-action-secondary-hover-dark}; - // --#{$prefix}color-action-secondary-hover-on-bg-emphasized: #{$ouds-color-action-secondary-hover-on-bg-emphasized-dark}; - --#{$prefix}color-action-secondary-loading: #{$ouds-color-action-secondary-loading-dark}; - // --#{$prefix}color-action-secondary-loading-on-bg-emphasized: #{$ouds-color-action-secondary-loading-on-bg-emphasized-dark}; - --#{$prefix}color-action-secondary-pressed: #{$ouds-color-action-secondary-pressed-dark}; - // --#{$prefix}color-action-secondary-pressed-on-bg-emphasized: #{$ouds-color-action-secondary-pressed-on-bg-emphasized-dark}; + --#{$prefix}color-action-pressed: #{$ouds-color-action-pressed-dark}; --#{$prefix}color-action-selected: #{$ouds-color-action-selected-dark}; - // --#{$prefix}color-action-selected-on-bg-emphasized: #{$ouds-color-action-selected-on-bg-emphasized-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-action-visited-on-bg-emphasized: #{$ouds-color-action-visited-on-bg-emphasized-dark}; - --#{$prefix}color-always-accent: #{$ouds-color-always-accent-dark}; --#{$prefix}color-always-black: #{$ouds-color-always-black-dark}; - --#{$prefix}color-always-info: #{$ouds-color-always-info-dark}; - --#{$prefix}color-always-negative: #{$ouds-color-always-negative-dark}; - --#{$prefix}color-always-on-accent: #{$ouds-color-always-on-accent-dark}; --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black-dark}; - --#{$prefix}color-always-on-info: #{$ouds-color-always-on-info-dark}; - --#{$prefix}color-always-on-negative: #{$ouds-color-always-on-negative-dark}; - --#{$prefix}color-always-on-positive: #{$ouds-color-always-on-positive-dark}; - --#{$prefix}color-always-on-warning: #{$ouds-color-always-on-warning-dark}; --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white-dark}; - --#{$prefix}color-always-positive: #{$ouds-color-always-positive-dark}; - --#{$prefix}color-always-warning: #{$ouds-color-always-warning-dark}; --#{$prefix}color-always-white: #{$ouds-color-always-white-dark}; - --#{$prefix}color-bg-brand-primary: #{$ouds-color-bg-brand-primary-dark}; - // --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-dark}; + --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-dark}; --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-dark}; --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-dark}; - --#{$prefix}color-bg-status-accent-emphasized: #{$ouds-color-bg-status-accent-emphasized-dark}; - --#{$prefix}color-bg-status-accent-muted: #{$ouds-color-bg-status-accent-muted-dark}; - // --#{$prefix}color-bg-status-accent-muted-on-bg-emphasized: #{$ouds-color-bg-status-accent-muted-on-bg-emphasized-dark}; - --#{$prefix}color-bg-status-info-emphasized: #{$ouds-color-bg-status-info-emphasized-dark}; - --#{$prefix}color-bg-status-info-muted: #{$ouds-color-bg-status-info-muted-dark}; - // --#{$prefix}color-bg-status-info-muted-on-bg-emphasized: #{$ouds-color-bg-status-info-muted-on-bg-emphasized-dark}; - --#{$prefix}color-bg-status-negative-emphasized: #{$ouds-color-bg-status-negative-emphasized-dark}; - --#{$prefix}color-bg-status-negative-muted: #{$ouds-color-bg-status-negative-muted-dark}; - // --#{$prefix}color-bg-status-negative-muted-on-bg-emphasized: #{$ouds-color-bg-status-negative-muted-on-bg-emphasized-dark}; - --#{$prefix}color-bg-status-neutral: #{$ouds-color-bg-status-neutral-dark}; - // --#{$prefix}color-bg-status-neutral-on-bg-emphasized: #{$ouds-color-bg-status-neutral-on-bg-emphasized-dark}; - --#{$prefix}color-bg-status-positive-emphasized: #{$ouds-color-bg-status-positive-emphasized-dark}; - --#{$prefix}color-bg-status-positive-muted: #{$ouds-color-bg-status-positive-muted-dark}; - // --#{$prefix}color-bg-status-positive-muted-on-bg-emphasized: #{$ouds-color-bg-status-positive-muted-on-bg-emphasized-dark}; - --#{$prefix}color-bg-status-warning-emphasized: #{$ouds-color-bg-status-warning-emphasized-dark}; - --#{$prefix}color-bg-status-warning-muted: #{$ouds-color-bg-status-warning-muted-dark}; - // --#{$prefix}color-bg-status-warning-muted-on-bg-emphasized: #{$ouds-color-bg-status-warning-muted-on-bg-emphasized-dark}; --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-dark}; --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-dark}; - // --#{$prefix}color-border-brand-primary-on-bg-emphasized: #{$ouds-color-border-brand-primary-on-bg-emphasized-dark}; --#{$prefix}color-border-default: #{$ouds-color-border-default-dark}; - // --#{$prefix}color-border-default-on-bg-emphasized: #{$ouds-color-border-default-on-bg-emphasized-dark}; --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-dark}; - // --#{$prefix}color-border-emphasized-on-bg-emphasized: #{$ouds-color-border-emphasized-on-bg-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-focus-inset-on-bg-emphasized: #{$ouds-color-border-focus-inset-on-bg-emphasized-dark}; - // --#{$prefix}color-border-focus-on-bg-emphasized: #{$ouds-color-border-focus-on-bg-emphasized-dark}; --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-dark}; --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-dark}; - // --#{$prefix}color-content-brand-primary-on-bg-emphasized: #{$ouds-color-content-brand-primary-on-bg-emphasized-dark}; --#{$prefix}color-content-default: #{$ouds-color-content-default-dark}; - // --#{$prefix}color-content-default-on-bg-emphasized: #{$ouds-color-content-default-on-bg-emphasized-dark}; --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-dark}; - // --#{$prefix}color-content-disabled-on-bg-emphasized: #{$ouds-color-content-disabled-on-bg-emphasized-dark}; --#{$prefix}color-content-muted: #{$ouds-color-content-muted-dark}; - // --#{$prefix}color-content-muted-on-bg-emphasized: #{$ouds-color-content-muted-on-bg-emphasized-dark}; --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-dark}; - // --#{$prefix}color-content-on-action-disabled-on-bg-emphasized: #{$ouds-color-content-on-action-disabled-on-bg-emphasized-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-negative: #{$ouds-color-content-on-action-negative-dark}; - --#{$prefix}color-content-on-action-primary-enabled: #{$ouds-color-content-on-action-primary-enabled-dark}; - // --#{$prefix}color-content-on-action-primary-enabled-on-bg-emphasized: #{$ouds-color-content-on-action-primary-enabled-on-bg-emphasized-dark}; - --#{$prefix}color-content-on-action-primary-focus: #{$ouds-color-content-on-action-primary-focus-dark}; - // --#{$prefix}color-content-on-action-primary-focus-on-bg-emphasized: #{$ouds-color-content-on-action-primary-focus-on-bg-emphasized-dark}; - --#{$prefix}color-content-on-action-primary-hover: #{$ouds-color-content-on-action-primary-hover-dark}; - // --#{$prefix}color-content-on-action-primary-hover-on-bg-emphasized: #{$ouds-color-content-on-action-primary-hover-on-bg-emphasized-dark}; - --#{$prefix}color-content-on-action-primary-loading: #{$ouds-color-content-on-action-primary-loading-dark}; - // --#{$prefix}color-content-on-action-primary-loading-on-bg-emphasized: #{$ouds-color-content-on-action-primary-loading-on-bg-emphasized-dark}; - --#{$prefix}color-content-on-action-primary-pressed: #{$ouds-color-content-on-action-primary-pressed-dark}; - // --#{$prefix}color-content-on-action-primary-pressed-on-bg-emphasized: #{$ouds-color-content-on-action-primary-pressed-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-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-accent-muted-on-bg-emphasized: #{$ouds-color-content-on-status-accent-muted-on-bg-emphasized-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-info-muted-on-bg-emphasized: #{$ouds-color-content-on-status-info-muted-on-bg-emphasized-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-negative-muted-on-bg-emphasized: #{$ouds-color-content-on-status-negative-muted-on-bg-emphasized-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-positive-muted-on-bg-emphasized: #{$ouds-color-content-on-status-positive-muted-on-bg-emphasized-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-on-status-warning-muted-on-bg-emphasized: #{$ouds-color-content-on-status-warning-muted-on-bg-emphasized-dark}; + --#{$prefix}color-content-on-overlay-emphasized: #{$ouds-color-content-on-overlay-emphasized-dark}; + --#{$prefix}color-content-on-status-emphasized: #{$ouds-color-content-on-status-emphasized-dark}; + --#{$prefix}color-content-on-status-emphasized-neutral: #{$ouds-color-content-on-status-emphasized-neutral-dark}; + --#{$prefix}color-content-on-status-muted: #{$ouds-color-content-on-status-muted-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-elevation-drag: #{$ouds-color-elevation-drag-dark}; - // --#{$prefix}color-elevation-drag-on-bg-emphasized: #{$ouds-color-elevation-drag-on-bg-emphasized-dark}; - --#{$prefix}color-elevation-drag-on-bg-secondary: #{$ouds-color-elevation-drag-on-bg-secondary-dark}; - --#{$prefix}color-elevation-modal: #{$ouds-color-elevation-modal-dark}; - --#{$prefix}color-elevation-overlay-default: #{$ouds-color-elevation-overlay-default-dark}; - // --#{$prefix}color-elevation-overlay-default-on-bg-emphasized: #{$ouds-color-elevation-overlay-default-on-bg-emphasized-dark}; - --#{$prefix}color-elevation-overlay-default-on-bg-secondary: #{$ouds-color-elevation-overlay-default-on-bg-secondary-dark}; - --#{$prefix}color-elevation-overlay-emphasized: #{$ouds-color-elevation-overlay-emphasized-dark}; - // --#{$prefix}color-elevation-overlay-emphasized-on-bg-emphasized: #{$ouds-color-elevation-overlay-emphasized-on-bg-emphasized-dark}; - --#{$prefix}color-elevation-overlay-emphasized-on-bg-secondary: #{$ouds-color-elevation-overlay-emphasized-on-bg-secondary-dark}; - --#{$prefix}color-elevation-raised: #{$ouds-color-elevation-raised-dark}; - // --#{$prefix}color-elevation-raised-on-bg-emphasized: #{$ouds-color-elevation-raised-on-bg-emphasized-dark}; - --#{$prefix}color-elevation-raised-on-bg-secondary: #{$ouds-color-elevation-raised-on-bg-secondary-dark}; - --#{$prefix}color-gradient-skeleton-middle: #{$ouds-color-gradient-skeleton-middle-dark}; - // --#{$prefix}color-gradient-skeleton-middle-on-bg-emphasized: #{$ouds-color-gradient-skeleton-middle-on-bg-emphasized-dark}; - --#{$prefix}color-gradient-skeleton-start-end: #{$ouds-color-gradient-skeleton-start-end-dark}; - // --#{$prefix}color-gradient-skeleton-start-end-on-bg-emphasized: #{$ouds-color-gradient-skeleton-start-end-on-bg-emphasized-dark}; + --#{$prefix}color-overlay-default: #{$ouds-color-overlay-default-dark}; + --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-dark}; + --#{$prefix}color-overlay-emphasized: #{$ouds-color-overlay-emphasized-dark}; + --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-dark}; + --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-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-neutral-emphasized: #{$ouds-color-surface-status-neutral-emphasized-dark}; + --#{$prefix}color-surface-status-neutral-muted: #{$ouds-color-surface-status-neutral-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-decorative-accent-1-default: #{$ouds-color-decorative-accent-1-default-dark}; --#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized-dark}; --#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted-dark}; @@ -345,12 +209,4 @@ --#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700-dark}; --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-dark}; --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-dark}; - --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none-dark}; - --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-dark}; - --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-dark}; - --#{$prefix}elevation-color-overlay-default: #{$ouds-elevation-color-overlay-default-dark}; - --#{$prefix}elevation-color-overlay-emphasized: #{$ouds-elevation-color-overlay-emphasized-dark}; - --#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default-dark}; - --#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized-dark}; - --#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled-dark}; } diff --git a/site/data/grays.yml b/site/data/grays.yml index 6c57281c1a..0f1fc54cdc 100644 --- a/site/data/grays.yml +++ b/site/data/grays.yml @@ -7,12 +7,12 @@ - name: 400 hex: "#bbb" - name: 500 - hex: "#707070" + hex: "#8f8f8f" - name: 600 - hex: "#555" + hex: "#666" - name: 700 - hex: "#444" -- name: 800 hex: "#333" +- name: 800 + hex: "#1f1f1f" - name: 900 hex: "#141414"