tokens-shared.css - mozsearch

/* 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 the relevant *.tokens.json file

 * and run `mach buildtokens` to see your changes. */

@layer tokens-foundation, tokens-foundation-nova, tokens-prefers-contrast, tokens-prefers-contrast-nova, tokens-forced-colors, tokens-forced-colors-nova;

@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-overlay: var(--color-black-alpha-50);

    --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-error: light-dark(var(--color-red-70), var(--color-red-20));

    --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-selected: var(--color-accent-primary);

    --border-color-transparent: transparent;

    --border-radius-circle: 9999px;

    --border-radius-xsmall: 2px;

    --border-radius-small: 4px;

    --border-radius-medium: 8px;

    --border-radius-large: 16px;

    --border-width: 1px;

    /** box-shadow **/

    --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);

    /** button **/

    --button-attention-dot-color: var(--color-accent-attention);

    --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-destructive-selected: var(--button-background-color-destructive-active);

    --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-ghost-selected: var(--button-background-color-ghost-active);

    --button-background-color-menu: var(--button-background-color-ghost);

    --button-background-color-menu-hover: var(--button-background-color-ghost-hover);

    --button-background-color-menu-active: var(--button-background-color-ghost-active);

    --button-background-color-menu-disabled: var(--button-background-color-ghost-disabled);

    --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-background-color-primary-selected: var(--button-background-color-primary-active);

    --button-background-color-selected: var(--button-background-color-active);

    --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-destructive-selected: var(--button-border-color-destructive-active);

    --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-ghost-selected: var(--button-border-color-ghost-active);

    --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-color-primary-selected: var(--button-border-color-primary-active);

    --button-border-color-selected: var(--button-border-color-active);

    --button-border-radius: var(--border-radius-medium);

    --button-font-size: var(--font-size-root);

    --button-font-size-small: var(--font-size-small);

    --button-font-weight: var(--font-weight-semibold);

    --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-destructive-selected: var(--button-text-color-destructive-active);

    --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-ghost-selected: var(--button-text-color-ghost-active);

    --button-text-color-menu: var(--button-text-color-ghost);

    --button-text-color-menu-hover: var(--button-text-color-ghost-hover);

    --button-text-color-menu-active: var(--button-text-color-ghost-active);

    --button-text-color-menu-disabled: var(--button-text-color-ghost-disabled);

    --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-text-color-primary-selected: var(--button-text-color-primary-active);

    --button-text-color-selected: var(--button-text-color-active);

    /** card **/

    --card-border-color: color-mix(in srgb, currentColor 10%, transparent);

    --card-box-shadow: var(--box-shadow-level-2);

    --card-box-shadow-hover: var(--box-shadow-level-4);

    /** checkbox **/

    --checkbox-margin-inline: var(--space-small);

    --checkbox-size: var(--size-item-small); /* TODO Bug 1876537: Make this em-based, probably? */

    /** color **/

    --color-black: #000000;

    --color-black-alpha-10: oklch(0 0 0 / 10%);

    --color-black-alpha-20: oklch(0 0 0 / 20%);

    --color-black-alpha-30: oklch(0 0 0 / 30%);

    --color-black-alpha-40: oklch(0 0 0 / 40%);

    --color-black-alpha-50: oklch(0 0 0 / 50%);

    --color-black-alpha-60: oklch(0 0 0 / 60%);

    --color-black-alpha-70: oklch(0 0 0 / 70%);

    --color-black-alpha-80: oklch(0 0 0 / 80%);

    --color-black-alpha-90: oklch(0 0 0 / 90%);

    --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-white-alpha-10: oklch(1 0 0 / 10%);

    --color-white-alpha-20: oklch(1 0 0 / 20%);

    --color-white-alpha-30: oklch(1 0 0 / 30%);

    --color-white-alpha-40: oklch(1 0 0 / 40%);

    --color-white-alpha-50: oklch(1 0 0 / 50%);

    --color-white-alpha-60: oklch(1 0 0 / 60%);

    --color-white-alpha-70: oklch(1 0 0 / 70%);

    --color-white-alpha-80: oklch(1 0 0 / 80%);

    --color-white-alpha-90: oklch(1 0 0 / 90%);

    --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);

    /** dimension **/

    --dimension-2: 2px;

    --dimension-4: 4px;

    --dimension-8: 8px;

    --dimension-12: 12px;

    --dimension-16: 16px;

    --dimension-20: 20px;

    --dimension-24: 24px;

    --dimension-32: 32px;

    --dimension-40: 40px;

    --dimension-48: 48px;

    --dimension-56: 56px;

    --dimension-64: 64px;

    --dimension-80: 80px;

    --dimension-96: 96px;

    --dimension-100: 100px;

    --dimension-200: 200px;

    --dimension-300: 300px;

    --dimension-400: 400px;

    --dimension-500: 500px;

    --dimension-relative-025: 0.25rem;

    --dimension-relative-050: 0.5rem;

    --dimension-relative-075: 0.75rem;

    --dimension-relative-100: 1rem;

    --dimension-relative-125: 1.25rem;

    --dimension-relative-0125: 0.125rem;

    --dimension-relative-150: 1.5rem;

    --dimension-relative-200: 2rem;

    --dimension-relative-250: 2.5rem;

    --dimension-relative-300: 3rem;

    --dimension-relative-350: 3.5rem;

    --dimension-relative-400: 4rem;

    --dimension-relative-500: 5rem;

    --dimension-relative-600: 6rem;

    /** 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-size **/

    --font-size-heading-medium: var(--font-size-large);

    --font-size-heading-large: var(--font-size-xlarge);

    --font-size-heading-xlarge: var(--font-size-xxlarge);

    /** font-weight **/

    --font-weight: normal;

    --font-weight-bold: 700;

    --font-weight-heading: var(--font-weight-semibold);

    --font-weight-semibold: 600;

    /** 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(--dimension-12);

    --icon-size-small: var(--dimension-16);

    --icon-size-medium: var(--dimension-20);

    --icon-size-large: var(--dimension-24);

    --icon-size-xlarge: var(--dimension-32);

    /** input **/

    --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;

    /** popup **/

    --popup-box-shadow: var(--box-shadow-level-3);

    /** size **/

    --size-image-xsmall: var(--dimension-40);

    --size-image-small: var(--dimension-48);

    --size-image-medium: var(--dimension-56);

    --size-image-large: var(--dimension-64);

    --size-image-xlarge: var(--dimension-80);

    --size-image-xxlarge: var(--dimension-96);

    --size-item-xsmall: var(--dimension-12);

    --size-item-small: var(--dimension-16);

    --size-item-medium: var(--dimension-24);

    --size-item-large: var(--dimension-32);

    --size-item-xlarge: var(--dimension-48);

    --size-layout-xsmall: var(--dimension-100);

    --size-layout-small: var(--dimension-200);

    --size-layout-medium: var(--dimension-300);

    --size-layout-large: var(--dimension-400);

    --size-layout-xlarge: var(--dimension-500);

    --size-sidebar: 280px;

    --size-sidebar-narrow: 118px;

    /** space **/

    --space-xxsmall: var(--dimension-relative-0125); /* 0.125rem */

    --space-xsmall: var(--dimension-relative-025); /* 0.25rem */

    --space-small: var(--dimension-relative-050); /* 0.5rem */

    --space-medium: var(--dimension-relative-075); /* 0.75rem */

    --space-large: var(--dimension-relative-100); /* 1rem */

    --space-xlarge: var(--dimension-relative-150); /* 1.5rem */

    --space-xxlarge: var(--dimension-relative-200); /* 2rem */

    /** tab **/

    --tab-attention-dot-color: var(--color-accent-attention);

    --tab-box-shadow: var(--box-shadow-level-1);

    /** table **/

    --table-background-color: light-dark(#f8f8fa, rgb(35, 34, 43));

    --table-border-color: color-mix(in srgb, currentColor 41%, transparent);

    --table-header-background-color: var(--color-accent-primary);

    --table-row-background-color: var(--background-color-canvas);

    /** text-color **/

    --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));

    --text-color-list-item-hover: var(--text-color);

/* 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) {

      /** background-color **/

      --background-color-box: var(--background-color-canvas);

      --background-color-box-info: var(--background-color-canvas);

      --background-color-canvas: Canvas;

      --background-color-critical: var(--background-color-canvas);

      --background-color-information: var(--background-color-canvas);

      --background-color-list-item-hover: SelectedItem;

      --background-color-success: var(--background-color-canvas);

      --background-color-warning: var(--background-color-canvas);

      /** border **/

      --border-color: CanvasText;

      --border-color-deemphasized: currentColor;

      --border-color-error: var(--border-color);

      --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);

      /** card **/

      --card-border-color: color-mix(in srgb, currentColor 41%, transparent);

      /** color **/

      --color-accent-attention: AccentColor;

      /** 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);

      /** text-color **/

      --text-color: CanvasText;

      --text-color-deemphasized: inherit;

      --text-color-error: inherit;

      --text-color-list-item-hover: SelectedItemText;

/* 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-deemphasized: ButtonText;

      --border-color-interactive: ButtonText;

      --border-color-interactive-hover: SelectedItem;

      --border-color-interactive-active: ButtonText;

      --border-color-interactive-disabled: GrayText;

      --border-color-selected: SelectedItem;

      /** 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-menu-hover: var(--button-background-color-primary);

      --button-background-color-menu-active: var(--button-background-color-primary);

      --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-menu-hover: var(--button-text-color-primary);

      --button-text-color-menu-active: var(--button-text-color-primary);

      --button-text-color-primary: ButtonFace;

      --button-text-color-primary-hover: SelectedItemText;

      /** card **/

      --card-border-color: CanvasText;

      /** color **/

      --color-accent-primary: ButtonText;

      --color-accent-primary-hover: SelectedItem;

      --color-accent-primary-active: var(--color-accent-primary-hover);

      --color-accent-primary-selected: SelectedItem;

      /** 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 **/

      --table-background-color: Canvas;

      --table-border-color: CanvasText;

      --table-header-background-color: AccentColor;

      --table-header-text-color: AccentColorText;

      --table-row-background-color-alternate: var(--background-color-canvas); /* TODO Bug 1821203 - Gray use needs to be consolidated */

      /** text-color **/

      --text-color-disabled: GrayText;

      --text-color-accent-primary-selected: SelectedItemText;

/* stylelint-disable-next-line media-query-no-invalid */

@media -moz-pref("browser.design-tokens.nova") {

  @layer tokens-foundation-nova {

    :root,

    :host(.anonymous-content-host) {

      /** border **/

      --border-color: light-dark(var(--color-neutral-20), var(--color-neutral-50));

      --border-color-deemphasized: light-dark(var(--color-neutral-30), var(--color-neutral-70));

      --border-color-interactive: light-dark(var(--color-neutral-30), var(--color-neutral-50));

      --border-color-transparent: transparent;

      /** button **/

      --button-background-color: transparent; /* TODO Bug 1821203 - Gray use needs to be consolidated */

      --button-background-color-hover: light-dark(var(--color-purple-desaturated-10), var(--color-purple-desaturated-60));

      --button-background-color-active: light-dark(var(--color-purple-desaturated-20), var(--color-purple-desaturated-50));

      --button-background-color-ghost: var(--button-background-color);

      --button-background-color-ghost-disabled: var(--button-background-color-ghost);

      --button-background-color-primary-hover: light-dark(var(--color-violet-70), var(--color-violet-20));

      --button-background-color-primary-active: light-dark(var(--color-violet-80), var(--color-violet-10));

      --button-border-color: var(--color-accent-primary);

      --button-border-color-destructive: var(--button-border-color-ghost);

      --button-border-color-destructive-selected: var(--button-border-color-destructive);

      --button-border-color-ghost: transparent;

      --button-border-color-ghost-hover: var(--button-border-color-ghost);

      --button-border-color-ghost-active: var(--button-border-color-ghost);

      --button-border-color-ghost-disabled: var(--button-border-color-ghost);

      --button-border-color-ghost-selected: var(--button-border-color-ghost);

      --button-border-color-primary: var(--button-border-color-ghost);

      --button-border-color-primary-selected: var(--button-border-color-primary);

      --button-border-color-selected: var(--button-border-color);

      --button-border-radius: var(--border-radius-circle);

      --button-size-icon-small: var(--size-item-medium);

      --button-text-color: light-dark(var(--color-violet-90), var(--color-neutral-0));

      --button-text-color-destructive: light-dark(var(--color-white), var(--color-neutral-90));

      --button-text-color-destructive-selected: light-dark(var(--button-text-color-destructive), var(--button-text-color-destructive-active));

      --button-text-color-ghost: var(--button-text-color);

      --button-text-color-ghost-hover: var(--button-text-color-ghost);

      --button-text-color-ghost-active: var(--button-text-color-ghost);

      --button-text-color-ghost-disabled: var(--button-text-color-ghost);

      --button-text-color-menu-disabled: var(--button-text-color-ghost-disabled);

      --button-text-color-primary: light-dark(var(--color-white), var(--color-neutral-90));

      --button-text-color-primary-active: var(--button-text-color-primary);

      --button-text-color-selected: var(--button-text-color);

      /** color **/

      --color-accent-attention: light-dark(var(--color-green-40), var(--color-green-30));

      --color-accent-primary: light-dark(var(--color-violet-50), var(--color-violet-30));

      --color-accent-primary-hover: light-dark(var(--color-violet-60), var(--color-violet-40));

      --color-accent-primary-active: light-dark(var(--color-violet-70), var(--color-violet-50));

      --color-accent-primary-selected: light-dark(var(--color-violet-50), var(--color-violet-30));

      --color-blue-0: #e3f4ff;

      --color-blue-10: #c2e5ff;

      --color-blue-20: #9cceff;

      --color-blue-30: #72b3ff;

      --color-blue-40: #4893ff;

      --color-blue-50: #2971e7;

      --color-blue-60: #0f50b6;

      --color-blue-70: #023587;

      --color-blue-80: #001d61;

      --color-blue-90: #000f42;

      --color-cyan-0: #e7f4f9;

      --color-cyan-10: #c0e7f5;

      --color-cyan-20: #90d3e8;

      --color-cyan-30: #5abad7;

      --color-cyan-40: #0f9fc1;

      --color-cyan-50: #0a7f9f;

      --color-cyan-60: #055e78;

      --color-cyan-70: #004257;

      --color-cyan-80: #002b3b;

      --color-cyan-90: #001b28;

      --color-green-0: #e8f7e5;

      --color-green-10: #c6ebbd;

      --color-green-20: #9cd790;

      --color-green-30: #70bf5e;

      --color-green-40: #3da321;

      --color-green-50: #108307;

      --color-green-60: #056204;

      --color-green-70: #004600;

      --color-green-80: #002e00;

      --color-green-90: #011e00;

      --color-neutral-0: #f6f8ff;

      --color-neutral-10: #eef0fb;

      --color-neutral-20: #d7d8e3;

      --color-neutral-30: #b1b2bd;

      --color-neutral-40: #7e808a;

      --color-neutral-50: #4f5059;

      --color-neutral-60: #32333b;

      --color-neutral-70: #26272f;

      --color-neutral-80: #181820;

      --color-neutral-90: #101118;

      --color-orange-0: #ffede0;

      --color-orange-10: #ffd3b7;

      --color-orange-20: #ffb28a;

      --color-orange-30: #ff8d5b;

      --color-orange-40: #f26527;

      --color-orange-50: #ce4008;

      --color-orange-60: #9f2304;

      --color-orange-70: #730f00;

      --color-orange-80: #4e0200;

      --color-orange-90: #350000;

      --color-pink-0: #ffeaf5;

      --color-pink-10: #feceec;

      --color-pink-20: #fface0;

      --color-pink-30: #fe88d2;

      --color-pink-40: #ef60c4;

      --color-pink-50: #cb3aa6;

      --color-pink-60: #9b1b7d;

      --color-pink-70: #700059;

      --color-pink-80: #4b003a;

      --color-pink-90: #300024;

      --color-purple-0: #faebff;

      --color-purple-10: #f4d3ff;

      --color-purple-20: #e7b5ff;

      --color-purple-30: #d98fff;

      --color-purple-40: #cc67fd;

      --color-purple-50: #ac3dea;

      --color-purple-60: #821fb5;

      --color-purple-70: #5c0583;

      --color-purple-80: #3b0058;

      --color-purple-90: #240036;

      --color-purple-desaturated-0: #f4f0f7;

      --color-purple-desaturated-10: #e5daef;

      --color-purple-desaturated-20: #d0bddf;

      --color-purple-desaturated-30: #b79ecb;

      --color-purple-desaturated-40: #9c7eb3;

      --color-purple-desaturated-50: #7d5e93;

      --color-purple-desaturated-60: #5d4171;

      --color-purple-desaturated-70: #412853;

      --color-purple-desaturated-80: #2a1439;

      --color-purple-desaturated-90: #1a0726;

      --color-red-0: #ffebe6;

      --color-red-10: #ffd0ca;

      --color-red-20: #ffadab;

      --color-red-30: #ff858e;

      --color-red-40: #f35a77;

      --color-red-50: #cf325e;

      --color-red-60: #a01242;

      --color-red-70: #76002b;

      --color-red-80: #500219;

      --color-red-90: #36000d;

      --color-violet-0: #f5ecff;

      --color-violet-10: #e7d9ff;

      --color-violet-20: #d2bfff;

      --color-violet-30: #bba0ff;

      --color-violet-40: #a27dff;

      --color-violet-50: #854dff;

      --color-violet-60: #632fc8;

      --color-violet-70: #451793;

      --color-violet-80: #2b0664;

      --color-violet-90: #19053e;

      --color-violet-desaturated-0: #f2f0f8;

      --color-violet-desaturated-10: #e1dbf1;

      --color-violet-desaturated-20: #c9c0e3;

      --color-violet-desaturated-30: #aea1d1;

      --color-violet-desaturated-40: #9182ba;

      --color-violet-desaturated-50: #71629a;

      --color-violet-desaturated-60: #534577;

      --color-violet-desaturated-70: #382c58;

      --color-violet-desaturated-80: #23173e;

      --color-violet-desaturated-90: #14092b;

      --color-white: #ffffff;

      --color-yellow-0: #fff9e2;

      --color-yellow-10: #fbe4ad;

      --color-yellow-20: #f4c470;

      --color-yellow-30: #ea9e1e;

      --color-yellow-40: #d57800;

      --color-yellow-50: #ae5900;

      --color-yellow-60: #834004;

      --color-yellow-70: #5e2900;

      --color-yellow-80: #401700;

      --color-yellow-90: #2b0b00;

      /** icon **/

      --icon-color: light-dark(var(--color-neutral-70), var(--color-neutral-0));

      --icon-color-critical: light-dark(var(--color-red-40), var(--color-red-20));

      --icon-color-information: light-dark(var(--color-blue-40), var(--color-blue-20));

      --icon-color-success: light-dark(var(--color-green-40), var(--color-green-20));

      --icon-color-warning: light-dark(var(--color-yellow-40), var(--color-yellow-20));

      /** link **/

      --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);

      /** table **/

      --table-row-background-color: var(--background-color-canvas);

      --table-row-background-color-alternate: light-dark(#f0f0f4, var(--color-neutral-80)); /* TODO Bug 1821203 - Gray use needs to be consolidated */

  /* Bug 1879900: Can't nest media queries inside of :host, :root selector

   until Bug 1879349 lands */

  @layer tokens-forced-colors-nova {

    @media (forced-colors) {

      :root,

      :host(.anonymous-content-host) {

        /** border **/

        --border-color: CanvasText;

        --border-color-deemphasized: ButtonText;

        --border-color-interactive: ButtonText;

        --border-color-transparent: CanvasText;

        /** 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-ghost: transparent;

        --button-background-color-primary-hover: var(--color-accent-primary-hover);

        --button-background-color-primary-active: var(--color-accent-primary-active);

        --button-border-color: var(--border-color-interactive);

        --button-border-color-destructive: var(--button-border-color-primary);

        --button-border-color-destructive-selected: var(--button-border-color-destructive-active);

        --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-ghost-selected: var(--button-border-color-ghost-active);

        --button-border-color-primary: ButtonFace;

        --button-border-color-primary-selected: var(--button-border-color-primary-active);

        --button-border-color-selected: var(--button-border-color-active);

        --button-text-color: ButtonText;

        --button-text-color-destructive: var(--button-text-color-primary);

        --button-text-color-destructive-selected: var(--button-text-color-destructive-active);

        --button-text-color-ghost: ButtonText;

        --button-text-color-ghost-hover: var(--button-text-color-ghost-active);

        --button-text-color-ghost-active: var(--button-text-color-active);

        --button-text-color-ghost-disabled: GrayText;

        --button-text-color-menu-disabled: var(--button-text-color-primary);

        --button-text-color-primary: ButtonFace;

        --button-text-color-primary-active: var(--button-text-color-primary-hover);

        --button-text-color-selected: var(--button-text-color-active);

        /** color **/

        --color-accent-attention: AccentColor;

        --color-accent-primary: AccentColor;

        --color-accent-primary-hover: SelectedItem;

        --color-accent-primary-active: var(--color-accent-primary-hover);

        --color-accent-primary-selected: SelectedItem;

        /** 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);

        /** link **/

        --link-color: LinkText;

        --link-color-hover: LinkText;

        --link-color-active: ActiveText;

        /** table **/

        --table-row-background-color-alternate: var(--background-color-canvas); /* TODO Bug 1821203 - Gray use needs to be consolidated */

Source code

Revision control

Copy as Markdown

Other Tools