From 4f0caadea866e40b1ffdfee67bd8829c791ae0ec Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 10 Jul 2026 11:32:29 +0200 Subject: [PATCH 01/13] Theme: Replace medium font weight with semibold --- packages/base-styles/_mixins.scss | 2 +- packages/base-styles/_variables.scss | 2 +- .../internal/_wpds-token-fallbacks.scss | 2 +- .../src/components/compact-list/style.scss | 2 +- .../src/components/block-card/style.scss | 2 +- .../components/block-navigation/style.scss | 2 +- .../test/__snapshots__/control.js.snap | 2 +- .../src/components/inserter/style.scss | 4 +- .../src/components/link-picker/style.scss | 2 +- .../multi-selection-inspector/style.scss | 2 +- .../src/navigation-link/editor.scss | 2 +- packages/block-library/src/video/editor.scss | 2 +- .../navigation/navigation-item/style.scss | 4 +- packages/commands/src/components/style.scss | 2 +- packages/components/src/button/style.scss | 2 +- .../components/src/color-palette/styles.ts | 2 +- packages/components/src/menu-group/style.scss | 2 +- .../components/src/palette-edit/styles.ts | 2 +- packages/components/src/panel/style.scss | 2 +- .../test/__snapshots__/index.tsx.snap | 12 +++--- .../styles.ts | 2 +- packages/components/src/tools-panel/styles.ts | 4 +- packages/components/src/utils/base-label.ts | 2 +- .../components/src/utils/config-values.js | 2 +- .../dataform-layouts/panel/style.scss | 2 +- .../components/dataviews-filters/style.scss | 2 +- .../dataviews-layouts/activity/style.scss | 2 +- .../dataviews-layouts/grid/style.scss | 2 +- .../dataviews-layouts/list/style.scss | 2 +- .../picker-activity/style.scss | 2 +- .../dataviews-layouts/picker-grid/style.scss | 2 +- .../dataviews-layouts/table/style.scss | 6 +-- .../dataviews-pagination/style.scss | 4 +- packages/dataviews/src/dataviews/style.scss | 2 +- .../sidebar-navigation-item/style.scss | 2 +- .../style.scss | 2 +- .../src/components/collab-sidebar/style.scss | 6 +-- .../avatar-iframe-styles.ts | 6 +-- .../collaborator-styles.ts | 4 +- .../collaborators-presence/avatar/styles.scss | 4 +- .../styles/collaborators-list.scss | 4 +- .../components/post-last-revision/style.scss | 2 +- .../components/post-publish-panel/style.scss | 2 +- .../test/__snapshots__/index.js.snap | 4 +- .../src/font-library/style.scss | 6 +-- packages/global-styles-ui/src/style.scss | 2 +- .../components/complementary-area/style.scss | 4 +- .../media-editor-image-controls/style.scss | 2 +- .../components/media-upload-modal/style.scss | 2 +- packages/theme/docs/tokens.md | 40 +++++++++---------- .../theme/src/prebuilt/css/design-tokens.css | 4 +- .../prebuilt/js/design-token-fallbacks.mjs | 2 +- .../theme/src/prebuilt/js/design-tokens.mjs | 2 +- packages/theme/src/prebuilt/ts/token-types.ts | 2 +- packages/theme/terrazzo.config.ts | 22 ---------- packages/theme/tokens/typography.json | 6 +-- packages/ui/src/button/style.module.css | 2 +- packages/ui/src/text/style.module.css | 20 +++++----- packages/ui/src/utils/css/field.module.css | 2 +- .../utils/css/global-css-defense.module.css | 2 +- .../src/blocks/legacy-widget/editor.scss | 2 +- routes/guidelines/style.scss | 2 +- .../decorators/with-max-width-wrapper.jsx | 2 +- .../with-text-overflow-containers.tsx | 2 +- storybook/stories/tokens/typography.mdx | 2 +- .../circle-progress.module.css | 2 +- 66 files changed, 118 insertions(+), 140 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 1ad17fdb81efa6..0129698ebba0fc 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -13,7 +13,7 @@ @mixin _text-heading() { font-family: variables.$font-family-headings; - font-weight: variables.$font-weight-medium; + font-weight: variables.$font-weight-semibold; } @mixin _text-body() { diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index cab3aa018b93b1..00940419cb7547 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -37,7 +37,7 @@ $font-line-height-2x-large: 40px; // Weights $font-weight-regular: 400; -$font-weight-medium: 499; // ensures fallback to 400 (instead of 600) +$font-weight-semibold: 600; // Families $font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; diff --git a/packages/base-styles/internal/_wpds-token-fallbacks.scss b/packages/base-styles/internal/_wpds-token-fallbacks.scss index 3803129567578a..0a2dae2921ef58 100644 --- a/packages/base-styles/internal/_wpds-token-fallbacks.scss +++ b/packages/base-styles/internal/_wpds-token-fallbacks.scss @@ -179,8 +179,8 @@ $fallbacks: ( '--wpds-typography-font-size-sm': '12px', '--wpds-typography-font-size-xl': '20px', '--wpds-typography-font-size-xs': '11px', - '--wpds-typography-font-weight-medium': '499', '--wpds-typography-font-weight-regular': '400', + '--wpds-typography-font-weight-semibold': '600', '--wpds-typography-line-height-2xl': '40px', '--wpds-typography-line-height-lg': '28px', '--wpds-typography-line-height-md': '24px', diff --git a/packages/block-directory/src/components/compact-list/style.scss b/packages/block-directory/src/components/compact-list/style.scss index a7d2e588d1083d..e6bb7fd30e3419 100644 --- a/packages/block-directory/src/components/compact-list/style.scss +++ b/packages/block-directory/src/components/compact-list/style.scss @@ -22,7 +22,7 @@ } .block-directory-compact-list__item-title { - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } .block-directory-compact-list__item-author { diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss index 0928d424b86d5a..d9ed48d44fb213 100644 --- a/packages/block-editor/src/components/block-card/style.scss +++ b/packages/block-editor/src/components/block-card/style.scss @@ -22,7 +22,7 @@ } .block-editor-block-card__title { - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; display: flex; align-items: center; flex-wrap: wrap; diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index aaadd9ab9f5783..135a629856b10a 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -10,5 +10,5 @@ color: $gray-700; text-transform: uppercase; font-size: 11px; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 6954e8ba985690..21c475b3a6ab2f 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -19,7 +19,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` .emotion-4 { font-size: 11px; - font-weight: 499; + font-weight: 600; line-height: 1.4; text-transform: uppercase; display: block; diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index cfefa835d863ae..d60d3eeaf42379 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -163,7 +163,7 @@ $block-inserter-tabs-height: 44px; color: $gray-700; text-transform: uppercase; font-size: 11px; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input { @@ -456,7 +456,7 @@ $block-inserter-tabs-height: 44px; } .components-heading.block-editor-inserter__patterns-category-panel-title { - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } .block-editor-inserter__patterns-explore-button, diff --git a/packages/block-editor/src/components/link-picker/style.scss b/packages/block-editor/src/components/link-picker/style.scss index e6df29a50d5645..01f01169e8f4ab 100644 --- a/packages/block-editor/src/components/link-picker/style.scss +++ b/packages/block-editor/src/components/link-picker/style.scss @@ -50,7 +50,7 @@ .link-preview-button__title { margin-top: $grid-unit-05; - font-weight: 500; + font-weight: $font-weight-semibold; color: $gray-900; display: block; } diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss index bfc399cc665ed0..c161aff3456d43 100644 --- a/packages/block-editor/src/components/multi-selection-inspector/style.scss +++ b/packages/block-editor/src/components/multi-selection-inspector/style.scss @@ -5,7 +5,7 @@ } .block-editor-multi-selection-inspector__card-title { - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } .block-editor-multi-selection-inspector__card .block-editor-block-icon { diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 58b38763b93866..4d25da46cfabfc 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -110,7 +110,7 @@ .link-control-transform__subheading { font-size: 11px; text-transform: uppercase; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; color: $gray-900; margin-bottom: 1.5em; } diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss index 99cd5cdd9326c5..fd6984842ac8be 100644 --- a/packages/block-library/src/video/editor.scss +++ b/packages/block-library/src/video/editor.scss @@ -46,7 +46,7 @@ color: $gray-700; text-transform: uppercase; font-size: 11px; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; display: block; } diff --git a/packages/boot/src/components/navigation/navigation-item/style.scss b/packages/boot/src/components/navigation/navigation-item/style.scss index ad547804e44df2..6dabac19d39c91 100644 --- a/packages/boot/src/components/navigation/navigation-item/style.scss +++ b/packages/boot/src/components/navigation/navigation-item/style.scss @@ -29,7 +29,7 @@ } &.active { - font-weight: variables.$font-weight-medium; + font-weight: variables.$font-weight-semibold; } svg:last-child { @@ -38,7 +38,7 @@ &[aria-current="true"] { color: var(--wpds-color-foreground-interactive-brand-active); - font-weight: variables.$font-weight-medium; + font-weight: variables.$font-weight-semibold; } // Make sure the focus style is drawn on top of the current item background. diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss index e223a921440526..5dbdc813f77cf8 100644 --- a/packages/commands/src/components/style.scss +++ b/packages/commands/src/components/style.scss @@ -144,7 +144,7 @@ $palette-header-height: 48px; padding: $grid-unit-10 $grid-unit-20; line-height: $grid-unit-20; font-size: $font-size-x-small; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; text-transform: uppercase; color: $gray-900; } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 5c84928125c870..0b7c454ab365a6 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -25,7 +25,7 @@ text-decoration: none; font-family: inherit; font-size: $default-font-size; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; margin: 0; cursor: var(--wpds-cursor-control); appearance: none; diff --git a/packages/components/src/color-palette/styles.ts b/packages/components/src/color-palette/styles.ts index b7bed6ce55093c..02633a01bd2584 100644 --- a/packages/components/src/color-palette/styles.ts +++ b/packages/components/src/color-palette/styles.ts @@ -12,7 +12,7 @@ import { CONFIG } from '../utils'; export const ColorHeading = styled( Heading )` text-transform: uppercase; line-height: 24px; - font-weight: ${ CONFIG.fontWeightMedium }; + font-weight: ${ CONFIG.fontWeightSemibold }; &&& { font-size: 11px; margin-bottom: 0; diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index c7f32df38ace52..8d974b68fbfbb7 100644 --- a/packages/components/src/menu-group/style.scss +++ b/packages/components/src/menu-group/style.scss @@ -23,6 +23,6 @@ color: $gray-700; text-transform: uppercase; font-size: 11px; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; white-space: nowrap; } diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts index 5ce4f0ada3e3fb..9bbb0659e6967a 100644 --- a/packages/components/src/palette-edit/styles.ts +++ b/packages/components/src/palette-edit/styles.ts @@ -52,7 +52,7 @@ export const NameContainer = styled.div` export const PaletteHeading = styled( Heading )` text-transform: uppercase; line-height: ${ space( 6 ) }; - font-weight: ${ CONFIG.fontWeightMedium }; + font-weight: ${ CONFIG.fontWeightSemibold }; &&& { font-size: 11px; margin-bottom: 0; diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index 1981a4a26f634f..42db7aebe65065 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -88,7 +88,7 @@ position: relative; padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20; width: 100%; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; text-align: left; color: $gray-900; diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap index 4cf135c6a0ce36..a8d423e1cce62a 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap @@ -19,7 +19,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = .emotion-4 { font-size: 11px; - font-weight: 499; + font-weight: 600; line-height: 1.4; text-transform: uppercase; display: block; @@ -135,7 +135,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = padding-left: 0; padding-right: 0; color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)); - font-weight: 499; + font-weight: 600; } @media not ( prefers-reduced-motion ) { @@ -354,7 +354,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options .emotion-4 { font-size: 11px; - font-weight: 499; + font-weight: 600; line-height: 1.4; text-transform: uppercase; display: block; @@ -595,7 +595,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] .emotion-4 { font-size: 11px; - font-weight: 499; + font-weight: 600; line-height: 1.4; text-transform: uppercase; display: block; @@ -711,7 +711,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] padding-left: 0; padding-right: 0; color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)); - font-weight: 499; + font-weight: 600; } @media not ( prefers-reduced-motion ) { @@ -924,7 +924,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio .emotion-4 { font-size: 11px; - font-weight: 499; + font-weight: 600; line-height: 1.4; text-transform: uppercase; display: block; diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts index 44e41b7b414a4e..dd88c170cde1f2 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts @@ -79,7 +79,7 @@ export const buttonView = ( { const pressed = css` color: ${ COLORS.theme.foreground }; - font-weight: ${ CONFIG.fontWeightMedium }; + font-weight: ${ CONFIG.fontWeightSemibold }; `; const deselectable = css` diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 438747e3f008c4..8204c2f0deca3a 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -101,7 +101,7 @@ export const ToolsPanelHeader = css` export const ToolsPanelHeading = css` font-size: inherit; - font-weight: ${ CONFIG.fontWeightMedium }; + font-weight: ${ CONFIG.fontWeightSemibold }; line-height: normal; /* Required to meet specificity requirements to ensure zero margin */ @@ -152,7 +152,7 @@ export const DropdownMenu = css` export const ResetLabel = styled.span` color: ${ COLORS.theme.accentDarker10 }; font-size: 11px; - font-weight: ${ CONFIG.fontWeightMedium }; + font-weight: ${ CONFIG.fontWeightSemibold }; line-height: 1.4; ${ rtl( { marginLeft: space( 3 ) } ) } text-transform: uppercase; diff --git a/packages/components/src/utils/base-label.ts b/packages/components/src/utils/base-label.ts index 2208891d8131e3..9d380757317787 100644 --- a/packages/components/src/utils/base-label.ts +++ b/packages/components/src/utils/base-label.ts @@ -12,7 +12,7 @@ import CONFIG from './config-values.js'; // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can. export const baseLabelTypography = css` font-size: 11px; - font-weight: ${ CONFIG.fontWeightMedium }; + font-weight: ${ CONFIG.fontWeightSemibold }; line-height: 1.4; text-transform: uppercase; `; diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 0fba4ff7708568..470a0f3bc173d2 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -50,7 +50,7 @@ export default Object.assign( {}, CONTROL_PROPS, { fontSizeXSmall: 'calc(0.75 * 13px)', fontLineHeightBase: '1.4', fontWeight: 'normal', - fontWeightMedium: '499', // ensures fallback to 400 (instead of 600) + fontWeightSemibold: '600', fontWeightHeading: '600', gridBase: '4px', elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`, diff --git a/packages/dataviews/src/components/dataform-layouts/panel/style.scss b/packages/dataviews/src/components/dataform-layouts/panel/style.scss index 0f92347e7fdfd6..d43e60d68f0a67 100644 --- a/packages/dataviews/src/components/dataform-layouts/panel/style.scss +++ b/packages/dataviews/src/components/dataform-layouts/panel/style.scss @@ -127,7 +127,7 @@ padding-inline: var(--wpds-border-width-focus); margin-inline: calc(-1 * var(--wpds-border-width-focus)); word-break: break-word; - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); > * { min-width: 0; diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss index 43fe5a5bcf8ed9..2beff89498daec 100644 --- a/packages/dataviews/src/components/dataviews-filters/style.scss +++ b/packages/dataviews/src/components/dataviews-filters/style.scss @@ -120,7 +120,7 @@ } .dataviews-filters-__summary-filter-text-name { - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); } } diff --git a/packages/dataviews/src/components/dataviews-layouts/activity/style.scss b/packages/dataviews/src/components/dataviews-layouts/activity/style.scss index a51cd93740b7ea..e600eead8a5edc 100644 --- a/packages/dataviews/src/components/dataviews-layouts/activity/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/activity/style.scss @@ -6,7 +6,7 @@ .dataviews-view-activity__group-header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); color: var(--wpds-color-foreground-content-neutral-weak); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0; diff --git a/packages/dataviews/src/components/dataviews-layouts/grid/style.scss b/packages/dataviews/src/components/dataviews-layouts/grid/style.scss index 85965f0e49f43b..a4c1b71781eb9d 100644 --- a/packages/dataviews/src/components/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/grid/style.scss @@ -257,7 +257,7 @@ .dataviews-view-grid__group-header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); color: var(--wpds-color-foreground-content-neutral); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0 var(--wpds-dimension-padding-2xl); diff --git a/packages/dataviews/src/components/dataviews-layouts/list/style.scss b/packages/dataviews/src/components/dataviews-layouts/list/style.scss index bc3c56d4426242..35c9f39e5e60b9 100644 --- a/packages/dataviews/src/components/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/list/style.scss @@ -281,7 +281,7 @@ div.dataviews-view-list { .dataviews-view-list__group-header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); color: var(--wpds-color-foreground-content-neutral); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0 var(--wpds-dimension-padding-2xl); diff --git a/packages/dataviews/src/components/dataviews-layouts/picker-activity/style.scss b/packages/dataviews/src/components/dataviews-layouts/picker-activity/style.scss index 4d45ce24553a5e..ce6d98d98c3ef7 100644 --- a/packages/dataviews/src/components/dataviews-layouts/picker-activity/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/picker-activity/style.scss @@ -189,7 +189,7 @@ .dataviews-view-picker-activity-group__header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); color: var(--wpds-color-foreground-content-neutral-weak); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0; diff --git a/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss b/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss index d705c3c241abc0..3beefff25c5c5f 100644 --- a/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss @@ -181,7 +181,7 @@ .dataviews-view-picker-grid-group__header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); color: var(--wpds-color-foreground-content-neutral); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0 48px; diff --git a/packages/dataviews/src/components/dataviews-layouts/table/style.scss b/packages/dataviews/src/components/dataviews-layouts/table/style.scss index be6277aa0c1b4f..047b279204c43e 100644 --- a/packages/dataviews/src/components/dataviews-layouts/table/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/table/style.scss @@ -154,7 +154,7 @@ padding-bottom: var(--wpds-dimension-padding-sm); font-size: 11px; text-transform: uppercase; - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); &:has(.dataviews-view-table-header-button) { padding-left: var(--wpds-dimension-padding-xs); @@ -204,7 +204,7 @@ padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm); font-size: 11px; text-transform: uppercase; - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); &:not(:hover) { color: var(--wpds-color-foreground-interactive-neutral); @@ -312,7 +312,7 @@ .dataviews-view-table__group-header-row { .dataviews-view-table__group-header-cell { - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); padding: var(--wpds-dimension-padding-md) var(--wpds-dimension-padding-2xl); color: var(--wpds-color-foreground-content-neutral); } diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss index d3eaf727935fad..35cb354c68f2b5 100644 --- a/packages/dataviews/src/components/dataviews-pagination/style.scss +++ b/packages/dataviews/src/components/dataviews-pagination/style.scss @@ -2,13 +2,13 @@ .dataviews-pagination__page-select { font-size: 11px; - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); text-transform: uppercase; @include break-small() { .components-select-control__input { font-size: 11px !important; - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); } } } diff --git a/packages/dataviews/src/dataviews/style.scss b/packages/dataviews/src/dataviews/style.scss index 17d27d650fdc5d..244bcd96d52f18 100644 --- a/packages/dataviews/src/dataviews/style.scss +++ b/packages/dataviews/src/dataviews/style.scss @@ -85,7 +85,7 @@ .dataviews-title-field { font-size: var(--wpds-typography-font-size-md); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); color: var(--wpds-color-foreground-content-neutral); text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index 9405ba7bad6861..3d53808829a05d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -21,7 +21,7 @@ &[aria-current="true"] { background: var(--wpds-color-background-interactive-neutral-weak-active); color: var(--wpds-color-foreground-interactive-neutral-weak-active); - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } // Make sure the focus style is drawn on top of the current item background. diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss index d1a056bb34b9b7..f3abd3ff947cf6 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss @@ -21,7 +21,7 @@ h2 { font-size: 11px; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; text-transform: uppercase; } } diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss index 8f6428a4eaabad..006fb0382e7be5 100644 --- a/packages/editor/src/components/collab-sidebar/style.scss +++ b/packages/editor/src/components/collab-sidebar/style.scss @@ -136,11 +136,11 @@ } .editor-collab-sidebar-panel__more-reply-button { - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } .editor-collab-sidebar-panel__deleted-block-notice { - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; color: $gray-700; } @@ -200,7 +200,7 @@ } .editor-note-indicator__overflow { - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } .show-icon-labels { diff --git a/packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts b/packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts index f77d9b8bc5585f..88a3096587cded 100644 --- a/packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts +++ b/packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts @@ -15,7 +15,7 @@ import { FONT_LINE_HEIGHT_SMALL, FONT_SIZE_MEDIUM, FONT_SIZE_X_SMALL, - FONT_WEIGHT_MEDIUM, + FONT_WEIGHT_SEMIBOLD, GRID_UNIT_05, GRID_UNIT_10, RADIUS_FULL, @@ -79,7 +79,7 @@ export const AVATAR_IFRAME_STYLES = ` align-items: center; justify-content: center; font-size: ${ FONT_SIZE_X_SMALL }; - font-weight: ${ FONT_WEIGHT_MEDIUM }; + font-weight: ${ FONT_WEIGHT_SEMIBOLD }; border: 0; background-clip: border-box; } @@ -91,7 +91,7 @@ export const AVATAR_IFRAME_STYLES = ` } .editor-avatar__name { font-size: ${ FONT_SIZE_MEDIUM }; - font-weight: ${ FONT_WEIGHT_MEDIUM }; + font-weight: ${ FONT_WEIGHT_SEMIBOLD }; line-height: ${ FONT_LINE_HEIGHT_SMALL }; color: var(--editor-avatar-name-color, ${ WHITE }); min-width: 0; diff --git a/packages/editor/src/components/collaborators-overlay/collaborator-styles.ts b/packages/editor/src/components/collaborators-overlay/collaborator-styles.ts index d81bfce9071abc..833b9b46130fa9 100644 --- a/packages/editor/src/components/collaborators-overlay/collaborator-styles.ts +++ b/packages/editor/src/components/collaborators-overlay/collaborator-styles.ts @@ -40,8 +40,8 @@ export const FONT_SIZE_X_SMALL = '11px'; // _font.scss — $font-size-medium export const FONT_SIZE_MEDIUM = '13px'; -// _font.scss — $font-weight-medium -export const FONT_WEIGHT_MEDIUM = '499'; +// _variables.scss — $font-weight-semibold +export const FONT_WEIGHT_SEMIBOLD = '600'; // _font.scss — $font-line-height-small export const FONT_LINE_HEIGHT_SMALL = '20px'; diff --git a/packages/editor/src/components/collaborators-presence/avatar/styles.scss b/packages/editor/src/components/collaborators-presence/avatar/styles.scss index 65762d30da39c0..f18be7e4b9dea6 100644 --- a/packages/editor/src/components/collaborators-presence/avatar/styles.scss +++ b/packages/editor/src/components/collaborators-presence/avatar/styles.scss @@ -77,7 +77,7 @@ $-accent-color: var(--wp-admin-theme-color, #3858e9); align-items: center; justify-content: center; font-size: $font-size-x-small; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; border: 0; background-clip: border-box; @@ -92,7 +92,7 @@ $-accent-color: var(--wp-admin-theme-color, #3858e9); .editor-avatar__name { font-size: $font-size-medium; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; line-height: $font-line-height-small; color: var(--editor-avatar-name-color, $white); min-width: 0; diff --git a/packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss b/packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss index 8b0715b1a97745..e533e2911e3362 100644 --- a/packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss +++ b/packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss @@ -24,7 +24,7 @@ &-title { font-size: $font-size-medium; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; line-height: $font-line-height-small; display: flex; gap: $grid-unit-05; @@ -92,7 +92,7 @@ &-name { font-size: $font-size-medium; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; line-height: $font-line-height-small; color: $gray-900; overflow: hidden; diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss index a36c49d361b2cb..d319e0da5f4dfb 100644 --- a/packages/editor/src/components/post-last-revision/style.scss +++ b/packages/editor/src/components/post-last-revision/style.scss @@ -3,7 +3,7 @@ .editor-post-last-revision__title { width: 100%; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } .editor-post-last-revision__title.components-button.has-icon { diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 84ffd82f1a8edf..86e688bc545880 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -182,7 +182,7 @@ } .post-publish-panel__postpublish-header { - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } .post-publish-panel__postpublish-subheader { diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap index 8df276ad473532..4fb9c4fc4bc6a0 100644 --- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -19,7 +19,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu .emotion-4 { font-size: 11px; - font-weight: 499; + font-weight: 600; line-height: 1.4; text-transform: uppercase; display: block; @@ -223,7 +223,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc .emotion-4 { font-size: 11px; - font-weight: 499; + font-weight: 600; line-height: 1.4; text-transform: uppercase; display: block; diff --git a/packages/global-styles-ui/src/font-library/style.scss b/packages/global-styles-ui/src/font-library/style.scss index 8c428e152735c1..13f3771c501a21 100644 --- a/packages/global-styles-ui/src/font-library/style.scss +++ b/packages/global-styles-ui/src/font-library/style.scss @@ -25,7 +25,7 @@ $footer-height: 90px; .font-library__subtitle { text-transform: uppercase; - font-weight: variables.$font-weight-medium; + font-weight: variables.$font-weight-semibold; font-size: 11px; } } @@ -81,13 +81,13 @@ $footer-height: 90px; .font-library__page-selection { font-size: 11px; - font-weight: variables.$font-weight-medium; + font-weight: variables.$font-weight-semibold; text-transform: uppercase; @include mixins.break-small() { .font-library__page-selection-trigger { font-size: 11px !important; - font-weight: variables.$font-weight-medium; + font-weight: variables.$font-weight-semibold; } } } diff --git a/packages/global-styles-ui/src/style.scss b/packages/global-styles-ui/src/style.scss index ab5d337000e9da..7e405028771876 100644 --- a/packages/global-styles-ui/src/style.scss +++ b/packages/global-styles-ui/src/style.scss @@ -81,7 +81,7 @@ // Need to override the too specific styles for complementary areas. margin-bottom: 0 !important; text-transform: uppercase; - font-weight: variables.$font-weight-medium !important; + font-weight: variables.$font-weight-semibold !important; font-size: 11px !important; } diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 48770165594b1a..9a165d194bba72 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -36,7 +36,7 @@ h2 { font-size: $default-font-size; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; color: $gray-900; margin-bottom: 1.5em; } @@ -45,7 +45,7 @@ h3 { font-size: 11px; text-transform: uppercase; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; color: $gray-900; margin-bottom: 1.5em; } diff --git a/packages/media-editor/src/components/media-editor-image-controls/style.scss b/packages/media-editor/src/components/media-editor-image-controls/style.scss index 64161c32c0003a..fee3c57ea2d608 100644 --- a/packages/media-editor/src/components/media-editor-image-controls/style.scss +++ b/packages/media-editor/src/components/media-editor-image-controls/style.scss @@ -33,7 +33,7 @@ // headings. Mirrors `baseLabelTypography` from `@wordpress/components`. &__label { font-size: 11px; - font-weight: 500; + font-weight: $font-weight-semibold; line-height: 1.4; text-transform: uppercase; } diff --git a/packages/media-utils/src/components/media-upload-modal/style.scss b/packages/media-utils/src/components/media-upload-modal/style.scss index 29f7b67f5988d1..c8db178c7e8cb6 100644 --- a/packages/media-utils/src/components/media-upload-modal/style.scss +++ b/packages/media-utils/src/components/media-upload-modal/style.scss @@ -86,7 +86,7 @@ h3 { margin: 0; font-size: 13px; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } } diff --git a/packages/theme/docs/tokens.md b/packages/theme/docs/tokens.md index 83f8fe624190fd..73f026ea10a05d 100644 --- a/packages/theme/docs/tokens.md +++ b/packages/theme/docs/tokens.md @@ -99,7 +99,7 @@ An optional size, intensity, state, or role modifier. | `5xs`, `4xs`, `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | Size scale modifiers | | `weak`, `strong` | Color emphasis modifiers | | `active`, `disabled` | Interactive state modifiers | -| `heading`, `body`, `mono`, `regular`, `medium` | Typography role modifiers | +| `heading`, `body`, `mono`, `regular`, `semibold` | Typography role modifiers | | `subtle`, `balanced`, `expressive` | Motion easing intent modifiers | ### Shortened and compound forms @@ -349,24 +349,24 @@ The semantic token set is role-based, not a complete matrix of every property, t ### Typography -| Variable name | Description | -| --------------------------------------- | -------------------------------------------- | -| `--wpds-typography-font-family-heading` | Headings font family | -| `--wpds-typography-font-family-body` | Body font family | -| `--wpds-typography-font-family-mono` | Monospace font family | -| `--wpds-typography-font-size-xs` | Extra small font size | -| `--wpds-typography-font-size-sm` | Small font size | -| `--wpds-typography-font-size-md` | Medium font size | -| `--wpds-typography-font-size-lg` | Large font size | -| `--wpds-typography-font-size-xl` | Extra large font size | -| `--wpds-typography-font-size-2xl` | 2X large font size | -| `--wpds-typography-line-height-xs` | Extra small line height | -| `--wpds-typography-line-height-sm` | Small line height | -| `--wpds-typography-line-height-md` | Medium line height | -| `--wpds-typography-line-height-lg` | Large line height | -| `--wpds-typography-line-height-xl` | Extra large line height | -| `--wpds-typography-line-height-2xl` | 2X large line height | -| `--wpds-typography-font-weight-regular` | Regular font weight for body text | -| `--wpds-typography-font-weight-medium` | Medium font weight for emphasis and headings | +| Variable name | Description | +| ---------------------------------------- | ---------------------------------------------- | +| `--wpds-typography-font-family-heading` | Headings font family | +| `--wpds-typography-font-family-body` | Body font family | +| `--wpds-typography-font-family-mono` | Monospace font family | +| `--wpds-typography-font-size-xs` | Extra small font size | +| `--wpds-typography-font-size-sm` | Small font size | +| `--wpds-typography-font-size-md` | Medium font size | +| `--wpds-typography-font-size-lg` | Large font size | +| `--wpds-typography-font-size-xl` | Extra large font size | +| `--wpds-typography-font-size-2xl` | 2X large font size | +| `--wpds-typography-line-height-xs` | Extra small line height | +| `--wpds-typography-line-height-sm` | Small line height | +| `--wpds-typography-line-height-md` | Medium line height | +| `--wpds-typography-line-height-lg` | Large line height | +| `--wpds-typography-line-height-xl` | Extra large line height | +| `--wpds-typography-line-height-2xl` | 2X large line height | +| `--wpds-typography-font-weight-regular` | Regular font weight for body text | +| `--wpds-typography-font-weight-semibold` | Semibold font weight for emphasis and headings | diff --git a/packages/theme/src/prebuilt/css/design-tokens.css b/packages/theme/src/prebuilt/css/design-tokens.css index 62627af2a55d18..744b6863db6858 100644 --- a/packages/theme/src/prebuilt/css/design-tokens.css +++ b/packages/theme/src/prebuilt/css/design-tokens.css @@ -339,8 +339,8 @@ --wpds-typography-line-height-2xl: 40px; /* Regular font weight for body text */ --wpds-typography-font-weight-regular: 400; - /* Medium font weight for emphasis and headings */ - --wpds-typography-font-weight-medium: 499; + /* Semibold font weight for emphasis and headings */ + --wpds-typography-font-weight-semibold: 600; } @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) { diff --git a/packages/theme/src/prebuilt/js/design-token-fallbacks.mjs b/packages/theme/src/prebuilt/js/design-token-fallbacks.mjs index d98f1507aa739b..3b897b7aaf32ec 100644 --- a/packages/theme/src/prebuilt/js/design-token-fallbacks.mjs +++ b/packages/theme/src/prebuilt/js/design-token-fallbacks.mjs @@ -177,8 +177,8 @@ export default { '--wpds-typography-font-size-sm': '12px', '--wpds-typography-font-size-xl': '20px', '--wpds-typography-font-size-xs': '11px', - '--wpds-typography-font-weight-medium': '499', '--wpds-typography-font-weight-regular': '400', + '--wpds-typography-font-weight-semibold': '600', '--wpds-typography-line-height-2xl': '40px', '--wpds-typography-line-height-lg': '28px', '--wpds-typography-line-height-md': '24px', diff --git a/packages/theme/src/prebuilt/js/design-tokens.mjs b/packages/theme/src/prebuilt/js/design-tokens.mjs index f87877eb7be76b..f6298997ff6df5 100644 --- a/packages/theme/src/prebuilt/js/design-tokens.mjs +++ b/packages/theme/src/prebuilt/js/design-tokens.mjs @@ -170,5 +170,5 @@ export default [ '--wpds-typography-line-height-xl', '--wpds-typography-line-height-2xl', '--wpds-typography-font-weight-regular', - '--wpds-typography-font-weight-medium', + '--wpds-typography-font-weight-semibold', ]; diff --git a/packages/theme/src/prebuilt/ts/token-types.ts b/packages/theme/src/prebuilt/ts/token-types.ts index 30dfef2f31c1cb..0f68f03bf9206f 100644 --- a/packages/theme/src/prebuilt/ts/token-types.ts +++ b/packages/theme/src/prebuilt/ts/token-types.ts @@ -194,7 +194,7 @@ export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; /** * Font weight variants. */ -export type FontWeight = 'regular' | 'medium'; +export type FontWeight = 'regular' | 'semibold'; /** * Line height scale. diff --git a/packages/theme/terrazzo.config.ts b/packages/theme/terrazzo.config.ts index d1cb0ba866ef91..71f71e09afed01 100644 --- a/packages/theme/terrazzo.config.ts +++ b/packages/theme/terrazzo.config.ts @@ -38,28 +38,6 @@ const config: Config = { pluginCSS( { filename: 'css/design-tokens.css', variableName: ( token ) => makeCSSVar( token.id ), - transform( token ) { - // This addresses a specific browser issue where Chrome renders - // a font-weight of 500 as 600 instead of 400 when the target - // weight is not locally available, which is inconsistent with - // the spec-defined behavior. This workaround ensures that a 400 - // weight is used if the 500 weight is not locally available, - // while still using the 500 weight if it _is_ available. This - // is applied at the plugin layer to ensure the original token - // value can be preserved at the intended 500 weight, where the - // bug only occurs in specific browser rendering. - // - // See: https://issues.chromium.org/issues/40552893 - // See: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight#fallback_weights - if ( - token.id.startsWith( 'wpds-typography.font-weight.' ) && - token.$value === 500 - ) { - return '499'; - } - - return undefined; - }, baseSelector: ':root', modeSelectors: [ { diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json index 826a6a9804b21c..91dfa34f6e0094 100644 --- a/packages/theme/tokens/typography.json +++ b/packages/theme/tokens/typography.json @@ -101,9 +101,9 @@ "$value": 400, "$description": "Regular font weight for body text" }, - "medium": { - "$value": 500, - "$description": "Medium font weight for emphasis and headings" + "semibold": { + "$value": 600, + "$description": "Semibold font weight for emphasis and headings" }, "$extensions": { "com.figma.scopes": [ "FONT_WEIGHT" ] diff --git a/packages/ui/src/button/style.module.css b/packages/ui/src/button/style.module.css index b808abaf3ba6bd..a527c3840afe1b 100644 --- a/packages/ui/src/button/style.module.css +++ b/packages/ui/src/button/style.module.css @@ -10,7 +10,7 @@ .button { /* Internal variables */ - --wp-ui-button-font-weight: var(--wpds-typography-font-weight-medium); + --wp-ui-button-font-weight: var(--wpds-typography-font-weight-semibold); --wp-ui-button-background-color: var(--wpds-color-background-interactive-brand-strong); --wp-ui-button-background-color-active: var(--wpds-color-background-interactive-brand-strong-active); diff --git a/packages/ui/src/text/style.module.css b/packages/ui/src/text/style.module.css index 0c56a55b6cc543..33c9bc2e506664 100644 --- a/packages/ui/src/text/style.module.css +++ b/packages/ui/src/text/style.module.css @@ -10,62 +10,62 @@ provides values for both element-specific CSS defenses. */ .heading-2xl { --_gcd-heading-font-size: var(--wpds-typography-font-size-2xl); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); --_gcd-p-font-size: var(--wpds-typography-font-size-2xl); --_gcd-p-line-height: var(--wpds-typography-line-height-2xl); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-2xl); line-height: var(--wpds-typography-line-height-2xl); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); } .heading-xl { --_gcd-heading-font-size: var(--wpds-typography-font-size-xl); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); --_gcd-p-font-size: var(--wpds-typography-font-size-xl); --_gcd-p-line-height: var(--wpds-typography-line-height-md); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-xl); line-height: var(--wpds-typography-line-height-md); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); } .heading-lg { --_gcd-heading-font-size: var(--wpds-typography-font-size-lg); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); --_gcd-p-font-size: var(--wpds-typography-font-size-lg); --_gcd-p-line-height: var(--wpds-typography-line-height-sm); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-lg); line-height: var(--wpds-typography-line-height-sm); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); } .heading-md { --_gcd-heading-font-size: var(--wpds-typography-font-size-md); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); --_gcd-p-font-size: var(--wpds-typography-font-size-md); --_gcd-p-line-height: var(--wpds-typography-line-height-sm); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-md); line-height: var(--wpds-typography-line-height-sm); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); } .heading-sm { --_gcd-heading-font-size: var(--wpds-typography-font-size-xs); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-medium); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); --_gcd-p-font-size: var(--wpds-typography-font-size-xs); --_gcd-p-line-height: var(--wpds-typography-line-height-xs); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-xs); line-height: var(--wpds-typography-line-height-xs); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); text-transform: uppercase; } diff --git a/packages/ui/src/utils/css/field.module.css b/packages/ui/src/utils/css/field.module.css index 01219829403a3e..82b96fcec957c0 100644 --- a/packages/ui/src/utils/css/field.module.css +++ b/packages/ui/src/utils/css/field.module.css @@ -8,7 +8,7 @@ font-family: var(--wpds-typography-font-family-body); font-size: var(--wpds-typography-font-size-xs); line-height: var(--wp-ui-field-label-line-height); - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); text-transform: uppercase; color: var(--wpds-color-foreground-content-neutral); diff --git a/packages/ui/src/utils/css/global-css-defense.module.css b/packages/ui/src/utils/css/global-css-defense.module.css index 0eaa934663b512..0efd9aa6f8b591 100644 --- a/packages/ui/src/utils/css/global-css-defense.module.css +++ b/packages/ui/src/utils/css/global-css-defense.module.css @@ -103,7 +103,7 @@ p.p { :is(h1, h2, h3, h4, h5, h6).heading { color: var(--_gcd-heading-color, var(--wpds-color-foreground-content-neutral)); font-size: var(--_gcd-heading-font-size, inherit); - font-weight: var(--_gcd-heading-font-weight, var(--wpds-typography-font-weight-medium)); + font-weight: var(--_gcd-heading-font-weight, var(--wpds-typography-font-weight-semibold)); margin: var(--_gcd-heading-margin, 0); } diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss index 34dde5aba6c8d7..9a1c4509bb946a 100644 --- a/packages/widgets/src/blocks/legacy-widget/editor.scss +++ b/packages/widgets/src/blocks/legacy-widget/editor.scss @@ -150,7 +150,7 @@ .interface-complementary-area .wp-block-legacy-widget-inspector-card__name { margin: 0 0 5px; - font-weight: $font-weight-medium; + font-weight: $font-weight-semibold; } // When wide widget is selected it opens in a popover but its container should still have a bit of height. diff --git a/routes/guidelines/style.scss b/routes/guidelines/style.scss index f763af28fd8b3e..e38c793321a608 100644 --- a/routes/guidelines/style.scss +++ b/routes/guidelines/style.scss @@ -44,7 +44,7 @@ align-self: flex-start; // stylelint-disable-next-line plugin/use-logical-properties-and-values -- TODO: Please fix margin-left: -$grid-unit-20; - font-weight: 500; + font-weight: $font-weight-semibold; color: $gray-900; } diff --git a/storybook/decorators/with-max-width-wrapper.jsx b/storybook/decorators/with-max-width-wrapper.jsx index 84fb73f20b68f7..d3a5b2f0fcbbda 100644 --- a/storybook/decorators/with-max-width-wrapper.jsx +++ b/storybook/decorators/with-max-width-wrapper.jsx @@ -18,7 +18,7 @@ const Indicator = styled.div` background: #e0e0e0; text-transform: uppercase; font-size: 11px; - font-weight: 500; + font-weight: 600; color: #757575; margin-top: 24px; `; diff --git a/storybook/decorators/with-text-overflow-containers.tsx b/storybook/decorators/with-text-overflow-containers.tsx index 1b29a92e9d9f81..9d82b94cbfb328 100644 --- a/storybook/decorators/with-text-overflow-containers.tsx +++ b/storybook/decorators/with-text-overflow-containers.tsx @@ -6,7 +6,7 @@ const DEFAULT_HEIGHT = 60; const labelStyles: CSSProperties = { fontSize: 'var(--wpds-typography-font-size-xs)', - fontWeight: 'var(--wpds-typography-font-weight-medium)', + fontWeight: 'var(--wpds-typography-font-weight-semibold)', color: 'var(--wpds-color-foreground-content-neutral-weak)', textTransform: 'uppercase', marginBlockEnd: 'var(--wpds-dimension-gap-xs)', diff --git a/storybook/stories/tokens/typography.mdx b/storybook/stories/tokens/typography.mdx index c3b49b2865f186..3f29bb83d47ed7 100644 --- a/storybook/stories/tokens/typography.mdx +++ b/storybook/stories/tokens/typography.mdx @@ -156,7 +156,7 @@ $font-line-height-2x-large: 40px; ```css $font-weight-regular: 400; -$font-weight-medium: 500; +$font-weight-semibold: 600; ``` ### Families diff --git a/widgets/site-health/components/circle-progress/circle-progress.module.css b/widgets/site-health/components/circle-progress/circle-progress.module.css index abee99140c4402..fe88b60a1c7880 100644 --- a/widgets/site-health/components/circle-progress/circle-progress.module.css +++ b/widgets/site-health/components/circle-progress/circle-progress.module.css @@ -37,5 +37,5 @@ .percentage { fill: var(--site-health-fg); font-size: 36px; - font-weight: var(--wpds-typography-font-weight-medium); + font-weight: var(--wpds-typography-font-weight-semibold); } From ecde8d21cd5a2df393defc67e90cbc74ac2ea87d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 10 Jul 2026 11:34:45 +0200 Subject: [PATCH 02/13] Theme: Add semibold migration changelogs --- packages/base-styles/CHANGELOG.md | 4 ++++ packages/components/CHANGELOG.md | 1 + packages/dataviews/CHANGELOG.md | 1 + packages/theme/CHANGELOG.md | 1 + packages/ui/CHANGELOG.md | 1 + 5 files changed, 8 insertions(+) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index 167192fa711a2b..1f1b8d1084afa7 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Rename `$font-weight-medium` to `$font-weight-semibold` and update its value from `499` to `600` ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). + ### Enhancements - Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698), [#80082](https://github.com/WordPress/gutenberg/pull/80082)). diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2d4c8b030dc54a..71f899577cb933 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -35,6 +35,7 @@ ### Enhancements +- Update emphasized labels and controls from medium (`499`) to semibold (`600`) font weight ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - `Button`: Align focus rings with the design system ([#78646](https://github.com/WordPress/gutenberg/pull/78646)). - The `size` prop no longer has any effect and can be safely removed from the following: diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 1709d877d7ed1e..59e45c9f804f5f 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -16,6 +16,7 @@ ### Enhancements +- Update emphasized labels and controls from medium (`499`) to semibold (`600`) font weight ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - `ValidatedDateControl`: Update validation error message to be announced by screen readers using `speak` instead of an inline `aria-live` region ([#79600](https://github.com/WordPress/gutenberg/pull/79600)) diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md index 2b7caea6cf3247..6c6ee7fc8eba53 100644 --- a/packages/theme/CHANGELOG.md +++ b/packages/theme/CHANGELOG.md @@ -5,6 +5,7 @@ ### Breaking Changes - Remove the `--wpds-elevation-*` design tokens while the complete elevation model is still being defined ([#80099](https://github.com/WordPress/gutenberg/pull/80099)). +- Replace `--wpds-typography-font-weight-medium` with `--wpds-typography-font-weight-semibold` (`600`) ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Make the package ESM-only by removing the published CommonJS entrypoints and requiring Node.js `^20.19.0` or `>=22.13.0`. ([#80063](https://github.com/WordPress/gutenberg/pull/80063)) - Rename `--wpds-color-background-thumb-neutral-disabled` to `--wpds-color-background-thumb-neutral-weak-disabled` so the disabled token belongs to the existing neutral weak thumb family ([#79770](https://github.com/WordPress/gutenberg/pull/79770)). - `ThemeProvider`: reject partially transparent and `transparent` seed colors. `color.primary` and `color.background` now only accept fully opaque seed colors ([#79773](https://github.com/WordPress/gutenberg/pull/79773)). diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index cdb0d3c1639e7b..0b957772366bbe 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -13,6 +13,7 @@ ### Enhancements +- Update headings, buttons, and field labels from medium (`499`) to semibold (`600`) font weight ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - Add `LinkButton` component ([#78944](https://github.com/WordPress/gutenberg/pull/78944)). From 3070b47273a123a2407d00c54515616549d51763 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 10 Jul 2026 11:41:20 +0200 Subject: [PATCH 03/13] Base styles: Retain medium font weight compatibility --- packages/base-styles/CHANGELOG.md | 5 +---- packages/base-styles/_variables.scss | 1 + tools/stylelint/config.js | 8 +++++++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index 1f1b8d1084afa7..c26e25df92d36c 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,12 +2,9 @@ ## Unreleased -### Breaking Changes - -- Rename `$font-weight-medium` to `$font-weight-semibold` and update its value from `499` to `600` ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - ### Enhancements +- Add `$font-weight-semibold` (`600`) while retaining `$font-weight-medium` (`499`) for backwards compatibility ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698), [#80082](https://github.com/WordPress/gutenberg/pull/80082)). ## 10.2.0 (2026-07-01) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 00940419cb7547..c9faf48301b3b7 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -37,6 +37,7 @@ $font-line-height-2x-large: 40px; // Weights $font-weight-regular: 400; +$font-weight-medium: 499; // Kept for backwards compatibility. Do not use in new styles. $font-weight-semibold: 600; // Families diff --git a/tools/stylelint/config.js b/tools/stylelint/config.js index ce7a148da90bb4..3095ac6cbfd943 100644 --- a/tools/stylelint/config.js +++ b/tools/stylelint/config.js @@ -24,11 +24,17 @@ module.exports = { ], 'declaration-property-value-disallowed-list': [ { - '/.*/': [ '/--wp-components-color-/' ], + '/.*/': [ + '/--wp-components-color-/', + '/\\$font-weight-medium/', + ], cursor: [ 'pointer' ], }, { message: ( property, value ) => { + if ( value.includes( '$font-weight-medium' ) ) { + return 'Use `$font-weight-semibold` instead. `$font-weight-medium` is kept for backwards compatibility only.'; + } if ( property === 'cursor' ) { return 'Use the `var( --wpds-cursor-control )` token for interactive non-link controls. If this is for a link, you can disable this rule.'; } From 962e86631d25644e30ede5131ab7918fac7db153 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 10 Jul 2026 12:04:30 +0200 Subject: [PATCH 04/13] Theme: Align legacy typography with tokens --- packages/base-styles/CHANGELOG.md | 2 +- packages/base-styles/_variables.scss | 11 +++++----- .../downloadable-block-list-item/style.scss | 2 +- .../src/components/block-lock/style.scss | 2 +- .../src/components/block-manager/style.scss | 2 +- .../components/block-visibility/style.scss | 2 +- .../test/__snapshots__/control.js.snap | 2 +- .../font-family/stories/index.story.jsx | 2 +- .../src/components/link-control/style.scss | 4 ++-- .../responsive-block-control/style.scss | 2 +- .../skip-to-selected-block/style.scss | 3 ++- packages/block-library/src/more/editor.scss | 2 +- .../block-library/src/nextpage/editor.scss | 2 +- packages/commands/src/components/style.scss | 2 +- packages/components/CHANGELOG.md | 2 +- .../src/date-time/date-picker/styles.ts | 2 +- packages/components/src/heading/hook.ts | 2 +- packages/components/src/modal/style.scss | 2 +- .../components/src/placeholder/style.scss | 2 +- .../test/__snapshots__/index.tsx.snap | 8 ++++---- .../src/toolbar/toolbar-button/style.scss | 2 +- .../components/src/utils/config-values.js | 1 - packages/components/src/utils/font-values.js | 2 +- .../keyboard-shortcut-help-modal/style.scss | 5 +++-- .../src/components/welcome-guide/style.scss | 2 +- .../components/dataviews-filters/style.scss | 2 +- .../src/dataviews/stories/layout-custom.tsx | 3 ++- .../meta-boxes/meta-boxes-area/style.scss | 2 +- .../enable-custom-fields.js.snap | 8 ++++---- .../__snapshots__/meta-boxes-section.js.snap | 6 +++--- .../keyboard-shortcut-help-modal/style.scss | 5 +++-- .../keyboard-shortcut-help-modal/style.scss | 5 +++-- .../components/post-preview-button/index.js | 2 +- .../test/__snapshots__/index.js.snap | 10 +++++----- .../editor/src/components/post-url/style.scss | 2 +- .../src/components/style-book/constants.ts | 2 +- .../components/table-of-contents/style.scss | 2 +- packages/fields/src/fields/slug/style.scss | 4 +++- .../src/font-library/style.scss | 2 +- .../src/screen-revisions/style.scss | 2 +- .../src/stories/index.story.jsx | 2 +- packages/global-styles-ui/src/style.scss | 2 +- .../style.scss | 2 +- .../src/components/media-preview/style.scss | 2 +- .../src/components/rotation-ruler/style.scss | 4 ++-- .../preferences-modal-section/style.scss | 2 +- .../stories/brand-fallbacks.story.tsx | 2 +- .../src/color-ramps/stories/ramp-table.tsx | 8 +++++--- .../src/blocks/legacy-widget/editor.scss | 7 +++---- .../src/blocks/widget-group/editor.scss | 2 +- .../src/components/workflow-menu.scss | 4 ++-- packages/wp-build/CHANGELOG.md | 1 + packages/wp-build/templates/page.php.template | 2 +- .../decorators/with-max-width-wrapper.jsx | 2 +- ...raggable-cross-document-fallback.story.jsx | 6 ++++-- storybook/stories/tokens/typography.mdx | 20 +++++++++---------- storybook/theme.js | 2 +- tools/stylelint/config.js | 4 ++++ 58 files changed, 107 insertions(+), 94 deletions(-) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index c26e25df92d36c..f444efadef3bf4 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Add `$font-weight-semibold` (`600`) while retaining `$font-weight-medium` (`499`) for backwards compatibility ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Add `$font-weight-semibold` (`600`) while retaining `$font-weight-medium` (`499`) for backwards compatibility, and align the legacy font-family variables with the `@wordpress/theme` typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698), [#80082](https://github.com/WordPress/gutenberg/pull/80082)). ## 10.2.0 (2026-07-01) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index c9faf48301b3b7..24df387228e587 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -12,7 +12,11 @@ * Fonts & basic variables. */ -$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; // Todo: deprecate in favor of $family variables +$font-family-headings: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +$font-family-body: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +$font-family-mono: Menlo, Consolas, monaco, monospace; + +$default-font: $font-family-body; // Todo: deprecate in favor of $family variables $default-line-height: 1.4; // Todo: deprecate in favor of $line-height tokens /** @@ -40,11 +44,6 @@ $font-weight-regular: 400; $font-weight-medium: 499; // Kept for backwards compatibility. Do not use in new styles. $font-weight-semibold: 600; -// Families -$font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -$font-family-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -$font-family-mono: Menlo, Consolas, monaco, monospace; - /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss index 497b288d4b9ac1..7d66a70c49ad91 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss +++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss @@ -84,7 +84,7 @@ .block-directory-downloadable-block-list-item__title { display: block; - font-weight: 600; + font-weight: $font-weight-semibold; } .block-directory-downloadable-block-list-item__author { diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss index d3ebd8197d6939..9758a563107171 100644 --- a/packages/block-editor/src/components/block-lock/style.scss +++ b/packages/block-editor/src/components/block-lock/style.scss @@ -29,7 +29,7 @@ padding: $grid-unit-15 0; .components-checkbox-control__label { - font-weight: 600; + font-weight: $font-weight-semibold; } } diff --git a/packages/block-editor/src/components/block-manager/style.scss b/packages/block-editor/src/components/block-manager/style.scss index 71044e7b345895..fb0859065299ad 100644 --- a/packages/block-editor/src/components/block-manager/style.scss +++ b/packages/block-editor/src/components/block-manager/style.scss @@ -21,7 +21,7 @@ z-index: 1; .components-checkbox-control__label { - font-weight: 600; + font-weight: $font-weight-semibold; } } diff --git a/packages/block-editor/src/components/block-visibility/style.scss b/packages/block-editor/src/components/block-visibility/style.scss index 1aeba24425437f..038bdb5bb1e469 100644 --- a/packages/block-editor/src/components/block-visibility/style.scss +++ b/packages/block-editor/src/components/block-visibility/style.scss @@ -29,7 +29,7 @@ } &-checkbox--everywhere { - font-weight: 600; + font-weight: $font-weight-semibold; } &-icon--checked { diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 21c475b3a6ab2f..b4b63d623f30ce 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -2,7 +2,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } diff --git a/packages/block-editor/src/components/font-family/stories/index.story.jsx b/packages/block-editor/src/components/font-family/stories/index.story.jsx index 2f8055988a0521..1ad52bb92c9b98 100644 --- a/packages/block-editor/src/components/font-family/stories/index.story.jsx +++ b/packages/block-editor/src/components/font-family/stories/index.story.jsx @@ -44,7 +44,7 @@ export const Default = { }, { fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + '-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', name: 'System Font', slug: 'system-font', }, diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 061ac588c3d774..fca349171ce912 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -151,7 +151,7 @@ $block-editor-link-control-number-of-actions: 1; width: 100%; mark { - font-weight: 600; + font-weight: $font-weight-semibold; color: inherit; background-color: transparent; } @@ -227,7 +227,7 @@ $block-editor-link-control-number-of-actions: 1; } mark { - font-weight: 600; + font-weight: $font-weight-semibold; color: inherit; background-color: transparent; } diff --git a/packages/block-editor/src/components/responsive-block-control/style.scss b/packages/block-editor/src/components/responsive-block-control/style.scss index dfdd70a6f7644a..b41d6bd8fb081d 100644 --- a/packages/block-editor/src/components/responsive-block-control/style.scss +++ b/packages/block-editor/src/components/responsive-block-control/style.scss @@ -32,7 +32,7 @@ } .block-editor-responsive-block-control__label { - font-weight: 600; + font-weight: $font-weight-semibold; margin-bottom: 0.6em; margin-left: -3px; // visual compensation } diff --git a/packages/block-editor/src/components/skip-to-selected-block/style.scss b/packages/block-editor/src/components/skip-to-selected-block/style.scss index c3a4163cd419d2..9addb939e37810 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/style.scss +++ b/packages/block-editor/src/components/skip-to-selected-block/style.scss @@ -1,3 +1,4 @@ +@use "@wordpress/base-styles/variables" as *; @use "@wordpress/base-styles/z-index" as *; .block-editor-skip-to-selected-block { @@ -6,7 +7,7 @@ &:focus { font-size: 14px; - font-weight: 600; + font-weight: $font-weight-semibold; background: #f1f1f1; z-index: z-index(".skip-to-selected-block"); } diff --git a/packages/block-library/src/more/editor.scss b/packages/block-library/src/more/editor.scss index c67f887c502cb3..aad94f1beba36b 100644 --- a/packages/block-library/src/more/editor.scss +++ b/packages/block-library/src/more/editor.scss @@ -18,7 +18,7 @@ position: relative; font-size: $default-font-size; text-transform: uppercase; - font-weight: 600; + font-weight: $font-weight-semibold; font-family: $default-font; color: $gray-700; display: inline-flex; diff --git a/packages/block-library/src/nextpage/editor.scss b/packages/block-library/src/nextpage/editor.scss index ffb8c9cd8e7534..a51cc8d15a04ed 100644 --- a/packages/block-library/src/nextpage/editor.scss +++ b/packages/block-library/src/nextpage/editor.scss @@ -18,7 +18,7 @@ font-size: $default-font-size; position: relative; text-transform: uppercase; - font-weight: 600; + font-weight: $font-weight-semibold; font-family: $default-font; color: $gray-700; border-radius: 4px; diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss index 5dbdc813f77cf8..c05f55adac89fb 100644 --- a/packages/commands/src/components/style.scss +++ b/packages/commands/src/components/style.scss @@ -196,5 +196,5 @@ $palette-header-height: 48px; .commands-command-menu__item mark { color: inherit; background: unset; - font-weight: 600; + font-weight: $font-weight-semibold; } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 71f899577cb933..a6461b79d8dbee 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -35,7 +35,7 @@ ### Enhancements -- Update emphasized labels and controls from medium (`499`) to semibold (`600`) font weight ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Update emphasized labels and controls from medium (`499`) to semibold (`600`) font weight, and align the default font-family stack with the `@wordpress/theme` body token ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - `Button`: Align focus rings with the design system ([#78646](https://github.com/WordPress/gutenberg/pull/78646)). - The `size` prop no longer has any effect and can be safely removed from the following: diff --git a/packages/components/src/date-time/date-picker/styles.ts b/packages/components/src/date-time/date-picker/styles.ts index 63ca757dabbe3b..078a0048cb30ee 100644 --- a/packages/components/src/date-time/date-picker/styles.ts +++ b/packages/components/src/date-time/date-picker/styles.ts @@ -38,7 +38,7 @@ export const NavigatorHeading = styled( Heading )` grid-column: 2 / 7; strong { - font-weight: ${ CONFIG.fontWeightHeading }; + font-weight: ${ CONFIG.fontWeightSemibold }; } `; diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts index bf7eed2097ee40..f86cdc18a4ce0e 100644 --- a/packages/components/src/heading/hook.ts +++ b/packages/components/src/heading/hook.ts @@ -16,7 +16,7 @@ export function useHeading( level = 2, color = COLORS.theme.foreground, isBlock = true, - weight = CONFIG.fontWeightHeading as React.CSSProperties[ 'fontWeight' ], + weight = CONFIG.fontWeightSemibold as React.CSSProperties[ 'fontWeight' ], ...otherProps } = useContextSystem( props, 'Heading' ); diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index d9c2e9edf29d6f..a3eec6b98afe16 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -208,7 +208,7 @@ .components-modal__header-heading { font-size: $font-size-x-large; - font-weight: 600; + font-weight: $font-weight-semibold; } h1 { diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index d30b88eb8ad30e..99684a39528694 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -42,7 +42,7 @@ } .components-placeholder__label { - font-weight: 600; + font-weight: $font-weight-semibold; align-items: center; display: flex; diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap index a8d423e1cce62a..879e54b2dac95f 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap @@ -2,7 +2,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -337,7 +337,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = exports[`ToggleGroupControl controlled should render correctly with text options 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -578,7 +578,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -907,7 +907,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] exports[`ToggleGroupControl uncontrolled should render correctly with text options 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } diff --git a/packages/components/src/toolbar/toolbar-button/style.scss b/packages/components/src/toolbar/toolbar-button/style.scss index 86e932c2287219..8a28ed7ea79615 100644 --- a/packages/components/src/toolbar/toolbar-button/style.scss +++ b/packages/components/src/toolbar/toolbar-button/style.scss @@ -13,7 +13,7 @@ content: attr(data-subscript); font-family: $default-font; font-size: $default-font-size; - font-weight: 600; + font-weight: $font-weight-semibold; line-height: 12px; position: absolute; right: 8px; diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 470a0f3bc173d2..5dd3e056e0f699 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -51,7 +51,6 @@ export default Object.assign( {}, CONTROL_PROPS, { fontLineHeightBase: '1.4', fontWeight: 'normal', fontWeightSemibold: '600', - fontWeightHeading: '600', gridBase: '4px', elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`, elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`, diff --git a/packages/components/src/utils/font-values.js b/packages/components/src/utils/font-values.js index 4319e6d7339aed..5c61aefbaeda59 100644 --- a/packages/components/src/utils/font-values.js +++ b/packages/components/src/utils/font-values.js @@ -1,6 +1,6 @@ export default { 'default.fontFamily': - "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", + "-apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", 'default.fontSize': '13px', 'helpText.fontSize': '12px', diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/style.scss b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/style.scss index 9b771df67b1097..94c70b0e0a10ce 100644 --- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/style.scss @@ -1,4 +1,5 @@ @use "@wordpress/base-styles/colors" as *; +@use "@wordpress/base-styles/variables" as *; .customize-widgets-keyboard-shortcut-help-modal { &__section { @@ -7,7 +8,7 @@ &__section-title { font-size: 0.9rem; - font-weight: 600; + font-weight: $font-weight-semibold; } &__shortcut { @@ -27,7 +28,7 @@ } &__shortcut-term { - font-weight: 600; + font-weight: $font-weight-semibold; margin: 0 0 0 1rem; text-align: right; } diff --git a/packages/customize-widgets/src/components/welcome-guide/style.scss b/packages/customize-widgets/src/components/welcome-guide/style.scss index b4008a11a13808..6dd8312553eed8 100644 --- a/packages/customize-widgets/src/components/welcome-guide/style.scss +++ b/packages/customize-widgets/src/components/welcome-guide/style.scss @@ -14,7 +14,7 @@ // Extra specificity to override `.wrap h1` styles. .wrap &__heading { font-size: 18px; - font-weight: 600; + font-weight: $font-weight-semibold; } &__text { diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss index 2beff89498daec..12a8f950e0c2c2 100644 --- a/packages/dataviews/src/components/dataviews-filters/style.scss +++ b/packages/dataviews/src/components/dataviews-filters/style.scss @@ -178,7 +178,7 @@ .dataviews-filters__search-widget-filter-combobox-item-value { [data-user-value] { - font-weight: 600; + font-weight: vars.$font-weight-semibold; } } } diff --git a/packages/dataviews/src/dataviews/stories/layout-custom.tsx b/packages/dataviews/src/dataviews/stories/layout-custom.tsx index 2b13c6fc24d142..7a43668fad3983 100644 --- a/packages/dataviews/src/dataviews/stories/layout-custom.tsx +++ b/packages/dataviews/src/dataviews/stories/layout-custom.tsx @@ -55,7 +55,8 @@ function PosterGrid( { items }: { items: typeof data } ) { style={ { margin: '0 0 4px', fontSize: '18px', - fontWeight: 600, + fontWeight: + 'var(--wpds-typography-font-weight-semibold)', textShadow: '0 1px 2px rgba(0,0,0,0.5)', } } > diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss index e471bbabf1315d..4df7e7dbda9d11 100644 --- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss +++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss @@ -39,7 +39,7 @@ #poststuff h2.hndle { /* WordPress selectors yolo */ box-sizing: border-box; color: inherit; - font-weight: 600; + font-weight: $font-weight-semibold; outline: none; padding: 0 $grid-unit-30; position: relative; diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap index bcd40f0396b47f..198e9b2d420499 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap @@ -2,7 +2,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation message when toggled on 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -75,7 +75,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields are enabled 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -138,7 +138,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmation message when toggled off 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -212,7 +212,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fields are disabled 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap index 4136e52d923e76..c2694cf1a8b8d2 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap @@ -2,7 +2,7 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -81,7 +81,7 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = ` exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -248,7 +248,7 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1` exports[`MetaBoxesSection renders meta box options 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } diff --git a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss index 7a9864ff05b23d..8a936ce7fb4cf0 100644 --- a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss @@ -1,4 +1,5 @@ @use "@wordpress/base-styles/colors" as *; +@use "@wordpress/base-styles/variables" as *; .edit-widgets-keyboard-shortcut-help-modal { &__section { @@ -7,7 +8,7 @@ &__section-title { font-size: 0.9rem; - font-weight: 600; + font-weight: $font-weight-semibold; } &__shortcut { @@ -27,7 +28,7 @@ } &__shortcut-term { - font-weight: 600; + font-weight: $font-weight-semibold; margin: 0 0 0 1rem; text-align: right; } diff --git a/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss b/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss index 874178f9802512..52c1f5ab0f6aad 100644 --- a/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss @@ -1,4 +1,5 @@ @use "@wordpress/base-styles/colors" as *; +@use "@wordpress/base-styles/variables" as *; .editor-keyboard-shortcut-help-modal { &__section { @@ -7,7 +8,7 @@ &__section-title { font-size: 0.9rem; - font-weight: 600; + font-weight: $font-weight-semibold; } &__shortcut { @@ -27,7 +28,7 @@ } &__shortcut-term { - font-weight: 600; + font-weight: $font-weight-semibold; margin: 0 0 0 1rem; text-align: right; } diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js index 3e0bb433b1cc75..707d37b389a33f 100644 --- a/packages/editor/src/components/post-preview-button/index.js +++ b/packages/editor/src/components/post-preview-button/index.js @@ -83,7 +83,7 @@ function buildInterstitialMarkup() { } p { text-align: center; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } `; diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap index 4fb9c4fc4bc6a0..4acfbd57fb45d1 100644 --- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -2,7 +2,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is published 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -206,7 +206,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu exports[`PostPublishPanel should render the post-publish panel if the post is scheduled 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -388,7 +388,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc exports[`PostPublishPanel should render the pre-publish panel if post status is scheduled but date is before now 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -520,7 +520,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is exports[`PostPublishPanel should render the pre-publish panel if the post is not saving, published or scheduled 1`] = ` .emotion-0 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } @@ -696,7 +696,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1 } .emotion-6 { - font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; box-sizing: border-box; } diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss index 2fc312cb8eb071..c78facda1257f4 100644 --- a/packages/editor/src/components/post-url/style.scss +++ b/packages/editor/src/components/post-url/style.scss @@ -38,7 +38,7 @@ .editor-post-url__link-slug { - font-weight: 600; + font-weight: $font-weight-semibold; } // TODO: This might indicate a need to update the InputControl itself, as diff --git a/packages/editor/src/components/style-book/constants.ts b/packages/editor/src/components/style-book/constants.ts index 7e4246868c5e1f..b6ffb2dcc3392c 100644 --- a/packages/editor/src/components/style-book/constants.ts +++ b/packages/editor/src/components/style-book/constants.ts @@ -274,7 +274,7 @@ export const STYLE_BOOK_IFRAME_STYLES = ` .editor-style-book__subcategory-title, .editor-style-book__example-title { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; font-weight: normal; line-height: normal; diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss index 410c2760576f0f..d3b793a3ed194e 100644 --- a/packages/editor/src/components/table-of-contents/style.scss +++ b/packages/editor/src/components/table-of-contents/style.scss @@ -72,5 +72,5 @@ display: block; margin-top: 20px; font-size: 15px; - font-weight: 600; + font-weight: $font-weight-semibold; } diff --git a/packages/fields/src/fields/slug/style.scss b/packages/fields/src/fields/slug/style.scss index 605321043930b2..df204aa5debea5 100644 --- a/packages/fields/src/fields/slug/style.scss +++ b/packages/fields/src/fields/slug/style.scss @@ -1,3 +1,5 @@ +@use "@wordpress/base-styles/variables" as *; + .fields-controls__slug { // Reset `fieldset` browser defaults. border: 0; @@ -21,7 +23,7 @@ flex-direction: column; .fields-controls__slug-help-slug { - font-weight: 600; + font-weight: $font-weight-semibold; } } } diff --git a/packages/global-styles-ui/src/font-library/style.scss b/packages/global-styles-ui/src/font-library/style.scss index 13f3771c501a21..61dfc06d81893d 100644 --- a/packages/global-styles-ui/src/font-library/style.scss +++ b/packages/global-styles-ui/src/font-library/style.scss @@ -95,7 +95,7 @@ $footer-height: 90px; .font-library__fonts-title { text-transform: uppercase; font-size: 11px; - font-weight: 600; + font-weight: variables.$font-weight-semibold; margin-top: 0; margin-bottom: 0; } diff --git a/packages/global-styles-ui/src/screen-revisions/style.scss b/packages/global-styles-ui/src/screen-revisions/style.scss index e33b061f2b915d..0ba7dcca93a3dc 100644 --- a/packages/global-styles-ui/src/screen-revisions/style.scss +++ b/packages/global-styles-ui/src/screen-revisions/style.scss @@ -116,7 +116,7 @@ gap: $grid-unit-10; .global-styles-ui-screen-revisions__date { text-transform: uppercase; - font-weight: 600; + font-weight: $font-weight-semibold; font-size: 12px; } } diff --git a/packages/global-styles-ui/src/stories/index.story.jsx b/packages/global-styles-ui/src/stories/index.story.jsx index 69d4e8b1a829ec..aebb39c6bf4d45 100644 --- a/packages/global-styles-ui/src/stories/index.story.jsx +++ b/packages/global-styles-ui/src/stories/index.story.jsx @@ -366,7 +366,7 @@ const BASE_SETTINGS = { theme: [ { fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + '-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', name: 'System Font', slug: 'system-font', }, diff --git a/packages/global-styles-ui/src/style.scss b/packages/global-styles-ui/src/style.scss index 7e405028771876..fe695d92e8ddc0 100644 --- a/packages/global-styles-ui/src/style.scss +++ b/packages/global-styles-ui/src/style.scss @@ -87,7 +87,7 @@ .global-styles-ui-section-title { color: colors.$gray-800; - font-weight: 600; + font-weight: variables.$font-weight-semibold; line-height: 1.2; padding: 16px 16px 0; margin: 0; diff --git a/packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss b/packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss index f3271aec8a76db..603613e99d6e9c 100644 --- a/packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss +++ b/packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss @@ -35,7 +35,7 @@ .media-editor-keyboard-shortcuts-modal__shortcut-term { background: none; - font-weight: 600; + font-weight: $font-weight-semibold; margin: 0 0 0 1rem; padding: 0; text-align: right; diff --git a/packages/media-editor/src/components/media-preview/style.scss b/packages/media-editor/src/components/media-preview/style.scss index 7d2f9929ba2201..2c2e7c1c7be0d7 100644 --- a/packages/media-editor/src/components/media-preview/style.scss +++ b/packages/media-editor/src/components/media-preview/style.scss @@ -59,7 +59,7 @@ } &__file-name { - font-weight: 600; + font-weight: $font-weight-semibold; margin-bottom: $grid-unit-10; } diff --git a/packages/media-editor/src/components/rotation-ruler/style.scss b/packages/media-editor/src/components/rotation-ruler/style.scss index 8c4a102ba1217f..c46e4821fc268a 100644 --- a/packages/media-editor/src/components/rotation-ruler/style.scss +++ b/packages/media-editor/src/components/rotation-ruler/style.scss @@ -18,7 +18,7 @@ $rotation-ruler-accent: var(--wp-admin-theme-color, #3858e9); padding: 0 $grid-unit-10; box-sizing: border-box; color: $gray-900; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: $font-family-body; user-select: none; touch-action: none; cursor: ew-resize; @@ -134,7 +134,7 @@ $rotation-ruler-accent: var(--wp-admin-theme-color, #3858e9); height: 14px; transform: translateX(-50%); font-size: 12px; - font-weight: 600; + font-weight: $font-weight-semibold; line-height: 14px; color: $gray-900; pointer-events: none; diff --git a/packages/preferences/src/components/preferences-modal-section/style.scss b/packages/preferences/src/components/preferences-modal-section/style.scss index fe5214082b2564..aac85458cdb46f 100644 --- a/packages/preferences/src/components/preferences-modal-section/style.scss +++ b/packages/preferences/src/components/preferences-modal-section/style.scss @@ -19,7 +19,7 @@ .preferences-modal__section-title { font-size: 0.9rem; - font-weight: 600; + font-weight: $font-weight-semibold; margin-top: 0; } diff --git a/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx b/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx index 01a122208acc53..b73d790366d848 100644 --- a/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx +++ b/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx @@ -120,7 +120,7 @@ export const Default: StoryObj< typeof Verifier > = { const headerStyle: React.CSSProperties = { fontSize: 11, - fontWeight: 600, + fontWeight: 'var(--wpds-typography-font-weight-semibold)', color: '#757575', paddingBottom: 4, borderBottom: '1px solid #e0e0e0', diff --git a/packages/theme/src/color-ramps/stories/ramp-table.tsx b/packages/theme/src/color-ramps/stories/ramp-table.tsx index 437832bf9aee8c..9f2f498a23658a 100644 --- a/packages/theme/src/color-ramps/stories/ramp-table.tsx +++ b/packages/theme/src/color-ramps/stories/ramp-table.tsx @@ -48,7 +48,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >( style={ { display: 'grid', gridTemplateColumns: `repeat(${ RAMP_TOKENS_ORDER.length }, minmax(max-content, 1fr))`, - fontFamily: '-apple-system, "system-ui", sans-serif', + fontFamily: 'var(--wpds-typography-font-family-body)', alignItems: 'end', } } > @@ -59,7 +59,8 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >( textAlign: 'center', padding: '8px 4px', fontSize: 11, - fontWeight: 500, + fontWeight: + 'var(--wpds-typography-font-weight-semibold)', color: ramps[ 0 ].ramp.fgSurface4, } } > @@ -96,7 +97,8 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >( placeItems: 'center', width: '100%', fontSize: 8, - fontWeight: 500, + fontWeight: + 'var(--wpds-typography-font-weight-semibold)', color: tokenName === 'surface2' ? ramp.fgSurface4 diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss index 9a1c4509bb946a..fff5f242c5950e 100644 --- a/packages/widgets/src/blocks/legacy-widget/editor.scss +++ b/packages/widgets/src/blocks/legacy-widget/editor.scss @@ -16,7 +16,7 @@ color: $black; font-family: $default-font; font-size: 14px; - font-weight: 600; + font-weight: $font-weight-semibold; margin: 0 0 $grid-unit-15 0; } @@ -24,7 +24,7 @@ border: none; box-shadow: none; display: block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: $font-family-body; p { margin: $grid-unit-10 0; @@ -134,7 +134,7 @@ h3 { font-size: 14px; - font-weight: 600; + font-weight: $font-weight-semibold; margin: $grid-unit-05 0; } @@ -165,4 +165,3 @@ .components-popover__content .wp-block-legacy-widget__edit-form { min-width: 400px; } - diff --git a/packages/widgets/src/blocks/widget-group/editor.scss b/packages/widgets/src/blocks/widget-group/editor.scss index 4e442d8c96aebc..84b9d2e9525885 100644 --- a/packages/widgets/src/blocks/widget-group/editor.scss +++ b/packages/widgets/src/blocks/widget-group/editor.scss @@ -5,7 +5,7 @@ .widget-title { font-family: $default-font; font-size: 18px; - font-weight: 600; + font-weight: $font-weight-semibold; } } diff --git a/packages/workflow/src/components/workflow-menu.scss b/packages/workflow/src/components/workflow-menu.scss index 8d2ca561e6e7fd..e6c1a3462b4ea9 100644 --- a/packages/workflow/src/components/workflow-menu.scss +++ b/packages/workflow/src/components/workflow-menu.scss @@ -138,7 +138,7 @@ .workflows-workflow-menu__item mark { color: inherit; background: unset; - font-weight: 600; + font-weight: $font-weight-semibold; } .workflows-workflow-menu__output { @@ -153,7 +153,7 @@ h3 { margin: 0 0 $grid-unit-05; font-size: 16px; - font-weight: 600; + font-weight: $font-weight-semibold; color: $gray-900; } } diff --git a/packages/wp-build/CHANGELOG.md b/packages/wp-build/CHANGELOG.md index 19c89124723be5..ff839bdeb57071 100644 --- a/packages/wp-build/CHANGELOG.md +++ b/packages/wp-build/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Align the generated single-page admin font-family stack with the `@wordpress/theme` body token ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widgets: carry the optional metadata fields from `widget.json` into the generated PHP registry: `title`, `description`, `category`, `keywords`, `textdomain`, and the `help` note, so hosts can translate diff --git a/packages/wp-build/templates/page.php.template b/packages/wp-build/templates/page.php.template index adc7274a74056f..3f78099a319d3f 100644 --- a/packages/wp-build/templates/page.php.template +++ b/packages/wp-build/templates/page.php.template @@ -251,7 +251,7 @@ function {{PREFIX}}_{{PAGE_SLUG_UNDERSCORE}}_render_page() { html { background: #f1f1f1; color: #444; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4em; } diff --git a/storybook/decorators/with-max-width-wrapper.jsx b/storybook/decorators/with-max-width-wrapper.jsx index d3a5b2f0fcbbda..b9425f46e69e4d 100644 --- a/storybook/decorators/with-max-width-wrapper.jsx +++ b/storybook/decorators/with-max-width-wrapper.jsx @@ -18,7 +18,7 @@ const Indicator = styled.div` background: #e0e0e0; text-transform: uppercase; font-size: 11px; - font-weight: 600; + font-weight: var( --wpds-typography-font-weight-semibold ); color: #757575; margin-top: 24px; `; diff --git a/storybook/stories/playground/draggable-cross-document-fallback.story.jsx b/storybook/stories/playground/draggable-cross-document-fallback.story.jsx index 3d294dcdae1c7a..f68bb15c5314b3 100644 --- a/storybook/stories/playground/draggable-cross-document-fallback.story.jsx +++ b/storybook/stories/playground/draggable-cross-document-fallback.story.jsx @@ -82,7 +82,8 @@ export const InsideIframeWithCompatSlot = () => { background: '#f0b849', borderRadius: 4, color: '#1e1e1e', - fontWeight: 600, + fontWeight: + 'var(--wpds-typography-font-weight-semibold)', padding: '8px 12px', } } > @@ -102,7 +103,8 @@ export const InsideIframeWithCompatSlot = () => { color: 'white', cursor: 'grab', display: 'inline-flex', - fontWeight: 600, + fontWeight: + 'var(--wpds-typography-font-weight-semibold)', height: 56, justifyContent: 'center', padding: '0 16px', diff --git a/storybook/stories/tokens/typography.mdx b/storybook/stories/tokens/typography.mdx index 3f29bb83d47ed7..a908114cbe207f 100644 --- a/storybook/stories/tokens/typography.mdx +++ b/storybook/stories/tokens/typography.mdx @@ -4,11 +4,11 @@ import { Meta, Typeset } from '@storybook/addon-docs/blocks'; export const typography = { type: { - primary: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + primary: '-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }, weight: { regular: '400', - medium: '500', + semibold: '600', }, size: { s1: 11, @@ -50,7 +50,7 @@ They are defined as SASS mixins and can be used like so: Number(typography.size.s2), Number(typography.size.s1), ]} - fontWeight={typography.weight.medium} + fontWeight={typography.weight.semibold} sampleText={SampleTextHeading} fontFamily={typography.type.primary} /> @@ -65,23 +65,23 @@ They are defined as SASS mixins and can be used like so: heading-2x-large - `$font-family-headings`, `font-weight-medium`, `font-size-2x-large`, `line-height-2x-large` + `$font-family-headings`, `font-weight-semibold`, `font-size-2x-large`, `line-height-2x-large` heading-x-large - `$font-family-headings`, `font-weight-medium`, `font-size-x-large`, `line-height-medium` + `$font-family-headings`, `font-weight-semibold`, `font-size-x-large`, `line-height-medium` heading-large - `$font-family-headings`, `font-weight-medium`, `font-size-large`, `line-height-small` + `$font-family-headings`, `font-weight-semibold`, `font-size-large`, `line-height-small` heading-medium - `$font-family-headings`, `font-weight-medium`, `font-size-medium`, `line-height-small` + `$font-family-headings`, `font-weight-semibold`, `font-size-medium`, `line-height-small` heading-small - `$font-family-headings`, `font-weight-medium`, `font-size-x-small`, `line-height-x-small` + `$font-family-headings`, `font-weight-semibold`, `font-size-x-small`, `line-height-x-small` @@ -162,8 +162,8 @@ $font-weight-semibold: 600; ### Families ```css -$font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -$font-family-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +$font-family-headings: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +$font-family-body: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; $font-family-mono: Menlo, Consolas, monaco, monospace; ``` diff --git a/storybook/theme.js b/storybook/theme.js index 7c63350987faee..9961ff7e2dc7f3 100644 --- a/storybook/theme.js +++ b/storybook/theme.js @@ -10,7 +10,7 @@ export default create( { // Typography fontBase: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + '-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', fontCode: 'monospace', // diff --git a/tools/stylelint/config.js b/tools/stylelint/config.js index 3095ac6cbfd943..f85f6c809c5610 100644 --- a/tools/stylelint/config.js +++ b/tools/stylelint/config.js @@ -28,6 +28,7 @@ module.exports = { '/--wp-components-color-/', '/\\$font-weight-medium/', ], + 'font-weight': [ '500', '600' ], cursor: [ 'pointer' ], }, { @@ -35,6 +36,9 @@ module.exports = { if ( value.includes( '$font-weight-medium' ) ) { return 'Use `$font-weight-semibold` instead. `$font-weight-medium` is kept for backwards compatibility only.'; } + if ( property === 'font-weight' ) { + return 'Use the semibold design token or `$font-weight-semibold` instead of a literal 500 or 600 font weight.'; + } if ( property === 'cursor' ) { return 'Use the `var( --wpds-cursor-control )` token for interactive non-link controls. If this is for a link, you can disable this rule.'; } From b9d8cf867db39adf72dd3a3a6ea50f6a83541e62 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 10 Jul 2026 12:13:49 +0200 Subject: [PATCH 05/13] Typography: Remove remaining 500 font weight uses --- .../assets/dashboard-widgets-pipeline.svg | 2 +- packages/block-editor/CHANGELOG.md | 1 + .../src/utils/format-font-weight.ts | 3 -- .../src/utils/get-font-styles-and-weights.ts | 8 ++-- .../src/utils/test/format-font-weight.js | 4 -- .../utils/test/get-font-styles-and-weights.js | 40 ------------------- packages/components/src/menu/group-label.tsx | 3 +- packages/components/src/text/README.md | 2 +- packages/components/src/text/types.ts | 14 +++---- packages/edit-site/CHANGELOG.md | 1 + .../add-custom-template-modal-content.js | 6 +-- .../add-new-template-legacy/index.js | 2 +- .../add-custom-template-modal-content.js | 6 +-- .../src/components/add-new-template/index.js | 2 +- packages/global-styles-ui/CHANGELOG.md | 1 + .../src/font-library/types.ts | 1 - .../src/font-library/utils/constants.ts | 1 - .../src/font-library/utils/sort-font-faces.ts | 2 +- .../src/font-library/utils/toggleFont.ts | 2 +- packages/server-side-render/src/test/index.ts | 2 +- .../styles/variation-new-font-variations.json | 8 ++-- routes/connectors-home/default-connectors.tsx | 2 +- .../components/guideline-actions-section.tsx | 6 ++- .../add-custom-template-modal-content.tsx | 6 +-- .../template-list/add-new-template/index.tsx | 2 +- .../stories/playground/zoom-out/pattern.js | 8 ++-- 26 files changed, 46 insertions(+), 89 deletions(-) diff --git a/docs/explanations/architecture/assets/dashboard-widgets-pipeline.svg b/docs/explanations/architecture/assets/dashboard-widgets-pipeline.svg index e7477d34a3066f..f41522910693c9 100644 --- a/docs/explanations/architecture/assets/dashboard-widgets-pipeline.svg +++ b/docs/explanations/architecture/assets/dashboard-widgets-pipeline.svg @@ -48,7 +48,7 @@ - Host · dashboard, sidebar, plugin panel… + Host · dashboard, sidebar, plugin panel… owns layout · chrome · persistence diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 0cb1eb1665f764..a757c7d680d956 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -28,6 +28,7 @@ ### Enhancements +- Remove medium (`500`) from the default and variable font-weight options in favor of semibold (`600`) ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - Inserter media categories support an optional `emptyMessage`, shown in place of the generic "No results found" notice, that also keeps a source listed when it has no items. The media panel additionally renders attach/detach affordances for attached images ([#79336](https://github.com/WordPress/gutenberg/pull/79336)). diff --git a/packages/block-editor/src/utils/format-font-weight.ts b/packages/block-editor/src/utils/format-font-weight.ts index cc0a4ee33dea57..25896e41e90bb7 100644 --- a/packages/block-editor/src/utils/format-font-weight.ts +++ b/packages/block-editor/src/utils/format-font-weight.ts @@ -45,9 +45,6 @@ export function formatFontWeight( case '300': name = _x( 'Light', 'font weight' ); break; - case '500': - name = _x( 'Medium', 'font weight' ); - break; case '600': name = _x( 'Semi Bold', 'font weight' ); break; diff --git a/packages/block-editor/src/utils/get-font-styles-and-weights.ts b/packages/block-editor/src/utils/get-font-styles-and-weights.ts index 9469ece010a093..3ec318df764aaa 100644 --- a/packages/block-editor/src/utils/get-font-styles-and-weights.ts +++ b/packages/block-editor/src/utils/get-font-styles-and-weights.ts @@ -42,10 +42,6 @@ const FONT_WEIGHTS = [ name: _x( 'Regular', 'font weight' ), value: '400', }, - { - name: _x( 'Medium', 'font weight' ), - value: '500', - }, { name: _x( 'Semi Bold', 'font weight' ), value: '600', @@ -100,6 +96,10 @@ export function getFontStylesAndWeights( // Create font weight options for available variable weights. for ( let i = startValue; i <= endValue; i++ ) { + // Skip the retired medium step in favor of semibold. + if ( i === 5 ) { + continue; + } const fontWeightValue = `${ i.toString() }00`; if ( ! fontWeights.some( diff --git a/packages/block-editor/src/utils/test/format-font-weight.js b/packages/block-editor/src/utils/test/format-font-weight.js index 8830e45532acfe..f701a8af959ab5 100644 --- a/packages/block-editor/src/utils/test/format-font-weight.js +++ b/packages/block-editor/src/utils/test/format-font-weight.js @@ -30,10 +30,6 @@ describe( 'formatFontWeight', () => { name: 'Regular', value: '400', } ); - expect( formatFontWeight( '500' ) ).toEqual( { - name: 'Medium', - value: '500', - } ); expect( formatFontWeight( '600' ) ).toEqual( { name: 'Semi Bold', value: '600', diff --git a/packages/block-editor/src/utils/test/get-font-styles-and-weights.js b/packages/block-editor/src/utils/test/get-font-styles-and-weights.js index 7c50409bae1acc..4492f878ba30e0 100644 --- a/packages/block-editor/src/utils/test/get-font-styles-and-weights.js +++ b/packages/block-editor/src/utils/test/get-font-styles-and-weights.js @@ -33,10 +33,6 @@ describe( 'getFontStylesAndWeights', () => { name: 'Regular', value: '400', }, - { - name: 'Medium', - value: '500', - }, { name: 'Semi Bold', value: '600', @@ -91,14 +87,6 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, - { - key: 'normal-500', - name: 'Medium', - style: { - fontStyle: 'normal', - fontWeight: '500', - }, - }, { key: 'normal-600', name: 'Semi Bold', @@ -171,14 +159,6 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, - { - key: 'italic-500', - name: 'Medium Italic', - style: { - fontStyle: 'italic', - fontWeight: '500', - }, - }, { key: 'italic-600', name: 'Semi Bold Italic', @@ -251,10 +231,6 @@ describe( 'getFontStylesAndWeights', () => { name: 'Regular', value: '400', }, - { - name: 'Medium', - value: '500', - }, { name: 'Semi Bold', value: '600', @@ -273,14 +249,6 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, - { - key: 'normal-500', - name: 'Medium', - style: { - fontStyle: 'normal', - fontWeight: '500', - }, - }, { key: 'normal-600', name: 'Semi Bold', @@ -305,14 +273,6 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, - { - key: 'italic-500', - name: 'Medium Italic', - style: { - fontStyle: 'italic', - fontWeight: '500', - }, - }, { key: 'italic-600', name: 'Semi Bold Italic', diff --git a/packages/components/src/menu/group-label.tsx b/packages/components/src/menu/group-label.tsx index ce6ecb06900d06..d2d6480bf89078 100644 --- a/packages/components/src/menu/group-label.tsx +++ b/packages/components/src/menu/group-label.tsx @@ -9,6 +9,7 @@ import { forwardRef, useContext } from '@wordpress/element'; import type { WordPressComponentProps } from '../context'; import { Context } from './context'; import { Text } from '../text'; +import { CONFIG } from '../utils'; import type { GroupLabelProps } from './types'; import * as Styled from './styles'; @@ -33,7 +34,7 @@ export const GroupLabel = forwardRef< upperCase variant="muted" size="11px" - weight={ 500 } + weight={ CONFIG.fontWeightSemibold } lineHeight="16px" /> } diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md index 8ee95c661ae909..82340894a874e3 100644 --- a/packages/components/src/text/README.md +++ b/packages/components/src/text/README.md @@ -240,6 +240,6 @@ function Example() { ### weight -**Type**: `CSSProperties['fontWeight']`,`TextWeight` +**Type**: `CSSProperties['fontWeight']` Adjusts font-weight of the text. diff --git a/packages/components/src/text/types.ts b/packages/components/src/text/types.ts index 0b373adf49a729..fad87b69d13780 100644 --- a/packages/components/src/text/types.ts +++ b/packages/components/src/text/types.ts @@ -1,14 +1,14 @@ -/** - * Internal dependencies - */ -import type { TruncateProps } from '../truncate/types'; - /** * External dependencies */ import type { CSSProperties } from 'react'; import type { FindAllArgs } from 'highlight-words-core'; +/** + * Internal dependencies + */ +import type { TruncateProps } from '../truncate/types'; + export type TextSize = | 'body' | 'caption' @@ -19,8 +19,6 @@ export type TextSize = type TextVariant = 'muted'; -type TextWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; - export interface Props extends TruncateProps { /** * Adjusts the text alignment. @@ -100,7 +98,7 @@ export interface Props extends TruncateProps { * * @default 'normal' */ - weight?: CSSProperties[ 'fontWeight' ] | TextWeight; + weight?: CSSProperties[ 'fontWeight' ]; /** * Adjusts letter-spacing of the text. */ diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md index 3fbc9724f6171a..7c59febb4ff3d9 100644 --- a/packages/edit-site/CHANGELOG.md +++ b/packages/edit-site/CHANGELOG.md @@ -8,6 +8,7 @@ ### Enhancements +- Update template-selection labels from medium (`500`) to semibold (`600`) font weight ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 6.50.0 (2026-07-01) diff --git a/packages/edit-site/src/components/add-new-template-legacy/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template-legacy/add-custom-template-modal-content.js index b66b81e5ae83d4..59856150a71730 100644 --- a/packages/edit-site/src/components/add-new-template-legacy/add-custom-template-modal-content.js +++ b/packages/edit-site/src/components/add-new-template-legacy/add-custom-template-modal-content.js @@ -54,7 +54,7 @@ function SuggestionListItem( { { entityForSuggestions.labels.all_items } @@ -249,7 +249,7 @@ function AddCustomTemplateModalContent( { > { entityForSuggestions.labels.singular_name } diff --git a/packages/edit-site/src/components/add-new-template-legacy/index.js b/packages/edit-site/src/components/add-new-template-legacy/index.js index e1217c956bcc51..a82118871cff3f 100644 --- a/packages/edit-site/src/components/add-new-template-legacy/index.js +++ b/packages/edit-site/src/components/add-new-template-legacy/index.js @@ -132,7 +132,7 @@ function TemplateListItem( { > { title } diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js index 539206513607cc..88974e84ca994d 100644 --- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js +++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js @@ -54,7 +54,7 @@ function SuggestionListItem( { { entityForSuggestions.labels.all_items } @@ -247,7 +247,7 @@ function AddCustomTemplateModalContent( { > { entityForSuggestions.labels.singular_name } diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js index 015440ddf7f08c..3a67066b98ce1a 100644 --- a/packages/edit-site/src/components/add-new-template/index.js +++ b/packages/edit-site/src/components/add-new-template/index.js @@ -131,7 +131,7 @@ function TemplateListItem( { > { title } diff --git a/packages/global-styles-ui/CHANGELOG.md b/packages/global-styles-ui/CHANGELOG.md index 711933269207e7..7f71bc138642dc 100644 --- a/packages/global-styles-ui/CHANGELOG.md +++ b/packages/global-styles-ui/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Remove medium (`500`) from the Font Library's predefined font weights in favor of semibold (`600`) ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 1.17.0 (2026-07-01) diff --git a/packages/global-styles-ui/src/font-library/types.ts b/packages/global-styles-ui/src/font-library/types.ts index 551f9555fcdea0..ae05c66896710b 100644 --- a/packages/global-styles-ui/src/font-library/types.ts +++ b/packages/global-styles-ui/src/font-library/types.ts @@ -103,7 +103,6 @@ export type FontWeight = | '200' | '300' | '400' - | '500' | '600' | '700' | '800' diff --git a/packages/global-styles-ui/src/font-library/utils/constants.ts b/packages/global-styles-ui/src/font-library/utils/constants.ts index 519b8ffa430535..cf589000283848 100644 --- a/packages/global-styles-ui/src/font-library/utils/constants.ts +++ b/packages/global-styles-ui/src/font-library/utils/constants.ts @@ -10,7 +10,6 @@ export const FONT_WEIGHTS: Record< string, string > = { 200: _x( 'Extra-light', 'font weight' ), 300: _x( 'Light', 'font weight' ), 400: _x( 'Normal', 'font weight' ), - 500: _x( 'Medium', 'font weight' ), 600: _x( 'Semi-bold', 'font weight' ), 700: _x( 'Bold', 'font weight' ), 800: _x( 'Extra-bold', 'font weight' ), diff --git a/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts b/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts index 5b56ceb93f3f77..afd4286adf081e 100644 --- a/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts +++ b/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts @@ -10,7 +10,7 @@ function getNumericFontWeight( value: string ): number { case 'bold': return 700; case 'bolder': - return 500; + return 600; case 'lighter': return 300; default: diff --git a/packages/global-styles-ui/src/font-library/utils/toggleFont.ts b/packages/global-styles-ui/src/font-library/utils/toggleFont.ts index b49013d6e52cbd..6c832864445286 100644 --- a/packages/global-styles-ui/src/font-library/utils/toggleFont.ts +++ b/packages/global-styles-ui/src/font-library/utils/toggleFont.ts @@ -27,7 +27,7 @@ * toggleFont({ slug: 'roboto' }, { fontWeight: '400', fontStyle: 'normal' }, customFonts); * // This will remove the specified face from 'roboto' in customFonts * - * toggleFont({ slug: 'roboto' }, { fontWeight: '500', fontStyle: 'normal' }, customFonts); + * toggleFont({ slug: 'roboto' }, { fontWeight: '600', fontStyle: 'normal' }, customFonts); * // This will add the specified face to 'roboto' in customFonts */ /** diff --git a/packages/server-side-render/src/test/index.ts b/packages/server-side-render/src/test/index.ts index b5757dbe973a67..351272893a1782 100644 --- a/packages/server-side-render/src/test/index.ts +++ b/packages/server-side-render/src/test/index.ts @@ -122,7 +122,7 @@ describe( 'rendererPath', () => { typography: { fontSize: '10px', fontStyle: 'normal', - fontWeight: '500', + fontWeight: '600', letterSpacing: '10px', lineHeight: '1', textDecoration: 'line-through', diff --git a/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json b/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json index 95cb7b88d0fb78..85b0d988269d17 100644 --- a/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json +++ b/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json @@ -13,18 +13,18 @@ "fontFamily": "DM Sans", "fontStretch": "normal", "fontStyle": "normal", - "fontWeight": "500", + "fontWeight": "600", "src": [ - "file:./assets/fonts/dm-sans/DMSans-Medium.woff2" + "file:./assets/fonts/dm-sans/DMSans-SemiBold.woff2" ] }, { "fontFamily": "DM Sans", "fontStretch": "normal", "fontStyle": "italic", - "fontWeight": "500", + "fontWeight": "600", "src": [ - "file:./assets/fonts/dm-sans/DMSans-Medium-Italic.woff2" + "file:./assets/fonts/dm-sans/DMSans-SemiBold-Italic.woff2" ] } ] diff --git a/routes/connectors-home/default-connectors.tsx b/routes/connectors-home/default-connectors.tsx index fa8253457805b2..40a104479c5c84 100644 --- a/routes/connectors-home/default-connectors.tsx +++ b/routes/connectors-home/default-connectors.tsx @@ -101,7 +101,7 @@ const ConnectedBadge = () => ( padding: '4px 12px', borderRadius: '2px', fontSize: '13px', - fontWeight: 500, + fontWeight: 'var(--wpds-typography-font-weight-semibold)', whiteSpace: 'nowrap', } } > diff --git a/routes/guidelines/components/guideline-actions-section.tsx b/routes/guidelines/components/guideline-actions-section.tsx index c3b2fd5deeed84..32d600eace7aed 100644 --- a/routes/guidelines/components/guideline-actions-section.tsx +++ b/routes/guidelines/components/guideline-actions-section.tsx @@ -126,7 +126,11 @@ export default function GuidelineActionsSection( { return ( - + { __( 'Actions' ) } { entityForSuggestions.labels.all_items } @@ -298,7 +298,7 @@ function AddCustomTemplateModalContent( { > { entityForSuggestions.labels.singular_name } diff --git a/routes/template-list/add-new-template/index.tsx b/routes/template-list/add-new-template/index.tsx index e6ffe603db027c..3deaefad212197 100644 --- a/routes/template-list/add-new-template/index.tsx +++ b/routes/template-list/add-new-template/index.tsx @@ -136,7 +136,7 @@ function TemplateListItem( { > { title } diff --git a/storybook/stories/playground/zoom-out/pattern.js b/storybook/stories/playground/zoom-out/pattern.js index 7c58486de55235..40b9c7753e84c0 100644 --- a/storybook/stories/playground/zoom-out/pattern.js +++ b/storybook/stories/playground/zoom-out/pattern.js @@ -1,8 +1,8 @@ export const pattern = `
-
-

Time for an adventure

+
+

Time for an adventure

@@ -18,8 +18,8 @@ export const pattern = ` -
-
Sign up
+
+
Sign up
From 25f9b0d4d1799be15b8a6026c0896a7aecd89b2a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 10 Jul 2026 12:28:15 +0200 Subject: [PATCH 06/13] Typography: Preserve authored 500 font weights --- .../assets/dashboard-widgets-pipeline.svg | 2 +- packages/block-editor/CHANGELOG.md | 1 - .../src/utils/format-font-weight.ts | 3 ++ .../src/utils/get-font-styles-and-weights.ts | 8 ++-- .../src/utils/test/format-font-weight.js | 4 ++ .../utils/test/get-font-styles-and-weights.js | 40 +++++++++++++++++++ packages/components/src/text/README.md | 2 +- packages/components/src/text/types.ts | 4 +- packages/global-styles-ui/CHANGELOG.md | 1 - .../src/font-library/types.ts | 1 + .../src/font-library/utils/constants.ts | 1 + .../src/font-library/utils/sort-font-faces.ts | 2 +- .../src/font-library/utils/toggleFont.ts | 2 +- packages/server-side-render/src/test/index.ts | 2 +- .../styles/variation-new-font-variations.json | 8 ++-- .../stories/playground/zoom-out/pattern.js | 8 ++-- tools/stylelint/config.js | 4 -- 17 files changed, 69 insertions(+), 24 deletions(-) diff --git a/docs/explanations/architecture/assets/dashboard-widgets-pipeline.svg b/docs/explanations/architecture/assets/dashboard-widgets-pipeline.svg index f41522910693c9..e7477d34a3066f 100644 --- a/docs/explanations/architecture/assets/dashboard-widgets-pipeline.svg +++ b/docs/explanations/architecture/assets/dashboard-widgets-pipeline.svg @@ -48,7 +48,7 @@ - Host · dashboard, sidebar, plugin panel… + Host · dashboard, sidebar, plugin panel… owns layout · chrome · persistence diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index a757c7d680d956..0cb1eb1665f764 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -28,7 +28,6 @@ ### Enhancements -- Remove medium (`500`) from the default and variable font-weight options in favor of semibold (`600`) ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - Inserter media categories support an optional `emptyMessage`, shown in place of the generic "No results found" notice, that also keeps a source listed when it has no items. The media panel additionally renders attach/detach affordances for attached images ([#79336](https://github.com/WordPress/gutenberg/pull/79336)). diff --git a/packages/block-editor/src/utils/format-font-weight.ts b/packages/block-editor/src/utils/format-font-weight.ts index 25896e41e90bb7..cc0a4ee33dea57 100644 --- a/packages/block-editor/src/utils/format-font-weight.ts +++ b/packages/block-editor/src/utils/format-font-weight.ts @@ -45,6 +45,9 @@ export function formatFontWeight( case '300': name = _x( 'Light', 'font weight' ); break; + case '500': + name = _x( 'Medium', 'font weight' ); + break; case '600': name = _x( 'Semi Bold', 'font weight' ); break; diff --git a/packages/block-editor/src/utils/get-font-styles-and-weights.ts b/packages/block-editor/src/utils/get-font-styles-and-weights.ts index 3ec318df764aaa..9469ece010a093 100644 --- a/packages/block-editor/src/utils/get-font-styles-and-weights.ts +++ b/packages/block-editor/src/utils/get-font-styles-and-weights.ts @@ -42,6 +42,10 @@ const FONT_WEIGHTS = [ name: _x( 'Regular', 'font weight' ), value: '400', }, + { + name: _x( 'Medium', 'font weight' ), + value: '500', + }, { name: _x( 'Semi Bold', 'font weight' ), value: '600', @@ -96,10 +100,6 @@ export function getFontStylesAndWeights( // Create font weight options for available variable weights. for ( let i = startValue; i <= endValue; i++ ) { - // Skip the retired medium step in favor of semibold. - if ( i === 5 ) { - continue; - } const fontWeightValue = `${ i.toString() }00`; if ( ! fontWeights.some( diff --git a/packages/block-editor/src/utils/test/format-font-weight.js b/packages/block-editor/src/utils/test/format-font-weight.js index f701a8af959ab5..8830e45532acfe 100644 --- a/packages/block-editor/src/utils/test/format-font-weight.js +++ b/packages/block-editor/src/utils/test/format-font-weight.js @@ -30,6 +30,10 @@ describe( 'formatFontWeight', () => { name: 'Regular', value: '400', } ); + expect( formatFontWeight( '500' ) ).toEqual( { + name: 'Medium', + value: '500', + } ); expect( formatFontWeight( '600' ) ).toEqual( { name: 'Semi Bold', value: '600', diff --git a/packages/block-editor/src/utils/test/get-font-styles-and-weights.js b/packages/block-editor/src/utils/test/get-font-styles-and-weights.js index 4492f878ba30e0..7c50409bae1acc 100644 --- a/packages/block-editor/src/utils/test/get-font-styles-and-weights.js +++ b/packages/block-editor/src/utils/test/get-font-styles-and-weights.js @@ -33,6 +33,10 @@ describe( 'getFontStylesAndWeights', () => { name: 'Regular', value: '400', }, + { + name: 'Medium', + value: '500', + }, { name: 'Semi Bold', value: '600', @@ -87,6 +91,14 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, + { + key: 'normal-500', + name: 'Medium', + style: { + fontStyle: 'normal', + fontWeight: '500', + }, + }, { key: 'normal-600', name: 'Semi Bold', @@ -159,6 +171,14 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, + { + key: 'italic-500', + name: 'Medium Italic', + style: { + fontStyle: 'italic', + fontWeight: '500', + }, + }, { key: 'italic-600', name: 'Semi Bold Italic', @@ -231,6 +251,10 @@ describe( 'getFontStylesAndWeights', () => { name: 'Regular', value: '400', }, + { + name: 'Medium', + value: '500', + }, { name: 'Semi Bold', value: '600', @@ -249,6 +273,14 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, + { + key: 'normal-500', + name: 'Medium', + style: { + fontStyle: 'normal', + fontWeight: '500', + }, + }, { key: 'normal-600', name: 'Semi Bold', @@ -273,6 +305,14 @@ describe( 'getFontStylesAndWeights', () => { fontWeight: '400', }, }, + { + key: 'italic-500', + name: 'Medium Italic', + style: { + fontStyle: 'italic', + fontWeight: '500', + }, + }, { key: 'italic-600', name: 'Semi Bold Italic', diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md index 82340894a874e3..8ee95c661ae909 100644 --- a/packages/components/src/text/README.md +++ b/packages/components/src/text/README.md @@ -240,6 +240,6 @@ function Example() { ### weight -**Type**: `CSSProperties['fontWeight']` +**Type**: `CSSProperties['fontWeight']`,`TextWeight` Adjusts font-weight of the text. diff --git a/packages/components/src/text/types.ts b/packages/components/src/text/types.ts index fad87b69d13780..c8d9833289532c 100644 --- a/packages/components/src/text/types.ts +++ b/packages/components/src/text/types.ts @@ -19,6 +19,8 @@ export type TextSize = type TextVariant = 'muted'; +type TextWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; + export interface Props extends TruncateProps { /** * Adjusts the text alignment. @@ -98,7 +100,7 @@ export interface Props extends TruncateProps { * * @default 'normal' */ - weight?: CSSProperties[ 'fontWeight' ]; + weight?: CSSProperties[ 'fontWeight' ] | TextWeight; /** * Adjusts letter-spacing of the text. */ diff --git a/packages/global-styles-ui/CHANGELOG.md b/packages/global-styles-ui/CHANGELOG.md index 7f71bc138642dc..711933269207e7 100644 --- a/packages/global-styles-ui/CHANGELOG.md +++ b/packages/global-styles-ui/CHANGELOG.md @@ -4,7 +4,6 @@ ### Enhancements -- Remove medium (`500`) from the Font Library's predefined font weights in favor of semibold (`600`) ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 1.17.0 (2026-07-01) diff --git a/packages/global-styles-ui/src/font-library/types.ts b/packages/global-styles-ui/src/font-library/types.ts index ae05c66896710b..551f9555fcdea0 100644 --- a/packages/global-styles-ui/src/font-library/types.ts +++ b/packages/global-styles-ui/src/font-library/types.ts @@ -103,6 +103,7 @@ export type FontWeight = | '200' | '300' | '400' + | '500' | '600' | '700' | '800' diff --git a/packages/global-styles-ui/src/font-library/utils/constants.ts b/packages/global-styles-ui/src/font-library/utils/constants.ts index cf589000283848..519b8ffa430535 100644 --- a/packages/global-styles-ui/src/font-library/utils/constants.ts +++ b/packages/global-styles-ui/src/font-library/utils/constants.ts @@ -10,6 +10,7 @@ export const FONT_WEIGHTS: Record< string, string > = { 200: _x( 'Extra-light', 'font weight' ), 300: _x( 'Light', 'font weight' ), 400: _x( 'Normal', 'font weight' ), + 500: _x( 'Medium', 'font weight' ), 600: _x( 'Semi-bold', 'font weight' ), 700: _x( 'Bold', 'font weight' ), 800: _x( 'Extra-bold', 'font weight' ), diff --git a/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts b/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts index afd4286adf081e..5b56ceb93f3f77 100644 --- a/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts +++ b/packages/global-styles-ui/src/font-library/utils/sort-font-faces.ts @@ -10,7 +10,7 @@ function getNumericFontWeight( value: string ): number { case 'bold': return 700; case 'bolder': - return 600; + return 500; case 'lighter': return 300; default: diff --git a/packages/global-styles-ui/src/font-library/utils/toggleFont.ts b/packages/global-styles-ui/src/font-library/utils/toggleFont.ts index 6c832864445286..b49013d6e52cbd 100644 --- a/packages/global-styles-ui/src/font-library/utils/toggleFont.ts +++ b/packages/global-styles-ui/src/font-library/utils/toggleFont.ts @@ -27,7 +27,7 @@ * toggleFont({ slug: 'roboto' }, { fontWeight: '400', fontStyle: 'normal' }, customFonts); * // This will remove the specified face from 'roboto' in customFonts * - * toggleFont({ slug: 'roboto' }, { fontWeight: '600', fontStyle: 'normal' }, customFonts); + * toggleFont({ slug: 'roboto' }, { fontWeight: '500', fontStyle: 'normal' }, customFonts); * // This will add the specified face to 'roboto' in customFonts */ /** diff --git a/packages/server-side-render/src/test/index.ts b/packages/server-side-render/src/test/index.ts index 351272893a1782..b5757dbe973a67 100644 --- a/packages/server-side-render/src/test/index.ts +++ b/packages/server-side-render/src/test/index.ts @@ -122,7 +122,7 @@ describe( 'rendererPath', () => { typography: { fontSize: '10px', fontStyle: 'normal', - fontWeight: '600', + fontWeight: '500', letterSpacing: '10px', lineHeight: '1', textDecoration: 'line-through', diff --git a/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json b/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json index 85b0d988269d17..95cb7b88d0fb78 100644 --- a/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json +++ b/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json @@ -13,18 +13,18 @@ "fontFamily": "DM Sans", "fontStretch": "normal", "fontStyle": "normal", - "fontWeight": "600", + "fontWeight": "500", "src": [ - "file:./assets/fonts/dm-sans/DMSans-SemiBold.woff2" + "file:./assets/fonts/dm-sans/DMSans-Medium.woff2" ] }, { "fontFamily": "DM Sans", "fontStretch": "normal", "fontStyle": "italic", - "fontWeight": "600", + "fontWeight": "500", "src": [ - "file:./assets/fonts/dm-sans/DMSans-SemiBold-Italic.woff2" + "file:./assets/fonts/dm-sans/DMSans-Medium-Italic.woff2" ] } ] diff --git a/storybook/stories/playground/zoom-out/pattern.js b/storybook/stories/playground/zoom-out/pattern.js index 40b9c7753e84c0..7c58486de55235 100644 --- a/storybook/stories/playground/zoom-out/pattern.js +++ b/storybook/stories/playground/zoom-out/pattern.js @@ -1,8 +1,8 @@ export const pattern = `
-
-

Time for an adventure

+
+

Time for an adventure

@@ -18,8 +18,8 @@ export const pattern = ` -
-
Sign up
+
+
Sign up
diff --git a/tools/stylelint/config.js b/tools/stylelint/config.js index f85f6c809c5610..3095ac6cbfd943 100644 --- a/tools/stylelint/config.js +++ b/tools/stylelint/config.js @@ -28,7 +28,6 @@ module.exports = { '/--wp-components-color-/', '/\\$font-weight-medium/', ], - 'font-weight': [ '500', '600' ], cursor: [ 'pointer' ], }, { @@ -36,9 +35,6 @@ module.exports = { if ( value.includes( '$font-weight-medium' ) ) { return 'Use `$font-weight-semibold` instead. `$font-weight-medium` is kept for backwards compatibility only.'; } - if ( property === 'font-weight' ) { - return 'Use the semibold design token or `$font-weight-semibold` instead of a literal 500 or 600 font weight.'; - } if ( property === 'cursor' ) { return 'Use the `var( --wpds-cursor-control )` token for interactive non-link controls. If this is for a link, you can disable this rule.'; } From d4a19ab08fe3ab1ebc1df333f4bb8eb359c4ddb6 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 10 Jul 2026 21:27:08 +0200 Subject: [PATCH 07/13] Typography: Add missing package changelogs --- packages/fields/CHANGELOG.md | 2 ++ packages/interface/CHANGELOG.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/fields/CHANGELOG.md b/packages/fields/CHANGELOG.md index 85608489cd3bbe..c86a07e1a49905 100644 --- a/packages/fields/CHANGELOG.md +++ b/packages/fields/CHANGELOG.md @@ -4,6 +4,8 @@ ### Enhancements +- `Slug`: Use the semibold font-weight variable for help text ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). + - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - `MediaEdit`: Update validation error message to be announced by screen readers. ([#79600](https://github.com/WordPress/gutenberg/pull/79600)) diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md index e56fcbe85f0350..d7ac7195b3c6c0 100644 --- a/packages/interface/CHANGELOG.md +++ b/packages/interface/CHANGELOG.md @@ -4,6 +4,8 @@ ### Enhancements +- `ComplementaryArea`: Use the semibold font-weight variable for headings ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). + - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 9.35.0 (2026-07-01) From 617dd1a40b7647a322957ee651cc46756807a42c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 13 Jul 2026 15:29:37 +0200 Subject: [PATCH 08/13] Typography: Complete semibold token migration --- packages/connectors/src/connector-item.tsx | 2 +- routes/connectors-home/stage.tsx | 6 +++++- tools/stylelint/config.js | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/connectors/src/connector-item.tsx b/packages/connectors/src/connector-item.tsx index 6e5d34a957b093..5b498f991cd329 100644 --- a/packages/connectors/src/connector-item.tsx +++ b/packages/connectors/src/connector-item.tsx @@ -46,7 +46,7 @@ export function ConnectorItem( { - + { __( 'No connectors yet' ) } diff --git a/tools/stylelint/config.js b/tools/stylelint/config.js index 3095ac6cbfd943..c3b062f9c10083 100644 --- a/tools/stylelint/config.js +++ b/tools/stylelint/config.js @@ -33,7 +33,7 @@ module.exports = { { message: ( property, value ) => { if ( value.includes( '$font-weight-medium' ) ) { - return 'Use `$font-weight-semibold` instead. `$font-weight-medium` is kept for backwards compatibility only.'; + return '`$font-weight-medium` is kept for backwards compatibility only. Use `$font-weight-regular` or `$font-weight-semibold` based on the intended emphasis.'; } if ( property === 'cursor' ) { return 'Use the `var( --wpds-cursor-control )` token for interactive non-link controls. If this is for a link, you can disable this rule.'; From a91484e4268e7f5bfcb3e0a926ac91027589f197 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 13 Jul 2026 15:29:49 +0200 Subject: [PATCH 09/13] Typography: Complete package changelogs --- packages/base-styles/CHANGELOG.md | 2 +- packages/block-directory/CHANGELOG.md | 1 + packages/block-editor/CHANGELOG.md | 1 + packages/block-library/CHANGELOG.md | 1 + packages/boot/CHANGELOG.md | 1 + packages/commands/CHANGELOG.md | 1 + packages/editor/CHANGELOG.md | 1 + packages/global-styles-ui/CHANGELOG.md | 1 + packages/media-editor/CHANGELOG.md | 1 + packages/media-utils/CHANGELOG.md | 1 + packages/widgets/CHANGELOG.md | 1 + 11 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index f444efadef3bf4..811750310aa28b 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Add `$font-weight-semibold` (`600`) while retaining `$font-weight-medium` (`499`) for backwards compatibility, and align the legacy font-family variables with the `@wordpress/theme` typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Add `$font-weight-semibold` while retaining `$font-weight-medium` for backwards compatibility, and align the legacy font-family variables with the `@wordpress/theme` typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698), [#80082](https://github.com/WordPress/gutenberg/pull/80082)). ## 10.2.0 (2026-07-01) diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md index 07b287b87c47e4..726f1ddccdaea3 100644 --- a/packages/block-directory/CHANGELOG.md +++ b/packages/block-directory/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 5.50.0 (2026-07-01) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 0cb1eb1665f764..154d6b82e8aa46 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -28,6 +28,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - Inserter media categories support an optional `emptyMessage`, shown in place of the generic "No results found" notice, that also keeps a source listed when it has no items. The media panel additionally renders attach/detach affordances for attached images ([#79336](https://github.com/WordPress/gutenberg/pull/79336)). diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 80c3305c5368e4..7f782f3920a959 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 10.1.0 (2026-07-01) diff --git a/packages/boot/CHANGELOG.md b/packages/boot/CHANGELOG.md index 6af4478067058a..422aad3403b1af 100644 --- a/packages/boot/CHANGELOG.md +++ b/packages/boot/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 0.17.0 (2026-07-01) diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md index 7dbed0dd89347b..4ec29058519098 100644 --- a/packages/commands/CHANGELOG.md +++ b/packages/commands/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 1.50.0 (2026-07-01) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 52cfc766c804b5..e0833ff5ac38a0 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -8,6 +8,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Notes: Remove the snackbar notice shown when a note is resolved or reopened, as the note's appearance already updates in place to reflect the change. The result is still announced to screen readers ([#80017](https://github.com/WordPress/gutenberg/pull/80017)). - The "View the autosave" notice now opens the autosave in the visual revisions view with its changes highlighted, instead of the classic revisions screen. It falls back to the classic screen when visual revisions are disabled ([#79947](https://github.com/WordPress/gutenberg/pull/79947)). diff --git a/packages/global-styles-ui/CHANGELOG.md b/packages/global-styles-ui/CHANGELOG.md index 711933269207e7..5c5b8cc93239ba 100644 --- a/packages/global-styles-ui/CHANGELOG.md +++ b/packages/global-styles-ui/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 1.17.0 (2026-07-01) diff --git a/packages/media-editor/CHANGELOG.md b/packages/media-editor/CHANGELOG.md index 105e9f600d9e09..2bc3304dc2ad7d 100644 --- a/packages/media-editor/CHANGELOG.md +++ b/packages/media-editor/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - `useAriaAnnouncer`: Update to use `speak` for screen reader announcements instead of an inline `aria-live` region. ([#79600](https://github.com/WordPress/gutenberg/pull/79600)) diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md index 11a0b51eff09f6..66c357e1a38763 100644 --- a/packages/media-utils/CHANGELOG.md +++ b/packages/media-utils/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 5.50.0 (2026-07-01) diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md index 61824ec6111105..5b18b788fe9a8c 100644 --- a/packages/widgets/CHANGELOG.md +++ b/packages/widgets/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 4.50.0 (2026-07-01) From 4a6593307d9ae71748606d441803c2a4e694e8b9 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 13 Jul 2026 15:51:25 +0200 Subject: [PATCH 10/13] Typography: Rely on Heading semibold default --- routes/connectors-home/stage.tsx | 6 +----- routes/guidelines/components/guideline-actions-section.tsx | 6 +----- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/routes/connectors-home/stage.tsx b/routes/connectors-home/stage.tsx index 8cb84aa94281b1..5789170059214b 100644 --- a/routes/connectors-home/stage.tsx +++ b/routes/connectors-home/stage.tsx @@ -130,11 +130,7 @@ function ConnectorsPage() { style={ { maxWidth: 480 } } > - + { __( 'No connectors yet' ) } diff --git a/routes/guidelines/components/guideline-actions-section.tsx b/routes/guidelines/components/guideline-actions-section.tsx index 32d600eace7aed..614a589a4a4dd6 100644 --- a/routes/guidelines/components/guideline-actions-section.tsx +++ b/routes/guidelines/components/guideline-actions-section.tsx @@ -126,11 +126,7 @@ export default function GuidelineActionsSection( { return ( - + { __( 'Actions' ) } Date: Mon, 13 Jul 2026 19:04:56 +0200 Subject: [PATCH 11/13] Typography: Name font weight tokens by intent --- packages/base-styles/CHANGELOG.md | 2 +- packages/base-styles/_mixins.scss | 4 +- packages/base-styles/_variables.scss | 3 +- .../internal/_wpds-token-fallbacks.scss | 4 +- packages/block-directory/CHANGELOG.md | 2 +- .../src/components/compact-list/style.scss | 2 +- .../downloadable-block-list-item/style.scss | 2 +- packages/block-editor/CHANGELOG.md | 2 +- .../src/components/block-card/style.scss | 2 +- .../src/components/block-lock/style.scss | 2 +- .../src/components/block-manager/style.scss | 2 +- .../components/block-navigation/style.scss | 2 +- .../block-quick-navigation/style.scss | 4 +- .../components/block-visibility/style.scss | 2 +- .../src/components/inserter/style.scss | 4 +- .../src/components/link-control/style.scss | 4 +- .../src/components/link-picker/style.scss | 2 +- .../multi-selection-inspector/style.scss | 2 +- .../responsive-block-control/style.scss | 2 +- .../skip-to-selected-block/style.scss | 3 +- packages/block-library/CHANGELOG.md | 2 +- packages/block-library/src/more/editor.scss | 2 +- .../src/navigation-link/editor.scss | 2 +- .../block-library/src/nextpage/editor.scss | 2 +- packages/block-library/src/video/editor.scss | 2 +- packages/boot/CHANGELOG.md | 2 +- .../navigation/navigation-item/style.scss | 4 +- packages/commands/CHANGELOG.md | 2 +- packages/commands/src/components/style.scss | 4 +- packages/components/CHANGELOG.md | 2 +- packages/components/src/button/style.scss | 4 +- packages/components/src/calendar/style.scss | 2 +- .../components/src/color-palette/styles.ts | 2 +- .../src/date-time/date-picker/styles.ts | 2 +- .../components/src/dropdown-menu/style.scss | 2 +- .../components/src/external-link/style.scss | 2 +- packages/components/src/heading/hook.ts | 2 +- packages/components/src/menu-group/style.scss | 2 +- packages/components/src/menu-item/style.scss | 2 +- packages/components/src/menu/group-label.tsx | 2 +- packages/components/src/modal/style.scss | 2 +- .../components/src/palette-edit/styles.ts | 2 +- packages/components/src/panel/style.scss | 2 +- .../components/src/placeholder/style.scss | 2 +- packages/components/src/tab-panel/style.scss | 2 +- .../styles.ts | 2 +- .../src/toolbar/toolbar-button/style.scss | 2 +- packages/components/src/tools-panel/styles.ts | 4 +- packages/components/src/utils/base-label.ts | 2 +- .../components/src/utils/config-values.js | 2 +- packages/connectors/src/connector-item.tsx | 2 +- .../keyboard-shortcut-help-modal/style.scss | 5 +-- .../src/components/welcome-guide/style.scss | 2 +- packages/dataviews/CHANGELOG.md | 2 +- .../dataform-layouts/panel/style.scss | 4 +- .../components/dataviews-filters/style.scss | 4 +- .../dataviews-layouts/activity/style.scss | 2 +- .../dataviews-layouts/grid/style.scss | 2 +- .../dataviews-layouts/list/style.scss | 2 +- .../picker-activity/style.scss | 2 +- .../dataviews-layouts/picker-grid/style.scss | 2 +- .../dataviews-layouts/table/style.scss | 6 +-- .../dataviews-pagination/style.scss | 4 +- .../src/dataviews/stories/layout-custom.tsx | 2 +- packages/dataviews/src/dataviews/style.scss | 2 +- .../meta-boxes/meta-boxes-area/style.scss | 2 +- packages/edit-site/CHANGELOG.md | 2 +- .../add-custom-template-modal-content.js | 6 +-- .../add-new-template-legacy/index.js | 2 +- .../add-custom-template-modal-content.js | 6 +-- .../src/components/add-new-template/index.js | 2 +- .../sidebar-navigation-item/style.scss | 2 +- .../style.scss | 2 +- .../keyboard-shortcut-help-modal/style.scss | 5 +-- packages/editor/CHANGELOG.md | 2 +- .../src/components/collab-sidebar/style.scss | 6 +-- .../avatar-iframe-styles.ts | 6 +-- .../collaborator-styles.ts | 5 ++- .../collaborators-presence/avatar/styles.scss | 4 +- .../styles/collaborators-list.scss | 4 +- .../keyboard-shortcut-help-modal/style.scss | 5 +-- .../components/post-last-revision/style.scss | 2 +- .../src/components/post-panel-row/style.scss | 2 +- .../components/post-publish-panel/style.scss | 2 +- .../editor/src/components/post-url/style.scss | 2 +- .../components/table-of-contents/style.scss | 2 +- packages/fields/CHANGELOG.md | 2 +- packages/fields/src/fields/slug/style.scss | 4 +- packages/global-styles-ui/CHANGELOG.md | 2 +- .../src/font-library/style.scss | 8 ++-- .../src/screen-revisions/style.scss | 2 +- packages/global-styles-ui/src/style.scss | 4 +- packages/interface/CHANGELOG.md | 2 +- .../components/complementary-area/style.scss | 4 +- packages/media-editor/CHANGELOG.md | 2 +- .../media-editor-image-controls/style.scss | 2 +- .../style.scss | 2 +- .../src/components/media-preview/style.scss | 2 +- .../src/components/rotation-ruler/style.scss | 2 +- packages/media-utils/CHANGELOG.md | 2 +- .../components/media-upload-modal/style.scss | 2 +- .../preferences-modal-section/style.scss | 2 +- packages/theme/CHANGELOG.md | 2 +- packages/theme/docs/tokens.md | 40 +++++++++---------- .../stories/brand-fallbacks.story.tsx | 2 +- .../src/color-ramps/stories/ramp-table.tsx | 4 +- .../theme/src/prebuilt/css/design-tokens.css | 8 ++-- .../prebuilt/js/design-token-fallbacks.mjs | 4 +- .../theme/src/prebuilt/js/design-tokens.mjs | 4 +- packages/theme/src/prebuilt/ts/token-types.ts | 2 +- packages/theme/tokens/typography.json | 8 ++-- packages/ui/CHANGELOG.md | 2 +- packages/ui/src/button/style.module.css | 2 +- packages/ui/src/card/stories/index.story.tsx | 2 +- .../collapsible-card/stories/index.story.tsx | 2 +- packages/ui/src/link/style.module.css | 2 +- packages/ui/src/text/style.module.css | 36 ++++++++--------- packages/ui/src/utils/css/field.module.css | 2 +- .../utils/css/global-css-defense.module.css | 2 +- packages/widgets/CHANGELOG.md | 2 +- .../src/blocks/legacy-widget/editor.scss | 6 +-- .../src/blocks/widget-group/editor.scss | 2 +- .../src/components/workflow-menu.scss | 4 +- routes/connectors-home/default-connectors.tsx | 2 +- routes/guidelines/style.scss | 2 +- .../add-custom-template-modal-content.tsx | 6 +-- .../template-list/add-new-template/index.tsx | 2 +- .../decorators/with-max-width-wrapper.jsx | 2 +- .../with-text-overflow-containers.tsx | 2 +- storybook/package-styles/config.js | 5 +++ ...raggable-cross-document-fallback.story.jsx | 4 +- storybook/stories/tokens/typography.mdx | 34 ++++++++-------- tools/stylelint/config.js | 13 +++++- .../circle-progress.module.css | 2 +- 134 files changed, 248 insertions(+), 242 deletions(-) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index 811750310aa28b..dda08f7f70af62 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Add `$font-weight-semibold` while retaining `$font-weight-medium` for backwards compatibility, and align the legacy font-family variables with the `@wordpress/theme` typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Retain `$font-weight-regular` and `$font-weight-medium` for backwards compatibility while migrating repository styles to the semantic `@wordpress/theme` font-weight tokens, and align the legacy font-family variables with the theme typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698), [#80082](https://github.com/WordPress/gutenberg/pull/80082)). ## 10.2.0 (2026-07-01) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 0129698ebba0fc..811d5162961f06 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -13,12 +13,12 @@ @mixin _text-heading() { font-family: variables.$font-family-headings; - font-weight: variables.$font-weight-semibold; + font-weight: wpds.var("--wpds-typography-font-weight-emphasis"); } @mixin _text-body() { font-family: variables.$font-family-body; - font-weight: variables.$font-weight-regular; + font-weight: wpds.var("--wpds-typography-font-weight-default"); } @mixin heading-small() { diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 24df387228e587..440df4d5f96f29 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -40,9 +40,8 @@ $font-line-height-x-large: 32px; $font-line-height-2x-large: 40px; // Weights -$font-weight-regular: 400; +$font-weight-regular: 400; // Kept for backwards compatibility. Do not use in new styles. $font-weight-medium: 499; // Kept for backwards compatibility. Do not use in new styles. -$font-weight-semibold: 600; /** * Grid System. diff --git a/packages/base-styles/internal/_wpds-token-fallbacks.scss b/packages/base-styles/internal/_wpds-token-fallbacks.scss index 0a2dae2921ef58..3b1ef82e84edad 100644 --- a/packages/base-styles/internal/_wpds-token-fallbacks.scss +++ b/packages/base-styles/internal/_wpds-token-fallbacks.scss @@ -179,8 +179,8 @@ $fallbacks: ( '--wpds-typography-font-size-sm': '12px', '--wpds-typography-font-size-xl': '20px', '--wpds-typography-font-size-xs': '11px', - '--wpds-typography-font-weight-regular': '400', - '--wpds-typography-font-weight-semibold': '600', + '--wpds-typography-font-weight-default': '400', + '--wpds-typography-font-weight-emphasis': '600', '--wpds-typography-line-height-2xl': '40px', '--wpds-typography-line-height-lg': '28px', '--wpds-typography-line-height-md': '24px', diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md index 726f1ddccdaea3..018a829645e062 100644 --- a/packages/block-directory/CHANGELOG.md +++ b/packages/block-directory/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 5.50.0 (2026-07-01) diff --git a/packages/block-directory/src/components/compact-list/style.scss b/packages/block-directory/src/components/compact-list/style.scss index e6bb7fd30e3419..37211a63a0aa78 100644 --- a/packages/block-directory/src/components/compact-list/style.scss +++ b/packages/block-directory/src/components/compact-list/style.scss @@ -22,7 +22,7 @@ } .block-directory-compact-list__item-title { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .block-directory-compact-list__item-author { diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss index 7d66a70c49ad91..76a0082104a085 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss +++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss @@ -84,7 +84,7 @@ .block-directory-downloadable-block-list-item__title { display: block; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .block-directory-downloadable-block-list-item__author { diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 154d6b82e8aa46..346c7193f91302 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -28,7 +28,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - Inserter media categories support an optional `emptyMessage`, shown in place of the generic "No results found" notice, that also keeps a source listed when it has no items. The media panel additionally renders attach/detach affordances for attached images ([#79336](https://github.com/WordPress/gutenberg/pull/79336)). diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss index d9ed48d44fb213..22078c16d148db 100644 --- a/packages/block-editor/src/components/block-card/style.scss +++ b/packages/block-editor/src/components/block-card/style.scss @@ -22,7 +22,7 @@ } .block-editor-block-card__title { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); display: flex; align-items: center; flex-wrap: wrap; diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss index 9758a563107171..49f0f5f9928fe6 100644 --- a/packages/block-editor/src/components/block-lock/style.scss +++ b/packages/block-editor/src/components/block-lock/style.scss @@ -29,7 +29,7 @@ padding: $grid-unit-15 0; .components-checkbox-control__label { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } } diff --git a/packages/block-editor/src/components/block-manager/style.scss b/packages/block-editor/src/components/block-manager/style.scss index fb0859065299ad..57a7a79d2f4d83 100644 --- a/packages/block-editor/src/components/block-manager/style.scss +++ b/packages/block-editor/src/components/block-manager/style.scss @@ -21,7 +21,7 @@ z-index: 1; .components-checkbox-control__label { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } } diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 135a629856b10a..47c2637833fe87 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -10,5 +10,5 @@ color: $gray-700; text-transform: uppercase; font-size: 11px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } diff --git a/packages/block-editor/src/components/block-quick-navigation/style.scss b/packages/block-editor/src/components/block-quick-navigation/style.scss index 8753ed92d90446..5ee0ebacd60a82 100644 --- a/packages/block-editor/src/components/block-quick-navigation/style.scss +++ b/packages/block-editor/src/components/block-quick-navigation/style.scss @@ -1,5 +1,3 @@ -@use "@wordpress/base-styles/variables"; - .block-editor-block-quick-navigation__item { - font-weight: variables.$font-weight-regular; + font-weight: var(--wpds-typography-font-weight-default); } diff --git a/packages/block-editor/src/components/block-visibility/style.scss b/packages/block-editor/src/components/block-visibility/style.scss index 038bdb5bb1e469..95452844abcf63 100644 --- a/packages/block-editor/src/components/block-visibility/style.scss +++ b/packages/block-editor/src/components/block-visibility/style.scss @@ -29,7 +29,7 @@ } &-checkbox--everywhere { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } &-icon--checked { diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index d60d3eeaf42379..7cc36cb3b41743 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -163,7 +163,7 @@ $block-inserter-tabs-height: 44px; color: $gray-700; text-transform: uppercase; font-size: 11px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input { @@ -456,7 +456,7 @@ $block-inserter-tabs-height: 44px; } .components-heading.block-editor-inserter__patterns-category-panel-title { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .block-editor-inserter__patterns-explore-button, diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index fca349171ce912..ef2de816135f6d 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -151,7 +151,7 @@ $block-editor-link-control-number-of-actions: 1; width: 100%; mark { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: inherit; background-color: transparent; } @@ -227,7 +227,7 @@ $block-editor-link-control-number-of-actions: 1; } mark { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: inherit; background-color: transparent; } diff --git a/packages/block-editor/src/components/link-picker/style.scss b/packages/block-editor/src/components/link-picker/style.scss index 01f01169e8f4ab..0b8673740f73f6 100644 --- a/packages/block-editor/src/components/link-picker/style.scss +++ b/packages/block-editor/src/components/link-picker/style.scss @@ -50,7 +50,7 @@ .link-preview-button__title { margin-top: $grid-unit-05; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: $gray-900; display: block; } diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss index c161aff3456d43..cf22e285aa045f 100644 --- a/packages/block-editor/src/components/multi-selection-inspector/style.scss +++ b/packages/block-editor/src/components/multi-selection-inspector/style.scss @@ -5,7 +5,7 @@ } .block-editor-multi-selection-inspector__card-title { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .block-editor-multi-selection-inspector__card .block-editor-block-icon { diff --git a/packages/block-editor/src/components/responsive-block-control/style.scss b/packages/block-editor/src/components/responsive-block-control/style.scss index b41d6bd8fb081d..de753241bbe1fd 100644 --- a/packages/block-editor/src/components/responsive-block-control/style.scss +++ b/packages/block-editor/src/components/responsive-block-control/style.scss @@ -32,7 +32,7 @@ } .block-editor-responsive-block-control__label { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin-bottom: 0.6em; margin-left: -3px; // visual compensation } diff --git a/packages/block-editor/src/components/skip-to-selected-block/style.scss b/packages/block-editor/src/components/skip-to-selected-block/style.scss index 9addb939e37810..c452e4bc2944a9 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/style.scss +++ b/packages/block-editor/src/components/skip-to-selected-block/style.scss @@ -1,4 +1,3 @@ -@use "@wordpress/base-styles/variables" as *; @use "@wordpress/base-styles/z-index" as *; .block-editor-skip-to-selected-block { @@ -7,7 +6,7 @@ &:focus { font-size: 14px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); background: #f1f1f1; z-index: z-index(".skip-to-selected-block"); } diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 7f782f3920a959..2a2e8e7901a913 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 10.1.0 (2026-07-01) diff --git a/packages/block-library/src/more/editor.scss b/packages/block-library/src/more/editor.scss index aad94f1beba36b..9d7f456e4b6bcb 100644 --- a/packages/block-library/src/more/editor.scss +++ b/packages/block-library/src/more/editor.scss @@ -18,7 +18,7 @@ position: relative; font-size: $default-font-size; text-transform: uppercase; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); font-family: $default-font; color: $gray-700; display: inline-flex; diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 4d25da46cfabfc..897d1b7030012c 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -110,7 +110,7 @@ .link-control-transform__subheading { font-size: 11px; text-transform: uppercase; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: $gray-900; margin-bottom: 1.5em; } diff --git a/packages/block-library/src/nextpage/editor.scss b/packages/block-library/src/nextpage/editor.scss index a51cc8d15a04ed..faa7276d6974a4 100644 --- a/packages/block-library/src/nextpage/editor.scss +++ b/packages/block-library/src/nextpage/editor.scss @@ -18,7 +18,7 @@ font-size: $default-font-size; position: relative; text-transform: uppercase; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); font-family: $default-font; color: $gray-700; border-radius: 4px; diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss index fd6984842ac8be..64a745778a2139 100644 --- a/packages/block-library/src/video/editor.scss +++ b/packages/block-library/src/video/editor.scss @@ -46,7 +46,7 @@ color: $gray-700; text-transform: uppercase; font-size: 11px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); display: block; } diff --git a/packages/boot/CHANGELOG.md b/packages/boot/CHANGELOG.md index 422aad3403b1af..9d8bc95b2cbafc 100644 --- a/packages/boot/CHANGELOG.md +++ b/packages/boot/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 0.17.0 (2026-07-01) diff --git a/packages/boot/src/components/navigation/navigation-item/style.scss b/packages/boot/src/components/navigation/navigation-item/style.scss index 6dabac19d39c91..c11dee315b8cd4 100644 --- a/packages/boot/src/components/navigation/navigation-item/style.scss +++ b/packages/boot/src/components/navigation/navigation-item/style.scss @@ -29,7 +29,7 @@ } &.active { - font-weight: variables.$font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } svg:last-child { @@ -38,7 +38,7 @@ &[aria-current="true"] { color: var(--wpds-color-foreground-interactive-brand-active); - font-weight: variables.$font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } // Make sure the focus style is drawn on top of the current item background. diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md index 4ec29058519098..fcb00cf0321ec7 100644 --- a/packages/commands/CHANGELOG.md +++ b/packages/commands/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 1.50.0 (2026-07-01) diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss index c05f55adac89fb..cf73f86ed29ca0 100644 --- a/packages/commands/src/components/style.scss +++ b/packages/commands/src/components/style.scss @@ -144,7 +144,7 @@ $palette-header-height: 48px; padding: $grid-unit-10 $grid-unit-20; line-height: $grid-unit-20; font-size: $font-size-x-small; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); text-transform: uppercase; color: $gray-900; } @@ -196,5 +196,5 @@ $palette-header-height: 48px; .commands-command-menu__item mark { color: inherit; background: unset; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a6461b79d8dbee..d709f64d705c28 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -35,7 +35,7 @@ ### Enhancements -- Update emphasized labels and controls from medium (`499`) to semibold (`600`) font weight, and align the default font-family stack with the `@wordpress/theme` body token ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Update emphasized labels and controls from the legacy medium weight to the emphasis font-weight token, and align the default font-family stack with the `@wordpress/theme` body token ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - `Button`: Align focus rings with the design system ([#78646](https://github.com/WordPress/gutenberg/pull/78646)). - The `size` prop no longer has any effect and can be safely removed from the following: diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 0b7c454ab365a6..092fdbcc70817c 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -25,7 +25,7 @@ text-decoration: none; font-family: inherit; font-size: $default-font-size; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin: 0; cursor: var(--wpds-cursor-control); appearance: none; @@ -222,7 +222,7 @@ background: none; outline: none; text-align: left; - font-weight: $font-weight-regular; + font-weight: var(--wpds-typography-font-weight-default); color: $components-color-accent; text-decoration: underline; text-underline-offset: 0.2em; diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index ef040de409d763..3d38c8eb3c8763 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -21,7 +21,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col color: $components-color-foreground; background-color: $components-color-background; font-size: $font-size-medium; - font-weight: $font-weight-regular; + font-weight: var(--wpds-typography-font-weight-default); z-index: 0; // Create a stacking context and render on top of the background. *, diff --git a/packages/components/src/color-palette/styles.ts b/packages/components/src/color-palette/styles.ts index 02633a01bd2584..b708dcaf9d9483 100644 --- a/packages/components/src/color-palette/styles.ts +++ b/packages/components/src/color-palette/styles.ts @@ -12,7 +12,7 @@ import { CONFIG } from '../utils'; export const ColorHeading = styled( Heading )` text-transform: uppercase; line-height: 24px; - font-weight: ${ CONFIG.fontWeightSemibold }; + font-weight: ${ CONFIG.fontWeightEmphasis }; &&& { font-size: 11px; margin-bottom: 0; diff --git a/packages/components/src/date-time/date-picker/styles.ts b/packages/components/src/date-time/date-picker/styles.ts index 078a0048cb30ee..bfee6dbf74ddc0 100644 --- a/packages/components/src/date-time/date-picker/styles.ts +++ b/packages/components/src/date-time/date-picker/styles.ts @@ -38,7 +38,7 @@ export const NavigatorHeading = styled( Heading )` grid-column: 2 / 7; strong { - font-weight: ${ CONFIG.fontWeightSemibold }; + font-weight: ${ CONFIG.fontWeightEmphasis }; } `; diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 9450f9830c540c..ddfcfd80e8fe09 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -18,7 +18,7 @@ outline: none; cursor: var(--wpds-cursor-control); white-space: nowrap; - font-weight: $font-weight-regular; + font-weight: var(--wpds-typography-font-weight-default); &.has-separator { margin-top: 6px; diff --git a/packages/components/src/external-link/style.scss b/packages/components/src/external-link/style.scss index 3bda01baeab133..2a2664d367073e 100644 --- a/packages/components/src/external-link/style.scss +++ b/packages/components/src/external-link/style.scss @@ -40,5 +40,5 @@ line-height: 1; display: inline-block; margin-inline-start: var(--wpds-dimension-padding-xs); - font-weight: var(--wpds-typography-font-weight-regular); + font-weight: var(--wpds-typography-font-weight-default); } diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts index f86cdc18a4ce0e..251048a663c663 100644 --- a/packages/components/src/heading/hook.ts +++ b/packages/components/src/heading/hook.ts @@ -16,7 +16,7 @@ export function useHeading( level = 2, color = COLORS.theme.foreground, isBlock = true, - weight = CONFIG.fontWeightSemibold as React.CSSProperties[ 'fontWeight' ], + weight = CONFIG.fontWeightEmphasis as React.CSSProperties[ 'fontWeight' ], ...otherProps } = useContextSystem( props, 'Heading' ); diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index 8d974b68fbfbb7..db10a96ca5f78c 100644 --- a/packages/components/src/menu-group/style.scss +++ b/packages/components/src/menu-group/style.scss @@ -23,6 +23,6 @@ color: $gray-700; text-transform: uppercase; font-size: 11px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); white-space: nowrap; } diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index a823f6e983dffb..f7680c7d0e6d30 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -6,7 +6,7 @@ .components-menu-item__button, .components-menu-item__button.components-button { width: 100%; - font-weight: $font-weight-regular; + font-weight: var(--wpds-typography-font-weight-default); &[role="menuitemradio"], &[role="menuitemcheckbox"] { diff --git a/packages/components/src/menu/group-label.tsx b/packages/components/src/menu/group-label.tsx index d2d6480bf89078..514d40015dde30 100644 --- a/packages/components/src/menu/group-label.tsx +++ b/packages/components/src/menu/group-label.tsx @@ -34,7 +34,7 @@ export const GroupLabel = forwardRef< upperCase variant="muted" size="11px" - weight={ CONFIG.fontWeightSemibold } + weight={ CONFIG.fontWeightEmphasis } lineHeight="16px" /> } diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index a3eec6b98afe16..5e705069f221c1 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -208,7 +208,7 @@ .components-modal__header-heading { font-size: $font-size-x-large; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } h1 { diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts index 9bbb0659e6967a..329f30f5d0bcec 100644 --- a/packages/components/src/palette-edit/styles.ts +++ b/packages/components/src/palette-edit/styles.ts @@ -52,7 +52,7 @@ export const NameContainer = styled.div` export const PaletteHeading = styled( Heading )` text-transform: uppercase; line-height: ${ space( 6 ) }; - font-weight: ${ CONFIG.fontWeightSemibold }; + font-weight: ${ CONFIG.fontWeightEmphasis }; &&& { font-size: 11px; margin-bottom: 0; diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index 42db7aebe65065..c6a8037960352a 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -88,7 +88,7 @@ position: relative; padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20; width: 100%; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); text-align: left; color: $gray-900; diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 99684a39528694..40c61070656c73 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -42,7 +42,7 @@ } .components-placeholder__label { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); align-items: center; display: flex; diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss index c6038dcca7f9d8..1a88fa17b261b4 100644 --- a/packages/components/src/tab-panel/style.scss +++ b/packages/components/src/tab-panel/style.scss @@ -20,7 +20,7 @@ cursor: var(--wpds-cursor-control); padding: 3px var(--wpds-dimension-padding-lg); // Use padding to offset the is-active border, this benefits Windows High Contrast mode margin-left: 0; - font-weight: var(--wpds-typography-font-weight-regular); + font-weight: var(--wpds-typography-font-weight-default); color: var(--wpds-color-foreground-interactive-neutral); &:disabled, diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts index dd88c170cde1f2..971295bcfb2e29 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts @@ -79,7 +79,7 @@ export const buttonView = ( { const pressed = css` color: ${ COLORS.theme.foreground }; - font-weight: ${ CONFIG.fontWeightSemibold }; + font-weight: ${ CONFIG.fontWeightEmphasis }; `; const deselectable = css` diff --git a/packages/components/src/toolbar/toolbar-button/style.scss b/packages/components/src/toolbar/toolbar-button/style.scss index 8a28ed7ea79615..0c7cc1b41bf7b9 100644 --- a/packages/components/src/toolbar/toolbar-button/style.scss +++ b/packages/components/src/toolbar/toolbar-button/style.scss @@ -13,7 +13,7 @@ content: attr(data-subscript); font-family: $default-font; font-size: $default-font-size; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); line-height: 12px; position: absolute; right: 8px; diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 8204c2f0deca3a..9b5083e73531b1 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -101,7 +101,7 @@ export const ToolsPanelHeader = css` export const ToolsPanelHeading = css` font-size: inherit; - font-weight: ${ CONFIG.fontWeightSemibold }; + font-weight: ${ CONFIG.fontWeightEmphasis }; line-height: normal; /* Required to meet specificity requirements to ensure zero margin */ @@ -152,7 +152,7 @@ export const DropdownMenu = css` export const ResetLabel = styled.span` color: ${ COLORS.theme.accentDarker10 }; font-size: 11px; - font-weight: ${ CONFIG.fontWeightSemibold }; + font-weight: ${ CONFIG.fontWeightEmphasis }; line-height: 1.4; ${ rtl( { marginLeft: space( 3 ) } ) } text-transform: uppercase; diff --git a/packages/components/src/utils/base-label.ts b/packages/components/src/utils/base-label.ts index 9d380757317787..8ab88f92d7de43 100644 --- a/packages/components/src/utils/base-label.ts +++ b/packages/components/src/utils/base-label.ts @@ -12,7 +12,7 @@ import CONFIG from './config-values.js'; // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can. export const baseLabelTypography = css` font-size: 11px; - font-weight: ${ CONFIG.fontWeightSemibold }; + font-weight: ${ CONFIG.fontWeightEmphasis }; line-height: 1.4; text-transform: uppercase; `; diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 5dd3e056e0f699..f1003c3ed4846b 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -50,7 +50,7 @@ export default Object.assign( {}, CONTROL_PROPS, { fontSizeXSmall: 'calc(0.75 * 13px)', fontLineHeightBase: '1.4', fontWeight: 'normal', - fontWeightSemibold: '600', + fontWeightEmphasis: '600', gridBase: '4px', elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`, elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`, diff --git a/packages/connectors/src/connector-item.tsx b/packages/connectors/src/connector-item.tsx index 5b498f991cd329..5d2a9f9197ac92 100644 --- a/packages/connectors/src/connector-item.tsx +++ b/packages/connectors/src/connector-item.tsx @@ -46,7 +46,7 @@ export function ConnectorItem( { * { min-width: 0; diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss index 12a8f950e0c2c2..c90d0c83e991fc 100644 --- a/packages/dataviews/src/components/dataviews-filters/style.scss +++ b/packages/dataviews/src/components/dataviews-filters/style.scss @@ -120,7 +120,7 @@ } .dataviews-filters-__summary-filter-text-name { - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); } } @@ -178,7 +178,7 @@ .dataviews-filters__search-widget-filter-combobox-item-value { [data-user-value] { - font-weight: vars.$font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } } } diff --git a/packages/dataviews/src/components/dataviews-layouts/activity/style.scss b/packages/dataviews/src/components/dataviews-layouts/activity/style.scss index e600eead8a5edc..795015c4cafd80 100644 --- a/packages/dataviews/src/components/dataviews-layouts/activity/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/activity/style.scss @@ -6,7 +6,7 @@ .dataviews-view-activity__group-header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); color: var(--wpds-color-foreground-content-neutral-weak); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0; diff --git a/packages/dataviews/src/components/dataviews-layouts/grid/style.scss b/packages/dataviews/src/components/dataviews-layouts/grid/style.scss index a4c1b71781eb9d..c949402d465019 100644 --- a/packages/dataviews/src/components/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/grid/style.scss @@ -257,7 +257,7 @@ .dataviews-view-grid__group-header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); color: var(--wpds-color-foreground-content-neutral); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0 var(--wpds-dimension-padding-2xl); diff --git a/packages/dataviews/src/components/dataviews-layouts/list/style.scss b/packages/dataviews/src/components/dataviews-layouts/list/style.scss index 35c9f39e5e60b9..07bcf4c0f2da7d 100644 --- a/packages/dataviews/src/components/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/list/style.scss @@ -281,7 +281,7 @@ div.dataviews-view-list { .dataviews-view-list__group-header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); color: var(--wpds-color-foreground-content-neutral); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0 var(--wpds-dimension-padding-2xl); diff --git a/packages/dataviews/src/components/dataviews-layouts/picker-activity/style.scss b/packages/dataviews/src/components/dataviews-layouts/picker-activity/style.scss index ce6d98d98c3ef7..573fa49e7d13a8 100644 --- a/packages/dataviews/src/components/dataviews-layouts/picker-activity/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/picker-activity/style.scss @@ -189,7 +189,7 @@ .dataviews-view-picker-activity-group__header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); color: var(--wpds-color-foreground-content-neutral-weak); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0; diff --git a/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss b/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss index 3beefff25c5c5f..5e741196570147 100644 --- a/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/picker-grid/style.scss @@ -181,7 +181,7 @@ .dataviews-view-picker-grid-group__header { font-size: var(--wpds-typography-font-size-lg); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); color: var(--wpds-color-foreground-content-neutral); margin: 0 0 var(--wpds-dimension-gap-sm) 0; padding: 0 48px; diff --git a/packages/dataviews/src/components/dataviews-layouts/table/style.scss b/packages/dataviews/src/components/dataviews-layouts/table/style.scss index 047b279204c43e..87d912433a1869 100644 --- a/packages/dataviews/src/components/dataviews-layouts/table/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/table/style.scss @@ -154,7 +154,7 @@ padding-bottom: var(--wpds-dimension-padding-sm); font-size: 11px; text-transform: uppercase; - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); &:has(.dataviews-view-table-header-button) { padding-left: var(--wpds-dimension-padding-xs); @@ -204,7 +204,7 @@ padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm); font-size: 11px; text-transform: uppercase; - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); &:not(:hover) { color: var(--wpds-color-foreground-interactive-neutral); @@ -312,7 +312,7 @@ .dataviews-view-table__group-header-row { .dataviews-view-table__group-header-cell { - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); padding: var(--wpds-dimension-padding-md) var(--wpds-dimension-padding-2xl); color: var(--wpds-color-foreground-content-neutral); } diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss index 35cb354c68f2b5..fc7c2dac2825a5 100644 --- a/packages/dataviews/src/components/dataviews-pagination/style.scss +++ b/packages/dataviews/src/components/dataviews-pagination/style.scss @@ -2,13 +2,13 @@ .dataviews-pagination__page-select { font-size: 11px; - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); text-transform: uppercase; @include break-small() { .components-select-control__input { font-size: 11px !important; - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); } } } diff --git a/packages/dataviews/src/dataviews/stories/layout-custom.tsx b/packages/dataviews/src/dataviews/stories/layout-custom.tsx index 7a43668fad3983..b298f74d855933 100644 --- a/packages/dataviews/src/dataviews/stories/layout-custom.tsx +++ b/packages/dataviews/src/dataviews/stories/layout-custom.tsx @@ -56,7 +56,7 @@ function PosterGrid( { items }: { items: typeof data } ) { margin: '0 0 4px', fontSize: '18px', fontWeight: - 'var(--wpds-typography-font-weight-semibold)', + 'var(--wpds-typography-font-weight-emphasis)', textShadow: '0 1px 2px rgba(0,0,0,0.5)', } } > diff --git a/packages/dataviews/src/dataviews/style.scss b/packages/dataviews/src/dataviews/style.scss index 244bcd96d52f18..81976099f464d3 100644 --- a/packages/dataviews/src/dataviews/style.scss +++ b/packages/dataviews/src/dataviews/style.scss @@ -85,7 +85,7 @@ .dataviews-title-field { font-size: var(--wpds-typography-font-size-md); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); color: var(--wpds-color-foreground-content-neutral); text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss index 4df7e7dbda9d11..dd72caa974361f 100644 --- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss +++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss @@ -39,7 +39,7 @@ #poststuff h2.hndle { /* WordPress selectors yolo */ box-sizing: border-box; color: inherit; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); outline: none; padding: 0 $grid-unit-30; position: relative; diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md index 7c59febb4ff3d9..3c76342da0b4ae 100644 --- a/packages/edit-site/CHANGELOG.md +++ b/packages/edit-site/CHANGELOG.md @@ -8,7 +8,7 @@ ### Enhancements -- Update template-selection labels from medium (`500`) to semibold (`600`) font weight ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Update template-selection labels from the legacy medium weight to the emphasis font-weight token ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 6.50.0 (2026-07-01) diff --git a/packages/edit-site/src/components/add-new-template-legacy/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template-legacy/add-custom-template-modal-content.js index 59856150a71730..7d1d2f2cbf0646 100644 --- a/packages/edit-site/src/components/add-new-template-legacy/add-custom-template-modal-content.js +++ b/packages/edit-site/src/components/add-new-template-legacy/add-custom-template-modal-content.js @@ -54,7 +54,7 @@ function SuggestionListItem( { { entityForSuggestions.labels.all_items } @@ -249,7 +249,7 @@ function AddCustomTemplateModalContent( { > { entityForSuggestions.labels.singular_name } diff --git a/packages/edit-site/src/components/add-new-template-legacy/index.js b/packages/edit-site/src/components/add-new-template-legacy/index.js index a82118871cff3f..3a3fbe75f2fe0e 100644 --- a/packages/edit-site/src/components/add-new-template-legacy/index.js +++ b/packages/edit-site/src/components/add-new-template-legacy/index.js @@ -132,7 +132,7 @@ function TemplateListItem( { > { title } diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js index 88974e84ca994d..eaeb1ad00b86ba 100644 --- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js +++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js @@ -54,7 +54,7 @@ function SuggestionListItem( { { entityForSuggestions.labels.all_items } @@ -247,7 +247,7 @@ function AddCustomTemplateModalContent( { > { entityForSuggestions.labels.singular_name } diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js index 3a67066b98ce1a..946823d1e66b3f 100644 --- a/packages/edit-site/src/components/add-new-template/index.js +++ b/packages/edit-site/src/components/add-new-template/index.js @@ -131,7 +131,7 @@ function TemplateListItem( { > { title } diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index 3d53808829a05d..2e304e755edcab 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -21,7 +21,7 @@ &[aria-current="true"] { background: var(--wpds-color-background-interactive-neutral-weak-active); color: var(--wpds-color-foreground-interactive-neutral-weak-active); - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } // Make sure the focus style is drawn on top of the current item background. diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss index f3abd3ff947cf6..c79c6f02934dd8 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss @@ -21,7 +21,7 @@ h2 { font-size: 11px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); text-transform: uppercase; } } diff --git a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss index 8a936ce7fb4cf0..57c144038b5b83 100644 --- a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss @@ -1,5 +1,4 @@ @use "@wordpress/base-styles/colors" as *; -@use "@wordpress/base-styles/variables" as *; .edit-widgets-keyboard-shortcut-help-modal { &__section { @@ -8,7 +7,7 @@ &__section-title { font-size: 0.9rem; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } &__shortcut { @@ -28,7 +27,7 @@ } &__shortcut-term { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin: 0 0 0 1rem; text-align: right; } diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index e0833ff5ac38a0..c2273105d636ad 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -8,7 +8,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Notes: Remove the snackbar notice shown when a note is resolved or reopened, as the note's appearance already updates in place to reflect the change. The result is still announced to screen readers ([#80017](https://github.com/WordPress/gutenberg/pull/80017)). - The "View the autosave" notice now opens the autosave in the visual revisions view with its changes highlighted, instead of the classic revisions screen. It falls back to the classic screen when visual revisions are disabled ([#79947](https://github.com/WordPress/gutenberg/pull/79947)). diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss index 006fb0382e7be5..0b3353fee39b9c 100644 --- a/packages/editor/src/components/collab-sidebar/style.scss +++ b/packages/editor/src/components/collab-sidebar/style.scss @@ -136,11 +136,11 @@ } .editor-collab-sidebar-panel__more-reply-button { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .editor-collab-sidebar-panel__deleted-block-notice { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: $gray-700; } @@ -200,7 +200,7 @@ } .editor-note-indicator__overflow { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .show-icon-labels { diff --git a/packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts b/packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts index 88a3096587cded..b4a492463e30fa 100644 --- a/packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts +++ b/packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts @@ -15,7 +15,7 @@ import { FONT_LINE_HEIGHT_SMALL, FONT_SIZE_MEDIUM, FONT_SIZE_X_SMALL, - FONT_WEIGHT_SEMIBOLD, + FONT_WEIGHT_EMPHASIS, GRID_UNIT_05, GRID_UNIT_10, RADIUS_FULL, @@ -79,7 +79,7 @@ export const AVATAR_IFRAME_STYLES = ` align-items: center; justify-content: center; font-size: ${ FONT_SIZE_X_SMALL }; - font-weight: ${ FONT_WEIGHT_SEMIBOLD }; + font-weight: ${ FONT_WEIGHT_EMPHASIS }; border: 0; background-clip: border-box; } @@ -91,7 +91,7 @@ export const AVATAR_IFRAME_STYLES = ` } .editor-avatar__name { font-size: ${ FONT_SIZE_MEDIUM }; - font-weight: ${ FONT_WEIGHT_SEMIBOLD }; + font-weight: ${ FONT_WEIGHT_EMPHASIS }; line-height: ${ FONT_LINE_HEIGHT_SMALL }; color: var(--editor-avatar-name-color, ${ WHITE }); min-width: 0; diff --git a/packages/editor/src/components/collaborators-overlay/collaborator-styles.ts b/packages/editor/src/components/collaborators-overlay/collaborator-styles.ts index 833b9b46130fa9..217ed25b766081 100644 --- a/packages/editor/src/components/collaborators-overlay/collaborator-styles.ts +++ b/packages/editor/src/components/collaborators-overlay/collaborator-styles.ts @@ -40,8 +40,9 @@ export const FONT_SIZE_X_SMALL = '11px'; // _font.scss — $font-size-medium export const FONT_SIZE_MEDIUM = '13px'; -// _variables.scss — $font-weight-semibold -export const FONT_WEIGHT_SEMIBOLD = '600'; +// @wordpress/theme — --wpds-typography-font-weight-emphasis +export const FONT_WEIGHT_EMPHASIS = + 'var(--wpds-typography-font-weight-emphasis)'; // _font.scss — $font-line-height-small export const FONT_LINE_HEIGHT_SMALL = '20px'; diff --git a/packages/editor/src/components/collaborators-presence/avatar/styles.scss b/packages/editor/src/components/collaborators-presence/avatar/styles.scss index f18be7e4b9dea6..48d8506b3277ad 100644 --- a/packages/editor/src/components/collaborators-presence/avatar/styles.scss +++ b/packages/editor/src/components/collaborators-presence/avatar/styles.scss @@ -77,7 +77,7 @@ $-accent-color: var(--wp-admin-theme-color, #3858e9); align-items: center; justify-content: center; font-size: $font-size-x-small; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); border: 0; background-clip: border-box; @@ -92,7 +92,7 @@ $-accent-color: var(--wp-admin-theme-color, #3858e9); .editor-avatar__name { font-size: $font-size-medium; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); line-height: $font-line-height-small; color: var(--editor-avatar-name-color, $white); min-width: 0; diff --git a/packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss b/packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss index e533e2911e3362..410fb8863120ec 100644 --- a/packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss +++ b/packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss @@ -24,7 +24,7 @@ &-title { font-size: $font-size-medium; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); line-height: $font-line-height-small; display: flex; gap: $grid-unit-05; @@ -92,7 +92,7 @@ &-name { font-size: $font-size-medium; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); line-height: $font-line-height-small; color: $gray-900; overflow: hidden; diff --git a/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss b/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss index 52c1f5ab0f6aad..a5a05594ab7631 100644 --- a/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss @@ -1,5 +1,4 @@ @use "@wordpress/base-styles/colors" as *; -@use "@wordpress/base-styles/variables" as *; .editor-keyboard-shortcut-help-modal { &__section { @@ -8,7 +7,7 @@ &__section-title { font-size: 0.9rem; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } &__shortcut { @@ -28,7 +27,7 @@ } &__shortcut-term { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin: 0 0 0 1rem; text-align: right; } diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss index d319e0da5f4dfb..16103f526c968d 100644 --- a/packages/editor/src/components/post-last-revision/style.scss +++ b/packages/editor/src/components/post-last-revision/style.scss @@ -3,7 +3,7 @@ .editor-post-last-revision__title { width: 100%; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .editor-post-last-revision__title.components-button.has-icon { diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss index 83b8bc7880b376..a5b22e973a0183 100644 --- a/packages/editor/src/components/post-panel-row/style.scss +++ b/packages/editor/src/components/post-panel-row/style.scss @@ -33,7 +33,7 @@ text-wrap: pretty; height: auto; min-height: $button-size-compact; - font-weight: $font-weight-regular; + font-weight: var(--wpds-typography-font-weight-default); } .components-dropdown { diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 86e688bc545880..fd4ac54c0703a7 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -182,7 +182,7 @@ } .post-publish-panel__postpublish-header { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .post-publish-panel__postpublish-subheader { diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss index c78facda1257f4..57c6b669a84da6 100644 --- a/packages/editor/src/components/post-url/style.scss +++ b/packages/editor/src/components/post-url/style.scss @@ -38,7 +38,7 @@ .editor-post-url__link-slug { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } // TODO: This might indicate a need to update the InputControl itself, as diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss index d3b793a3ed194e..9a1485b82e504e 100644 --- a/packages/editor/src/components/table-of-contents/style.scss +++ b/packages/editor/src/components/table-of-contents/style.scss @@ -72,5 +72,5 @@ display: block; margin-top: 20px; font-size: 15px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } diff --git a/packages/fields/CHANGELOG.md b/packages/fields/CHANGELOG.md index c86a07e1a49905..b25ce05cf8fd8a 100644 --- a/packages/fields/CHANGELOG.md +++ b/packages/fields/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- `Slug`: Use the semibold font-weight variable for help text ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- `Slug`: Use the emphasis font-weight token for help text ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). diff --git a/packages/fields/src/fields/slug/style.scss b/packages/fields/src/fields/slug/style.scss index df204aa5debea5..2e10f4b016474b 100644 --- a/packages/fields/src/fields/slug/style.scss +++ b/packages/fields/src/fields/slug/style.scss @@ -1,5 +1,3 @@ -@use "@wordpress/base-styles/variables" as *; - .fields-controls__slug { // Reset `fieldset` browser defaults. border: 0; @@ -23,7 +21,7 @@ flex-direction: column; .fields-controls__slug-help-slug { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } } } diff --git a/packages/global-styles-ui/CHANGELOG.md b/packages/global-styles-ui/CHANGELOG.md index 5c5b8cc93239ba..4354772644b6dd 100644 --- a/packages/global-styles-ui/CHANGELOG.md +++ b/packages/global-styles-ui/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 1.17.0 (2026-07-01) diff --git a/packages/global-styles-ui/src/font-library/style.scss b/packages/global-styles-ui/src/font-library/style.scss index 61dfc06d81893d..daa3663ae1f8d6 100644 --- a/packages/global-styles-ui/src/font-library/style.scss +++ b/packages/global-styles-ui/src/font-library/style.scss @@ -25,7 +25,7 @@ $footer-height: 90px; .font-library__subtitle { text-transform: uppercase; - font-weight: variables.$font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); font-size: 11px; } } @@ -81,13 +81,13 @@ $footer-height: 90px; .font-library__page-selection { font-size: 11px; - font-weight: variables.$font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); text-transform: uppercase; @include mixins.break-small() { .font-library__page-selection-trigger { font-size: 11px !important; - font-weight: variables.$font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } } } @@ -95,7 +95,7 @@ $footer-height: 90px; .font-library__fonts-title { text-transform: uppercase; font-size: 11px; - font-weight: variables.$font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin-top: 0; margin-bottom: 0; } diff --git a/packages/global-styles-ui/src/screen-revisions/style.scss b/packages/global-styles-ui/src/screen-revisions/style.scss index 0ba7dcca93a3dc..c1a9c1f24bc90c 100644 --- a/packages/global-styles-ui/src/screen-revisions/style.scss +++ b/packages/global-styles-ui/src/screen-revisions/style.scss @@ -116,7 +116,7 @@ gap: $grid-unit-10; .global-styles-ui-screen-revisions__date { text-transform: uppercase; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); font-size: 12px; } } diff --git a/packages/global-styles-ui/src/style.scss b/packages/global-styles-ui/src/style.scss index fe695d92e8ddc0..69a3eb9a8d27e9 100644 --- a/packages/global-styles-ui/src/style.scss +++ b/packages/global-styles-ui/src/style.scss @@ -81,13 +81,13 @@ // Need to override the too specific styles for complementary areas. margin-bottom: 0 !important; text-transform: uppercase; - font-weight: variables.$font-weight-semibold !important; + font-weight: var(--wpds-typography-font-weight-emphasis) !important; font-size: 11px !important; } .global-styles-ui-section-title { color: colors.$gray-800; - font-weight: variables.$font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); line-height: 1.2; padding: 16px 16px 0; margin: 0; diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md index d7ac7195b3c6c0..50c0265d717588 100644 --- a/packages/interface/CHANGELOG.md +++ b/packages/interface/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- `ComplementaryArea`: Use the semibold font-weight variable for headings ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- `ComplementaryArea`: Use the emphasis font-weight token for headings ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 9a165d194bba72..692aef51d46923 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -36,7 +36,7 @@ h2 { font-size: $default-font-size; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: $gray-900; margin-bottom: 1.5em; } @@ -45,7 +45,7 @@ h3 { font-size: 11px; text-transform: uppercase; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: $gray-900; margin-bottom: 1.5em; } diff --git a/packages/media-editor/CHANGELOG.md b/packages/media-editor/CHANGELOG.md index 2bc3304dc2ad7d..fe0a101c5028f8 100644 --- a/packages/media-editor/CHANGELOG.md +++ b/packages/media-editor/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - `useAriaAnnouncer`: Update to use `speak` for screen reader announcements instead of an inline `aria-live` region. ([#79600](https://github.com/WordPress/gutenberg/pull/79600)) diff --git a/packages/media-editor/src/components/media-editor-image-controls/style.scss b/packages/media-editor/src/components/media-editor-image-controls/style.scss index fee3c57ea2d608..3f4e7a322b21f5 100644 --- a/packages/media-editor/src/components/media-editor-image-controls/style.scss +++ b/packages/media-editor/src/components/media-editor-image-controls/style.scss @@ -33,7 +33,7 @@ // headings. Mirrors `baseLabelTypography` from `@wordpress/components`. &__label { font-size: 11px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); line-height: 1.4; text-transform: uppercase; } diff --git a/packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss b/packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss index 603613e99d6e9c..f617915222039d 100644 --- a/packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss +++ b/packages/media-editor/src/components/media-editor-keyboard-shortcuts-modal/style.scss @@ -35,7 +35,7 @@ .media-editor-keyboard-shortcuts-modal__shortcut-term { background: none; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin: 0 0 0 1rem; padding: 0; text-align: right; diff --git a/packages/media-editor/src/components/media-preview/style.scss b/packages/media-editor/src/components/media-preview/style.scss index 2c2e7c1c7be0d7..f01f4fefe7c88f 100644 --- a/packages/media-editor/src/components/media-preview/style.scss +++ b/packages/media-editor/src/components/media-preview/style.scss @@ -59,7 +59,7 @@ } &__file-name { - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin-bottom: $grid-unit-10; } diff --git a/packages/media-editor/src/components/rotation-ruler/style.scss b/packages/media-editor/src/components/rotation-ruler/style.scss index c46e4821fc268a..8b7e657f6993d9 100644 --- a/packages/media-editor/src/components/rotation-ruler/style.scss +++ b/packages/media-editor/src/components/rotation-ruler/style.scss @@ -134,7 +134,7 @@ $rotation-ruler-accent: var(--wp-admin-theme-color, #3858e9); height: 14px; transform: translateX(-50%); font-size: 12px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); line-height: 14px; color: $gray-900; pointer-events: none; diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md index 66c357e1a38763..c6fe3a1ae29e7e 100644 --- a/packages/media-utils/CHANGELOG.md +++ b/packages/media-utils/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 5.50.0 (2026-07-01) diff --git a/packages/media-utils/src/components/media-upload-modal/style.scss b/packages/media-utils/src/components/media-upload-modal/style.scss index c8db178c7e8cb6..efe0f7eba2b1dc 100644 --- a/packages/media-utils/src/components/media-upload-modal/style.scss +++ b/packages/media-utils/src/components/media-upload-modal/style.scss @@ -86,7 +86,7 @@ h3 { margin: 0; font-size: 13px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } } diff --git a/packages/preferences/src/components/preferences-modal-section/style.scss b/packages/preferences/src/components/preferences-modal-section/style.scss index aac85458cdb46f..5a4428e6ae2751 100644 --- a/packages/preferences/src/components/preferences-modal-section/style.scss +++ b/packages/preferences/src/components/preferences-modal-section/style.scss @@ -19,7 +19,7 @@ .preferences-modal__section-title { font-size: 0.9rem; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin-top: 0; } diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md index 6c6ee7fc8eba53..6d7a605f893f4d 100644 --- a/packages/theme/CHANGELOG.md +++ b/packages/theme/CHANGELOG.md @@ -5,7 +5,7 @@ ### Breaking Changes - Remove the `--wpds-elevation-*` design tokens while the complete elevation model is still being defined ([#80099](https://github.com/WordPress/gutenberg/pull/80099)). -- Replace `--wpds-typography-font-weight-medium` with `--wpds-typography-font-weight-semibold` (`600`) ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Rename the font-weight tokens by intent: `--wpds-typography-font-weight-default` for baseline text and `--wpds-typography-font-weight-emphasis` for labels, controls, and headings ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Make the package ESM-only by removing the published CommonJS entrypoints and requiring Node.js `^20.19.0` or `>=22.13.0`. ([#80063](https://github.com/WordPress/gutenberg/pull/80063)) - Rename `--wpds-color-background-thumb-neutral-disabled` to `--wpds-color-background-thumb-neutral-weak-disabled` so the disabled token belongs to the existing neutral weak thumb family ([#79770](https://github.com/WordPress/gutenberg/pull/79770)). - `ThemeProvider`: reject partially transparent and `transparent` seed colors. `color.primary` and `color.background` now only accept fully opaque seed colors ([#79773](https://github.com/WordPress/gutenberg/pull/79773)). diff --git a/packages/theme/docs/tokens.md b/packages/theme/docs/tokens.md index 73f026ea10a05d..e1afce75ca219e 100644 --- a/packages/theme/docs/tokens.md +++ b/packages/theme/docs/tokens.md @@ -99,7 +99,7 @@ An optional size, intensity, state, or role modifier. | `5xs`, `4xs`, `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | Size scale modifiers | | `weak`, `strong` | Color emphasis modifiers | | `active`, `disabled` | Interactive state modifiers | -| `heading`, `body`, `mono`, `regular`, `semibold` | Typography role modifiers | +| `heading`, `body`, `mono`, `default`, `emphasis` | Typography role modifiers | | `subtle`, `balanced`, `expressive` | Motion easing intent modifiers | ### Shortened and compound forms @@ -349,24 +349,24 @@ The semantic token set is role-based, not a complete matrix of every property, t ### Typography -| Variable name | Description | -| ---------------------------------------- | ---------------------------------------------- | -| `--wpds-typography-font-family-heading` | Headings font family | -| `--wpds-typography-font-family-body` | Body font family | -| `--wpds-typography-font-family-mono` | Monospace font family | -| `--wpds-typography-font-size-xs` | Extra small font size | -| `--wpds-typography-font-size-sm` | Small font size | -| `--wpds-typography-font-size-md` | Medium font size | -| `--wpds-typography-font-size-lg` | Large font size | -| `--wpds-typography-font-size-xl` | Extra large font size | -| `--wpds-typography-font-size-2xl` | 2X large font size | -| `--wpds-typography-line-height-xs` | Extra small line height | -| `--wpds-typography-line-height-sm` | Small line height | -| `--wpds-typography-line-height-md` | Medium line height | -| `--wpds-typography-line-height-lg` | Large line height | -| `--wpds-typography-line-height-xl` | Extra large line height | -| `--wpds-typography-line-height-2xl` | 2X large line height | -| `--wpds-typography-font-weight-regular` | Regular font weight for body text | -| `--wpds-typography-font-weight-semibold` | Semibold font weight for emphasis and headings | +| Variable name | Description | +| ---------------------------------------- | ------------------------------------------------------- | +| `--wpds-typography-font-family-heading` | Headings font family | +| `--wpds-typography-font-family-body` | Body font family | +| `--wpds-typography-font-family-mono` | Monospace font family | +| `--wpds-typography-font-size-xs` | Extra small font size | +| `--wpds-typography-font-size-sm` | Small font size | +| `--wpds-typography-font-size-md` | Medium font size | +| `--wpds-typography-font-size-lg` | Large font size | +| `--wpds-typography-font-size-xl` | Extra large font size | +| `--wpds-typography-font-size-2xl` | 2X large font size | +| `--wpds-typography-line-height-xs` | Extra small line height | +| `--wpds-typography-line-height-sm` | Small line height | +| `--wpds-typography-line-height-md` | Medium line height | +| `--wpds-typography-line-height-lg` | Large line height | +| `--wpds-typography-line-height-xl` | Extra large line height | +| `--wpds-typography-line-height-2xl` | 2X large line height | +| `--wpds-typography-font-weight-default` | Baseline text weight for body copy and UI text | +| `--wpds-typography-font-weight-emphasis` | Elevated text weight for labels, controls, and headings | diff --git a/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx b/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx index b73d790366d848..4460660024c88f 100644 --- a/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx +++ b/packages/theme/src/color-ramps/stories/brand-fallbacks.story.tsx @@ -120,7 +120,7 @@ export const Default: StoryObj< typeof Verifier > = { const headerStyle: React.CSSProperties = { fontSize: 11, - fontWeight: 'var(--wpds-typography-font-weight-semibold)', + fontWeight: 'var(--wpds-typography-font-weight-emphasis)', color: '#757575', paddingBottom: 4, borderBottom: '1px solid #e0e0e0', diff --git a/packages/theme/src/color-ramps/stories/ramp-table.tsx b/packages/theme/src/color-ramps/stories/ramp-table.tsx index 9f2f498a23658a..ad1cdfd95051fa 100644 --- a/packages/theme/src/color-ramps/stories/ramp-table.tsx +++ b/packages/theme/src/color-ramps/stories/ramp-table.tsx @@ -60,7 +60,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >( padding: '8px 4px', fontSize: 11, fontWeight: - 'var(--wpds-typography-font-weight-semibold)', + 'var(--wpds-typography-font-weight-emphasis)', color: ramps[ 0 ].ramp.fgSurface4, } } > @@ -98,7 +98,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >( width: '100%', fontSize: 8, fontWeight: - 'var(--wpds-typography-font-weight-semibold)', + 'var(--wpds-typography-font-weight-emphasis)', color: tokenName === 'surface2' ? ramp.fgSurface4 diff --git a/packages/theme/src/prebuilt/css/design-tokens.css b/packages/theme/src/prebuilt/css/design-tokens.css index 744b6863db6858..be4cef9d63083d 100644 --- a/packages/theme/src/prebuilt/css/design-tokens.css +++ b/packages/theme/src/prebuilt/css/design-tokens.css @@ -337,10 +337,10 @@ --wpds-typography-line-height-xl: 32px; /* 2X large line height */ --wpds-typography-line-height-2xl: 40px; - /* Regular font weight for body text */ - --wpds-typography-font-weight-regular: 400; - /* Semibold font weight for emphasis and headings */ - --wpds-typography-font-weight-semibold: 600; + /* Baseline text weight for body copy and UI text */ + --wpds-typography-font-weight-default: 400; + /* Elevated text weight for labels, controls, and headings */ + --wpds-typography-font-weight-emphasis: 600; } @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) { diff --git a/packages/theme/src/prebuilt/js/design-token-fallbacks.mjs b/packages/theme/src/prebuilt/js/design-token-fallbacks.mjs index 3b897b7aaf32ec..5d00451a439ec1 100644 --- a/packages/theme/src/prebuilt/js/design-token-fallbacks.mjs +++ b/packages/theme/src/prebuilt/js/design-token-fallbacks.mjs @@ -177,8 +177,8 @@ export default { '--wpds-typography-font-size-sm': '12px', '--wpds-typography-font-size-xl': '20px', '--wpds-typography-font-size-xs': '11px', - '--wpds-typography-font-weight-regular': '400', - '--wpds-typography-font-weight-semibold': '600', + '--wpds-typography-font-weight-default': '400', + '--wpds-typography-font-weight-emphasis': '600', '--wpds-typography-line-height-2xl': '40px', '--wpds-typography-line-height-lg': '28px', '--wpds-typography-line-height-md': '24px', diff --git a/packages/theme/src/prebuilt/js/design-tokens.mjs b/packages/theme/src/prebuilt/js/design-tokens.mjs index f6298997ff6df5..a2871b424eb8f1 100644 --- a/packages/theme/src/prebuilt/js/design-tokens.mjs +++ b/packages/theme/src/prebuilt/js/design-tokens.mjs @@ -169,6 +169,6 @@ export default [ '--wpds-typography-line-height-lg', '--wpds-typography-line-height-xl', '--wpds-typography-line-height-2xl', - '--wpds-typography-font-weight-regular', - '--wpds-typography-font-weight-semibold', + '--wpds-typography-font-weight-default', + '--wpds-typography-font-weight-emphasis', ]; diff --git a/packages/theme/src/prebuilt/ts/token-types.ts b/packages/theme/src/prebuilt/ts/token-types.ts index 0f68f03bf9206f..de34c9d90d0b3b 100644 --- a/packages/theme/src/prebuilt/ts/token-types.ts +++ b/packages/theme/src/prebuilt/ts/token-types.ts @@ -194,7 +194,7 @@ export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; /** * Font weight variants. */ -export type FontWeight = 'regular' | 'semibold'; +export type FontWeight = 'default' | 'emphasis'; /** * Line height scale. diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json index 91dfa34f6e0094..7b4f2a14d56890 100644 --- a/packages/theme/tokens/typography.json +++ b/packages/theme/tokens/typography.json @@ -97,13 +97,13 @@ }, "font-weight": { "$type": "fontWeight", - "regular": { + "default": { "$value": 400, - "$description": "Regular font weight for body text" + "$description": "Baseline text weight for body copy and UI text" }, - "semibold": { + "emphasis": { "$value": 600, - "$description": "Semibold font weight for emphasis and headings" + "$description": "Elevated text weight for labels, controls, and headings" }, "$extensions": { "com.figma.scopes": [ "FONT_WEIGHT" ] diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 0b957772366bbe..a125a78c8b9001 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -13,7 +13,7 @@ ### Enhancements -- Update headings, buttons, and field labels from medium (`499`) to semibold (`600`) font weight ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Update headings, buttons, and field labels from the legacy medium weight to the emphasis font-weight token ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). - Add `LinkButton` component ([#78944](https://github.com/WordPress/gutenberg/pull/78944)). diff --git a/packages/ui/src/button/style.module.css b/packages/ui/src/button/style.module.css index a527c3840afe1b..9cffd960c174e3 100644 --- a/packages/ui/src/button/style.module.css +++ b/packages/ui/src/button/style.module.css @@ -10,7 +10,7 @@ .button { /* Internal variables */ - --wp-ui-button-font-weight: var(--wpds-typography-font-weight-semibold); + --wp-ui-button-font-weight: var(--wpds-typography-font-weight-emphasis); --wp-ui-button-background-color: var(--wpds-color-background-interactive-brand-strong); --wp-ui-button-background-color-active: var(--wpds-color-background-interactive-brand-strong-active); diff --git a/packages/ui/src/card/stories/index.story.tsx b/packages/ui/src/card/stories/index.story.tsx index fcaca5ff682d4a..9535dd953489bf 100644 --- a/packages/ui/src/card/stories/index.story.tsx +++ b/packages/ui/src/card/stories/index.story.tsx @@ -13,7 +13,7 @@ function Text( { children }: { children: React.ReactNode } ) { margin: 0, fontFamily: 'var(--wpds-typography-font-family-body)', fontSize: 'var(--wpds-typography-font-size-md)', - fontWeight: 'var(--wpds-typography-font-weight-regular)', + fontWeight: 'var(--wpds-typography-font-weight-default)', lineHeight: 'var(--wpds-typography-line-height-sm)', textWrap: 'pretty', color: 'var(--wpds-color-foreground-content-neutral-weak)', diff --git a/packages/ui/src/collapsible-card/stories/index.story.tsx b/packages/ui/src/collapsible-card/stories/index.story.tsx index 84950d92d48a02..1eb66d1a01ce2c 100644 --- a/packages/ui/src/collapsible-card/stories/index.story.tsx +++ b/packages/ui/src/collapsible-card/stories/index.story.tsx @@ -14,7 +14,7 @@ function Text( { children }: { children: React.ReactNode } ) { margin: 0, fontFamily: 'var(--wpds-typography-font-family-body)', fontSize: 'var(--wpds-typography-font-size-md)', - fontWeight: 'var(--wpds-typography-font-weight-regular)', + fontWeight: 'var(--wpds-typography-font-weight-default)', lineHeight: 'var(--wpds-typography-line-height-sm)', textWrap: 'pretty', color: 'var(--wpds-color-foreground-content-neutral-weak)', diff --git a/packages/ui/src/link/style.module.css b/packages/ui/src/link/style.module.css index 0346dee5d5ffb7..945e7b83220115 100644 --- a/packages/ui/src/link/style.module.css +++ b/packages/ui/src/link/style.module.css @@ -54,7 +54,7 @@ line-height: 1; display: inline-block; margin-inline-start: var(--wpds-dimension-padding-xs); - font-weight: var(--wpds-typography-font-weight-regular); + font-weight: var(--wpds-typography-font-weight-default); text-decoration: none; } diff --git a/packages/ui/src/text/style.module.css b/packages/ui/src/text/style.module.css index 33c9bc2e506664..d4e37417e98d34 100644 --- a/packages/ui/src/text/style.module.css +++ b/packages/ui/src/text/style.module.css @@ -10,111 +10,111 @@ provides values for both element-specific CSS defenses. */ .heading-2xl { --_gcd-heading-font-size: var(--wpds-typography-font-size-2xl); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-emphasis); --_gcd-p-font-size: var(--wpds-typography-font-size-2xl); --_gcd-p-line-height: var(--wpds-typography-line-height-2xl); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-2xl); line-height: var(--wpds-typography-line-height-2xl); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); } .heading-xl { --_gcd-heading-font-size: var(--wpds-typography-font-size-xl); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-emphasis); --_gcd-p-font-size: var(--wpds-typography-font-size-xl); --_gcd-p-line-height: var(--wpds-typography-line-height-md); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-xl); line-height: var(--wpds-typography-line-height-md); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); } .heading-lg { --_gcd-heading-font-size: var(--wpds-typography-font-size-lg); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-emphasis); --_gcd-p-font-size: var(--wpds-typography-font-size-lg); --_gcd-p-line-height: var(--wpds-typography-line-height-sm); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-lg); line-height: var(--wpds-typography-line-height-sm); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); } .heading-md { --_gcd-heading-font-size: var(--wpds-typography-font-size-md); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-emphasis); --_gcd-p-font-size: var(--wpds-typography-font-size-md); --_gcd-p-line-height: var(--wpds-typography-line-height-sm); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-md); line-height: var(--wpds-typography-line-height-sm); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); } .heading-sm { --_gcd-heading-font-size: var(--wpds-typography-font-size-xs); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-semibold); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-emphasis); --_gcd-p-font-size: var(--wpds-typography-font-size-xs); --_gcd-p-line-height: var(--wpds-typography-line-height-xs); font-family: var(--wpds-typography-font-family-heading); font-size: var(--wpds-typography-font-size-xs); line-height: var(--wpds-typography-line-height-xs); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); text-transform: uppercase; } .body-xl { --_gcd-heading-font-size: var(--wpds-typography-font-size-xl); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-default); --_gcd-p-font-size: var(--wpds-typography-font-size-xl); --_gcd-p-line-height: var(--wpds-typography-line-height-xl); font-family: var(--wpds-typography-font-family-body); font-size: var(--wpds-typography-font-size-xl); line-height: var(--wpds-typography-line-height-xl); - font-weight: var(--wpds-typography-font-weight-regular); + font-weight: var(--wpds-typography-font-weight-default); } .body-lg { --_gcd-heading-font-size: var(--wpds-typography-font-size-lg); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-default); --_gcd-p-font-size: var(--wpds-typography-font-size-lg); --_gcd-p-line-height: var(--wpds-typography-line-height-md); font-family: var(--wpds-typography-font-family-body); font-size: var(--wpds-typography-font-size-lg); line-height: var(--wpds-typography-line-height-md); - font-weight: var(--wpds-typography-font-weight-regular); + font-weight: var(--wpds-typography-font-weight-default); } .body-md { --_gcd-heading-font-size: var(--wpds-typography-font-size-md); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-default); --_gcd-p-font-size: var(--wpds-typography-font-size-md); --_gcd-p-line-height: var(--wpds-typography-line-height-sm); font-family: var(--wpds-typography-font-family-body); font-size: var(--wpds-typography-font-size-md); line-height: var(--wpds-typography-line-height-sm); - font-weight: var(--wpds-typography-font-weight-regular); + font-weight: var(--wpds-typography-font-weight-default); } .body-sm { --_gcd-heading-font-size: var(--wpds-typography-font-size-sm); - --_gcd-heading-font-weight: var(--wpds-typography-font-weight-regular); + --_gcd-heading-font-weight: var(--wpds-typography-font-weight-default); --_gcd-p-font-size: var(--wpds-typography-font-size-sm); --_gcd-p-line-height: var(--wpds-typography-line-height-xs); font-family: var(--wpds-typography-font-family-body); font-size: var(--wpds-typography-font-size-sm); line-height: var(--wpds-typography-line-height-xs); - font-weight: var(--wpds-typography-font-weight-regular); + font-weight: var(--wpds-typography-font-weight-default); } } } diff --git a/packages/ui/src/utils/css/field.module.css b/packages/ui/src/utils/css/field.module.css index 82b96fcec957c0..e54e09062bfbcb 100644 --- a/packages/ui/src/utils/css/field.module.css +++ b/packages/ui/src/utils/css/field.module.css @@ -8,7 +8,7 @@ font-family: var(--wpds-typography-font-family-body); font-size: var(--wpds-typography-font-size-xs); line-height: var(--wp-ui-field-label-line-height); - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); text-transform: uppercase; color: var(--wpds-color-foreground-content-neutral); diff --git a/packages/ui/src/utils/css/global-css-defense.module.css b/packages/ui/src/utils/css/global-css-defense.module.css index 0efd9aa6f8b591..eb43a949bc756c 100644 --- a/packages/ui/src/utils/css/global-css-defense.module.css +++ b/packages/ui/src/utils/css/global-css-defense.module.css @@ -103,7 +103,7 @@ p.p { :is(h1, h2, h3, h4, h5, h6).heading { color: var(--_gcd-heading-color, var(--wpds-color-foreground-content-neutral)); font-size: var(--_gcd-heading-font-size, inherit); - font-weight: var(--_gcd-heading-font-weight, var(--wpds-typography-font-weight-semibold)); + font-weight: var(--_gcd-heading-font-weight, var(--wpds-typography-font-weight-emphasis)); margin: var(--_gcd-heading-margin, 0); } diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md index 5b18b788fe9a8c..11358fde5fe324 100644 --- a/packages/widgets/CHANGELOG.md +++ b/packages/widgets/CHANGELOG.md @@ -4,7 +4,7 @@ ### Enhancements -- Use the semibold font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)). ## 4.50.0 (2026-07-01) diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss index fff5f242c5950e..55dbaf4dea2311 100644 --- a/packages/widgets/src/blocks/legacy-widget/editor.scss +++ b/packages/widgets/src/blocks/legacy-widget/editor.scss @@ -16,7 +16,7 @@ color: $black; font-family: $default-font; font-size: 14px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin: 0 0 $grid-unit-15 0; } @@ -134,7 +134,7 @@ h3 { font-size: 14px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); margin: $grid-unit-05 0; } @@ -150,7 +150,7 @@ .interface-complementary-area .wp-block-legacy-widget-inspector-card__name { margin: 0 0 5px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } // When wide widget is selected it opens in a popover but its container should still have a bit of height. diff --git a/packages/widgets/src/blocks/widget-group/editor.scss b/packages/widgets/src/blocks/widget-group/editor.scss index 84b9d2e9525885..4001d5d3563375 100644 --- a/packages/widgets/src/blocks/widget-group/editor.scss +++ b/packages/widgets/src/blocks/widget-group/editor.scss @@ -5,7 +5,7 @@ .widget-title { font-family: $default-font; font-size: 18px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } } diff --git a/packages/workflow/src/components/workflow-menu.scss b/packages/workflow/src/components/workflow-menu.scss index e6c1a3462b4ea9..e7851f83acc2ae 100644 --- a/packages/workflow/src/components/workflow-menu.scss +++ b/packages/workflow/src/components/workflow-menu.scss @@ -138,7 +138,7 @@ .workflows-workflow-menu__item mark { color: inherit; background: unset; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); } .workflows-workflow-menu__output { @@ -153,7 +153,7 @@ h3 { margin: 0 0 $grid-unit-05; font-size: 16px; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: $gray-900; } } diff --git a/routes/connectors-home/default-connectors.tsx b/routes/connectors-home/default-connectors.tsx index 40a104479c5c84..b7213dd6e76d26 100644 --- a/routes/connectors-home/default-connectors.tsx +++ b/routes/connectors-home/default-connectors.tsx @@ -101,7 +101,7 @@ const ConnectedBadge = () => ( padding: '4px 12px', borderRadius: '2px', fontSize: '13px', - fontWeight: 'var(--wpds-typography-font-weight-semibold)', + fontWeight: 'var(--wpds-typography-font-weight-emphasis)', whiteSpace: 'nowrap', } } > diff --git a/routes/guidelines/style.scss b/routes/guidelines/style.scss index e38c793321a608..ae5a799e75a32c 100644 --- a/routes/guidelines/style.scss +++ b/routes/guidelines/style.scss @@ -44,7 +44,7 @@ align-self: flex-start; // stylelint-disable-next-line plugin/use-logical-properties-and-values -- TODO: Please fix margin-left: -$grid-unit-20; - font-weight: $font-weight-semibold; + font-weight: var(--wpds-typography-font-weight-emphasis); color: $gray-900; } diff --git a/routes/template-list/add-new-template/add-custom-template-modal-content.tsx b/routes/template-list/add-new-template/add-custom-template-modal-content.tsx index b6dc26996f4c02..d1c8e3e3e503c1 100644 --- a/routes/template-list/add-new-template/add-custom-template-modal-content.tsx +++ b/routes/template-list/add-new-template/add-custom-template-modal-content.tsx @@ -86,7 +86,7 @@ function SuggestionListItem( { { entityForSuggestions.labels.all_items } @@ -298,7 +298,7 @@ function AddCustomTemplateModalContent( { > { entityForSuggestions.labels.singular_name } diff --git a/routes/template-list/add-new-template/index.tsx b/routes/template-list/add-new-template/index.tsx index 3deaefad212197..d6b82473e2e5e3 100644 --- a/routes/template-list/add-new-template/index.tsx +++ b/routes/template-list/add-new-template/index.tsx @@ -136,7 +136,7 @@ function TemplateListItem( { > { title } diff --git a/storybook/decorators/with-max-width-wrapper.jsx b/storybook/decorators/with-max-width-wrapper.jsx index b9425f46e69e4d..a32fc86ce67851 100644 --- a/storybook/decorators/with-max-width-wrapper.jsx +++ b/storybook/decorators/with-max-width-wrapper.jsx @@ -18,7 +18,7 @@ const Indicator = styled.div` background: #e0e0e0; text-transform: uppercase; font-size: 11px; - font-weight: var( --wpds-typography-font-weight-semibold ); + font-weight: var( --wpds-typography-font-weight-emphasis ); color: #757575; margin-top: 24px; `; diff --git a/storybook/decorators/with-text-overflow-containers.tsx b/storybook/decorators/with-text-overflow-containers.tsx index 9d82b94cbfb328..0fa1b5d772ae65 100644 --- a/storybook/decorators/with-text-overflow-containers.tsx +++ b/storybook/decorators/with-text-overflow-containers.tsx @@ -6,7 +6,7 @@ const DEFAULT_HEIGHT = 60; const labelStyles: CSSProperties = { fontSize: 'var(--wpds-typography-font-size-xs)', - fontWeight: 'var(--wpds-typography-font-weight-semibold)', + fontWeight: 'var(--wpds-typography-font-weight-emphasis)', color: 'var(--wpds-color-foreground-content-neutral-weak)', textTransform: 'uppercase', marginBlockEnd: 'var(--wpds-dimension-gap-xs)', diff --git a/storybook/package-styles/config.js b/storybook/package-styles/config.js index 6e3e5a738d8369..92cfcf0fd1ee0b 100644 --- a/storybook/package-styles/config.js +++ b/storybook/package-styles/config.js @@ -100,6 +100,11 @@ const CONFIG = [ ltr: [ designTokens ], rtl: [ designTokens ], }, + { + componentIdMatcher: /^tokens-/, + ltr: [ designTokens ], + rtl: [ designTokens ], + }, { componentIdMatcher: /^mediaeditor-/, ltr: [ componentsLtr ], diff --git a/storybook/stories/playground/draggable-cross-document-fallback.story.jsx b/storybook/stories/playground/draggable-cross-document-fallback.story.jsx index f68bb15c5314b3..b4b75bad131a72 100644 --- a/storybook/stories/playground/draggable-cross-document-fallback.story.jsx +++ b/storybook/stories/playground/draggable-cross-document-fallback.story.jsx @@ -83,7 +83,7 @@ export const InsideIframeWithCompatSlot = () => { borderRadius: 4, color: '#1e1e1e', fontWeight: - 'var(--wpds-typography-font-weight-semibold)', + 'var(--wpds-typography-font-weight-emphasis)', padding: '8px 12px', } } > @@ -104,7 +104,7 @@ export const InsideIframeWithCompatSlot = () => { cursor: 'grab', display: 'inline-flex', fontWeight: - 'var(--wpds-typography-font-weight-semibold)', + 'var(--wpds-typography-font-weight-emphasis)', height: 56, justifyContent: 'center', padding: '0 16px', diff --git a/storybook/stories/tokens/typography.mdx b/storybook/stories/tokens/typography.mdx index a908114cbe207f..8a1da514714fb9 100644 --- a/storybook/stories/tokens/typography.mdx +++ b/storybook/stories/tokens/typography.mdx @@ -7,8 +7,8 @@ export const typography = { primary: '-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }, weight: { - regular: '400', - semibold: '600', + default: 'var(--wpds-typography-font-weight-default)', + emphasis: 'var(--wpds-typography-font-weight-emphasis)', }, size: { s1: 11, @@ -50,7 +50,7 @@ They are defined as SASS mixins and can be used like so: Number(typography.size.s2), Number(typography.size.s1), ]} - fontWeight={typography.weight.semibold} + fontWeight={typography.weight.emphasis} sampleText={SampleTextHeading} fontFamily={typography.type.primary} /> @@ -65,23 +65,23 @@ They are defined as SASS mixins and can be used like so: heading-2x-large - `$font-family-headings`, `font-weight-semibold`, `font-size-2x-large`, `line-height-2x-large` + `$font-family-headings`, `--wpds-typography-font-weight-emphasis`, `font-size-2x-large`, `line-height-2x-large` heading-x-large - `$font-family-headings`, `font-weight-semibold`, `font-size-x-large`, `line-height-medium` + `$font-family-headings`, `--wpds-typography-font-weight-emphasis`, `font-size-x-large`, `line-height-medium` heading-large - `$font-family-headings`, `font-weight-semibold`, `font-size-large`, `line-height-small` + `$font-family-headings`, `--wpds-typography-font-weight-emphasis`, `font-size-large`, `line-height-small` heading-medium - `$font-family-headings`, `font-weight-semibold`, `font-size-medium`, `line-height-small` + `$font-family-headings`, `--wpds-typography-font-weight-emphasis`, `font-size-medium`, `line-height-small` heading-small - `$font-family-headings`, `font-weight-semibold`, `font-size-x-small`, `line-height-x-small` + `$font-family-headings`, `--wpds-typography-font-weight-emphasis`, `font-size-x-small`, `line-height-x-small` @@ -95,7 +95,7 @@ They are defined as SASS mixins and can be used like so: Number(typography.size.s3), Number(typography.size.s2), ]} - fontWeight={typography.weight.regular} + fontWeight={typography.weight.default} sampleText={SampleTextParagraph} fontFamily={typography.type.primary} /> @@ -110,26 +110,26 @@ They are defined as SASS mixins and can be used like so: body-x-large - `$font-family-body`, `font-weight-regular`, `font-size-x-large`, `line-height-x-large` + `$font-family-body`, `--wpds-typography-font-weight-default`, `font-size-x-large`, `line-height-x-large` body-large - `$font-family-body`, `font-weight-regular`, `font-size-large`, `line-height-medium` + `$font-family-body`, `--wpds-typography-font-weight-default`, `font-size-large`, `line-height-medium` body-medium - `$font-family-body`, `font-weight-regular`, `font-size-medium`, `line-height-small` + `$font-family-body`, `--wpds-typography-font-weight-default`, `font-size-medium`, `line-height-small` body-small - `$font-family-body`, `font-weight-regular`, `font-size-small`, `line-height-x-small` + `$font-family-body`, `--wpds-typography-font-weight-default`, `font-size-small`, `line-height-x-small` ## Primitive tokens -Primitive tokens are organized into 4 sets relating to `size`, `line-height`, `weight`, and `family`, defined as SASS variables. +Primitive tokens are organized into 4 sets relating to `size`, `line-height`, `weight`, and `family`. Font weights use CSS design tokens; the remaining examples use legacy Sass variables. ### Size ```css @@ -155,8 +155,8 @@ $font-line-height-2x-large: 40px; ### Weight ```css -$font-weight-regular: 400; -$font-weight-semibold: 600; +font-weight: var(--wpds-typography-font-weight-default); +font-weight: var(--wpds-typography-font-weight-emphasis); ``` ### Families @@ -173,6 +173,6 @@ Generally use of semantic tokens is encouraged, but it is possible to create ad .my-type-style { font-family: $font-family-headings; line-height: $font-line-height-x-small; - font-weight: $font-weight-regular; + font-weight: var(--wpds-typography-font-weight-default); } ``` diff --git a/tools/stylelint/config.js b/tools/stylelint/config.js index c3b062f9c10083..717132e70b102c 100644 --- a/tools/stylelint/config.js +++ b/tools/stylelint/config.js @@ -26,14 +26,23 @@ module.exports = { { '/.*/': [ '/--wp-components-color-/', + '/\\$font-weight-regular/', '/\\$font-weight-medium/', ], cursor: [ 'pointer' ], }, { message: ( property, value ) => { - if ( value.includes( '$font-weight-medium' ) ) { - return '`$font-weight-medium` is kept for backwards compatibility only. Use `$font-weight-regular` or `$font-weight-semibold` based on the intended emphasis.'; + if ( + value.includes( '$font-weight-regular' ) || + value.includes( '$font-weight-medium' ) + ) { + const variable = value.includes( + '$font-weight-regular' + ) + ? '$font-weight-regular' + : '$font-weight-medium'; + return `\`${ variable }\` is kept for backwards compatibility only. Use \`var(--wpds-typography-font-weight-default)\` or \`var(--wpds-typography-font-weight-emphasis)\` based on the intended emphasis.`; } if ( property === 'cursor' ) { return 'Use the `var( --wpds-cursor-control )` token for interactive non-link controls. If this is for a link, you can disable this rule.'; diff --git a/widgets/site-health/components/circle-progress/circle-progress.module.css b/widgets/site-health/components/circle-progress/circle-progress.module.css index fe88b60a1c7880..03e0763018a3eb 100644 --- a/widgets/site-health/components/circle-progress/circle-progress.module.css +++ b/widgets/site-health/components/circle-progress/circle-progress.module.css @@ -37,5 +37,5 @@ .percentage { fill: var(--site-health-fg); font-size: 36px; - font-weight: var(--wpds-typography-font-weight-semibold); + font-weight: var(--wpds-typography-font-weight-emphasis); } From 00f30c13828703f8a8b53f1ecc4d2398ad925d1c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 13 Jul 2026 19:12:33 +0200 Subject: [PATCH 12/13] Base Styles: Remove medium font weight variable --- packages/base-styles/CHANGELOG.md | 6 +++++- packages/base-styles/_variables.scss | 1 - tools/stylelint/config.js | 6 +++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index dda08f7f70af62..ea1cba8a22de17 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,9 +2,13 @@ ## Unreleased +### Breaking Changes + +- Remove `$font-weight-medium`. Use `var(--wpds-typography-font-weight-default)` or `var(--wpds-typography-font-weight-emphasis)` based on the intended emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). + ### Enhancements -- Retain `$font-weight-regular` and `$font-weight-medium` for backwards compatibility while migrating repository styles to the semantic `@wordpress/theme` font-weight tokens, and align the legacy font-family variables with the theme typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Retain `$font-weight-regular` for backwards compatibility while migrating repository styles to the semantic `@wordpress/theme` font-weight tokens, and align the legacy font-family variables with the theme typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698), [#80082](https://github.com/WordPress/gutenberg/pull/80082)). ## 10.2.0 (2026-07-01) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 440df4d5f96f29..d8f36949bd5d21 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -41,7 +41,6 @@ $font-line-height-2x-large: 40px; // Weights $font-weight-regular: 400; // Kept for backwards compatibility. Do not use in new styles. -$font-weight-medium: 499; // Kept for backwards compatibility. Do not use in new styles. /** * Grid System. diff --git a/tools/stylelint/config.js b/tools/stylelint/config.js index 717132e70b102c..774ed8769e1621 100644 --- a/tools/stylelint/config.js +++ b/tools/stylelint/config.js @@ -42,7 +42,11 @@ module.exports = { ) ? '$font-weight-regular' : '$font-weight-medium'; - return `\`${ variable }\` is kept for backwards compatibility only. Use \`var(--wpds-typography-font-weight-default)\` or \`var(--wpds-typography-font-weight-emphasis)\` based on the intended emphasis.`; + const status = + variable === '$font-weight-regular' + ? 'is kept for backwards compatibility only' + : 'has been removed'; + return `\`${ variable }\` ${ status }. Use \`var(--wpds-typography-font-weight-default)\` or \`var(--wpds-typography-font-weight-emphasis)\` based on the intended emphasis.`; } if ( property === 'cursor' ) { return 'Use the `var( --wpds-cursor-control )` token for interactive non-link controls. If this is for a link, you can disable this rule.'; From 6a7c8b351b75275c7c081a757a6a8ec563b4beb6 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 13 Jul 2026 19:20:48 +0200 Subject: [PATCH 13/13] Base Styles: Remove regular font weight variable --- packages/base-styles/CHANGELOG.md | 4 ++-- packages/base-styles/_variables.scss | 3 --- tools/stylelint/config.js | 6 +----- 3 files changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index ea1cba8a22de17..147f58af313063 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -4,11 +4,11 @@ ### Breaking Changes -- Remove `$font-weight-medium`. Use `var(--wpds-typography-font-weight-default)` or `var(--wpds-typography-font-weight-emphasis)` based on the intended emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Remove `$font-weight-regular` and `$font-weight-medium`. Use `var(--wpds-typography-font-weight-default)` or `var(--wpds-typography-font-weight-emphasis)` based on the intended emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). ### Enhancements -- Retain `$font-weight-regular` for backwards compatibility while migrating repository styles to the semantic `@wordpress/theme` font-weight tokens, and align the legacy font-family variables with the theme typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). +- Use semantic `@wordpress/theme` font-weight tokens in typography mixins, and align the legacy font-family variables with the theme typography tokens ([#80093](https://github.com/WordPress/gutenberg/pull/80093)). - Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698), [#80082](https://github.com/WordPress/gutenberg/pull/80082)). ## 10.2.0 (2026-07-01) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index d8f36949bd5d21..e1d975ef0180ed 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -39,9 +39,6 @@ $font-line-height-large: 28px; $font-line-height-x-large: 32px; $font-line-height-2x-large: 40px; -// Weights -$font-weight-regular: 400; // Kept for backwards compatibility. Do not use in new styles. - /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ diff --git a/tools/stylelint/config.js b/tools/stylelint/config.js index 774ed8769e1621..dbbde6329b12d9 100644 --- a/tools/stylelint/config.js +++ b/tools/stylelint/config.js @@ -42,11 +42,7 @@ module.exports = { ) ? '$font-weight-regular' : '$font-weight-medium'; - const status = - variable === '$font-weight-regular' - ? 'is kept for backwards compatibility only' - : 'has been removed'; - return `\`${ variable }\` ${ status }. Use \`var(--wpds-typography-font-weight-default)\` or \`var(--wpds-typography-font-weight-emphasis)\` based on the intended emphasis.`; + return `\`${ variable }\` has been removed. Use \`var(--wpds-typography-font-weight-default)\` or \`var(--wpds-typography-font-weight-emphasis)\` based on the intended emphasis.`; } if ( property === 'cursor' ) { return 'Use the `var( --wpds-cursor-control )` token for interactive non-link controls. If this is for a link, you can disable this rule.';