commit 22e0c5413db16d56b4fcd665c99a64e517625d98 parent cf00616c024702c59975fb9e79ed70c07140dbe1 Author: Jon Oliver <jooliver@mozilla.com> Date: Thu, 11 Dec 2025 21:01:08 +0000 Bug 1994263: consolidate use-text-color-tokens stylelint rule with use-design-tokens rule r=mstriemer,frontend-codestyle-reviewers - converts use-text-color-tokens rule to be configured via use-design-tokens rule - updates tests and documentation for color portion of use-design-tokens rule Differential Revision: https://phabricator.services.mozilla.com/D273584 Diffstat:
9 files changed, 507 insertions(+), 655 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js @@ -279,7 +279,6 @@ module.exports = { "stylelint-plugin-mozilla/use-border-color-tokens": true, "stylelint-plugin-mozilla/use-border-radius-tokens": true, "stylelint-plugin-mozilla/use-space-tokens": true, - "stylelint-plugin-mozilla/use-text-color-tokens": true, "stylelint-plugin-mozilla/no-non-semantic-token-usage": true, "stylelint-plugin-mozilla/use-size-tokens": true, }, @@ -434,7 +433,6 @@ module.exports = { "stylelint-plugin-mozilla/use-border-color-tokens": null, "stylelint-plugin-mozilla/use-border-radius-tokens": null, "stylelint-plugin-mozilla/use-space-tokens": null, - "stylelint-plugin-mozilla/use-text-color-tokens": null, "stylelint-plugin-mozilla/no-non-semantic-token-usage": null, "stylelint-plugin-mozilla/use-size-tokens": null, }, @@ -451,7 +449,6 @@ module.exports = { "stylelint-plugin-mozilla/use-border-color-tokens": true, "stylelint-plugin-mozilla/use-border-radius-tokens": true, "stylelint-plugin-mozilla/use-space-tokens": true, - "stylelint-plugin-mozilla/use-text-color-tokens": true, "stylelint-plugin-mozilla/no-non-semantic-token-usage": true, "stylelint-plugin-mozilla/use-size-tokens": true, }, diff --git a/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-design-tokens/color.rst b/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-design-tokens/color.rst @@ -0,0 +1,214 @@ +===== +color +===== + +The ``use-design-tokens`` rule checks that CSS ``color`` declarations use +design token variables instead of hardcoded values. This ensures consistent +text-color usage across the application and makes it easier to maintain design +system consistency. + +Examples of incorrect code for this rule: +----------------------------------------- + +.. code-block:: css + + .card { + color: #191919; + } + +.. code-block:: css + + .custom-button { + color: rgba(42 42 42 / 0.15); + } + +.. code-block:: css + + button:hover { + color: rgba(0 0 0 / 0.25); + } + +.. code-block:: css + + .element { + color: oklch(69% 0.19 15); + } + +.. code-block:: css + + :root { + --my-token: blue; + } + + .my-button { + color: var(--my-token, oklch(55% 0.21 15)); + } + +Examples of correct token usage for this rule: +---------------------------------------------- + +.. code-block:: css + + .card { + color: var(--text-color); + } + +.. code-block:: css + + .custom-button { + color: var(--text-color); + } + +.. code-block:: css + + button:hover { + color: var(--text-color); + } + +.. code-block:: css + + /* You may set a fallback for a token. */ + + .my-button { + color: var(--text-color, oklch(55% 0.21 15)); + } + +.. code-block:: css + + /* Local CSS variables that reference valid text-color tokens are allowed */ + + :root { + --my-token: var(--text-color); + } + + .my-button { + color: var(--my-token); + } + +The rule also allows these non-token values: + +.. code-block:: css + + .inherited-text-color { + color: inherit; + } + +.. code-block:: css + + .initial-text-color { + color: initial; + } + +.. code-block:: css + + .revert-text-color { + color: revert; + } + +.. code-block:: css + + .revert-layer-text-color { + color: revert-layer; + } + +.. code-block:: css + + .unset-text-color { + color: unset; + } + +.. code-block:: css + + .current-text-color { + color: currentColor; + } + +.. code-block:: css + + .current-text-color { + color: white; + } + +.. code-block:: css + + .current-text-color { + color: black; + } + +Autofix functionality +--------------------- + +This rule can automatically fix some violations by replacing hex color values with +appropriate color names. Examples of autofixable violations: + +.. code-block:: css + + /* Before */ + .a { + color: #fff; + } + + /* After autofix */ + .a { + color: white; + } + +.. code-block:: css + + /* Before */ + .a { + color: #ffffff; + } + + /* After autofix */ + .a { + color: white; + } + +.. code-block:: css + + /* Before */ + .a { + color: #FFF; + } + + /* After autofix */ + .a { + color: white; + } + +.. code-block:: css + + /* Before */ + .a { + color: #FFFFFF; + } + + /* After autofix */ + .a { + color: white; + } + +.. code-block:: css + + /* Before */ + .a { + color: #000; + } + + /* After autofix */ + .a { + color: black; + } + +.. code-block:: css + + /* Before */ + .a { + color: #000000; + } + + /* After autofix */ + .a { + color: black; + } diff --git a/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-text-color-tokens.rst b/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-text-color-tokens.rst @@ -1,195 +0,0 @@ -===================== -use-text-color-tokens -===================== - -This rule checks that CSS declarations use text-color design token variables -instead of hard-coded values. This ensures consistent text-color across -the application and makes it easier to maintain design system adoption. - -Examples of incorrect code for this rule: ------------------------------------------ - -.. code-block:: css - - .card { - color: #191919; - } - -.. code-block:: css - - .custom-button { - color: rgba(42 42 42 / 0.15); - } - -.. code-block:: css - - button:hover { - color: rgba(0 0 0 / 0.25); - } - -.. code-block:: css - - :root { - --my-token: blue; - } - - .my-button { - color: var(--my-token, oklch(55% 0.21 15)); - } - -Examples of correct token usage for this rule: ----------------------------------------------- - -.. code-block:: css - - .card { - color: var(--text-color); - } - -.. code-block:: css - - .custom-button { - color: var(--text-color); - } - -.. code-block:: css - - button:hover { - color: --text-color; - } - -.. code-block:: css - - /* You may set a fallback for a token. */ - - .my-button { - color: var(--text-color, oklch(55% 0.21 15)); - } - -.. code-block:: css - - /* Local CSS variables that reference valid text-color tokens are allowed */ - - :root { - --my-token: var(--text-color); - } - - .my-button { - color: var(--my-token, oklch(55% 0.21 15)); - } - -The rule also allows these values non-token values: - -.. code-block:: css - - .inherited-text-color{ - color: inherit; - } - -.. code-block:: css - - .unset-text-color { - color: unset; - } - -.. code-block:: css - - .initial-text-color { - color: initial; - } - -.. code-block:: css - - .current-text-color { - color: currentColor; - } - -.. code-block:: css - - .current-text-color { - color: white; - } - -.. code-block:: css - - .current-text-color { - color: black; - } - -Autofix functionality ---------------------- - -This rule can automatically fix some violations by replacing hex color values with -appropriate color names. Examples of autofixable violations: - -.. code-block:: css - - /* Before */ - .a { - color: #fff; - } - - /* After autofix */ - .a { - color: white; - } - -.. code-block:: css - - /* Before */ - .a { - color: #ffffff; - } - - /* After autofix */ - .a { - color: white; - } - -.. code-block:: css - - /* Before */ - .a { - color: #FFF; - } - - /* After autofix */ - .a { - color: white; - } - -.. code-block:: css - - /* Before */ - .a { - color: #FFFFFF; - } - - /* After autofix */ - .a { - color: white; - } - -.. code-block:: css - - /* Before */ - .a { - color: #000; - } - - /* After autofix */ - .a { - color: black; - } - -.. code-block:: css - - /* Before */ - .a { - color: #000000; - } - - /* After autofix */ - .a { - color: black; - } diff --git a/stylelint-rollouts.config.js b/stylelint-rollouts.config.js @@ -865,191 +865,6 @@ module.exports = [ ], }, { - name: "rollout-use-text-color-tokens", - rules: { - "stylelint-plugin-mozilla/use-text-color-tokens": null, - }, - files: [ - "browser/components/aboutlogins/content/aboutLoginsImportReport.css", - "browser/components/aboutlogins/content/components/import-summary-dialog.css", - "browser/components/aboutlogins/content/components/login-command-button.css", - "browser/components/aboutlogins/content/components/login-item.css", - "browser/components/aboutwelcome/content-src/aboutwelcome.scss", - "browser/components/asrouter/content-src/components/ASRouterAdmin/ASRouterAdmin.scss", - "browser/components/asrouter/content-src/styles/_feature-callout.scss", - "browser/components/backup/content/password-rules-tooltip.css", - "browser/components/enterprisepolicies/content/aboutPolicies.css", - "browser/components/firefoxview/card-container.css", - "browser/components/firefoxview/firefoxview.css", - "browser/components/firefoxview/fxview-empty-state.css", - "browser/components/firefoxview/fxview-tab-row.css", - "browser/components/firefoxview/opentabs-tab-row.css", - "browser/components/firefoxview/view-syncedtabs.css", - "browser/components/genai/content/link-preview-card.css", - "browser/components/preferences/widgets/nav-notice/nav-notice.css", - "browser/components/profiles/content/edit-profile-card.css", - "browser/components/profiles/content/profiles-theme-card.css", - "browser/components/protections/content/protections.css", - "browser/components/screenshots/overlay/overlay.css", - "browser/components/screenshots/screenshots-buttons.css", - "browser/components/search/content/contentSearchUI.css", - "browser/components/search/test/browser/telemetry/serp.css", - "browser/components/sidebar/sidebar-customize.css", - "browser/components/sidebar/sidebar-pins-promo.css", - "browser/components/sidebar/sidebar.css", - "browser/extensions/formautofill/skin/shared/editDialog-shared.css", - "browser/extensions/newtab/content-src/components/A11yLinkButton/_A11yLinkButton.scss", - "browser/extensions/newtab/content-src/components/Base/_Base.scss", - "browser/extensions/newtab/content-src/components/Card/_Card.scss", - "browser/extensions/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss", - "browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/AdBanner/_AdBanner.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSContextFooter/_DSContextFooter.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_DownloadMobilePromoHighlight.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/InterestPicker/_InterestPicker.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss", - "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicsWidget/_TopicsWidget.scss", - "browser/extensions/newtab/content-src/components/ErrorBoundary/_ErrorBoundary.scss", - "browser/extensions/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss", - "browser/extensions/newtab/content-src/components/Search/_Search.scss", - "browser/extensions/newtab/content-src/components/Sections/_Sections.scss", - "browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss", - "browser/extensions/newtab/content-src/components/WallpaperCategories/_WallpaperCategories.scss", - "browser/extensions/newtab/content-src/components/Weather/_Weather.scss", - "browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss", - "browser/extensions/newtab/content-src/styles/_icons.scss", - "browser/extensions/newtab/content-src/styles/activity-stream.scss", - "browser/extensions/webcompat/about-compat/aboutCompat.css", - "browser/themes/linux/browser.css", - "browser/themes/linux/places/organizer.css", - "browser/themes/osx/browser.css", - "browser/themes/osx/places/organizer.css", - "browser/themes/shared/UITour.css", - "browser/themes/shared/addons/unified-extensions.css", - "browser/themes/shared/autocomplete.css", - "browser/themes/shared/browser-shared.css", - "browser/themes/shared/controlcenter/panel.css", - "browser/themes/shared/customizableui/customizeMode.css", - "browser/themes/shared/customizableui/panelUI-shared.css", - "browser/themes/shared/downloads/downloads.inc.css", - "browser/themes/shared/formautofill-notification.css", - "browser/themes/shared/identity-block/identity-block.css", - "browser/themes/shared/migration/migration-wizard.css", - "browser/themes/shared/pageInfo.css", - "browser/themes/shared/places/sidebar.css", - "browser/themes/shared/places/tree-icons.css", - "browser/themes/shared/preferences/fxaPairDevice.css", - "browser/themes/shared/preferences/preferences.css", - "browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css", - "browser/themes/shared/search/searchbar.css", - "browser/themes/shared/setDesktopBackground.css", - "browser/themes/shared/sidebar.css", - "browser/themes/shared/syncedtabs/sidebar.css", - "browser/themes/shared/tabbrowser/content-area.css", - "browser/themes/shared/tabbrowser/ctrlTab.css", - "browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css", - "browser/themes/shared/tabbrowser/tabs.css", - "browser/themes/shared/toolbarbuttons.css", - "browser/themes/shared/urlbar-dynamic-results.css", - "browser/themes/shared/urlbar-searchbar.css", - "browser/themes/shared/urlbarView.css", - "browser/themes/shared/webRTC-indicator.css", - "browser/themes/windows/browser.css", - "browser/themes/windows/places/organizer.css", - "browser/tools/mozscreenshots/mozscreenshots/extension/lib/mozscreenshots-style.css", - "devtools/client/aboutdebugging/src/base.css", - "devtools/client/aboutdebugging/src/components/ProfilerDialog.css", - "devtools/client/aboutdebugging/src/components/connect/ConnectPage.css", - "devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css", - "devtools/client/aboutdebugging/src/components/debugtarget/FieldPair.css", - "devtools/client/aboutdebugging/src/components/shared/Message.css", - "devtools/client/aboutdebugging/src/components/sidebar/Sidebar.css", - "devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css", - "netwerk/test/browser/res.css", - "toolkit/components/aboutcheckerboard/content/aboutCheckerboard.css", - "toolkit/components/aboutconfig/content/aboutconfig.css", - "toolkit/components/aboutinference/content/aboutInference.css", - "toolkit/components/aboutinference/content/model-files-view.css", - "toolkit/components/aboutmemory/content/aboutMemory.css", - "toolkit/components/aboutprocesses/content/aboutProcesses.css", - "toolkit/components/certviewer/content/components/certificate-section.css", - "toolkit/components/certviewer/content/components/info-item.css", - "toolkit/components/certviewer/content/components/list-item.css", - "toolkit/components/extensions/test/mochitest/file_style_bad.css", - "toolkit/components/extensions/test/mochitest/file_style_good.css", - "toolkit/components/extensions/test/mochitest/file_style_redirect.css", - "toolkit/components/extensions/test/xpcshell/data/file_style_bad.css", - "toolkit/components/extensions/test/xpcshell/data/file_style_good.css", - "toolkit/components/extensions/test/xpcshell/data/file_style_redirect.css", - "toolkit/components/extensions/test/xpcshell/data/file_stylesheet_cache.css", - "toolkit/components/normandy/content/about-studies/about-studies.css", - "toolkit/components/printing/content/printPagination.css", - "toolkit/components/printing/content/printPreview.css", - "toolkit/components/satchel/megalist/content/components/login-form/login-form.css", - "toolkit/components/satchel/megalist/content/components/password-card/password-card.css", - "toolkit/components/satchel/megalist/content/megalist.css", - "toolkit/content/aboutLogging/aboutLogging.css", - "toolkit/content/aboutwebrtc/aboutWebrtc.css", - "toolkit/content/widgets/infobar.css", - "toolkit/content/widgets/moz-input-common.css", - "toolkit/content/widgets/moz-input-text/moz-input-text.css", - "toolkit/content/widgets/moz-message-bar/moz-message-bar.css", - "toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css", - "toolkit/content/xul.css", - "toolkit/crashreporter/content/crashes.css", - "toolkit/mozapps/extensions/content/aboutaddons.css", - "toolkit/mozapps/extensions/content/shortcuts.css", - "toolkit/themes/linux/global/autocomplete.css", - "toolkit/themes/linux/global/richlistbox.css", - "toolkit/themes/linux/mozapps/update/updates.css", - "toolkit/themes/mobile/global/aboutMemory.css", - "toolkit/themes/mobile/global/aboutSupport.css", - "toolkit/themes/osx/global/autocomplete.css", - "toolkit/themes/osx/global/button.css", - "toolkit/themes/osx/global/richlistbox.css", - "toolkit/themes/osx/mozapps/handling/handling.css", - "toolkit/themes/osx/mozapps/update/updates.css", - "toolkit/themes/shared/aboutReader.css", - "toolkit/themes/shared/aboutSupport.css", - "toolkit/themes/shared/alert.css", - "toolkit/themes/shared/checkbox.css", - "toolkit/themes/shared/datetimeinputpickers.css", - "toolkit/themes/shared/design-system/storybook/tokens-table.css", - "toolkit/themes/shared/dirListing/dirListing.css", - "toolkit/themes/shared/findbar.css", - "toolkit/themes/shared/global-shared.css", - "toolkit/themes/shared/in-content/common-shared.css", - "toolkit/themes/shared/in-content/info-pages.css", - "toolkit/themes/shared/menu.css", - "toolkit/themes/shared/menulist.css", - "toolkit/themes/shared/narrate.css", - "toolkit/themes/shared/pictureinpicture/player.css", - "toolkit/themes/shared/popup.css", - "toolkit/themes/shared/popupnotification.css", - "toolkit/themes/shared/radio.css", - "toolkit/themes/shared/toolbar.css", - "toolkit/themes/shared/toolbarbutton.css", - "toolkit/themes/shared/tree/tree.css", - "toolkit/themes/windows/global/autocomplete.css", - "toolkit/themes/windows/global/button.css", - "toolkit/themes/windows/global/global.css", - "toolkit/themes/windows/global/richlistbox.css", - "toolkit/themes/windows/global/wizard.css", - "toolkit/themes/windows/mozapps/handling/handling.css", - "toolkit/themes/windows/mozapps/update/updates.css", - "tools/tryselect/selectors/chooser/static/style.css", - ], - }, - { name: "rollout-use-border-color-tokens", rules: { "stylelint-plugin-mozilla/use-border-color-tokens": null, @@ -1292,7 +1107,9 @@ module.exports = [ "browser/components/aboutlogins/content/aboutLoginsImportReport.css", "browser/components/aboutlogins/content/components/confirmation-dialog.css", "browser/components/aboutlogins/content/components/generic-dialog.css", + "browser/components/aboutlogins/content/components/import-summary-dialog.css", "browser/components/aboutlogins/content/components/login-alert.css", + "browser/components/aboutlogins/content/components/login-command-button.css", "browser/components/aboutlogins/content/components/login-item.css", "browser/components/aboutlogins/content/components/login-list-lit-item.css", "browser/components/aboutlogins/content/components/login-list.css", @@ -1304,23 +1121,37 @@ module.exports = [ "browser/components/backup/content/password-rules-tooltip.css", "browser/components/backup/content/password-validation-inputs.css", "browser/components/backup/content/turn-on-scheduled-backups.css", + "browser/components/enterprisepolicies/content/aboutPolicies.css", "browser/components/firefoxview/card-container.css", + "browser/components/firefoxview/firefoxview.css", + "browser/components/firefoxview/fxview-empty-state.css", + "browser/components/firefoxview/fxview-tab-row.css", "browser/components/firefoxview/history.css", + "browser/components/firefoxview/opentabs-tab-row.css", "browser/components/firefoxview/view-syncedtabs.css", "browser/components/genai/chat.css", "browser/components/genai/content/link-preview-card.css", "browser/components/genai/content/smart-assist.css", "browser/components/messagepreview/messagepreview.css", + "browser/components/preferences/widgets/nav-notice/nav-notice.css", + "browser/components/profiles/content/edit-profile-card.css", "browser/components/profiles/content/profile-avatar-selector.css", + "browser/components/profiles/content/profiles-theme-card.css", "browser/components/protections/content/protections.css", "browser/components/screenshots/overlay/overlay.css", + "browser/components/screenshots/screenshots-buttons.css", "browser/components/search/content/contentSearchUI.css", "browser/components/search/test/browser/telemetry/serp.css", + "browser/components/sidebar/sidebar-customize.css", "browser/components/sidebar/sidebar-panel-header.css", + "browser/components/sidebar/sidebar-pins-promo.css", + "browser/components/sidebar/sidebar.css", "browser/components/urlbar/tests/browser/dynamicResult0.css", "browser/components/urlbar/tests/browser/dynamicResult1.css", "browser/extensions/formautofill/skin/shared/editAddress.css", "browser/extensions/formautofill/skin/shared/editDialog-shared.css", + "browser/extensions/newtab/content-src/components/A11yLinkButton/_A11yLinkButton.scss", + "browser/extensions/newtab/content-src/components/Base/_Base.scss", "browser/extensions/newtab/content-src/components/Card/_Card.scss", "browser/extensions/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss", "browser/extensions/newtab/content-src/components/ConfirmDialog/_ConfirmDialog.scss", @@ -1328,28 +1159,40 @@ module.exports = [ "browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss", + "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/AdBanner/_AdBanner.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss", + "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss", + "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSContextFooter/_DSContextFooter.scss", + "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_DownloadMobilePromoHighlight.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_FeatureHighlight.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_WallpaperFeatureHighlight.scss", + "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/InterestPicker/_InterestPicker.scss", + "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss", + "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss", "browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicsWidget/_TopicsWidget.scss", "browser/extensions/newtab/content-src/components/ErrorBoundary/_ErrorBoundary.scss", "browser/extensions/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss", "browser/extensions/newtab/content-src/components/Search/_Search.scss", + "browser/extensions/newtab/content-src/components/Sections/_Sections.scss", "browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss", "browser/extensions/newtab/content-src/components/WallpaperCategories/_WallpaperCategories.scss", "browser/extensions/newtab/content-src/components/Weather/_Weather.scss", + "browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss", + "browser/extensions/newtab/content-src/styles/_icons.scss", "browser/extensions/newtab/content-src/styles/_mixins.scss", "browser/extensions/newtab/content-src/styles/_variables.scss", "browser/extensions/newtab/content-src/styles/activity-stream.scss", "browser/extensions/webcompat/about-compat/aboutCompat.css", "browser/themes/linux/browser.css", + "browser/themes/linux/places/organizer.css", "browser/themes/osx/browser.css", "browser/themes/osx/customizableui/panelUI.css", + "browser/themes/osx/places/organizer.css", "browser/themes/shared/UITour.css", "browser/themes/shared/addons/unified-extensions.css", "browser/themes/shared/autocomplete.css", @@ -1360,29 +1203,37 @@ module.exports = [ "browser/themes/shared/downloads/allDownloadsView.inc.css", "browser/themes/shared/downloads/downloads.inc.css", "browser/themes/shared/formautofill-notification.css", + "browser/themes/shared/identity-block/identity-block.css", "browser/themes/shared/identity-credential-notification.css", "browser/themes/shared/migration/migration-wizard.css", "browser/themes/shared/notification-icons.css", + "browser/themes/shared/pageInfo.css", "browser/themes/shared/places/editBookmark.css", "browser/themes/shared/places/editBookmarkPanel.css", "browser/themes/shared/places/sidebar.css", + "browser/themes/shared/places/tree-icons.css", "browser/themes/shared/preferences/fxaPairDevice.css", "browser/themes/shared/preferences/preferences.css", "browser/themes/shared/preferences/privacy.css", "browser/themes/shared/preferences/siteDataSettings.css", "browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css", + "browser/themes/shared/search/searchbar.css", + "browser/themes/shared/setDesktopBackground.css", "browser/themes/shared/sidebar.css", "browser/themes/shared/syncedtabs/sidebar.css", "browser/themes/shared/tabbrowser/content-area.css", "browser/themes/shared/tabbrowser/ctrlTab.css", "browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css", "browser/themes/shared/tabbrowser/tabs.css", + "browser/themes/shared/toolbarbuttons.css", "browser/themes/shared/translations/panel.css", "browser/themes/shared/urlbar-dynamic-results.css", "browser/themes/shared/urlbar-searchbar.css", "browser/themes/shared/urlbarView.css", + "browser/themes/shared/webRTC-indicator.css", "browser/themes/windows/browser.css", "browser/themes/windows/places/organizer.css", + "browser/tools/mozscreenshots/mozscreenshots/extension/lib/mozscreenshots-style.css", "devtools/client/aboutdebugging/src/base.css", "devtools/client/aboutdebugging/src/components/App.css", "devtools/client/aboutdebugging/src/components/ProfilerDialog.css", @@ -1393,9 +1244,14 @@ module.exports = [ "devtools/client/aboutdebugging/src/components/shared/Message.css", "devtools/client/aboutdebugging/src/components/sidebar/Sidebar.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarFixedItem.css", + "devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarRuntimeItem.css", "gfx/layers/layerviewer/tree.css", + "netwerk/test/browser/res.css", + "toolkit/components/aboutcheckerboard/content/aboutCheckerboard.css", + "toolkit/components/aboutconfig/content/aboutconfig.css", "toolkit/components/aboutinference/content/aboutInference.css", + "toolkit/components/aboutinference/content/model-files-view.css", "toolkit/components/aboutmemory/content/aboutMemory.css", "toolkit/components/aboutprocesses/content/aboutProcesses.css", "toolkit/components/aboutthirdparty/content/aboutThirdParty.css", @@ -1404,34 +1260,77 @@ module.exports = [ "toolkit/components/certviewer/content/components/info-group.css", "toolkit/components/certviewer/content/components/info-item.css", "toolkit/components/certviewer/content/components/list-item.css", + "toolkit/components/extensions/test/mochitest/file_style_bad.css", + "toolkit/components/extensions/test/mochitest/file_style_good.css", + "toolkit/components/extensions/test/mochitest/file_style_redirect.css", + "toolkit/components/extensions/test/xpcshell/data/file_style_bad.css", + "toolkit/components/extensions/test/xpcshell/data/file_style_good.css", + "toolkit/components/extensions/test/xpcshell/data/file_style_redirect.css", + "toolkit/components/extensions/test/xpcshell/data/file_stylesheet_cache.css", "toolkit/components/normandy/content/about-studies/about-studies.css", + "toolkit/components/printing/content/printPagination.css", + "toolkit/components/printing/content/printPreview.css", "toolkit/components/printing/content/simplifyMode.css", + "toolkit/components/satchel/megalist/content/components/login-form/login-form.css", "toolkit/components/satchel/megalist/content/components/login-line/login-line.css", + "toolkit/components/satchel/megalist/content/components/password-card/password-card.css", + "toolkit/components/satchel/megalist/content/megalist.css", "toolkit/content/aboutLogging/aboutLogging.css", "toolkit/content/aboutMozilla.css", "toolkit/content/aboutTelemetry.css", "toolkit/content/aboutwebrtc/aboutWebrtc.css", "toolkit/content/widgets/infobar.css", + "toolkit/content/widgets/moz-input-common.css", "toolkit/content/widgets/moz-input-text/moz-input-text.css", + "toolkit/content/widgets/moz-message-bar/moz-message-bar.css", + "toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css", + "toolkit/content/xul.css", + "toolkit/crashreporter/content/crashes.css", "toolkit/mozapps/extensions/content/aboutaddons.css", "toolkit/mozapps/extensions/content/shortcuts.css", + "toolkit/themes/linux/global/autocomplete.css", + "toolkit/themes/linux/global/richlistbox.css", + "toolkit/themes/linux/mozapps/update/updates.css", "toolkit/themes/mobile/global/aboutMemory.css", + "toolkit/themes/mobile/global/aboutSupport.css", + "toolkit/themes/osx/global/autocomplete.css", + "toolkit/themes/osx/global/button.css", + "toolkit/themes/osx/global/richlistbox.css", + "toolkit/themes/osx/mozapps/handling/handling.css", + "toolkit/themes/osx/mozapps/update/updates.css", "toolkit/themes/shared/aboutHttpsOnlyError.css", "toolkit/themes/shared/aboutNetError.css", "toolkit/themes/shared/aboutReader.css", + "toolkit/themes/shared/aboutSupport.css", "toolkit/themes/shared/alert.css", + "toolkit/themes/shared/checkbox.css", "toolkit/themes/shared/datetimeinputpickers.css", + "toolkit/themes/shared/design-system/storybook/tokens-table.css", "toolkit/themes/shared/dirListing/dirListing.css", "toolkit/themes/shared/error-pages.css", "toolkit/themes/shared/findbar.css", + "toolkit/themes/shared/global-shared.css", "toolkit/themes/shared/in-content/common-shared.css", + "toolkit/themes/shared/in-content/info-pages.css", + "toolkit/themes/shared/menu.css", + "toolkit/themes/shared/menulist.css", "toolkit/themes/shared/narrate.css", "toolkit/themes/shared/offlineSupportPages.css", "toolkit/themes/shared/pictureinpicture/player.css", "toolkit/themes/shared/pictureinpicture/texttracks.css", "toolkit/themes/shared/popup.css", + "toolkit/themes/shared/popupnotification.css", + "toolkit/themes/shared/radio.css", + "toolkit/themes/shared/toolbar.css", "toolkit/themes/shared/toolbarbutton.css", "toolkit/themes/shared/tree/tree.css", + "toolkit/themes/windows/global/autocomplete.css", + "toolkit/themes/windows/global/button.css", + "toolkit/themes/windows/global/global.css", + "toolkit/themes/windows/global/richlistbox.css", + "toolkit/themes/windows/global/wizard.css", + "toolkit/themes/windows/mozapps/handling/handling.css", + "toolkit/themes/windows/mozapps/update/updates.css", "tools/tryselect/selectors/chooser/static/style.css", ], }, diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/config.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/config.mjs @@ -56,6 +56,18 @@ const FontWeight = { }, }; +/** @type {PropertyTypeConfig} */ +const TextColor = { + allow: ["currentColor", "white", "black"], + tokenTypes: ["text-color"], + customFixes: { + "#000": "black", + "#000000": "black", + "#fff": "white", + "#ffffff": "white", + }, +}; + /** * @typedef {object} PropertyConfig * @property {PropertyTypeConfig[]} validTypes Valid type configurations for this property @@ -70,6 +82,9 @@ export const propertyConfig = { validTypes: [BoxShadow], multiple: true, }, + color: { + validTypes: [TextColor], + }, "font-size": { validTypes: [FontSize], }, diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/index.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/index.mjs @@ -10,7 +10,6 @@ import useBorderRadiusTokens from "./use-border-radius-tokens.mjs"; import useBorderColorTokens from "./use-border-color-tokens.mjs"; import useSpaceTokens from "./use-space-tokens.mjs"; import useBackgroundColorTokens from "./use-background-color-tokens.mjs"; -import useTextColorTokens from "./use-text-color-tokens.mjs"; import useDesignTokens from "./use-design-tokens.mjs"; import noNonSemanticTokenUsage from "./no-non-semantic-token-usage.mjs"; import useSizeTokens from "./use-size-tokens.mjs"; @@ -22,7 +21,6 @@ export default { "use-border-color-tokens": useBorderColorTokens, "use-space-tokens": useSpaceTokens, "use-background-color-tokens": useBackgroundColorTokens, - "use-text-color-tokens": useTextColorTokens, "use-design-tokens": useDesignTokens, "no-non-semantic-token-usage": noNonSemanticTokenUsage, "use-size-tokens": useSizeTokens, diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-text-color-tokens.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-text-color-tokens.mjs @@ -1,113 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import stylelint from "stylelint"; -import valueParser from "postcss-value-parser"; -import { - namespace, - createTokenNamesArray, - isValidTokenUsage, - usesRawColors, - createAllowList, - getLocalCustomProperties, -} from "../helpers.mjs"; - -const { - utils: { report, ruleMessages, validateOptions }, -} = stylelint; - -// Name our rule, set the error message, and link to meta -const ruleName = namespace("use-text-color-tokens"); - -const messages = ruleMessages(ruleName, { - rejected: value => `${value} should use a text-color design token.`, -}); - -const meta = { - url: "https://firefox-source-docs.mozilla.org/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-text-color-tokens.html", - fixable: true, -}; - -const INCLUDE_CATEGORIES = ["text-color"]; - -const tokenCSS = createTokenNamesArray(INCLUDE_CATEGORIES); - -// Allowed text-color values in CSS -const ALLOW_LIST = createAllowList(["currentColor", "white", "black"]); - -const CSS_PROPERTIES = ["color"]; - -const VIOLATION_AUTOFIX_MAP = { - "#fff": "white", - "#ffffff": "white", - "#000": "black", - "#000000": "black", -}; - -const ruleFunction = primaryOption => { - return (root, result) => { - const validOptions = validateOptions(result, ruleName, { - actual: primaryOption, - possible: [true], - }); - - if (!validOptions) { - return; - } - - // The first time through gathers our custom properties - const cssCustomProperties = getLocalCustomProperties(root); - - // And then we validate our properties - root.walkDecls(declarations => { - // If the property is not in our list to check, skip it - if (!CSS_PROPERTIES.includes(declarations.prop)) { - return; - } - - // Otherwise, see if we are using the tokens correctly - if ( - isValidTokenUsage( - declarations.value, - tokenCSS, - cssCustomProperties, - ALLOW_LIST - ) && - !usesRawColors(declarations.value) - ) { - return; - } - - report({ - message: messages.rejected(declarations.value), - node: declarations, - result, - ruleName, - fix: () => { - const val = valueParser(declarations.value); - let hasFixes = false; - val.walk(node => { - if (node.type == "word") { - const token = - VIOLATION_AUTOFIX_MAP[node.value.trim().toLowerCase()]; - if (token) { - hasFixes = true; - node.value = token; - } - } - }); - if (hasFixes) { - declarations.value = val.toString(); - } - }, - }); - }); - }; -}; - -ruleFunction.ruleName = ruleName; -ruleFunction.messages = messages; -ruleFunction.meta = meta; - -export default ruleFunction; diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-design-tokens.color.tests.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-design-tokens.color.tests.mjs @@ -0,0 +1,194 @@ +/** + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/PL/2.0/. + */ + +// Bug 1948378: remove this exception when the eslint import plugin fully +// supports exports in package.json files +// eslint-disable-next-line import/no-unresolved +import { testRule } from "stylelint-test-rule-node"; +import stylelint from "stylelint"; +import useDesignTokens from "../rules/use-design-tokens.mjs"; + +let plugin = stylelint.createPlugin(useDesignTokens.ruleName, useDesignTokens); +let { + ruleName, + rule: { messages }, +} = plugin; + +testRule({ + plugins: [plugin], + ruleName, + config: true, + fix: false, + accept: [ + { + code: ".a { color: var(--text-color); }", + description: "Using text color token for color is valid.", + }, + { + code: ".a { color: var(--link-color); }", + description: "Using link text color token for color is valid.", + }, + { + code: ".a { color: var(--text-color, #000); }", + description: + "Using text color token with fallback value for color is valid.", + }, + { + code: ` + :root { --local-color: var(--text-color); } + .a { color: var(--local-color); } + `, + description: + "Using locally defined variable that falls back to text color token for color is valid.", + }, + { + code: ".a { color: light-dark(var(--text-color), var(--link-color)); }", + description: + "var using a text-color token inside a light-dark function is valid.", + }, + { + code: ".a { color: light-dark(color-mix(in srgb, var(--text-color) 10%, white), white); }", + description: + "color-mix using a text-color token inside a light-dark function is valid.", + }, + { + code: ".a { color: inherit; }", + description: "Using keyword for color is valid.", + }, + { + code: ".a { color: initial; }", + description: "Using keyword for color is valid.", + }, + { + code: ".a { color: revert; }", + description: "Using keyword for color is valid.", + }, + { + code: ".a { color: revert-layer; }", + description: "Using keyword for color is valid.", + }, + { + code: ".a { color: unset; }", + description: "Using keyword for color is valid.", + }, + { + code: ".a { color: currentColor; }", + description: "Using currentColor for color is valid.", + }, + ], + reject: [ + { + code: ".a { color: #000; }", + message: messages.rejected("#000", ["text-color"], "black"), + description: "#000 should use a text-color design token.", + }, + { + code: ".a { color: rgba(42 42 42 / 0.15); }", + message: messages.rejected("rgba(42 42 42 / 0.15)", ["text-color"]), + description: + "rgba(42 42 42 / 0.15) should use a text-color design token.", + }, + { + code: ".a { color: oklch(69% 0.19 15); }", + message: messages.rejected("oklch(69% 0.19 15)", ["text-color"]), + description: "oklch(69% 0.19 15) should use a text-color design token.", + }, + { + code: ".a { color: AccentColorText; }", + message: messages.rejected("AccentColorText", ["text-color"]), + description: "AccentColorText should use a text-color design token.", + }, + { + code: ".a { color: var(--random-color, #000); }", + message: messages.rejected( + "var(--random-color, #000)", + ["text-color"], + "var(--random-color, black)" + ), + description: + "var(--random-color, #000) should use a text-color design token.", + }, + { + code: ` + :root { --custom-token: #666; } + .a { color: var(--custom-token); } + `, + message: messages.rejected("var(--custom-token)", ["text-color"]), + description: "var(--custom-token) should use a text-color design token.", + }, + { + code: ".a { color: color-mix(in srgb, var(--light), var(--dark)); }", + message: messages.rejected( + "color-mix(in srgb, var(--light), var(--dark))", + ["text-color"] + ), + description: + "color-mix(in srgb, var(--light), var(--dark)) should use a text-color design token.", + }, + { + code: ".a { color: light-dark(var(--light), var(--dark)); }", + message: messages.rejected("light-dark(var(--light), var(--dark))", [ + "text-color", + ]), + description: + "var inside a light-dark function should use a text-color design token.", + }, + { + code: ".a { color: light-dark(color-mix(in srgb, var(--dark) 10%, white), white); }", + message: messages.rejected( + "light-dark(color-mix(in srgb, var(--dark) 10%, white), white)", + ["text-color"] + ), + description: + "color-mix inside a light-dark function should use a text-color design token.", + }, + ], +}); + +testRule({ + plugins: [plugin], + ruleName, + config: true, + fix: true, + reject: [ + { + code: ".a { color: #fff; }", + fixed: ".a { color: white; }", + message: messages.rejected("#fff", ["text-color"], "white"), + description: "#fff should be fixed to white.", + }, + { + code: ".a { color: #ffffff; }", + fixed: ".a { color: white; }", + message: messages.rejected("#ffffff", ["text-color"], "white"), + description: "#ffffff should be fixed to white.", + }, + { + code: ".a { color: #FFF; }", + fixed: ".a { color: white; }", + message: messages.rejected("#FFF", ["text-color"], "white"), + description: "#FFF should be fixed to white.", + }, + { + code: ".a { color: #FFFFFF; }", + fixed: ".a { color: white; }", + message: messages.rejected("#FFFFFF", ["text-color"], "white"), + description: "#FFFFFF should be fixed to white.", + }, + { + code: ".a { color: #000; }", + fixed: ".a { color: black; }", + message: messages.rejected("#000", ["text-color"], "black"), + description: "#000 should be fixed to black.", + }, + { + code: ".a { color: #000000; }", + fixed: ".a { color: black; }", + message: messages.rejected("#000000", ["text-color"], "black"), + description: "#000000 should be fixed to black.", + }, + ], +}); diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-text-color-tokens.tests.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-text-color-tokens.tests.mjs @@ -1,157 +0,0 @@ -/** - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/PL/2.0/. - */ - -// Bug 1948378: remove this exception when the eslint import plugin fully -// supports exports in package.json files -// eslint-disable-next-line import/no-unresolved -import { testRule } from "stylelint-test-rule-node"; -import stylelint from "stylelint"; -import useTextColorTokens from "../rules/use-text-color-tokens.mjs"; - -let plugin = stylelint.createPlugin( - useTextColorTokens.ruleName, - useTextColorTokens -); -let { - ruleName, - rule: { messages }, -} = plugin; - -testRule({ - plugins: [plugin], - ruleName, - config: true, - fix: false, - accept: [ - { - code: ".a { color: var(--text-color); }", - description: "Using text color token for color is valid.", - }, - { - code: ".a { color: var(--link-color); }", - description: "Using link text color token for color is valid.", - }, - { - code: ".a { color: var(--text-color, #000); }", - description: - "Using text color token with fallback value for color is valid.", - }, - { - code: ` - :root { --local-color: var(--text-color); } - .a { color: var(--local-color); } - `, - description: - "Using locally defined variable that falls back to text color token for color is valid.", - }, - { - code: ".a { color: inherit; }", - description: "Using keyword for color is valid.", - }, - { - code: ".a { color: initial; }", - description: "Using keyword for color is valid.", - }, - { - code: ".a { color: revert; }", - description: "Using keyword for color is valid.", - }, - { - code: ".a { color: revert-layer; }", - description: "Using keyword for color is valid.", - }, - { - code: ".a { color: unset; }", - description: "Using keyword for color is valid.", - }, - { - code: ".a { color: currentColor; }", - description: "Using currentColor for color is valid.", - }, - ], - reject: [ - { - code: ".a { color: #000; }", - message: messages.rejected("#000"), - description: "#000 should use a text-color design token.", - }, - { - code: ".a { color: rgba(42 42 42 / 0.15); }", - message: messages.rejected("rgba(42 42 42 / 0.15)"), - description: - "rgba(42 42 42 / 0.15) should use a text-color design token.", - }, - { - code: ".a { color: oklch(69% 0.19 15); }", - message: messages.rejected("oklch(69% 0.19 15)"), - description: "oklch(69% 0.19 15) should use a text-color design token.", - }, - { - code: ".a { color: AccentColorText; }", - message: messages.rejected("AccentColorText"), - description: "AccentColorText should use a text-color design token.", - }, - { - code: ".a { color: var(--random-color, #000); }", - message: messages.rejected("var(--random-color, #000)"), - description: - "var(--random-color, #000) should use a text-color design token.", - }, - { - code: ` - :root { --custom-token: #666; } - .a { color: var(--custom-token); } - `, - message: messages.rejected("var(--custom-token)"), - description: "var(--custom-token) should use a text-color design token.", - }, - ], -}); - -testRule({ - plugins: [plugin], - ruleName, - config: true, - fix: true, - reject: [ - { - code: ".a { color: #fff; }", - fixed: ".a { color: white; }", - message: messages.rejected("#fff"), - description: "#fff should be fixed to white.", - }, - { - code: ".a { color: #ffffff; }", - fixed: ".a { color: white; }", - message: messages.rejected("#ffffff"), - description: "#ffffff should be fixed to white.", - }, - { - code: ".a { color: #FFF; }", - fixed: ".a { color: white; }", - message: messages.rejected("#FFF"), - description: "#FFF should be fixed to white.", - }, - { - code: ".a { color: #FFFFFF; }", - fixed: ".a { color: white; }", - message: messages.rejected("#FFFFFF"), - description: "#FFFFFF should be fixed to white.", - }, - { - code: ".a { color: #000; }", - fixed: ".a { color: black; }", - message: messages.rejected("#000"), - description: "#000 should be fixed to black.", - }, - { - code: ".a { color: #000000; }", - fixed: ".a { color: black; }", - message: messages.rejected("#000000"), - description: "#000000 should be fixed to black.", - }, - ], -});