diff options
Diffstat (limited to 'toolkit/themes/shared/design-system')
4 files changed, 305 insertions, 199 deletions
diff --git a/toolkit/themes/shared/design-system/README.design-tokens.stories.md b/toolkit/themes/shared/design-system/README.design-tokens.stories.md index 6afe185d87..156ab35e19 100644 --- a/toolkit/themes/shared/design-system/README.design-tokens.stories.md +++ b/toolkit/themes/shared/design-system/README.design-tokens.stories.md @@ -451,17 +451,6 @@ The `--font-size-root` token was created for specific use under the document's ` </div> </div> -Just like the specific HTML term 'root', we tend to include the term 'default' on scales in order to identify values that are used as a default, or at the global level (`:root` or `body` tag): - -<div class="box"> - <div class="post-it blue big"> - font-weight - </div> - <div class="post-it big"> - <strong>default</strong> - </div> -</div> - It's okay to include intentional terms within scales that better represent the meaning of a value and when to use it. For example, our border radius collection, which uses t-shirt sizing, also mixes the 'circle' option within its scale in order to describe a border radius that will create a circular effect: <div class="box"> @@ -589,28 +578,31 @@ Shared tokens ([tokens-shared.css](https://searchfox.org/mozilla-central/source/ </div> </div> -#### Brand -Tokens specific to the brand, such as colors, and typographical styles. Used within domains that rely on brand values. +#### `tokens-brand.css` +This file is for token values specific to the brand, such as colors and +typographical styles. This stylesheet should be loaded in domains that rely on +brand values. -For example, we use the brand's accent color under brand contexts (in-content/about: pages): +For example, we re-map the accent color token in `tokens-brand.css` to the +value we want to use in brand contexts (in-content/about: pages): ```css /* tokens-brand.css */ ---color-accent-primary: var(--brand-color-accent); ---brand-color-accent: light-dark(var(--color-blue-50), var(--color-cyan-50)); +--color-accent-primary: light-dark(var(--color-blue-50), var(--color-cyan-50)); ``` -#### Platform -Tokens used within the browser chrome that come from the user’s operating system, such as colors and fonts. +#### `tokens-platform.css` +This file is for token values used the browser chrome that come from the user’s +operating system, such as colors and fonts. -For example, we use the system's accent color under platform contexts (chrome): +For example, we re-map the accent color token in `tokens-platform.css` to the +value we want to use in platform contexts (chrome): ```css /* tokens-platform.css */ ---color-accent-primary: var(--platform-color-accent); ---platform-color-accent: AccentColor; +--color-accent-primary: var(--button-primary-bgcolor, AccentColor); ``` -#### Shared -Tokens used and shared between brand and platform contexts. +#### `tokens-shared.css` +This file is for tokens that are shared between brand and platform contexts. For example, both the chrome and in-content pages make use of the same border-radius patterns: ```css @@ -634,7 +626,7 @@ Application design tokens represent the collection of semantic design tokens tha ```css /* tokens-brand.css */ ---brand-color-accent: var(--color-blue-50); +--color-accent-primary: light-dark(var(--color-blue-50), var(--color-cyan-50)); ``` #### Component @@ -644,7 +636,7 @@ Component-level tokens should live at the component-level file (e.g. [moz-toggle ```css /* moz-toggle.css */ ---toggle-background-color-pressed: var(--brand-color-accent); +--toggle-background-color-pressed: var(--color-accent-primary); ``` ### File structure @@ -721,7 +713,7 @@ We rely on the [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/c ### High contrast mode We rely on two queries for assigning HCM counterpart variables, @media (prefers-contrast) and @media (forced-colors). They are found at the bottom of [tokens-shared.css](https://searchfox.org/mozilla-central/rev/6eb2ebcafb1b4a8576eb513e6cd2c61e3f3ae6dc/toolkit/themes/shared/design-system/tokens-shared.css#109). -<!-- This part of the documentation will link to Bug 1863436 once it lands --> +/* This part of the documentation will link to Bug 1863436 once it lands */ ## Help and support If you have any questions, concerns, or feedback, and if this document has not answered something specific, please reach out to Desktop Theme Reviewers or Reusable Components Reviewers. diff --git a/toolkit/themes/shared/design-system/tokens-brand.css b/toolkit/themes/shared/design-system/tokens-brand.css index ac105d9767..0ab73834d0 100644 --- a/toolkit/themes/shared/design-system/tokens-brand.css +++ b/toolkit/themes/shared/design-system/tokens-brand.css @@ -4,17 +4,7 @@ @import url("chrome://global/skin/design-system/tokens-shared.css"); -:root, -:host(.anonymous-content-host) { - /** Font size **/ - --font-size-root: 15px; /* Set at the `:root`. Do not use */ - --font-size-small: 0.867rem; /* 13px */ - --font-size-large: 1.133rem; /* 17px */ - --font-size-xlarge: 1.467rem; /* 22px */ - --font-size-xxlarge: 1.6rem; /* 24px */ -} - -@media not (prefers-contrast) { +@layer tokens-foundation { :root, :host(.anonymous-content-host) { /** Border **/ @@ -25,28 +15,43 @@ --button-background-color: color-mix(in srgb, currentColor 7%, transparent); --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent); --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent); + --button-border-color-primary: transparent; + --button-text-color: light-dark(var(--color-gray-100), var(--color-gray-05)); + --button-text-color-primary: light-dark(var(--color-gray-05), var(--color-gray-100)); /** Link **/ - --link-color: var(--brand-color-accent); - --link-color-hover: var(--brand-color-accent-hover); - --link-color-active: var(--brand-color-accent-active); + --link-color: var(--color-accent-primary); + --link-color-hover: var(--color-accent-primary-hover); + --link-color-active: var(--color-accent-primary-active); --link-color-visited: var(--link-color); /** Color **/ - --color-accent-primary: var(--brand-color-accent); - --color-accent-primary-hover: var(--brand-color-accent-hover); - --color-accent-primary-active: var(--brand-color-accent-active); - - --brand-color-accent: light-dark(var(--color-blue-50), var(--color-cyan-50)); - --brand-color-accent-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); - --brand-color-accent-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); + --color-accent-primary: light-dark(var(--color-blue-50), var(--color-cyan-50)); + --color-accent-primary-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); + --color-accent-primary-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); --color-canvas: light-dark(var(--color-white), var(--color-gray-90)); + /** Font size **/ + --font-size-root: 15px; /* Set at the `:root`. Do not use */ + --font-size-small: 0.867rem; /* 13px */ + --font-size-large: 1.133rem; /* 17px */ + --font-size-xlarge: 1.467rem; /* 22px */ + --font-size-xxlarge: 1.6rem; /* 24px */ + /** Text **/ --text-color: light-dark(var(--color-gray-100), var(--color-gray-05)); - --text-color-deemphasized: light-dark( - color-mix(in srgb, currentColor 69%, transparent), - color-mix(in srgb, currentColor 75%, transparent) - ); + } +} + +@layer tokens-prefers-contrast { + @media (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /* Border */ + --border-interactive-color: var(--text-color); + --border-interactive-color-hover: var(--border-interactive-color); + --border-interactive-color-active: var(--border-interactive-color); + --border-interactive-color-disabled: var(--border-interactive-color); + } } } diff --git a/toolkit/themes/shared/design-system/tokens-platform.css b/toolkit/themes/shared/design-system/tokens-platform.css index e7897d11b0..921f5fd860 100644 --- a/toolkit/themes/shared/design-system/tokens-platform.css +++ b/toolkit/themes/shared/design-system/tokens-platform.css @@ -4,7 +4,7 @@ @import url("chrome://global/skin/design-system/tokens-shared.css"); -@media not (prefers-contrast) { +@layer tokens-foundation { :root, :host(.anonymous-content-host) { /** Border **/ @@ -14,14 +14,13 @@ --button-background-color: var(--button-bgcolor); --button-background-color-hover: var(--button-hover-bgcolor); --button-background-color-active: var(--button-active-bgcolor); + --button-text-color: var(--button-color); + --button-text-color-primary: var(--button-primary-color); /** Color **/ - --color-accent-primary: var(--platform-color-accent); - --color-accent-primary-hover: var(--platform-color-accent-hover); - --color-accent-primary-active: var(--platform-color-accent-active); - --platform-color-accent: var(--button-primary-bgcolor, AccentColor); - --platform-color-accent-hover: var(--button-primary-hover-bgcolor); - --platform-color-accent-active: var(--button-primary-active-bgcolor); + --color-accent-primary: var(--button-primary-bgcolor, AccentColor); + --color-accent-primary-hover: var(--button-primary-hover-bgcolor); + --color-accent-primary-active: var(--button-primary-active-bgcolor); --color-canvas: Canvas; /** Font size **/ diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css index 5d62fb8bbe..0c074ca20e 100644 --- a/toolkit/themes/shared/design-system/tokens-shared.css +++ b/toolkit/themes/shared/design-system/tokens-shared.css @@ -2,105 +2,63 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:root, -:host(.anonymous-content-host) { - /* Base tokens */ - /* Do not use base tokens directly as they don't carry any meaning and are used to set our base. Refer to Application tokens below. */ - /** Color **/ - --color-white: #ffffff; - --color-black-a10: rgba(0, 0, 0, 0.1); - --color-blue-05: #deeafc; - --color-blue-30: #73a7f3; - --color-blue-50: #0060df; - --color-blue-60: #0250bb; - --color-blue-70: #054096; - --color-blue-80: #003070; - --color-cyan-20: #aaf2ff; - --color-cyan-30: #80ebff; - --color-cyan-50: #00ddff; - --color-gray-05: #fbfbfe; - --color-gray-50: #bfbfc9; - --color-gray-60: #8f8f9d; - --color-gray-70: #5b5b66; - --color-gray-80: #23222b; - --color-gray-90: #1c1b22; - --color-gray-100: #15141a; - --color-green-05: #d8eedc; - --color-green-30: #4dbc87; - --color-green-50: #017a40; - --color-green-80: #004725; - --color-red-05: #ffe8e8; - --color-red-20: #ff9aa2; - --color-red-30: #f37f98; - --color-red-50: #d7264c; - --color-red-80: #690f22; - --color-yellow-05: #ffebcd; - --color-yellow-30: #e49c49; - --color-yellow-50: #cd411e; - --color-yellow-80: #5a3100; - - /* Application tokens */ - /** Border **/ - --border-radius-circle: 9999px; - --border-radius-small: 4px; - --border-radius-medium: 8px; - --border-width: 1px; - - /** Box **/ - --box-background-color: light-dark(var(--color-white), var(--color-gray-80)); - --box-shadow-10: 0 1px 4px var(--color-black-a10); - - /** Font weight **/ - --font-weight-default: normal; - --font-weight-bold: 600; - - /** Focus outline **/ - --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); - --focus-outline-color: var(--color-accent-primary); - --focus-outline-inset: calc(-1 * var(--focus-outline-width)); - --focus-outline-offset: 2px; - --focus-outline-width: 2px; - - /** Input **/ - /*** Button ***/ - --button-border-radius: var(--border-radius-small); - --button-font-weight: var(--font-weight-bold); - --button-line-height: var(--line-height-small); - --button-min-height: var(--size-item-large); - - /*** Checkbox ***/ - --checkbox-margin-inline: var(--space-small); - /* TODO Bug 1876537: Make this em-based, probably? */ - --checkbox-size: var(--size-item-small); - - /*** Text ***/ - --input-text-line-height: var(--button-line-height); - --input-text-min-height: var(--button-min-height); - - /** Link **/ - /* Not using --focus-outline-offset for links because that's intended for - elements with a background, and we only want a slight offset here while not - overlapping adjacent text. */ - --link-focus-outline-offset: 1px; - - /** Text **/ - --text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent); - - /** Size **/ - --size-item-small: 16px; - --size-item-medium: 28px; - --size-item-large: 32px; - - /** Space **/ - --space-xxsmall: calc(0.5 * var(--space-xsmall)); - --space-xsmall: 0.267rem; - --space-small: calc(2 * var(--space-xsmall)); - --space-xlarge: calc(8 * var(--space-xsmall)); -} +@layer tokens-foundation, tokens-prefers-contrast, tokens-forced-colors; -@media not (prefers-contrast) { +@layer tokens-foundation { :root, :host(.anonymous-content-host) { + /* Base tokens */ + /* Do not use base tokens directly as they don't carry any meaning and are used to set our base. Refer to Application tokens below. */ + /** Color **/ + --color-white: #ffffff; + --color-black-a10: rgba(0, 0, 0, 0.1); + --color-blue-05: #deeafc; + --color-blue-30: #73a7f3; + --color-blue-50: #0060df; + --color-blue-60: #0250bb; + --color-blue-70: #054096; + --color-blue-80: #003070; + --color-cyan-20: #aaf2ff; + --color-cyan-30: #80ebff; + --color-cyan-50: #00ddff; + --color-gray-05: #fbfbfe; + --color-gray-50: #bfbfc9; + --color-gray-60: #8f8f9d; + --color-gray-70: #5b5b66; + --color-gray-80: #23222b; + --color-gray-90: #1c1b22; + --color-gray-100: #15141a; + --color-green-05: #d8eedc; + --color-green-30: #4dbc87; + --color-green-50: #017a40; + --color-green-80: #004725; + --color-red-05: #ffe8e8; + --color-red-10: #ffbdc5; + --color-red-20: #ff9aa2; + --color-red-30: #f37f98; + --color-red-50: #d7264c; + --color-red-60: #ac1e3d; + --color-red-70: #8A1831; + --color-red-80: #690f22; + --color-yellow-05: #ffebcd; + --color-yellow-30: #e49c49; + --color-yellow-50: #cd411e; + --color-yellow-80: #5a3100; + + /* Application tokens */ + /** Border **/ + --border-radius-circle: 9999px; + --border-radius-small: 4px; + --border-radius-medium: 8px; + --border-width: 1px; + --border-interactive-color-hover: var(--border-interactive-color); + --border-interactive-color-active: var(--border-interactive-color); + --border-interactive-color-disabled: var(--border-interactive-color); + + /** Box **/ + --box-background-color: light-dark(var(--color-white), var(--color-gray-80)); + --box-shadow-10: 0 1px 4px var(--color-black-a10); + /** Color **/ --color-background-information: light-dark(var(--color-blue-05), var(--color-blue-80)); --color-background-success: light-dark(var(--color-green-05), var(--color-green-80)); @@ -108,71 +66,176 @@ --color-background-critical: light-dark(var(--color-red-05), var(--color-red-80)); --color-error-outline: light-dark(var(--color-red-50), var(--color-red-20)); + /** Font weight **/ + --font-weight: normal; + --font-weight-bold: 600; + + /** Focus outline **/ + --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); + --focus-outline-color: var(--color-accent-primary); + --focus-outline-inset: calc(-1 * var(--focus-outline-width)); + --focus-outline-offset: 2px; + --focus-outline-width: 2px; + /** Icon **/ --icon-color: light-dark(var(--color-gray-70), var(--color-gray-05)); --icon-color-information: light-dark(var(--color-blue-50), var(--color-blue-30)); --icon-color-success: light-dark(var(--color-green-50), var(--color-green-30)); --icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-30)); --icon-color-critical: light-dark(var(--color-red-50), var(--color-red-30)); + --icon-size-default: var(--size-item-small); + + /** Input **/ + /*** Button ***/ + --button-border: var(--border-width) solid var(--button-border-color); + --button-border-radius: var(--border-radius-small); + --button-font-weight: var(--font-weight-bold); + --button-font-size: var(--font-size-root); + --button-font-size-small: var(--font-size-small); + --button-min-height: var(--size-item-large); + --button-min-height-small: var(--size-item-medium); + --button-size-icon: var(--button-min-height); + --button-size-icon-small: var(--button-min-height-small); + --button-padding: var(--space-xsmall) var(--space-large); + --button-padding-icon: 0; + + --button-text-color: var(--text-color); + --button-text-color-hover: var(--button-text-color); + --button-text-color-active: var(--button-text-color); + --button-text-color-disabled: var(--button-text-color); + --button-border-color: transparent; + --button-border-color-hover: var(--button-border-color); + --button-border-color-active: var(--button-border-color); + --button-border-color-disabled: var(--button-border-color); + --button-background-color-disabled: var(--button-background-color); + --button-opacity-disabled: 0.5; + + --button-background-color-primary: var(--color-accent-primary); + --button-background-color-primary-hover: var(--color-accent-primary-hover); + --button-background-color-primary-active: var(--color-accent-primary-active); + --button-background-color-primary-disabled: var(--button-background-color-primary); + --button-text-color-primary-hover: var(--button-text-color-primary); + --button-text-color-primary-active: var(--button-text-color-primary-hover); + --button-text-color-primary-disabled: var(--button-text-color-primary); + --button-border-color-primary: transparent; + --button-border-color-primary-hover: var(--button-border-color-primary); + --button-border-color-primary-active: var(--button-border-color-primary); + --button-border-color-primary-disabled: var(--button-border-color-primary); + + --button-background-color-destructive: light-dark(var(--color-red-50), var(--color-red-30)); + --button-background-color-destructive-hover: light-dark(var(--color-red-60), var(--color-red-10)); + --button-background-color-destructive-active: light-dark(var(--color-red-70), var(--color-red-05)); + --button-background-color-destructive-disabled: var(--button-background-color-destructive); + --button-text-color-destructive: light-dark(var(--color-gray-05), var(--color-gray-100)); + --button-text-color-destructive-hover: var(--button-text-color-destructive); + --button-text-color-destructive-active: var(--button-text-color-destructive); + --button-text-color-destructive-disabled: var(--button-text-color-destructive); + --button-border-color-destructive: transparent; + --button-border-color-destructive-hover: var(--button-border-color-destructive); + --button-border-color-destructive-active: var(--button-border-color-destructive); + --button-border-color-destructive-disabled: var(--button-border-color-destructive); + + --button-background-color-ghost: transparent; + --button-background-color-ghost-hover: var(--button-background-color-hover); + --button-background-color-ghost-active: var(--button-background-color-active); + --button-background-color-ghost-disabled: var(--button-background-color-ghost); + --button-text-color-ghost: var(--button-text-color); + --button-text-color-ghost-hover: var(--button-text-color-hover); + --button-text-color-ghost-active: var(--button-text-color-ghost-active); + --button-text-color-ghost-disabled: var(--button-text-color); + --button-border-color-ghost: var(--button-border-color); + --button-border-color-ghost-hover: var(--button-border-color-hover); + --button-border-color-ghost-active: var(--button-border-color-active); + --button-border-color-ghost-disabled: var(--button-border-color); + + /*** Checkbox ***/ + --checkbox-margin-inline: var(--space-small); + /* TODO Bug 1876537: Make this em-based, probably? */ + --checkbox-size: var(--size-item-small); + + /*** Text ***/ + --input-text-min-height: var(--button-min-height); + + /** Link **/ + /* Not using --focus-outline-offset for links because that's intended for + elements with a background, and we only want a slight offset here while not + overlapping adjacent text. */ + --link-focus-outline-offset: 1px; /** Text **/ + --text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent); --text-color-error: light-dark(var(--color-red-50), var(--color-red-20)); + + /** Size **/ + --size-item-small: 16px; + --size-item-medium: 28px; + --size-item-large: 32px; + + /** Space **/ + --space-xxsmall: calc(0.5 * var(--space-xsmall)); + --space-xsmall: 0.267rem; + --space-small: calc(2 * var(--space-xsmall)); + --space-medium: calc(3 * var(--space-xsmall)); + --space-large: calc(4 * var(--space-xsmall)); + --space-xlarge: calc(6 * var(--space-xsmall)); + --space-xxlarge: calc(8 * var(--space-xsmall)); } } -@media (prefers-contrast) { - :root, - :host(.anonymous-content-host) { - /* Border */ - --border-color: var(--text-color); - --border-interactive-color: AccentColor; - --border-interactive-color-hover: ButtonText; - --border-interactive-color-active: AccentColor; - --border-interactive-color-disabled: GrayText; +/* Bug 1879900: Can't nest media queries inside of :host, :root selector + until Bug 1879349 lands */ +@layer tokens-prefers-contrast { + @media (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /* Border */ + --border-color: var(--text-color); + --border-interactive-color: AccentColor; + --border-interactive-color-hover: ButtonText; + --border-interactive-color-active: AccentColor; + --border-interactive-color-disabled: GrayText; - /** Box **/ - --box-background-color: var(--color-canvas); + /** Box **/ + --box-background-color: var(--color-canvas); - /* Button */ - --button-background-color: ButtonFace; - --button-background-color-hover: ButtonFace; - --button-background-color-active: ButtonFace; - --button-background-color-disabled: GrayText; + /* Button */ + --button-border-color: var(--button-text-color); + --button-background-color-ghost: var(--button-background-color); - /** Link **/ - --link-color: LinkText; - --link-color-hover: LinkText; - --link-color-active: ActiveText; - --link-color-visited: var(--link-color); + /** Link **/ + --link-color: LinkText; + --link-color-hover: LinkText; + --link-color-active: ActiveText; + --link-color-visited: var(--link-color); - /** Color **/ - --color-canvas: Canvas; - --color-background-information: var(--color-canvas); - --color-background-success: var(--color-canvas); - --color-background-warning: var(--color-canvas); - --color-background-critical: var(--color-canvas); - --color-accent-primary: AccentColor; - /* FIXME(emilio): These seem rather sketchy */ - --color-accent-primary-hover: ButtonText; - --color-accent-primary-active: ButtonText; - --color-error-outline: var(--border-color); + /** Color **/ + --color-canvas: Canvas; + --color-background-information: var(--color-canvas); + --color-background-success: var(--color-canvas); + --color-background-warning: var(--color-canvas); + --color-background-critical: var(--color-canvas); + --color-error-outline: var(--border-color); - /** Icon **/ - --icon-color: var(--text-color); - --icon-color-information: var(--icon-color); - --icon-color-success: var(--icon-color); - --icon-color-warning: var(--icon-color); - --icon-color-critical: var(--icon-color); + /** Icon **/ + --icon-color: var(--text-color); + --icon-color-information: var(--icon-color); + --icon-color-success: var(--icon-color); + --icon-color-warning: var(--icon-color); + --icon-color-critical: var(--icon-color); - /** Text **/ - --text-color: CanvasText; - --text-color-error: inherit; - --text-color-deemphasized: inherit; + /** Text **/ + --text-color: CanvasText; + --text-color-error: inherit; + --text-color-deemphasized: inherit; + } } +} +/* Bug 1879900: Can't nest media queries inside of :host, :root selector + until Bug 1879349 lands */ +/* NOTE: These do not apply in the browser chrome (bug 1878919). */ +@layer tokens-forced-colors { @media (forced-colors) { - /* Applies to Windows HCM only, by default. - TODO(emilio): These seem rather sketchy */ :root, :host(.anonymous-content-host) { /** Border **/ @@ -181,10 +244,57 @@ --border-interactive-color-active: ButtonText; --border-interactive-color-disabled: GrayText; + /** Button **/ + --button-border-color: var(--border-interactive-color); + --button-border-color-hover: var(--border-interactive-color-hover); + --button-border-color-active: var(--border-interactive-color-active); + --button-border-color-disabled: var(--border-interactive-color-disabled); + --button-background-color: ButtonFace; + --button-background-color-hover: SelectedItemText; + --button-background-color-active: SelectedItemText; + --button-background-color-disabled: ButtonFace; + --button-text-color: ButtonText; + --button-text-color-hover: SelectedItem; + --button-text-color-active: SelectedItem; + --button-text-color-disabled: GrayText; + --button-opacity-disabled: 1; + + --button-background-color-primary-disabled: var(--button-text-color-disabled); + --button-border-color-primary: ButtonFace; + --button-border-color-primary-hover: SelectedItemText; + --button-border-color-primary-active: ButtonText; + --button-text-color-primary: ButtonFace; + --button-text-color-primary-hover: SelectedItemText; + + --button-border-color-destructive: var(--button-border-color-primary); + --button-border-color-destructive-hover: var(--button-border-color-primary-hover); + --button-border-color-destructive-active: var(--button-border-color-primary-active); + --button-border-color-destructive-disabled: var(--button-border-color-primary-disabled); + --button-background-color-destructive: var(--button-background-color-primary); + --button-background-color-destructive-hover: var(--button-background-color-primary-hover); + --button-background-color-destructive-active: var(--button-background-color-primary-active); + --button-background-color-destructive-disabled: var(--button-background-color-primary-disabled); + --button-text-color-destructive: var(--button-text-color-primary); + --button-text-color-destructive-hover: var(--button-text-color-primary-hover); + --button-text-color-destructive-active: var(--button-text-color-primary-active); + --button-text-color-destructive-disabled: var(--button-text-color-primary-disabled); + + --button-border-color-ghost: var(--button-border-color); + --button-border-color-ghost-hover: var(--button-border-color-hover); + --button-border-color-ghost-active: var(--button-border-color-active); + --button-border-color-ghost-disabled: var(--button-border-color-disabled); + --button-background-color-ghost: var(--button-background-color); + --button-background-color-ghost-disabled: var(--button-background-color-disabled); + --button-text-color-ghost: var(--button-text-color); + --button-text-color-ghost-hover: var(--button-text-color-hover); + --button-text-color-ghost-active: var(--button-text-color-active); + --button-text-color-ghost-disabled: var(--button-text-color-disabled); + /** Color **/ --color-accent-primary: ButtonText; --color-accent-primary-hover: SelectedItem; - --color-accent-primary-active: SelectedItem; + --color-accent-primary-active: var(--color-accent-primary-hover); + --color-error-outline: var(--border-color); } } } |