commit 2af830fc90c527654108509506fc3b03ad466dd3
parent ff43d7dbf1ad026defccc22a88ac80385bb78aaa
Author: Osmond Arnesto <oarnesto@mozilla.com>
Date: Mon, 15 Dec 2025 21:52:05 +0000
Bug 1985429 - replace existing `--in-content-table-*` variables with new design tokens r=extension-reviewers,desktop-theme-reviewers,mstriemer,willdurand
Differential Revision: https://phabricator.services.mozilla.com/D272600
Diffstat:
10 files changed, 173 insertions(+), 19 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(--in-content-sidebar-width);
+ --sidebar-width: var(--size-sidebar);
--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(--in-content-sidebar-width) - var(--main-margin-start));
+ --sidebar-width: calc(var(--size-sidebar) - 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,6 +54,9 @@
/** 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,6 +32,8 @@
"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,6 +509,26 @@
"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,6 +54,9 @@
--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,6 +293,8 @@
--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 */
@@ -303,6 +305,11 @@
--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);
@@ -426,6 +433,12 @@
--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,6 +759,8 @@ 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: [
{
@@ -1100,6 +1102,47 @@ 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 = {
@@ -1729,6 +1772,8 @@ 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))",
@@ -1768,6 +1813,29 @@ 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,6 +1361,14 @@
"xlarge": {
"value": "48px"
}
+ },
+ "sidebar": {
+ "@base": {
+ "value": "280px"
+ },
+ "narrow": {
+ "value": "118px"
+ }
}
},
"space": {
@@ -1452,6 +1460,49 @@
}
},
"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,12 +22,6 @@
--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;
@@ -572,7 +566,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(--in-content-sidebar-width);
+ width: var(--size-sidebar);
outline: none;
}
@@ -697,8 +691,8 @@ html|*#categories[last-input-type="mouse"] > html|button.category:focus-visible
}
@media (max-width: 830px) {
- :root {
- --in-content-sidebar-width: 118px;
+ #categories {
+ width: var(--size-sidebar-narrow);
}
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(--in-content-table-background);
+ background-color: var(--table-background-color);
color: var(--text-color);
font: message-box;
text-align: start;
width: 100%;
- border: 1px solid var(--in-content-table-border-color);
+ border: 1px solid var(--table-border-color);
border-radius: var(--border-radius-small);
border-spacing: 0;
overflow: hidden;
@@ -152,9 +152,9 @@ thead th {
}
th {
- background-color: var(--in-content-table-header-background);
- color: var(--in-content-table-header-color);
- border: 1px solid var(--in-content-table-border-color);
+ background-color: var(--table-header-background-color);
+ color: var(--table-header-text-color);
+ border: 1px solid var(--table-border-color);
}
th.column {
@@ -163,13 +163,13 @@ th.column {
}
td {
- border: 1px solid var(--border-color);
+ border: 1px solid var(--table-border-color);
unicode-bidi: plaintext; /* Make sure file paths will be LTR */
}
.action-box {
- background-color: var(--in-content-table-background);
- border: 1px solid var(--border-color);
+ background-color: var(--table-background-color);
+ border: 1px solid var(--table-border-color);
border-radius: var(--border-radius-small);
padding: 16px;
flex: 1 1 25%;
