@wordpress/base-styles 10.1.0 → 10.3.1-next.v.202607070741.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.
@@ -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,14 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 10.3.0-next.0 (2026-07-07)
6
+
7
+ ### Enhancements
8
+
9
+ - Add `outset-ring__focus` mixin for outline-based focus rings using `--wpds-*` design tokens ([#78698](https://github.com/WordPress/gutenberg/pull/78698)).
10
+
11
+ ## 10.2.0 (2026-07-01)
12
+
5
13
  ## 10.1.0 (2026-06-24)
6
14
 
7
15
  ## 10.0.1 (2026-06-16)
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";
@@ -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/_z-index.scss CHANGED
@@ -83,6 +83,7 @@ $z-layers: (
83
83
  ".block-editor-template-part__selection-modal": 1000001,
84
84
  ".block-editor-block-rename-modal": 1000001,
85
85
  ".block-editor-block-allowed-blocks-modal": 1000001,
86
+ ".block-editor-inserter__media-panel-detach-modal": 1000001,
86
87
  ".edit-site-list__rename-modal": 1000001,
87
88
  ".dataviews-action-modal": 1000001,
88
89
  ".editor-action-modal": 1000001,
@@ -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
  */
@@ -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
  */
@@ -0,0 +1,204 @@
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-neutral-disabled': '#dbdbdb',
62
+ '--wpds-color-background-thumb-neutral-weak': '#8d8d8d',
63
+ '--wpds-color-background-thumb-neutral-weak-active': '#6e6e6e',
64
+ '--wpds-color-background-track-neutral': '#dbdbdb',
65
+ '--wpds-color-background-track-neutral-weak': '#f0f0f0',
66
+ '--wpds-color-foreground-content-caution': '#281d00',
67
+ '--wpds-color-foreground-content-caution-weak': '#826a00',
68
+ '--wpds-color-foreground-content-error': '#470000',
69
+ '--wpds-color-foreground-content-error-weak': '#cc1818',
70
+ '--wpds-color-foreground-content-info': '#001b4f',
71
+ '--wpds-color-foreground-content-info-weak': '#006bd7',
72
+ '--wpds-color-foreground-content-neutral': '#1e1e1e',
73
+ '--wpds-color-foreground-content-neutral-weak': '#707070',
74
+ '--wpds-color-foreground-content-success': '#002900',
75
+ '--wpds-color-foreground-content-success-weak': '#008030',
76
+ '--wpds-color-foreground-content-warning': '#2e1900',
77
+ '--wpds-color-foreground-content-warning-weak': '#926300',
78
+ '--wpds-color-foreground-interactive-brand':
79
+ 'var(--wp-admin-theme-color, #3858e9)',
80
+ '--wpds-color-foreground-interactive-brand-active':
81
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black)',
82
+ '--wpds-color-foreground-interactive-brand-disabled': '#8d8d8d',
83
+ '--wpds-color-foreground-interactive-brand-strong': '#fff',
84
+ '--wpds-color-foreground-interactive-brand-strong-active': '#fff',
85
+ '--wpds-color-foreground-interactive-brand-strong-disabled': '#8d8d8d',
86
+ '--wpds-color-foreground-interactive-error': '#cc1818',
87
+ '--wpds-color-foreground-interactive-error-active': '#470000',
88
+ '--wpds-color-foreground-interactive-error-disabled': '#8d8d8d',
89
+ '--wpds-color-foreground-interactive-error-strong': '#f2efef',
90
+ '--wpds-color-foreground-interactive-error-strong-active': '#f2efef',
91
+ '--wpds-color-foreground-interactive-error-strong-disabled': '#8d8d8d',
92
+ '--wpds-color-foreground-interactive-neutral': '#1e1e1e',
93
+ '--wpds-color-foreground-interactive-neutral-active': '#1e1e1e',
94
+ '--wpds-color-foreground-interactive-neutral-disabled': '#8d8d8d',
95
+ '--wpds-color-foreground-interactive-neutral-strong': '#f0f0f0',
96
+ '--wpds-color-foreground-interactive-neutral-strong-active': '#f0f0f0',
97
+ '--wpds-color-foreground-interactive-neutral-strong-disabled': '#8d8d8d',
98
+ '--wpds-color-foreground-interactive-neutral-weak': '#707070',
99
+ '--wpds-color-foreground-interactive-neutral-weak-disabled': '#8d8d8d',
100
+ '--wpds-color-stroke-focus': 'var(--wp-admin-theme-color, #3858e9)',
101
+ '--wpds-color-stroke-interactive-brand':
102
+ 'var(--wp-admin-theme-color, #3858e9)',
103
+ '--wpds-color-stroke-interactive-brand-active':
104
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',
105
+ '--wpds-color-stroke-interactive-brand-disabled': '#dbdbdb',
106
+ '--wpds-color-stroke-interactive-error': '#cc1818',
107
+ '--wpds-color-stroke-interactive-error-active': '#9d0000',
108
+ '--wpds-color-stroke-interactive-error-disabled': '#dbdbdb',
109
+ '--wpds-color-stroke-interactive-error-strong': '#cc1818',
110
+ '--wpds-color-stroke-interactive-neutral': '#8d8d8d',
111
+ '--wpds-color-stroke-interactive-neutral-active': '#6e6e6e',
112
+ '--wpds-color-stroke-interactive-neutral-disabled': '#dbdbdb',
113
+ '--wpds-color-stroke-interactive-neutral-strong': '#6e6e6e',
114
+ '--wpds-color-stroke-surface-brand':
115
+ 'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white)',
116
+ '--wpds-color-stroke-surface-brand-strong':
117
+ 'var(--wp-admin-theme-color, #3858e9)',
118
+ '--wpds-color-stroke-surface-caution': '#cfc28d',
119
+ '--wpds-color-stroke-surface-caution-strong': '#826a00',
120
+ '--wpds-color-stroke-surface-error': '#dab1aa',
121
+ '--wpds-color-stroke-surface-error-strong': '#cc1818',
122
+ '--wpds-color-stroke-surface-info': '#a9c6e7',
123
+ '--wpds-color-stroke-surface-info-strong': '#006bd7',
124
+ '--wpds-color-stroke-surface-neutral': '#dbdbdb',
125
+ '--wpds-color-stroke-surface-neutral-strong': '#8d8d8d',
126
+ '--wpds-color-stroke-surface-neutral-weak': '#f0f0f0',
127
+ '--wpds-color-stroke-surface-success': '#94d29e',
128
+ '--wpds-color-stroke-surface-success-strong': '#008030',
129
+ '--wpds-color-stroke-surface-warning': '#e1bc7c',
130
+ '--wpds-color-stroke-surface-warning-strong': '#926300',
131
+ '--wpds-cursor-control': 'pointer',
132
+ '--wpds-dimension-gap-2xl': '32px',
133
+ '--wpds-dimension-gap-3xl': '40px',
134
+ '--wpds-dimension-gap-lg': '16px',
135
+ '--wpds-dimension-gap-md': '12px',
136
+ '--wpds-dimension-gap-sm': '8px',
137
+ '--wpds-dimension-gap-xl': '24px',
138
+ '--wpds-dimension-gap-xs': '4px',
139
+ '--wpds-dimension-padding-2xl': '24px',
140
+ '--wpds-dimension-padding-3xl': '32px',
141
+ '--wpds-dimension-padding-lg': '16px',
142
+ '--wpds-dimension-padding-md': '12px',
143
+ '--wpds-dimension-padding-sm': '8px',
144
+ '--wpds-dimension-padding-xl': '20px',
145
+ '--wpds-dimension-padding-xs': '4px',
146
+ '--wpds-dimension-size-2xs': '16px',
147
+ '--wpds-dimension-size-3xs': '12px',
148
+ '--wpds-dimension-size-4xs': '8px',
149
+ '--wpds-dimension-size-5xs': '4px',
150
+ '--wpds-dimension-size-lg': '40px',
151
+ '--wpds-dimension-size-md': '32px',
152
+ '--wpds-dimension-size-sm': '24px',
153
+ '--wpds-dimension-size-xs': '20px',
154
+ '--wpds-dimension-surface-width-2xl': '960px',
155
+ '--wpds-dimension-surface-width-lg': '560px',
156
+ '--wpds-dimension-surface-width-md': '400px',
157
+ '--wpds-dimension-surface-width-sm': '320px',
158
+ '--wpds-dimension-surface-width-xl': '720px',
159
+ '--wpds-dimension-surface-width-xs': '240px',
160
+ '--wpds-elevation-lg':
161
+ '0px 5px 15px 0px #00000014, 0px 15px 27px 0px #00000012, 0px 30px 36px 0px #0000000a, 0px 50px 43px 0px #00000005',
162
+ '--wpds-elevation-md':
163
+ '0px 2px 3px 0px #0000000d, 0px 4px 5px 0px #0000000a, 0px 12px 12px 0px #00000008, 0px 16px 16px 0px #00000005',
164
+ '--wpds-elevation-sm':
165
+ '0px 1px 2px 0px #0000000d, 0px 2px 3px 0px #0000000a, 0px 6px 6px 0px #00000008, 0px 8px 8px 0px #00000005',
166
+ '--wpds-elevation-xs':
167
+ '0px 1px 1px 0px #00000008, 0px 1px 2px 0px #00000005, 0px 3px 3px 0px #00000005, 0px 4px 4px 0px #00000003',
168
+ '--wpds-motion-duration-lg': '300ms',
169
+ '--wpds-motion-duration-md': '200ms',
170
+ '--wpds-motion-duration-sm': '100ms',
171
+ '--wpds-motion-duration-xl': '400ms',
172
+ '--wpds-motion-duration-xs': '50ms',
173
+ '--wpds-motion-easing-balanced': 'cubic-bezier(0.4, 0, 0.2, 1)',
174
+ '--wpds-motion-easing-expressive': 'cubic-bezier(0.25, 0, 0, 1)',
175
+ '--wpds-motion-easing-subtle': 'cubic-bezier(0.15, 0, 0.15, 1)',
176
+ '--wpds-typography-font-family-body':
177
+ '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
178
+ '--wpds-typography-font-family-heading':
179
+ '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
180
+ '--wpds-typography-font-family-mono':
181
+ '"Menlo", "Consolas", monaco, monospace',
182
+ '--wpds-typography-font-size-2xl': '32px',
183
+ '--wpds-typography-font-size-lg': '15px',
184
+ '--wpds-typography-font-size-md': '13px',
185
+ '--wpds-typography-font-size-sm': '12px',
186
+ '--wpds-typography-font-size-xl': '20px',
187
+ '--wpds-typography-font-size-xs': '11px',
188
+ '--wpds-typography-font-weight-medium': '499',
189
+ '--wpds-typography-font-weight-regular': '400',
190
+ '--wpds-typography-line-height-2xl': '40px',
191
+ '--wpds-typography-line-height-lg': '28px',
192
+ '--wpds-typography-line-height-md': '24px',
193
+ '--wpds-typography-line-height-sm': '20px',
194
+ '--wpds-typography-line-height-xl': '32px',
195
+ '--wpds-typography-line-height-xs': '16px',
196
+ );
197
+
198
+ @function var( $token ) {
199
+ @if not map.has-key( $fallbacks, $token ) {
200
+ @error "Unknown design token: #{$token}";
201
+ }
202
+
203
+ @return string.unquote( 'var(#{$token}, #{map.get($fallbacks, $token)})' );
204
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/base-styles",
3
- "version": "10.1.0",
3
+ "version": "10.3.1-next.v.202607070741.0+a51d59513",
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": "0e7112a4f4fde4ea15bd9060489b8f6fe11eb6ca"
50
+ "gitHead": "f637726e370c8b23695ed9af82adbe171ad235d8"
48
51
  }