diff options
Diffstat (limited to 'toolkit/themes/shared')
| -rw-r--r-- | toolkit/themes/shared/design-system/README.design-tokens.stories.md | 44 | ||||
| -rw-r--r-- | toolkit/themes/shared/design-system/tokens-brand.css | 55 | ||||
| -rw-r--r-- | toolkit/themes/shared/design-system/tokens-platform.css | 13 | ||||
| -rw-r--r-- | toolkit/themes/shared/design-system/tokens-shared.css | 392 | ||||
| -rw-r--r-- | toolkit/themes/shared/desktop-jar.inc.mn | 1 | ||||
| -rw-r--r-- | toolkit/themes/shared/global-shared.css | 66 | ||||
| -rw-r--r-- | toolkit/themes/shared/icons/plus-20.svg | 4 | ||||
| -rw-r--r-- | toolkit/themes/shared/in-content/common-shared.css | 7 | ||||
| -rw-r--r-- | toolkit/themes/shared/media/pause-fill.svg | 5 | ||||
| -rw-r--r-- | toolkit/themes/shared/media/videocontrols.css | 2 | ||||
| -rw-r--r-- | toolkit/themes/shared/popup.css | 89 |
11 files changed, 459 insertions, 219 deletions
diff --git a/toolkit/themes/shared/design-system/README.design-tokens.stories.md b/toolkit/themes/shared/design-system/README.design-tokens.stories.md index 6afe185d87..156ab35e19 100644 --- a/toolkit/themes/shared/design-system/README.design-tokens.stories.md +++ b/toolkit/themes/shared/design-system/README.design-tokens.stories.md @@ -451,17 +451,6 @@ The `--font-size-root` token was created for specific use under the document's ` </div> </div> -Just like the specific HTML term 'root', we tend to include the term 'default' on scales in order to identify values that are used as a default, or at the global level (`:root` or `body` tag): - -<div class="box"> - <div class="post-it blue big"> - font-weight - </div> - <div class="post-it big"> - <strong>default</strong> - </div> -</div> - It's okay to include intentional terms within scales that better represent the meaning of a value and when to use it. For example, our border radius collection, which uses t-shirt sizing, also mixes the 'circle' option within its scale in order to describe a border radius that will create a circular effect: <div class="box"> @@ -589,28 +578,31 @@ Shared tokens ([tokens-shared.css](https://searchfox.org/mozilla-central/source/ </div> </div> -#### Brand -Tokens specific to the brand, such as colors, and typographical styles. Used within domains that rely on brand values. +#### `tokens-brand.css` +This file is for token values specific to the brand, such as colors and +typographical styles. This stylesheet should be loaded in domains that rely on +brand values. -For example, we use the brand's accent color under brand contexts (in-content/about: pages): +For example, we re-map the accent color token in `tokens-brand.css` to the +value we want to use in brand contexts (in-content/about: pages): ```css /* tokens-brand.css */ ---color-accent-primary: var(--brand-color-accent); ---brand-color-accent: light-dark(var(--color-blue-50), var(--color-cyan-50)); +--color-accent-primary: light-dark(var(--color-blue-50), var(--color-cyan-50)); ``` -#### Platform -Tokens used within the browser chrome that come from the user’s operating system, such as colors and fonts. +#### `tokens-platform.css` +This file is for token values used the browser chrome that come from the user’s +operating system, such as colors and fonts. -For example, we use the system's accent color under platform contexts (chrome): +For example, we re-map the accent color token in `tokens-platform.css` to the +value we want to use in platform contexts (chrome): ```css /* tokens-platform.css */ ---color-accent-primary: var(--platform-color-accent); ---platform-color-accent: AccentColor; +--color-accent-primary: var(--button-primary-bgcolor, AccentColor); ``` -#### Shared -Tokens used and shared between brand and platform contexts. +#### `tokens-shared.css` +This file is for tokens that are shared between brand and platform contexts. For example, both the chrome and in-content pages make use of the same border-radius patterns: ```css @@ -634,7 +626,7 @@ Application design tokens represent the collection of semantic design tokens tha ```css /* tokens-brand.css */ ---brand-color-accent: var(--color-blue-50); +--color-accent-primary: light-dark(var(--color-blue-50), var(--color-cyan-50)); ``` #### Component @@ -644,7 +636,7 @@ Component-level tokens should live at the component-level file (e.g. [moz-toggle ```css /* moz-toggle.css */ ---toggle-background-color-pressed: var(--brand-color-accent); +--toggle-background-color-pressed: var(--color-accent-primary); ``` ### File structure @@ -721,7 +713,7 @@ We rely on the [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/c ### High contrast mode We rely on two queries for assigning HCM counterpart variables, @media (prefers-contrast) and @media (forced-colors). They are found at the bottom of [tokens-shared.css](https://searchfox.org/mozilla-central/rev/6eb2ebcafb1b4a8576eb513e6cd2c61e3f3ae6dc/toolkit/themes/shared/design-system/tokens-shared.css#109). -<!-- This part of the documentation will link to Bug 1863436 once it lands --> +/* This part of the documentation will link to Bug 1863436 once it lands */ ## Help and support If you have any questions, concerns, or feedback, and if this document has not answered something specific, please reach out to Desktop Theme Reviewers or Reusable Components Reviewers. diff --git a/toolkit/themes/shared/design-system/tokens-brand.css b/toolkit/themes/shared/design-system/tokens-brand.css index ac105d9767..0ab73834d0 100644 --- a/toolkit/themes/shared/design-system/tokens-brand.css +++ b/toolkit/themes/shared/design-system/tokens-brand.css @@ -4,17 +4,7 @@ @import url("chrome://global/skin/design-system/tokens-shared.css"); -:root, -:host(.anonymous-content-host) { - /** Font size **/ - --font-size-root: 15px; /* Set at the `:root`. Do not use */ - --font-size-small: 0.867rem; /* 13px */ - --font-size-large: 1.133rem; /* 17px */ - --font-size-xlarge: 1.467rem; /* 22px */ - --font-size-xxlarge: 1.6rem; /* 24px */ -} - -@media not (prefers-contrast) { +@layer tokens-foundation { :root, :host(.anonymous-content-host) { /** Border **/ @@ -25,28 +15,43 @@ --button-background-color: color-mix(in srgb, currentColor 7%, transparent); --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent); --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent); + --button-border-color-primary: transparent; + --button-text-color: light-dark(var(--color-gray-100), var(--color-gray-05)); + --button-text-color-primary: light-dark(var(--color-gray-05), var(--color-gray-100)); /** Link **/ - --link-color: var(--brand-color-accent); - --link-color-hover: var(--brand-color-accent-hover); - --link-color-active: var(--brand-color-accent-active); + --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); /** Color **/ - --color-accent-primary: var(--brand-color-accent); - --color-accent-primary-hover: var(--brand-color-accent-hover); - --color-accent-primary-active: var(--brand-color-accent-active); - - --brand-color-accent: light-dark(var(--color-blue-50), var(--color-cyan-50)); - --brand-color-accent-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); - --brand-color-accent-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); + --color-accent-primary: light-dark(var(--color-blue-50), var(--color-cyan-50)); + --color-accent-primary-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); + --color-accent-primary-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); --color-canvas: light-dark(var(--color-white), var(--color-gray-90)); + /** Font size **/ + --font-size-root: 15px; /* Set at the `:root`. Do not use */ + --font-size-small: 0.867rem; /* 13px */ + --font-size-large: 1.133rem; /* 17px */ + --font-size-xlarge: 1.467rem; /* 22px */ + --font-size-xxlarge: 1.6rem; /* 24px */ + /** Text **/ --text-color: light-dark(var(--color-gray-100), var(--color-gray-05)); - --text-color-deemphasized: light-dark( - color-mix(in srgb, currentColor 69%, transparent), - color-mix(in srgb, currentColor 75%, transparent) - ); + } +} + +@layer tokens-prefers-contrast { + @media (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /* Border */ + --border-interactive-color: var(--text-color); + --border-interactive-color-hover: var(--border-interactive-color); + --border-interactive-color-active: var(--border-interactive-color); + --border-interactive-color-disabled: var(--border-interactive-color); + } } } diff --git a/toolkit/themes/shared/design-system/tokens-platform.css b/toolkit/themes/shared/design-system/tokens-platform.css index e7897d11b0..921f5fd860 100644 --- a/toolkit/themes/shared/design-system/tokens-platform.css +++ b/toolkit/themes/shared/design-system/tokens-platform.css @@ -4,7 +4,7 @@ @import url("chrome://global/skin/design-system/tokens-shared.css"); -@media not (prefers-contrast) { +@layer tokens-foundation { :root, :host(.anonymous-content-host) { /** Border **/ @@ -14,14 +14,13 @@ --button-background-color: var(--button-bgcolor); --button-background-color-hover: var(--button-hover-bgcolor); --button-background-color-active: var(--button-active-bgcolor); + --button-text-color: var(--button-color); + --button-text-color-primary: var(--button-primary-color); /** Color **/ - --color-accent-primary: var(--platform-color-accent); - --color-accent-primary-hover: var(--platform-color-accent-hover); - --color-accent-primary-active: var(--platform-color-accent-active); - --platform-color-accent: var(--button-primary-bgcolor, AccentColor); - --platform-color-accent-hover: var(--button-primary-hover-bgcolor); - --platform-color-accent-active: var(--button-primary-active-bgcolor); + --color-accent-primary: var(--button-primary-bgcolor, AccentColor); + --color-accent-primary-hover: var(--button-primary-hover-bgcolor); + --color-accent-primary-active: var(--button-primary-active-bgcolor); --color-canvas: Canvas; /** Font size **/ diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css index 5d62fb8bbe..0c074ca20e 100644 --- a/toolkit/themes/shared/design-system/tokens-shared.css +++ b/toolkit/themes/shared/design-system/tokens-shared.css @@ -2,105 +2,63 @@ * 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)); -} +@layer tokens-foundation, tokens-prefers-contrast, tokens-forced-colors; -@media not (prefers-contrast) { +@layer tokens-foundation { :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-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-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; + --border-interactive-color-hover: var(--border-interactive-color); + --border-interactive-color-active: var(--border-interactive-color); + --border-interactive-color-disabled: var(--border-interactive-color); + + /** Box **/ + --box-background-color: light-dark(var(--color-white), var(--color-gray-80)); + --box-shadow-10: 0 1px 4px var(--color-black-a10); + /** 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)); @@ -108,71 +66,176 @@ --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)); + /** Font weight **/ + --font-weight: 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; + /** 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)); + --icon-size-default: var(--size-item-small); + + /** Input **/ + /*** Button ***/ + --button-border: var(--border-width) solid var(--button-border-color); + --button-border-radius: var(--border-radius-small); + --button-font-weight: var(--font-weight-bold); + --button-font-size: var(--font-size-root); + --button-font-size-small: var(--font-size-small); + --button-min-height: var(--size-item-large); + --button-min-height-small: var(--size-item-medium); + --button-size-icon: var(--button-min-height); + --button-size-icon-small: var(--button-min-height-small); + --button-padding: var(--space-xsmall) var(--space-large); + --button-padding-icon: 0; + + --button-text-color: var(--text-color); + --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-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-background-color-disabled: var(--button-background-color); + --button-opacity-disabled: 0.5; + + --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-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); + --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-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-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-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-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-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-ghost-active); + --button-text-color-ghost-disabled: var(--button-text-color); + --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); + + /*** Checkbox ***/ + --checkbox-margin-inline: var(--space-small); + /* TODO Bug 1876537: Make this em-based, probably? */ + --checkbox-size: var(--size-item-small); + + /*** Text ***/ + --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 69%, transparent); --text-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)); } } -@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; +/* 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) { + /* 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); + /** 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; + /* Button */ + --button-border-color: var(--button-text-color); + --button-background-color-ghost: var(--button-background-color); - /** Link **/ - --link-color: LinkText; - --link-color-hover: LinkText; - --link-color-active: ActiveText; - --link-color-visited: var(--link-color); + /** 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); + /** 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-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); + /** 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; + /** Text **/ + --text-color: CanvasText; + --text-color-error: inherit; + --text-color-deemphasized: inherit; + } } +} +/* Bug 1879900: Can't nest media queries inside of :host, :root selector + until Bug 1879349 lands */ +/* NOTE: These do not apply in the browser chrome (bug 1878919). */ +@layer tokens-forced-colors { @media (forced-colors) { - /* Applies to Windows HCM only, by default. - TODO(emilio): These seem rather sketchy */ :root, :host(.anonymous-content-host) { /** Border **/ @@ -181,10 +244,57 @@ --border-interactive-color-active: ButtonText; --border-interactive-color-disabled: GrayText; + /** Button **/ + --button-border-color: var(--border-interactive-color); + --button-border-color-hover: var(--border-interactive-color-hover); + --button-border-color-active: var(--border-interactive-color-active); + --button-border-color-disabled: var(--border-interactive-color-disabled); + --button-background-color: ButtonFace; + --button-background-color-hover: SelectedItemText; + --button-background-color-active: SelectedItemText; + --button-background-color-disabled: ButtonFace; + --button-text-color: ButtonText; + --button-text-color-hover: SelectedItem; + --button-text-color-active: SelectedItem; + --button-text-color-disabled: GrayText; + --button-opacity-disabled: 1; + + --button-background-color-primary-disabled: var(--button-text-color-disabled); + --button-border-color-primary: ButtonFace; + --button-border-color-primary-hover: SelectedItemText; + --button-border-color-primary-active: ButtonText; + --button-text-color-primary: ButtonFace; + --button-text-color-primary-hover: SelectedItemText; + + --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-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-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-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-background-color-ghost: var(--button-background-color); + --button-background-color-ghost-disabled: var(--button-background-color-disabled); + --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); + /** Color **/ --color-accent-primary: ButtonText; --color-accent-primary-hover: SelectedItem; - --color-accent-primary-active: SelectedItem; + --color-accent-primary-active: var(--color-accent-primary-hover); + --color-error-outline: var(--border-color); } } } diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn index 6f504132c2..6afb075ea2 100644 --- a/toolkit/themes/shared/desktop-jar.inc.mn +++ b/toolkit/themes/shared/desktop-jar.inc.mn @@ -100,6 +100,7 @@ skin/classic/global/icons/performance.svg (../../shared/icons/performance.svg) skin/classic/global/icons/plugin.svg (../../shared/icons/plugin.svg) skin/classic/global/icons/plus.svg (../../shared/icons/plus.svg) + skin/classic/global/icons/plus-20.svg (../../shared/icons/plus-20.svg) skin/classic/global/icons/pocket.svg (../../shared/icons/pocket.svg) skin/classic/global/icons/pocket-outline.svg (../../shared/icons/pocket-outline.svg) skin/classic/global/icons/pocket-favicon.ico (../../shared/icons/pocket-favicon.ico) diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css index c478b2745e..320245afbe 100644 --- a/toolkit/themes/shared/global-shared.css +++ b/toolkit/themes/shared/global-shared.css @@ -129,12 +129,74 @@ html|input { min-width: 0; } +html|input { + margin: 2px 4px; +} + html|button, html|input, +html|select, html|textarea { font: inherit; } +html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])), +html|textarea { + appearance: none; + padding: var(--space-small); + border: 1px solid var(--input-border-color, ThreeDShadow); + border-radius: var(--border-radius-small); + margin: 0; + background-color: var(--input-bgcolor, Field); + color: var(--input-color, FieldText); + + &:where(:user-invalid) { + border-color: var(--color-error-outline); + } + + &:where(:focus-visible) { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + } +} + +/* adapted from toolkit/themes/shared/menulist-shared.css */ +html|select:where(:not([size], [multiple])) { + appearance: none; + padding: 6px 16px; + padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */ + margin: 5px 2px 3px; + border: none; + border-radius: var(--border-radius-small); + + font-weight: var(--font-weight-bold); + + color: var(--button-color, ButtonText); + background-color: var(--button-bgcolor, ButtonFace); + background-image: url(chrome://global/skin/icons/arrow-down-12.svg); + background-position: right 10px center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + + &:-moz-locale-dir(rtl) { + background-position-x: left 10px; + } + + &:hover { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)); + } + + &:hover:active { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)); + } + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } +} + .header { font-weight: var(--font-weight-bold); } @@ -227,7 +289,7 @@ button.text-link .button-text { .footer-button { appearance: none; border: 0; - border-radius: 4px; + border-radius: var(--border-radius-small); color: var(--button-color, inherit); background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent)); padding: .45em 1em; @@ -298,7 +360,7 @@ button.text-link .button-text { --panel-padding: 0; --panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image); --panel-shadow-margin: 4px; - /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.jsm. */ + /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.sys.mjs. */ pointer-events: none; } diff --git a/toolkit/themes/shared/icons/plus-20.svg b/toolkit/themes/shared/icons/plus-20.svg new file mode 100644 index 0000000000..2522d5d274 --- /dev/null +++ b/toolkit/themes/shared/icons/plus-20.svg @@ -0,0 +1,4 @@ +<!-- 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/. --> +<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M9.125 10.875V19h1.75v-8.125H19v-1.75h-8.125V1h-1.75v8.125H1v1.75h8.125z"/></svg> diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css index d123d3c3b0..c8f4f3efd2 100644 --- a/toolkit/themes/shared/in-content/common-shared.css +++ b/toolkit/themes/shared/in-content/common-shared.css @@ -323,7 +323,6 @@ xul|tab[selected]:hover:active { html|button { font: inherit; - line-height: var(--button-line-height); } /* xul buttons and menulists */ @@ -339,7 +338,6 @@ xul|menulist { border-radius: 4px; background-color: var(--in-content-button-background); font-weight: 400; - line-height: var(--button-line-height); padding: .45em 1em; text-decoration: none; margin: 4px 8px; @@ -614,12 +612,15 @@ html|textarea { box-sizing: border-box; font-family: inherit; font-size: inherit; - line-height: var(--input-text-line-height); padding: .45em; margin: 2px 4px; min-height: var(--input-text-min-height); } +html|textarea { + min-height: auto +} + html|input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, html|textarea:focus, xul|search-textbox[focused], diff --git a/toolkit/themes/shared/media/pause-fill.svg b/toolkit/themes/shared/media/pause-fill.svg index 8dc2dea140..b35793b5d5 100644 --- a/toolkit/themes/shared/media/pause-fill.svg +++ b/toolkit/themes/shared/media/pause-fill.svg @@ -1,7 +1,6 @@ <!-- 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/. --> -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> - <path d="m4.5 14-1 0A1.5 1.5 0 0 1 2 12.5l0-9A1.5 1.5 0 0 1 3.5 2l1 0A1.5 1.5 0 0 1 6 3.5l0 9A1.5 1.5 0 0 1 4.5 14z"/> - <path d="m11.5 14-1 0A1.5 1.5 0 0 1 9 12.5l0-9A1.5 1.5 0 0 1 10.5 2l1 0A1.5 1.5 0 0 1 13 3.5l0 9a1.5 1.5 0 0 1-1.5 1.5z"/> +<svg width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"> + <path d="M4.5 14h1A1.5 1.5 0 0 0 7 12.5v-9A1.5 1.5 0 0 0 5.5 2h-1A1.5 1.5 0 0 0 3 3.5v9A1.5 1.5 0 0 0 4.5 14zM10.5 14h1a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 11.5 2h-1A1.5 1.5 0 0 0 9 3.5v9a1.5 1.5 0 0 0 1.5 1.5z" /> </svg> diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css index c50ccda9a3..b1ae620fa0 100644 --- a/toolkit/themes/shared/media/videocontrols.css +++ b/toolkit/themes/shared/media/videocontrols.css @@ -24,7 +24,7 @@ white-space: normal !important; } -.videocontrols[flipped="true"] { +.videocontrols[flipped] { transform: scaleX(-1); } diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css index ddc41a66ed..1426f9c4f6 100644 --- a/toolkit/themes/shared/popup.css +++ b/toolkit/themes/shared/popup.css @@ -83,17 +83,6 @@ panel { &[orient=vertical]::part(content) { flex-direction: column; } - - /* ::::: arrow panel ::::: */ - - &:where([type="arrow"]) { - appearance: none; - background-color: transparent; - - &.panel-no-padding::part(content) { - padding: 0; - } - } } menupopup { @@ -129,3 +118,81 @@ menulist > menupopup { } } } + +/* ::::: arrow panel ::::: */ + +panel:where([type="arrow"]) { + appearance: none; + background-color: transparent; + + &.panel-no-padding::part(content) { + padding: 0; + } +} + +/* ::::: panel animations ::::: */ + +.animatable-menupopup, +panel[type="arrow"] { + transition-timing-function: var(--animation-easing-function), ease-out; + + @media (-moz-panel-animations) and (prefers-reduced-motion: no-preference) { + &:not([animate="false"]) { + transition-duration: 0.18s; + } + } + + @media not (-moz-platform: macos) { + transition-property: transform, opacity; + will-change: transform, opacity; + opacity: 0; + transform: translateY(-70px); + + &[side="bottom"] { + transform: translateY(70px); + } + } + + /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity" + * instead of "transform" and "opacity" for these animations. + * The -moz-window* properties apply to the whole window including the + * window's shadow, and they don't affect the window's "shape", so the + * system doesn't have to recompute the shadow shape during the animation. + * This makes them a lot faster. These properties are not implemented on + * other platforms. + */ + @media (-moz-platform: macos) { + transition-property: -moz-window-transform, -moz-window-opacity; + /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on + * Big Sur, see bug 1672091. */ + @media not (-moz-mac-big-sur-theme) { + -moz-window-opacity: 0; + -moz-window-transform: translateY(-70px); + + &[side="bottom"] { + -moz-window-transform: translateY(70px); + } + } + /* If the @media rule above is removed, then we can also remove this */ + &[animate="cancel"] { + -moz-window-opacity: 0; + } + } + + &[animate="cancel"] { + -moz-window-transform: none; + transform: none; + } + + &:is([animate="false"], [animate="open"]) { + opacity: 1; + transform: none; + -moz-window-opacity: 1; + -moz-window-transform: none; + transition-timing-function: var(--animation-easing-function), ease-in-out; + } + + &[animating] { + pointer-events: none; + } +} |
