From 90a7b761bac8bf9b8758093ff38f090f42cf5f60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A3o=20Gottwald?= Date: Wed, 25 Sep 2024 05:13:31 +0000 Subject: [PATCH] Bug 1920500 - Remove --button-primary-bgcolor, --button-primary-hover-bgcolor, --button-primary-active-bgcolor, --button-primary-color. r=desktop-theme-reviewers,reusable-components-reviewers,emilio,hjones Differential Revision: https://phabricator.services.mozilla.com/D223137 --- .../asrouter/modules/FeatureCallout.sys.mjs | 13 +++++----- browser/themes/addons/dark/manifest.json | 8 +++---- browser/themes/addons/light/manifest.json | 8 +++---- browser/themes/shared/browser-colors.css | 13 ++-------- browser/themes/shared/browser-shared.css | 2 +- .../shared/customizableui/panelUI-shared.css | 8 +++---- .../shared/formautofill-notification.css | 8 +++---- .../identity-credential-notification.css | 4 ++-- browser/themes/shared/translations/panel.css | 4 ++-- browser/themes/shared/urlbarView.css | 10 ++++---- .../extensions/default-theme/manifest.json | 8 +++---- .../shared/design-system/design-tokens.json | 8 +++---- .../docs/README.design-tokens.stories.md | 2 +- .../shared/design-system/tokens-platform.css | 8 +++---- .../shared/design-system/tokens-storybook.mjs | 24 ++++++++++++------- toolkit/themes/shared/global-shared.css | 8 +++---- 16 files changed, 67 insertions(+), 69 deletions(-) diff --git a/browser/components/asrouter/modules/FeatureCallout.sys.mjs b/browser/components/asrouter/modules/FeatureCallout.sys.mjs index de7bbeb539c2..415b0e0a8419 100644 --- a/browser/components/asrouter/modules/FeatureCallout.sys.mjs +++ b/browser/components/asrouter/modules/FeatureCallout.sys.mjs @@ -2112,16 +2112,15 @@ export class FeatureCallout { "button-background-active": "var(--button-background-color-active)", "button-color-active": "var(--button-text-color)", "button-border-active": "transparent", - "primary-button-background": "var(--button-primary-bgcolor)", - "primary-button-color": "var(--button-primary-color)", + "primary-button-background": "var(--color-accent-primary)", + "primary-button-color": "var(--button-text-color-primary)", "primary-button-border": "transparent", - "primary-button-background-hover": - "var(--button-primary-hover-bgcolor)", - "primary-button-color-hover": "var(--button-primary-color)", + "primary-button-background-hover": "var(--color-accent-primary-hover)", + "primary-button-color-hover": "var(--button-text-color-primary)", "primary-button-border-hover": "transparent", "primary-button-background-active": - "var(--button-primary-active-bgcolor)", - "primary-button-color-active": "var(--button-primary-color)", + "var(--color-accent-primary-active)", + "primary-button-color-active": "var(--button-text-color-primary)", "primary-button-border-active": "transparent", "link-color": "LinkText", "link-color-hover": "LinkText", diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json index 2fa5422ea005..323c35337c12 100644 --- a/browser/themes/addons/dark/manifest.json +++ b/browser/themes/addons/dark/manifest.json @@ -66,10 +66,10 @@ "button": "--button-background-color", "button_hover": "--button-background-color-hover", "button_active": "--button-background-color-active", - "button_primary": "--button-primary-bgcolor", - "button_primary_hover": "--button-primary-hover-bgcolor", - "button_primary_active": "--button-primary-active-bgcolor", - "button_primary_color": "--button-primary-color", + "button_primary": "--color-accent-primary", + "button_primary_hover": "--color-accent-primary-hover", + "button_primary_active": "--color-accent-primary-active", + "button_primary_color": "--button-text-color-primary", "input_background": "--input-bgcolor", "input_color": "--input-color", "urlbar_popup_separator": "--urlbarView-separator-color", diff --git a/browser/themes/addons/light/manifest.json b/browser/themes/addons/light/manifest.json index 48f6c763e844..a6b4fd1049a9 100644 --- a/browser/themes/addons/light/manifest.json +++ b/browser/themes/addons/light/manifest.json @@ -71,10 +71,10 @@ "button": "--button-background-color", "button_hover": "--button-background-color-hover", "button_active": "--button-background-color-active", - "button_primary": "--button-primary-bgcolor", - "button_primary_hover": "--button-primary-hover-bgcolor", - "button_primary_active": "--button-primary-active-bgcolor", - "button_primary_color": "--button-primary-color", + "button_primary": "--color-accent-primary", + "button_primary_hover": "--color-accent-primary-hover", + "button_primary_active": "--color-accent-primary-active", + "button_primary_color": "--button-text-color-primary", "input_background": "--input-bgcolor", "input_color": "--input-color", "urlbar_popup_hover": "--urlbarView-hover-background", diff --git a/browser/themes/shared/browser-colors.css b/browser/themes/shared/browser-colors.css index d9c93172f25d..49d45ce6fdc6 100644 --- a/browser/themes/shared/browser-colors.css +++ b/browser/themes/shared/browser-colors.css @@ -12,11 +12,6 @@ --sidebar-text-color: -moz-sidebartext; --sidebar-border-color: -moz-sidebarborder; - --button-primary-bgcolor: AccentColor; - --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, AccentColor); - --button-primary-active-bgcolor: color-mix(in srgb, black 20%, AccentColor); - --button-primary-color: AccentColorText; - --tabs-navbar-separator-color: ThreeDShadow; --tabs-navbar-separator-style: solid; @@ -83,17 +78,13 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media not ((prefers-contrast) or (-moz-platform: linux) or ((-moz-platform: macos) and (-moz-bool-pref: "browser.theme.macos.native-theme"))) { :root:not([lwtheme]) { - --button-primary-bgcolor: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); - --button-primary-hover-bgcolor: light-dark(rgb(2, 80, 187), rgb(128, 235, 255)); - --button-primary-active-bgcolor: light-dark(rgb(5, 62, 148), rgb(170, 242, 255)); - --button-primary-color: light-dark(rgb(251, 251, 254), rgb(43, 42, 51)); + --color-accent-primary: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); + --button-text-color-primary: light-dark(rgb(251, 251, 254), rgb(43, 42, 51)); --button-background-color: light-dark(rgba(207, 207, 216, .33), rgba(0, 0, 0, .33)); --button-background-color-hover: light-dark(rgba(207, 207, 216, .66), rgba(207, 207, 216, .20)); --button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, .40)); --button-text-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); - --focus-outline-color: var(--button-primary-bgcolor); - --arrowpanel-background: light-dark(white, rgb(66, 65, 77)); --arrowpanel-color: light-dark(black, rgb(251, 251, 254)); --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82,82,94)); diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css index 53de1f555c4d..1978d144f138 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css @@ -38,7 +38,7 @@ body { :root { user-select: none; color-scheme: light dark; - accent-color: var(--button-primary-bgcolor); + accent-color: var(--color-accent-primary); text-rendering: optimizeLegibility; min-height: 95px; min-width: 95px; diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css index a2d2a2c090b7..a4417cc614ca 100644 --- a/browser/themes/shared/customizableui/panelUI-shared.css +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -1928,13 +1928,13 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { } .PanelUI-profiler-button-primary { - background-color: var(--button-primary-bgcolor); - color: var(--button-primary-color); + background-color: var(--color-accent-primary); + color: var(--button-text-color-primary); &:hover { - background-color: var(--button-primary-hover-bgcolor); + background-color: var(--color-accent-primary-hover); &:active { - background-color: var(--button-primary-active-bgcolor); + background-color: var(--color-accent-primary-active); } } } diff --git a/browser/themes/shared/formautofill-notification.css b/browser/themes/shared/formautofill-notification.css index b168102f6bfe..e89776111ef9 100644 --- a/browser/themes/shared/formautofill-notification.css +++ b/browser/themes/shared/formautofill-notification.css @@ -84,14 +84,14 @@ } .popup-notification-primary-button { - color: var(--button-primary-color); - background-color: var(--button-primary-bgcolor); + color: var(--button-text-color-primary); + background-color: var(--color-accent-primary); &:hover { - background-color: var(--button-primary-hover-bgcolor); + background-color: var(--color-accent-primary-hover); &:active { - background-color: var(--button-primary-active-bgcolor); + background-color: var(--color-accent-primary-active); } } } diff --git a/browser/themes/shared/identity-credential-notification.css b/browser/themes/shared/identity-credential-notification.css index 9cb7ce2a3cfe..c2766d8e1601 100644 --- a/browser/themes/shared/identity-credential-notification.css +++ b/browser/themes/shared/identity-credential-notification.css @@ -5,8 +5,8 @@ #identity-credential-notification, #credential-chooser-notification { --list-item-border: color-mix(in srgb, currentColor 10%, transparent); - --list-item-checked-bgcolor: color-mix(in srgb, var(--button-primary-bgcolor) 6%, transparent); - --list-item-checked-border: color-mix(in srgb, var(--button-primary-bgcolor) 20%, transparent); + --list-item-checked-bgcolor: color-mix(in srgb, var(--color-accent-primary) 6%, transparent); + --list-item-checked-border: color-mix(in srgb, var(--color-accent-primary) 20%, transparent); @media (prefers-contrast) { --list-item-border: ThreeDShadow; --list-item-checked-bgcolor: transparent; diff --git a/browser/themes/shared/translations/panel.css b/browser/themes/shared/translations/panel.css index 588f0a9ffd57..9dcb2004b1bb 100644 --- a/browser/themes/shared/translations/panel.css +++ b/browser/themes/shared/translations/panel.css @@ -64,8 +64,8 @@ h1.translations-panel-header-wrapper { /* The default styling is to dim the default, but here override it so that it still uses the primary color. */ .translations-panel-button-group > button[default][disabled="true"] { - color: var(--button-primary-color); - background-color: var(--button-primary-bgcolor); + color: var(--button-text-color-primary); + background-color: var(--color-accent-primary); } #full-page-translations-panel-translate-hint-action { diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css index 5fcb29eefe10..6b9561707e8f 100644 --- a/browser/themes/shared/urlbarView.css +++ b/browser/themes/shared/urlbarView.css @@ -441,17 +441,17 @@ } &:is([selected], [primary]) { - color: var(--button-primary-color); - background-color: var(--button-primary-bgcolor); - outline-color: var(--button-primary-bgcolor); + color: var(--button-text-color-primary); + background-color: var(--color-accent-primary); + outline-color: var(--color-accent-primary); outline-offset: var(--focus-outline-offset); &:hover { - background-color: var(--button-primary-hover-bgcolor); + background-color: var(--color-accent-primary-hover); } &:hover:active { - background-color: var(--button-primary-active-bgcolor); + background-color: var(--color-accent-primary-active); } } } diff --git a/toolkit/mozapps/extensions/default-theme/manifest.json b/toolkit/mozapps/extensions/default-theme/manifest.json index 553f645a05a4..67376448b008 100644 --- a/toolkit/mozapps/extensions/default-theme/manifest.json +++ b/toolkit/mozapps/extensions/default-theme/manifest.json @@ -66,10 +66,10 @@ "button": "--button-background-color", "button_hover": "--button-background-color-hover", "button_active": "--button-background-color-active", - "button_primary": "--button-primary-bgcolor", - "button_primary_hover": "--button-primary-hover-bgcolor", - "button_primary_active": "--button-primary-active-bgcolor", - "button_primary_color": "--button-primary-color", + "button_primary": "--color-accent-primary", + "button_primary_hover": "--color-accent-primary-hover", + "button_primary_active": "--color-accent-primary-active", + "button_primary_color": "--button-text-color-primary", "input_background": "--input-bgcolor", "input_color": "--input-color", "urlbar_popup_separator": "--urlbarView-separator-color" diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json index 6089bb49a221..4d94268d8b95 100644 --- a/toolkit/themes/shared/design-system/design-tokens.json +++ b/toolkit/themes/shared/design-system/design-tokens.json @@ -501,7 +501,7 @@ "dark": "{color.gray.100}" }, "platform": { - "default": "var(--button-primary-color)" + "default": "AccentColorText" } } }, @@ -662,7 +662,7 @@ "dark": "{color.cyan.50}" }, "platform": { - "default": "var(--button-primary-bgcolor, AccentColor)" + "default": "AccentColor" } } }, @@ -674,7 +674,7 @@ "dark": "{color.cyan.30}" }, "platform": { - "default": "var(--button-primary-hover-bgcolor)" + "default": "color-mix(in srgb, black 10%, var(--color-accent-primary))" } } }, @@ -686,7 +686,7 @@ "dark": "{color.cyan.20}" }, "platform": { - "default": "var(--button-primary-active-bgcolor)" + "default": "color-mix(in srgb, black 20%, var(--color-accent-primary))" } } } diff --git a/toolkit/themes/shared/design-system/docs/README.design-tokens.stories.md b/toolkit/themes/shared/design-system/docs/README.design-tokens.stories.md index 4933dbdd0716..928c85d73ec6 100644 --- a/toolkit/themes/shared/design-system/docs/README.design-tokens.stories.md +++ b/toolkit/themes/shared/design-system/docs/README.design-tokens.stories.md @@ -255,7 +255,7 @@ 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(--button-primary-bgcolor, AccentColor); +--color-accent-primary: AccentColor; ``` #### `tokens-shared.css` diff --git a/toolkit/themes/shared/design-system/tokens-platform.css b/toolkit/themes/shared/design-system/tokens-platform.css index 42cfc904117a..26ccda6fd45b 100644 --- a/toolkit/themes/shared/design-system/tokens-platform.css +++ b/toolkit/themes/shared/design-system/tokens-platform.css @@ -25,12 +25,12 @@ --button-background-color-hover: color-mix(in srgb, currentColor 17%, transparent); --button-background-color-active: color-mix(in srgb, currentColor 30%, transparent); --button-text-color: currentColor; - --button-text-color-primary: var(--button-primary-color); + --button-text-color-primary: AccentColorText; /** Color **/ - --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-accent-primary: AccentColor; + --color-accent-primary-hover: color-mix(in srgb, black 10%, var(--color-accent-primary)); + --color-accent-primary-active: color-mix(in srgb, black 20%, var(--color-accent-primary)); /** Font Size **/ --font-size-root: unset; diff --git a/toolkit/themes/shared/design-system/tokens-storybook.mjs b/toolkit/themes/shared/design-system/tokens-storybook.mjs index d0f8ad978805..ce66c8244795 100644 --- a/toolkit/themes/shared/design-system/tokens-storybook.mjs +++ b/toolkit/themes/shared/design-system/tokens-storybook.mjs @@ -500,7 +500,7 @@ export const storybookTables = { dark: "var(--color-gray-100)", default: "light-dark(var(--color-gray-05), var(--color-gray-100))", }, - platform: { default: "var(--button-primary-color)" }, + platform: { default: "AccentColorText" }, }, name: "--button-text-color-primary", }, @@ -600,7 +600,7 @@ export const storybookTables = { dark: "var(--color-cyan-50)", default: "light-dark(var(--color-blue-50), var(--color-cyan-50))", }, - platform: { default: "var(--button-primary-bgcolor, AccentColor)" }, + platform: { default: "AccentColor" }, }, name: "--color-accent-primary", }, @@ -612,7 +612,9 @@ export const storybookTables = { dark: "var(--color-cyan-30)", default: "light-dark(var(--color-blue-60), var(--color-cyan-30))", }, - platform: { default: "var(--button-primary-hover-bgcolor)" }, + platform: { + default: "color-mix(in srgb, black 10%, var(--color-accent-primary))", + }, }, name: "--color-accent-primary-hover", }, @@ -624,7 +626,9 @@ export const storybookTables = { dark: "var(--color-cyan-20)", default: "light-dark(var(--color-blue-70), var(--color-cyan-20))", }, - platform: { default: "var(--button-primary-active-bgcolor)" }, + platform: { + default: "color-mix(in srgb, black 20%, var(--color-accent-primary))", + }, }, name: "--color-accent-primary-active", }, @@ -1030,7 +1034,7 @@ export const variableLookupTable = { dark: "var(--color-gray-100)", default: "light-dark(var(--color-gray-05), var(--color-gray-100))", }, - platform: { default: "var(--button-primary-color)" }, + platform: { default: "AccentColorText" }, }, "button-text-color-primary-active": "var(--button-text-color-primary-hover)", "button-text-color-primary-disabled": "var(--button-text-color-primary)", @@ -1082,7 +1086,7 @@ export const variableLookupTable = { dark: "var(--color-cyan-50)", default: "light-dark(var(--color-blue-50), var(--color-cyan-50))", }, - platform: { default: "var(--button-primary-bgcolor, AccentColor)" }, + platform: { default: "AccentColor" }, }, "color-accent-primary-hover": { forcedColors: "SelectedItem", @@ -1091,7 +1095,9 @@ export const variableLookupTable = { dark: "var(--color-cyan-30)", default: "light-dark(var(--color-blue-60), var(--color-cyan-30))", }, - platform: { default: "var(--button-primary-hover-bgcolor)" }, + platform: { + default: "color-mix(in srgb, black 10%, var(--color-accent-primary))", + }, }, "color-accent-primary-active": { forcedColors: "var(--color-accent-primary-hover)", @@ -1100,7 +1106,9 @@ export const variableLookupTable = { dark: "var(--color-cyan-20)", default: "light-dark(var(--color-blue-70), var(--color-cyan-20))", }, - platform: { default: "var(--button-primary-active-bgcolor)" }, + platform: { + default: "color-mix(in srgb, black 20%, var(--color-accent-primary))", + }, }, "focus-outline": "var(--focus-outline-width) solid var(--focus-outline-color)", diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css index 102e25fbfa7f..232c465ec997 100644 --- a/toolkit/themes/shared/global-shared.css +++ b/toolkit/themes/shared/global-shared.css @@ -339,14 +339,14 @@ button.text-link .button-text { } &[default], &.primary { - color: var(--button-primary-color); - background-color: var(--button-primary-bgcolor); + color: var(--button-text-color-primary); + background-color: var(--color-accent-primary); &:hover { - background-color: var(--button-primary-hover-bgcolor); + background-color: var(--color-accent-primary-hover); } &:hover:active { - background-color: var(--button-primary-active-bgcolor); + background-color: var(--color-accent-primary-active); } } }