toolkit/themes/shared/design-system/tokens-shared.css
Propagation: No Props Found
Back to Home/* This Source Code Form is subject to the terms of the Mozilla Public
* 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/. */
/* DO NOT EDIT this file directly, instead modify design-tokens.json
* and run `npm run build` to see your changes. */
@layer tokens-foundation, tokens-prefers-contrast, tokens-forced-colors;
@layer tokens-foundation {
:root,
:host(.anonymous-content-host) {
/** Background Color **/
--background-color-box: light-dark(var(--color-white), var(--color-gray-80));
--background-color-critical: light-dark(var(--color-red-0), var(--color-red-90));
--background-color-information: light-dark(var(--color-blue-0), var(--color-blue-90));
--background-color-success: light-dark(var(--color-green-0), var(--color-green-90));
--background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-90));
/** Border **/
--border-color-card: color-mix(in srgb, currentColor 10%, transparent);
--border-color-interactive-hover: var(--border-color-interactive);
--border-color-interactive-active: var(--border-color-interactive);
--border-color-interactive-disabled: var(--border-color-interactive);
--border-color-transparent: transparent;
--border-radius-circle: 9999px;
--border-radius-small: 4px;
--border-radius-medium: 8px;
--border-radius-large: 12px;
--border-width: 1px;
/** Box Shadow **/
--box-shadow-card: var(--box-shadow-level-2);
--box-shadow-card-hover: var(--box-shadow-level-4);
--box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2));
--box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
--box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
--box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
--box-shadow-level-1: 0 0 1px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2);
--box-shadow-level-2: 0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2);
--box-shadow-level-3: 0 0.375px 1.5px var(--box-shadow-color-lighter-layer-1), 0 3px 12px var(--box-shadow-color-lighter-layer-2);
--box-shadow-level-4: 0 0.5px 2px var(--box-shadow-color-lighter-layer-1), 0 4px 16px var(--box-shadow-color-lighter-layer-2);
--box-shadow-popup: var(--box-shadow-level-3);
--box-shadow-tab: var(--box-shadow-level-1);
/** Button **/
--button-background-color-disabled: var(--button-background-color);
--button-background-color-destructive: light-dark(var(--color-red-60), var(--color-red-30));
--button-background-color-destructive-hover: light-dark(var(--color-red-70), var(--color-red-20));
--button-background-color-destructive-active: light-dark(var(--color-red-80), var(--color-red-10));
--button-background-color-destructive-disabled: var(--button-background-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-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-border: var(--border-width) solid var(--button-border-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-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-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-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-border-radius: var(--border-radius-small);
--button-font-size: var(--font-size-root);
--button-font-size-small: var(--font-size-small);
--button-font-weight: var(--font-weight-bold);
--button-icon-fill: currentColor;
--button-icon-stroke: var(--button-icon-fill);
--button-min-height: var(--size-item-large);
--button-min-height-small: var(--size-item-medium);
--button-opacity-disabled: 0.5;
--button-padding: var(--space-xsmall) var(--space-large);
--button-padding-icon: 0;
--button-size-icon: var(--button-min-height);
--button-size-icon-small: var(--button-min-height-small);
--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-text-color-destructive: light-dark(var(--color-white), 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-text-color-ghost: inherit;
--button-text-color-ghost-hover: inherit;
--button-text-color-ghost-active: inherit;
--button-text-color-ghost-disabled: inherit;
--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);
/** Checkbox **/
--checkbox-margin-inline: var(--space-small);
--checkbox-size: var(--size-item-small); /* TODO Bug 1876537: Make this em-based, probably? */
/** Color **/
--color-blue-0: oklch(97% 0.05 260);
--color-blue-10: oklch(90% 0.13 260);
--color-blue-20: oklch(83% 0.17 260);
--color-blue-30: oklch(76% 0.2 260);
--color-blue-40: oklch(69% 0.22 260);
--color-blue-50: oklch(62% 0.24 260);
--color-blue-60: oklch(55% 0.24 260);
--color-blue-70: oklch(48% 0.2 260);
--color-blue-80: oklch(41% 0.17 260);
--color-blue-90: oklch(34% 0.14 260);
--color-blue-100: oklch(27% 0.1 260);
--color-blue-110: oklch(20% 0.05 260);
--color-cyan-0: oklch(97% 0.05 205);
--color-cyan-10: oklch(90% 0.07 205);
--color-cyan-20: oklch(83% 0.11 205);
--color-cyan-30: oklch(76% 0.14 205);
--color-cyan-40: oklch(69% 0.19 205);
--color-cyan-50: oklch(62% 0.21 205);
--color-cyan-60: oklch(55% 0.21 205);
--color-cyan-70: oklch(48% 0.2 205);
--color-cyan-80: oklch(41% 0.17 205);
--color-cyan-90: oklch(34% 0.14 205);
--color-cyan-100: oklch(27% 0.1 205);
--color-cyan-110: oklch(20% 0.05 205);
--color-gray-05: #fbfbfe;
--color-gray-20: #f0f0f4;
--color-gray-30: #bac2ca;
--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-0: oklch(97% 0.05 145);
--color-green-10: oklch(90% 0.1 145);
--color-green-20: oklch(83% 0.14 145);
--color-green-30: oklch(76% 0.17 145);
--color-green-40: oklch(69% 0.19 145);
--color-green-50: oklch(62% 0.21 145);
--color-green-60: oklch(55% 0.21 145);
--color-green-70: oklch(48% 0.2 145);
--color-green-80: oklch(41% 0.17 145);
--color-green-90: oklch(34% 0.14 145);
--color-green-100: oklch(27% 0.1 145);
--color-green-110: oklch(20% 0.05 145);
--color-orange-0: oklch(97% 0.05 50);
--color-orange-10: oklch(90% 0.1 50);
--color-orange-20: oklch(86% 0.14 50);
--color-orange-30: oklch(79% 0.17 50);
--color-orange-40: oklch(72% 0.19 50);
--color-orange-50: oklch(65% 0.21 50);
--color-orange-60: oklch(58% 0.21 50);
--color-orange-70: oklch(48% 0.2 50);
--color-orange-80: oklch(41% 0.17 50);
--color-orange-90: oklch(34% 0.14 50);
--color-orange-100: oklch(27% 0.1 50);
--color-orange-110: oklch(20% 0.05 50);
--color-pink-0: oklch(97% 0.05 360);
--color-pink-10: oklch(90% 0.1 360);
--color-pink-20: oklch(83% 0.14 360);
--color-pink-30: oklch(76% 0.17 360);
--color-pink-40: oklch(69% 0.19 360);
--color-pink-50: oklch(62% 0.21 360);
--color-pink-60: oklch(55% 0.21 360);
--color-pink-70: oklch(48% 0.2 360);
--color-pink-80: oklch(41% 0.17 360);
--color-pink-90: oklch(34% 0.14 360);
--color-pink-100: oklch(27% 0.1 360);
--color-pink-110: oklch(20% 0.05 360);
--color-purple-0: oklch(97% 0.05 315);
--color-purple-10: oklch(90% 0.1 315);
--color-purple-20: oklch(83% 0.14 315);
--color-purple-30: oklch(76% 0.17 315);
--color-purple-40: oklch(69% 0.19 315);
--color-purple-50: oklch(62% 0.21 315);
--color-purple-60: oklch(55% 0.21 315);
--color-purple-70: oklch(48% 0.2 315);
--color-purple-80: oklch(41% 0.17 315);
--color-purple-90: oklch(34% 0.14 315);
--color-purple-100: oklch(27% 0.1 315);
--color-purple-110: oklch(20% 0.05 315);
--color-red-0: oklch(97% 0.05 15);
--color-red-10: oklch(90% 0.1 15);
--color-red-20: oklch(83% 0.14 15);
--color-red-30: oklch(76% 0.17 15);
--color-red-40: oklch(69% 0.19 15);
--color-red-50: oklch(62% 0.21 15);
--color-red-60: oklch(55% 0.21 15);
--color-red-70: oklch(48% 0.2 15);
--color-red-80: oklch(41% 0.17 15);
--color-red-90: oklch(34% 0.14 15);
--color-red-100: oklch(27% 0.1 15);
--color-red-110: oklch(20% 0.05 15);
--color-violet-0: oklch(97% 0.05 290);
--color-violet-10: oklch(90% 0.13 290);
--color-violet-20: oklch(83% 0.17 290);
--color-violet-30: oklch(76% 0.2 290);
--color-violet-40: oklch(69% 0.22 290);
--color-violet-50: oklch(62% 0.24 290);
--color-violet-60: oklch(55% 0.24 290);
--color-violet-70: oklch(48% 0.2 290);
--color-violet-80: oklch(41% 0.17 290);
--color-violet-90: oklch(34% 0.14 290);
--color-violet-100: oklch(27% 0.1 290);
--color-violet-110: oklch(20% 0.05 290);
--color-white: #ffffff;
--color-yellow-0: oklch(97% 0.05 90);
--color-yellow-10: oklch(93% 0.1 90);
--color-yellow-20: oklch(86% 0.14 90);
--color-yellow-30: oklch(79% 0.2 90);
--color-yellow-40: oklch(72% 0.22 90);
--color-yellow-50: oklch(65% 0.24 90);
--color-yellow-60: oklch(58% 0.24 90);
--color-yellow-70: oklch(51% 0.23 90);
--color-yellow-80: oklch(41% 0.2 90);
--color-yellow-90: oklch(34% 0.17 90);
--color-yellow-100: oklch(27% 0.13 90);
--color-yellow-110: oklch(20% 0.08 90);
/** 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;
/** Font Weight **/
--font-weight: normal;
--font-weight-bold: 600;
/** Heading **/
--heading-font-size-medium: var(--font-size-large);
--heading-font-size-large: var(--font-size-xlarge);
--heading-font-size-xlarge: var(--font-size-xxlarge);
--heading-font-weight: var(--font-weight-bold);
/** Icon **/
--icon-color: light-dark(var(--color-gray-70), var(--color-gray-05));
--icon-color-critical: light-dark(var(--color-red-60), var(--color-red-20));
--icon-color-information: light-dark(var(--color-blue-60), var(--color-blue-20));
--icon-color-success: light-dark(var(--color-green-60), var(--color-green-20));
--icon-color-warning: light-dark(var(--color-yellow-60), var(--color-yellow-20));
--icon-size: var(--icon-size-small);
--icon-size-xsmall: var(--size-item-xsmall);
--icon-size-small: var(--size-item-small);
--icon-size-medium: 20px;
--icon-size-large: var(--size-item-medium);
--icon-size-xlarge: var(--size-item-large);
/** Input - Text **/
--input-text-min-height: var(--button-min-height);
/** Link **/
/**
* Not using --force-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;
/** Outline Color **/
--outline-color-error: light-dark(var(--color-red-70), var(--color-red-20));
/** Size **/
--size-item-xsmall: 12px;
--size-item-small: 16px;
--size-item-medium: 24px;
--size-item-large: 32px;
--size-item-xlarge: 48px;
/** Space **/
--space-xxsmall: calc(0.5 * var(--space-xsmall)); /* 2px */
--space-xsmall: 0.267rem; /* 4px */
--space-small: calc(2 * var(--space-xsmall)); /* 8px */
--space-medium: calc(3 * var(--space-xsmall)); /* 12px */
--space-large: calc(4 * var(--space-xsmall)); /* 16px */
--space-xlarge: calc(6 * var(--space-xsmall)); /* 24px */
--space-xxlarge: calc(8 * var(--space-xsmall)); /* 32px */
/** Table Row **/
--table-row-background-color: var(--background-color-canvas);
/** Text **/
--text-color-disabled: color-mix(in srgb, currentColor 40%, transparent);
--text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
--text-color-error: light-dark(var(--color-red-70), var(--color-red-20));
}
}
/* 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) {
/** Attention Dot **/
--attention-dot-color: AccentColor;
/** Background Color **/
--background-color-box: var(--background-color-canvas);
--background-color-canvas: Canvas;
--background-color-critical: var(--background-color-canvas);
--background-color-information: var(--background-color-canvas);
--background-color-success: var(--background-color-canvas);
--background-color-warning: var(--background-color-canvas);
/** Border **/
--border-color: CanvasText;
--border-color-card: color-mix(in srgb, currentColor 41%, transparent);
--border-color-deemphasized: currentColor;
--border-color-interactive: var(--text-color);
--border-color-transparent: CanvasText;
/** Button **/
--button-border-color: var(--button-text-color);
--button-text-color-ghost-hover: var(--button-text-color-hover);
--button-text-color-ghost-active: var(--button-text-color-active);
/** Icon **/
--icon-color: var(--text-color);
--icon-color-critical: var(--icon-color);
--icon-color-information: var(--icon-color);
--icon-color-success: var(--icon-color);
--icon-color-warning: var(--icon-color);
/** Outline Color **/
--outline-color-error: var(--border-color);
/** Text **/
--text-color: CanvasText;
--text-color-deemphasized: inherit;
--text-color-error: inherit;
}
}
}
/* Bug 1879900: Can't nest media queries inside of :host, :root selector
until Bug 1879349 lands */
@layer tokens-forced-colors {
@media (forced-colors) {
:root,
:host(.anonymous-content-host) {
/** Border **/
--border-color-card: CanvasText;
--border-color-deemphasized: ButtonText;
--border-color-interactive: ButtonText;
--border-color-interactive-hover: SelectedItem;
--border-color-interactive-active: ButtonText;
--border-color-interactive-disabled: GrayText;
/** Button **/
--button-background-color: ButtonFace; /* TODO Bug 1821203 - Gray use needs to be consolidated */
--button-background-color-hover: SelectedItemText;
--button-background-color-active: SelectedItemText;
--button-background-color-disabled: ButtonFace;
--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-background-color-primary-disabled: var(--button-text-color-disabled);
--button-border-color: var(--border-color-interactive);
--button-border-color-hover: var(--border-color-interactive-hover);
--button-border-color-active: var(--border-color-interactive-active);
--button-border-color-disabled: var(--border-color-interactive-disabled);
--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-border-color-primary: ButtonFace;
--button-border-color-primary-hover: SelectedItemText;
--button-border-color-primary-active: ButtonText;
--button-opacity-disabled: 1;
--button-text-color: ButtonText;
--button-text-color-hover: SelectedItem;
--button-text-color-active: SelectedItem;
--button-text-color-disabled: GrayText;
--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-text-color-ghost-hover: var(--button-text-color-hover);
--button-text-color-ghost-active: var(--button-text-color-active);
--button-text-color-primary: ButtonFace;
--button-text-color-primary-hover: SelectedItemText;
/** Color **/
--color-accent-primary: ButtonText;
--color-accent-primary-hover: SelectedItem;
--color-accent-primary-active: var(--color-accent-primary-hover);
/** Focus Outline **/
--focus-outline-color: var(--text-color);
/** Link **/
--link-color: LinkText;
--link-color-hover: LinkText;
--link-color-active: ActiveText;
--link-color-visited: var(--link-color);
/** Table Row **/
--table-row-background-color-alternate: var(--background-color-canvas); /* TODO Bug 1821203 - Gray use needs to be consolidated */
/** Text **/
--text-color-disabled: GrayText;
}
}
}