From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- .../themes/shared/design-system/tokens-shared.css | 190 +++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 toolkit/themes/shared/design-system/tokens-shared.css (limited to 'toolkit/themes/shared/design-system/tokens-shared.css') diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css new file mode 100644 index 0000000000..5d62fb8bbe --- /dev/null +++ b/toolkit/themes/shared/design-system/tokens-shared.css @@ -0,0 +1,190 @@ +/* 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/. */ + +:root, +:host(.anonymous-content-host) { + /* Base tokens */ + /* Do not use base tokens directly as they don't carry any meaning and are used to set our base. Refer to Application tokens below. */ + /** Color **/ + --color-white: #ffffff; + --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-20: #ff9aa2; + --color-red-30: #f37f98; + --color-red-50: #d7264c; + --color-red-80: #690f22; + --color-yellow-05: #ffebcd; + --color-yellow-30: #e49c49; + --color-yellow-50: #cd411e; + --color-yellow-80: #5a3100; + + /* Application tokens */ + /** Border **/ + --border-radius-circle: 9999px; + --border-radius-small: 4px; + --border-radius-medium: 8px; + --border-width: 1px; + + /** Box **/ + --box-background-color: light-dark(var(--color-white), var(--color-gray-80)); + --box-shadow-10: 0 1px 4px var(--color-black-a10); + + /** Font weight **/ + --font-weight-default: normal; + --font-weight-bold: 600; + + /** 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; + + /** Input **/ + /*** Button ***/ + --button-border-radius: var(--border-radius-small); + --button-font-weight: var(--font-weight-bold); + --button-line-height: var(--line-height-small); + --button-min-height: var(--size-item-large); + + /*** Checkbox ***/ + --checkbox-margin-inline: var(--space-small); + /* TODO Bug 1876537: Make this em-based, probably? */ + --checkbox-size: var(--size-item-small); + + /*** Text ***/ + --input-text-line-height: var(--button-line-height); + --input-text-min-height: var(--button-min-height); + + /** Link **/ + /* Not using --focus-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; + + /** Text **/ + --text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent); + + /** 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-xlarge: calc(8 * var(--space-xsmall)); +} + +@media not (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /** Color **/ + --color-background-information: light-dark(var(--color-blue-05), var(--color-blue-80)); + --color-background-success: light-dark(var(--color-green-05), var(--color-green-80)); + --color-background-warning: light-dark(var(--color-yellow-05), var(--color-yellow-80)); + --color-background-critical: light-dark(var(--color-red-05), var(--color-red-80)); + --color-error-outline: light-dark(var(--color-red-50), var(--color-red-20)); + + /** Icon **/ + --icon-color: light-dark(var(--color-gray-70), var(--color-gray-05)); + --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-color-critical: light-dark(var(--color-red-50), var(--color-red-30)); + + /** Text **/ + --text-color-error: light-dark(var(--color-red-50), var(--color-red-20)); + } +} + +@media (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /* Border */ + --border-color: var(--text-color); + --border-interactive-color: AccentColor; + --border-interactive-color-hover: ButtonText; + --border-interactive-color-active: AccentColor; + --border-interactive-color-disabled: GrayText; + + /** Box **/ + --box-background-color: var(--color-canvas); + + /* Button */ + --button-background-color: ButtonFace; + --button-background-color-hover: ButtonFace; + --button-background-color-active: ButtonFace; + --button-background-color-disabled: GrayText; + + /** Link **/ + --link-color: LinkText; + --link-color-hover: LinkText; + --link-color-active: ActiveText; + --link-color-visited: var(--link-color); + + /** Color **/ + --color-canvas: Canvas; + --color-background-information: var(--color-canvas); + --color-background-success: var(--color-canvas); + --color-background-warning: var(--color-canvas); + --color-background-critical: var(--color-canvas); + --color-accent-primary: AccentColor; + /* FIXME(emilio): These seem rather sketchy */ + --color-accent-primary-hover: ButtonText; + --color-accent-primary-active: ButtonText; + --color-error-outline: var(--border-color); + + /** Icon **/ + --icon-color: var(--text-color); + --icon-color-information: var(--icon-color); + --icon-color-success: var(--icon-color); + --icon-color-warning: var(--icon-color); + --icon-color-critical: var(--icon-color); + + /** Text **/ + --text-color: CanvasText; + --text-color-error: inherit; + --text-color-deemphasized: inherit; + } + + @media (forced-colors) { + /* Applies to Windows HCM only, by default. + TODO(emilio): These seem rather sketchy */ + :root, + :host(.anonymous-content-host) { + /** Border **/ + --border-interactive-color: ButtonText; + --border-interactive-color-hover: SelectedItem; + --border-interactive-color-active: ButtonText; + --border-interactive-color-disabled: GrayText; + + /** Color **/ + --color-accent-primary: ButtonText; + --color-accent-primary-hover: SelectedItem; + --color-accent-primary-active: SelectedItem; + } + } +} -- cgit v1.2.3