commit 4ba5b519e2af76a35b4f0520461a845a7e62feba parent b4ea0b2fa681c38c103d2c3423c6c79d8e7cf0e9 Author: dwhisman <dwhisman@mozilla.com> Date: Mon, 5 Jan 2026 18:37:12 +0000 Bug 1993105 - Add black/white alpha color tokens r=mtigley,desktop-theme-reviewers,credential-management-reviewers,ai-frontend-reviewers,jules,dimi,tabbrowser-reviewers,nsharpley Differential Revision: https://phabricator.services.mozilla.com/D275100 Diffstat:
18 files changed, 194 insertions(+), 36 deletions(-)
diff --git a/browser/base/content/test/static/browser_parsable_css.js b/browser/base/content/test/static/browser_parsable_css.js @@ -196,9 +196,9 @@ let propNameAllowlist = [ /* Allow design tokens in devtools without all variables being used there */ { sourceName: /\/design-system\/tokens-.*\.css$/, isFromDevTools: true }, - // Ignore token properties that follow the pattern --color-[name]-[number] + // Ignore token properties that follow the pattern --color-[name]-[number] or --color-[name]-alpha-[number] // This enables us to provide our full color palette for developers. - { propName: /--color-[a-z]+-\d+/, isFromDevTools: false }, + { propName: /--color-[a-z]+(-alpha)?-\d+/, isFromDevTools: false }, ]; // Add suffix to stylesheets' URI so that we always load them here and diff --git a/browser/components/aboutlogins/content/aboutLogins.css b/browser/components/aboutlogins/content/aboutLogins.css @@ -90,7 +90,7 @@ login-item[data-editing="true"] + login-intro, position: fixed; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.2); + background-color: var(--background-color-overlay); } body > section { diff --git a/browser/components/aboutlogins/content/components/confirmation-dialog.css b/browser/components/aboutlogins/content/components/confirmation-dialog.css @@ -6,9 +6,7 @@ position: fixed; z-index: 1; inset: 0; - /* TODO: this color is used in the about:preferences overlay, but - why isn't it declared as a variable? */ - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--background-color-overlay); display: flex; } diff --git a/browser/components/aboutlogins/content/components/generic-dialog.css b/browser/components/aboutlogins/content/components/generic-dialog.css @@ -6,9 +6,7 @@ position: fixed; z-index: 1; inset: 0; - /* TODO: this color is used in the about:preferences overlay, but - why isn't it declared as a variable? */ - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--background-color-overlay); display: flex; } diff --git a/browser/components/aboutlogins/content/components/remove-logins-dialog.css b/browser/components/aboutlogins/content/components/remove-logins-dialog.css @@ -6,9 +6,7 @@ position: fixed; z-index: 1; inset: 0; - /* TODO: this color is used in the about:preferences overlay, but - why isn't it declared as a variable? */ - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--background-color-overlay); display: flex; } diff --git a/browser/components/genai/chat.css b/browser/components/genai/chat.css @@ -23,6 +23,7 @@ browser { #header { align-items: center; + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ background-color: var(--sidebar-background-color); border-bottom: 1px solid var(--border-color); display: flex; @@ -88,7 +89,7 @@ browser { } #multi-stage-message-root { - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--background-color-overlay); display: flex; flex-direction: column; inset: 0; @@ -241,6 +242,7 @@ browser { .badge { --badge-background-color-new: var(--color-green-40); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ background: var(--badge-background-color-new); border-radius: var(--border-radius-small); color: var(--button-text-color-primary-hover); diff --git a/browser/components/protections/content/protections.css b/browser/components/protections/content/protections.css @@ -33,7 +33,7 @@ --block-background-color: var(--color-gray-70); --breaches-background-color: var(--color-orange-30); - --feature-banner-color: rgba(0, 0, 0, 0.05); + --feature-banner-color: var(--color-black-alpha-10); } body { @@ -208,7 +208,7 @@ a.hidden, --gear-icon-fill: oklch(from var(--color-gray-05) l c h / 60%); --hover-grey-link: var(--grey-30); - --feature-banner-color: rgba(255, 255, 255, 0.1); + --feature-banner-color: var(--color-white-alpha-10); } .etp-card .icon.dark, diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css @@ -7,6 +7,8 @@ :host { display: contents; + --hover-highlight-background-color: var(--color-white-alpha-20); + /* These z-indexes are used to correctly layer elements in the screenshots overlay */ --screenshots-lowest-layer: 1; --screenshots-low-layer: 2; @@ -56,7 +58,7 @@ inset-inline: 0; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.7); + background-color: var(--background-color-overlay); } #buttons-container { @@ -183,13 +185,15 @@ @media (forced-colors) { color: CanvasText; + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ background-color: Canvas; } } #hover-highlight { animation: fade-in 125ms forwards cubic-bezier(0.07, 0.95, 0, 1); - background: rgba(255, 255, 255, 0.2); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ + background: var(--hover-highlight-background-color); border: 2px dashed rgba(255, 255, 255, 0.4); border-radius: 1px; box-sizing: border-box; @@ -214,7 +218,7 @@ } .bghighlight { - background-color: rgba(0, 0, 0, 0.7); + background-color: var(--background-color-overlay); position: absolute; overflow: clip; pointer-events: none; @@ -325,6 +329,7 @@ pointer-events: none; @media (forced-colors) { + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ background-color: ButtonText; } } diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css @@ -581,7 +581,7 @@ html|dialog { html|dialog::backdrop, .dialogOverlay[topmost="true"] { - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--background-color-overlay); } html|dialog, diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css @@ -107,7 +107,8 @@ p { } .promo.top { - background: rgba(255, 255, 255, 0.2); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ + background: var(--color-white-alpha-20); position: absolute; top: 0; left: 0; @@ -356,7 +357,8 @@ p { .info { margin-top: 64px; - background-color: rgba(0, 0, 0, 0.2); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ + background-color: var(--color-black-alpha-20); background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); background-position: left 32px top 20px; background-repeat: no-repeat; @@ -455,7 +457,8 @@ p { display: flex; border: 1px solid transparent; border-radius: var(--border-radius-small); - background-color: rgba(0, 0, 0, 0.2); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ + background-color: var(--color-black-alpha-20); } .promo-dismiss { diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css @@ -23,7 +23,6 @@ --tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%) !important; } } - --dialog-backdrop-color: rgba(28, 27, 34, 0.45); } #navigator-toolbox { @@ -581,7 +580,7 @@ split-view-footer { .dialogOverlay[topmost="true"], #window-modal-dialog::backdrop { - background-color: var(--dialog-backdrop-color); + background-color: var(--background-color-overlay); } .dialogOverlay[hideContent="true"][topmost="true"] { diff --git a/browser/themes/shared/tabbrowser/ctrlTab.css b/browser/themes/shared/tabbrowser/ctrlTab.css @@ -87,13 +87,15 @@ } #ctrlTab-showAll { - background-color: rgba(255, 255, 255, 0.2); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ + background-color: var(--color-white-alpha-20); margin-top: 0.5em; } .ctrlTab-preview:focus > .ctrlTab-preview-inner, #ctrlTab-showAll:focus { - background-color: rgba(0, 0, 0, 0.75); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ + background-color: var(--color-black-alpha-70); text-shadow: none; border-color: #45a1ff; } diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css @@ -15,7 +15,8 @@ color: inherit; &[_moz-menuactive] { - background-color: light-dark(hsla(0, 0%, 0%, 0.12), hsla(0, 0%, 100%, 0.22)); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, stylelint-plugin-mozilla/no-base-design-tokens */ + background-color: light-dark(var(--color-black-alpha-10), var(--color-white-alpha-20)); color: inherit; @media (prefers-contrast) { @@ -39,7 +40,8 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("widget.windows.mica.toplevel-backdrop", 2) { /* For acrylic, do the same we do for popups to guarantee some contrast */ - background-color: light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6)); + /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, stylelint-plugin-mozilla/no-base-design-tokens */ + background-color: light-dark(var(--color-white-alpha-60), var(--color-black-alpha-60)); } /* Using a semitransparent background preserves the tinting from the backdrop. @@ -47,7 +49,7 @@ * as the backdrop matches our color scheme. The .6 matches what we do for * acrylic, and the .15 matches the 85% we do for the default toolbar * background on the native theme. */ - --toolbar-bgcolor: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15)); + --toolbar-bgcolor: light-dark(var(--color-white-alpha-60), var(--color-white-alpha-20)); } /* stylelint-disable-next-line media-query-no-invalid */ diff --git a/toolkit/themes/shared/design-system/dist/tokens-figma-colors.json b/toolkit/themes/shared/design-system/dist/tokens-figma-colors.json @@ -116,5 +116,24 @@ "color/pink/90": "oklch(34% 0.14 360)", "color/pink/100": "oklch(27% 0.1 360)", "color/pink/110": "oklch(20% 0.05 360)", - "color/white": "#ffffff" + "color/white": "#ffffff", + "color/white/alpha/10": "oklch(1 0 0 / 10%)", + "color/white/alpha/20": "oklch(1 0 0 / 20%)", + "color/white/alpha/30": "oklch(1 0 0 / 30%)", + "color/white/alpha/40": "oklch(1 0 0 / 40%)", + "color/white/alpha/50": "oklch(1 0 0 / 50%)", + "color/white/alpha/60": "oklch(1 0 0 / 60%)", + "color/white/alpha/70": "oklch(1 0 0 / 70%)", + "color/white/alpha/80": "oklch(1 0 0 / 80%)", + "color/white/alpha/90": "oklch(1 0 0 / 90%)", + "color/black": "#000000", + "color/black/alpha/10": "oklch(0 0 0 / 10%)", + "color/black/alpha/20": "oklch(0 0 0 / 20%)", + "color/black/alpha/30": "oklch(0 0 0 / 30%)", + "color/black/alpha/40": "oklch(0 0 0 / 40%)", + "color/black/alpha/50": "oklch(0 0 0 / 50%)", + "color/black/alpha/60": "oklch(0 0 0 / 60%)", + "color/black/alpha/70": "oklch(0 0 0 / 70%)", + "color/black/alpha/80": "oklch(0 0 0 / 80%)", + "color/black/alpha/90": "oklch(0 0 0 / 90%)" } diff --git a/toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json b/toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json @@ -1,4 +1,5 @@ { + "background/color/overlay": "{Colors$color/black/alpha/50}", "border/radius/circle": 9999, "border/radius/xsmall": 2, "border/radius/small": 4, diff --git a/toolkit/themes/shared/design-system/dist/tokens-shared.css b/toolkit/themes/shared/design-system/dist/tokens-shared.css @@ -14,6 +14,7 @@ --background-color-box: light-dark(var(--color-white), var(--color-gray-80)); --background-color-critical: light-dark(var(--color-red-0), var(--color-red-90)); --background-color-information: light-dark(var(--color-blue-0), var(--color-blue-90)); + --background-color-overlay: var(--color-black-alpha-50); --background-color-success: light-dark(var(--color-green-0), var(--color-green-90)); --background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-90)); --promo-background-color: var(--background-color-box-info); @@ -123,6 +124,16 @@ --checkbox-size: var(--size-item-small); /* TODO Bug 1876537: Make this em-based, probably? */ /** Color **/ + --color-black: #000000; + --color-black-alpha-10: oklch(0 0 0 / 10%); + --color-black-alpha-20: oklch(0 0 0 / 20%); + --color-black-alpha-30: oklch(0 0 0 / 30%); + --color-black-alpha-40: oklch(0 0 0 / 40%); + --color-black-alpha-50: oklch(0 0 0 / 50%); + --color-black-alpha-60: oklch(0 0 0 / 60%); + --color-black-alpha-70: oklch(0 0 0 / 70%); + --color-black-alpha-80: oklch(0 0 0 / 80%); + --color-black-alpha-90: oklch(0 0 0 / 90%); --color-blue-0: oklch(97% 0.05 260); --color-blue-10: oklch(90% 0.13 260); --color-blue-20: oklch(83% 0.17 260); @@ -229,6 +240,15 @@ --color-violet-100: oklch(27% 0.1 290); --color-violet-110: oklch(20% 0.05 290); --color-white: #ffffff; + --color-white-alpha-10: oklch(1 0 0 / 10%); + --color-white-alpha-20: oklch(1 0 0 / 20%); + --color-white-alpha-30: oklch(1 0 0 / 30%); + --color-white-alpha-40: oklch(1 0 0 / 40%); + --color-white-alpha-50: oklch(1 0 0 / 50%); + --color-white-alpha-60: oklch(1 0 0 / 60%); + --color-white-alpha-70: oklch(1 0 0 / 70%); + --color-white-alpha-80: oklch(1 0 0 / 80%); + --color-white-alpha-90: oklch(1 0 0 / 90%); --color-yellow-0: oklch(97% 0.05 90); --color-yellow-10: oklch(93% 0.1 90); --color-yellow-20: oklch(86% 0.14 90); diff --git a/toolkit/themes/shared/design-system/dist/tokens-table.mjs b/toolkit/themes/shared/design-system/dist/tokens-table.mjs @@ -137,6 +137,25 @@ export const tokensTable = { { value: "oklch(27% 0.1 360)", name: "--color-pink-100" }, { value: "oklch(20% 0.05 360)", name: "--color-pink-110" }, { value: "#ffffff", name: "--color-white" }, + { value: "oklch(1 0 0 / 10%)", name: "--color-white-alpha-10" }, + { value: "oklch(1 0 0 / 20%)", name: "--color-white-alpha-20" }, + { value: "oklch(1 0 0 / 30%)", name: "--color-white-alpha-30" }, + { value: "oklch(1 0 0 / 40%)", name: "--color-white-alpha-40" }, + { value: "oklch(1 0 0 / 50%)", name: "--color-white-alpha-50" }, + { value: "oklch(1 0 0 / 60%)", name: "--color-white-alpha-60" }, + { value: "oklch(1 0 0 / 70%)", name: "--color-white-alpha-70" }, + { value: "oklch(1 0 0 / 80%)", name: "--color-white-alpha-80" }, + { value: "oklch(1 0 0 / 90%)", name: "--color-white-alpha-90" }, + { value: "#000000", name: "--color-black" }, + { value: "oklch(0 0 0 / 10%)", name: "--color-black-alpha-10" }, + { value: "oklch(0 0 0 / 20%)", name: "--color-black-alpha-20" }, + { value: "oklch(0 0 0 / 30%)", name: "--color-black-alpha-30" }, + { value: "oklch(0 0 0 / 40%)", name: "--color-black-alpha-40" }, + { value: "oklch(0 0 0 / 50%)", name: "--color-black-alpha-50" }, + { value: "oklch(0 0 0 / 60%)", name: "--color-black-alpha-60" }, + { value: "oklch(0 0 0 / 70%)", name: "--color-black-alpha-70" }, + { value: "oklch(0 0 0 / 80%)", name: "--color-black-alpha-80" }, + { value: "oklch(0 0 0 / 90%)", name: "--color-black-alpha-90" }, { value: { forcedColors: "ButtonText", @@ -263,6 +282,10 @@ export const tokensTable = { name: "--background-color-warning", }, { + value: "var(--color-black-alpha-50)", + name: "--background-color-overlay", + }, + { value: { forcedColors: "ButtonFace", brand: { default: "color-mix(in srgb, currentColor 7%, transparent)" }, @@ -1160,6 +1183,7 @@ export const variableLookupTable = { prefersContrast: "var(--background-color-canvas)", default: "light-dark(var(--color-yellow-0), var(--color-yellow-90))", }, + "background-color-overlay": "var(--color-black-alpha-50)", "border-color": { brand: { light: "var(--color-gray-50)", @@ -1570,6 +1594,25 @@ export const variableLookupTable = { "color-pink-100": "oklch(27% 0.1 360)", "color-pink-110": "oklch(20% 0.05 360)", "color-white": "#ffffff", + "color-white-alpha-10": "oklch(1 0 0 / 10%)", + "color-white-alpha-20": "oklch(1 0 0 / 20%)", + "color-white-alpha-30": "oklch(1 0 0 / 30%)", + "color-white-alpha-40": "oklch(1 0 0 / 40%)", + "color-white-alpha-50": "oklch(1 0 0 / 50%)", + "color-white-alpha-60": "oklch(1 0 0 / 60%)", + "color-white-alpha-70": "oklch(1 0 0 / 70%)", + "color-white-alpha-80": "oklch(1 0 0 / 80%)", + "color-white-alpha-90": "oklch(1 0 0 / 90%)", + "color-black": "#000000", + "color-black-alpha-10": "oklch(0 0 0 / 10%)", + "color-black-alpha-20": "oklch(0 0 0 / 20%)", + "color-black-alpha-30": "oklch(0 0 0 / 30%)", + "color-black-alpha-40": "oklch(0 0 0 / 40%)", + "color-black-alpha-50": "oklch(0 0 0 / 50%)", + "color-black-alpha-60": "oklch(0 0 0 / 60%)", + "color-black-alpha-70": "oklch(0 0 0 / 70%)", + "color-black-alpha-80": "oklch(0 0 0 / 80%)", + "color-black-alpha-90": "oklch(0 0 0 / 90%)", "color-accent-primary": { forcedColors: "ButtonText", brand: { diff --git a/toolkit/themes/shared/design-system/src/design-tokens.json b/toolkit/themes/shared/design-system/src/design-tokens.json @@ -20,7 +20,7 @@ "box": { "@base": { "value": { - "light": "{color.white}", + "light": "{color.white.@base}", "dark": "{color.gray.80}", "prefersContrast": "{background.color.canvas}" } @@ -42,7 +42,7 @@ "value": { "prefersContrast": "Canvas", "brand": { - "light": "{color.white}", + "light": "{color.white.@base}", "dark": "{color.gray.90}" }, "platform": { @@ -77,6 +77,9 @@ "dark": "{color.yellow.90}", "prefersContrast": "{background.color.canvas}" } + }, + "overlay": { + "value": "{color.black.alpha.50}" } } }, @@ -508,7 +511,7 @@ "destructive": { "@base": { "value": { - "light": "{color.white}", + "light": "{color.white.@base}", "dark": "{color.gray.100}", "forcedColors": "{button.text.color.primary.@base}" } @@ -589,7 +592,7 @@ "value": { "forcedColors": "ButtonFace", "brand": { - "light": "{color.white}", + "light": "{color.white.@base}", "dark": "{color.gray.100}" }, "platform": { @@ -1003,7 +1006,72 @@ } }, "white": { - "value": "#ffffff" + "@base": { + "value": "#ffffff" + }, + "alpha": { + "10": { + "value": "oklch(1 0 0 / 10%)" + }, + "20": { + "value": "oklch(1 0 0 / 20%)" + }, + "30": { + "value": "oklch(1 0 0 / 30%)" + }, + "40": { + "value": "oklch(1 0 0 / 40%)" + }, + "50": { + "value": "oklch(1 0 0 / 50%)" + }, + "60": { + "value": "oklch(1 0 0 / 60%)" + }, + "70": { + "value": "oklch(1 0 0 / 70%)" + }, + "80": { + "value": "oklch(1 0 0 / 80%)" + }, + "90": { + "value": "oklch(1 0 0 / 90%)" + } + } + }, + "black": { + "@base": { + "value": "#000000" + }, + "alpha": { + "10": { + "value": "oklch(0 0 0 / 10%)" + }, + "20": { + "value": "oklch(0 0 0 / 20%)" + }, + "30": { + "value": "oklch(0 0 0 / 30%)" + }, + "40": { + "value": "oklch(0 0 0 / 40%)" + }, + "50": { + "value": "oklch(0 0 0 / 50%)" + }, + "60": { + "value": "oklch(0 0 0 / 60%)" + }, + "70": { + "value": "oklch(0 0 0 / 70%)" + }, + "80": { + "value": "oklch(0 0 0 / 80%)" + }, + "90": { + "value": "oklch(0 0 0 / 90%)" + } + } }, "accent": { "primary": { @@ -1517,7 +1585,7 @@ "value": { "forcedColors": "SelectedItemText", "brand": { - "light": "{color.white}", + "light": "{color.white.@base}", "dark": "{color.gray.100}" }, "platform": {