459 lines
18 KiB
CSS
459 lines
18 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. */
|
|
|
|
@import "../colors.css";
|
|
|
|
@layer tokens-foundation, tokens-prefers-contrast, tokens-forced-colors;
|
|
|
|
@layer tokens-foundation {
|
|
:root,
|
|
:host(.anonymous-content-host) {
|
|
/** Background Color **/
|
|
--background-color-box: var(--base) !important;
|
|
--background-color-critical: var(--maroon) !important;
|
|
--background-color-information: var(--sapphire) !important;
|
|
--background-color-success: var(--teal) !important;
|
|
--background-color-warning: var(--peach) !important;
|
|
--promo-background-color: var(--background-color-information) !important;
|
|
--table-row-background-color: var(--mantle) !important;
|
|
|
|
/** Border **/
|
|
--border-color-card: color-mix(
|
|
in srgb,
|
|
currentColor 10%,
|
|
transparent
|
|
) !important;
|
|
--border-color-interactive-hover: var(
|
|
--border-color-interactive
|
|
) !important;
|
|
--border-color-interactive-active: var(
|
|
--border-color-interactive
|
|
) !important;
|
|
--border-color-interactive-disabled: var(
|
|
--border-color-interactive
|
|
) !important;
|
|
--border-color-selected: var(--accent) !important;
|
|
--border-color-transparent: transparent !important;
|
|
--border-radius-circle: 9999px !important;
|
|
--border-radius-xsmall: 2px !important;
|
|
--border-radius-small: 4px !important;
|
|
--border-radius-medium: 8px !important;
|
|
--border-radius-large: 16px !important;
|
|
--border-width: 0px !important;
|
|
|
|
/** Box Shadow **/
|
|
--box-shadow-card: var(--box-shadow-level-2) !important;
|
|
--box-shadow-card-hover: var(--box-shadow-level-4) !important;
|
|
--box-shadow-color-darker-layer-1: rgba(0, 0, 0, 0.15) !important;
|
|
--box-shadow-color-darker-layer-2: rgba(0, 0, 0, 0.2) !important;
|
|
--box-shadow-color-lighter-layer-1: rgba(0, 0, 0, 0.05) !important;
|
|
--box-shadow-color-lighter-layer-2: rgba(0, 0, 0, 0.1) !important;
|
|
--box-shadow-level-1:
|
|
0 0 1px var(--box-shadow-color-darker-layer-1),
|
|
0 1px 2px var(--box-shadow-color-darker-layer-2) !important;
|
|
--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) !important;
|
|
--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) !important;
|
|
--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) !important;
|
|
--box-shadow-popup: var(--box-shadow-level-3) !important;
|
|
--box-shadow-tab: var(--box-shadow-level-1) !important;
|
|
|
|
/** Button **/
|
|
--button-background-color-disabled: var(
|
|
--button-background-color
|
|
) !important;
|
|
--button-background-color-destructive: var(--red) !important;
|
|
--button-background-color-destructive-hover: color-mix(
|
|
in srgb,
|
|
var(--red),
|
|
var(--text) 10%
|
|
) !important;
|
|
--button-background-color-destructive-active: color-mix(
|
|
in srgb,
|
|
var(--red),
|
|
var(--text) 20%
|
|
) !important;
|
|
--button-background-color-destructive-disabled: var(
|
|
--button-background-color-destructive
|
|
) !important;
|
|
--button-background-color-destructive-selected: var(
|
|
--button-background-color-destructive-active
|
|
) !important;
|
|
--button-background-color-ghost: transparent !important;
|
|
--button-background-color-ghost-hover: var(
|
|
--button-background-color-hover
|
|
) !important;
|
|
--button-background-color-ghost-active: var(
|
|
--button-background-color-active
|
|
) !important;
|
|
--button-background-color-ghost-disabled: var(
|
|
--button-background-color-ghost
|
|
) !important;
|
|
--button-background-color-ghost-selected: var(
|
|
--button-background-color-ghost-active
|
|
) !important;
|
|
--button-background-color-primary: var(--accent) !important;
|
|
--button-background-color-primary-hover: color-mix(
|
|
in srgb,
|
|
var(--accent),
|
|
var(--text) 10%
|
|
) !important;
|
|
--button-background-color-primary-active: color-mix(
|
|
in srgb,
|
|
var(--accent),
|
|
var(--text) 20%
|
|
) !important;
|
|
--button-background-color-primary-disabled: var(
|
|
--button-background-color-primary
|
|
) !important;
|
|
--button-background-color-primary-selected: var(
|
|
--button-background-color-primary-active
|
|
) !important;
|
|
--button-background-color-selected: var(
|
|
--button-background-color-active
|
|
) !important;
|
|
--button-border: var(--border-width) solid var(--button-border-color) !important;
|
|
--button-border-color: transparent !important;
|
|
--button-border-color-hover: var(--button-border-color) !important;
|
|
--button-border-color-active: var(--button-border-color) !important;
|
|
--button-border-color-disabled: var(--button-border-color) !important;
|
|
--button-border-color-destructive: transparent !important;
|
|
--button-border-color-destructive-hover: var(
|
|
--button-border-color-destructive
|
|
) !important;
|
|
--button-border-color-destructive-active: var(
|
|
--button-border-color-destructive
|
|
) !important;
|
|
--button-border-color-destructive-disabled: var(
|
|
--button-border-color-destructive
|
|
) !important;
|
|
--button-border-color-destructive-selected: var(
|
|
--button-border-color-destructive-active
|
|
) !important;
|
|
--button-border-color-ghost: var(--button-border-color) !important;
|
|
--button-border-color-ghost-hover: var(
|
|
--button-border-color-hover
|
|
) !important;
|
|
--button-border-color-ghost-active: var(
|
|
--button-border-color-active
|
|
) !important;
|
|
--button-border-color-ghost-disabled: var(
|
|
--button-border-color-disabled
|
|
) !important;
|
|
--button-border-color-ghost-selected: var(
|
|
--button-border-color-ghost-active
|
|
) !important;
|
|
--button-border-color-primary: transparent !important;
|
|
--button-border-color-primary-hover: var(
|
|
--button-border-color-primary
|
|
) !important;
|
|
--button-border-color-primary-active: var(
|
|
--button-border-color-primary
|
|
) !important;
|
|
--button-border-color-primary-disabled: var(
|
|
--button-border-color-primary
|
|
) !important;
|
|
--button-border-color-primary-selected: var(
|
|
--button-border-color-primary-active
|
|
) !important;
|
|
--button-border-color-selected: var(
|
|
--button-border-color-active
|
|
) !important;
|
|
--button-border-radius: var(--border-radius-medium) !important;
|
|
--button-font-size: var(--font-size-root) !important;
|
|
--button-font-size-small: var(--font-size-small) !important;
|
|
--button-font-weight: var(--font-weight-semibold) !important;
|
|
--button-icon-fill: currentColor !important;
|
|
--button-icon-stroke: var(--button-icon-fill) !important;
|
|
--button-min-height: var(--size-item-large) !important;
|
|
--button-min-height-small: var(--size-item-medium) !important;
|
|
--button-opacity-disabled: 0.5 !important;
|
|
--button-padding: var(--space-xsmall) var(--space-large) !important;
|
|
--button-padding-icon: 0 !important;
|
|
--button-size-icon: var(--button-min-height) !important;
|
|
--button-size-icon-small: var(--button-min-height-small) !important;
|
|
--button-text-color-hover: var(--button-text-color) !important;
|
|
--button-text-color-active: var(--button-text-color) !important;
|
|
--button-text-color-disabled: var(--button-text-color) !important;
|
|
--button-text-color-destructive: var(--crust) !important;
|
|
--button-text-color-destructive-hover: var(
|
|
--button-text-color-destructive
|
|
) !important;
|
|
--button-text-color-destructive-active: var(
|
|
--button-text-color-destructive
|
|
) !important;
|
|
--button-text-color-destructive-disabled: var(
|
|
--button-text-color-destructive
|
|
) !important;
|
|
--button-text-color-destructive-selected: var(
|
|
--button-text-color-destructive-active
|
|
) !important;
|
|
--button-text-color-ghost: inherit !important;
|
|
--button-text-color-ghost-hover: inherit !important;
|
|
--button-text-color-ghost-active: inherit !important;
|
|
--button-text-color-ghost-disabled: inherit !important;
|
|
--button-text-color-ghost-selected: var(
|
|
--button-text-color-ghost-active
|
|
) !important;
|
|
--button-text-color-primary-hover: var(
|
|
--button-text-color-primary
|
|
) !important;
|
|
--button-text-color-primary-active: var(
|
|
--button-text-color-primary-hover
|
|
) !important;
|
|
--button-text-color-primary-disabled: var(
|
|
--button-text-color-primary
|
|
) !important;
|
|
--button-text-color-primary-selected: var(
|
|
--button-text-color-primary-active
|
|
) !important;
|
|
--button-text-color-selected: var(--button-text-color-active) !important;
|
|
|
|
/** Checkbox **/
|
|
--checkbox-margin-inline: var(--space-small) !important;
|
|
--checkbox-size: var(--size-item-small) !important;
|
|
|
|
/** Focus Outline **/
|
|
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color) !important;
|
|
--focus-outline-color: var(--accent) !important;
|
|
--focus-outline-inset: calc(-1 * var(--focus-outline-width)) !important;
|
|
--focus-outline-offset: 2px !important;
|
|
--focus-outline-width: 2px !important;
|
|
|
|
/** Font Weight **/
|
|
--font-weight: normal !important;
|
|
--font-weight-bold: 700 !important;
|
|
--font-weight-semibold: 600 !important;
|
|
|
|
/** Heading **/
|
|
--heading-font-size-medium: var(--font-size-large) !important;
|
|
--heading-font-size-large: var(--font-size-xlarge) !important;
|
|
--heading-font-size-xlarge: var(--font-size-xxlarge) !important;
|
|
--heading-font-weight: var(--font-weight-semibold) !important;
|
|
|
|
/** Icon **/
|
|
--icon-color: var(--subtext1) !important;
|
|
--icon-color-critical: var(--red) !important;
|
|
--icon-color-information: var(--sky) !important;
|
|
--icon-color-success: var(--green) !important;
|
|
--icon-color-warning: var(--yellow) !important;
|
|
--icon-size: var(--icon-size-small) !important;
|
|
--icon-size-xsmall: var(--size-item-xsmall) !important;
|
|
--icon-size-small: var(--size-item-small) !important;
|
|
--icon-size-medium: 20px !important;
|
|
--icon-size-large: var(--size-item-medium) !important;
|
|
--icon-size-xlarge: var(--size-item-large) !important;
|
|
|
|
/** Input - Text **/
|
|
--input-text-min-height: var(--button-min-height) !important;
|
|
|
|
/** Link **/
|
|
--link-focus-outline-offset: 1px !important;
|
|
|
|
/** Outline Color **/
|
|
--outline-color-error: var(--red) !important;
|
|
|
|
/** Size **/
|
|
--size-item-xsmall: 12px !important;
|
|
--size-item-small: 16px !important;
|
|
--size-item-medium: 24px !important;
|
|
--size-item-large: 32px !important;
|
|
--size-item-xlarge: 48px !important;
|
|
|
|
/** Space **/
|
|
--space-xxsmall: calc(0.5 * var(--space-xsmall)) !important;
|
|
--space-xsmall: 0.267rem !important;
|
|
--space-small: calc(2 * var(--space-xsmall)) !important;
|
|
--space-medium: calc(3 * var(--space-xsmall)) !important;
|
|
--space-large: calc(4 * var(--space-xsmall)) !important;
|
|
--space-xlarge: calc(6 * var(--space-xsmall)) !important;
|
|
--space-xxlarge: calc(8 * var(--space-xsmall)) !important;
|
|
|
|
/** Text **/
|
|
--text-color-disabled: color-mix(
|
|
in srgb,
|
|
currentColor 40%,
|
|
transparent
|
|
) !important;
|
|
--text-color-deemphasized: color-mix(
|
|
in srgb,
|
|
currentColor 69%,
|
|
transparent
|
|
) !important;
|
|
--text-color-error: var(--red) !important;
|
|
}
|
|
}
|
|
|
|
@layer tokens-prefers-contrast {
|
|
@media (prefers-contrast) {
|
|
:root,
|
|
:host(.anonymous-content-host) {
|
|
/** Attention Dot **/
|
|
--attention-dot-color: var(--accent) !important;
|
|
|
|
/** Background Color **/
|
|
--background-color-box: var(--base) !important;
|
|
--background-color-box-info: var(--base) !important;
|
|
--background-color-canvas: var(--base) !important;
|
|
--background-color-critical: var(--base) !important;
|
|
--background-color-information: var(--base) !important;
|
|
--background-color-success: var(--base) !important;
|
|
--background-color-warning: var(--base) !important;
|
|
|
|
/** Border **/
|
|
--border-color: var(--text) !important;
|
|
--border-color-card: color-mix(
|
|
in srgb,
|
|
currentColor 41%,
|
|
transparent
|
|
) !important;
|
|
--border-color-deemphasized: currentColor !important;
|
|
--border-color-interactive: var(--text) !important;
|
|
--border-color-transparent: var(--text) !important;
|
|
|
|
/** Button **/
|
|
--button-border-color: var(--button-text-color) !important;
|
|
--button-text-color-ghost-hover: var(
|
|
--button-text-color-hover
|
|
) !important;
|
|
--button-text-color-ghost-active: var(
|
|
--button-text-color-active
|
|
) !important;
|
|
|
|
/** Icon **/
|
|
--icon-color: var(--text) !important;
|
|
--icon-color-critical: var(--icon-color) !important;
|
|
--icon-color-information: var(--icon-color) !important;
|
|
--icon-color-success: var(--icon-color) !important;
|
|
--icon-color-warning: var(--icon-color) !important;
|
|
|
|
/** Outline Color **/
|
|
--outline-color-error: var(--border-color) !important;
|
|
|
|
/** Text **/
|
|
--text-color: var(--text) !important;
|
|
--text-color-deemphasized: inherit !important;
|
|
--text-color-error: inherit !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer tokens-forced-colors {
|
|
@media (forced-colors) {
|
|
:root,
|
|
:host(.anonymous-content-host) {
|
|
/** Background Color **/
|
|
--table-row-background-color-alternate: var(--base) !important;
|
|
|
|
/** Border **/
|
|
--border-color-card: var(--text) !important;
|
|
--border-color-deemphasized: var(--text) !important;
|
|
--border-color-interactive: var(--text) !important;
|
|
--border-color-interactive-hover: var(--accent) !important;
|
|
--border-color-interactive-active: var(--text) !important;
|
|
--border-color-interactive-disabled: var(--subtext0) !important;
|
|
--border-color-selected: var(--accent) !important;
|
|
|
|
/** Button **/
|
|
--button-background-color: var(--surface0) !important;
|
|
--button-background-color-hover: var(--crust) !important;
|
|
--button-background-color-active: var(--crust) !important;
|
|
--button-background-color-disabled: var(--surface0) !important;
|
|
--button-background-color-destructive: var(
|
|
--button-background-color-primary
|
|
) !important;
|
|
--button-background-color-destructive-hover: var(
|
|
--button-background-color-primary-hover
|
|
) !important;
|
|
--button-background-color-destructive-active: var(
|
|
--button-background-color-primary-active
|
|
) !important;
|
|
--button-background-color-destructive-disabled: var(
|
|
--button-background-color-primary-disabled
|
|
) !important;
|
|
--button-background-color-primary-disabled: var(
|
|
--button-text-color-disabled
|
|
) !important;
|
|
--button-border-color: var(--border-color-interactive) !important;
|
|
--button-border-color-hover: var(
|
|
--border-color-interactive-hover
|
|
) !important;
|
|
--button-border-color-active: var(
|
|
--border-color-interactive-active
|
|
) !important;
|
|
--button-border-color-disabled: var(
|
|
--border-color-interactive-disabled
|
|
) !important;
|
|
--button-border-color-destructive: var(
|
|
--button-border-color-primary
|
|
) !important;
|
|
--button-border-color-destructive-hover: var(
|
|
--button-border-color-primary-hover
|
|
) !important;
|
|
--button-border-color-destructive-active: var(
|
|
--button-border-color-primary-active
|
|
) !important;
|
|
--button-border-color-destructive-disabled: var(
|
|
--button-border-color-primary-disabled
|
|
) !important;
|
|
--button-border-color-primary: var(--surface0) !important;
|
|
--button-border-color-primary-hover: var(--crust) !important;
|
|
--button-border-color-primary-active: var(--text) !important;
|
|
--button-opacity-disabled: 1 !important;
|
|
--button-text-color: var(--text) !important;
|
|
--button-text-color-hover: var(--accent) !important;
|
|
--button-text-color-active: var(--accent) !important;
|
|
--button-text-color-disabled: var(--subtext0) !important;
|
|
--button-text-color-destructive: var(
|
|
--button-text-color-primary
|
|
) !important;
|
|
--button-text-color-destructive-hover: var(
|
|
--button-text-color-primary-hover
|
|
) !important;
|
|
--button-text-color-destructive-active: var(
|
|
--button-text-color-primary-active
|
|
) !important;
|
|
--button-text-color-destructive-disabled: var(
|
|
--button-text-color-primary-disabled
|
|
) !important;
|
|
--button-text-color-ghost-hover: var(
|
|
--button-text-color-hover
|
|
) !important;
|
|
--button-text-color-ghost-active: var(
|
|
--button-text-color-active
|
|
) !important;
|
|
--button-text-color-primary: var(--surface0) !important;
|
|
--button-text-color-primary-hover: var(--crust) !important;
|
|
|
|
/** Color **/
|
|
--color-accent-primary: var(--text) !important;
|
|
--color-accent-primary-hover: var(--accent) !important;
|
|
--color-accent-primary-active: var(
|
|
--color-accent-primary-hover
|
|
) !important;
|
|
--color-accent-primary-selected: var(--accent) !important;
|
|
|
|
/** Focus Outline **/
|
|
--focus-outline-color: var(--text) !important;
|
|
|
|
/** Link **/
|
|
--link-color: var(--blue) !important;
|
|
--link-color-hover: var(--blue) !important;
|
|
--link-color-active: var(--red) !important;
|
|
--link-color-visited: var(--link-color) !important;
|
|
|
|
/** Text **/
|
|
--text-color-disabled: var(--subtext0) !important;
|
|
--text-color-accent-primary-selected: var(--crust) !important;
|
|
}
|
|
}
|
|
}
|