@wordpress/theme 0.6.0 → 0.7.1-next.v.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 (17) hide show
  1. package/CHANGELOG.md +49 -28
  2. package/README.md +2 -2
  3. package/build/prebuilt/js/design-tokens.cjs +9 -6
  4. package/build/prebuilt/js/design-tokens.cjs.map +2 -2
  5. package/build/prebuilt/ts/token-types.cjs.map +1 -1
  6. package/build-module/prebuilt/js/design-tokens.mjs +9 -6
  7. package/build-module/prebuilt/js/design-tokens.mjs.map +2 -2
  8. package/build-types/prebuilt/ts/token-types.d.ts +2 -2
  9. package/build-types/prebuilt/ts/token-types.d.ts.map +1 -1
  10. package/build-types/stories/index.story.d.ts +0 -1
  11. package/build-types/stories/index.story.d.ts.map +1 -1
  12. package/package.json +4 -4
  13. package/src/prebuilt/css/design-tokens.css +55 -43
  14. package/src/prebuilt/js/design-tokens.mjs +9 -6
  15. package/src/prebuilt/ts/token-types.ts +2 -2
  16. package/src/stories/index.story.tsx +4 -5
  17. package/src/stylelint-plugins/test/fixtures/no-unknown-ds-tokens-valid.css +1 -1
package/CHANGELOG.md CHANGED
@@ -2,47 +2,68 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
- ## 0.6.0 (2026-01-29)
5
+ ## 0.7.0-next.0 (2026-02-05)
6
6
 
7
- ## 0.5.0 (2026-01-16)
7
+ ### Breaking changes
8
+
9
+ - Renamed padding tokens to remove the `surface` segment and updated the scale from `2xs`–`lg` to `xs`–`3xl`. To preserve the same values:
10
+ - `--wpds-dimension-padding-surface-2xs`: use `--wpds-dimension-padding-xs` instead.
11
+ - `--wpds-dimension-padding-surface-xs`: use `--wpds-dimension-padding-sm` instead.
12
+ - `--wpds-dimension-padding-surface-sm`: use `--wpds-dimension-padding-lg` instead.
13
+ - `--wpds-dimension-padding-surface-md`: use `--wpds-dimension-padding-2xl` instead.
14
+ - `--wpds-dimension-padding-surface-lg`: use `--wpds-dimension-padding-3xl` instead.
15
+ - Updated gap token scale from `2xs`–`xl` to `xs`–`3xl`. To preserve the same values:
16
+ - `--wpds-dimension-gap-2xs`: use `--wpds-dimension-gap-xs` instead.
17
+ - `--wpds-dimension-gap-xs`: use `--wpds-dimension-gap-sm` instead.
18
+ - `--wpds-dimension-gap-sm`: use `--wpds-dimension-gap-md` instead.
19
+ - `--wpds-dimension-gap-md`: use `--wpds-dimension-gap-lg` instead.
20
+ - `--wpds-dimension-gap-lg`: use `--wpds-dimension-gap-xl` instead.
21
+ - `--wpds-dimension-gap-xl`: use `--wpds-dimension-gap-2xl` instead.
22
+ - `--wpds-dimension-gap-2xl`: use `--wpds-dimension-gap-3xl` instead.
23
+
24
+ ## 0.6.0 (2026-01-29)
8
25
 
9
26
  ### Breaking changes
10
27
 
11
28
  - Renamed border tokens to remove the `surface` segment from token names ([#74617](https://github.com/WordPress/gutenberg/pull/74617)):
12
- - `--wpds-border-radius-surface-xs`: use `--wpds-border-radius-xs` instead.
13
- - `--wpds-border-radius-surface-sm`: use `--wpds-border-radius-sm` instead.
14
- - `--wpds-border-radius-surface-md`: use `--wpds-border-radius-md` instead.
15
- - `--wpds-border-radius-surface-lg`: use `--wpds-border-radius-lg` instead.
16
- - `--wpds-border-width-surface-xs`: use `--wpds-border-width-xs` instead.
17
- - `--wpds-border-width-surface-sm`: use `--wpds-border-width-sm` instead.
18
- - `--wpds-border-width-surface-md`: use `--wpds-border-width-md` instead.
19
- - `--wpds-border-width-surface-lg`: use `--wpds-border-width-lg` instead.
20
- - `--wpds-border-width-interactive-focus`: use `--wpds-border-width-focus` instead.
29
+ - `--wpds-border-radius-surface-xs`: use `--wpds-border-radius-xs` instead.
30
+ - `--wpds-border-radius-surface-sm`: use `--wpds-border-radius-sm` instead.
31
+ - `--wpds-border-radius-surface-md`: use `--wpds-border-radius-md` instead.
32
+ - `--wpds-border-radius-surface-lg`: use `--wpds-border-radius-lg` instead.
33
+ - `--wpds-border-width-surface-xs`: use `--wpds-border-width-xs` instead.
34
+ - `--wpds-border-width-surface-sm`: use `--wpds-border-width-sm` instead.
35
+ - `--wpds-border-width-surface-md`: use `--wpds-border-width-md` instead.
36
+ - `--wpds-border-width-surface-lg`: use `--wpds-border-width-lg` instead.
37
+ - `--wpds-border-width-interactive-focus`: use `--wpds-border-width-focus` instead.
38
+
39
+ ## 0.5.0 (2026-01-16)
40
+
41
+ ### Breaking changes
21
42
 
22
43
  - Removed the following tokens ([#74470](https://github.com/WordPress/gutenberg/pull/74470)):
23
- - `--wpds-color-bg-interactive-neutral`: use `--wpds-color-bg-interactive-neutral-weak` instead.
24
- - `--wpds-color-bg-interactive-neutral-active`: use `--wpds-color-bg-interactive-neutral-weak-active` instead.
25
- - `--wpds-color-bg-interactive-neutral-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
26
- - `--wpds-color-bg-interactive-brand`: use `--wpds-color-bg-interactive-brand-weak` instead.
27
- - `--wpds-color-bg-interactive-brand-active`: use `--wpds-color-bg-interactive-brand-weak-active` instead.
28
- - `--wpds-color-bg-interactive-brand-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
29
- - `--wpds-color-bg-interactive-brand-strong-disabled`: use `--wpds-color-bg-interactive-neutral-strong-disabled` instead.
30
- - `--wpds-color-bg-interactive-brand-weak-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
31
- - `--wpds-color-bg-interactive-error-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
32
- - `--wpds-color-bg-interactive-error-strong-disabled`: use `--wpds-color-bg-interactive-neutral-strong-disabled` instead.
33
- - `--wpds-color-bg-interactive-error-weak-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
34
- - `--wpds-color-fg-interactive-brand-disabled`: use `--wpds-color-fg-interactive-neutral-disabled` instead.
35
- - `--wpds-color-fg-interactive-brand-strong-disabled`: use `--wpds-color-fg-interactive-neutral-strong-disabled` instead.
36
- - `--wpds-color-fg-interactive-error-disabled`: use `--wpds-color-fg-interactive-neutral-disabled` instead.
37
- - `--wpds-color-fg-interactive-error-strong-disabled`: use `--wpds-color-fg-interactive-neutral-strong-disabled` instead.
38
- - `--wpds-color-bg-thumb-brand-disabled`: use the newly added `--wpds-color-bg-thumb-neutral-disabled` instead.
44
+ - `--wpds-color-bg-interactive-neutral`: use `--wpds-color-bg-interactive-neutral-weak` instead.
45
+ - `--wpds-color-bg-interactive-neutral-active`: use `--wpds-color-bg-interactive-neutral-weak-active` instead.
46
+ - `--wpds-color-bg-interactive-neutral-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
47
+ - `--wpds-color-bg-interactive-brand`: use `--wpds-color-bg-interactive-brand-weak` instead.
48
+ - `--wpds-color-bg-interactive-brand-active`: use `--wpds-color-bg-interactive-brand-weak-active` instead.
49
+ - `--wpds-color-bg-interactive-brand-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
50
+ - `--wpds-color-bg-interactive-brand-strong-disabled`: use `--wpds-color-bg-interactive-neutral-strong-disabled` instead.
51
+ - `--wpds-color-bg-interactive-brand-weak-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
52
+ - `--wpds-color-bg-interactive-error-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
53
+ - `--wpds-color-bg-interactive-error-strong-disabled`: use `--wpds-color-bg-interactive-neutral-strong-disabled` instead.
54
+ - `--wpds-color-bg-interactive-error-weak-disabled`: use `--wpds-color-bg-interactive-neutral-weak-disabled` instead.
55
+ - `--wpds-color-fg-interactive-brand-disabled`: use `--wpds-color-fg-interactive-neutral-disabled` instead.
56
+ - `--wpds-color-fg-interactive-brand-strong-disabled`: use `--wpds-color-fg-interactive-neutral-strong-disabled` instead.
57
+ - `--wpds-color-fg-interactive-error-disabled`: use `--wpds-color-fg-interactive-neutral-disabled` instead.
58
+ - `--wpds-color-fg-interactive-error-strong-disabled`: use `--wpds-color-fg-interactive-neutral-strong-disabled` instead.
59
+ - `--wpds-color-bg-thumb-brand-disabled`: use the newly added `--wpds-color-bg-thumb-neutral-disabled` instead.
39
60
 
40
61
  ### Enhancements
41
62
 
42
63
  - Tweaked the values of the following tokens ([#74470](https://github.com/WordPress/gutenberg/pull/74470)):
43
64
  - `--wpds-color-bg-interactive-neutral-strong-disabled` from `#d2d2d2` to `#e2e2e2`.
44
65
  - `--wpds-color-bg-interactive-neutral-weak-disabled` from `#e2e2e2` to `#00000000`.
45
- - `--wpds-color-fg-interactive-neutral-strong-disabled` from `#6d6d6d` to `#8a8a8a`.
66
+ - `--wpds-color-fg-interactive-neutral-strong-disabled` from `#6d6d6d` to `#8a8a8a`.
46
67
 
47
68
  ### New Features
48
69
 
package/README.md CHANGED
@@ -26,7 +26,7 @@ This separation allows the design system to maintain consistency while providing
26
26
 
27
27
  Design tokens are the visual design atoms of a design system. They are named entities that store visual design attributes like colors, spacing, typography, and shadows. They serve as a single source of truth that bridges design and development, ensuring consistency across platforms and making it easy to maintain and evolve the visual language of an application.
28
28
 
29
- Rather than hardcoding values like `#3858e9` or `16px` throughout your code, tokens provide semantic names like `--wpds-color-bg-interactive-brand-strong` or `--wpds-dimension-padding-surface-md` that describe the purpose and context of the value. This makes code more maintainable and allows the design system to evolve. When a token's value changes, all components using that token automatically reflect the update.
29
+ Rather than hardcoding values like `#3858e9` or `16px` throughout your code, tokens provide semantic names like `--wpds-color-bg-interactive-brand-strong` or `--wpds-dimension-padding-2xl` that describe the purpose and context of the value. This makes code more maintainable and allows the design system to evolve. When a token's value changes, all components using that token automatically reflect the update.
30
30
 
31
31
  #### Structure
32
32
 
@@ -89,7 +89,7 @@ Semantic tokens follow a consistent naming pattern:
89
89
 
90
90
  | Value | Description |
91
91
  | ----------------------------------- | -------------------- |
92
- | `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | Size scale modifiers |
92
+ | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | Size scale modifiers |
93
93
 
94
94
  #### Color Token Modifiers
95
95
 
package/build/prebuilt/js/design-tokens.cjs CHANGED
@@ -121,17 +121,20 @@ var design_tokens_default = [
121
121
  "--wpds-color-stroke-interactive-error-strong",
122
122
  "--wpds-color-stroke-focus-brand",
123
123
  "--wpds-dimension-base",
124
- "--wpds-dimension-padding-surface-2xs",
125
- "--wpds-dimension-padding-surface-xs",
126
- "--wpds-dimension-padding-surface-sm",
127
- "--wpds-dimension-padding-surface-md",
128
- "--wpds-dimension-padding-surface-lg",
129
- "--wpds-dimension-gap-2xs",
124
+ "--wpds-dimension-padding-xs",
125
+ "--wpds-dimension-padding-sm",
126
+ "--wpds-dimension-padding-md",
127
+ "--wpds-dimension-padding-lg",
128
+ "--wpds-dimension-padding-xl",
129
+ "--wpds-dimension-padding-2xl",
130
+ "--wpds-dimension-padding-3xl",
130
131
  "--wpds-dimension-gap-xs",
131
132
  "--wpds-dimension-gap-sm",
132
133
  "--wpds-dimension-gap-md",
133
134
  "--wpds-dimension-gap-lg",
134
135
  "--wpds-dimension-gap-xl",
136
+ "--wpds-dimension-gap-2xl",
137
+ "--wpds-dimension-gap-3xl",
135
138
  "--wpds-elevation-x-small",
136
139
  "--wpds-elevation-small",
137
140
  "--wpds-elevation-medium",
package/build/prebuilt/js/design-tokens.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/prebuilt/js/design-tokens.mjs"],
4
- "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-xs',\n\t'--wpds-border-radius-sm',\n\t'--wpds-border-radius-md',\n\t'--wpds-border-radius-lg',\n\t'--wpds-border-width-xs',\n\t'--wpds-border-width-sm',\n\t'--wpds-border-width-md',\n\t'--wpds-border-width-lg',\n\t'--wpds-border-width-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-neutral-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-surface-2xs',\n\t'--wpds-dimension-padding-surface-xs',\n\t'--wpds-dimension-padding-surface-sm',\n\t'--wpds-dimension-padding-surface-md',\n\t'--wpds-dimension-padding-surface-lg',\n\t'--wpds-dimension-gap-2xs',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-xs',\n\t'--wpds-font-size-sm',\n\t'--wpds-font-size-md',\n\t'--wpds-font-size-lg',\n\t'--wpds-font-size-xl',\n\t'--wpds-font-size-2xl',\n\t'--wpds-font-line-height-xs',\n\t'--wpds-font-line-height-sm',\n\t'--wpds-font-line-height-md',\n\t'--wpds-font-line-height-lg',\n\t'--wpds-font-line-height-xl',\n\t'--wpds-font-line-height-2xl',\n\t'--wpds-font-weight-regular',\n\t'--wpds-font-weight-medium',\n];\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
4
+ "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-xs',\n\t'--wpds-border-radius-sm',\n\t'--wpds-border-radius-md',\n\t'--wpds-border-radius-lg',\n\t'--wpds-border-width-xs',\n\t'--wpds-border-width-sm',\n\t'--wpds-border-width-md',\n\t'--wpds-border-width-lg',\n\t'--wpds-border-width-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-neutral-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-xs',\n\t'--wpds-dimension-padding-sm',\n\t'--wpds-dimension-padding-md',\n\t'--wpds-dimension-padding-lg',\n\t'--wpds-dimension-padding-xl',\n\t'--wpds-dimension-padding-2xl',\n\t'--wpds-dimension-padding-3xl',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-dimension-gap-2xl',\n\t'--wpds-dimension-gap-3xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-xs',\n\t'--wpds-font-size-sm',\n\t'--wpds-font-size-md',\n\t'--wpds-font-size-lg',\n\t'--wpds-font-size-xl',\n\t'--wpds-font-size-2xl',\n\t'--wpds-font-line-height-xs',\n\t'--wpds-font-line-height-sm',\n\t'--wpds-font-line-height-md',\n\t'--wpds-font-line-height-lg',\n\t'--wpds-font-line-height-xl',\n\t'--wpds-font-line-height-2xl',\n\t'--wpds-font-weight-regular',\n\t'--wpds-font-weight-medium',\n];\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
6
6
  "names": []
7
7
  }
package/build/prebuilt/ts/token-types.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/prebuilt/ts/token-types.ts"],
4
- "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-typescript-types plugin.\n * Do not edit this file directly.\n */\n\n/**\n * Size scale for padding tokens.\n */\nexport type PaddingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Size scale for gap tokens.\n */\nexport type GapSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Size scale for border radius tokens.\n */\nexport type BorderRadiusSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Size scale for border width tokens.\n */\nexport type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'focus';\n\n/**\n * Target elements that tokens can be applied to.\n */\nexport type Target =\n\t| 'surface'\n\t| 'interactive'\n\t| 'track'\n\t| 'thumb'\n\t| 'content'\n\t| 'focus';\n\n/**\n * Background color variants for surface elements.\n */\nexport type SurfaceBackgroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Background color variants for interactive elements.\n */\nexport type InteractiveBackgroundColor =\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand-strong'\n\t| 'brand-weak'\n\t| 'error'\n\t| 'error-strong'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for content text and icons.\n */\nexport type ContentForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for interactive element text and icons.\n */\nexport type InteractiveForegroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for surface borders.\n */\nexport type SurfaceStrokeColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'success'\n\t| 'success-strong'\n\t| 'info'\n\t| 'info-strong'\n\t| 'warning'\n\t| 'warning-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for interactive element borders.\n */\nexport type InteractiveStrokeColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Foreground color variants for text elements.\n */\nexport type ForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak'\n\t| 'neutral-active'\n\t| 'neutral-disabled'\n\t| 'neutral-strong'\n\t| 'neutral-strong-active'\n\t| 'neutral-strong-disabled'\n\t| 'neutral-weak-disabled'\n\t| 'brand'\n\t| 'brand-active'\n\t| 'brand-strong'\n\t| 'brand-strong-active'\n\t| 'error-active'\n\t| 'error-strong'\n\t| 'error-strong-active';\n\n/**\n * Font family variants.\n */\nexport type FontFamily = 'heading' | 'body' | 'mono';\n\n/**\n * Font size scale.\n */\nexport type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/**\n * Font weight variants.\n */\nexport type FontWeight = 'regular' | 'medium';\n\n/**\n * Line height scale.\n */\nexport type LineHeight = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n"],
4
+ "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-typescript-types plugin.\n * Do not edit this file directly.\n */\n\n/**\n * Size scale for padding tokens.\n */\nexport type PaddingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\n/**\n * Size scale for gap tokens.\n */\nexport type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\n/**\n * Size scale for border radius tokens.\n */\nexport type BorderRadiusSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Size scale for border width tokens.\n */\nexport type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'focus';\n\n/**\n * Target elements that tokens can be applied to.\n */\nexport type Target =\n\t| 'surface'\n\t| 'interactive'\n\t| 'track'\n\t| 'thumb'\n\t| 'content'\n\t| 'focus';\n\n/**\n * Background color variants for surface elements.\n */\nexport type SurfaceBackgroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Background color variants for interactive elements.\n */\nexport type InteractiveBackgroundColor =\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand-strong'\n\t| 'brand-weak'\n\t| 'error'\n\t| 'error-strong'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for content text and icons.\n */\nexport type ContentForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for interactive element text and icons.\n */\nexport type InteractiveForegroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for surface borders.\n */\nexport type SurfaceStrokeColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'success'\n\t| 'success-strong'\n\t| 'info'\n\t| 'info-strong'\n\t| 'warning'\n\t| 'warning-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for interactive element borders.\n */\nexport type InteractiveStrokeColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Foreground color variants for text elements.\n */\nexport type ForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak'\n\t| 'neutral-active'\n\t| 'neutral-disabled'\n\t| 'neutral-strong'\n\t| 'neutral-strong-active'\n\t| 'neutral-strong-disabled'\n\t| 'neutral-weak-disabled'\n\t| 'brand'\n\t| 'brand-active'\n\t| 'brand-strong'\n\t| 'brand-strong-active'\n\t| 'error-active'\n\t| 'error-strong'\n\t| 'error-strong-active';\n\n/**\n * Font family variants.\n */\nexport type FontFamily = 'heading' | 'body' | 'mono';\n\n/**\n * Font size scale.\n */\nexport type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/**\n * Font weight variants.\n */\nexport type FontWeight = 'regular' | 'medium';\n\n/**\n * Line height scale.\n */\nexport type LineHeight = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/build-module/prebuilt/js/design-tokens.mjs CHANGED
@@ -98,17 +98,20 @@ var design_tokens_default = [
98
98
  "--wpds-color-stroke-interactive-error-strong",
99
99
  "--wpds-color-stroke-focus-brand",
100
100
  "--wpds-dimension-base",
101
- "--wpds-dimension-padding-surface-2xs",
102
- "--wpds-dimension-padding-surface-xs",
103
- "--wpds-dimension-padding-surface-sm",
104
- "--wpds-dimension-padding-surface-md",
105
- "--wpds-dimension-padding-surface-lg",
106
- "--wpds-dimension-gap-2xs",
101
+ "--wpds-dimension-padding-xs",
102
+ "--wpds-dimension-padding-sm",
103
+ "--wpds-dimension-padding-md",
104
+ "--wpds-dimension-padding-lg",
105
+ "--wpds-dimension-padding-xl",
106
+ "--wpds-dimension-padding-2xl",
107
+ "--wpds-dimension-padding-3xl",
107
108
  "--wpds-dimension-gap-xs",
108
109
  "--wpds-dimension-gap-sm",
109
110
  "--wpds-dimension-gap-md",
110
111
  "--wpds-dimension-gap-lg",
111
112
  "--wpds-dimension-gap-xl",
113
+ "--wpds-dimension-gap-2xl",
114
+ "--wpds-dimension-gap-3xl",
112
115
  "--wpds-elevation-x-small",
113
116
  "--wpds-elevation-small",
114
117
  "--wpds-elevation-medium",
package/build-module/prebuilt/js/design-tokens.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/prebuilt/js/design-tokens.mjs"],
4
- "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-xs',\n\t'--wpds-border-radius-sm',\n\t'--wpds-border-radius-md',\n\t'--wpds-border-radius-lg',\n\t'--wpds-border-width-xs',\n\t'--wpds-border-width-sm',\n\t'--wpds-border-width-md',\n\t'--wpds-border-width-lg',\n\t'--wpds-border-width-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-neutral-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-surface-2xs',\n\t'--wpds-dimension-padding-surface-xs',\n\t'--wpds-dimension-padding-surface-sm',\n\t'--wpds-dimension-padding-surface-md',\n\t'--wpds-dimension-padding-surface-lg',\n\t'--wpds-dimension-gap-2xs',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-xs',\n\t'--wpds-font-size-sm',\n\t'--wpds-font-size-md',\n\t'--wpds-font-size-lg',\n\t'--wpds-font-size-xl',\n\t'--wpds-font-size-2xl',\n\t'--wpds-font-line-height-xs',\n\t'--wpds-font-line-height-sm',\n\t'--wpds-font-line-height-md',\n\t'--wpds-font-line-height-lg',\n\t'--wpds-font-line-height-xl',\n\t'--wpds-font-line-height-2xl',\n\t'--wpds-font-weight-regular',\n\t'--wpds-font-weight-medium',\n];\n"],
5
- "mappings": ";AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
4
+ "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-xs',\n\t'--wpds-border-radius-sm',\n\t'--wpds-border-radius-md',\n\t'--wpds-border-radius-lg',\n\t'--wpds-border-width-xs',\n\t'--wpds-border-width-sm',\n\t'--wpds-border-width-md',\n\t'--wpds-border-width-lg',\n\t'--wpds-border-width-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-neutral-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-xs',\n\t'--wpds-dimension-padding-sm',\n\t'--wpds-dimension-padding-md',\n\t'--wpds-dimension-padding-lg',\n\t'--wpds-dimension-padding-xl',\n\t'--wpds-dimension-padding-2xl',\n\t'--wpds-dimension-padding-3xl',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-dimension-gap-2xl',\n\t'--wpds-dimension-gap-3xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-xs',\n\t'--wpds-font-size-sm',\n\t'--wpds-font-size-md',\n\t'--wpds-font-size-lg',\n\t'--wpds-font-size-xl',\n\t'--wpds-font-size-2xl',\n\t'--wpds-font-line-height-xs',\n\t'--wpds-font-line-height-sm',\n\t'--wpds-font-line-height-md',\n\t'--wpds-font-line-height-lg',\n\t'--wpds-font-line-height-xl',\n\t'--wpds-font-line-height-2xl',\n\t'--wpds-font-weight-regular',\n\t'--wpds-font-weight-medium',\n];\n"],
5
+ "mappings": ";AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
6
6
  "names": []
7
7
  }
package/build-types/prebuilt/ts/token-types.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  /**
2
2
  * Size scale for padding tokens.
3
3
  */
4
- export type PaddingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
4
+ export type PaddingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
5
5
  /**
6
6
  * Size scale for gap tokens.
7
7
  */
8
- export type GapSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
8
+ export type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
9
9
  /**
10
10
  * Size scale for border radius tokens.
11
11
  */
package/build-types/prebuilt/ts/token-types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"token-types.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/token-types.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,MAAM,GACf,SAAS,GACT,aAAa,GACb,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,OAAO,GACP,cAAc,GACd,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,cAAc,GACd,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAC3B,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,OAAO,GACP,cAAc,GACd,SAAS,GACT,gBAAgB,GAChB,MAAM,GACN,aAAa,GACb,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,eAAe,GACxB,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,GACZ,gBAAgB,GAChB,kBAAkB,GAClB,gBAAgB,GAChB,uBAAuB,GACvB,yBAAyB,GACzB,uBAAuB,GACvB,OAAO,GACP,cAAc,GACd,cAAc,GACd,qBAAqB,GACrB,cAAc,GACd,cAAc,GACd,qBAAqB,CAAC;AAEzB;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC"}
1
+ {"version":3,"file":"token-types.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/token-types.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AAEvE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,MAAM,GACf,SAAS,GACT,aAAa,GACb,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,OAAO,GACP,cAAc,GACd,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,cAAc,GACd,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAC3B,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,OAAO,GACP,cAAc,GACd,SAAS,GACT,gBAAgB,GAChB,MAAM,GACN,aAAa,GACb,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,eAAe,GACxB,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,GACZ,gBAAgB,GAChB,kBAAkB,GAClB,gBAAgB,GAChB,uBAAuB,GACvB,yBAAyB,GACzB,uBAAuB,GACvB,OAAO,GACP,cAAc,GACd,cAAc,GACd,qBAAqB,GACrB,cAAc,GACd,cAAc,GACd,qBAAqB,CAAC;AAEzB;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC"}
package/build-types/stories/index.story.d.ts CHANGED
@@ -6,7 +6,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
6
6
  * Internal dependencies
7
7
  */
8
8
  import { ThemeProvider } from '../theme-provider';
9
- import '../prebuilt/css/design-tokens.css';
10
9
  declare const meta: Meta<typeof ThemeProvider>;
11
10
  export default meta;
12
11
  export declare const Default: StoryObj<typeof ThemeProvider>;
package/build-types/stories/index.story.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,mCAAmC,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,aAAa,CAgBrC,CAAC;AACF,eAAe,IAAI,CAAC;AA2GpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,aAAa,CAInD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAE,OAAO,aAAa,CA+CtD,CAAC;AA6CF,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,aAAa,CA8DhE,CAAC;AA0EF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,aAAa,CA6CzD,CAAC"}
1
+ {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,aAAa,CAgBrC,CAAC;AACF,eAAe,IAAI,CAAC;AA2GpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,aAAa,CAInD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAE,OAAO,aAAa,CA+CtD,CAAC;AA6CF,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,aAAa,CA8DhE,CAAC;AA0EF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,aAAa,CA6CzD,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/theme",
3
- "version": "0.6.0",
3
+ "version": "0.7.1-next.v.0+642962a6d",
4
4
  "description": "Theme and context provider for the WordPress Design System.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -64,8 +64,8 @@
64
64
  "build-module/color-ramps/lib/register-color-spaces.mjs"
65
65
  ],
66
66
  "dependencies": {
67
- "@wordpress/element": "^6.39.0",
68
- "@wordpress/private-apis": "^1.39.0",
67
+ "@wordpress/element": "^6.39.1-next.v.0+642962a6d",
68
+ "@wordpress/private-apis": "^1.39.1-next.v.0+642962a6d",
69
69
  "colorjs.io": "^0.6.0",
70
70
  "memize": "^2.1.0"
71
71
  },
@@ -101,5 +101,5 @@
101
101
  "build": "npm run build:tokens && npm run build:default-ramps && npm run prelint:js",
102
102
  "postbuild": "prettier --write tokens/color.json tokens/modes src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
103
103
  },
104
- "gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
104
+ "gitHead": "2de56f23b200b6dc4b1feda4408613ad088d160a"
105
105
  }
package/src/prebuilt/css/design-tokens.css CHANGED
@@ -101,17 +101,20 @@
101
101
  --wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
102
102
  --wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
103
103
  --wpds-dimension-base: 4px; /* Base dimension unit */
104
- --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
105
- --wpds-dimension-gap-lg: 24px; /* Large gap */
106
- --wpds-dimension-gap-md: 16px; /* Medium gap */
107
- --wpds-dimension-gap-sm: 12px; /* Small gap */
108
- --wpds-dimension-gap-xl: 40px; /* Extra large gap */
109
- --wpds-dimension-gap-xs: 8px; /* Extra small gap */
110
- --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
111
- --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
112
- --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
113
- --wpds-dimension-padding-surface-sm: 16px; /* Small spacing for surfaces */
114
- --wpds-dimension-padding-surface-xs: 8px; /* Extra small spacing for surfaces */
104
+ --wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
105
+ --wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
106
+ --wpds-dimension-gap-lg: 16px; /* Large gap */
107
+ --wpds-dimension-gap-md: 12px; /* Medium gap */
108
+ --wpds-dimension-gap-sm: 8px; /* Small gap */
109
+ --wpds-dimension-gap-xl: 24px; /* Extra large gap */
110
+ --wpds-dimension-gap-xs: 4px; /* Extra small gap */
111
+ --wpds-dimension-padding-2xl: 24px; /* 2x extra large padding */
112
+ --wpds-dimension-padding-3xl: 32px; /* 3x extra large padding */
113
+ --wpds-dimension-padding-lg: 16px; /* Large padding */
114
+ --wpds-dimension-padding-md: 12px; /* Medium padding */
115
+ --wpds-dimension-padding-sm: 8px; /* Small padding */
116
+ --wpds-dimension-padding-xl: 20px; /* Extra large padding */
117
+ --wpds-dimension-padding-xs: 4px; /* Extra small padding */
115
118
  --wpds-elevation-large: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
116
119
  0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
117
120
  --wpds-elevation-medium: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a,
@@ -143,45 +146,54 @@
143
146
 
144
147
  [data-wpds-theme-provider-id][data-wpds-density='default'] {
145
148
  --wpds-dimension-base: 4px; /* Base dimension unit */
146
- --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
147
- --wpds-dimension-gap-lg: 24px; /* Large gap */
148
- --wpds-dimension-gap-md: 16px; /* Medium gap */
149
- --wpds-dimension-gap-sm: 12px; /* Small gap */
150
- --wpds-dimension-gap-xl: 40px; /* Extra large gap */
151
- --wpds-dimension-gap-xs: 8px; /* Extra small gap */
152
- --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
153
- --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
154
- --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
155
- --wpds-dimension-padding-surface-sm: 16px; /* Small spacing for surfaces */
156
- --wpds-dimension-padding-surface-xs: 8px; /* Extra small spacing for surfaces */
149
+ --wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
150
+ --wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
151
+ --wpds-dimension-gap-lg: 16px; /* Large gap */
152
+ --wpds-dimension-gap-md: 12px; /* Medium gap */
153
+ --wpds-dimension-gap-sm: 8px; /* Small gap */
154
+ --wpds-dimension-gap-xl: 24px; /* Extra large gap */
155
+ --wpds-dimension-gap-xs: 4px; /* Extra small gap */
156
+ --wpds-dimension-padding-2xl: 24px; /* 2x extra large padding */
157
+ --wpds-dimension-padding-3xl: 32px; /* 3x extra large padding */
158
+ --wpds-dimension-padding-lg: 16px; /* Large padding */
159
+ --wpds-dimension-padding-md: 12px; /* Medium padding */
160
+ --wpds-dimension-padding-sm: 8px; /* Small padding */
161
+ --wpds-dimension-padding-xl: 20px; /* Extra large padding */
162
+ --wpds-dimension-padding-xs: 4px; /* Extra small padding */
157
163
  }
158
164
 
159
165
  [data-wpds-theme-provider-id][data-wpds-density='compact'] {
160
- --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
161
- --wpds-dimension-gap-lg: 20px; /* Large gap */
162
- --wpds-dimension-gap-md: 12px; /* Medium gap */
163
- --wpds-dimension-gap-sm: 8px; /* Small gap */
164
- --wpds-dimension-gap-xl: 32px; /* Extra large gap */
166
+ --wpds-dimension-gap-2xl: 24px; /* 2x extra large gap */
167
+ --wpds-dimension-gap-3xl: 32px; /* 3x extra large gap */
168
+ --wpds-dimension-gap-lg: 12px; /* Large gap */
169
+ --wpds-dimension-gap-md: 8px; /* Medium gap */
170
+ --wpds-dimension-gap-sm: 4px; /* Small gap */
171
+ --wpds-dimension-gap-xl: 20px; /* Extra large gap */
165
172
  --wpds-dimension-gap-xs: 4px; /* Extra small gap */
166
- --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
167
- --wpds-dimension-padding-surface-lg: 24px; /* Large spacing for surfaces */
168
- --wpds-dimension-padding-surface-md: 20px; /* Medium spacing for surfaces */
169
- --wpds-dimension-padding-surface-sm: 12px; /* Small spacing for surfaces */
170
- --wpds-dimension-padding-surface-xs: 4px; /* Extra small spacing for surfaces */
173
+ --wpds-dimension-padding-2xl: 20px; /* 2x extra large padding */
174
+ --wpds-dimension-padding-3xl: 24px; /* 3x extra large padding */
175
+ --wpds-dimension-padding-lg: 12px; /* Large padding */
176
+ --wpds-dimension-padding-md: 8px; /* Medium padding */
177
+ --wpds-dimension-padding-sm: 4px; /* Small padding */
178
+ --wpds-dimension-padding-xl: 16px; /* Extra large padding */
179
+ --wpds-dimension-padding-xs: 4px; /* Extra small padding */
171
180
  }
172
181
 
173
182
  [data-wpds-theme-provider-id][data-wpds-density='comfortable'] {
174
- --wpds-dimension-gap-2xs: 8px; /* 2x extra small gap */
175
- --wpds-dimension-gap-lg: 32px; /* Large gap */
176
- --wpds-dimension-gap-md: 20px; /* Medium gap */
177
- --wpds-dimension-gap-sm: 16px; /* Small gap */
178
- --wpds-dimension-gap-xl: 48px; /* Extra large gap */
179
- --wpds-dimension-gap-xs: 12px; /* Extra small gap */
180
- --wpds-dimension-padding-surface-2xs: 8px; /* 2x extra small spacing for surfaces */
181
- --wpds-dimension-padding-surface-lg: 40px; /* Large spacing for surfaces */
182
- --wpds-dimension-padding-surface-md: 32px; /* Medium spacing for surfaces */
183
- --wpds-dimension-padding-surface-sm: 20px; /* Small spacing for surfaces */
184
- --wpds-dimension-padding-surface-xs: 12px; /* Extra small spacing for surfaces */
183
+ --wpds-dimension-gap-2xl: 40px; /* 2x extra large gap */
184
+ --wpds-dimension-gap-3xl: 48px; /* 3x extra large gap */
185
+ --wpds-dimension-gap-lg: 20px; /* Large gap */
186
+ --wpds-dimension-gap-md: 16px; /* Medium gap */
187
+ --wpds-dimension-gap-sm: 12px; /* Small gap */
188
+ --wpds-dimension-gap-xl: 32px; /* Extra large gap */
189
+ --wpds-dimension-gap-xs: 8px; /* Extra small gap */
190
+ --wpds-dimension-padding-2xl: 32px; /* 2x extra large padding */
191
+ --wpds-dimension-padding-3xl: 40px; /* 3x extra large padding */
192
+ --wpds-dimension-padding-lg: 20px; /* Large padding */
193
+ --wpds-dimension-padding-md: 16px; /* Medium padding */
194
+ --wpds-dimension-padding-sm: 12px; /* Small padding */
195
+ --wpds-dimension-padding-xl: 24px; /* Extra large padding */
196
+ --wpds-dimension-padding-xs: 8px; /* Extra small padding */
185
197
  }
186
198
 
187
199
  @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {
package/src/prebuilt/js/design-tokens.mjs CHANGED
@@ -102,17 +102,20 @@ export default [
102
102
  '--wpds-color-stroke-interactive-error-strong',
103
103
  '--wpds-color-stroke-focus-brand',
104
104
  '--wpds-dimension-base',
105
- '--wpds-dimension-padding-surface-2xs',
106
- '--wpds-dimension-padding-surface-xs',
107
- '--wpds-dimension-padding-surface-sm',
108
- '--wpds-dimension-padding-surface-md',
109
- '--wpds-dimension-padding-surface-lg',
110
- '--wpds-dimension-gap-2xs',
105
+ '--wpds-dimension-padding-xs',
106
+ '--wpds-dimension-padding-sm',
107
+ '--wpds-dimension-padding-md',
108
+ '--wpds-dimension-padding-lg',
109
+ '--wpds-dimension-padding-xl',
110
+ '--wpds-dimension-padding-2xl',
111
+ '--wpds-dimension-padding-3xl',
111
112
  '--wpds-dimension-gap-xs',
112
113
  '--wpds-dimension-gap-sm',
113
114
  '--wpds-dimension-gap-md',
114
115
  '--wpds-dimension-gap-lg',
115
116
  '--wpds-dimension-gap-xl',
117
+ '--wpds-dimension-gap-2xl',
118
+ '--wpds-dimension-gap-3xl',
116
119
  '--wpds-elevation-x-small',
117
120
  '--wpds-elevation-small',
118
121
  '--wpds-elevation-medium',
package/src/prebuilt/ts/token-types.ts CHANGED
@@ -6,12 +6,12 @@
6
6
  /**
7
7
  * Size scale for padding tokens.
8
8
  */
9
- export type PaddingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
9
+ export type PaddingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
10
10
 
11
11
  /**
12
12
  * Size scale for gap tokens.
13
13
  */
14
- export type GapSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
14
+ export type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
15
15
 
16
16
  /**
17
17
  * Size scale for border radius tokens.
package/src/stories/index.story.tsx CHANGED
@@ -18,7 +18,6 @@ import {
18
18
  * Internal dependencies
19
19
  */
20
20
  import { ThemeProvider } from '../theme-provider';
21
- import '../prebuilt/css/design-tokens.css';
22
21
 
23
22
  const meta: Meta< typeof ThemeProvider > = {
24
23
  title: 'Design System/Theme/Theme Provider',
@@ -202,7 +201,7 @@ export const WithPicker: StoryObj< typeof ThemeProvider > = {
202
201
  const NestingDebug = ( { bg = '', primary = '', density = '' } ) => (
203
202
  <div
204
203
  style={ {
205
- padding: 'var(--wpds-dimension-padding-surface-sm)',
204
+ padding: 'var(--wpds-dimension-padding-lg)',
206
205
  color: 'var(--wpds-color-fg-content-neutral)',
207
206
  backgroundColor: 'var(--wpds-color-bg-surface-neutral)',
208
207
  display: 'flex',
@@ -217,7 +216,7 @@ const NestingDebug = ( { bg = '', primary = '', density = '' } ) => (
217
216
  <span
218
217
  style={ {
219
218
  display: 'inline-block',
220
- padding: 'var(--wpds-dimension-padding-surface-xs)',
219
+ padding: 'var(--wpds-dimension-padding-sm)',
221
220
  borderRadius: '0.25rem',
222
221
  backgroundColor:
223
222
  'var(--wpds-color-bg-interactive-brand-strong)',
@@ -230,7 +229,7 @@ const NestingDebug = ( { bg = '', primary = '', density = '' } ) => (
230
229
  style={ {
231
230
  display: 'inline-block',
232
231
  marginInlineStart: '0.25rem',
233
- padding: 'var(--wpds-dimension-padding-surface-xs)',
232
+ padding: 'var(--wpds-dimension-padding-sm)',
234
233
  borderRadius: '0.25rem',
235
234
  backgroundColor:
236
235
  'var(--wpds-color-bg-interactive-neutral-weak-disabled)',
@@ -411,7 +410,7 @@ export const AcrossIframes: StoryObj< typeof ThemeProvider > = {
411
410
  <span
412
411
  style={ {
413
412
  display: 'inline-block',
414
- padding: 'var(--wpds-dimension-padding-surface-xs)',
413
+ padding: 'var(--wpds-dimension-padding-sm)',
415
414
  borderRadius: '0.25rem',
416
415
  backgroundColor:
417
416
  'var(--wpds-color-bg-interactive-brand-strong)',
package/src/stylelint-plugins/test/fixtures/no-unknown-ds-tokens-valid.css CHANGED
@@ -3,7 +3,7 @@
3
3
  background-color: var(--wpds-color-bg-surface-neutral);
4
4
  color: var(--wpds-color-fg-content-neutral);
5
5
  border-radius: var(--wpds-border-radius-sm);
6
- padding: var(--wpds-dimension-padding-surface-md);
6
+ padding: var(--wpds-dimension-padding-2xl);
7
7
  }
8
8
 
9
9
  /* Valid: Using tokens with fallbacks */