_tokens.scss - 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 *.nova.tokens.json file

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

/*

 * @backward-compat { version 155 }

 * Nova design token overrides are gated on the `browser.design-tokens.nova` pref in

 * tokens-shared.css, which is NOT enabled when HNT ships its Nova experience (gated

 * on `browser.newtabpage.activity-stream.nova.enabled`). Since the newtab extension

 * can train-hop, it cannot rely on toolkit CSS behind a pref gate. This file provides

 * those token values directly so nova/activity-stream.css is self-contained.

 * Remove this file when `browser.nova.enabled` unifies both prefs and reaches Release.

*/

:root {

  /** background-color **/

  --background-color-box: light-dark(var(--color-white), var(--color-neutral-70));

  --background-color-box-info: light-dark(var(--color-neutral-20), var(--color-neutral-80));

  --background-color-canvas: light-dark(var(--color-violet-desaturated-0), var(--color-neutral-90));

  --background-color-critical: light-dark(var(--color-red-0), var(--color-red-80));

  --background-color-information: light-dark(var(--color-blue-0), var(--color-blue-80));

  --background-color-success: light-dark(var(--color-green-0), var(--color-green-80));

  --background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-80));

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

  /* TODO Bug 1821203 - Gray use needs to be consolidated */

  --button-background-color: transparent;

  --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: #FFF;

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

  /* TODO Bug 1821203 - Gray use needs to be consolidated */

  --table-row-background-color-alternate: light-dark(#F0F0F4, var(--color-neutral-80));

  /** text-color **/

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

  --text-color-disabled: light-dark(rgba(21, 20, 26, 40%), rgba(251, 251, 254, 40%));

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

  --text-color-deemphasized: light-dark(rgba(20, 9, 43, 70%), rgba(242, 240, 248, 70%));

  --text-color-error: light-dark(var(--color-red-50), var(--color-red-20));

@media (forced-colors) {

  :root {

    /** 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-success: var(--background-color-canvas);

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

    /** border **/

    --border-color: CanvasText;

    --border-color-deemphasized: ButtonText;

    --border-color-interactive: ButtonText;

    --border-color-transparent: CanvasText;

    /** button **/

    /* TODO Bug 1821203 - Gray use needs to be consolidated */

    --button-background-color: ButtonFace;

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

    /* TODO Bug 1821203 - Gray use needs to be consolidated */

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

    /** text-color **/

    --text-color: CanvasText;

    --text-color-disabled: GrayText;

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

    --text-color-deemphasized: CanvasText;

    --text-color-error: CanvasText;

Source code

Revision control

Copy as Markdown

Other Tools