@wordpress/base-styles 10.2.0 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.stylelintrc.mjs +28 -0
  2. package/CHANGELOG.md +11 -0
  3. package/_mixins.scss +16 -2
  4. package/_variables.scss +5 -10
  5. package/_z-index.scss +1 -1
  6. package/build-style/admin-schemes-rtl.css +6 -0
  7. package/build-style/admin-schemes.css +6 -0
  8. package/internal/_wpds-token-fallbacks.scss +198 -0
  9. package/package.json +5 -2
package/.stylelintrc.mjs ADDED
@@ -0,0 +1,28 @@
1
+ import baseConfig from '@wordpress/stylelint-tools/config';
2
+
3
+ const [ disallowedValues, disallowedValueMessages ] =
4
+ baseConfig.rules[ 'declaration-property-value-disallowed-list' ];
5
+
6
+ /** @type {import('stylelint').Config} */
7
+ export default {
8
+ extends: '@wordpress/stylelint-tools/config',
9
+ rules: {
10
+ 'declaration-property-value-disallowed-list': [
11
+ {
12
+ ...disallowedValues,
13
+ '/.*/': [
14
+ ...disallowedValues[ '/.*/' ],
15
+ '/var\\(\\s*--wpds-/',
16
+ ],
17
+ },
18
+ {
19
+ message: ( property, value ) => {
20
+ if ( /var\(\s*--wpds-/.test( value ) ) {
21
+ return 'To ensure proper fallbacks, use the local `wpds.var()` helper instead of direct `var(--wpds-*)` references.';
22
+ }
23
+ return disallowedValueMessages.message( property, value );
24
+ },
25
+ },
26
+ ],
27
+ },
28
+ };
package/CHANGELOG.md CHANGED
@@ -2,6 +2,17 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 11.0.0 (2026-07-14)
6
+
7
+ ### Breaking Changes
8
+
9
+ - 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)).
10
+
11
+ ### Enhancements
12
+
13
+ - 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)).
14
+ - 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)).
15
+
5
16
  ## 10.2.0 (2026-07-01)
6
17
 
7
18
  ## 10.1.0 (2026-06-24)
package/_mixins.scss CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  @use "sass:color";
6
6
  @use "sass:math";
7
+ @use "./internal/wpds-token-fallbacks" as wpds;
7
8
  @use "./variables";
8
9
  @use "./colors";
9
10
  @use "./breakpoints";
@@ -12,12 +13,12 @@
12
13
 
13
14
  @mixin _text-heading() {
14
15
  font-family: variables.$font-family-headings;
15
- font-weight: variables.$font-weight-medium;
16
+ font-weight: wpds.var("--wpds-typography-font-weight-emphasis");
16
17
  }
17
18
 
18
19
  @mixin _text-body() {
19
20
  font-family: variables.$font-family-body;
20
- font-weight: variables.$font-weight-regular;
21
+ font-weight: wpds.var("--wpds-typography-font-weight-default");
21
22
  }
22
23
 
23
24
  @mixin heading-small() {
@@ -180,6 +181,19 @@
180
181
  }
181
182
 
182
183
 
184
+ /**
185
+ * Standard focus rings for the WordPress Design System.
186
+ *
187
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
188
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
189
+ */
190
+
191
+ @mixin outset-ring__focus() {
192
+ outline: wpds.var("--wpds-border-width-focus") solid wpds.var("--wpds-color-stroke-focus");
193
+ outline-offset: wpds.var("--wpds-border-width-focus");
194
+ }
195
+
196
+
183
197
  /**
184
198
  * Applies editor left position to the selector passed as argument
185
199
  */
package/_variables.scss CHANGED
@@ -12,7 +12,11 @@
12
12
  * Fonts & basic variables.
13
13
  */
14
14
 
15
- $default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; // Todo: deprecate in favor of $family variables
15
+ $font-family-headings: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
16
+ $font-family-body: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
17
+ $font-family-mono: Menlo, Consolas, monaco, monospace;
18
+
19
+ $default-font: $font-family-body; // Todo: deprecate in favor of $family variables
16
20
  $default-line-height: 1.4; // Todo: deprecate in favor of $line-height tokens
17
21
 
18
22
  /**
@@ -35,15 +39,6 @@ $font-line-height-large: 28px;
35
39
  $font-line-height-x-large: 32px;
36
40
  $font-line-height-2x-large: 40px;
37
41
 
38
- // Weights
39
- $font-weight-regular: 400;
40
- $font-weight-medium: 499; // ensures fallback to 400 (instead of 600)
41
-
42
- // Families
43
- $font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
44
- $font-family-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
45
- $font-family-mono: Menlo, Consolas, monaco, monospace;
46
-
47
42
  /**
48
43
  * Grid System.
49
44
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
package/_z-index.scss CHANGED
@@ -45,7 +45,6 @@ $z-layers: (
45
45
  // #wpadminbar { z-index: 99999 }
46
46
  ".interface-interface-skeleton__sidebar": 100000,
47
47
  ".editor-layout__toggle-sidebar-panel": 100000,
48
- ".edit-widgets-sidebar": 100000,
49
48
  ".editor-post-publish-panel": 100001,
50
49
  // For larger views, the wp-admin navbar dropdown should be at top of
51
50
  // the Publish Post sidebar.
@@ -83,6 +82,7 @@ $z-layers: (
83
82
  ".block-editor-template-part__selection-modal": 1000001,
84
83
  ".block-editor-block-rename-modal": 1000001,
85
84
  ".block-editor-block-allowed-blocks-modal": 1000001,
85
+ ".block-editor-inserter__media-panel-detach-modal": 1000001,
86
86
  ".edit-site-list__rename-modal": 1000001,
87
87
  ".dataviews-action-modal": 1000001,
88
88
  ".editor-action-modal": 1000001,
package/build-style/admin-schemes-rtl.css CHANGED
@@ -67,6 +67,12 @@
67
67
  /**
68
68
  * Focus styles.
69
69
  */
70
+ /**
71
+ * Standard focus rings for the WordPress Design System.
72
+ *
73
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
74
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
75
+ */
70
76
  /**
71
77
  * Applies editor left position to the selector passed as argument
72
78
  */
package/build-style/admin-schemes.css CHANGED
@@ -67,6 +67,12 @@
67
67
  /**
68
68
  * Focus styles.
69
69
  */
70
+ /**
71
+ * Standard focus rings for the WordPress Design System.
72
+ *
73
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
74
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
75
+ */
70
76
  /**
71
77
  * Applies editor left position to the selector passed as argument
72
78
  */
package/internal/_wpds-token-fallbacks.scss ADDED
@@ -0,0 +1,198 @@
1
+ // This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.
2
+ // Do not edit this file directly.
3
+
4
+ @use 'sass:map';
5
+ @use 'sass:string';
6
+
7
+ $fallbacks: (
8
+ '--wpds-border-radius-lg': '8px',
9
+ '--wpds-border-radius-md': '4px',
10
+ '--wpds-border-radius-sm': '2px',
11
+ '--wpds-border-radius-xl': '12px',
12
+ '--wpds-border-radius-xs': '1px',
13
+ '--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',
14
+ '--wpds-border-width-lg': '8px',
15
+ '--wpds-border-width-md': '4px',
16
+ '--wpds-border-width-sm': '2px',
17
+ '--wpds-border-width-xs': '1px',
18
+ '--wpds-color-background-interactive-brand-strong':
19
+ 'var(--wp-admin-theme-color, #3858e9)',
20
+ '--wpds-color-background-interactive-brand-strong-active':
21
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',
22
+ '--wpds-color-background-interactive-brand-strong-disabled': '#e6e6e6',
23
+ '--wpds-color-background-interactive-brand-weak': '#0000',
24
+ '--wpds-color-background-interactive-brand-weak-active':
25
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',
26
+ '--wpds-color-background-interactive-brand-weak-disabled': '#0000',
27
+ '--wpds-color-background-interactive-error': '#0000',
28
+ '--wpds-color-background-interactive-error-active': '#fff6f5',
29
+ '--wpds-color-background-interactive-error-disabled': '#0000',
30
+ '--wpds-color-background-interactive-error-strong': '#cc1818',
31
+ '--wpds-color-background-interactive-error-strong-active': '#b90000',
32
+ '--wpds-color-background-interactive-error-strong-disabled': '#e6e6e6',
33
+ '--wpds-color-background-interactive-error-weak': '#0000',
34
+ '--wpds-color-background-interactive-error-weak-active': '#f6e6e3',
35
+ '--wpds-color-background-interactive-error-weak-disabled': '#0000',
36
+ '--wpds-color-background-interactive-neutral-strong': '#2d2d2d',
37
+ '--wpds-color-background-interactive-neutral-strong-active': '#1e1e1e',
38
+ '--wpds-color-background-interactive-neutral-strong-disabled': '#e6e6e6',
39
+ '--wpds-color-background-interactive-neutral-weak': '#0000',
40
+ '--wpds-color-background-interactive-neutral-weak-active': '#ededed',
41
+ '--wpds-color-background-interactive-neutral-weak-disabled': '#0000',
42
+ '--wpds-color-background-surface-brand':
43
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',
44
+ '--wpds-color-background-surface-caution': '#fee995',
45
+ '--wpds-color-background-surface-caution-weak': '#fff9ca',
46
+ '--wpds-color-background-surface-error': '#f6e6e3',
47
+ '--wpds-color-background-surface-error-weak': '#fff6f5',
48
+ '--wpds-color-background-surface-info': '#deebfa',
49
+ '--wpds-color-background-surface-info-weak': '#f3f9ff',
50
+ '--wpds-color-background-surface-neutral': '#fcfcfc',
51
+ '--wpds-color-background-surface-neutral-strong': '#fff',
52
+ '--wpds-color-background-surface-neutral-weak': '#f4f4f4',
53
+ '--wpds-color-background-surface-success': '#c6f7cd',
54
+ '--wpds-color-background-surface-success-weak': '#ebffed',
55
+ '--wpds-color-background-surface-warning': '#fde6be',
56
+ '--wpds-color-background-surface-warning-weak': '#fff7e1',
57
+ '--wpds-color-background-thumb-brand':
58
+ 'var(--wp-admin-theme-color, #3858e9)',
59
+ '--wpds-color-background-thumb-brand-active':
60
+ 'var(--wp-admin-theme-color, #3858e9)',
61
+ '--wpds-color-background-thumb-brand-disabled': '#dbdbdb',
62
+ '--wpds-color-background-thumb-neutral-weak': '#8d8d8d',
63
+ '--wpds-color-background-thumb-neutral-weak-active': '#6e6e6e',
64
+ '--wpds-color-background-thumb-neutral-weak-disabled': '#dbdbdb',
65
+ '--wpds-color-background-track-neutral': '#dbdbdb',
66
+ '--wpds-color-background-track-neutral-weak': '#f0f0f0',
67
+ '--wpds-color-foreground-content-caution': '#281d00',
68
+ '--wpds-color-foreground-content-caution-weak': '#826a00',
69
+ '--wpds-color-foreground-content-error': '#470000',
70
+ '--wpds-color-foreground-content-error-weak': '#cc1818',
71
+ '--wpds-color-foreground-content-info': '#001b4f',
72
+ '--wpds-color-foreground-content-info-weak': '#006bd7',
73
+ '--wpds-color-foreground-content-neutral': '#1e1e1e',
74
+ '--wpds-color-foreground-content-neutral-weak': '#707070',
75
+ '--wpds-color-foreground-content-success': '#002900',
76
+ '--wpds-color-foreground-content-success-weak': '#008030',
77
+ '--wpds-color-foreground-content-warning': '#2e1900',
78
+ '--wpds-color-foreground-content-warning-weak': '#926300',
79
+ '--wpds-color-foreground-interactive-brand':
80
+ 'var(--wp-admin-theme-color, #3858e9)',
81
+ '--wpds-color-foreground-interactive-brand-active':
82
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black)',
83
+ '--wpds-color-foreground-interactive-brand-disabled': '#8d8d8d',
84
+ '--wpds-color-foreground-interactive-brand-strong': '#fff',
85
+ '--wpds-color-foreground-interactive-brand-strong-active': '#fff',
86
+ '--wpds-color-foreground-interactive-brand-strong-disabled': '#8d8d8d',
87
+ '--wpds-color-foreground-interactive-error': '#cc1818',
88
+ '--wpds-color-foreground-interactive-error-active': '#470000',
89
+ '--wpds-color-foreground-interactive-error-disabled': '#8d8d8d',
90
+ '--wpds-color-foreground-interactive-error-strong': '#f2efef',
91
+ '--wpds-color-foreground-interactive-error-strong-active': '#f2efef',
92
+ '--wpds-color-foreground-interactive-error-strong-disabled': '#8d8d8d',
93
+ '--wpds-color-foreground-interactive-neutral': '#1e1e1e',
94
+ '--wpds-color-foreground-interactive-neutral-active': '#1e1e1e',
95
+ '--wpds-color-foreground-interactive-neutral-disabled': '#8d8d8d',
96
+ '--wpds-color-foreground-interactive-neutral-strong': '#f0f0f0',
97
+ '--wpds-color-foreground-interactive-neutral-strong-active': '#f0f0f0',
98
+ '--wpds-color-foreground-interactive-neutral-strong-disabled': '#8d8d8d',
99
+ '--wpds-color-foreground-interactive-neutral-weak': '#707070',
100
+ '--wpds-color-foreground-interactive-neutral-weak-active': '#1e1e1e',
101
+ '--wpds-color-foreground-interactive-neutral-weak-disabled': '#8d8d8d',
102
+ '--wpds-color-stroke-focus': 'var(--wp-admin-theme-color, #3858e9)',
103
+ '--wpds-color-stroke-interactive-brand':
104
+ 'var(--wp-admin-theme-color, #3858e9)',
105
+ '--wpds-color-stroke-interactive-brand-active':
106
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',
107
+ '--wpds-color-stroke-interactive-brand-disabled': '#dbdbdb',
108
+ '--wpds-color-stroke-interactive-error': '#cc1818',
109
+ '--wpds-color-stroke-interactive-error-active': '#9d0000',
110
+ '--wpds-color-stroke-interactive-error-disabled': '#dbdbdb',
111
+ '--wpds-color-stroke-interactive-error-strong': '#cc1818',
112
+ '--wpds-color-stroke-interactive-neutral': '#8d8d8d',
113
+ '--wpds-color-stroke-interactive-neutral-active': '#6e6e6e',
114
+ '--wpds-color-stroke-interactive-neutral-disabled': '#dbdbdb',
115
+ '--wpds-color-stroke-interactive-neutral-strong': '#6e6e6e',
116
+ '--wpds-color-stroke-surface-brand':
117
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white)',
118
+ '--wpds-color-stroke-surface-brand-strong':
119
+ 'var(--wp-admin-theme-color, #3858e9)',
120
+ '--wpds-color-stroke-surface-caution': '#cfc28d',
121
+ '--wpds-color-stroke-surface-caution-strong': '#826a00',
122
+ '--wpds-color-stroke-surface-error': '#dab1aa',
123
+ '--wpds-color-stroke-surface-error-strong': '#cc1818',
124
+ '--wpds-color-stroke-surface-info': '#a9c6e7',
125
+ '--wpds-color-stroke-surface-info-strong': '#006bd7',
126
+ '--wpds-color-stroke-surface-neutral': '#dbdbdb',
127
+ '--wpds-color-stroke-surface-neutral-strong': '#8d8d8d',
128
+ '--wpds-color-stroke-surface-neutral-weak': '#f0f0f0',
129
+ '--wpds-color-stroke-surface-success': '#94d29e',
130
+ '--wpds-color-stroke-surface-success-strong': '#008030',
131
+ '--wpds-color-stroke-surface-warning': '#e1bc7c',
132
+ '--wpds-color-stroke-surface-warning-strong': '#926300',
133
+ '--wpds-cursor-control': 'pointer',
134
+ '--wpds-dimension-gap-2xl': '32px',
135
+ '--wpds-dimension-gap-3xl': '40px',
136
+ '--wpds-dimension-gap-lg': '16px',
137
+ '--wpds-dimension-gap-md': '12px',
138
+ '--wpds-dimension-gap-sm': '8px',
139
+ '--wpds-dimension-gap-xl': '24px',
140
+ '--wpds-dimension-gap-xs': '4px',
141
+ '--wpds-dimension-padding-2xl': '24px',
142
+ '--wpds-dimension-padding-3xl': '32px',
143
+ '--wpds-dimension-padding-lg': '16px',
144
+ '--wpds-dimension-padding-md': '12px',
145
+ '--wpds-dimension-padding-sm': '8px',
146
+ '--wpds-dimension-padding-xl': '20px',
147
+ '--wpds-dimension-padding-xs': '4px',
148
+ '--wpds-dimension-size-2xs': '16px',
149
+ '--wpds-dimension-size-3xs': '12px',
150
+ '--wpds-dimension-size-4xs': '8px',
151
+ '--wpds-dimension-size-5xs': '4px',
152
+ '--wpds-dimension-size-lg': '40px',
153
+ '--wpds-dimension-size-md': '32px',
154
+ '--wpds-dimension-size-sm': '24px',
155
+ '--wpds-dimension-size-xs': '20px',
156
+ '--wpds-dimension-surface-width-2xl': '960px',
157
+ '--wpds-dimension-surface-width-lg': '560px',
158
+ '--wpds-dimension-surface-width-md': '400px',
159
+ '--wpds-dimension-surface-width-sm': '320px',
160
+ '--wpds-dimension-surface-width-xl': '720px',
161
+ '--wpds-dimension-surface-width-xs': '240px',
162
+ '--wpds-motion-duration-lg': '300ms',
163
+ '--wpds-motion-duration-md': '200ms',
164
+ '--wpds-motion-duration-sm': '100ms',
165
+ '--wpds-motion-duration-xl': '400ms',
166
+ '--wpds-motion-duration-xs': '50ms',
167
+ '--wpds-motion-easing-balanced': 'cubic-bezier(0.4, 0, 0.2, 1)',
168
+ '--wpds-motion-easing-expressive': 'cubic-bezier(0.25, 0, 0, 1)',
169
+ '--wpds-motion-easing-subtle': 'cubic-bezier(0.15, 0, 0.15, 1)',
170
+ '--wpds-typography-font-family-body':
171
+ '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
172
+ '--wpds-typography-font-family-heading':
173
+ '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
174
+ '--wpds-typography-font-family-mono':
175
+ '"Menlo", "Consolas", monaco, monospace',
176
+ '--wpds-typography-font-size-2xl': '32px',
177
+ '--wpds-typography-font-size-lg': '15px',
178
+ '--wpds-typography-font-size-md': '13px',
179
+ '--wpds-typography-font-size-sm': '12px',
180
+ '--wpds-typography-font-size-xl': '20px',
181
+ '--wpds-typography-font-size-xs': '11px',
182
+ '--wpds-typography-font-weight-default': '400',
183
+ '--wpds-typography-font-weight-emphasis': '600',
184
+ '--wpds-typography-line-height-2xl': '40px',
185
+ '--wpds-typography-line-height-lg': '28px',
186
+ '--wpds-typography-line-height-md': '24px',
187
+ '--wpds-typography-line-height-sm': '20px',
188
+ '--wpds-typography-line-height-xl': '32px',
189
+ '--wpds-typography-line-height-xs': '16px',
190
+ );
191
+
192
+ @function var( $token ) {
193
+ @if not map.has-key( $fallbacks, $token ) {
194
+ @error "Unknown design token: #{$token}";
195
+ }
196
+
197
+ @return string.unquote( 'var(#{$token}, #{map.get($fallbacks, $token)})' );
198
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/base-styles",
3
- "version": "10.2.0",
3
+ "version": "11.0.0",
4
4
  "description": "Base SCSS utilities and variables for WordPress.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -41,8 +41,11 @@
41
41
  "./z-index": "./_z-index.scss"
42
42
  },
43
43
  "wpScript": true,
44
+ "devDependencies": {
45
+ "@wordpress/stylelint-tools": "file:../../tools/stylelint"
46
+ },
44
47
  "publishConfig": {
45
48
  "access": "public"
46
49
  },
47
- "gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
50
+ "gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
48
51
  }