commit cf00616c024702c59975fb9e79ed70c07140dbe1 parent 18562c963ce4af8dbf8ec98ab7f0e3178b8fde1b Author: Jon Oliver <jooliver@mozilla.com> Date: Thu, 11 Dec 2025 21:01:07 +0000 Bug 1994263: consolidate use-font-weight-tokens stylelint rule with use-design-tokens rule r=mstriemer,frontend-codestyle-reviewers - converts use-font-weight-tokens rule to be configured via use-design-tokens rule - updates tests and documentation for font-weight portion of use-design-tokens rule - updates to allow normal keyword for font-weight - updates .stylelintrc.js to exclude additional file paths from design token rules Differential Revision: https://phabricator.services.mozilla.com/D273583 Diffstat:
10 files changed, 569 insertions(+), 772 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js @@ -278,7 +278,6 @@ module.exports = { "stylelint-plugin-mozilla/use-background-color-tokens": true, "stylelint-plugin-mozilla/use-border-color-tokens": true, "stylelint-plugin-mozilla/use-border-radius-tokens": true, - "stylelint-plugin-mozilla/use-font-weight-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, @@ -395,6 +394,8 @@ module.exports = { { name: "design-token-rules-off", files: [ + // CSS files under browser/branding do not use design tokens + "browser/branding/**", // CSS files under browser/components/extensions are not using design tokens "browser/components/extensions/**", // Webcompat interventions are not expected to use design tokens @@ -410,6 +411,12 @@ module.exports = { "mobile/android/**", // Docs do not use design tokens "docs/**", + // DOM does not use design tokens + "dom/**", + // Layouts do not use design tokens + "layout/**", + // Testing does not use design tokens + "testing/**", // UA Widgets should not use design tokens "toolkit/themes/shared/media/pipToggle.css", "toolkit/themes/shared/media/videocontrols.css", @@ -426,7 +433,6 @@ module.exports = { "stylelint-plugin-mozilla/use-background-color-tokens": null, "stylelint-plugin-mozilla/use-border-color-tokens": null, "stylelint-plugin-mozilla/use-border-radius-tokens": null, - "stylelint-plugin-mozilla/use-font-weight-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, diff --git a/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-design-tokens/font-weight.rst b/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-design-tokens/font-weight.rst @@ -0,0 +1,217 @@ +=========== +font-weight +=========== + +The ``use-design-tokens`` rule checks that CSS ``font-weight`` declarations use +design token variables instead of hardcoded values. This ensures consistent +font-weight usage across the application and makes it easier to maintain design +system consistency. + +This rule is autofixable and can automatically replace some font-weight values +with appropriate design tokens where possible. + +Examples of incorrect code for this rule: +----------------------------------------- + +.. code-block:: css + + .bold-text { + font-weight: bold; + } + +.. code-block:: css + + .bolder-text { + font-weight: bolder; + } + +.. code-block:: css + + .lighter-text { + font-weight: lighter; + } + +.. code-block:: css + + .custom-text { + font-weight: 400; + } + +.. code-block:: css + + .heading { + font-weight: 600; + } + +.. code-block:: css + + .bold-text { + font-weight: 700; + } + +.. code-block:: css + + .light-text { + font-weight: 300; + } + +.. code-block:: css + + .heavy-text { + font-weight: 900; + } + +Examples of correct token usage for this rule: +---------------------------------------------- + +.. code-block:: css + + .normal-text { + font-weight: var(--font-weight); + } + +.. code-block:: css + + .semibold-text { + font-weight: var(--font-weight-semibold); + } + +.. code-block:: css + + .bold-text { + font-weight: var(--font-weight-bold); + } + +.. code-block:: css + + .button-text { + font-weight: var(--button-font-weight); + } + +.. code-block:: css + + .heading-text { + font-weight: var(--heading-font-weight); + } + +.. code-block:: css + + /* Local CSS variables that reference valid font-weight keywords are allowed */ + :root { + --custom-font-weight: normal; + } + + .custom-text { + font-weight: var(--custom-font-weight); + } + +.. code-block:: css + + /* Local CSS variables that reference valid font-weight tokens are allowed */ + :root { + --custom-font-weight: var(--font-weight-semibold); + } + + .custom-text { + font-weight: var(--custom-font-weight); + } + +.. code-block:: css + + .custom-text { + font-weight: var(--custom-font-weight, var(--font-weight-semibold)); + } + +The rule also allows these non-token values: + +.. code-block:: css + + .normal-text { + font-weight: normal; + } + +.. code-block:: css + + .inherited-text { + font-weight: inherit; + } + +.. code-block:: css + + .initial-text { + font-weight: initial; + } + +.. code-block:: css + + .revert-text { + font-weight: revert; + } + +.. code-block:: css + + .revert-layer-text { + font-weight: revert-layer; + } + +.. code-block:: css + + .unset-text { + font-weight: unset; + } + +Autofix functionality +--------------------- + +This rule can automatically fix some violations by replacing values with +appropriate design tokens: + +- ``200`` → ``normal`` +- ``300`` → ``normal`` +- ``400`` → ``normal`` +- ``lighter`` → ``normal`` +- ``500`` → ``var(--font-weight-semibold)`` +- ``510`` → ``var(--font-weight-semibold)`` +- ``600`` → ``var(--font-weight-semibold)`` +- ``700`` → ``var(--font-weight-bold)`` +- ``800`` → ``var(--font-weight-bold)`` +- ``bold`` → ``var(--font-weight-bold)`` +- ``bolder`` → ``var(--font-weight-bold)`` + +Examples of autofixable violations: + +.. code-block:: css + + /* Before */ + .normal-text { + font-weight: 400; + } + + /* After autofix */ + .normal-text { + font-weight: normal; + } + +.. code-block:: css + + /* Before */ + .semibold-text { + font-weight: 600; + } + + /* After autofix */ + .semibold-text { + font-weight: var(--font-weight-semibold); + } + +.. code-block:: css + + /* Before */ + .bold-text { + font-weight: 700; + } + + /* After autofix */ + .bold-text { + font-weight: var(--font-weight-bold); + } diff --git a/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-font-weight-tokens.rst b/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-font-weight-tokens.rst @@ -1,194 +0,0 @@ -======================== -use-font-weight-tokens -======================== - -This rule checks that CSS declarations use font-weight design token variables -instead of hardcoded values. This ensures consistent font-weight usage across -the application and makes it easier to maintain design system consistency. - -This rule is autofixable and can automatically replace some font-weight values -with appropriate design tokens where possible. - -Examples of incorrect code for this rule: ------------------------------------------ - -.. code-block:: css - - .normal-text { - font-weight: normal; - } - -.. code-block:: css - - .bold-text { - font-weight: bold; - } - -.. code-block:: css - - .bolder-text { - font-weight: bolder; - } - -.. code-block:: css - - .lighter-text { - font-weight: lighter; - } - -.. code-block:: css - - .custom-text { - font-weight: 400; - } - -.. code-block:: css - - .heading { - font-weight: 600; - } - -.. code-block:: css - - .bold-text { - font-weight: 700; - } - -.. code-block:: css - - .light-text { - font-weight: 300; - } - -.. code-block:: css - - .heavy-text { - font-weight: 900; - } - -Examples of correct token usage for this rule: ----------------------------------------------- - -.. code-block:: css - - .normal-text { - font-weight: var(--font-weight); - } - -.. code-block:: css - - .semibold-text { - font-weight: var(--font-weight-semibold); - } - -.. code-block:: css - - .bold-text { - font-weight: var(--font-weight-bold); - } - -.. code-block:: css - - .button-text { - font-weight: var(--button-font-weight); - } - -.. code-block:: css - - .heading-text { - font-weight: var(--heading-font-weight); - } - -.. code-block:: css - - /* Local CSS variables that reference valid font-weight tokens are allowed */ - :root { - --custom-font-weight: var(--font-weight-semibold); - } - - .custom-text { - font-weight: var(--custom-font-weight); - } - -.. code-block:: css - - .custom-text { - font-weight: var(--custom-font-weight, var(--font-weight-semibold)); - } - -The rule also allows these non-token values: - -.. code-block:: css - - .inherited-text { - font-weight: inherit; - } - -.. code-block:: css - - .initial-text { - font-weight: initial; - } - -.. code-block:: css - - .unset-text { - font-weight: unset; - } - -Autofix functionality ---------------------- - -This rule can automatically fix some violations by replacing values with -appropriate design tokens: - -- ``200`` → ``var(--font-weight)`` -- ``300`` → ``var(--font-weight)`` -- ``400`` → ``var(--font-weight)`` -- ``lighter`` → ``var(--font-weight)`` -- ``normal`` → ``var(--font-weight)`` -- ``500`` → ``var(--font-weight-semibold)`` -- ``510`` → ``var(--font-weight-semibold)`` -- ``600`` → ``var(--font-weight-semibold)`` -- ``700`` → ``var(--font-weight-bold)`` -- ``800`` → ``var(--font-weight-bold)`` -- ``bold`` → ``var(--font-weight-bold)`` -- ``bolder`` → ``var(--font-weight-bold)`` - -Examples of autofixable violations: - -.. code-block:: css - - /* Before */ - .normal-text { - font-weight: normal; - } - - /* After autofix */ - .normal-text { - font-weight: var(--font-weight); - } - -.. code-block:: css - - /* Before */ - .semibold-text { - font-weight: 600; - } - - /* After autofix */ - .semibold-text { - font-weight: var(--font-weight-semibold); - } - -.. code-block:: css - - /* Before */ - .bold-text { - font-weight: 700; - } - - /* After autofix */ - .bold-text { - font-weight: var(--font-weight-bold); - } diff --git a/stylelint-rollouts.config.js b/stylelint-rollouts.config.js @@ -19,15 +19,6 @@ module.exports = [ files: [ "browser/base/content/aboutDialog.css", "browser/base/content/pageinfo/pageInfo.css", - "browser/branding/aurora/stubinstaller/installing_page.css", - "browser/branding/aurora/stubinstaller/profile_cleanup_page.css", - "browser/branding/nightly/stubinstaller/installing_page.css", - "browser/branding/nightly/stubinstaller/profile_cleanup_page.css", - "browser/branding/official/stubinstaller/installing_page.css", - "browser/branding/official/stubinstaller/profile_cleanup_page.css", - "browser/branding/unofficial/content/aboutDialog.css", - "browser/branding/unofficial/stubinstaller/installing_page.css", - "browser/branding/unofficial/stubinstaller/profile_cleanup_page.css", "browser/components/aboutlogins/content/aboutLogins.css", "browser/components/aboutlogins/content/aboutLoginsImportReport.css", "browser/components/aboutlogins/content/components/confirmation-dialog.css", @@ -205,20 +196,8 @@ module.exports = [ "devtools/client/aboutdebugging/src/components/sidebar/SidebarFixedItem.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarRuntimeItem.css", - "dom/events/test/pointerevents/wpt/pointerevent_styles.css", - "dom/xml/test/old/books/classic.css", - "dom/xml/test/old/books/common.css", "gfx/layers/apz/test/mochitest/helper_subframe_style.css", - "layout/generic/test/frame_selection_underline.css", - "layout/style/res/forms.css", - "layout/style/res/html.css", - "layout/style/res/scrollbars.css", "security/manager/pki/resources/content/certManager.css", - "testing/marionette/harness/marionette_harness/tests/unit/assets/chrome/style.css", - "testing/mochitest/static/harness.css", - "testing/mozbase/mozlog/mozlog/formatters/html/style.css", - "testing/talos/talos/tests/scroll/reader.css", - "testing/talos/talos/tests/tart/addon/content/tab-min-width-1px.css", "toolkit/components/aboutcheckerboard/content/aboutCheckerboard.css", "toolkit/components/aboutconfig/content/aboutconfig.css", "toolkit/components/aboutinference/content/aboutInference.css", @@ -292,7 +271,6 @@ module.exports = [ "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", @@ -324,18 +302,6 @@ module.exports = [ "browser/base/content/aboutDialog.css", "browser/base/content/pageinfo/pageInfo.css", "browser/base/content/sanitizeDialog.css", - "browser/branding/aurora/content/aboutDialog.css", - "browser/branding/aurora/stubinstaller/installing_page.css", - "browser/branding/aurora/stubinstaller/profile_cleanup_page.css", - "browser/branding/nightly/content/aboutDialog.css", - "browser/branding/nightly/stubinstaller/installing_page.css", - "browser/branding/nightly/stubinstaller/profile_cleanup_page.css", - "browser/branding/official/content/aboutDialog.css", - "browser/branding/official/stubinstaller/installing_page.css", - "browser/branding/official/stubinstaller/profile_cleanup_page.css", - "browser/branding/unofficial/content/aboutDialog.css", - "browser/branding/unofficial/stubinstaller/installing_page.css", - "browser/branding/unofficial/stubinstaller/profile_cleanup_page.css", "browser/components/aboutlogins/content/aboutLogins.css", "browser/components/aboutlogins/content/aboutLoginsImportReport.css", "browser/components/aboutlogins/content/components/confirmation-dialog.css", @@ -527,31 +493,10 @@ module.exports = [ "devtools/client/aboutdebugging/src/components/sidebar/SidebarFixedItem.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarRuntimeItem.css", - "dom/crypto/test/test_WebCrypto.css", - "dom/events/test/pointerevents/wpt/pointerevent_styles.css", - "dom/tests/mochitest/webcomponents/inert_style.css", - "dom/xml/resources/XMLPrettyPrint.css", - "dom/xml/test/old/books/classic.css", - "dom/xml/test/old/books/common.css", - "dom/xml/test/old/books/list.css", - "dom/xml/test/old/xlink/link.css", - "dom/xml/test/old/xmlbase/xmlbase.css", "gfx/layers/apz/test/mochitest/helper_subframe_style.css", - "layout/generic/test/frame_selection_underline.css", - "layout/inspector/tests/chrome/test_bug727834.css", - "layout/mathml/mathml.css", - "layout/style/res/accessiblecaret.css", - "layout/style/res/forms.css", - "layout/style/res/html.css", - "layout/style/res/quirk.css", - "layout/style/res/ua.css", - "layout/style/res/viewsource.css", "security/manager/pki/resources/content/clientauthask.css", "security/manager/pki/resources/content/deletecert.css", "security/manager/pki/resources/content/exceptionDialog.css", - "testing/mochitest/static/harness.css", - "testing/mozbase/mozlog/mozlog/formatters/html/style.css", - "testing/talos/talos/tests/scroll/reader.css", "toolkit/components/aboutcheckerboard/content/aboutCheckerboard.css", "toolkit/components/aboutconfig/content/aboutconfig.css", "toolkit/components/aboutinference/content/aboutInference.css", @@ -671,58 +616,6 @@ module.exports = [ ], }, { - name: "rollout-use-font-weight-tokens", - rules: { - "stylelint-plugin-mozilla/use-font-weight-tokens": null, - }, - files: [ - "browser/base/content/aboutDialog.css", - "browser/branding/aurora/stubinstaller/profile_cleanup_page.css", - "browser/branding/nightly/stubinstaller/profile_cleanup_page.css", - "browser/branding/official/stubinstaller/installing_page.css", - "browser/branding/official/stubinstaller/profile_cleanup_page.css", - "browser/branding/unofficial/stubinstaller/profile_cleanup_page.css", - "browser/components/aboutlogins/content/components/confirmation-dialog.css", - "browser/components/aboutlogins/content/components/login-alert.css", - "browser/components/aboutwelcome/content-src/aboutwelcome.scss", - "browser/components/asrouter/content-src/components/ASRouterAdmin/ASRouterAdmin.scss", - "browser/components/backup/content/restore-from-backup.css", - "browser/components/backup/content/turn-on-scheduled-backups.css", - "browser/components/firefoxview/fxview-tab-row.css", - "browser/themes/shared/addon-notification.css", - "browser/themes/shared/browser-shared.css", - "browser/themes/shared/customizableui/panelUI-shared.css", - "browser/themes/shared/migration/migration-wizard.css", - "browser/themes/shared/preferences/preferences.css", - "browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css", - "browser/themes/shared/search/searchbar.css", - "browser/themes/shared/urlbar-dynamic-results.css", - "dom/crypto/test/test_WebCrypto.css", - "dom/events/test/pointerevents/wpt/pointerevent_styles.css", - "dom/xml/test/old/books/classic.css", - "dom/xml/test/old/books/common.css", - "dom/xml/test/old/books/list.css", - "dom/xml/test/old/xmlbase/xmlbase.css", - "layout/mathml/mathml.css", - "layout/style/res/forms.css", - "layout/style/res/html.css", - "layout/style/res/ua.css", - "layout/style/res/viewsource.css", - "testing/mozbase/mozlog/mozlog/formatters/html/style.css", - "toolkit/components/aboutmemory/content/aboutMemory.css", - "toolkit/components/aboutprocesses/content/aboutProcesses.css", - "toolkit/components/aboutwindowsmessages/content/aboutWindowsMessages.css", - "toolkit/content/widgets/moz-box-common.css", - "toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css", - "toolkit/mozapps/extensions/content/aboutaddons.css", - "toolkit/themes/mobile/global/aboutMemory.css", - "toolkit/themes/shared/aboutNetError.css", - "toolkit/themes/shared/aboutReader.css", - "toolkit/themes/shared/dirListing/dirListing.css", - "toolkit/themes/shared/in-content/common-shared.css", - ], - }, - { name: "rollout-use-border-radius-tokens", rules: { "stylelint-plugin-mozilla/use-border-radius-tokens": null, @@ -761,7 +654,6 @@ module.exports = [ "browser/themes/shared/urlbar-searchbar.css", "browser/themes/shared/urlbarView.css", "browser/themes/windows/downloads/allDownloadsView.css", - "layout/style/res/forms.css", "security/manager/pki/resources/content/clientauthask.css", "toolkit/components/aboutinference/content/aboutInference.css", "toolkit/components/certviewer/content/components/certificate-section.css", @@ -791,15 +683,6 @@ module.exports = [ "stylelint-plugin-mozilla/use-background-color-tokens": null, }, files: [ - "browser/branding/aurora/content/aboutDialog.css", - "browser/branding/aurora/stubinstaller/installing_page.css", - "browser/branding/nightly/content/aboutDialog.css", - "browser/branding/nightly/stubinstaller/installing_page.css", - "browser/branding/official/content/aboutDialog.css", - "browser/branding/official/stubinstaller/installing_page.css", - "browser/branding/official/stubinstaller/profile_cleanup_page.css", - "browser/branding/unofficial/content/aboutDialog.css", - "browser/branding/unofficial/stubinstaller/installing_page.css", "browser/components/aboutlogins/content/aboutLogins.css", "browser/components/aboutlogins/content/components/confirmation-dialog.css", "browser/components/aboutlogins/content/components/generic-dialog.css", @@ -912,26 +795,8 @@ module.exports = [ "devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAction.css", "devtools/client/aboutdebugging/src/components/shared/Message.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css", - "dom/base/test/file_bug498897.css", - "dom/crypto/test/test_WebCrypto.css", - "dom/events/test/pointerevents/wpt/pointerevent_styles.css", - "dom/security/test/csp/file_docwrite_meta.css", - "dom/xml/resources/XMLPrettyPrint.css", - "dom/xml/test/old/books/classic.css", "gfx/layers/layerviewer/tree.css", - "layout/inspector/tests/bug1202095.css", - "layout/mathml/mathml.css", - "layout/style/TopLevelImageDocument.css", - "layout/style/res/forms.css", - "layout/style/res/html.css", - "layout/style/res/ua.css", - "layout/style/res/viewsource.css", - "layout/style/test/file_shared_sheet_caching.css", "security/manager/ssl/tests/mochitest/mixedcontent/somestyle.css", - "testing/mochitest/static/harness.css", - "testing/mochitest/tests/SimpleTest/test.css", - "testing/mozbase/mozlog/mozlog/formatters/html/style.css", - "testing/talos/talos/tests/scroll/reader.css", "toolkit/components/aboutconfig/content/aboutconfig.css", "toolkit/components/aboutinference/content/aboutInference.css", "toolkit/components/aboutinference/content/model-files-view.css", @@ -1005,10 +870,6 @@ module.exports = [ "stylelint-plugin-mozilla/use-text-color-tokens": null, }, files: [ - "browser/branding/aurora/content/aboutDialog.css", - "browser/branding/nightly/content/aboutDialog.css", - "browser/branding/official/content/aboutDialog.css", - "browser/branding/unofficial/content/aboutDialog.css", "browser/components/aboutlogins/content/aboutLoginsImportReport.css", "browser/components/aboutlogins/content/components/import-summary-dialog.css", "browser/components/aboutlogins/content/components/login-command-button.css", @@ -1017,7 +878,6 @@ module.exports = [ "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/contextualidentity/content/usercontext.css", "browser/components/enterprisepolicies/content/aboutPolicies.css", "browser/components/firefoxview/card-container.css", "browser/components/firefoxview/firefoxview.css", @@ -1114,36 +974,7 @@ module.exports = [ "devtools/client/aboutdebugging/src/components/shared/Message.css", "devtools/client/aboutdebugging/src/components/sidebar/Sidebar.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css", - "dom/crypto/test/test_WebCrypto.css", - "dom/security/test/sri/style1.css", - "dom/security/test/sri/style3.css", - "dom/security/test/sri/style4.css", - "dom/security/test/sri/style5.css", - "dom/security/test/sri/style6.css", - "dom/security/test/sri/style_301.css", - "dom/xml/resources/XMLPrettyPrint.css", - "dom/xml/test/old/books/classic.css", - "dom/xml/test/old/books/common.css", - "dom/xml/test/old/books/list.css", - "dom/xml/test/old/xlink/link.css", - "dom/xml/test/old/xmlbase/xmlbase.css", - "layout/inspector/tests/bug1202095-2.css", - "layout/style/TopLevelImageDocument.css", - "layout/style/res/forms.css", - "layout/style/res/html.css", - "layout/style/res/ua.css", - "layout/style/res/viewsource.css", - "layout/style/test/chrome/bug535806-css.css", - "layout/style/test/file_bug1443344.css", - "layout/style/test/mapped.css", - "layout/style/test/post-redirect-1.css", - "layout/style/test/post-redirect-2.css", - "layout/style/test/post-redirect-3.css", "netwerk/test/browser/res.css", - "testing/mochitest/static/harness.css", - "testing/mochitest/tests/SimpleTest/test.css", - "testing/mozbase/mozlog/mozlog/formatters/html/style.css", - "testing/talos/talos/tests/scroll/reader.css", "toolkit/components/aboutcheckerboard/content/aboutCheckerboard.css", "toolkit/components/aboutconfig/content/aboutconfig.css", "toolkit/components/aboutinference/content/aboutInference.css", @@ -1224,10 +1055,6 @@ module.exports = [ "stylelint-plugin-mozilla/use-border-color-tokens": null, }, files: [ - "browser/branding/aurora/stubinstaller/installing_page.css", - "browser/branding/nightly/stubinstaller/installing_page.css", - "browser/branding/official/stubinstaller/installing_page.css", - "browser/branding/unofficial/stubinstaller/installing_page.css", "browser/components/aboutlogins/content/components/confirmation-dialog.css", "browser/components/aboutlogins/content/components/generic-dialog.css", "browser/components/aboutlogins/content/components/login-message-popup.css", @@ -1320,19 +1147,7 @@ module.exports = [ "devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css", "devtools/client/aboutdebugging/src/components/debugtarget/FieldPair.css", "devtools/client/aboutdebugging/src/components/shared/Message.css", - "dom/crypto/test/test_WebCrypto.css", - "dom/events/test/pointerevents/wpt/pointerevent_styles.css", - "dom/xml/resources/XMLPrettyPrint.css", - "dom/xml/test/old/books/classic.css", - "dom/xml/test/old/books/common.css", "gfx/layers/layerviewer/tree.css", - "layout/mathml/mathml.css", - "layout/style/res/forms.css", - "layout/style/res/html.css", - "layout/style/res/ua.css", - "testing/mochitest/static/harness.css", - "testing/mozbase/mozlog/mozlog/formatters/html/style.css", - "testing/talos/talos/tests/scroll/reader.css", "toolkit/components/aboutinference/content/aboutInference.css", "toolkit/components/aboutinference/content/model-files-view.css", "toolkit/components/aboutprocesses/content/aboutProcesses.css", @@ -1373,7 +1188,6 @@ module.exports = [ "toolkit/themes/shared/menulist.css", "toolkit/themes/shared/narrate.css", "toolkit/themes/shared/pictureinpicture/player.css", - "toolkit/themes/shared/popup.css", "toolkit/themes/shared/splitter.css", "toolkit/themes/shared/tabbox.css", "toolkit/themes/shared/toolbar.css", @@ -1475,14 +1289,6 @@ module.exports = [ }, files: [ "browser/base/content/aboutDialog.css", - "browser/branding/aurora/stubinstaller/installing_page.css", - "browser/branding/aurora/stubinstaller/profile_cleanup_page.css", - "browser/branding/nightly/stubinstaller/installing_page.css", - "browser/branding/nightly/stubinstaller/profile_cleanup_page.css", - "browser/branding/official/stubinstaller/installing_page.css", - "browser/branding/official/stubinstaller/profile_cleanup_page.css", - "browser/branding/unofficial/stubinstaller/installing_page.css", - "browser/branding/unofficial/stubinstaller/profile_cleanup_page.css", "browser/components/aboutlogins/content/aboutLoginsImportReport.css", "browser/components/aboutlogins/content/components/confirmation-dialog.css", "browser/components/aboutlogins/content/components/generic-dialog.css", @@ -1588,18 +1394,7 @@ module.exports = [ "devtools/client/aboutdebugging/src/components/sidebar/Sidebar.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarFixedItem.css", "devtools/client/aboutdebugging/src/components/sidebar/SidebarRuntimeItem.css", - "dom/crypto/test/test_WebCrypto.css", - "dom/xml/test/old/books/classic.css", - "dom/xml/test/old/books/common.css", - "dom/xml/test/old/books/list.css", "gfx/layers/layerviewer/tree.css", - "layout/generic/test/frame_selection_underline.css", - "layout/mathml/mathml.css", - "layout/style/res/html.css", - "layout/style/res/ua.css", - "testing/mochitest/static/harness.css", - "testing/mozbase/mozlog/mozlog/formatters/html/style.css", - "testing/talos/talos/tests/scroll/reader.css", "toolkit/components/aboutinference/content/aboutInference.css", "toolkit/components/aboutmemory/content/aboutMemory.css", "toolkit/components/aboutprocesses/content/aboutProcesses.css", diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/config.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/config.mjs @@ -4,6 +4,8 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +import { createRawValuesObject } from "./helpers.mjs"; + /** * @typedef {object} PropertyTypeConfig * @property {string[]} allow Allowed keyword values (e.g., "auto", "none", "transparent") @@ -36,6 +38,24 @@ const FontSize = { tokenTypes: ["font-size"], }; +/** @type {PropertyTypeConfig} */ +const FontWeight = { + allow: ["normal"], + tokenTypes: ["font-weight"], + customFixes: { + ...createRawValuesObject(["font-weight"]), + 200: "normal", + 300: "normal", + 400: "normal", + lighter: "normal", + 500: "var(--font-weight-semibold)", + 510: "var(--font-weight-semibold)", + 800: "var(--font-weight-bold)", + bold: "var(--font-weight-bold)", + bolder: "var(--font-weight-bold)", + }, +}; + /** * @typedef {object} PropertyConfig * @property {PropertyTypeConfig[]} validTypes Valid type configurations for this property @@ -53,4 +73,7 @@ export const propertyConfig = { "font-size": { validTypes: [FontSize], }, + "font-weight": { + validTypes: [FontWeight], + }, }; diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/helpers.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/helpers.mjs @@ -360,9 +360,15 @@ export const isValidFallback = (value, tokenCSS) => { * @param {string} value some CSS declaration to match * @param {object} cssCustomProperties * @param {string[]} tokenCSS + * @param {string[]} allowList * @returns {boolean} */ -export const isValidLocalProperty = (value, cssCustomProperties, tokenCSS) => { +export const isValidLocalProperty = ( + value, + cssCustomProperties, + tokenCSS, + allowList = ALLOW_LIST +) => { const parsed = valueParser(String(value)); let customProperty = null; @@ -380,7 +386,7 @@ export const isValidLocalProperty = (value, cssCustomProperties, tokenCSS) => { cssCustomProperties[customProperty], tokenCSS, cssCustomProperties, - ALLOW_LIST + allowList ); } return false; @@ -451,7 +457,12 @@ export const isValidTokenUsage = ( let variableNode = `var(${node.nodes[0].value})`; isValid = isToken(variableNode, tokenCSS) || - isValidLocalProperty(variableNode, cssCustomProperties, tokenCSS); + isValidLocalProperty( + variableNode, + cssCustomProperties, + tokenCSS, + allowList + ); } break; } diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/index.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/index.mjs @@ -8,7 +8,6 @@ import noBaseDesignTokens from "./no-base-design-tokens.mjs"; import noBrowserRefsInToolkit from "./no-browser-refs-in-toolkit.mjs"; import useBorderRadiusTokens from "./use-border-radius-tokens.mjs"; import useBorderColorTokens from "./use-border-color-tokens.mjs"; -import useFontWeightTokens from "./use-font-weight-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"; @@ -21,7 +20,6 @@ export default { "no-browser-refs-in-toolkit": noBrowserRefsInToolkit, "use-border-radius-tokens": useBorderRadiusTokens, "use-border-color-tokens": useBorderColorTokens, - "use-font-weight-tokens": useFontWeightTokens, "use-space-tokens": useSpaceTokens, "use-background-color-tokens": useBackgroundColorTokens, "use-text-color-tokens": useTextColorTokens, diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-font-weight-tokens.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-font-weight-tokens.mjs @@ -1,110 +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 { - createTokenNamesArray, - createAllowList, - createRawValuesObject, - getLocalCustomProperties, - isValidTokenUsage, - namespace, -} from "../helpers.mjs"; - -const { - utils: { report, ruleMessages, validateOptions }, -} = stylelint; - -const ruleName = namespace("use-font-weight-tokens"); - -const messages = ruleMessages(ruleName, { - rejected: value => `${value} should use a font-weight design token.`, -}); - -const meta = { - url: "https://firefox-source-docs.mozilla.org/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-font-weight-tokens.html", - fixable: true, -}; - -const PROPERTY_NAME = "font-weight"; - -const tokenCSS = createTokenNamesArray([PROPERTY_NAME]); - -const ALLOW_LIST = createAllowList(); - -const tokenFixMap = { - ...createRawValuesObject([PROPERTY_NAME]), - 200: "var(--font-weight)", - 300: "var(--font-weight)", - 400: "var(--font-weight)", - lighter: "var(--font-weight)", - 500: "var(--font-weight-semibold)", - 510: "var(--font-weight-semibold)", - 800: "var(--font-weight-bold)", - bold: "var(--font-weight-bold)", - bolder: "var(--font-weight-bold)", -}; - -const ruleFunction = primaryOption => { - return (root, result) => { - const validOptions = validateOptions(result, ruleName, { - actual: primaryOption, - possible: [true], - }); - - if (!validOptions) { - return; - } - - const cssCustomProperties = getLocalCustomProperties(root); - - root.walkDecls(declarations => { - // ignore properties other than font-weight - if (declarations.prop !== PROPERTY_NAME) { - return; - } - - if ( - isValidTokenUsage( - declarations.value, - tokenCSS, - cssCustomProperties, - ALLOW_LIST - ) - ) { - 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 = tokenFixMap[node.value.trim()]; - 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.font-weight.tests.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-design-tokens.font-weight.tests.mjs @@ -0,0 +1,307 @@ +/** + * 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/. + */ + +// 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 { font-weight: normal; }", + description: "Using the normal keyword is valid.", + }, + { + code: ".a { font-weight: normal; }", + description: "Using the normal keyword is valid.", + }, + { + code: ".a { font-weight: var(--font-weight); }", + description: "Using font-weight token is valid.", + }, + { + code: ".a { font-weight: var(--font-weight-semibold); }", + description: "Using font-weight-semibold token is valid.", + }, + { + code: ".a { font-weight: var(--font-weight-bold); }", + description: "Using font-weight-bold token is valid.", + }, + { + code: ".a { font-weight: var(--button-font-weight); }", + description: "Using button-font-weight token is valid.", + }, + { + code: ".a { font-weight: var(--heading-font-weight); }", + description: "Using heading-font-weight token is valid.", + }, + { + code: ".a { font-weight: inherit; }", + description: "Using inherit is valid.", + }, + { + code: ".a { font-weight: initial; }", + description: "Using initial is valid.", + }, + { + code: ".a { font-weight: unset; }", + description: "Using unset is valid.", + }, + { + code: ".a { font-weight:var(--my-local, var(--font-weight-semibold)); }", + description: + "Using a custom property with fallback to design token is valid.", + }, + { + code: ` + :root { --custom-token: var(--font-weight-semibold); } + .a { font-weight: var(--custom-token); } + `, + description: + "Using a custom property with fallback to a design token is valid.", + }, + { + code: ` + :root { --custom-token: normal; } + .a { font-weight: var(--custom-token); } + `, + description: + "Using a custom property with fallback to the normal keyword is valid.", + }, + ], + + reject: [ + { + code: ".a { font-weight: bold; }", + message: messages.rejected( + "bold", + ["font-weight"], + "var(--font-weight-bold)" + ), + description: "Using bold keyword should use a design token.", + }, + { + code: ".a { font-weight: bolder; }", + message: messages.rejected( + "bolder", + ["font-weight"], + "var(--font-weight-bold)" + ), + description: "Using bolder keyword should use a design token.", + }, + { + code: ".a { font-weight: 100; }", + message: messages.rejected("100", ["font-weight"]), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: 200; }", + message: messages.rejected("200", ["font-weight"], "normal"), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: 300; }", + message: messages.rejected("300", ["font-weight"], "normal"), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: 400; }", + message: messages.rejected("400", ["font-weight"], "normal"), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: 500; }", + message: messages.rejected( + "500", + ["font-weight"], + "var(--font-weight-semibold)" + ), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: 600; }", + message: messages.rejected( + "600", + ["font-weight"], + "var(--font-weight-semibold)" + ), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: 700; }", + message: messages.rejected( + "700", + ["font-weight"], + "var(--font-weight-bold)" + ), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: 800; }", + message: messages.rejected( + "800", + ["font-weight"], + "var(--font-weight-bold)" + ), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: 900; }", + message: messages.rejected("900", ["font-weight"]), + description: "Using a numeric value should use a design token.", + }, + { + code: ".a { font-weight: calc(var(--my-local) + 100); }", + message: messages.rejected("calc(var(--my-local) + 100)", [ + "font-weight", + ]), + description: + "Using a calc() with custom variables should use a design token.", + }, + { + code: ".a { font-weight: var(--random-token, 600); }", + message: messages.rejected( + "var(--random-token, 600)", + ["font-weight"], + "var(--random-token, var(--font-weight-semibold))" + ), + description: "Using a custom property should use a design token.", + }, + { + code: ` + :root { --custom-token: 600; } + .a { font-weight: var(--custom-token); } + `, + message: messages.rejected("var(--custom-token)", ["font-weight"]), + description: + "Using a custom property that does not resolve to a design token should use a design token.", + }, + ], +}); + +testRule({ + plugins: [plugin], + ruleName, + config: true, + fix: true, + reject: [ + { + code: ".a { font-weight: 600; }", + fixed: ".a { font-weight: var(--font-weight-semibold); }", + message: messages.rejected( + "600", + ["font-weight"], + "var(--font-weight-semibold)" + ), + description: "Numeric value should be fixed to use design token.", + }, + { + code: ".a { font-weight: 700; }", + fixed: ".a { font-weight: var(--font-weight-bold); }", + message: messages.rejected( + "700", + ["font-weight"], + "var(--font-weight-bold)" + ), + description: "Numeric value should be fixed to use design token.", + }, + { + code: ".a { font-weight: 200; }", + fixed: ".a { font-weight: normal; }", + message: messages.rejected("200", ["font-weight"], "normal"), + description: + "Numeric values less than or equal to 400 should be fixed to use normal.", + }, + { + code: ".a { font-weight: 300; }", + fixed: ".a { font-weight: normal; }", + message: messages.rejected("300", ["font-weight"], "normal"), + description: + "Numeric values less than or equal to 400 should be fixed to use normal.", + }, + { + code: ".a { font-weight: 400; }", + fixed: ".a { font-weight: normal; }", + message: messages.rejected("400", ["font-weight"], "normal"), + description: + "Numeric values less than or equal to 400 should be fixed to use normal.", + }, + { + code: ".a { font-weight: lighter; }", + fixed: ".a { font-weight: normal; }", + message: messages.rejected("lighter", ["font-weight"], "normal"), + description: "The lighter keyword should be fixed to use normal.", + }, + { + code: ".a { font-weight: 500; }", + fixed: ".a { font-weight: var(--font-weight-semibold); }", + message: messages.rejected( + "500", + ["font-weight"], + "var(--font-weight-semibold)" + ), + description: + "Numeric values between 500 and 600 should be fixed to use the semibold font-weight token.", + }, + { + code: ".a { font-weight: 510; }", + fixed: ".a { font-weight: var(--font-weight-semibold); }", + message: messages.rejected( + "510", + ["font-weight"], + "var(--font-weight-semibold)" + ), + description: + "Numeric values between 500 and 600 should be fixed to use the semibold font-weight token.", + }, + { + code: ".a { font-weight: 800; }", + fixed: ".a { font-weight: var(--font-weight-bold); }", + message: messages.rejected( + "800", + ["font-weight"], + "var(--font-weight-bold)" + ), + description: + "Numeric values greater than 700 should be fixed to use the bold font-weight token.", + }, + { + code: ".a { font-weight: bold; }", + fixed: ".a { font-weight: var(--font-weight-bold); }", + message: messages.rejected( + "bold", + ["font-weight"], + "var(--font-weight-bold)" + ), + description: + "The bold keyword should be fixed to use the bold font-weight token.", + }, + { + code: ".a { font-weight: bolder; }", + fixed: ".a { font-weight: var(--font-weight-bold); }", + message: messages.rejected( + "bolder", + ["font-weight"], + "var(--font-weight-bold)" + ), + description: + "The bolder keyword should be fixed to use the bold font-weight token.", + }, + ], +}); diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-font-weight-tokens.tests.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-font-weight-tokens.tests.mjs @@ -1,256 +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/. - */ - -// 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 useFontWeightTokens from "../rules/use-font-weight-tokens.mjs"; - -let plugin = stylelint.createPlugin( - useFontWeightTokens.ruleName, - useFontWeightTokens -); -let { - ruleName, - rule: { messages }, -} = plugin; - -testRule({ - plugins: [plugin], - ruleName, - config: [true, { tokenType: "brand" }], - fix: false, - accept: [ - // allowed token values - { - code: ".a { font-weight: var(--font-weight); }", - description: "Using font-weight token is valid.", - }, - { - code: ".a { font-weight: var(--font-weight-semibold); }", - description: "Using font-weight-semibold token is valid.", - }, - { - code: ".a { font-weight: var(--font-weight-bold); }", - description: "Using font-weight-bold token is valid.", - }, - { - code: ".a { font-weight: var(--button-font-weight); }", - description: "Using button-font-weight token is valid.", - }, - { - code: ".a { font-weight: var(--heading-font-weight); }", - description: "Using heading-font-weight token is valid.", - }, - // allowed CSS values - { - code: ".a { font-weight: inherit; }", - description: "Using inherit is valid.", - }, - { - code: ".a { font-weight: initial; }", - description: "Using initial is valid.", - }, - { - code: ".a { font-weight: unset; }", - description: "Using unset is valid.", - }, - { - code: ".a { font-weight:var(--my-local, var(--font-weight-semibold)); }", - description: - "Using a custom property with fallback to design token is valid.", - }, - { - code: ` - :root { --custom-token: var(--font-weight-semibold); } - .a { font-weight: var(--custom-token); } - `, - description: - "Using a custom property with fallback to a design token is valid.", - }, - ], - - reject: [ - { - code: ".a { font-weight: normal; }", - message: messages.rejected("normal"), - description: "Using normal keyword should use a design token.", - }, - { - code: ".a { font-weight: bold; }", - message: messages.rejected("bold"), - description: "Using bold keyword should use a design token.", - }, - { - code: ".a { font-weight: bolder; }", - message: messages.rejected("bolder"), - description: "Using bolder keyword should use a design token.", - }, - { - code: ".a { font-weight: lighter; }", - message: messages.rejected("lighter"), - description: "Using lighter keyword should use a design token.", - }, - { - code: ".a { font-weight: 100; }", - message: messages.rejected("100"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: 200; }", - message: messages.rejected("200"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: 300; }", - message: messages.rejected("300"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: 400; }", - message: messages.rejected("400"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: 500; }", - message: messages.rejected("500"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: 600; }", - message: messages.rejected("600"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: 700; }", - message: messages.rejected("700"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: 800; }", - message: messages.rejected("800"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: 900; }", - message: messages.rejected("900"), - description: "Using a numeric value should use a design token.", - }, - { - code: ".a { font-weight: calc(var(--my-local) + 100); }", - message: messages.rejected("calc(var(--my-local) + 100)"), - description: - "Using a calc() with custom variables should use a design token.", - }, - { - code: ".a { font-weight: var(--random-token, 600); }", - message: messages.rejected("var(--random-token, 600)"), - description: "Using a custom property should use a design token.", - }, - { - code: ` - :root { --custom-token: 600; } - .a { font-weight: var(--custom-token); } - `, - message: messages.rejected("var(--custom-token)"), - description: - "Using a custom property that does not resolve to a design token should use a design token.", - }, - ], -}); - -// autofix tests -testRule({ - plugins: [plugin], - ruleName, - config: [true, { tokenType: "brand" }], - fix: true, - reject: [ - { - code: ".a { font-weight: normal; }", - fixed: ".a { font-weight: var(--font-weight); }", - message: messages.rejected("normal"), - description: "Normal keyword should be fixed to use design token.", - }, - { - code: ".a { font-weight: 600; }", - fixed: ".a { font-weight: var(--font-weight-semibold); }", - message: messages.rejected("600"), - description: "Numeric value should be fixed to use design token.", - }, - { - code: ".a { font-weight: 700; }", - fixed: ".a { font-weight: var(--font-weight-bold); }", - message: messages.rejected("700"), - description: "Numeric value should be fixed to use design token.", - }, - { - code: ".a { font-weight: 200; }", - fixed: ".a { font-weight: var(--font-weight); }", - message: messages.rejected("200"), - description: - "Numeric values less than or equal to 400 should be fixed to use the base font-weight token.", - }, - { - code: ".a { font-weight: 300; }", - fixed: ".a { font-weight: var(--font-weight); }", - message: messages.rejected("300"), - description: - "Numeric values less than or equal to 400 should be fixed to use the base font-weight token.", - }, - { - code: ".a { font-weight: 400; }", - fixed: ".a { font-weight: var(--font-weight); }", - message: messages.rejected("400"), - description: - "Numeric values less than or equal to 400 should be fixed to use the base font-weight token.", - }, - { - code: ".a { font-weight: lighter; }", - fixed: ".a { font-weight: var(--font-weight); }", - message: messages.rejected("lighter"), - description: - "The lighter keyword should be fixed to use the base font-weight token.", - }, - { - code: ".a { font-weight: 500; }", - fixed: ".a { font-weight: var(--font-weight-semibold); }", - message: messages.rejected("500"), - description: - "Numeric values between 500 and 600 should be fixed to use the semibold font-weight token.", - }, - { - code: ".a { font-weight: 510; }", - fixed: ".a { font-weight: var(--font-weight-semibold); }", - message: messages.rejected("510"), - description: - "Numeric values between 500 and 600 should be fixed to use the semibold font-weight token.", - }, - { - code: ".a { font-weight: 800; }", - fixed: ".a { font-weight: var(--font-weight-bold); }", - message: messages.rejected("800"), - description: - "Numeric values greater than 700 should be fixed to use the bold font-weight token.", - }, - { - code: ".a { font-weight: bold; }", - fixed: ".a { font-weight: var(--font-weight-bold); }", - message: messages.rejected("bold"), - description: - "The bold keyword should be fixed to use the bold font-weight token.", - }, - { - code: ".a { font-weight: bolder; }", - fixed: ".a { font-weight: var(--font-weight-bold); }", - message: messages.rejected("bolder"), - description: - "The bolder keyword should be fixed to use the bold font-weight token.", - }, - ], -});