commit 8f0095d41bb333d16dbe25fd969f6784425015b2
parent 13ee37f4a40a7f4abadd6e9431eaff7b1ea3fbb9
Author: Sandor Molnar <smolnar@mozilla.com>
Date: Tue, 16 Dec 2025 00:34:42 +0200
Revert "Bug 1985429 - replace existing `--in-content-table-*` variables with new design tokens r=extension-reviewers,desktop-theme-reviewers,mstriemer,willdurand" for causing bc failures @ browser_parsable_css.js
This reverts commit 2af830fc90c527654108509506fc3b03ad466dd3.
Diffstat:
10 files changed, 19 insertions(+), 173 deletions(-)
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -5,7 +5,7 @@
:root {
--addon-icon-size: 32px;
--main-margin-start: 28px;
- --sidebar-width: var(--size-sidebar);
+ --sidebar-width: var(--in-content-sidebar-width);
--z-index-sticky-container: 5;
--z-index-popup: 10;
}
@@ -14,7 +14,7 @@
:root {
--main-margin-start: 16px;
/* Maintain a main margin so card shadows don't overlap the sidebar. */
- --sidebar-width: calc(var(--size-sidebar) - var(--main-margin-start));
+ --sidebar-width: calc(var(--in-content-sidebar-width) - var(--main-margin-start));
}
}
diff --git a/toolkit/themes/shared/design-system/dist/tokens-brand.css b/toolkit/themes/shared/design-system/dist/tokens-brand.css
@@ -54,9 +54,6 @@
/** Page **/
--page-main-content-width: 664px;
- /** Table **/
- --table-header-text-color: light-dark(var(--color-white), var(--color-gray-100));
-
/** Text **/
--text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
--text-color-accent-primary-selected: light-dark(var(--color-white), var(--color-gray-100));
diff --git a/toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json b/toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json
@@ -32,8 +32,6 @@
"size/item/medium": 24,
"size/item/large": 32,
"size/item/xlarge": 48,
- "size/sidebar": 280,
- "size/sidebar/narrow": 118,
"space/xxsmall": "0.1335rem",
"space/xsmall": "0.267rem",
"space/small": "0.534rem",
diff --git a/toolkit/themes/shared/design-system/dist/tokens-figma-theme.json b/toolkit/themes/shared/design-system/dist/tokens-figma-theme.json
@@ -509,26 +509,6 @@
"dark": "rgba(0, 0, 0, 0.4)",
"forcedColors": "transparent"
},
- "table/background/color": {
- "light": "#f8f8fa",
- "dark": "rgb(35, 34, 43)",
- "forcedColors": "{HCM Theme$Canvas}"
- },
- "table/border/color": {
- "light": "color-mix(in srgb, currentColor 41%, transparent)",
- "dark": "color-mix(in srgb, currentColor 41%, transparent)",
- "forcedColors": "{HCM Theme$CanvasText}"
- },
- "table/header/background/color": {
- "light": "{Theme$color/accent/primary}",
- "dark": "{Theme$color/accent/primary}",
- "forcedColors": "{HCM Theme$AccentColor}"
- },
- "table/header/text/color": {
- "light": "{Colors$color/white}",
- "dark": "{Colors$color/gray/100}",
- "forcedColors": "{HCM Theme$AccentColorText}"
- },
"table/row/background/color": {
"light": "{Theme$background/color/canvas}",
"dark": "{Theme$background/color/canvas}",
diff --git a/toolkit/themes/shared/design-system/dist/tokens-platform.css b/toolkit/themes/shared/design-system/dist/tokens-platform.css
@@ -54,9 +54,6 @@
--link-color-active: color-mix(in srgb, black 20%, var(--link-color));
--link-color-visited: var(--link-color);
- /** Table **/
- --table-header-text-color: AccentColorText;
-
/** Text **/
--text-color: currentColor;
--text-color-accent-primary-selected: SelectedItemText;
diff --git a/toolkit/themes/shared/design-system/dist/tokens-shared.css b/toolkit/themes/shared/design-system/dist/tokens-shared.css
@@ -293,8 +293,6 @@
--size-item-medium: 24px;
--size-item-large: 32px;
--size-item-xlarge: 48px;
- --size-sidebar: 280px;
- --size-sidebar-narrow: 118px;
/** Space **/
--space-xxsmall: calc(0.5 * var(--space-xsmall)); /* 2px */
@@ -305,11 +303,6 @@
--space-xlarge: calc(6 * var(--space-xsmall)); /* 24px */
--space-xxlarge: calc(8 * var(--space-xsmall)); /* 32px */
- /** Table **/
- --table-background-color: light-dark(#f8f8fa, rgb(35, 34, 43));
- --table-border-color: color-mix(in srgb, currentColor 41%, transparent);
- --table-header-background-color: var(--color-accent-primary);
-
/** Text **/
--text-color-disabled: color-mix(in srgb, currentColor 40%, transparent);
--text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
@@ -433,12 +426,6 @@
--link-color-active: ActiveText;
--link-color-visited: var(--link-color);
- /** Table **/
- --table-background-color: Canvas;
- --table-border-color: CanvasText;
- --table-header-background-color: AccentColor;
- --table-header-text-color: AccentColorText;
-
/** Text **/
--text-color-disabled: GrayText;
--text-color-accent-primary-selected: SelectedItemText;
diff --git a/toolkit/themes/shared/design-system/dist/tokens-table.mjs b/toolkit/themes/shared/design-system/dist/tokens-table.mjs
@@ -759,8 +759,6 @@ export const tokensTable = {
{ value: "24px", name: "--size-item-medium" },
{ value: "32px", name: "--size-item-large" },
{ value: "48px", name: "--size-item-xlarge" },
- { value: "280px", name: "--size-sidebar" },
- { value: "118px", name: "--size-sidebar-narrow" },
],
opacity: [
{
@@ -1102,47 +1100,6 @@ export const tokensTable = {
name: "--box-shadow-color-lighter-layer-2",
},
],
- "table-background": [
- {
- value: {
- light: "#f8f8fa",
- dark: "rgb(35, 34, 43)",
- forcedColors: "Canvas",
- default: "light-dark(#f8f8fa, rgb(35, 34, 43))",
- },
- name: "--table-background-color",
- },
- ],
- "table-border": [
- {
- value: {
- default: "color-mix(in srgb, currentColor 41%, transparent)",
- forcedColors: "CanvasText",
- },
- name: "--table-border-color",
- },
- ],
- "table-header": [
- {
- value: {
- default: "var(--color-accent-primary)",
- forcedColors: "AccentColor",
- },
- name: "--table-header-background-color",
- },
- {
- value: {
- forcedColors: "AccentColorText",
- brand: {
- light: "var(--color-white)",
- dark: "var(--color-gray-100)",
- default: "light-dark(var(--color-white), var(--color-gray-100))",
- },
- platform: { default: "AccentColorText" },
- },
- name: "--table-header-text-color",
- },
- ],
};
export const variableLookupTable = {
@@ -1772,8 +1729,6 @@ export const variableLookupTable = {
"size-item-medium": "24px",
"size-item-large": "32px",
"size-item-xlarge": "48px",
- "size-sidebar": "280px",
- "size-sidebar-narrow": "118px",
"space-xxsmall": "calc(0.5 * var(--space-xsmall))",
"space-xsmall": "0.267rem",
"space-small": "calc(2 * var(--space-xsmall))",
@@ -1813,29 +1768,6 @@ export const variableLookupTable = {
dark: "rgba(0, 0, 0, 0.4)",
default: "light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4))",
},
- "table-background-color": {
- light: "#f8f8fa",
- dark: "rgb(35, 34, 43)",
- forcedColors: "Canvas",
- default: "light-dark(#f8f8fa, rgb(35, 34, 43))",
- },
- "table-border-color": {
- default: "color-mix(in srgb, currentColor 41%, transparent)",
- forcedColors: "CanvasText",
- },
- "table-header-background-color": {
- default: "var(--color-accent-primary)",
- forcedColors: "AccentColor",
- },
- "table-header-text-color": {
- forcedColors: "AccentColorText",
- brand: {
- light: "var(--color-white)",
- dark: "var(--color-gray-100)",
- default: "light-dark(var(--color-white), var(--color-gray-100))",
- },
- platform: { default: "AccentColorText" },
- },
"table-row-background-color": { default: "var(--background-color-canvas)" },
"table-row-background-color-alternate": {
forcedColors: "var(--background-color-canvas)",
diff --git a/toolkit/themes/shared/design-system/src/design-tokens.json b/toolkit/themes/shared/design-system/src/design-tokens.json
@@ -1361,14 +1361,6 @@
"xlarge": {
"value": "48px"
}
- },
- "sidebar": {
- "@base": {
- "value": "280px"
- },
- "narrow": {
- "value": "118px"
- }
}
},
"space": {
@@ -1460,49 +1452,6 @@
}
},
"table": {
- "background": {
- "color": {
- "value": {
- "light": "#f8f8fa",
- "dark": "rgb(35, 34, 43)",
- "forcedColors": "Canvas"
- }
- }
- },
- "border": {
- "color": {
- "value": {
- "default": "color-mix(in srgb, currentColor 41%, transparent)",
- "forcedColors": "CanvasText"
- }
- }
- },
- "header": {
- "background": {
- "color": {
- "value": {
- "default": "{color.accent.primary.@base}",
- "forcedColors": "AccentColor"
- }
- }
- },
- "text": {
- "color": {
- "@base": {
- "value": {
- "forcedColors": "AccentColorText",
- "brand": {
- "light": "{color.white}",
- "dark": "{color.gray.100}"
- },
- "platform": {
- "default": "AccentColorText"
- }
- }
- }
- }
- }
- },
"row": {
"background": {
"color": {
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
@@ -22,6 +22,12 @@
--in-content-border-invalid: light-dark(var(--red-50), rgb(255, 132, 139));
+ --in-content-table-background: light-dark(#f8f8fa, rgb(35, 34, 43));
+ --in-content-table-border-color: var(--border-color);
+ --in-content-table-header-background: var(--button-background-color-primary);
+ --in-content-table-header-color: var(--button-text-color-primary);
+ --in-content-sidebar-width: 280px;
+
--dialog-warning-text-color: light-dark(var(--red-60), var(--red-40));
--blue-40: #45a1ff;
@@ -566,7 +572,7 @@ xul|label[disabled="true"] {
background-color: initial; /* override the background-color set on all richlistboxes in common.inc.css */
margin: 70px 0 0;
border-width: 0;
- width: var(--size-sidebar);
+ width: var(--in-content-sidebar-width);
outline: none;
}
@@ -691,8 +697,8 @@ html|*#categories[last-input-type="mouse"] > html|button.category:focus-visible
}
@media (max-width: 830px) {
- #categories {
- width: var(--size-sidebar-narrow);
+ :root {
+ --in-content-sidebar-width: 118px;
}
html|*.category:not(.category-no-icon) > html|*.category-name,
diff --git a/toolkit/themes/shared/in-content/info-pages.css b/toolkit/themes/shared/in-content/info-pages.css
@@ -126,12 +126,12 @@ tree {
/* Tables */
table {
- background-color: var(--table-background-color);
+ background-color: var(--in-content-table-background);
color: var(--text-color);
font: message-box;
text-align: start;
width: 100%;
- border: 1px solid var(--table-border-color);
+ border: 1px solid var(--in-content-table-border-color);
border-radius: var(--border-radius-small);
border-spacing: 0;
overflow: hidden;
@@ -152,9 +152,9 @@ thead th {
}
th {
- background-color: var(--table-header-background-color);
- color: var(--table-header-text-color);
- border: 1px solid var(--table-border-color);
+ background-color: var(--in-content-table-header-background);
+ color: var(--in-content-table-header-color);
+ border: 1px solid var(--in-content-table-border-color);
}
th.column {
@@ -163,13 +163,13 @@ th.column {
}
td {
- border: 1px solid var(--table-border-color);
+ border: 1px solid var(--border-color);
unicode-bidi: plaintext; /* Make sure file paths will be LTR */
}
.action-box {
- background-color: var(--table-background-color);
- border: 1px solid var(--table-border-color);
+ background-color: var(--in-content-table-background);
+ border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
padding: 16px;
flex: 1 1 25%;
