corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1917337 - Implement --text-color-disabled. r=desktop-theme-reviewers,reusable-components-reviewers,emilio,hjones

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D222503
This commit is contained in:
Dão Gottwald
2024-09-18 17:30:35 +00:00
parent 3db194adb9
commit 5d7638a38d
10 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/firefoxview/fxview-tab-row.css
View File

@@ -40,7 +40,7 @@
&[disabled="true"] {
pointer-events: none;
color: var(--panel-disabled-color);
color: var(--text-color-disabled);
}
}

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

@@ -199,7 +199,7 @@
background: transparent;
border: none;
box-shadow: none;
color: var(--panel-disabled-color);
color: var(--text-color-disabled);
padding-inline: 10px;
}

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

@@ -302,7 +302,7 @@ panelview {
:is(menu, menuitem) {
&[disabled] {
color: var(--panel-disabled-color);
color: var(--text-color-disabled);
}
&:not([disabled])[_moz-menuactive] {
@@ -763,7 +763,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
}
&:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
color: var(--panel-disabled-color);
color: var(--text-color-disabled);
}
}
@@ -828,7 +828,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
}
:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
color: var(--panel-disabled-color);
color: var(--text-color-disabled);
}
/* From the FxA menu -> synced tabs, we don't need to clutter the view with
@@ -1042,7 +1042,7 @@ panelview .toolbarbutton-1,
justify-content: flex-start;
&[disabled="true"] {
color: var(--panel-disabled-color);
color: var(--text-color-disabled);
}
/* We don't always display: none this item, and if it has forced width (like above)
@@ -1062,10 +1062,8 @@ panelview .toolbarbutton-1,
display: flex;
}
@media not (prefers-contrast) {
&[shortcut]:not([disabled])::after {
color: var(--panel-disabled-color);
}
&[shortcut]:not([disabled])::after {
color: var(--text-color-deemphasized);
}
&[shortcut]::after,

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

@@ -145,8 +145,8 @@ h1.translations-panel-header-wrapper {
background-color: transparent;
&:disabled {
color: var(--panel-disabled-color);
border-color: var(--panel-disabled-color);
color: var(--text-color-disabled);
border-color: var(--border-color-deemphasized);
}
&.translating {

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

@@ -958,6 +958,12 @@
"prefersContrast": "inherit"
}
},
"disabled": {
"value": {
"default": "color-mix(in srgb, currentColor 40%, transparent)",
"forcedColors": "GrayText"
}
},
"error": {
"value": {
"light": "{color.red.50}",

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

@@ -419,6 +419,11 @@
"dark": "color-mix(in srgb, currentColor 69%, transparent)",
"forcedColors": "inherit"
},
"text/color/disabled": {
"light": "color-mix(in srgb, currentColor 40%, transparent)",
"dark": "color-mix(in srgb, currentColor 40%, transparent)",
"forcedColors": "GrayText"
},
"text/color/error": {
"light": "#d7264cff",
"dark": "#ff9aa2ff",

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

@@ -178,6 +178,7 @@
--space-xxlarge: calc(8 * var(--space-xsmall));
/** Text **/
--text-color-disabled: color-mix(in srgb, currentColor 40%, transparent);
--text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
--text-color-error: light-dark(var(--color-red-50), var(--color-red-20));
}
@@ -288,6 +289,9 @@
/** Focus Outline **/
--focus-outline-color: var(--text-color);
/** Text **/
--text-color-disabled: GrayText;
}
}
}

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

@@ -538,6 +538,13 @@ export const storybookTables = {
},
name: "--text-color-deemphasized",
},
{
value: {
default: "color-mix(in srgb, currentColor 40%, transparent)",
forcedColors: "GrayText",
},
name: "--text-color-disabled",
},
{
value: {
light: "var(--color-red-50)",
@@ -1209,6 +1216,10 @@ export const variableLookupTable = {
default: "color-mix(in srgb, currentColor 69%, transparent)",
prefersContrast: "inherit",
},
"text-color-disabled": {
default: "color-mix(in srgb, currentColor 40%, transparent)",
forcedColors: "GrayText",
},
"text-color-error": {
light: "var(--color-red-50)",
dark: "var(--color-red-20)",

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

@@ -29,7 +29,6 @@
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent);
--panel-separator-color: color-mix(in srgb, currentColor 25%, transparent);
--panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent);
--popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
@@ -93,10 +92,6 @@
--toolbar-field-focus-border-color: var(--focus-outline-color);
--input-border-color: currentColor;
&:not([lwtheme]) {
--panel-disabled-color: GrayText;
}
}
@media (forced-colors) {

4
toolkit/themes/shared/menu-shared.css
View File

@@ -42,7 +42,7 @@ menuseparator::before {
@media not (prefers-contrast) {
menuitem:not([disabled]) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) {
color: var(--panel-disabled-color);
color: var(--text-color-disabled);
}
}
@@ -111,7 +111,7 @@ menucaption {
menu,
menuitem {
&:where([disabled="true"]) {
color: var(--panel-disabled-color);
color: var(--text-color-disabled);
text-shadow: none;
}