commit 314dbae0d3ca5e69913409960bc607aa4bd5648e parent 6e861d0db3e83e4c7c0aa74dc422b02d7514bbbf Author: dwhisman <dwhisman@mozilla.com> Date: Thu, 18 Dec 2025 15:36:00 +0000 Bug 1992749 - Implement non-semantic token usage fixes r=desktop-theme-reviewers,devtools-reviewers,tabbrowser-reviewers,home-newtab-reviewers,frontend-codestyle-reviewers,urlbar-reviewers,akulyk,kcochrane,mossop,nchevobbe,daisuke,dao,mconley Differential Revision: https://phabricator.services.mozilla.com/D271510 Diffstat:
17 files changed, 265 insertions(+), 38 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/Card/_Card.scss b/browser/extensions/newtab/content-src/components/Card/_Card.scss @@ -241,7 +241,6 @@ .compact-cards { $card-detail-vertical-spacing: 12px; - $card-title-font-size: var(--font-size-small); .card-outer { height: $card-height-compact; @@ -261,9 +260,9 @@ .card-text { .card-title, &:not(.no-description) .card-title { - font-size: $card-title-font-size; - line-height: $card-title-font-size + 1; - max-height: $card-title-font-size + 5; + font-size: var(--font-size-small); + line-height: calc(var(--font-size-small) + 1px); + max-height: calc(var(--font-size-small) + 5px); overflow: hidden; padding: 0 0 var(--space-xsmall); text-overflow: ellipsis; diff --git a/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss @@ -509,7 +509,7 @@ padding-inline-start: var(--space-xlarge); -moz-context-properties: fill; fill: currentColor; - min-height: var(--space-large); + min-height: var(--size-item-small); margin-inline-start: var(--space-xsmall); margin-block-start: var(--space-xsmall); diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -1,6 +1,8 @@ // Type sizes +/* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ $header-font-size: var(--font-size-large); $header-line-height: normal; +/* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ $excerpt-font-size: var(--font-size-small); $excerpt-line-height: normal; $ds-card-image-gradient-fade: rgba(0, 0, 0, 0%); diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss @@ -8,7 +8,7 @@ --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate; position: relative; - border-radius: var(--space-small); + border-radius: var(--border-radius-medium); box-shadow: $shadow-large; padding: var(--space-xxlarge); max-width: 745px; @@ -91,8 +91,8 @@ list-style: none; display: flex; flex-wrap: wrap; - gap: var(--size-item-small); - margin: var(--size-item-large) auto; + gap: var(--space-large); + margin: var(--space-xxlarge) auto; justify-content: center; width: fit-content; diff --git a/browser/extensions/newtab/content-src/components/ErrorBoundary/_ErrorBoundary.scss b/browser/extensions/newtab/content-src/components/ErrorBoundary/_ErrorBoundary.scss @@ -5,7 +5,7 @@ color: var(--newtab-text-secondary-color); display: flex; flex-direction: column; - font-size: $error-fallback-font-size; + font-size: var(--font-size-small); justify-content: center; justify-items: center; diff --git a/browser/extensions/newtab/content-src/components/Search/_Search.scss b/browser/extensions/newtab/content-src/components/Search/_Search.scss @@ -1,8 +1,10 @@ +/* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ $search-height: var(--size-item-xlarge); $search-height-new: 52px; $search-icon-size: 24px; $search-icon-padding: 16px; $search-icon-width: 2 * $search-icon-padding + $search-icon-size - 4px; // 52px +/* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ $search-button-width: var(--size-item-xlarge); $glyph-forward: url('chrome://browser/skin/forward.svg'); diff --git a/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss b/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss @@ -3,8 +3,6 @@ /* stylelint-disable max-nesting-depth */ $top-sites-size: $grid-unit-small; -$top-sites-border-radius: var(--border-radius-medium); -$top-sites-icon-border-radius: var(--border-radius-small); $rich-icon-size: 96px; $default-icon-wrapper-size: 40px; $default-icon-size: 40px; diff --git a/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss b/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss @@ -159,9 +159,9 @@ } input[type='checkbox'] { - height: var(--space-large); - width: var(--space-large); - accent-color: var(--button-background-color-primary); + height: var(--size-item-small); + width: var(--size-item-small); + accent-color: var(--color-accent-primary); margin-inline-start: var(--space-small); padding: 0; } @@ -256,8 +256,8 @@ -moz-context-properties: fill; fill: var(--button-icon-fill); background-image: url('chrome://global/skin/icons/arrow-right.svg'); - height: var(--space-large); - width: var(--space-large); + height: var(--icon-size-small); + width: var(--icon-size-small); position: absolute; inset-inline-end: calc(-1 * var(--space-xlarge)); inset-block-start: 50%; diff --git a/browser/extensions/newtab/content-src/styles/_variables.scss b/browser/extensions/newtab/content-src/styles/_variables.scss @@ -46,7 +46,9 @@ $email-input-invalid: var(--color-red-10); $newtab-wordmark-default-color: #20123A; $newtab-wordmark-darktheme-color: rgb(251, 251, 254); +/* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ $in-content-page-color: var(--text-color); +/* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ $in-content-page-color-dark: var(--text-color); // -------------------------------------------------------------------------- // @@ -134,6 +136,7 @@ $debug-breakpoint-colors: ( ultra-wide: violet ); +/* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ $section-title-font-size: var(--font-size-large); $card-width: $grid-unit-small * 2 + $base-gutter; @@ -163,8 +166,6 @@ $context-menu-font-size: inherit; $context-menu-outer-padding: 5px; $context-menu-item-padding: 3px 12px; -$error-fallback-font-size: var(--font-size-small); - $image-path: 'chrome://newtab/content/data/content/assets/'; $textbox-shadow-size: 4px; diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -2391,7 +2391,7 @@ main section { padding-inline-start: var(--space-xlarge); -moz-context-properties: fill; fill: currentColor; - min-height: var(--space-large); + min-height: var(--size-item-small); margin-inline-start: var(--space-xsmall); margin-block-start: var(--space-xsmall); } @@ -3769,8 +3769,8 @@ dialog:dir(rtl)::after { } .compact-cards .card-outer .card-text .card-title, .compact-cards .card-outer .card-text:not(.no-description) .card-title { font-size: var(--font-size-small); - line-height: var(--font-size-small)1; - max-height: var(--font-size-small)5; + line-height: calc(var(--font-size-small) + 1px); + max-height: calc(var(--font-size-small) + 5px); overflow: hidden; padding: 0 0 var(--space-xsmall); text-overflow: ellipsis; @@ -4611,9 +4611,9 @@ dialog:dir(rtl)::after { max-width: 180px; } .lists .task-item input[type=checkbox] { - height: var(--space-large); - width: var(--space-large); - accent-color: var(--button-background-color-primary); + height: var(--size-item-small); + width: var(--size-item-small); + accent-color: var(--color-accent-primary); margin-inline-start: var(--space-small); padding: 0; } @@ -4693,8 +4693,8 @@ dialog:dir(rtl)::after { -moz-context-properties: fill; fill: var(--button-icon-fill); background-image: url("chrome://global/skin/icons/arrow-right.svg"); - height: var(--space-large); - width: var(--space-large); + height: var(--icon-size-small); + width: var(--icon-size-small); position: absolute; inset-inline-end: calc(-1 * var(--space-xlarge)); inset-block-start: 50%; @@ -8429,7 +8429,7 @@ dialog:dir(rtl)::after { .topic-selection-container { --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate; position: relative; - border-radius: var(--space-small); + border-radius: var(--border-radius-medium); box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); padding: var(--space-xxlarge); max-width: 745px; @@ -8499,8 +8499,8 @@ dialog:dir(rtl)::after { list-style: none; display: flex; flex-wrap: wrap; - gap: var(--size-item-small); - margin: var(--size-item-large) auto; + gap: var(--space-large); + margin: var(--space-xxlarge) auto; justify-content: center; width: fit-content; } diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css @@ -116,6 +116,7 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("sidebar.revamp") { #sidebar-splitter { + /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ width: var(--space-medium); border-inline: calc((var(--space-medium) - var(--splitter-width)) / 2) solid transparent; background-clip: padding-box; diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css @@ -1815,6 +1815,7 @@ tab-group { font-size: 0; width: 16px; height: 16px; + /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ padding: var(--focus-outline-offset); border: var(--focus-outline-width) solid transparent; border-radius: var(--border-radius-medium); diff --git a/browser/themes/shared/urlbar-dynamic-results.css b/browser/themes/shared/urlbar-dynamic-results.css @@ -62,7 +62,7 @@ white-space: nowrap; &[selected] { - border-radius: var(--focus-outline-offset); + border-radius: var(--border-radius-xsmall); outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } diff --git a/devtools/client/aboutdebugging/src/base.css b/devtools/client/aboutdebugging/src/base.css @@ -154,13 +154,13 @@ ul { } a { - color: var(--button-background-color-primary); + color: var(--link-color); } a:hover { - color: var(--button-background-color-primary-hover); + color: var(--link-color-hover); } a:active { - color: var(--button-background-color-primary-active); + color: var(--link-color-active); } p, diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/data.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/data.mjs @@ -5,11 +5,11 @@ export const BACKGROUND_COLOR = { CATEGORIES: ["background-color"], - PROPERTIES: ["background", "background-color"], + PROPERTIES: ["background", "background-color", "stroke", "fill"], }; export const BORDER_COLOR = { - CATEGORIES: ["border-color", "border", "outline"], + CATEGORIES: ["border-color", "border"], PROPERTIES: [ "border", "border-color", @@ -116,6 +116,10 @@ export const SIZE = { "inset-inline", "inset-inline-end", "inset-inline-start", + "top", + "bottom", + "left", + "right", "flex", "flex-basis", "grid", @@ -124,6 +128,9 @@ export const SIZE = { "grid-auto-rows", "grid-auto-columns", "background-size", + "background-position", + "background-position-x", + "background-position-y", "transform", ], }; @@ -165,6 +172,13 @@ export const SPACE = { "inset-inline", "inset-inline-end", "inset-inline-start", + "top", + "bottom", + "left", + "right", + "grid-gap", + "grid-row-gap", + "grid-column-gap", "gap", "row-gap", "column-gap", @@ -191,6 +205,10 @@ export const SPACE = { "scroll-padding-inline-start", "scroll-padding-inline-end", "border-spacing", + "background-position", + "background-position-x", + "background-position-y", + "word-spacing", ], }; @@ -203,3 +221,46 @@ export const BOX_SHADOW = { CATEGORIES: ["box-shadow"], PROPERTIES: ["box-shadow", "filter", "backdrop-filter"], }; + +export const OUTLINE = { + CATEGORIES: ["outline"], + PROPERTIES: [ + "outline", + "outline-width", + "outline-color", + "outline-offset", + "border", + "border-width", + "border-color", + "border-block", + "border-block-width", + "border-block-color", + "border-block-end", + "border-block-end-width", + "border-block-end-color", + "border-block-start", + "border-block-start-width", + "border-block-start-color", + "border-inline", + "border-inline-width", + "border-inline-color", + "border-inline-end", + "border-inline-end-width", + "border-inline-end-color", + "border-inline-start", + "border-inline-start-width", + "border-inline-start-color", + "border-top", + "border-top-width", + "border-top-color", + "border-bottom", + "border-bottom-width", + "border-bottom-color", + "border-left", + "border-left-width", + "border-left-color", + "border-right", + "border-right-width", + "border-right-color", + ], +}; diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/no-non-semantic-token-usage.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/no-non-semantic-token-usage.mjs @@ -25,6 +25,7 @@ import { SPACE, TEXT_COLOR, BOX_SHADOW, + OUTLINE, } from "../data.mjs"; const { @@ -57,6 +58,7 @@ const opacityTokens = createTokenNamesArray(OPACITY.CATEGORIES); const spaceTokens = createTokenNamesArray(SPACE.CATEGORIES); const textColorTokens = createTokenNamesArray(TEXT_COLOR.CATEGORIES); const boxShadowTokens = createTokenNamesArray(BOX_SHADOW.CATEGORIES); +const outlineTokens = createTokenNamesArray(OUTLINE.CATEGORIES); // Get allowed properties by token category const getAllowedProps = token => { @@ -98,6 +100,9 @@ const getAllowedProps = token => { case boxShadowTokens.includes(token): tokenProperties = BOX_SHADOW.PROPERTIES; break; + case outlineTokens.includes(token): + tokenProperties = OUTLINE.PROPERTIES; + break; default: break; } diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/tests/no-non-semantic-token-usage.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/tests/no-non-semantic-token-usage.mjs @@ -100,6 +100,65 @@ testRule({ "Using the small, large, and xlarge size tokens with the inset property is valid.", }, { + code: ".a { inset-block: var(--size-item-small); }", + description: "Using size tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-block-start: var(--size-item-small); }", + description: "Using size tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-block-end: var(--size-item-medium); }", + description: "Using size tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-inline: var(--size-item-xsmall) var(--size-item-large); }", + description: "Using size tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-inline-start: var(--size-item-small); }", + description: "Using size tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-inline-end: var(--size-item-medium); }", + description: "Using size tokens with inset longhand properties is valid.", + }, + { + code: ".a { top: var(--size-item-small); }", + description: + "Using size tokens with top/right/bottom/left properties is valid.", + }, + { + code: ".a { right: var(--size-item-small); }", + description: + "Using size tokens with top/right/bottom/left properties is valid.", + }, + { + code: ".a { bottom: var(--size-item-small); }", + description: + "Using size tokens with top/right/bottom/left properties is valid.", + }, + { + code: ".a { left: var(--size-item-small); }", + description: + "Using size tokens with top/right/bottom/left properties is valid.", + }, + { + code: ".a { background-position: bottom var(--size-item-small) right var(--size-item-medium); }", + description: + "Using size tokens with background-position properties is valid.", + }, + { + code: ".a { background-position-x: var(--size-item-small); }", + description: + "Using size tokens with background-position properties is valid.", + }, + { + code: ".a { background-position-y: var(--size-item-small); }", + description: + "Using size tokens with background-position properties is valid.", + }, + { code: ".a { opacity: var(--button-opacity-disabled); }", description: "Using the disabled button opacity token with the opacity property is valid.", @@ -110,6 +169,86 @@ testRule({ "Using the small space token with the padding property is valid.", }, { + code: ".a { grid-gap: var(--space-small); }", + description: + "Using the small space token with the grid-gap property is valid.", + }, + { + code: ".a { grid-row-gap: var(--space-small); }", + description: + "Using the small space token with the grid-row-gap property is valid.", + }, + { + code: ".a { grid-column-gap: var(--space-small); }", + description: + "Using the small space token with the grid-column-gap property is valid.", + }, + { + code: ".a { inset-block: var(--space-small); }", + description: + "Using space tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-block-start: var(--space-small); }", + description: + "Using space tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-block-end: var(--space-medium); }", + description: + "Using space tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-inline: var(--space-xsmall) var(--space-large); }", + description: + "Using space tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-inline-start: var(--space-small); }", + description: + "Using space tokens with inset longhand properties is valid.", + }, + { + code: ".a { inset-inline-end: var(--space-medium); }", + description: + "Using space tokens with inset longhand properties is valid.", + }, + { + code: ".a { top: var(--space-small); }", + description: + "Using space tokens with top/right/bottom/left properties is valid.", + }, + { + code: ".a { right: var(--space-small); }", + description: + "Using space tokens with top/right/bottom/left properties is valid.", + }, + { + code: ".a { bottom: var(--space-small); }", + description: + "Using space tokens with top/right/bottom/left properties is valid.", + }, + { + code: ".a { left: var(--space-small); }", + description: + "Using space tokens with top/right/bottom/left properties is valid.", + }, + { + code: ".a { background-position: bottom var(--space-small) right var(--space-medium); }", + description: + "Using space tokens with background-position properties is valid.", + }, + { + code: ".a { background-position-x: var(--space-small); }", + description: + "Using space tokens with background-position properties is valid.", + }, + { + code: ".a { background-position-y: var(--space-small); }", + description: + "Using space tokens with background-position properties is valid.", + }, + { code: ".a { color: var(--text-color); }", description: "Using the text color token with the color property is valid.", @@ -140,6 +279,24 @@ testRule({ description: "Using the canvas background color token with the background-color property, the text color token with the color property, and the border color token with the border shorthand property are valid.", }, + { + code: ".a { outline-offset: var(--focus-outline-inset); }", + description: + "Using a focus outline token with the outline-offset property is valid.", + }, + { + code: ".a { outline-offset: var(--link-focus-outline-offset); }", + description: + "Using a link focus outline token with the outline-offset property is valid.", + }, + { + code: ".a { border: var(--focus-outline); }", + description: "Using outline tokens for border properties is valid.", + }, + { + code: ".a { border-color: var(--focus-outline-color); }", + description: "Using outline tokens for border properties is valid.", + }, ], reject: [ { @@ -162,9 +319,9 @@ testRule({ }, { code: ` - :root { --local-background-color: var(--border-color); } - .a { background: var(--local-background-color); } - `, + :root { --local-background-color: var(--border-color); } + .a { background: var(--local-background-color); } + `, message: messages.rejected("var(--border-color)"), description: "Unexpected usage of `var(--border-color)`. Design tokens should only be used with properties matching their semantic meaning.",