forked from mirrors/gecko-dev
68b2a33f07
* Add light-dark transformer for generating web CSS * Use value object in design-tokens.json * Add HCM media queries to built CSS * Add MPL license and how to edit file header * Strip '-default' from token names and values * Refactor generated media query placement within file. * generate multiple CSS files from a single JSON file. * add the :host(.anonymous-content-host) selector to the built CSS * Output tokens in pre-defined order * Generate CSS layer declarations and relevant selectors * Sort tokens by t-shirt size and state semantically not alphabetically * Add remaining tokens to design-tokens.json * Add design tokens JSON docs --------- Co-authored-by: Jules Simplicio <jsimplicio@mozilla.com> Co-authored-by: Hanna Jones <hjones@mozilla.com> Co-authored-by: Mark Striemer <mstriemer@mozilla.com> Co-authored-by: Tim Giles <tgiles@mozilla.com> Differential Revision: https://phabricator.services.mozilla.com/D204108
284 lines
13 KiB
CSS
284 lines
13 KiB
CSS
/* 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-05), var(--color-red-80));
|
|
--background-color-information: light-dark(var(--color-blue-05), var(--color-blue-80));
|
|
--background-color-success: light-dark(var(--color-green-05), var(--color-green-80));
|
|
--background-color-warning: light-dark(var(--color-yellow-05), var(--color-yellow-80));
|
|
|
|
/** Border **/
|
|
--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-radius-circle: 9999px;
|
|
--border-radius-small: 4px;
|
|
--border-radius-medium: 8px;
|
|
--border-width: 1px;
|
|
|
|
/** Box Shadow **/
|
|
--box-shadow-10: 0 1px 4px var(--color-black-a10);
|
|
|
|
/** Button **/
|
|
--button-background-color-disabled: var(--button-background-color);
|
|
--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-10));
|
|
--button-background-color-destructive-active: light-dark(var(--color-red-70), var(--color-red-05));
|
|
--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-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-gray-05), 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: var(--button-text-color);
|
|
--button-text-color-ghost-hover: var(--button-text-color-hover);
|
|
--button-text-color-ghost-active: var(--button-text-color-active);
|
|
--button-text-color-ghost-disabled: var(--button-text-color-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);
|
|
|
|
/** Checkbox **/
|
|
--checkbox-margin-inline: var(--space-small);
|
|
--checkbox-size: var(--size-item-small); /* TODO Bug 1876537: Make this em-based, probably? */
|
|
|
|
/** Color **/
|
|
--color-black-a10: rgba(0, 0, 0, 0.1);
|
|
--color-blue-05: #deeafc;
|
|
--color-blue-30: #73a7f3;
|
|
--color-blue-50: #0060df;
|
|
--color-blue-60: #0250bb;
|
|
--color-blue-70: #054096;
|
|
--color-blue-80: #003070;
|
|
--color-cyan-20: #aaf2ff;
|
|
--color-cyan-30: #80ebff;
|
|
--color-cyan-50: #00ddff;
|
|
--color-gray-05: #fbfbfe;
|
|
--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-05: #d8eedc;
|
|
--color-green-30: #4dbc87;
|
|
--color-green-50: #017a40;
|
|
--color-green-80: #004725;
|
|
--color-red-05: #ffe8e8;
|
|
--color-red-10: #ffbdc5;
|
|
--color-red-20: #ff9aa2;
|
|
--color-red-30: #f37f98;
|
|
--color-red-50: #d7264c;
|
|
--color-red-60: #ac1e3d;
|
|
--color-red-70: #8a1831;
|
|
--color-red-80: #690f22;
|
|
--color-white: #ffffff;
|
|
--color-yellow-05: #ffebcd;
|
|
--color-yellow-30: #e49c49;
|
|
--color-yellow-50: #cd411e;
|
|
--color-yellow-80: #5a3100;
|
|
|
|
/** 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;
|
|
|
|
/** Icon **/
|
|
--icon-color: light-dark(var(--color-gray-70), var(--color-gray-05));
|
|
--icon-color-critical: light-dark(var(--color-red-50), var(--color-red-30));
|
|
--icon-color-information: light-dark(var(--color-blue-50), var(--color-blue-30));
|
|
--icon-color-success: light-dark(var(--color-green-50), var(--color-green-30));
|
|
--icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-30));
|
|
--icon-size-default: var(--size-item-small);
|
|
|
|
/** 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-50), var(--color-red-20));
|
|
|
|
/** Size **/
|
|
--size-item-small: 16px;
|
|
--size-item-medium: 28px;
|
|
--size-item-large: 32px;
|
|
|
|
/** Space **/
|
|
--space-xxsmall: calc(0.5 * var(--space-xsmall));
|
|
--space-xsmall: 0.267rem;
|
|
--space-small: calc(2 * var(--space-xsmall));
|
|
--space-medium: calc(3 * var(--space-xsmall));
|
|
--space-large: calc(4 * var(--space-xsmall));
|
|
--space-xlarge: calc(6 * var(--space-xsmall));
|
|
--space-xxlarge: calc(8 * var(--space-xsmall));
|
|
|
|
/** Text **/
|
|
--text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
|
|
--text-color-error: light-dark(var(--color-red-50), 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: var(--text-color);
|
|
--border-color-interactive: var(--text-color);
|
|
|
|
/** Button **/
|
|
--button-background-color-ghost: var(--button-background-color);
|
|
--button-border-color: var(--button-text-color);
|
|
|
|
/** 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;
|
|
--link-color-visited: var(--link-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-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-ghost: var(--button-background-color);
|
|
--button-background-color-ghost-disabled: var(--button-background-color-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-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);
|
|
}
|
|
}
|
|
}
|