@wordpress/theme 0.8.1-next.v.202603102151.0 → 0.9.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 (65) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +25 -2
  3. package/build/esbuild-plugins/esbuild-ds-token-fallbacks.cjs +1 -1
  4. package/build/esbuild-plugins/esbuild-ds-token-fallbacks.cjs.map +2 -2
  5. package/build/postcss-plugins/add-fallback-to-var.cjs +9 -3
  6. package/build/postcss-plugins/add-fallback-to-var.cjs.map +2 -2
  7. package/build/postcss-plugins/ds-token-fallbacks.cjs +9 -3
  8. package/build/postcss-plugins/ds-token-fallbacks.cjs.map +2 -2
  9. package/build/prebuilt/js/design-token-fallbacks.cjs +6 -0
  10. package/build/prebuilt/js/design-token-fallbacks.cjs.map +2 -2
  11. package/build/prebuilt/js/design-tokens.cjs +6 -0
  12. package/build/prebuilt/js/design-tokens.cjs.map +2 -2
  13. package/build/prebuilt/ts/token-types.cjs.map +1 -1
  14. package/build/stylelint-plugins/no-token-fallback-values.cjs +73 -0
  15. package/build/stylelint-plugins/no-token-fallback-values.cjs.map +7 -0
  16. package/build/vite-plugins/vite-ds-token-fallbacks.cjs +4 -1
  17. package/build/vite-plugins/vite-ds-token-fallbacks.cjs.map +2 -2
  18. package/build-module/esbuild-plugins/esbuild-ds-token-fallbacks.mjs +1 -1
  19. package/build-module/esbuild-plugins/esbuild-ds-token-fallbacks.mjs.map +2 -2
  20. package/build-module/postcss-plugins/add-fallback-to-var.mjs +9 -3
  21. package/build-module/postcss-plugins/add-fallback-to-var.mjs.map +2 -2
  22. package/build-module/postcss-plugins/ds-token-fallbacks.mjs +9 -3
  23. package/build-module/postcss-plugins/ds-token-fallbacks.mjs.map +2 -2
  24. package/build-module/prebuilt/js/design-token-fallbacks.mjs +6 -0
  25. package/build-module/prebuilt/js/design-token-fallbacks.mjs.map +2 -2
  26. package/build-module/prebuilt/js/design-tokens.mjs +6 -0
  27. package/build-module/prebuilt/js/design-tokens.mjs.map +2 -2
  28. package/build-module/stylelint-plugins/no-token-fallback-values.mjs +43 -0
  29. package/build-module/stylelint-plugins/no-token-fallback-values.mjs.map +7 -0
  30. package/build-module/vite-plugins/vite-ds-token-fallbacks.mjs +4 -1
  31. package/build-module/vite-plugins/vite-ds-token-fallbacks.mjs.map +2 -2
  32. package/build-types/color-ramps/stories/index.story.d.ts.map +1 -1
  33. package/build-types/postcss-plugins/add-fallback-to-var.d.ts +10 -4
  34. package/build-types/postcss-plugins/add-fallback-to-var.d.ts.map +1 -1
  35. package/build-types/postcss-plugins/ds-token-fallbacks.d.mts +13 -3
  36. package/build-types/postcss-plugins/ds-token-fallbacks.d.mts.map +1 -1
  37. package/build-types/prebuilt/js/design-token-fallbacks.d.mts +6 -0
  38. package/build-types/prebuilt/ts/token-types.d.ts +4 -0
  39. package/build-types/prebuilt/ts/token-types.d.ts.map +1 -1
  40. package/build-types/stylelint-plugins/no-token-fallback-values.d.mts +4 -0
  41. package/build-types/stylelint-plugins/no-token-fallback-values.d.mts.map +1 -0
  42. package/package.json +11 -6
  43. package/src/color-ramps/stories/index.story.tsx +0 -1
  44. package/src/esbuild-plugins/esbuild-ds-token-fallbacks.mjs +1 -1
  45. package/src/postcss-plugins/add-fallback-to-var.ts +19 -8
  46. package/src/postcss-plugins/ds-token-fallbacks.mjs +21 -7
  47. package/src/postcss-plugins/test/add-fallback-to-var.test.ts +52 -0
  48. package/src/prebuilt/css/design-tokens.css +12 -0
  49. package/src/prebuilt/js/design-token-fallbacks.mjs +6 -0
  50. package/src/prebuilt/js/design-tokens.mjs +6 -0
  51. package/src/prebuilt/ts/token-types.ts +5 -0
  52. package/src/stories/index.story.tsx +1 -1
  53. package/src/stylelint-plugins/no-token-fallback-values.mjs +55 -0
  54. package/src/stylelint-plugins/test/.stylelintrc.no-setting-wpds-custom-properties.json +6 -0
  55. package/src/stylelint-plugins/test/.stylelintrc.no-token-fallback-values.json +6 -0
  56. package/src/stylelint-plugins/test/.stylelintrc.no-unknown-ds-tokens.json +6 -0
  57. package/src/stylelint-plugins/test/__snapshots__/no-token-fallback-values.test.ts.snap +60 -0
  58. package/src/stylelint-plugins/test/fixtures/no-token-fallback-values-invalid.css +16 -0
  59. package/src/stylelint-plugins/test/fixtures/no-token-fallback-values-valid.css +18 -0
  60. package/src/stylelint-plugins/test/no-setting-wpds-custom-properties.test.ts +6 -2
  61. package/src/stylelint-plugins/test/no-token-fallback-values.test.ts +51 -0
  62. package/src/stylelint-plugins/test/no-unknown-ds-tokens.test.ts +6 -2
  63. package/src/stylelint-plugins/test/utils/index.ts +7 -4
  64. package/src/vite-plugins/vite-ds-token-fallbacks.mjs +4 -1
  65. package/src/stylelint-plugins/test/.stylelintrc.json +0 -10
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/prebuilt/js/design-token-fallbacks.mjs"],
4
- "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'--wpds-border-radius-lg': '8px',\n\t'--wpds-border-radius-md': '4px',\n\t'--wpds-border-radius-sm': '2px',\n\t'--wpds-border-radius-xs': '1px',\n\t'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',\n\t'--wpds-border-width-lg': '8px',\n\t'--wpds-border-width-md': '4px',\n\t'--wpds-border-width-sm': '2px',\n\t'--wpds-border-width-xs': '1px',\n\t'--wpds-color-bg-interactive-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-interactive-brand-strong-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',\n\t'--wpds-color-bg-interactive-brand-weak': '#00000000',\n\t'--wpds-color-bg-interactive-brand-weak-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',\n\t'--wpds-color-bg-interactive-error': '#00000000',\n\t'--wpds-color-bg-interactive-error-active': '#fff6f4',\n\t'--wpds-color-bg-interactive-error-strong': '#cc1818',\n\t'--wpds-color-bg-interactive-error-strong-active': '#b90000',\n\t'--wpds-color-bg-interactive-error-weak': '#00000000',\n\t'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',\n\t'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',\n\t'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',\n\t'--wpds-color-bg-interactive-neutral-weak': '#00000000',\n\t'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',\n\t'--wpds-color-bg-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',\n\t'--wpds-color-bg-surface-caution': '#fee994',\n\t'--wpds-color-bg-surface-caution-weak': '#fff9c9',\n\t'--wpds-color-bg-surface-error': '#f6e6e3',\n\t'--wpds-color-bg-surface-error-weak': '#fff6f4',\n\t'--wpds-color-bg-surface-info': '#deebfa',\n\t'--wpds-color-bg-surface-info-weak': '#f2f9ff',\n\t'--wpds-color-bg-surface-neutral': '#f8f8f8',\n\t'--wpds-color-bg-surface-neutral-strong': '#ffffff',\n\t'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',\n\t'--wpds-color-bg-surface-success': '#c5f7cc',\n\t'--wpds-color-bg-surface-success-weak': '#eaffed',\n\t'--wpds-color-bg-surface-warning': '#fde6bd',\n\t'--wpds-color-bg-surface-warning-weak': '#fff7e0',\n\t'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',\n\t'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',\n\t'--wpds-color-bg-track-neutral': '#d8d8d8',\n\t'--wpds-color-bg-track-neutral-weak': '#e0e0e0',\n\t'--wpds-color-fg-content-caution': '#281d00',\n\t'--wpds-color-fg-content-caution-weak': '#826a00',\n\t'--wpds-color-fg-content-error': '#470000',\n\t'--wpds-color-fg-content-error-weak': '#cc1818',\n\t'--wpds-color-fg-content-info': '#001b4f',\n\t'--wpds-color-fg-content-info-weak': '#006bd7',\n\t'--wpds-color-fg-content-neutral': '#1e1e1e',\n\t'--wpds-color-fg-content-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-content-success': '#002900',\n\t'--wpds-color-fg-content-success-weak': '#007f30',\n\t'--wpds-color-fg-content-warning': '#2e1900',\n\t'--wpds-color-fg-content-warning-weak': '#926300',\n\t'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-strong': '#fff',\n\t'--wpds-color-fg-interactive-brand-strong-active': '#fff',\n\t'--wpds-color-fg-interactive-error': '#cc1818',\n\t'--wpds-color-fg-interactive-error-active': '#cc1818',\n\t'--wpds-color-fg-interactive-error-strong': '#f2efef',\n\t'--wpds-color-fg-interactive-error-strong-active': '#f2efef',\n\t'--wpds-color-fg-interactive-neutral': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',\n\t'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',\n\t'--wpds-color-stroke-interactive-error': '#cc1818',\n\t'--wpds-color-stroke-interactive-error-active': '#9d0000',\n\t'--wpds-color-stroke-interactive-error-strong': '#cc1818',\n\t'--wpds-color-stroke-interactive-neutral': '#8a8a8a',\n\t'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',\n\t'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',\n\t'--wpds-color-stroke-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',\n\t'--wpds-color-stroke-surface-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-surface-error': '#daa39b',\n\t'--wpds-color-stroke-surface-error-strong': '#cc1818',\n\t'--wpds-color-stroke-surface-info': '#9fbcdc',\n\t'--wpds-color-stroke-surface-info-strong': '#006bd7',\n\t'--wpds-color-stroke-surface-neutral': '#d8d8d8',\n\t'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',\n\t'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',\n\t'--wpds-color-stroke-surface-success': '#8ac894',\n\t'--wpds-color-stroke-surface-success-strong': '#007f30',\n\t'--wpds-color-stroke-surface-warning': '#d0b381',\n\t'--wpds-color-stroke-surface-warning-strong': '#926300',\n\t'--wpds-cursor-control': 'default',\n\t'--wpds-dimension-base': '4px',\n\t'--wpds-dimension-gap-2xl': '32px',\n\t'--wpds-dimension-gap-3xl': '40px',\n\t'--wpds-dimension-gap-lg': '16px',\n\t'--wpds-dimension-gap-md': '12px',\n\t'--wpds-dimension-gap-sm': '8px',\n\t'--wpds-dimension-gap-xl': '24px',\n\t'--wpds-dimension-gap-xs': '4px',\n\t'--wpds-dimension-padding-2xl': '24px',\n\t'--wpds-dimension-padding-3xl': '32px',\n\t'--wpds-dimension-padding-lg': '16px',\n\t'--wpds-dimension-padding-md': '12px',\n\t'--wpds-dimension-padding-sm': '8px',\n\t'--wpds-dimension-padding-xl': '20px',\n\t'--wpds-dimension-padding-xs': '4px',\n\t'--wpds-elevation-lg':\n\t\t'0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',\n\t'--wpds-elevation-md':\n\t\t'0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005',\n\t'--wpds-elevation-sm':\n\t\t'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',\n\t'--wpds-elevation-xs':\n\t\t'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',\n\t'--wpds-font-family-body':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-heading':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-mono': '\"Menlo\", \"Consolas\", monaco, monospace',\n\t'--wpds-font-line-height-2xl': '40px',\n\t'--wpds-font-line-height-lg': '28px',\n\t'--wpds-font-line-height-md': '24px',\n\t'--wpds-font-line-height-sm': '20px',\n\t'--wpds-font-line-height-xl': '32px',\n\t'--wpds-font-line-height-xs': '16px',\n\t'--wpds-font-size-2xl': '32px',\n\t'--wpds-font-size-lg': '15px',\n\t'--wpds-font-size-md': '13px',\n\t'--wpds-font-size-sm': '12px',\n\t'--wpds-font-size-xl': '20px',\n\t'--wpds-font-size-xs': '11px',\n\t'--wpds-font-weight-medium': '499',\n\t'--wpds-font-weight-regular': '400',\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'--wpds-border-radius-lg': '8px',\n\t'--wpds-border-radius-md': '4px',\n\t'--wpds-border-radius-sm': '2px',\n\t'--wpds-border-radius-xs': '1px',\n\t'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',\n\t'--wpds-border-width-lg': '8px',\n\t'--wpds-border-width-md': '4px',\n\t'--wpds-border-width-sm': '2px',\n\t'--wpds-border-width-xs': '1px',\n\t'--wpds-color-bg-interactive-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-interactive-brand-strong-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',\n\t'--wpds-color-bg-interactive-brand-weak': '#00000000',\n\t'--wpds-color-bg-interactive-brand-weak-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',\n\t'--wpds-color-bg-interactive-error': '#00000000',\n\t'--wpds-color-bg-interactive-error-active': '#fff6f4',\n\t'--wpds-color-bg-interactive-error-strong': '#cc1818',\n\t'--wpds-color-bg-interactive-error-strong-active': '#b90000',\n\t'--wpds-color-bg-interactive-error-weak': '#00000000',\n\t'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',\n\t'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',\n\t'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',\n\t'--wpds-color-bg-interactive-neutral-weak': '#00000000',\n\t'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',\n\t'--wpds-color-bg-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',\n\t'--wpds-color-bg-surface-caution': '#fee994',\n\t'--wpds-color-bg-surface-caution-weak': '#fff9c9',\n\t'--wpds-color-bg-surface-error': '#f6e6e3',\n\t'--wpds-color-bg-surface-error-weak': '#fff6f4',\n\t'--wpds-color-bg-surface-info': '#deebfa',\n\t'--wpds-color-bg-surface-info-weak': '#f2f9ff',\n\t'--wpds-color-bg-surface-neutral': '#f8f8f8',\n\t'--wpds-color-bg-surface-neutral-strong': '#ffffff',\n\t'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',\n\t'--wpds-color-bg-surface-success': '#c5f7cc',\n\t'--wpds-color-bg-surface-success-weak': '#eaffed',\n\t'--wpds-color-bg-surface-warning': '#fde6bd',\n\t'--wpds-color-bg-surface-warning-weak': '#fff7e0',\n\t'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',\n\t'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',\n\t'--wpds-color-bg-track-neutral': '#d8d8d8',\n\t'--wpds-color-bg-track-neutral-weak': '#e0e0e0',\n\t'--wpds-color-fg-content-caution': '#281d00',\n\t'--wpds-color-fg-content-caution-weak': '#826a00',\n\t'--wpds-color-fg-content-error': '#470000',\n\t'--wpds-color-fg-content-error-weak': '#cc1818',\n\t'--wpds-color-fg-content-info': '#001b4f',\n\t'--wpds-color-fg-content-info-weak': '#006bd7',\n\t'--wpds-color-fg-content-neutral': '#1e1e1e',\n\t'--wpds-color-fg-content-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-content-success': '#002900',\n\t'--wpds-color-fg-content-success-weak': '#007f30',\n\t'--wpds-color-fg-content-warning': '#2e1900',\n\t'--wpds-color-fg-content-warning-weak': '#926300',\n\t'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-strong': '#fff',\n\t'--wpds-color-fg-interactive-brand-strong-active': '#fff',\n\t'--wpds-color-fg-interactive-error': '#cc1818',\n\t'--wpds-color-fg-interactive-error-active': '#cc1818',\n\t'--wpds-color-fg-interactive-error-strong': '#f2efef',\n\t'--wpds-color-fg-interactive-error-strong-active': '#f2efef',\n\t'--wpds-color-fg-interactive-neutral': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',\n\t'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',\n\t'--wpds-color-stroke-interactive-error': '#cc1818',\n\t'--wpds-color-stroke-interactive-error-active': '#9d0000',\n\t'--wpds-color-stroke-interactive-error-strong': '#cc1818',\n\t'--wpds-color-stroke-interactive-neutral': '#8a8a8a',\n\t'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',\n\t'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',\n\t'--wpds-color-stroke-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',\n\t'--wpds-color-stroke-surface-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-surface-error': '#daa39b',\n\t'--wpds-color-stroke-surface-error-strong': '#cc1818',\n\t'--wpds-color-stroke-surface-info': '#9fbcdc',\n\t'--wpds-color-stroke-surface-info-strong': '#006bd7',\n\t'--wpds-color-stroke-surface-neutral': '#d8d8d8',\n\t'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',\n\t'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',\n\t'--wpds-color-stroke-surface-success': '#8ac894',\n\t'--wpds-color-stroke-surface-success-strong': '#007f30',\n\t'--wpds-color-stroke-surface-warning': '#d0b381',\n\t'--wpds-color-stroke-surface-warning-strong': '#926300',\n\t'--wpds-cursor-control': 'default',\n\t'--wpds-dimension-base': '4px',\n\t'--wpds-dimension-gap-2xl': '32px',\n\t'--wpds-dimension-gap-3xl': '40px',\n\t'--wpds-dimension-gap-lg': '16px',\n\t'--wpds-dimension-gap-md': '12px',\n\t'--wpds-dimension-gap-sm': '8px',\n\t'--wpds-dimension-gap-xl': '24px',\n\t'--wpds-dimension-gap-xs': '4px',\n\t'--wpds-dimension-padding-2xl': '24px',\n\t'--wpds-dimension-padding-3xl': '32px',\n\t'--wpds-dimension-padding-lg': '16px',\n\t'--wpds-dimension-padding-md': '12px',\n\t'--wpds-dimension-padding-sm': '8px',\n\t'--wpds-dimension-padding-xl': '20px',\n\t'--wpds-dimension-padding-xs': '4px',\n\t'--wpds-dimension-surface-width-2xl': '960px',\n\t'--wpds-dimension-surface-width-lg': '560px',\n\t'--wpds-dimension-surface-width-md': '400px',\n\t'--wpds-dimension-surface-width-sm': '320px',\n\t'--wpds-dimension-surface-width-xl': '720px',\n\t'--wpds-dimension-surface-width-xs': '240px',\n\t'--wpds-elevation-lg':\n\t\t'0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',\n\t'--wpds-elevation-md':\n\t\t'0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005',\n\t'--wpds-elevation-sm':\n\t\t'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',\n\t'--wpds-elevation-xs':\n\t\t'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',\n\t'--wpds-font-family-body':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-heading':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-mono': '\"Menlo\", \"Consolas\", monaco, monospace',\n\t'--wpds-font-line-height-2xl': '40px',\n\t'--wpds-font-line-height-lg': '28px',\n\t'--wpds-font-line-height-md': '24px',\n\t'--wpds-font-line-height-sm': '20px',\n\t'--wpds-font-line-height-xl': '32px',\n\t'--wpds-font-line-height-xs': '16px',\n\t'--wpds-font-size-2xl': '32px',\n\t'--wpds-font-size-lg': '15px',\n\t'--wpds-font-size-md': '13px',\n\t'--wpds-font-size-sm': '12px',\n\t'--wpds-font-size-xl': '20px',\n\t'--wpds-font-size-xs': '11px',\n\t'--wpds-font-weight-medium': '499',\n\t'--wpds-font-weight-regular': '400',\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -113,6 +113,12 @@ var design_tokens_default = [
113
113
  "--wpds-dimension-gap-xl",
114
114
  "--wpds-dimension-gap-2xl",
115
115
  "--wpds-dimension-gap-3xl",
116
+ "--wpds-dimension-surface-width-xs",
117
+ "--wpds-dimension-surface-width-sm",
118
+ "--wpds-dimension-surface-width-md",
119
+ "--wpds-dimension-surface-width-lg",
120
+ "--wpds-dimension-surface-width-xl",
121
+ "--wpds-dimension-surface-width-2xl",
116
122
  "--wpds-elevation-xs",
117
123
  "--wpds-elevation-sm",
118
124
  "--wpds-elevation-md",
@@ -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-cursor-control',\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-xs',\n\t'--wpds-elevation-sm',\n\t'--wpds-elevation-md',\n\t'--wpds-elevation-lg',\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;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-cursor-control',\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-dimension-surface-width-xs',\n\t'--wpds-dimension-surface-width-sm',\n\t'--wpds-dimension-surface-width-md',\n\t'--wpds-dimension-surface-width-lg',\n\t'--wpds-dimension-surface-width-xl',\n\t'--wpds-dimension-surface-width-2xl',\n\t'--wpds-elevation-xs',\n\t'--wpds-elevation-sm',\n\t'--wpds-elevation-md',\n\t'--wpds-elevation-lg',\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;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,43 @@
1
+ // packages/theme/src/stylelint-plugins/no-token-fallback-values.mjs
2
+ import stylelint from "stylelint";
3
+ var {
4
+ createPlugin,
5
+ utils: { report, ruleMessages, validateOptions }
6
+ } = stylelint;
7
+ var ruleName = "plugin-wpds/no-token-fallback-values";
8
+ var varWithFallbackRegex = /var\(\s*(--wpds-[\w-]+)\s*,/g;
9
+ var messages = ruleMessages(ruleName, {
10
+ rejected: (tokenName) => `Do not add a fallback value for Design System token '${tokenName}'. Fallbacks are injected automatically at build time.`
11
+ });
12
+ var ruleFunction = (primary) => {
13
+ return (root, result) => {
14
+ const validOptions = validateOptions(result, ruleName, {
15
+ actual: primary,
16
+ possible: [true]
17
+ });
18
+ if (!validOptions) {
19
+ return;
20
+ }
21
+ root.walkDecls((ruleNode) => {
22
+ const { value } = ruleNode;
23
+ let match;
24
+ varWithFallbackRegex.lastIndex = 0;
25
+ while ((match = varWithFallbackRegex.exec(value)) !== null) {
26
+ report({
27
+ message: messages.rejected(match[1]),
28
+ node: ruleNode,
29
+ word: match[0],
30
+ result,
31
+ ruleName
32
+ });
33
+ }
34
+ });
35
+ };
36
+ };
37
+ ruleFunction.ruleName = ruleName;
38
+ ruleFunction.messages = messages;
39
+ var no_token_fallback_values_default = createPlugin(ruleName, ruleFunction);
40
+ export {
41
+ no_token_fallback_values_default as default
42
+ };
43
+ //# sourceMappingURL=no-token-fallback-values.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/stylelint-plugins/no-token-fallback-values.mjs"],
4
+ "sourcesContent": ["import stylelint from 'stylelint';\n\nconst {\n\tcreatePlugin,\n\tutils: { report, ruleMessages, validateOptions },\n} = stylelint;\n\nconst ruleName = 'plugin-wpds/no-token-fallback-values';\n\n/**\n * Matches `var(--wpds-<name>,` \u2014 the comma signals a fallback value.\n * Captures the token name (e.g. `--wpds-color-fg-content-neutral`).\n */\nconst varWithFallbackRegex = /var\\(\\s*(--wpds-[\\w-]+)\\s*,/g;\n\nconst messages = ruleMessages( ruleName, {\n\trejected: ( tokenName ) =>\n\t\t`Do not add a fallback value for Design System token '${ tokenName }'. Fallbacks are injected automatically at build time.`,\n} );\n\n/** @type {import('stylelint').Rule} */\nconst ruleFunction = ( primary ) => {\n\treturn ( root, result ) => {\n\t\tconst validOptions = validateOptions( result, ruleName, {\n\t\t\tactual: primary,\n\t\t\tpossible: [ true ],\n\t\t} );\n\n\t\tif ( ! validOptions ) {\n\t\t\treturn;\n\t\t}\n\n\t\troot.walkDecls( ( ruleNode ) => {\n\t\t\tconst { value } = ruleNode;\n\n\t\t\tlet match;\n\t\t\tvarWithFallbackRegex.lastIndex = 0;\n\t\t\twhile ( ( match = varWithFallbackRegex.exec( value ) ) !== null ) {\n\t\t\t\treport( {\n\t\t\t\t\tmessage: messages.rejected( match[ 1 ] ),\n\t\t\t\t\tnode: ruleNode,\n\t\t\t\t\tword: match[ 0 ],\n\t\t\t\t\tresult,\n\t\t\t\t\truleName,\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t};\n};\n\nruleFunction.ruleName = ruleName;\nruleFunction.messages = messages;\n\n/** @type {import('stylelint').Plugin} */\nexport default createPlugin( ruleName, ruleFunction );\n"],
5
+ "mappings": ";AAAA,OAAO,eAAe;AAEtB,IAAM;AAAA,EACL;AAAA,EACA,OAAO,EAAE,QAAQ,cAAc,gBAAgB;AAChD,IAAI;AAEJ,IAAM,WAAW;AAMjB,IAAM,uBAAuB;AAE7B,IAAM,WAAW,aAAc,UAAU;AAAA,EACxC,UAAU,CAAE,cACX,wDAAyD,SAAU;AACrE,CAAE;AAGF,IAAM,eAAe,CAAE,YAAa;AACnC,SAAO,CAAE,MAAM,WAAY;AAC1B,UAAM,eAAe,gBAAiB,QAAQ,UAAU;AAAA,MACvD,QAAQ;AAAA,MACR,UAAU,CAAE,IAAK;AAAA,IAClB,CAAE;AAEF,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AAEA,SAAK,UAAW,CAAE,aAAc;AAC/B,YAAM,EAAE,MAAM,IAAI;AAElB,UAAI;AACJ,2BAAqB,YAAY;AACjC,cAAU,QAAQ,qBAAqB,KAAM,KAAM,OAAQ,MAAO;AACjE,eAAQ;AAAA,UACP,SAAS,SAAS,SAAU,MAAO,CAAE,CAAE;AAAA,UACvC,MAAM;AAAA,UACN,MAAM,MAAO,CAAE;AAAA,UACf;AAAA,UACA;AAAA,QACD,CAAE;AAAA,MACH;AAAA,IACD,CAAE;AAAA,EACH;AACD;AAEA,aAAa,WAAW;AACxB,aAAa,WAAW;AAGxB,IAAO,mCAAQ,aAAc,UAAU,YAAa;",
6
+ "names": []
7
+ }
@@ -12,7 +12,10 @@ var plugin = () => ({
12
12
  if (!code.includes("--wpds-")) {
13
13
  return null;
14
14
  }
15
- return { code: addFallbackToVar(code), map: null };
15
+ return {
16
+ code: addFallbackToVar(code, { escapeQuotes: true }),
17
+ map: null
18
+ };
16
19
  }
17
20
  });
18
21
  var vite_ds_token_fallbacks_default = plugin;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/vite-plugins/vite-ds-token-fallbacks.mjs"],
4
- "sourcesContent": ["import { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';\n\n/**\n * Vite plugin that injects design-system token fallbacks into JS/TS files.\n *\n * Replaces bare `var(--wpds-*)` references in string literals with\n * `var(--wpds-*, <fallback>)` so components render correctly without\n * a ThemeProvider.\n */\nconst plugin = () => ( {\n\tname: 'ds-token-fallbacks-js',\n\ttransform( code, id ) {\n\t\tif ( ! /\\.[mc]?[jt]sx?$/.test( id ) ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( id.includes( 'node_modules' ) ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( ! code.includes( '--wpds-' ) ) {\n\t\t\treturn null;\n\t\t}\n\t\t// Sourcemap omitted: replacements are small, inline substitutions\n\t\t// that preserve line structure, so the debugging impact is negligible.\n\t\treturn { code: addFallbackToVar( code ), map: null };\n\t},\n} );\n\nexport default plugin;\n"],
5
- "mappings": ";AAAA,SAAS,wBAAwB;AASjC,IAAM,SAAS,OAAQ;AAAA,EACtB,MAAM;AAAA,EACN,UAAW,MAAM,IAAK;AACrB,QAAK,CAAE,kBAAkB,KAAM,EAAG,GAAI;AACrC,aAAO;AAAA,IACR;AACA,QAAK,GAAG,SAAU,cAAe,GAAI;AACpC,aAAO;AAAA,IACR;AACA,QAAK,CAAE,KAAK,SAAU,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAGA,WAAO,EAAE,MAAM,iBAAkB,IAAK,GAAG,KAAK,KAAK;AAAA,EACpD;AACD;AAEA,IAAO,kCAAQ;",
4
+ "sourcesContent": ["import { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';\n\n/**\n * Vite plugin that injects design-system token fallbacks into JS/TS files.\n *\n * Replaces bare `var(--wpds-*)` references in string literals with\n * `var(--wpds-*, <fallback>)` so components render correctly without\n * a ThemeProvider.\n */\nconst plugin = () => ( {\n\tname: 'ds-token-fallbacks-js',\n\ttransform( code, id ) {\n\t\tif ( ! /\\.[mc]?[jt]sx?$/.test( id ) ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( id.includes( 'node_modules' ) ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( ! code.includes( '--wpds-' ) ) {\n\t\t\treturn null;\n\t\t}\n\t\t// Sourcemap omitted: replacements are small, inline substitutions\n\t\t// that preserve line structure, so the debugging impact is negligible.\n\t\treturn {\n\t\t\tcode: addFallbackToVar( code, { escapeQuotes: true } ),\n\t\t\tmap: null,\n\t\t};\n\t},\n} );\n\nexport default plugin;\n"],
5
+ "mappings": ";AAAA,SAAS,wBAAwB;AASjC,IAAM,SAAS,OAAQ;AAAA,EACtB,MAAM;AAAA,EACN,UAAW,MAAM,IAAK;AACrB,QAAK,CAAE,kBAAkB,KAAM,EAAG,GAAI;AACrC,aAAO;AAAA,IACR;AACA,QAAK,GAAG,SAAU,cAAe,GAAI;AACpC,aAAO;AAAA,IACR;AACA,QAAK,CAAE,KAAK,SAAU,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAGA,WAAO;AAAA,MACN,MAAM,iBAAkB,MAAM,EAAE,cAAc,KAAK,CAAE;AAAA,MACrD,KAAK;AAAA,IACN;AAAA,EACD;AACD;AAEA,IAAO,kCAAQ;",
6
6
  "names": []
7
7
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAS5D,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA+H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4FzD,CAAC"}
1
+ {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAS5D,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAkBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA+H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4FzD,CAAC"}
@@ -9,9 +9,15 @@
9
9
  * NOTE: The regex and replacement logic here is mirrored in
10
10
  * `ds-token-fallbacks.mjs`. If you update one, update the other to match.
11
11
  *
12
- * @param cssValue A CSS declaration value.
13
- * @param tokenFallbacks Map of CSS variable names to their fallback expressions.
14
- * @return The value with fallbacks injected.
12
+ * @param cssValue A CSS declaration value.
13
+ * @param tokenFallbacks Map of CSS variable names to their fallback expressions.
14
+ * @param options Options.
15
+ * @param options.escapeQuotes When true, escape `"` and `'` in fallback values.
16
+ * Use this when the input is JS/TS source so that
17
+ * injected quotes don't break string literals.
18
+ * @return The value with fallbacks injected.
15
19
  */
16
- export declare function addFallbackToVar(cssValue: string, tokenFallbacks: Record<string, string>): string;
20
+ export declare function addFallbackToVar(cssValue: string, tokenFallbacks: Record<string, string>, { escapeQuotes }?: {
21
+ escapeQuotes?: boolean;
22
+ }): string;
17
23
  //# sourceMappingURL=add-fallback-to-var.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"add-fallback-to-var.d.ts","sourceRoot":"","sources":["../../src/postcss-plugins/add-fallback-to-var.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC/B,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,GACtC,MAAM,CAUR"}
1
+ {"version":3,"file":"add-fallback-to-var.d.ts","sourceRoot":"","sources":["../../src/postcss-plugins/add-fallback-to-var.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAC/B,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,EACxC,EAAE,YAAoB,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAO,GACvD,MAAM,CAgBR"}
@@ -8,8 +8,18 @@
8
8
  * NOTE: The regex and replacement logic here mirrors `add-fallback-to-var.ts`.
9
9
  * If you update one, update the other to match.
10
10
  *
11
- * @param {string} cssValue A CSS declaration value.
12
- * @return {string} The value with fallbacks injected.
11
+ * @param {string} cssValue A CSS declaration value.
12
+ * @param {Object} [options] Options.
13
+ * @param {boolean} [options.escapeQuotes] When true, escape `"` and `'` in
14
+ * fallback values. Use this when the
15
+ * input is JS/TS source so that
16
+ * injected quotes don't break string
17
+ * literals. JS will unescape them at
18
+ * parse time, so the browser's CSS
19
+ * engine still sees the correct value.
20
+ * @return {string} The value with fallbacks injected.
13
21
  */
14
- export function addFallbackToVar(cssValue: string): string;
22
+ export function addFallbackToVar(cssValue: string, { escapeQuotes }?: {
23
+ escapeQuotes?: boolean | undefined;
24
+ }): string;
15
25
  //# sourceMappingURL=ds-token-fallbacks.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ds-token-fallbacks.d.mts","sourceRoot":"","sources":["../../src/postcss-plugins/ds-token-fallbacks.mjs"],"names":[],"mappings":"AAKA;;;;;;;;;;;;GAYG;AACH,2CAHW,MAAM,GACL,MAAM,CAYjB"}
1
+ {"version":3,"file":"ds-token-fallbacks.d.mts","sourceRoot":"","sources":["../../src/postcss-plugins/ds-token-fallbacks.mjs"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,2CAXW,MAAM,qBAEd;IAA0B,YAAY;CAOtC,GAAS,MAAM,CAkBjB"}
@@ -112,6 +112,12 @@ declare const _default: {
112
112
  '--wpds-dimension-padding-sm': string;
113
113
  '--wpds-dimension-padding-xl': string;
114
114
  '--wpds-dimension-padding-xs': string;
115
+ '--wpds-dimension-surface-width-2xl': string;
116
+ '--wpds-dimension-surface-width-lg': string;
117
+ '--wpds-dimension-surface-width-md': string;
118
+ '--wpds-dimension-surface-width-sm': string;
119
+ '--wpds-dimension-surface-width-xl': string;
120
+ '--wpds-dimension-surface-width-xs': string;
115
121
  '--wpds-elevation-lg': string;
116
122
  '--wpds-elevation-md': string;
117
123
  '--wpds-elevation-sm': string;
@@ -6,6 +6,10 @@ export type PaddingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
6
6
  * Size scale for gap tokens.
7
7
  */
8
8
  export type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
9
+ /**
10
+ * Size scale for surface width tokens.
11
+ */
12
+ export type SurfaceWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
9
13
  /**
10
14
  * Size scale for border radius tokens.
11
15
  */
@@ -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,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"}
1
+ {"version":3,"file":"token-types.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/token-types.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,4 @@
1
+ declare const _default: stylelint.Plugin;
2
+ export default _default;
3
+ import stylelint from 'stylelint';
4
+ //# sourceMappingURL=no-token-fallback-values.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"no-token-fallback-values.d.mts","sourceRoot":"","sources":["../../src/stylelint-plugins/no-token-fallback-values.mjs"],"names":[],"mappings":";;sBAAsB,WAAW"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/theme",
3
- "version": "0.8.1-next.v.202603102151.0+59e17f9ec",
3
+ "version": "0.9.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",
@@ -68,6 +68,11 @@
68
68
  "import": "./src/stylelint-plugins/no-setting-wpds-custom-properties.mjs",
69
69
  "default": "./build/stylelint-plugins/no-setting-wpds-custom-properties.cjs"
70
70
  },
71
+ "./stylelint-plugins/no-token-fallback-values": {
72
+ "types": "./build-types/stylelint-plugins/no-token-fallback-values.d.ts",
73
+ "import": "./src/stylelint-plugins/no-token-fallback-values.mjs",
74
+ "default": "./build/stylelint-plugins/no-token-fallback-values.cjs"
75
+ },
71
76
  "./package.json": "./package.json"
72
77
  },
73
78
  "react-native": "src/index",
@@ -79,13 +84,13 @@
79
84
  "build-module/color-ramps/lib/register-color-spaces.mjs"
80
85
  ],
81
86
  "dependencies": {
82
- "@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
83
- "@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
87
+ "@wordpress/element": "^6.42.0",
88
+ "@wordpress/private-apis": "^1.42.0",
84
89
  "colorjs.io": "^0.6.0",
85
90
  "memize": "^2.1.0"
86
91
  },
87
92
  "devDependencies": {
88
- "@storybook/react-vite": "^10.1.11",
93
+ "@storybook/react-vite": "^10.2.8",
89
94
  "@terrazzo/cli": "^0.10.2",
90
95
  "@terrazzo/plugin-css": "^0.10.2",
91
96
  "@terrazzo/token-tools": "^0.10.2",
@@ -94,7 +99,7 @@
94
99
  "@types/node": "^20.17.10",
95
100
  "esbuild": "^0.27.2",
96
101
  "esbuild-esm-loader": "^0.3.3",
97
- "storybook": "^10.1.11"
102
+ "storybook": "^10.2.8"
98
103
  },
99
104
  "peerDependencies": {
100
105
  "react": "^18.0.0",
@@ -116,5 +121,5 @@
116
121
  "build": "npm run build:tokens && npm run build:default-ramps && npm run prelint:js",
117
122
  "postbuild": "prettier --write tokens/color.json tokens/modes src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
118
123
  },
119
- "gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
124
+ "gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
120
125
  }
@@ -36,7 +36,6 @@ const meta: Meta< typeof ColorGen > = {
36
36
  controls: { expanded: true },
37
37
  docs: { canvas: { sourceState: 'shown' } },
38
38
  },
39
- tags: [ 'status-experimental' ],
40
39
  };
41
40
  export default meta;
42
41
 
@@ -37,7 +37,7 @@ const plugin = {
37
37
  const ext = args.path.match( /(\.[^.]+)$/ )?.[ 1 ] || '.js';
38
38
 
39
39
  return {
40
- contents: addFallbackToVar( source ),
40
+ contents: addFallbackToVar( source, { escapeQuotes: true } ),
41
41
  loader: LOADER_MAP[ ext ] || 'jsx',
42
42
  };
43
43
  } );
@@ -9,21 +9,32 @@
9
9
  * NOTE: The regex and replacement logic here is mirrored in
10
10
  * `ds-token-fallbacks.mjs`. If you update one, update the other to match.
11
11
  *
12
- * @param cssValue A CSS declaration value.
13
- * @param tokenFallbacks Map of CSS variable names to their fallback expressions.
14
- * @return The value with fallbacks injected.
12
+ * @param cssValue A CSS declaration value.
13
+ * @param tokenFallbacks Map of CSS variable names to their fallback expressions.
14
+ * @param options Options.
15
+ * @param options.escapeQuotes When true, escape `"` and `'` in fallback values.
16
+ * Use this when the input is JS/TS source so that
17
+ * injected quotes don't break string literals.
18
+ * @return The value with fallbacks injected.
15
19
  */
16
20
  export function addFallbackToVar(
17
21
  cssValue: string,
18
- tokenFallbacks: Record< string, string >
22
+ tokenFallbacks: Record< string, string >,
23
+ { escapeQuotes = false }: { escapeQuotes?: boolean } = {}
19
24
  ): string {
20
25
  return cssValue.replace(
21
26
  /var\(\s*(--wpds-[\w-]+)\s*\)/g,
22
27
  ( match, tokenName: string ) => {
23
- const fallback = tokenFallbacks[ tokenName ];
24
- return fallback !== undefined
25
- ? `var(${ tokenName }, ${ fallback })`
26
- : match;
28
+ let fallback = tokenFallbacks[ tokenName ];
29
+ if ( fallback === undefined ) {
30
+ return match;
31
+ }
32
+ if ( escapeQuotes ) {
33
+ fallback = fallback
34
+ .replaceAll( '"', '\\"' )
35
+ .replaceAll( "'", "\\'" );
36
+ }
37
+ return `var(${ tokenName }, ${ fallback })`;
27
38
  }
28
39
  );
29
40
  }
@@ -13,17 +13,31 @@ const tokenFallbacks = _tokenFallbacks;
13
13
  * NOTE: The regex and replacement logic here mirrors `add-fallback-to-var.ts`.
14
14
  * If you update one, update the other to match.
15
15
  *
16
- * @param {string} cssValue A CSS declaration value.
17
- * @return {string} The value with fallbacks injected.
16
+ * @param {string} cssValue A CSS declaration value.
17
+ * @param {Object} [options] Options.
18
+ * @param {boolean} [options.escapeQuotes] When true, escape `"` and `'` in
19
+ * fallback values. Use this when the
20
+ * input is JS/TS source so that
21
+ * injected quotes don't break string
22
+ * literals. JS will unescape them at
23
+ * parse time, so the browser's CSS
24
+ * engine still sees the correct value.
25
+ * @return {string} The value with fallbacks injected.
18
26
  */
19
- export function addFallbackToVar( cssValue ) {
27
+ export function addFallbackToVar( cssValue, { escapeQuotes = false } = {} ) {
20
28
  return cssValue.replace(
21
29
  /var\(\s*(--wpds-[\w-]+)\s*\)/g,
22
30
  ( match, tokenName ) => {
23
- const fallback = tokenFallbacks[ tokenName ];
24
- return fallback !== undefined
25
- ? `var(${ tokenName }, ${ fallback })`
26
- : match;
31
+ let fallback = tokenFallbacks[ tokenName ];
32
+ if ( fallback === undefined ) {
33
+ return match;
34
+ }
35
+ if ( escapeQuotes ) {
36
+ fallback = fallback
37
+ .replaceAll( '"', '\\"' )
38
+ .replaceAll( "'", "\\'" );
39
+ }
40
+ return `var(${ tokenName }, ${ fallback })`;
27
41
  }
28
42
  );
29
43
  }
@@ -8,6 +8,9 @@ const mockFallbacks: Record< string, string > = {
8
8
  'var(--wp-admin-theme-color, #3858e9)',
9
9
  '--wpds-color-bg-interactive-brand-strong-active':
10
10
  'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 92%, black)',
11
+ '--wpds-font-family-body':
12
+ '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
13
+ '--wpds-font-family-mono': '"Menlo", "Consolas", monaco, monospace',
11
14
  };
12
15
 
13
16
  describe( 'addFallbackToVar', () => {
@@ -88,4 +91,53 @@ describe( 'addFallbackToVar', () => {
88
91
  const second = addFallbackToVar( first, mockFallbacks );
89
92
  expect( second ).toBe( first );
90
93
  } );
94
+
95
+ describe( 'escapeQuotes', () => {
96
+ it( 'does not escape quotes by default', () => {
97
+ expect(
98
+ addFallbackToVar(
99
+ 'var(--wpds-font-family-body)',
100
+ mockFallbacks
101
+ )
102
+ ).toBe(
103
+ 'var(--wpds-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif)'
104
+ );
105
+ } );
106
+
107
+ it( 'escapes double quotes when enabled', () => {
108
+ expect(
109
+ addFallbackToVar(
110
+ 'var(--wpds-font-family-mono)',
111
+ mockFallbacks,
112
+ { escapeQuotes: true }
113
+ )
114
+ ).toBe(
115
+ 'var(--wpds-font-family-mono, \\"Menlo\\", \\"Consolas\\", monaco, monospace)'
116
+ );
117
+ } );
118
+
119
+ it( 'escapes both double and single quotes in the same value', () => {
120
+ const fallbacks: Record< string, string > = {
121
+ '--wpds-test-token': `"double" and 'single'`,
122
+ };
123
+ const result = addFallbackToVar(
124
+ 'var(--wpds-test-token)',
125
+ fallbacks,
126
+ { escapeQuotes: true }
127
+ );
128
+ expect( result ).toBe(
129
+ `var(--wpds-test-token, \\"double\\" and \\'single\\')`
130
+ );
131
+ } );
132
+
133
+ it( 'leaves values without quotes unchanged when enabled', () => {
134
+ expect(
135
+ addFallbackToVar(
136
+ 'var(--wpds-border-radius-sm)',
137
+ mockFallbacks,
138
+ { escapeQuotes: true }
139
+ )
140
+ ).toBe( 'var(--wpds-border-radius-sm, 2px)' );
141
+ } );
142
+ } );
91
143
  } );
@@ -116,6 +116,12 @@
116
116
  --wpds-dimension-padding-sm: 8px; /* Small padding */
117
117
  --wpds-dimension-padding-xl: 20px; /* Extra large padding */
118
118
  --wpds-dimension-padding-xs: 4px; /* Extra small padding */
119
+ --wpds-dimension-surface-width-2xl: 960px; /* 2x extra large surface width */
120
+ --wpds-dimension-surface-width-lg: 560px; /* Large surface width */
121
+ --wpds-dimension-surface-width-md: 400px; /* Medium surface width */
122
+ --wpds-dimension-surface-width-sm: 320px; /* Small surface width */
123
+ --wpds-dimension-surface-width-xl: 720px; /* Extra large surface width */
124
+ --wpds-dimension-surface-width-xs: 240px; /* Extra small surface width */
119
125
  --wpds-elevation-lg: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
120
126
  0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
121
127
  --wpds-elevation-md: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a,
@@ -195,6 +201,12 @@
195
201
  --wpds-dimension-padding-sm: 8px; /* Small padding */
196
202
  --wpds-dimension-padding-xl: 20px; /* Extra large padding */
197
203
  --wpds-dimension-padding-xs: 4px; /* Extra small padding */
204
+ --wpds-dimension-surface-width-2xl: 960px; /* 2x extra large surface width */
205
+ --wpds-dimension-surface-width-lg: 560px; /* Large surface width */
206
+ --wpds-dimension-surface-width-md: 400px; /* Medium surface width */
207
+ --wpds-dimension-surface-width-sm: 320px; /* Small surface width */
208
+ --wpds-dimension-surface-width-xl: 720px; /* Extra large surface width */
209
+ --wpds-dimension-surface-width-xs: 240px; /* Extra small surface width */
198
210
  }
199
211
 
200
212
  @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {
@@ -127,6 +127,12 @@ export default {
127
127
  '--wpds-dimension-padding-sm': '8px',
128
128
  '--wpds-dimension-padding-xl': '20px',
129
129
  '--wpds-dimension-padding-xs': '4px',
130
+ '--wpds-dimension-surface-width-2xl': '960px',
131
+ '--wpds-dimension-surface-width-lg': '560px',
132
+ '--wpds-dimension-surface-width-md': '400px',
133
+ '--wpds-dimension-surface-width-sm': '320px',
134
+ '--wpds-dimension-surface-width-xl': '720px',
135
+ '--wpds-dimension-surface-width-xs': '240px',
130
136
  '--wpds-elevation-lg':
131
137
  '0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',
132
138
  '--wpds-elevation-md':
@@ -117,6 +117,12 @@ export default [
117
117
  '--wpds-dimension-gap-xl',
118
118
  '--wpds-dimension-gap-2xl',
119
119
  '--wpds-dimension-gap-3xl',
120
+ '--wpds-dimension-surface-width-xs',
121
+ '--wpds-dimension-surface-width-sm',
122
+ '--wpds-dimension-surface-width-md',
123
+ '--wpds-dimension-surface-width-lg',
124
+ '--wpds-dimension-surface-width-xl',
125
+ '--wpds-dimension-surface-width-2xl',
120
126
  '--wpds-elevation-xs',
121
127
  '--wpds-elevation-sm',
122
128
  '--wpds-elevation-md',
@@ -13,6 +13,11 @@ export type PaddingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
13
13
  */
14
14
  export type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
15
15
 
16
+ /**
17
+ * Size scale for surface width tokens.
18
+ */
19
+ export type SurfaceWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
20
+
16
21
  /**
17
22
  * Size scale for border radius tokens.
18
23
  */
@@ -34,7 +34,7 @@ const meta: Meta< typeof ThemeProvider > = {
34
34
  controls: { expanded: true },
35
35
  docs: { canvas: { sourceState: 'shown' } },
36
36
  },
37
- tags: [ 'status-experimental' ],
37
+ tags: [ 'status-private' ],
38
38
  };
39
39
  export default meta;
40
40