Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-26 04:09:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D223137
This commit is contained in:
Dão Gottwald 2024-09-25 05:13:31 +00:00
parent 6331e3d00d
commit 90a7b761ba
16 changed files with 67 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
browser/components/asrouter/modules/FeatureCallout.sys.mjs
View File

@ -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",

8
browser/themes/addons/dark/manifest.json
View File

@ -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",

8
browser/themes/addons/light/manifest.json
View File

@ -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",

13
browser/themes/shared/browser-colors.css
View File

@ -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));

2
browser/themes/shared/browser-shared.css
View File

@ -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;

8
browser/themes/shared/customizableui/panelUI-shared.css
View File

@ -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);
}
}
}

8
browser/themes/shared/formautofill-notification.css
View File

@ -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);
}
}
}

4
browser/themes/shared/identity-credential-notification.css
View File

@ -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;

4
browser/themes/shared/translations/panel.css
View File

@ -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 {

10
browser/themes/shared/urlbarView.css
View File

@ -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);
}
}
}

8
toolkit/mozapps/extensions/default-theme/manifest.json
View File

@ -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"

8
toolkit/themes/shared/design-system/design-tokens.json
View File

@ -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))"
}
}
}

2
toolkit/themes/shared/design-system/docs/README.design-tokens.stories.md
View File

@ -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`

8
toolkit/themes/shared/design-system/tokens-platform.css
View File

@ -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;

24
toolkit/themes/shared/design-system/tokens-storybook.mjs
View File

@ -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)",

8
toolkit/themes/shared/global-shared.css
View File

@ -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);
}
}
}