Source code
Revision control
Copy as Markdown
Other Tools
/* 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/. */
// @nova-cleanup(remove-temp-tokens): Remove this file when D286403 lands in tree
:root {
--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-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-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;
--attention-dot-color: light-dark(var(--color-green-40), var(--color-green-30));
--badge-border-color: light-dark(rgba(21, 20, 26, 40%), rgba(251, 251, 254, 40%));
--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-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-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-white: #FFF;
--color-yellow-90: #2B0B00;
--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-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);
--outline-color-error: light-dark(var(--color-red-70), var(--color-red-20));
--table-row-background-color: var(--background-color-canvas);
--table-row-background-color-alternate: light-dark(#F0F0F4, var(--color-neutral-80));
}
.temp-newtab-nova-attention-dot {
color: var(--attention-dot-color);
}
.temp-newtab-nova-outline-error {
outline-color: var(--outline-color-error);
}
@media (forced-colors) {
:root {
--attention-dot-color: AccentColor;
--badge-border-color: CanvasText;
--border-color: CanvasText;
--border-color-deemphasized: ButtonText;
--border-color-interactive: ButtonText;
--border-color-transparent: CanvasText;
--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);
--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-color: LinkText;
--link-color-hover: LinkText;
--link-color-active: ActiveText;
--outline-color-error: var(--border-color);
--table-row-background-color-alternate: var(--background-color-canvas);
}
}