@wordpress/theme 0.2.1-next.dc3f6d3c1.0 → 0.3.1-next.8b30e05b0.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 (30) hide show
  1. package/bin/terrazzo-plugin-inline-alias-values/index.ts +43 -14
  2. package/build/prebuilt/js/design-tokens.js +5 -4
  3. package/build/prebuilt/js/design-tokens.js.map +2 -2
  4. package/build/prebuilt/json/figma.json +24 -8
  5. package/build/theme-provider.js +3 -1
  6. package/build/theme-provider.js.map +2 -2
  7. package/build/types.js.map +1 -1
  8. package/build-module/prebuilt/js/design-tokens.js +5 -4
  9. package/build-module/prebuilt/js/design-tokens.js.map +2 -2
  10. package/build-module/prebuilt/json/figma.json +24 -8
  11. package/build-module/theme-provider.js +3 -1
  12. package/build-module/theme-provider.js.map +2 -2
  13. package/build-types/stories/index.story.d.ts +1 -0
  14. package/build-types/stories/index.story.d.ts.map +1 -1
  15. package/build-types/theme-provider.d.ts +1 -1
  16. package/build-types/theme-provider.d.ts.map +1 -1
  17. package/build-types/types.d.ts +8 -0
  18. package/build-types/types.d.ts.map +1 -1
  19. package/docs/ds-tokens.md +8 -7
  20. package/package.json +4 -4
  21. package/src/prebuilt/css/design-tokens.css +30 -4
  22. package/src/prebuilt/js/design-tokens.js +5 -4
  23. package/src/prebuilt/json/figma.json +24 -8
  24. package/src/stories/index.story.tsx +23 -9
  25. package/src/theme-provider.tsx +2 -0
  26. package/src/types.ts +9 -0
  27. package/terrazzo.config.ts +21 -0
  28. package/tokens/dimension.json +44 -10
  29. package/tsconfig.bin.tsbuildinfo +1 -1
  30. package/tsconfig.src.tsbuildinfo +1 -1
package/bin/terrazzo-plugin-inline-alias-values/index.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * External dependencies
3
3
  */
4
- import { type Plugin } from '@terrazzo/parser';
4
+ import { type Plugin, type TokenNormalized } from '@terrazzo/parser';
5
5
 
6
6
  interface InlineAliasValuesOptions {
7
7
  /**
@@ -40,25 +40,54 @@ export default function inlineAliasValues( {
40
40
  return {
41
41
  name: '@wordpress/terrazzo-plugin-inline-alias-values',
42
42
  async transform( { tokens } ) {
43
- Object.keys( tokens )
44
- .filter( ( id ) => pattern.test( id ) )
45
- .forEach( ( id ) => {
46
- const token = tokens[ id ];
43
+ // Map of primitive token ID -> array of references to inline
44
+ const inlineMap: Record< string, TokenNormalized[] > = {};
45
+
46
+ // Single pass: identify primitives and collect references
47
+ for ( const [ id, token ] of Object.entries( tokens ) ) {
48
+ const shouldInline = pattern.test( id );
49
+
50
+ if ( shouldInline ) {
51
+ // Track this token for inlining
52
+ inlineMap[ id ] = [];
53
+
54
+ // Track aliased tokens for output file
47
55
  if ( token.aliasedBy ) {
48
56
  aliasedBy[ tokenId( id ) ] =
49
57
  token.aliasedBy.map( tokenId );
58
+ }
59
+ }
60
+
61
+ // Check if this token's main value references a primitive
62
+ if ( token.aliasOf && pattern.test( token.aliasOf ) ) {
63
+ inlineMap[ token.aliasOf ] ??= [];
64
+ inlineMap[ token.aliasOf ].push( token );
65
+ }
50
66
 
51
- for ( const aliasedId of token.aliasedBy ) {
52
- Object.assign( tokens[ aliasedId ], {
53
- $value: token.$value,
54
- mode: token.mode,
55
- originalValue: token.originalValue,
56
- } );
57
- }
67
+ // Check if any mode values reference a primitive
68
+ for ( const modeValue of Object.values( token.mode ) ) {
69
+ const { aliasOf } = modeValue;
70
+ if ( aliasOf && pattern.test( aliasOf ) ) {
71
+ const primitiveId = aliasOf;
72
+ inlineMap[ primitiveId ] ??= [];
73
+ inlineMap[ primitiveId ].push( modeValue );
58
74
  }
75
+ }
76
+ }
77
+
78
+ // Inline values and delete primitives
79
+ for ( const [ id, references ] of Object.entries( inlineMap ) ) {
80
+ const token = tokens[ id ];
59
81
 
60
- delete tokens[ id ];
61
- } );
82
+ for ( const target of references ) {
83
+ target.$value = token.$value;
84
+ target.originalValue = token.originalValue;
85
+ delete target.aliasOf;
86
+ delete target.aliasChain;
87
+ }
88
+
89
+ delete tokens[ id ];
90
+ }
62
91
  },
63
92
  async build( { outputFile } ) {
64
93
  if ( ! filename ) {
package/build/prebuilt/js/design-tokens.js CHANGED
@@ -116,10 +116,11 @@ var design_tokens_default = [
116
116
  "--wpds-color-stroke-interactive-error-strong",
117
117
  "--wpds-color-stroke-focus-brand",
118
118
  "--wpds-dimension-base",
119
- "--wpds-dimension-padding-surface-x-small",
120
- "--wpds-dimension-padding-surface-small",
121
- "--wpds-dimension-padding-surface-medium",
122
- "--wpds-dimension-padding-surface-large",
119
+ "--wpds-dimension-padding-surface-2xs",
120
+ "--wpds-dimension-padding-surface-xs",
121
+ "--wpds-dimension-padding-surface-sm",
122
+ "--wpds-dimension-padding-surface-md",
123
+ "--wpds-dimension-padding-surface-lg",
123
124
  "--wpds-elevation-x-small",
124
125
  "--wpds-elevation-small",
125
126
  "--wpds-elevation-medium",
package/build/prebuilt/js/design-tokens.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/prebuilt/js/design-tokens.js"],
4
- "sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-x-small',\n\t'--wpds-border-radius-small',\n\t'--wpds-border-radius-medium',\n\t'--wpds-border-radius-large',\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',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\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',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-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-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\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-brand-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-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\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-brand-disabled',\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-x-small',\n\t'--wpds-dimension-padding-surface-small',\n\t'--wpds-dimension-padding-surface-medium',\n\t'--wpds-dimension-padding-surface-large',\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-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\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;AACD;",
4
+ "sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-x-small',\n\t'--wpds-border-radius-small',\n\t'--wpds-border-radius-medium',\n\t'--wpds-border-radius-large',\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',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\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',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-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-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\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-brand-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-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\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-brand-disabled',\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-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-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\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;AACD;",
6
6
  "names": []
7
7
  }
package/build/prebuilt/json/figma.json CHANGED
@@ -558,27 +558,43 @@
558
558
  },
559
559
  "description": "Base dimension unit"
560
560
  },
561
- "Dimension/Semantic/padding-surface-x-small": {
561
+ "Dimension/Semantic/padding-surface-2xs": {
562
562
  "value": {
563
- ".": "8px"
563
+ ".": "4px",
564
+ "compact": "4px",
565
+ "comfortable": "8px"
566
+ },
567
+ "description": "2x extra small spacing for surfaces"
568
+ },
569
+ "Dimension/Semantic/padding-surface-xs": {
570
+ "value": {
571
+ ".": "8px",
572
+ "compact": "4px",
573
+ "comfortable": "12px"
564
574
  },
565
575
  "description": "Extra small spacing for surfaces"
566
576
  },
567
- "Dimension/Semantic/padding-surface-small": {
577
+ "Dimension/Semantic/padding-surface-sm": {
568
578
  "value": {
569
- ".": "12px"
579
+ ".": "16px",
580
+ "compact": "12px",
581
+ "comfortable": "20px"
570
582
  },
571
583
  "description": "Small spacing for surfaces"
572
584
  },
573
- "Dimension/Semantic/padding-surface-medium": {
585
+ "Dimension/Semantic/padding-surface-md": {
574
586
  "value": {
575
- ".": "16px"
587
+ ".": "24px",
588
+ "compact": "20px",
589
+ "comfortable": "32px"
576
590
  },
577
591
  "description": "Medium spacing for surfaces"
578
592
  },
579
- "Dimension/Semantic/padding-surface-large": {
593
+ "Dimension/Semantic/padding-surface-lg": {
580
594
  "value": {
581
- ".": "24px"
595
+ ".": "32px",
596
+ "compact": "24px",
597
+ "comfortable": "40px"
582
598
  },
583
599
  "description": "Large spacing for surfaces"
584
600
  },
package/build/theme-provider.js CHANGED
@@ -59,7 +59,8 @@ function generateCSSSelector({
59
59
  var ThemeProvider = ({
60
60
  children,
61
61
  color = {},
62
- isRoot = false
62
+ isRoot = false,
63
+ density
63
64
  }) => {
64
65
  const instanceId = (0, import_element.useId)();
65
66
  const { themeProviderStyles, resolvedSettings } = (0, import_use_theme_provider_styles.useThemeProviderStyles)({
@@ -81,6 +82,7 @@ var ThemeProvider = ({
81
82
  {
82
83
  "data-wpds-theme-provider-id": instanceId,
83
84
  "data-wpds-root-provider": isRoot,
85
+ "data-wpds-density": density,
84
86
  className: style_default.root,
85
87
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ThemeContext.Provider, { value: contextValue, children })
86
88
  }
package/build/theme-provider.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/theme-provider.tsx", "../src/style.module.css"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tisRoot = false,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "const css = `.style-module__root__26kw6 {\n\tdisplay: contents;\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"root\": \"style-module__root__26kw6\"\n};"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+B;AAK/B,qBAA6B;AAC7B,uCAAuC;;;ACdvC,IAAM,MAAM;AAAA;AAAA;AAAA;AAIZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,QAAQ;AACV;;;ADwDE;AAhDF,SAAS,gBAAiB,QAAwB;AACjD,SAAO,OAAO,QAAS,MAAO,EAC5B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,GAAI,GAAI,KAAM,KAAM,GAAI,EACnD,KAAM,EAAG;AACZ;AAEA,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAGI;AACH,QAAM,UAAU;AAChB,QAAM,gBAAgB,iCAAkC,UAAW;AAEnE,QAAM,YAAY,CAAC;AAEnB,MAAK,QAAS;AACb,cAAU;AAAA,MACT,cAAe,cAAO,IAAK,GAAI,OAAQ,GAAI,aAAc;AAAA,IAC1D;AAAA,EACD;AAEA,YAAU,KAAM,IAAK,cAAO,IAAK,IAAK,cAAO,IAAK,GAAI,aAAc,EAAG;AAEvE,SAAO,UAAU,KAAM,GAAI;AAC5B;AAEO,IAAM,gBAAgB,CAAE;AAAA,EAC9B;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,SAAS;AACV,MAA2B;AAC1B,QAAM,iBAAa,sBAAM;AAEzB,QAAM,EAAE,qBAAqB,iBAAiB,QAAI,yDAAwB;AAAA,IACzE;AAAA,EACD,CAAE;AAEF,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,SACC,4EACG;AAAA,0BACD,4CAAC,WACE,aAAI,oBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD,CAAE,CAAE,KAAM,gBAAiB,mBAAoB,CAAE,KAClD,IACG;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACA,+BAA8B;AAAA,QAC9B,2BAA0B;AAAA,QAC1B,WAAY,cAAO;AAAA,QAEnB,sDAAC,4BAAa,UAAb,EAAsB,OAAQ,cAC5B,UACH;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tisRoot = false,\n\tdensity,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tdata-wpds-density={ density }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "const css = `.style-module__root__26kw6 {\n\tdisplay: contents;\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"root\": \"style-module__root__26kw6\"\n};"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+B;AAK/B,qBAA6B;AAC7B,uCAAuC;;;ACdvC,IAAM,MAAM;AAAA;AAAA;AAAA;AAIZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,QAAQ;AACV;;;ADyDE;AAjDF,SAAS,gBAAiB,QAAwB;AACjD,SAAO,OAAO,QAAS,MAAO,EAC5B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,GAAI,GAAI,KAAM,KAAM,GAAI,EACnD,KAAM,EAAG;AACZ;AAEA,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAGI;AACH,QAAM,UAAU;AAChB,QAAM,gBAAgB,iCAAkC,UAAW;AAEnE,QAAM,YAAY,CAAC;AAEnB,MAAK,QAAS;AACb,cAAU;AAAA,MACT,cAAe,cAAO,IAAK,GAAI,OAAQ,GAAI,aAAc;AAAA,IAC1D;AAAA,EACD;AAEA,YAAU,KAAM,IAAK,cAAO,IAAK,IAAK,cAAO,IAAK,GAAI,aAAc,EAAG;AAEvE,SAAO,UAAU,KAAM,GAAI;AAC5B;AAEO,IAAM,gBAAgB,CAAE;AAAA,EAC9B;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,SAAS;AAAA,EACT;AACD,MAA2B;AAC1B,QAAM,iBAAa,sBAAM;AAEzB,QAAM,EAAE,qBAAqB,iBAAiB,QAAI,yDAAwB;AAAA,IACzE;AAAA,EACD,CAAE;AAEF,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,SACC,4EACG;AAAA,0BACD,4CAAC,WACE,aAAI,oBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD,CAAE,CAAE,KAAM,gBAAiB,mBAAoB,CAAE,KAClD,IACG;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACA,+BAA8B;AAAA,QAC9B,2BAA0B;AAAA,QAC1B,qBAAoB;AAAA,QACpB,WAAY,cAAO;AAAA,QAEnB,sDAAC,4BAAa,UAAb,EAAsB,OAAQ,cAC5B,UACH;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
6
6
  "names": []
7
7
  }
package/build/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/types.ts"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport { type ReactNode } from 'react';\n\nexport interface ThemeProviderSettings {\n\t/**\n\t * The set of color options to apply to the theme.\n\t */\n\tcolor?: {\n\t\t/**\n\t\t * The primary seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tprimary?: string;\n\t\t/**\n\t\t * The background seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tbg?: string;\n\t};\n}\n\nexport interface ThemeProviderProps extends ThemeProviderSettings {\n\t/**\n\t * The children to render.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * When a ThemeProvider is the root provider, it will apply its theming\n\t * settings also to the root document element (e.g. the html element).\n\t * This is useful, for example, to make sure that the `html` element can\n\t * consume the right background color, or that overlays rendered inside a\n\t * portal can inherit the correct color scheme.\n\t *\n\t * @default false\n\t */\n\tisRoot?: boolean;\n}\n"],
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport { type ReactNode } from 'react';\n\nexport interface ThemeProviderSettings {\n\t/**\n\t * The set of color options to apply to the theme.\n\t */\n\tcolor?: {\n\t\t/**\n\t\t * The primary seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tprimary?: string;\n\t\t/**\n\t\t * The background seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tbg?: string;\n\t};\n\n\t/**\n\t * The density of the theme. If left unspecified, the theme inherits from\n\t * the density of the closest `ThemeProvider`, or uses the default density\n\t * if there is no inherited density.\n\t *\n\t * @default undefined\n\t */\n\tdensity?: undefined | 'default' | 'compact' | 'comfortable';\n}\n\nexport interface ThemeProviderProps extends ThemeProviderSettings {\n\t/**\n\t * The children to render.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * When a ThemeProvider is the root provider, it will apply its theming\n\t * settings also to the root document element (e.g. the html element).\n\t * This is useful, for example, to make sure that the `html` element can\n\t * consume the right background color, or that overlays rendered inside a\n\t * portal can inherit the correct color scheme.\n\t *\n\t * @default false\n\t */\n\tisRoot?: boolean;\n}\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/build-module/prebuilt/js/design-tokens.js CHANGED
@@ -93,10 +93,11 @@ var design_tokens_default = [
93
93
  "--wpds-color-stroke-interactive-error-strong",
94
94
  "--wpds-color-stroke-focus-brand",
95
95
  "--wpds-dimension-base",
96
- "--wpds-dimension-padding-surface-x-small",
97
- "--wpds-dimension-padding-surface-small",
98
- "--wpds-dimension-padding-surface-medium",
99
- "--wpds-dimension-padding-surface-large",
96
+ "--wpds-dimension-padding-surface-2xs",
97
+ "--wpds-dimension-padding-surface-xs",
98
+ "--wpds-dimension-padding-surface-sm",
99
+ "--wpds-dimension-padding-surface-md",
100
+ "--wpds-dimension-padding-surface-lg",
100
101
  "--wpds-elevation-x-small",
101
102
  "--wpds-elevation-small",
102
103
  "--wpds-elevation-medium",
package/build-module/prebuilt/js/design-tokens.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/prebuilt/js/design-tokens.js"],
4
- "sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-x-small',\n\t'--wpds-border-radius-small',\n\t'--wpds-border-radius-medium',\n\t'--wpds-border-radius-large',\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',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\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',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-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-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\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-brand-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-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\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-brand-disabled',\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-x-small',\n\t'--wpds-dimension-padding-surface-small',\n\t'--wpds-dimension-padding-surface-medium',\n\t'--wpds-dimension-padding-surface-large',\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-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\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;AACD;",
4
+ "sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-x-small',\n\t'--wpds-border-radius-small',\n\t'--wpds-border-radius-medium',\n\t'--wpds-border-radius-large',\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',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\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',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-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-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\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-brand-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-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\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-brand-disabled',\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-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-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\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;AACD;",
6
6
  "names": []
7
7
  }
package/build-module/prebuilt/json/figma.json CHANGED
@@ -558,27 +558,43 @@
558
558
  },
559
559
  "description": "Base dimension unit"
560
560
  },
561
- "Dimension/Semantic/padding-surface-x-small": {
561
+ "Dimension/Semantic/padding-surface-2xs": {
562
562
  "value": {
563
- ".": "8px"
563
+ ".": "4px",
564
+ "compact": "4px",
565
+ "comfortable": "8px"
566
+ },
567
+ "description": "2x extra small spacing for surfaces"
568
+ },
569
+ "Dimension/Semantic/padding-surface-xs": {
570
+ "value": {
571
+ ".": "8px",
572
+ "compact": "4px",
573
+ "comfortable": "12px"
564
574
  },
565
575
  "description": "Extra small spacing for surfaces"
566
576
  },
567
- "Dimension/Semantic/padding-surface-small": {
577
+ "Dimension/Semantic/padding-surface-sm": {
568
578
  "value": {
569
- ".": "12px"
579
+ ".": "16px",
580
+ "compact": "12px",
581
+ "comfortable": "20px"
570
582
  },
571
583
  "description": "Small spacing for surfaces"
572
584
  },
573
- "Dimension/Semantic/padding-surface-medium": {
585
+ "Dimension/Semantic/padding-surface-md": {
574
586
  "value": {
575
- ".": "16px"
587
+ ".": "24px",
588
+ "compact": "20px",
589
+ "comfortable": "32px"
576
590
  },
577
591
  "description": "Medium spacing for surfaces"
578
592
  },
579
- "Dimension/Semantic/padding-surface-large": {
593
+ "Dimension/Semantic/padding-surface-lg": {
580
594
  "value": {
581
- ".": "24px"
595
+ ".": "32px",
596
+ "compact": "24px",
597
+ "comfortable": "40px"
582
598
  },
583
599
  "description": "Large spacing for surfaces"
584
600
  },
package/build-module/theme-provider.js CHANGED
@@ -36,7 +36,8 @@ function generateCSSSelector({
36
36
  var ThemeProvider = ({
37
37
  children,
38
38
  color = {},
39
- isRoot = false
39
+ isRoot = false,
40
+ density
40
41
  }) => {
41
42
  const instanceId = useId();
42
43
  const { themeProviderStyles, resolvedSettings } = useThemeProviderStyles({
@@ -58,6 +59,7 @@ var ThemeProvider = ({
58
59
  {
59
60
  "data-wpds-theme-provider-id": instanceId,
60
61
  "data-wpds-root-provider": isRoot,
62
+ "data-wpds-density": density,
61
63
  className: style_default.root,
62
64
  children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children })
63
65
  }
package/build-module/theme-provider.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/theme-provider.tsx", "../src/style.module.css"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tisRoot = false,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "const css = `.style-module__root__26kw6 {\n\tdisplay: contents;\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"root\": \"style-module__root__26kw6\"\n};"],
5
- "mappings": ";AAQA,SAAS,SAAS,aAAa;AAK/B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;;;ACdvC,IAAM,MAAM;AAAA;AAAA;AAAA;AAIZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,QAAQ;AACV;;;ADwDE,mBAEE,KAFF;AAhDF,SAAS,gBAAiB,QAAwB;AACjD,SAAO,OAAO,QAAS,MAAO,EAC5B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,GAAI,GAAI,KAAM,KAAM,GAAI,EACnD,KAAM,EAAG;AACZ;AAEA,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAGI;AACH,QAAM,UAAU;AAChB,QAAM,gBAAgB,iCAAkC,UAAW;AAEnE,QAAM,YAAY,CAAC;AAEnB,MAAK,QAAS;AACb,cAAU;AAAA,MACT,cAAe,cAAO,IAAK,GAAI,OAAQ,GAAI,aAAc;AAAA,IAC1D;AAAA,EACD;AAEA,YAAU,KAAM,IAAK,cAAO,IAAK,IAAK,cAAO,IAAK,GAAI,aAAc,EAAG;AAEvE,SAAO,UAAU,KAAM,GAAI;AAC5B;AAEO,IAAM,gBAAgB,CAAE;AAAA,EAC9B;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,SAAS;AACV,MAA2B;AAC1B,QAAM,aAAa,MAAM;AAEzB,QAAM,EAAE,qBAAqB,iBAAiB,IAAI,uBAAwB;AAAA,IACzE;AAAA,EACD,CAAE;AAEF,QAAM,eAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,SACC,iCACG;AAAA,0BACD,oBAAC,WACE,aAAI,oBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD,CAAE,CAAE,KAAM,gBAAiB,mBAAoB,CAAE,KAClD,IACG;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACA,+BAA8B;AAAA,QAC9B,2BAA0B;AAAA,QAC1B,WAAY,cAAO;AAAA,QAEnB,8BAAC,aAAa,UAAb,EAAsB,OAAQ,cAC5B,UACH;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tisRoot = false,\n\tdensity,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tdata-wpds-density={ density }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "const css = `.style-module__root__26kw6 {\n\tdisplay: contents;\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"root\": \"style-module__root__26kw6\"\n};"],
5
+ "mappings": ";AAQA,SAAS,SAAS,aAAa;AAK/B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;;;ACdvC,IAAM,MAAM;AAAA;AAAA;AAAA;AAIZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,QAAQ;AACV;;;ADyDE,mBAEE,KAFF;AAjDF,SAAS,gBAAiB,QAAwB;AACjD,SAAO,OAAO,QAAS,MAAO,EAC5B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,GAAI,GAAI,KAAM,KAAM,GAAI,EACnD,KAAM,EAAG;AACZ;AAEA,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAGI;AACH,QAAM,UAAU;AAChB,QAAM,gBAAgB,iCAAkC,UAAW;AAEnE,QAAM,YAAY,CAAC;AAEnB,MAAK,QAAS;AACb,cAAU;AAAA,MACT,cAAe,cAAO,IAAK,GAAI,OAAQ,GAAI,aAAc;AAAA,IAC1D;AAAA,EACD;AAEA,YAAU,KAAM,IAAK,cAAO,IAAK,IAAK,cAAO,IAAK,GAAI,aAAc,EAAG;AAEvE,SAAO,UAAU,KAAM,GAAI;AAC5B;AAEO,IAAM,gBAAgB,CAAE;AAAA,EAC9B;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,SAAS;AAAA,EACT;AACD,MAA2B;AAC1B,QAAM,aAAa,MAAM;AAEzB,QAAM,EAAE,qBAAqB,iBAAiB,IAAI,uBAAwB;AAAA,IACzE;AAAA,EACD,CAAE;AAEF,QAAM,eAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,SACC,iCACG;AAAA,0BACD,oBAAC,WACE,aAAI,oBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD,CAAE,CAAE,KAAM,gBAAiB,mBAAoB,CAAE,KAClD,IACG;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACA,+BAA8B;AAAA,QAC9B,2BAA0B;AAAA,QAC1B,qBAAoB;AAAA,QACpB,WAAY,cAAO;AAAA,QAEnB,8BAAC,aAAa,UAAb,EAAsB,OAAQ,cAC5B,UACH;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
6
6
  "names": []
7
7
  }
package/build-types/stories/index.story.d.ts CHANGED
@@ -6,6 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react';
6
6
  * Internal dependencies
7
7
  */
8
8
  import { ThemeProvider } from '../theme-provider';
9
+ import '../prebuilt/css/design-tokens.css';
9
10
  declare const meta: Meta<typeof ThemeProvider>;
10
11
  export default meta;
11
12
  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,kBAAkB,CAAC;AAavD;;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,CAiDhE,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,kBAAkB,CAAC;AAavD;;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"}
package/build-types/theme-provider.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { type ThemeProviderProps } from './types';
2
- export declare const ThemeProvider: ({ children, color, isRoot, }: ThemeProviderProps) => import("react").JSX.Element;
2
+ export declare const ThemeProvider: ({ children, color, isRoot, density, }: ThemeProviderProps) => import("react").JSX.Element;
3
3
  //# sourceMappingURL=theme-provider.d.ts.map
package/build-types/theme-provider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAgClD,eAAO,MAAM,aAAa,GAAK,8BAI5B,kBAAkB,gCAmCpB,CAAC"}
1
+ {"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAgClD,eAAO,MAAM,aAAa,GAAK,uCAK5B,kBAAkB,gCAoCpB,CAAC"}
package/build-types/types.d.ts CHANGED
@@ -22,6 +22,14 @@ export interface ThemeProviderSettings {
22
22
  */
23
23
  bg?: string;
24
24
  };
25
+ /**
26
+ * The density of the theme. If left unspecified, the theme inherits from
27
+ * the density of the closest `ThemeProvider`, or uses the default density
28
+ * if there is no inherited density.
29
+ *
30
+ * @default undefined
31
+ */
32
+ density?: undefined | 'default' | 'compact' | 'comfortable';
25
33
  }
26
34
  export interface ThemeProviderProps extends ThemeProviderSettings {
27
35
  /**
package/build-types/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE;QACP;;;;;WAKG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;;;;WAKG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;CACF;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE;QACP;;;;;WAKG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;;;;WAKG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;CAC5D;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}
package/docs/ds-tokens.md CHANGED
@@ -111,13 +111,14 @@ Do not edit directly.
111
111
 
112
112
  ### Dimension
113
113
 
114
- | Variable name | Description |
115
- | ------------------------------------------ | -------------------------------- |
116
- | `--wpds-dimension-base` | Base dimension unit |
117
- | `--wpds-dimension-padding-surface-x-small` | Extra small spacing for surfaces |
118
- | `--wpds-dimension-padding-surface-small` | Small spacing for surfaces |
119
- | `--wpds-dimension-padding-surface-medium` | Medium spacing for surfaces |
120
- | `--wpds-dimension-padding-surface-large` | Large spacing for surfaces |
114
+ | Variable name | Description |
115
+ | -------------------------------------- | ----------------------------------- |
116
+ | `--wpds-dimension-base` | Base dimension unit |
117
+ | `--wpds-dimension-padding-surface-2xs` | 2x extra small spacing for surfaces |
118
+ | `--wpds-dimension-padding-surface-xs` | Extra small spacing for surfaces |
119
+ | `--wpds-dimension-padding-surface-sm` | Small spacing for surfaces |
120
+ | `--wpds-dimension-padding-surface-md` | Medium spacing for surfaces |
121
+ | `--wpds-dimension-padding-surface-lg` | Large spacing for surfaces |
121
122
 
122
123
  ### Elevation
123
124
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/theme",
3
- "version": "0.2.1-next.dc3f6d3c1.0",
3
+ "version": "0.3.1-next.8b30e05b0.0",
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",
@@ -43,8 +43,8 @@
43
43
  "build-module/color-ramps/lib/register-color-spaces.js"
44
44
  ],
45
45
  "dependencies": {
46
- "@wordpress/element": "^6.35.1-next.dc3f6d3c1.0",
47
- "@wordpress/private-apis": "^1.35.1-next.dc3f6d3c1.0",
46
+ "@wordpress/element": "^6.36.1-next.8b30e05b0.0",
47
+ "@wordpress/private-apis": "^1.36.1-next.8b30e05b0.0",
48
48
  "colorjs.io": "^0.5.2",
49
49
  "memize": "^2.1.0"
50
50
  },
@@ -64,5 +64,5 @@
64
64
  "build": "npm run build:tokens && npm run build:default-ramps",
65
65
  "postbuild": "prettier --write tokens/color.json src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
66
66
  },
67
- "gitHead": "f73b5e69b34fbaccfb8c47783f4f993059ff1a41"
67
+ "gitHead": "2466f6bc223f8be98c55e1ac7270e8c3e413eaaf"
68
68
  }
package/src/prebuilt/css/design-tokens.css CHANGED
@@ -96,10 +96,11 @@
96
96
  --wpds-color-stroke-surface-warning: #d2b581; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
97
97
  --wpds-color-stroke-surface-warning-strong: #936400; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
98
98
  --wpds-dimension-base: 4px; /* Base dimension unit */
99
- --wpds-dimension-padding-surface-large: 24px; /* Large spacing for surfaces */
100
- --wpds-dimension-padding-surface-medium: 16px; /* Medium spacing for surfaces */
101
- --wpds-dimension-padding-surface-small: 12px; /* Small spacing for surfaces */
102
- --wpds-dimension-padding-surface-x-small: 8px; /* Extra small spacing for surfaces */
99
+ --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
100
+ --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
101
+ --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
102
+ --wpds-dimension-padding-surface-sm: 16px; /* Small spacing for surfaces */
103
+ --wpds-dimension-padding-surface-xs: 8px; /* Extra small spacing for surfaces */
103
104
  --wpds-elevation-large: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
104
105
  0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
105
106
  --wpds-elevation-medium: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a,
@@ -127,6 +128,31 @@
127
128
  --wpds-font-size-x-small: 11px; /* Extra small font size */
128
129
  }
129
130
 
131
+ [data-wpds-theme-provider-id][data-wpds-density='default'] {
132
+ --wpds-dimension-base: 4px; /* Base dimension unit */
133
+ --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
134
+ --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
135
+ --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
136
+ --wpds-dimension-padding-surface-sm: 16px; /* Small spacing for surfaces */
137
+ --wpds-dimension-padding-surface-xs: 8px; /* Extra small spacing for surfaces */
138
+ }
139
+
140
+ [data-wpds-theme-provider-id][data-wpds-density='compact'] {
141
+ --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
142
+ --wpds-dimension-padding-surface-lg: 24px; /* Large spacing for surfaces */
143
+ --wpds-dimension-padding-surface-md: 20px; /* Medium spacing for surfaces */
144
+ --wpds-dimension-padding-surface-sm: 12px; /* Small spacing for surfaces */
145
+ --wpds-dimension-padding-surface-xs: 4px; /* Extra small spacing for surfaces */
146
+ }
147
+
148
+ [data-wpds-theme-provider-id][data-wpds-density='comfortable'] {
149
+ --wpds-dimension-padding-surface-2xs: 8px; /* 2x extra small spacing for surfaces */
150
+ --wpds-dimension-padding-surface-lg: 40px; /* Large spacing for surfaces */
151
+ --wpds-dimension-padding-surface-md: 32px; /* Medium spacing for surfaces */
152
+ --wpds-dimension-padding-surface-sm: 20px; /* Small spacing for surfaces */
153
+ --wpds-dimension-padding-surface-xs: 12px; /* Extra small spacing for surfaces */
154
+ }
155
+
130
156
  @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {
131
157
  :root {
132
158
  --wpds-border-width-focus: 1.5px; /* Border width for focus ring */
package/src/prebuilt/js/design-tokens.js CHANGED
@@ -97,10 +97,11 @@ export default [
97
97
  '--wpds-color-stroke-interactive-error-strong',
98
98
  '--wpds-color-stroke-focus-brand',
99
99
  '--wpds-dimension-base',
100
- '--wpds-dimension-padding-surface-x-small',
101
- '--wpds-dimension-padding-surface-small',
102
- '--wpds-dimension-padding-surface-medium',
103
- '--wpds-dimension-padding-surface-large',
100
+ '--wpds-dimension-padding-surface-2xs',
101
+ '--wpds-dimension-padding-surface-xs',
102
+ '--wpds-dimension-padding-surface-sm',
103
+ '--wpds-dimension-padding-surface-md',
104
+ '--wpds-dimension-padding-surface-lg',
104
105
  '--wpds-elevation-x-small',
105
106
  '--wpds-elevation-small',
106
107
  '--wpds-elevation-medium',
package/src/prebuilt/json/figma.json CHANGED
@@ -558,27 +558,43 @@
558
558
  },
559
559
  "description": "Base dimension unit"
560
560
  },
561
- "Dimension/Semantic/padding-surface-x-small": {
561
+ "Dimension/Semantic/padding-surface-2xs": {
562
562
  "value": {
563
- ".": "8px"
563
+ ".": "4px",
564
+ "compact": "4px",
565
+ "comfortable": "8px"
566
+ },
567
+ "description": "2x extra small spacing for surfaces"
568
+ },
569
+ "Dimension/Semantic/padding-surface-xs": {
570
+ "value": {
571
+ ".": "8px",
572
+ "compact": "4px",
573
+ "comfortable": "12px"
564
574
  },
565
575
  "description": "Extra small spacing for surfaces"
566
576
  },
567
- "Dimension/Semantic/padding-surface-small": {
577
+ "Dimension/Semantic/padding-surface-sm": {
568
578
  "value": {
569
- ".": "12px"
579
+ ".": "16px",
580
+ "compact": "12px",
581
+ "comfortable": "20px"
570
582
  },
571
583
  "description": "Small spacing for surfaces"
572
584
  },
573
- "Dimension/Semantic/padding-surface-medium": {
585
+ "Dimension/Semantic/padding-surface-md": {
574
586
  "value": {
575
- ".": "16px"
587
+ ".": "24px",
588
+ "compact": "20px",
589
+ "comfortable": "32px"
576
590
  },
577
591
  "description": "Medium spacing for surfaces"
578
592
  },
579
- "Dimension/Semantic/padding-surface-large": {
593
+ "Dimension/Semantic/padding-surface-lg": {
580
594
  "value": {
581
- ".": "24px"
595
+ ".": "32px",
596
+ "compact": "24px",
597
+ "comfortable": "40px"
582
598
  },
583
599
  "description": "Large spacing for surfaces"
584
600
  },