_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.nova.enabled` 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.

*/

@layer tokens-foundation-nova {

  :root.nova-tokens {

    /** background-color **/

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

    --background-color-box-info: light-dark(var(--color-gray-15), var(--color-gray-65));

    --background-color-canvas: light-dark(var(--color-gray-05), var(--color-gray-85));

    --background-color-critical: light-dark(var(--color-red-10), var(--color-red-70));

    --background-color-information: light-dark(var(--color-violet-10), var(--color-violet-70));

    --background-color-success: light-dark(var(--color-green-10), var(--color-green-70));

    --background-color-warning: light-dark(var(--color-yellow-10), var(--color-yellow-70));

    /** border **/

    --border-color: light-dark(var(--color-gray-30), var(--color-gray-40));

    --border-color-deemphasized: color-mix(in srgb, currentColor 24%, transparent);

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

    --border-color-interactive-hover: light-dark(var(--color-gray-50), var(--color-gray-20));

    --border-color-interactive-active: light-dark(var(--color-gray-50), var(--color-gray-15));

    --border-color-interactive-disabled: light-dark(var(--color-gray-25), var(--color-gray-55));

    --border-color-interactive: light-dark(var(--color-gray-45), var(--color-gray-40));

    --border-radius-xsmall: 4px;

    --border-radius-small: 8px;

    --border-radius-medium: 12px;

    --border-radius-xlarge: 24px;

    /** box-shadow **/

    --box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 15%), rgba(0, 0, 0, 20%));

    --box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 40%));

    --box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 2%), rgba(0, 0, 0, 6%));

    --box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 4%), rgba(0, 0, 0, 12%));

    /** button **/

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

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

    --button-background-color: transparent;

    --button-background-color-hover: light-dark(var(--color-violet-desaturated-20), var(--color-violet-desaturated-50));

    --button-background-color-active: light-dark(var(--color-violet-desaturated-30), var(--color-violet-desaturated-40));

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

    --button-background-color-destructive-active: light-dark(var(--color-red-70), var(--color-red-10));

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

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

    --button-background-color-muted: light-dark(var(--color-gray-20), var(--color-gray-55));

    --button-background-color-muted-hover: light-dark(var(--color-gray-30), var(--color-gray-45));

    --button-background-color-muted-active: light-dark(var(--color-gray-40), var(--color-gray-35));

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

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

    --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: light-dark(var(--color-violet-desaturated-50), var(--color-violet-desaturated-40));

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

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

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

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

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

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

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

    --button-border-width-split: 0;

    --button-gap-split: 0;

    --button-padding-inline-small: var(--space-medium);

    --button-split-separator-background-color: var(--button-border-color);

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

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

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

    --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-hover: light-dark(var(--button-text-color-ghost-hover), var(--button-text-color-hover));

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

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

    --button-text-color-menu-selected: light-dark(var(--button-text-color-ghost-selected), var(--button-text-color-selected));

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

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

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

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

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

    --button-text-color-primary: light-dark(var(--color-white), var(--color-gray-70));

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

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

    /** card **/

    --card-gap: var(--space-medium);

    --card-header-background-color: var(--button-background-color);

    --card-header-border-color: transparent;

    /** color **/

    --color-accent-attention: light-dark(var(--color-green-50), var(--color-green-20));

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

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

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

    --color-blue-0: #ECF3F8;

    --color-blue-10: #C5EAFE;

    --color-blue-20: #A2D3FF;

    --color-blue-30: #7BB2FF;

    --color-blue-40: #5A87FD;

    --color-blue-50: #455FE7;

    --color-blue-60: #3246B0;

    --color-blue-70: #23327B;

    --color-blue-80: #17214C;

    --color-blue-90: #111524;

    --color-cyan-0: #EBF4F5;

    --color-cyan-10: #C3EEF8;

    --color-cyan-20: #8FDDF0;

    --color-cyan-30: #4CC4E1;

    --color-cyan-40: #10A4CA;

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

    --color-cyan-60: #066077;

    --color-cyan-70: #034554;

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

    --color-cyan-90: #011C23;

    --color-gray-0: #FCFBFF;

    --color-gray-05: #F7F6FB;

    --color-gray-10: #EFEDF2;

    --color-gray-15: #E3E2E7;

    --color-gray-20: #D6D5DA;

    --color-gray-25: #C7C6CB;

    --color-gray-30: #B7B6BA;

    --color-gray-35: #A6A4A9;

    --color-gray-40: #949297;

    --color-gray-45: #817F84;

    --color-gray-50: #67666A;

    --color-gray-55: #515054;

    --color-gray-60: #3F3E42;

    --color-gray-65: #312F33;

    --color-gray-70: #252428;

    --color-gray-75: #1D1B1F;

    --color-gray-80: #171519;

    --color-gray-85: #131215;

    --color-gray-90: #121114;

    --color-green-0: #ECF4F1;

    --color-green-10: #C4F1E0;

    --color-green-20: #90E3C6;

    --color-green-30: #4ACCA6;

    --color-green-40: #11AE84;

    --color-green-50: #008865;

    --color-green-60: #06674B;

    --color-green-70: #004933;

    --color-green-80: #003020;

    --color-green-90: #001E12;

    --color-orange-0: #F8F0EC;

    --color-orange-10: #FFDBC5;

    --color-orange-20: #FEBD99;

    --color-orange-30: #FF9565;

    --color-orange-40: #F4682C;

    --color-orange-50: #CD4208;

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

    --color-orange-70: #701C07;

    --color-orange-80: #461209;

    --color-orange-90: #250E0B;

    --color-pink-0: #F7EFF3;

    --color-pink-10: #FFD5EE;

    --color-pink-20: #FFB0E2;

    --color-pink-30: #F585D3;

    --color-pink-40: #DB54BF;

    --color-pink-50: #B32E9F;

    --color-pink-60: #882078;

    --color-pink-70: #5F1854;

    --color-pink-80: #3C1334;

    --color-pink-90: #1E111B;

    --color-purple-0: #FAEBFF;

    --color-purple-10: #F6D7FF;

    --color-purple-20: #E8B7FF;

    --color-purple-30: #D490FF;

    --color-purple-40: #B864EE;

    --color-purple-50: #9540C8;

    --color-purple-60: #702E98;

    --color-purple-70: #4F216B;

    --color-purple-80: #311842;

    --color-purple-90: #1A1220;

    --color-red-0: #FCF2F3;

    --color-red-10: #FFD9DF;

    --color-red-20: #FFB6BF;

    --color-red-30: #FF8998;

    --color-red-40: #ED566E;

    --color-red-50: #C52D4F;

    --color-red-60: #961E3D;

    --color-red-70: #69172D;

    --color-red-80: #42121F;

    --color-red-90: #211014;

    --color-violet-0: #F5ECFF;

    --color-violet-10: #EADDFF;

    --color-violet-20: #D4C1FF;

    --color-violet-30: #B89CFF;

    --color-violet-40: #9871FF;

    --color-violet-50: #764EDD;

    --color-violet-60: #5939A8;

    --color-violet-70: #3E2976;

    --color-violet-80: #271C48;

    --color-violet-90: #161423;

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

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

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

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

    --color-violet-desaturated-40: #9687C0;

    --color-violet-desaturated-50: #75669F;

    --color-violet-desaturated-60: #584A7D;

    --color-violet-desaturated-70: #3E315F;

    --color-violet-desaturated-80: #281D44;

    --color-violet-desaturated-90: #180E30;

    --color-yellow-0: #F9F5E6;

    --color-yellow-10: #FDE8B5;

    --color-yellow-20: #FBCC77;

    --color-yellow-30: #F3A81E;

    --color-yellow-40: #DB820E;

    --color-yellow-50: #B26100;

    --color-yellow-60: #854800;

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

    --color-yellow-80: #3E1D00;

    --color-yellow-90: #270F00;

    /** icon **/

    --icon-color: var(--text-color);

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

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

    --icon-color-information: light-dark(var(--color-violet-50), var(--color-violet-20));

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

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

    --icon-size-xsmall: var(--size-item-xsmall);

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

    --icon-size-large: var(--size-item-medium);

    --icon-size-xlarge: var(--size-item-large);

    /** info-bar **/

    --info-bar-border-color: light-dark(var(--color-violet-desaturated-20), var(--color-gray-60));

    --info-bar-margin: 0;

    /** input **/

    --input-search-border-radius: var(--border-radius-circle);

    --input-search-icon-size: var(--icon-size-small);

    --input-text-background-color: var(--background-color-box);

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

    /** link **/

    --link-border-radius-focus: var(--border-radius-xsmall);

    /** page **/

    --page-main-content-width: 664px;

    /** panel **/

    --panel-background-color: var(--popup-background-color);

    --panel-border-color: var(--popup-border-color);

    --panel-border-radius: var(--popup-border-radius);

    --panel-menuitem-border-radius: var(--border-radius-large);

    --panel-text-color: var(--text-color);

    /** popup **/

    --popup-border-color: var(--border-color-deemphasized);

    --popup-border-radius: var(--border-radius-xlarge);

    /** sidebar **/

    --sidebar-border-color: var(--chrome-content-separator-color);

    /** table **/

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

    --table-row-background-color-alternate: light-dark(var(--color-gray-20), var(--color-gray-65));

    /** text-color **/

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

    --text-color-accent-primary-selected: light-dark(var(--color-white), var(--color-gray-55));

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

    /** toolbar **/

    --toolbar-background-color: light-dark(rgba(255, 255, 255, 40%), rgba(0, 0, 0, 20%));

    --toolbar-field-background-color: var(--toolbar-background-color);

    --toolbar-field-background-color-focus: var(--background-color-box);

    --toolbar-field-border-color: light-dark(var(--color-gray-20), var(--color-gray-60));

    --toolbar-field-border-color-focus: var(--focus-outline-color);

    --toolbar-field-text-color: light-dark(var(--color-violet-desaturated-70), var(--color-violet-desaturated-10));

    --toolbar-field-text-color-focus: var(--toolbar-field-text-color);

    --toolbar-padding-inline: 6px;

    /** toolbarbutton **/

    --toolbarbutton-background-color-hover: light-dark(rgba(117, 102, 159, 25%), rgba(182, 170, 217, 25%));

    --toolbarbutton-background-color-active: light-dark(rgba(117, 102, 159, 40%), rgba(182, 170, 217, 40%));

    --toolbarbutton-icon-fill: light-dark(var(--color-violet-desaturated-50), var(--color-violet-desaturated-10));

    --toolbarbutton-icon-fill-attention: var(--color-accent-primary);

    --toolbarbutton-opacity-disabled: 0.4;

    --toolbarbutton-outline-color: transparent;

    --toolbarbutton-outline-color-selected: var(--toolbarbutton-outline-color-active);

    --toolbarbutton-outline-offset: -1px;

    /** toolbox **/

    --toolbox-background-color: light-dark(var(--color-white), var(--color-gray-70));

    --toolbox-background-color-gradient-leading: light-dark(var(--color-violet-10), var(--color-violet-desaturated-70));

    --toolbox-background-color-gradient-trailing: light-dark(var(--color-orange-10), var(--color-orange-70));

    --toolbox-background-color-inactive: transparent;

    /* This gradient is only used for Nova */

    --toolbox-background-gradient: linear-gradient(96deg, color-mix(var(--toolbox-background-color-gradient-leading) 50%, transparent) 39.84%, color-mix(var(--toolbox-background-color-gradient-trailing) 50%, transparent) 101.72%);

    --toolbox-text-color: var(--text-color);

    /* Figma aliases this to toolbox/text/color so designers see a real color, but CSS must use currentColor: the tab inherits --lwt-text-color under an lwtheme and --toolbox-text-color-inactive in a background window, neither of which --toolbox-text-color tracks. Listed in figma-import.mjs's FIGMA_IGNORES so the alias doesn't overwrite this. */

    --toolbox-text-color-current: var(--toolbox-text-color);

@layer tokens-prefers-contrast-nova {

  @media (prefers-contrast) {

    :root.nova-tokens {

      /** info-bar **/

      --info-bar-border-color: CanvasText;

      /** text-color **/

      --text-color: CanvasText;

      --text-color-error: inherit;

      /** toolbar **/

      --toolbar-field-border-color-focus: var(--focus-outline-color);

@layer tokens-forced-colors-nova {

  @media (forced-colors) {

    :root.nova-tokens {

      /** border **/

      --border-color-deemphasized: CanvasText;

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

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

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

      /** box-shadow **/

      --box-shadow-color-darker-layer-1: transparent;

      --box-shadow-color-darker-layer-2: transparent;

      --box-shadow-color-lighter-layer-1: transparent;

      --box-shadow-color-lighter-layer-2: transparent;

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

      --button-background-color-muted-hover: var(--button-background-color-hover);

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

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

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

      --button-background-color-primary-disabled: GrayText;

      --button-background-color-selected: SelectedItem;

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

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

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

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

      --button-border-color-muted-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-disabled: 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-disabled: GrayText;

      --button-text-color-menu-hover: -moz-menuhovertext;

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

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

      --button-text-color-muted: ButtonText;

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

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

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

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

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

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

      --button-text-color-selected: SelectedItemText;

      /** card **/

      --card-header-border-color: var(--button-border-color);

      /** color **/

      --color-accent-attention: AccentColor;

      --color-accent-primary: ButtonText;

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

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

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

      /** icon **/

      --icon-color-accent-primary-desaturated: CanvasText;

      /** text-color **/

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

      /** toolbar **/

      --toolbar-background-color: Canvas;

      --toolbar-field-border-color: ButtonText;

      --toolbar-field-text-color: var(--text-color);

      /** toolbarbutton **/

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

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

      --toolbarbutton-icon-fill: var(--button-text-color);

      --toolbarbutton-outline-color: var(--button-border-color);

      --toolbarbutton-outline-color-hover: var(--button-border-color-hover);

      --toolbarbutton-outline-color-active: var(--button-border-color-active);

      /** toolbox **/

      --toolbox-background-color-gradient-leading: Canvas;

      --toolbox-background-color-gradient-trailing: Canvas;

      /* This gradient is only used for Nova */

      --toolbox-background-gradient: image(transparent);

Source code

Revision control

Copy as Markdown

Other Tools