commit f91857b4742e59c433d2558f3c2cc3c62c049544 parent 5cd3b3e3c07c10b3b2f66ca9604c1c480bb1c7ea Author: dustin-jw <dwhisman@mozilla.com> Date: Mon, 27 Oct 2025 19:12:43 +0000 Bug 1988870 - Rename --font-weight-bold to --font-weight-semibold, and add more options to stylelint rule use-font-weight-tokens for handling font weights. r=desktop-theme-reviewers,tabbrowser-reviewers,omc-reviewers,frontend-codestyle-reviewers,toolkit-telemetry-reviewers,akulyk,fchasen,sthompson,Standard8,emcminn,home-newtab-reviewers,hjones,janerik,mtigley,mconley - Add semibold font-weight token for 600 - Update --font-weight-bold usage to --font-weight-semibold - Update font-weight stylelint autofix rules to normalize usage Differential Revision: https://phabricator.services.mozilla.com/D269100 Diffstat:
80 files changed, 409 insertions(+), 171 deletions(-)
diff --git a/browser/components/aboutlogins/content/components/login-intro.css b/browser/components/aboutlogins/content/components/login-intro.css @@ -14,7 +14,7 @@ section { } .description { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); margin-bottom: 0; } diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css @@ -254,12 +254,12 @@ login-command-button { .alert-date { display: block; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } .alert-link:visited, .alert-link { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; } @@ -316,7 +316,7 @@ login-command-button { .error-message-link > a:hover:active { color: currentColor; text-decoration: underline; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } .action-buttons { diff --git a/browser/components/aboutlogins/content/components/login-list.css b/browser/components/aboutlogins/content/components/login-list.css @@ -108,7 +108,7 @@ ol { position: sticky; top: 0; font-size: 0.85em; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); padding: 4px 16px; border-bottom: 1px solid var(--in-content-border-color); background-color: var(--background-color-box); @@ -137,7 +137,7 @@ ol { } .login-list-item.selected .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .labels { diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -901,7 +901,7 @@ html { h1 { color: var(--mr-screen-heading-color); - font-weight: 700; + font-weight: var(--font-weight-bold); font-size: 47px; line-height: 110%; max-width: 340px; @@ -2315,7 +2315,7 @@ html { flex-direction: column; .header-title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); line-height: 1.5; } diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css @@ -1751,7 +1751,7 @@ html { } .onboardingContainer .screen[pos=split] .section-secondary h1 { color: var(--mr-screen-heading-color); - font-weight: 700; + font-weight: var(--font-weight-bold); font-size: 47px; line-height: 110%; max-width: 340px; @@ -3115,7 +3115,7 @@ html { flex-direction: column; } .onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container .header-title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); line-height: 1.5; } .onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container .header-subtitle { diff --git a/browser/components/asrouter/content-src/components/ASRouterAdmin/ASRouterAdmin.scss b/browser/components/asrouter/content-src/components/ASRouterAdmin/ASRouterAdmin.scss @@ -443,7 +443,7 @@ .impressions-category { font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); white-space: nowrap; flex-grow: 0.1; } diff --git a/browser/components/asrouter/content/components/ASRouterAdmin/ASRouterAdmin.css b/browser/components/asrouter/content/components/ASRouterAdmin/ASRouterAdmin.css @@ -350,7 +350,7 @@ } .asrouter-admin .impressions-section .impressions-item .impressions-category { font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); white-space: nowrap; flex-grow: 0.1; } diff --git a/browser/components/asrouter/content/components/fxa-menu-message/fxa-menu-message.css b/browser/components/asrouter/content/components/fxa-menu-message/fxa-menu-message.css @@ -46,7 +46,7 @@ #primary { font-size: 1.154em; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); margin-block-end: var(--space-xsmall); } diff --git a/browser/components/backup/content/turn-on-scheduled-backups.css b/browser/components/backup/content/turn-on-scheduled-backups.css @@ -7,7 +7,6 @@ :host { --margin-inline-start-checkbox-content: calc(var(--checkbox-margin-inline) + var(--checkbox-size)); - --font-weight-heading: var(--font-weight-bold, 600); --font-size-heading: 17px; --font-size-sub-heading: 15px; --font-weight-label: var(--font-weight, normal); @@ -137,7 +136,7 @@ } #backup-turn-on-scheduled-header { - font-weight: var(--font-weight-heading); + font-weight: var(--heading-font-weight); font-size: var(--font-size-heading); text-align: start; } diff --git a/browser/components/genai/chat.css b/browser/components/genai/chat.css @@ -222,7 +222,7 @@ browser { .text { flex-direction: column; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); margin: 5px; text-align: start; } diff --git a/browser/components/genai/content/link-preview-card.css b/browser/components/genai/content/link-preview-card.css @@ -30,7 +30,7 @@ .og-card-title { color: var(--panel-color); font-size: var(--og-main-font-size); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin: 0; overflow: hidden; -webkit-line-clamp: 3; @@ -69,7 +69,7 @@ .keypoints-header { display: flex; font-size: var(--og-main-font-size); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); gap: var(--space-xs); margin: 0; user-select: none; @@ -139,7 +139,7 @@ align-items: center; display: flex; font-size: var(--og-main-font-size); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); gap: var(--space-xs); } } diff --git a/browser/components/genai/content/model-optin.css b/browser/components/genai/content/model-optin.css @@ -24,7 +24,7 @@ } .optin-heading { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); font-size: var(--font-size-xxlarge); margin: 0; } diff --git a/browser/components/ipprotection/content/ipprotection-content.css b/browser/components/ipprotection/content/ipprotection-content.css @@ -48,7 +48,7 @@ hr { --box-icon-size: var(--connection-globe-icon-size); --box-icon-fill: var(--connection-shield-color); --box-icon-stroke: var(--shield-bgcolor); - --box-label-font-weight: var(--font-weight-bold); + --box-label-font-weight: var(--font-weight-semibold); -moz-context-properties: fill, stroke; /** * moz-box-group changes the border of items based on its position in the group. @@ -110,7 +110,7 @@ hr { #location-wrapper { --box-icon-fill: currentColor; - --box-label-font-weight: var(--font-weight-bold); + --box-label-font-weight: var(--font-weight-semibold); } .vpn-bottom-content { diff --git a/browser/components/preferences/widgets/security-privacy/security-privacy-card/security-privacy-card.css b/browser/components/preferences/widgets/security-privacy/security-privacy-card/security-privacy-card.css @@ -53,7 +53,7 @@ a { #heading { font-size: var(--font-size-root); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } moz-card { diff --git a/browser/components/profiles/content/profile-avatar-selector.css b/browser/components/profiles/content/profile-avatar-selector.css @@ -75,7 +75,7 @@ align-items: center; padding-bottom: var(--space-large); border-bottom: var(--card-border); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); #back-button { margin-inline-end: auto; diff --git a/browser/components/protections/content/protections.css b/browser/components/protections/content/protections.css @@ -67,7 +67,7 @@ body[focuseddatatype="cryptominer"] { } h2 { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } #report-title { diff --git a/browser/components/security/unexpectedScriptLoad.css b/browser/components/security/unexpectedScriptLoad.css @@ -15,7 +15,7 @@ } .dialogTitle { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); text-align: center; user-select: none; flex: 1; diff --git a/browser/components/sidebar/sidebar-customize.css b/browser/components/sidebar/sidebar-customize.css @@ -62,7 +62,7 @@ .customize-extensions-heading { margin: 0; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } moz-fieldset { diff --git a/browser/components/storybook/.storybook/preview-head.html b/browser/components/storybook/.storybook/preview-head.html @@ -71,7 +71,7 @@ } & h1 { - font-weight: var(--font-weight-bold) !important; + font-weight: var(--font-weight-semibold) !important; } } @@ -82,7 +82,7 @@ h1.sb-preview-chrome-typescale { font: message-box; - font-weight: var(--font-weight-bold) !important; + font-weight: var(--heading-font-weight) !important; &.sb-preview-chrome-menu { font: menu; diff --git a/browser/components/storybook/docs/README.typography.stories.md b/browser/components/storybook/docs/README.typography.stories.md @@ -282,7 +282,7 @@ Type setting relies on design tokens for font size and font weight. </tr> <tr> <th> - <code>--font-weight-bold</code> + <code>--font-weight-semibold</code> </th> <td> <code>600</code> @@ -291,6 +291,17 @@ Type setting relies on design tokens for font size and font weight. <code>600</code> </td> </tr> + <tr> + <th> + <code>--font-weight-bold</code> + </th> + <td> + <code>700</code> + </td> + <td> + <code>700</code> + </td> + </tr> </tbody> </table> @@ -326,8 +337,8 @@ This file is imported into `common-shared.css` and `global-shared.css` so that b ```css story h1, .heading-xlarge { - font-weight: var(--font-weight-bold); - font-size: var(--font-size-xxlarge); + font-weight: var(--heading-font-weight); + font-size: var(--heading-font-size-xlarge); } ``` @@ -341,8 +352,8 @@ h1, ```css story h2, .heading-large { - font-weight: var(--font-weight-bold); - font-size: var(--font-size-xlarge); + font-weight: var(--heading-font-weight); + font-size: var(--heading-font-size-large); } ``` @@ -354,8 +365,8 @@ h2, ```css story h3, .heading-medium { - font-weight: var(--font-weight-bold); - font-size: var(--font-size-large); + font-weight: var(--heading-font-weight); + font-size: var(--heading-font-size-medium); } ``` diff --git a/browser/extensions/newtab/content-src/components/Card/_Card.scss b/browser/extensions/newtab/content-src/components/Card/_Card.scss @@ -149,7 +149,7 @@ .card-title { font-size: inherit; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); line-height: $card-text-line-height; margin: 0 0 var(--space-xxsmall); word-wrap: break-word; diff --git a/browser/extensions/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss b/browser/extensions/newtab/content-src/components/CollapsibleSection/_CollapsibleSection.scss @@ -20,7 +20,7 @@ .section-title { font-size: $section-title-font-size; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); color: var(--newtab-text-primary-color); &.grey-title { diff --git a/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss @@ -203,7 +203,7 @@ .widgets-section h2 { font-size: inherit; margin-block-start: 0; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .settings-widgets, diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss @@ -44,7 +44,7 @@ $ds-width: 936px; .ds-layout .section-title span { color: var(--newtab-contextual-text-primary-color); font-size: $section-title-font-size; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); // Contrast fix for users who have wallpapers set @include wallpaper-contrast-fix; @@ -63,7 +63,13 @@ $ds-width: 936px; a { color: var(--newtab-primary-action-background); - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); &:is(:focus, :hover) { text-decoration: none; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss @@ -412,7 +412,7 @@ .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0 var(--space-small); } @@ -539,7 +539,7 @@ .section-title { @include wallpaper-contrast-fix; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); font-size: var(--font-size-xlarge); color: var(--newtab-contextual-text-primary-color); margin-block: 0; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -261,7 +261,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); @include limit-visible-lines(3, $header-line-height, $header-font-size); margin-block: 0; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .excerpt { @@ -365,7 +365,13 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); border: none; padding: var(--space-xsmall) var(--space-large); font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); min-height: var(--size-item-large); min-width: 97px; color: var(--newtab-text-primary-color); @@ -379,7 +385,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); .cta-header { background: var(--button-background-color); font-size: var(--font-size-root); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); text-align: end; padding: var(--space-xsmall) var(--space-large); color: var(--newtab-text-primary-color); @@ -463,7 +469,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); -webkit-line-clamp: 3; font-size: var(--font-size-root); margin-block-end: var(--space-small); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .excerpt { diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss @@ -72,7 +72,7 @@ h2 { font-size: inherit; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin: 0; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss @@ -19,7 +19,7 @@ .title-text { font-size: var(--font-size-small); color: var(--newtab-text-secondary-color); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); padding-inline-end: var(--space-medium); } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup.scss @@ -5,7 +5,13 @@ position: relative; text-align: center; font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); &:hover { background: var(--newtab-element-hover-color); diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSTextPromo/_DSTextPromo.scss @@ -43,7 +43,7 @@ h3 { color: var(--newtab-text-primary-color); margin: 0; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); font-size: inherit; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_DownloadMobilePromoHighlight.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_DownloadMobilePromoHighlight.scss @@ -82,7 +82,7 @@ } .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: var(--space-small); } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_FollowSectionButtonHighlight.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_FollowSectionButtonHighlight.scss @@ -81,7 +81,7 @@ font-size: var(--font-size-small); .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block-end: var(--space-xsmall); } } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_ShortcutFeatureHighlight.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_ShortcutFeatureHighlight.scss @@ -54,7 +54,7 @@ font-size: var(--font-size-small); .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block-end: var(--space-xsmall); text-align: inherit; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_WallpaperFeatureHighlight.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_WallpaperFeatureHighlight.scss @@ -50,7 +50,7 @@ } .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: var(--space-medium); } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Highlights/_Highlights.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Highlights/_Highlights.scss @@ -29,7 +29,7 @@ .card-title { font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); line-height: $line-height; max-height: $line-height; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss @@ -3,7 +3,13 @@ .ds-navigation { color: var(--newtab-contextual-text-primary-color); font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); padding: var(--space-xsmall) 0; @media (min-width: $break-point-widest) { @@ -70,7 +76,7 @@ .ds-navigation-header { font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); display: inline-block; margin-block-end: var(--space-small); } @@ -124,7 +130,13 @@ border-top: $border-primary; line-height: 24px; font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); &::after { content: ''; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/_PersonalizedCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PersonalizedCard/_PersonalizedCard.scss @@ -38,7 +38,7 @@ h2 { font-size: var(--font-size-xxlarge); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .personalized-card-link { diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PrivacyLink/_PrivacyLink.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PrivacyLink/_PrivacyLink.scss @@ -1,7 +1,13 @@ .ds-privacy-link { text-align: center; font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); a:hover { text-decoration: none; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss @@ -12,7 +12,7 @@ .promo-card-title { display: block; font-size: var(--font-size-medium); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: var(--space-medium); &::before { diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss @@ -50,7 +50,7 @@ .title { text-align: center; font-size: var(--font-size-xlarge); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block-end: var(--space-small); } diff --git a/browser/extensions/newtab/content-src/components/Sections/_Sections.scss b/browser/extensions/newtab/content-src/components/Sections/_Sections.scss @@ -64,7 +64,13 @@ a { color: var(--newtab-primary-action-background); - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); &.more-recommendations { font-weight: var(--font-weight); diff --git a/browser/extensions/newtab/content-src/components/Weather/_Weather.scss b/browser/extensions/newtab/content-src/components/Weather/_Weather.scss @@ -312,7 +312,7 @@ h3 { font-size: var(--button-font-size); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0 var(--space-medium); } @@ -514,7 +514,13 @@ dialog::after { .weatherForecastRow { text-transform: uppercase; - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } .weatherCityRow { diff --git a/browser/extensions/newtab/content-src/components/Widgets/FocusTimer/_FocusTimer.scss b/browser/extensions/newtab/content-src/components/Widgets/FocusTimer/_FocusTimer.scss @@ -61,7 +61,7 @@ h3 { font-size: var(--button-font-size); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0; } } @@ -178,7 +178,13 @@ display: flex; // Bug 1880518 - Large font-size number (32px) font-size: calc(var(--font-size-large) * 2); - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); font-variant-numeric: tabular-nums; height: 100%; inset-block-start: 0; diff --git a/browser/extensions/newtab/content-src/components/Widgets/_Widgets.scss b/browser/extensions/newtab/content-src/components/Widgets/_Widgets.scss @@ -38,7 +38,13 @@ p { margin: 0; - font-weight: var(--font-weight-bold); + + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } @media (prefers-reduced-motion: no-preference) { diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -1442,7 +1442,12 @@ main section { } .top-stories-bottom-container a { color: var(--newtab-primary-action-background); - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } .top-stories-bottom-container a.more-recommendations { font-weight: var(--font-weight); @@ -2146,7 +2151,7 @@ main section { .home-section .widgets-section h2 { font-size: inherit; margin-block-start: 0; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .home-section .settings-widgets, .home-section .settings-toggles { @@ -3005,7 +3010,7 @@ main section { } .weatherOptIn dialog .weatherOptInContent h3 { font-size: var(--button-font-size); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0 var(--space-medium); } .weatherOptIn dialog .weatherOptInContent moz-button-group { @@ -3175,7 +3180,12 @@ dialog::after { .weatherForecastRow { text-transform: uppercase; - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } .weatherCityRow { @@ -3668,7 +3678,7 @@ dialog::after { } .card-outer .card-title { font-size: inherit; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); line-height: 19px; margin: 0 0 var(--space-xxsmall); word-wrap: break-word; @@ -3827,7 +3837,7 @@ dialog::after { } .collapsible-section .section-title { font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); color: var(--newtab-text-primary-color); } .collapsible-section .section-title.grey-title { @@ -4198,7 +4208,7 @@ dialog::after { .ds-layout .section-title span { color: var(--newtab-contextual-text-primary-color); font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .lightWallpaper .ds-header, .lightWallpaper .ds-layout .section-title span { @@ -4224,7 +4234,12 @@ dialog::after { } .collapsible-section.ds-layout .section-top-bar .learn-more-link a { color: var(--newtab-primary-action-background); - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { text-decoration: none; @@ -4383,7 +4398,12 @@ dialog::after { } .widgets-wrapper .widgets-scroll-message p { margin: 0; - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } @media (prefers-reduced-motion: no-preference) { .widgets-wrapper .widgets-scroll-message { @@ -4715,7 +4735,7 @@ dialog::after { } .newtab-widget-timer-notification-title-wrapper h3 { font-size: var(--button-font-size); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0; } @@ -4802,7 +4822,12 @@ dialog::after { color: var(--text-color); display: flex; font-size: calc(var(--font-size-large) * 2); - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); font-variant-numeric: tabular-nums; height: 100%; inset-block-start: 0; @@ -5189,7 +5214,7 @@ dialog::after { align-items: flex-start; } .ds-section-wrapper .ds-section .section-title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); font-size: var(--font-size-xlarge); color: var(--newtab-contextual-text-primary-color); margin-block: 0; @@ -5613,7 +5638,7 @@ dialog::after { .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0 var(--space-small); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .excerpt { @@ -5994,7 +6019,7 @@ dialog::after { .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0 var(--space-small); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .excerpt { @@ -6384,7 +6409,7 @@ dialog::after { .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0 var(--space-small); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .excerpt { @@ -6773,7 +6798,7 @@ dialog::after { .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0 var(--space-small); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .excerpt { @@ -6834,7 +6859,7 @@ dialog::after { } .ds-highlights .section .section-list .card-outer .card-title { font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); line-height: 20px; max-height: 20px; } @@ -6870,7 +6895,12 @@ dialog::after { .ds-navigation { color: var(--newtab-contextual-text-primary-color); font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); padding: var(--space-xsmall) 0; } @media (min-width: 1122px) { @@ -6927,7 +6957,7 @@ dialog::after { } .ds-navigation.ds-navigation-new-topics .ds-navigation-header { font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); display: inline-block; margin-block-end: var(--space-small); } @@ -6975,7 +7005,12 @@ dialog::after { border-top: 1px solid var(--newtab-border-color); line-height: 24px; font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } .ds-navigation.ds-navigation-new-topics ul li::after { content: ""; @@ -7383,7 +7418,7 @@ dialog::after { -webkit-line-clamp: 3; line-height: normal; margin-block: 0; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .ds-card .meta .excerpt { font-size: var(--font-size-small); @@ -7465,7 +7500,12 @@ dialog::after { border: none; padding: var(--space-xsmall) var(--space-large); font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); min-height: var(--size-item-large); min-width: 97px; color: var(--newtab-text-primary-color); @@ -7477,7 +7517,7 @@ dialog::after { .ds-card.ds-card-cta-button.variant-a .cta-header, .ds-card.ds-card-cta-button.variant-b .cta-header { background: var(--button-background-color); font-size: var(--font-size-root); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); text-align: end; padding: var(--space-xsmall) var(--space-large); color: var(--newtab-text-primary-color); @@ -7543,7 +7583,7 @@ dialog::after { -webkit-line-clamp: 3; font-size: var(--font-size-root); margin-block-end: var(--space-small); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .ds-card-grid .sections-card-ui .meta .excerpt { -webkit-line-clamp: 3; @@ -7939,7 +7979,7 @@ dialog::after { .ds-message .title .title-text { font-size: var(--font-size-small); color: var(--newtab-text-secondary-color); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); padding-inline-end: var(--space-medium); } .ds-message .title .link { @@ -8032,7 +8072,7 @@ dialog::after { } .section-empty-state h2 { font-size: inherit; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin: 0; } .section-empty-state p { @@ -8087,7 +8127,7 @@ dialog::after { .ds-text-promo h3 { color: var(--newtab-text-primary-color); margin: 0; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); font-size: inherit; } .ds-text-promo .subtitle { @@ -8242,7 +8282,12 @@ dialog::after { position: relative; text-align: center; font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } .ds-signup:hover { background: var(--newtab-element-hover-color); @@ -8286,7 +8331,12 @@ dialog::after { .ds-privacy-link { text-align: center; font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); + /** + * @backward-compat { version 146 } + * + * Replace this with `--font-weight-semibold` once 146 hits release. + */ + font-weight: var(--heading-font-weight); } .ds-privacy-link a:hover { text-decoration: none; @@ -8550,7 +8600,7 @@ dialog::after { padding: 0; } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: var(--space-small); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .subtitle { @@ -8619,7 +8669,7 @@ dialog::after { font-size: var(--font-size-small); } .follow-section-button-highlight .follow-section-button-highlight-copy .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block-end: var(--space-xsmall); } @@ -8660,7 +8710,7 @@ dialog::after { inset-block-end: calc(var(--arrow-size) - var(--space-xxsmall)); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: var(--space-medium); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .subtitle { @@ -8724,7 +8774,7 @@ dialog::after { font-size: var(--font-size-small); } .shortcut-feature-highlight .shortcut-feature-highlight-copy .title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block-end: var(--space-xsmall); text-align: inherit; } @@ -8774,7 +8824,7 @@ dialog::after { .topic-selection-container .title { text-align: center; font-size: var(--font-size-xlarge); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block-end: var(--space-small); } .topic-selection-container .subtitle { @@ -9058,7 +9108,7 @@ dialog::after { .promo-card-wrapper .promo-card-title { display: block; font-size: var(--font-size-medium); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: var(--space-medium); } .promo-card-wrapper .promo-card-title::before { @@ -9245,7 +9295,7 @@ dialog::after { } .personalized-card-wrapper .personalized-card-inner h2 { font-size: var(--font-size-xxlarge); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .personalized-card-wrapper .personalized-card-inner .personalized-card-link { color: var(--link-color); diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css @@ -35,7 +35,7 @@ } > h2 { color: inherit; /* undo var(--text-color-deemphasized) from panelUI-shared.css */ - font-weight: var(--font-weight-bold); /* undo inherit from panelUI-shared.css that overrode h2's font-weight */ + font-weight: var(--heading-font-weight); /* undo inherit from panelUI-shared.css that overrode h2's font-weight */ } > description { diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css @@ -595,7 +595,7 @@ menupopup::part(drop-indicator) { /* Back / Forward buttons context menu */ .unified-nav-current { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } .unified-nav-back, @@ -1238,7 +1238,7 @@ popupnotificationcontent { .relay-integration-header-variation { display: flex; align-items: center; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); font-size: 1.5em; margin: auto; diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css @@ -871,7 +871,7 @@ } .trustpanel-header { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block-end: var(--space-medium); #trustpanel-blockerDetailsView &, diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css @@ -53,7 +53,7 @@ toolbar[overflowable][customizing] > .customization-target { } #customization-header { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); font-size: 1.2em; margin: 20px 20px 15px; } diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css @@ -963,7 +963,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg #fxa-menu-header-description { color: var(--text-color-deemphasized); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); text-wrap: wrap; } @@ -1581,7 +1581,7 @@ toolbarbutton[itemtype="showinactivebutton"] { .remote-tabs-undo-button { font-size: 0.8em; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } .toolbaritem-combined-buttons { @@ -2151,7 +2151,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { } #reset-pbm-panel-header > description { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } #reset-pbm-panel-checkbox { diff --git a/browser/themes/shared/formautofill-notification.css b/browser/themes/shared/formautofill-notification.css @@ -137,7 +137,7 @@ .address-update-text-diff-added, .address-update-text-diff-removed { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); color: light-dark(rgba(2, 80, 187, 1), rgba(128, 235, 255, 1)); background: light-dark(rgba(0, 96, 223, 0.08), rgba(0, 221, 255, 0.14)); } diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css @@ -18,7 +18,7 @@ > h4 { margin-block: var(--space-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); font-size: 15px; } diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css @@ -456,7 +456,7 @@ richlistitem[selected] .actionsMenu:focus-visible { } #homeContentsGroup > [data-subcategory] .section-checkbox { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } #homeContentsGroup > [data-subcategory] > vbox menulist { @@ -628,7 +628,7 @@ html|dialog, } .dialogTitle { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); text-align: center; user-select: none; } diff --git a/browser/themes/shared/preferences/translations.css b/browser/themes/shared/preferences/translations.css @@ -48,7 +48,7 @@ .translations-settings-language-header { margin: calc(2 * var(--space-small)) 0; font-size: var(--font-size-root); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .translations-settings-language-list { diff --git a/browser/themes/shared/tabbrowser/tab-hover-preview.css b/browser/themes/shared/tabbrowser/tab-hover-preview.css @@ -15,7 +15,7 @@ .tab-preview-title { overflow: hidden; -webkit-line-clamp: 2; - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .tab-preview-uri { @@ -58,5 +58,5 @@ } #tabgroup-panel-content > toolbarbutton.active-tab { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css @@ -1553,7 +1553,7 @@ tab-group { .tab-group-label { -moz-window-dragging: no-drag; text-align: center; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -1607,7 +1607,7 @@ tab-group { &::first-letter { font: message-box; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); line-height: 24px; } } @@ -2296,7 +2296,7 @@ toolbar:not(#TabsToolbar) #firefox-view-button { } &[selected] { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } > toolbarbutton { diff --git a/browser/themes/shared/urlbar-dynamic-results.css b/browser/themes/shared/urlbar-dynamic-results.css @@ -49,7 +49,7 @@ } .urlbarView-dynamic-quickSuggestContextualOptIn-title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .urlbarView-dynamic-quickSuggestContextualOptIn-description { diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css @@ -489,7 +489,7 @@ border-radius: var(--urlbar-inner-border-radius); padding: 0.5em 1em; font-size: 0.93em; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); background-clip: padding-box; min-height: 16px; min-width: 6em; @@ -1206,7 +1206,7 @@ .urlbarView-action-btn { font-size: smaller; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); border-radius: var(--toolbarbutton-border-radius); border: 1px solid transparent; padding: 0.4em 0.6em; @@ -1300,7 +1300,7 @@ padding: var(--space-xlarge); > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } } } @@ -1440,13 +1440,13 @@ > .urlbarView-realtime-description { > .urlbarView-realtime-description-top { > .urlbarView-market-name { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } } > .urlbarView-realtime-description-bottom { > .urlbarView-market-todays-change-perc { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } > .urlbarView-market-last-price { @@ -1490,7 +1490,7 @@ > .urlbarView-realtime-description { > .urlbarView-realtime-description-top > .urlbarView-yelpRealtime-title { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } > .urlbarView-realtime-description-bottom { @@ -1585,13 +1585,13 @@ > .urlbarView-realtime-description { > .urlbarView-realtime-description-top > .urlbarView-flightStatus-time { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); margin-inline-end: var(--space-small); } > .urlbarView-realtime-description-bottom { > .urlbarView-flightStatus-status { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } .urlbarView-row:not([selected]) 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 @@ -77,6 +77,12 @@ Examples of correct token usage for this rule: .. code-block:: css + .semibold-text { + font-weight: var(--font-weight-semibold); + } + +.. code-block:: css + .bold-text { font-weight: var(--font-weight-bold); } @@ -97,7 +103,7 @@ Examples of correct token usage for this rule: /* Local CSS variables that reference valid font-weight tokens are allowed */ :root { - --custom-font-weight: var(--font-weight-bold); + --custom-font-weight: var(--font-weight-semibold); } .custom-text { @@ -107,7 +113,7 @@ Examples of correct token usage for this rule: .. code-block:: css .custom-text { - font-weight: var(--custom-font-weight, var(--font-weight-bold)); + font-weight: var(--custom-font-weight, var(--font-weight-semibold)); } The rule also allows these non-token values: @@ -136,8 +142,18 @@ 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)`` -- ``600`` → ``var(--font-weight-bold)`` +- ``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: @@ -156,11 +172,23 @@ Examples of autofixable violations: .. code-block:: css /* Before */ - .bold-text { + .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/toolkit/components/aboutinference/content/model-files-view.css b/toolkit/components/aboutinference/content/model-files-view.css @@ -56,7 +56,7 @@ td { } .total-row { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } @media (prefers-color-scheme: dark) { diff --git a/toolkit/content/aboutGlean.css b/toolkit/content/aboutGlean.css @@ -30,7 +30,7 @@ body { } #tag-pings:invalid + label > span { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); text-decoration: underline; color: var(--text-color-error); } diff --git a/toolkit/content/widgets/infobar.css b/toolkit/content/widgets/infobar.css @@ -90,7 +90,7 @@ img.inline-icon { } strong { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } /* type="system" infobar styles */ diff --git a/toolkit/content/widgets/moz-card/moz-card.css b/toolkit/content/widgets/moz-card/moz-card.css @@ -93,7 +93,7 @@ summary { #heading { font-size: var(--font-size-root); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } #content { diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.css b/toolkit/content/widgets/moz-fieldset/moz-fieldset.css @@ -14,7 +14,7 @@ fieldset { legend { padding: 0; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); display: inline-flex; gap: var(--space-small); align-items: baseline; diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css @@ -87,7 +87,7 @@ button { &[selected] { color: var(--color-accent-primary); background-color: var(--page-nav-button-background-color-selected); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); @media (prefers-contrast) { border-color: var(--color-accent-primary); diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css @@ -63,7 +63,7 @@ nav { > .page-nav-heading { font-size: var(--font-size-xlarge); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); margin-block: 0; @media (max-width: 52rem) { diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css @@ -322,7 +322,7 @@ addon-card[expanded] .update-postponed-bar, .addon-name { font-size: 16px; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); line-height: 22px; margin: 0; margin-inline-end: 8px; diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css @@ -499,7 +499,7 @@ button:disabled { h2 { font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); color: var(--popup-foreground); margin-block: var(--space-small); } @@ -668,7 +668,7 @@ body.hcm .color-scheme-buttons { background-color: var(--popup-button-background); color: var(--popup-button-foreground); font-size: inherit; - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); padding-inline: var(--space-large) var(--space-xxlarge); text-overflow: ellipsis; background-image: url("chrome://global/skin/icons/arrow-down.svg"); diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css @@ -88,7 +88,7 @@ td.integer { } #codec-table tr > td.lack-of-extension { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } #codec-table tr:nth-child(even) > td.unsupported { diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json @@ -432,7 +432,7 @@ } }, "weight": { - "value": "{font.weight.bold}" + "value": "{font.weight.semibold}" } }, "icon": { @@ -1157,8 +1157,11 @@ "@base": { "value": "normal" }, - "bold": { + "semibold": { "value": 600 + }, + "bold": { + "value": 700 } } }, @@ -1176,7 +1179,7 @@ } }, "weight": { - "value": "{font.weight.bold}" + "value": "{font.weight.semibold}" } } }, diff --git a/toolkit/themes/shared/design-system/docs/README.json-design-tokens.stories.md b/toolkit/themes/shared/design-system/docs/README.json-design-tokens.stories.md @@ -131,7 +131,7 @@ When reading through our JSON you will see many instances where we have used an } } ``` -This is a workaround for a [known](https://github.com/amzn/style-dictionary/issues/119) [limitation](https://github.com/amzn/style-dictionary/issues/366) of Style Dictionary where it doesn't support nested token names that appear after a `value` key. If we want to have both `--font-weight` and `--font-weight-bold` CSS tokens they need to be represented as distinct objects with their own `value`s: +This is a workaround for a [known](https://github.com/amzn/style-dictionary/issues/119) [limitation](https://github.com/amzn/style-dictionary/issues/366) of Style Dictionary where it doesn't support nested token names that appear after a `value` key. If we want to have both `--font-weight` and `--font-weight-semibold` CSS tokens they need to be represented as distinct objects with their own `value`s: ```json "font": { @@ -139,7 +139,7 @@ This is a workaround for a [known](https://github.com/amzn/style-dictionary/issu "@base": { "value": "normal" }, - "bold": { + "semibold": { "value": 600 } } diff --git a/toolkit/themes/shared/design-system/text-and-typography.css b/toolkit/themes/shared/design-system/text-and-typography.css @@ -33,7 +33,7 @@ h3, .text-error { color: var(--text-color-error); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } .text-truncated-ellipsis { diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css @@ -88,7 +88,7 @@ --button-border-radius: var(--border-radius-medium); --button-font-size: var(--font-size-root); --button-font-size-small: var(--font-size-small); - --button-font-weight: var(--font-weight-bold); + --button-font-weight: var(--font-weight-semibold); --button-icon-fill: currentColor; --button-icon-stroke: var(--button-icon-fill); --button-min-height: var(--size-item-large); @@ -250,13 +250,14 @@ /** Font Weight **/ --font-weight: normal; - --font-weight-bold: 600; + --font-weight-bold: 700; + --font-weight-semibold: 600; /** Heading **/ --heading-font-size-medium: var(--font-size-large); --heading-font-size-large: var(--font-size-xlarge); --heading-font-size-xlarge: var(--font-size-xxlarge); - --heading-font-weight: var(--font-weight-bold); + --heading-font-weight: var(--font-weight-semibold); /** Icon **/ --icon-color: light-dark(var(--color-gray-70), var(--color-gray-05)); diff --git a/toolkit/themes/shared/design-system/tokens-table.css b/toolkit/themes/shared/design-system/tokens-table.css @@ -159,7 +159,7 @@ input[type="search"] { margin: 0; padding: var(--space-small); font-size: var(--font-size-large); - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); text-transform: uppercase; color: var(--text-color); display: inline-block; diff --git a/toolkit/themes/shared/design-system/tokens-table.mjs b/toolkit/themes/shared/design-system/tokens-table.mjs @@ -678,10 +678,11 @@ export const tokensTable = { { value: "var(--font-size-large)", name: "--heading-font-size-medium" }, ], "font-weight": [ - { value: "var(--font-weight-bold)", name: "--button-font-weight" }, + { value: "var(--font-weight-semibold)", name: "--button-font-weight" }, { value: "normal", name: "--font-weight" }, - { value: 600, name: "--font-weight-bold" }, - { value: "var(--font-weight-bold)", name: "--heading-font-weight" }, + { value: 600, name: "--font-weight-semibold" }, + { value: 700, name: "--font-weight-bold" }, + { value: "var(--font-weight-semibold)", name: "--heading-font-weight" }, ], "icon-color": [ { value: "currentColor", name: "--button-icon-fill" }, @@ -1346,7 +1347,7 @@ export const variableLookupTable = { "button-border-radius": "var(--border-radius-medium)", "button-font-size": "var(--font-size-root)", "button-font-size-small": "var(--font-size-small)", - "button-font-weight": "var(--font-weight-bold)", + "button-font-weight": "var(--font-weight-semibold)", "button-icon-fill": "currentColor", "button-icon-stroke": "var(--button-icon-fill)", "button-min-height": "var(--size-item-large)", @@ -1642,11 +1643,12 @@ export const variableLookupTable = { platform: { default: "unset" }, }, "font-weight": "normal", - "font-weight-bold": 600, + "font-weight-semibold": 600, + "font-weight-bold": 700, "heading-font-size-xlarge": "var(--font-size-xxlarge)", "heading-font-size-large": "var(--font-size-xlarge)", "heading-font-size-medium": "var(--font-size-large)", - "heading-font-weight": "var(--font-weight-bold)", + "heading-font-weight": "var(--font-weight-semibold)", "icon-color": { light: "var(--color-gray-70)", dark: "var(--color-gray-05)", diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css @@ -234,7 +234,7 @@ html|select:where(:not([size], [multiple])) { border: none; border-radius: var(--button-border-radius); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); color: var(--button-text-color); background-color: var(--button-background-color); @@ -263,7 +263,7 @@ html|select:where(:not([size], [multiple])) { } .header { - font-weight: var(--font-weight-bold); + font-weight: var(--heading-font-weight); } .indent { diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css @@ -225,7 +225,7 @@ body.hcm .narrate-word-highlight { padding-inline: var(--space-medium); border-radius: var(--border-radius-small); background-color: var(--popup-button-background); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); -moz-context-properties: fill; fill: currentColor; diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css @@ -442,7 +442,7 @@ body:not(:fullscreen) #fullscreen { } .bold { - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); } .box > input[type="radio"] { 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 @@ -34,7 +34,18 @@ const tokenCSS = createTokenNamesArray([PROPERTY_NAME]); const ALLOW_LIST = createAllowList(); -const tokenFixMap = createRawValuesObject([PROPERTY_NAME]); +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) => { 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 @@ -32,6 +32,10 @@ testRule({ 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.", }, @@ -57,13 +61,13 @@ testRule({ description: "Using unset is valid.", }, { - code: ".a { font-weight:var(--my-local, var(--font-weight-bold)); }", + 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-bold); } + :root { --custom-token: var(--font-weight-semibold); } .a { font-weight: var(--custom-token); } `, description: @@ -175,9 +179,78 @@ testRule({ }, { code: ".a { font-weight: 600; }", - fixed: ".a { font-weight: var(--font-weight-bold); }", + 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.", + }, ], });