@wordpress/theme 0.3.1-next.6deb34194.0 → 0.4.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 (41) hide show
  1. package/README.md +82 -18
  2. package/bin/generate-primitive-tokens/index.ts +26 -33
  3. package/bin/terrazzo-plugin-mode-overrides/index.ts +208 -0
  4. package/build/prebuilt/js/design-tokens.js +17 -1
  5. package/build/prebuilt/js/design-tokens.js.map +2 -2
  6. package/build/prebuilt/ts/color-tokens.js +35 -13
  7. package/build/prebuilt/ts/color-tokens.js.map +2 -2
  8. package/build-module/prebuilt/js/design-tokens.js +17 -1
  9. package/build-module/prebuilt/js/design-tokens.js.map +2 -2
  10. package/build-module/prebuilt/ts/color-tokens.js +35 -13
  11. package/build-module/prebuilt/ts/color-tokens.js.map +2 -2
  12. package/build-types/prebuilt/ts/color-tokens.d.ts.map +1 -1
  13. package/docs/ds-tokens.md +18 -2
  14. package/package.json +5 -5
  15. package/src/prebuilt/css/design-tokens.css +18 -2
  16. package/src/prebuilt/js/design-tokens.js +17 -1
  17. package/src/prebuilt/ts/color-tokens.ts +31 -9
  18. package/terrazzo.config.ts +11 -14
  19. package/tokens/border.json +1 -1
  20. package/tokens/color.json +1160 -630
  21. package/tokens/dimension.json +88 -90
  22. package/tokens/elevation.json +1 -1
  23. package/tokens/modes/border.high-dpi.json +15 -0
  24. package/tokens/modes/dimension.comfortable.json +54 -0
  25. package/tokens/modes/dimension.compact.json +54 -0
  26. package/tokens/typography.json +1 -1
  27. package/tsconfig.bin.tsbuildinfo +1 -1
  28. package/tsconfig.src.tsbuildinfo +1 -1
  29. package/bin/terrazzo-plugin-figma-ds-token-manager/index.ts +0 -217
  30. package/bin/terrazzo-plugin-figma-ds-token-manager/lib.ts +0 -1
  31. package/build/prebuilt/json/figma.json +0 -787
  32. package/build/token-id.js +0 -30
  33. package/build/token-id.js.map +0 -7
  34. package/build-module/prebuilt/json/figma.json +0 -787
  35. package/build-module/token-id.js +0 -6
  36. package/build-module/token-id.js.map +0 -7
  37. package/build-types/token-id.d.ts +0 -9
  38. package/build-types/token-id.d.ts.map +0 -1
  39. package/src/prebuilt/json/figma.json +0 -787
  40. package/src/test/token-id.test.ts +0 -12
  41. package/src/token-id.ts +0 -9
package/build-module/prebuilt/js/design-tokens.js CHANGED
@@ -41,6 +41,15 @@ var design_tokens_default = [
41
41
  "--wpds-color-bg-interactive-brand-weak",
42
42
  "--wpds-color-bg-interactive-brand-weak-active",
43
43
  "--wpds-color-bg-interactive-brand-weak-disabled",
44
+ "--wpds-color-bg-interactive-error",
45
+ "--wpds-color-bg-interactive-error-active",
46
+ "--wpds-color-bg-interactive-error-disabled",
47
+ "--wpds-color-bg-interactive-error-strong",
48
+ "--wpds-color-bg-interactive-error-strong-active",
49
+ "--wpds-color-bg-interactive-error-strong-disabled",
50
+ "--wpds-color-bg-interactive-error-weak",
51
+ "--wpds-color-bg-interactive-error-weak-active",
52
+ "--wpds-color-bg-interactive-error-weak-disabled",
44
53
  "--wpds-color-bg-track-neutral-weak",
45
54
  "--wpds-color-bg-track-neutral",
46
55
  "--wpds-color-bg-thumb-neutral-weak",
@@ -74,6 +83,12 @@ var design_tokens_default = [
74
83
  "--wpds-color-fg-interactive-brand-strong",
75
84
  "--wpds-color-fg-interactive-brand-strong-active",
76
85
  "--wpds-color-fg-interactive-brand-strong-disabled",
86
+ "--wpds-color-fg-interactive-error",
87
+ "--wpds-color-fg-interactive-error-active",
88
+ "--wpds-color-fg-interactive-error-disabled",
89
+ "--wpds-color-fg-interactive-error-strong",
90
+ "--wpds-color-fg-interactive-error-strong-active",
91
+ "--wpds-color-fg-interactive-error-strong-disabled",
77
92
  "--wpds-color-stroke-surface-neutral",
78
93
  "--wpds-color-stroke-surface-neutral-weak",
79
94
  "--wpds-color-stroke-surface-neutral-strong",
@@ -93,7 +108,8 @@ var design_tokens_default = [
93
108
  "--wpds-color-stroke-interactive-neutral-strong",
94
109
  "--wpds-color-stroke-interactive-brand",
95
110
  "--wpds-color-stroke-interactive-brand-active",
96
- "--wpds-color-stroke-interactive-brand-disabled",
111
+ "--wpds-color-stroke-interactive-error",
112
+ "--wpds-color-stroke-interactive-error-active",
97
113
  "--wpds-color-stroke-interactive-error-strong",
98
114
  "--wpds-color-stroke-focus-brand",
99
115
  "--wpds-dimension-base",
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-surface-xs',\n\t'--wpds-border-radius-surface-sm',\n\t'--wpds-border-radius-surface-md',\n\t'--wpds-border-radius-surface-lg',\n\t'--wpds-border-width-surface-xs',\n\t'--wpds-border-width-surface-sm',\n\t'--wpds-border-width-surface-md',\n\t'--wpds-border-width-surface-lg',\n\t'--wpds-border-width-interactive-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-dimension-gap-2xs',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-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;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-surface-xs',\n\t'--wpds-border-radius-surface-sm',\n\t'--wpds-border-radius-surface-md',\n\t'--wpds-border-radius-surface-lg',\n\t'--wpds-border-width-surface-xs',\n\t'--wpds-border-width-surface-sm',\n\t'--wpds-border-width-surface-md',\n\t'--wpds-border-width-surface-lg',\n\t'--wpds-border-width-interactive-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-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-disabled',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-strong-disabled',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-interactive-error-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-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-disabled',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-fg-interactive-error-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-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-surface-2xs',\n\t'--wpds-dimension-padding-surface-xs',\n\t'--wpds-dimension-padding-surface-sm',\n\t'--wpds-dimension-padding-surface-md',\n\t'--wpds-dimension-padding-surface-lg',\n\t'--wpds-dimension-gap-2xs',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-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;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;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/ts/color-tokens.js CHANGED
@@ -2,19 +2,19 @@
2
2
  var color_tokens_default = {
3
3
  "primary-bgFill1": ["bg-interactive-brand-strong"],
4
4
  "primary-fgFill": [
5
- "fg-interactive-brand-strong-active",
6
- "fg-interactive-brand-strong"
5
+ "fg-interactive-brand-strong",
6
+ "fg-interactive-brand-strong-active"
7
7
  ],
8
8
  "primary-bgFill2": ["bg-interactive-brand-strong-active"],
9
9
  "primary-surface2": ["bg-interactive-brand-active"],
10
10
  "primary-surface4": ["bg-interactive-brand-weak-active"],
11
11
  "primary-fgSurface3": [
12
- "fg-interactive-brand-active",
13
- "fg-interactive-brand"
12
+ "fg-interactive-brand",
13
+ "fg-interactive-brand-active"
14
14
  ],
15
15
  "primary-stroke3": [
16
- "bg-thumb-brand-active",
17
16
  "bg-thumb-brand",
17
+ "bg-thumb-brand-active",
18
18
  "stroke-focus-brand",
19
19
  "stroke-interactive-brand",
20
20
  "stroke-surface-brand-strong"
@@ -40,23 +40,44 @@ var color_tokens_default = {
40
40
  "warning-fgSurface3": ["fg-content-warning-weak"],
41
41
  "warning-stroke3": ["stroke-surface-warning-strong"],
42
42
  "warning-stroke1": ["stroke-surface-warning"],
43
- "error-surface2": ["bg-surface-error-weak"],
44
- "error-surface4": ["bg-surface-error"],
43
+ "error-bgFill1": ["bg-interactive-error-strong"],
44
+ "error-fgFill": [
45
+ "fg-interactive-error-strong",
46
+ "fg-interactive-error-strong-active"
47
+ ],
48
+ "error-bgFill2": ["bg-interactive-error-strong-active"],
49
+ "error-surface2": [
50
+ "bg-interactive-error-active",
51
+ "bg-surface-error-weak"
52
+ ],
53
+ "error-surface4": [
54
+ "bg-interactive-error-weak-active",
55
+ "bg-surface-error"
56
+ ],
45
57
  "error-fgSurface4": ["fg-content-error"],
46
- "error-fgSurface3": ["fg-content-error-weak"],
58
+ "error-fgSurface3": [
59
+ "fg-content-error-weak",
60
+ "fg-interactive-error",
61
+ "fg-interactive-error-active"
62
+ ],
47
63
  "error-stroke3": [
64
+ "stroke-interactive-error",
48
65
  "stroke-interactive-error-strong",
49
66
  "stroke-surface-error-strong"
50
67
  ],
68
+ "error-stroke4": ["stroke-interactive-error-active"],
51
69
  "error-stroke1": ["stroke-surface-error"],
52
70
  "bg-surface2": ["bg-surface-neutral"],
53
71
  "bg-surface6": [
54
72
  "bg-interactive-brand-strong-disabled",
73
+ "bg-interactive-error-strong-disabled",
55
74
  "bg-interactive-neutral-strong-disabled"
56
75
  ],
57
76
  "bg-surface5": [
58
77
  "bg-interactive-brand-disabled",
59
78
  "bg-interactive-brand-weak-disabled",
79
+ "bg-interactive-error-disabled",
80
+ "bg-interactive-error-weak-disabled",
60
81
  "bg-interactive-neutral-disabled",
61
82
  "bg-interactive-neutral-weak-disabled"
62
83
  ],
@@ -67,17 +88,19 @@ var color_tokens_default = {
67
88
  "bg-surface3": ["bg-surface-neutral-strong"],
68
89
  "bg-fgSurface4": [
69
90
  "fg-content-neutral",
70
- "fg-interactive-neutral-active",
71
- "fg-interactive-neutral"
91
+ "fg-interactive-neutral",
92
+ "fg-interactive-neutral-active"
72
93
  ],
73
94
  "bg-fgSurface3": [
74
95
  "fg-content-neutral-weak",
75
96
  "fg-interactive-brand-strong-disabled",
97
+ "fg-interactive-error-strong-disabled",
76
98
  "fg-interactive-neutral-strong-disabled",
77
99
  "fg-interactive-neutral-weak"
78
100
  ],
79
101
  "bg-fgSurface2": [
80
102
  "fg-interactive-brand-disabled",
103
+ "fg-interactive-error-disabled",
81
104
  "fg-interactive-neutral-disabled",
82
105
  "fg-interactive-neutral-weak-disabled"
83
106
  ],
@@ -94,7 +117,6 @@ var color_tokens_default = {
94
117
  "bg-stroke2": [
95
118
  "bg-thumb-brand-disabled",
96
119
  "bg-track-neutral",
97
- "stroke-interactive-brand-disabled",
98
120
  "stroke-interactive-neutral-disabled",
99
121
  "stroke-surface-neutral"
100
122
  ],
@@ -102,8 +124,8 @@ var color_tokens_default = {
102
124
  "bg-bgFillInverted2": ["bg-interactive-neutral-strong-active"],
103
125
  "bg-bgFillInverted1": ["bg-interactive-neutral-strong"],
104
126
  "bg-fgFillInverted": [
105
- "fg-interactive-neutral-strong-active",
106
- "fg-interactive-neutral-strong"
127
+ "fg-interactive-neutral-strong",
128
+ "fg-interactive-neutral-strong-active"
107
129
  ],
108
130
  "bg-surface1": ["bg-surface-neutral-weak"],
109
131
  "caution-surface2": ["bg-surface-caution-weak"],
package/build-module/prebuilt/ts/color-tokens.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/prebuilt/ts/color-tokens.ts"],
4
- "sourcesContent": ["/**\n * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'primary-bgFill1': [ 'bg-interactive-brand-strong' ],\n\t'primary-fgFill': [\n\t\t'fg-interactive-brand-strong-active',\n\t\t'fg-interactive-brand-strong',\n\t],\n\t'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ],\n\t'primary-surface2': [ 'bg-interactive-brand-active' ],\n\t'primary-surface4': [ 'bg-interactive-brand-weak-active' ],\n\t'primary-fgSurface3': [\n\t\t'fg-interactive-brand-active',\n\t\t'fg-interactive-brand',\n\t],\n\t'primary-stroke3': [\n\t\t'bg-thumb-brand-active',\n\t\t'bg-thumb-brand',\n\t\t'stroke-focus-brand',\n\t\t'stroke-interactive-brand',\n\t\t'stroke-surface-brand-strong',\n\t],\n\t'primary-stroke4': [ 'stroke-interactive-brand-active' ],\n\t'primary-stroke1': [ 'stroke-surface-brand' ],\n\t'primary-surface1': [ 'bg-surface-brand' ],\n\t'info-surface2': [ 'bg-surface-info-weak' ],\n\t'info-surface4': [ 'bg-surface-info' ],\n\t'info-fgSurface4': [ 'fg-content-info' ],\n\t'info-fgSurface3': [ 'fg-content-info-weak' ],\n\t'info-stroke3': [ 'stroke-surface-info-strong' ],\n\t'info-stroke1': [ 'stroke-surface-info' ],\n\t'success-surface2': [ 'bg-surface-success-weak' ],\n\t'success-surface4': [ 'bg-surface-success' ],\n\t'success-fgSurface4': [ 'fg-content-success' ],\n\t'success-fgSurface3': [ 'fg-content-success-weak' ],\n\t'success-stroke3': [ 'stroke-surface-success-strong' ],\n\t'success-stroke1': [ 'stroke-surface-success' ],\n\t'warning-surface2': [ 'bg-surface-warning-weak' ],\n\t'warning-surface4': [ 'bg-surface-warning' ],\n\t'warning-fgSurface4': [ 'fg-content-warning' ],\n\t'warning-fgSurface3': [ 'fg-content-warning-weak' ],\n\t'warning-stroke3': [ 'stroke-surface-warning-strong' ],\n\t'warning-stroke1': [ 'stroke-surface-warning' ],\n\t'error-surface2': [ 'bg-surface-error-weak' ],\n\t'error-surface4': [ 'bg-surface-error' ],\n\t'error-fgSurface4': [ 'fg-content-error' ],\n\t'error-fgSurface3': [ 'fg-content-error-weak' ],\n\t'error-stroke3': [\n\t\t'stroke-interactive-error-strong',\n\t\t'stroke-surface-error-strong',\n\t],\n\t'error-stroke1': [ 'stroke-surface-error' ],\n\t'bg-surface2': [ 'bg-surface-neutral' ],\n\t'bg-surface6': [\n\t\t'bg-interactive-brand-strong-disabled',\n\t\t'bg-interactive-neutral-strong-disabled',\n\t],\n\t'bg-surface5': [\n\t\t'bg-interactive-brand-disabled',\n\t\t'bg-interactive-brand-weak-disabled',\n\t\t'bg-interactive-neutral-disabled',\n\t\t'bg-interactive-neutral-weak-disabled',\n\t],\n\t'bg-surface4': [\n\t\t'bg-interactive-neutral-active',\n\t\t'bg-interactive-neutral-weak-active',\n\t],\n\t'bg-surface3': [ 'bg-surface-neutral-strong' ],\n\t'bg-fgSurface4': [\n\t\t'fg-content-neutral',\n\t\t'fg-interactive-neutral-active',\n\t\t'fg-interactive-neutral',\n\t],\n\t'bg-fgSurface3': [\n\t\t'fg-content-neutral-weak',\n\t\t'fg-interactive-brand-strong-disabled',\n\t\t'fg-interactive-neutral-strong-disabled',\n\t\t'fg-interactive-neutral-weak',\n\t],\n\t'bg-fgSurface2': [\n\t\t'fg-interactive-brand-disabled',\n\t\t'fg-interactive-neutral-disabled',\n\t\t'fg-interactive-neutral-weak-disabled',\n\t],\n\t'bg-stroke3': [\n\t\t'bg-thumb-neutral-weak',\n\t\t'stroke-interactive-neutral',\n\t\t'stroke-surface-neutral-strong',\n\t],\n\t'bg-stroke4': [\n\t\t'bg-thumb-neutral-weak-active',\n\t\t'stroke-interactive-neutral-active',\n\t\t'stroke-interactive-neutral-strong',\n\t],\n\t'bg-stroke2': [\n\t\t'bg-thumb-brand-disabled',\n\t\t'bg-track-neutral',\n\t\t'stroke-interactive-brand-disabled',\n\t\t'stroke-interactive-neutral-disabled',\n\t\t'stroke-surface-neutral',\n\t],\n\t'bg-stroke1': [ 'bg-track-neutral-weak', 'stroke-surface-neutral-weak' ],\n\t'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ],\n\t'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ],\n\t'bg-fgFillInverted': [\n\t\t'fg-interactive-neutral-strong-active',\n\t\t'fg-interactive-neutral-strong',\n\t],\n\t'bg-surface1': [ 'bg-surface-neutral-weak' ],\n\t'caution-surface2': [ 'bg-surface-caution-weak' ],\n\t'caution-surface4': [ 'bg-surface-caution' ],\n\t'caution-fgSurface4': [ 'fg-content-caution' ],\n\t'caution-fgSurface3': [ 'fg-content-caution-weak' ],\n} as Record< string, string[] >;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/**\n * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'primary-bgFill1': [ 'bg-interactive-brand-strong' ],\n\t'primary-fgFill': [\n\t\t'fg-interactive-brand-strong',\n\t\t'fg-interactive-brand-strong-active',\n\t],\n\t'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ],\n\t'primary-surface2': [ 'bg-interactive-brand-active' ],\n\t'primary-surface4': [ 'bg-interactive-brand-weak-active' ],\n\t'primary-fgSurface3': [\n\t\t'fg-interactive-brand',\n\t\t'fg-interactive-brand-active',\n\t],\n\t'primary-stroke3': [\n\t\t'bg-thumb-brand',\n\t\t'bg-thumb-brand-active',\n\t\t'stroke-focus-brand',\n\t\t'stroke-interactive-brand',\n\t\t'stroke-surface-brand-strong',\n\t],\n\t'primary-stroke4': [ 'stroke-interactive-brand-active' ],\n\t'primary-stroke1': [ 'stroke-surface-brand' ],\n\t'primary-surface1': [ 'bg-surface-brand' ],\n\t'info-surface2': [ 'bg-surface-info-weak' ],\n\t'info-surface4': [ 'bg-surface-info' ],\n\t'info-fgSurface4': [ 'fg-content-info' ],\n\t'info-fgSurface3': [ 'fg-content-info-weak' ],\n\t'info-stroke3': [ 'stroke-surface-info-strong' ],\n\t'info-stroke1': [ 'stroke-surface-info' ],\n\t'success-surface2': [ 'bg-surface-success-weak' ],\n\t'success-surface4': [ 'bg-surface-success' ],\n\t'success-fgSurface4': [ 'fg-content-success' ],\n\t'success-fgSurface3': [ 'fg-content-success-weak' ],\n\t'success-stroke3': [ 'stroke-surface-success-strong' ],\n\t'success-stroke1': [ 'stroke-surface-success' ],\n\t'warning-surface2': [ 'bg-surface-warning-weak' ],\n\t'warning-surface4': [ 'bg-surface-warning' ],\n\t'warning-fgSurface4': [ 'fg-content-warning' ],\n\t'warning-fgSurface3': [ 'fg-content-warning-weak' ],\n\t'warning-stroke3': [ 'stroke-surface-warning-strong' ],\n\t'warning-stroke1': [ 'stroke-surface-warning' ],\n\t'error-bgFill1': [ 'bg-interactive-error-strong' ],\n\t'error-fgFill': [\n\t\t'fg-interactive-error-strong',\n\t\t'fg-interactive-error-strong-active',\n\t],\n\t'error-bgFill2': [ 'bg-interactive-error-strong-active' ],\n\t'error-surface2': [\n\t\t'bg-interactive-error-active',\n\t\t'bg-surface-error-weak',\n\t],\n\t'error-surface4': [\n\t\t'bg-interactive-error-weak-active',\n\t\t'bg-surface-error',\n\t],\n\t'error-fgSurface4': [ 'fg-content-error' ],\n\t'error-fgSurface3': [\n\t\t'fg-content-error-weak',\n\t\t'fg-interactive-error',\n\t\t'fg-interactive-error-active',\n\t],\n\t'error-stroke3': [\n\t\t'stroke-interactive-error',\n\t\t'stroke-interactive-error-strong',\n\t\t'stroke-surface-error-strong',\n\t],\n\t'error-stroke4': [ 'stroke-interactive-error-active' ],\n\t'error-stroke1': [ 'stroke-surface-error' ],\n\t'bg-surface2': [ 'bg-surface-neutral' ],\n\t'bg-surface6': [\n\t\t'bg-interactive-brand-strong-disabled',\n\t\t'bg-interactive-error-strong-disabled',\n\t\t'bg-interactive-neutral-strong-disabled',\n\t],\n\t'bg-surface5': [\n\t\t'bg-interactive-brand-disabled',\n\t\t'bg-interactive-brand-weak-disabled',\n\t\t'bg-interactive-error-disabled',\n\t\t'bg-interactive-error-weak-disabled',\n\t\t'bg-interactive-neutral-disabled',\n\t\t'bg-interactive-neutral-weak-disabled',\n\t],\n\t'bg-surface4': [\n\t\t'bg-interactive-neutral-active',\n\t\t'bg-interactive-neutral-weak-active',\n\t],\n\t'bg-surface3': [ 'bg-surface-neutral-strong' ],\n\t'bg-fgSurface4': [\n\t\t'fg-content-neutral',\n\t\t'fg-interactive-neutral',\n\t\t'fg-interactive-neutral-active',\n\t],\n\t'bg-fgSurface3': [\n\t\t'fg-content-neutral-weak',\n\t\t'fg-interactive-brand-strong-disabled',\n\t\t'fg-interactive-error-strong-disabled',\n\t\t'fg-interactive-neutral-strong-disabled',\n\t\t'fg-interactive-neutral-weak',\n\t],\n\t'bg-fgSurface2': [\n\t\t'fg-interactive-brand-disabled',\n\t\t'fg-interactive-error-disabled',\n\t\t'fg-interactive-neutral-disabled',\n\t\t'fg-interactive-neutral-weak-disabled',\n\t],\n\t'bg-stroke3': [\n\t\t'bg-thumb-neutral-weak',\n\t\t'stroke-interactive-neutral',\n\t\t'stroke-surface-neutral-strong',\n\t],\n\t'bg-stroke4': [\n\t\t'bg-thumb-neutral-weak-active',\n\t\t'stroke-interactive-neutral-active',\n\t\t'stroke-interactive-neutral-strong',\n\t],\n\t'bg-stroke2': [\n\t\t'bg-thumb-brand-disabled',\n\t\t'bg-track-neutral',\n\t\t'stroke-interactive-neutral-disabled',\n\t\t'stroke-surface-neutral',\n\t],\n\t'bg-stroke1': [ 'bg-track-neutral-weak', 'stroke-surface-neutral-weak' ],\n\t'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ],\n\t'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ],\n\t'bg-fgFillInverted': [\n\t\t'fg-interactive-neutral-strong',\n\t\t'fg-interactive-neutral-strong-active',\n\t],\n\t'bg-surface1': [ 'bg-surface-neutral-weak' ],\n\t'caution-surface2': [ 'bg-surface-caution-weak' ],\n\t'caution-surface4': [ 'bg-surface-caution' ],\n\t'caution-fgSurface4': [ 'fg-content-caution' ],\n\t'caution-fgSurface3': [ 'fg-content-caution-weak' ],\n} as Record< string, string[] >;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/build-types/prebuilt/ts/color-tokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"color-tokens.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/color-tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;wBAiHE,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,CAAE;AA/G/B,wBA+GgC"}
1
+ {"version":3,"file":"color-tokens.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/color-tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;wBAuIE,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,CAAE;AArI/B,wBAqIgC"}
package/docs/ds-tokens.md CHANGED
@@ -57,6 +57,15 @@ Do not edit directly.
57
57
  | `--wpds-color-bg-interactive-brand-weak` | Background color for interactive elements with brand tone and weak emphasis. |
58
58
  | `--wpds-color-bg-interactive-brand-weak-active` | Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. |
59
59
  | `--wpds-color-bg-interactive-brand-weak-disabled` | Background color for interactive elements with brand tone and weak emphasis, in their disabled state. |
60
+ | `--wpds-color-bg-interactive-error` | Background color for interactive elements with error tone and normal emphasis. |
61
+ | `--wpds-color-bg-interactive-error-active` | Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. |
62
+ | `--wpds-color-bg-interactive-error-disabled` | Background color for interactive elements with error tone and normal emphasis, in their disabled state. |
63
+ | `--wpds-color-bg-interactive-error-strong` | Background color for interactive elements with error tone and strong emphasis. |
64
+ | `--wpds-color-bg-interactive-error-strong-active` | Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. |
65
+ | `--wpds-color-bg-interactive-error-strong-disabled` | Background color for interactive elements with error tone and strong emphasis, in their disabled state. |
66
+ | `--wpds-color-bg-interactive-error-weak` | Background color for interactive elements with error tone and weak emphasis. |
67
+ | `--wpds-color-bg-interactive-error-weak-active` | Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. |
68
+ | `--wpds-color-bg-interactive-error-weak-disabled` | Background color for interactive elements with error tone and weak emphasis, in their disabled state. |
60
69
  | `--wpds-color-bg-track-neutral-weak` | Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). |
61
70
  | `--wpds-color-bg-track-neutral` | Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). |
62
71
  | `--wpds-color-bg-thumb-neutral-weak` | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). |
@@ -90,11 +99,17 @@ Do not edit directly.
90
99
  | `--wpds-color-fg-interactive-brand-strong` | Foreground color for interactive elements with brand tone and strong emphasis. |
91
100
  | `--wpds-color-fg-interactive-brand-strong-active` | Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. |
92
101
  | `--wpds-color-fg-interactive-brand-strong-disabled` | Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. |
102
+ | `--wpds-color-fg-interactive-error` | Foreground color for interactive elements with error tone and normal emphasis. |
103
+ | `--wpds-color-fg-interactive-error-active` | Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. |
104
+ | `--wpds-color-fg-interactive-error-disabled` | Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. |
105
+ | `--wpds-color-fg-interactive-error-strong` | Foreground color for interactive elements with error tone and strong emphasis. |
106
+ | `--wpds-color-fg-interactive-error-strong-active` | Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. |
107
+ | `--wpds-color-fg-interactive-error-strong-disabled` | Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. |
93
108
  | `--wpds-color-stroke-surface-neutral` | Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. |
94
109
  | `--wpds-color-stroke-surface-neutral-weak` | Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. |
95
110
  | `--wpds-color-stroke-surface-neutral-strong` | Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. |
96
111
  | `--wpds-color-stroke-surface-brand` | Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. |
97
- | `--wpds-color-stroke-surface-brand-strong` | Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. |
112
+ | `--wpds-color-stroke-surface-brand-strong` | Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. |
98
113
  | `--wpds-color-stroke-surface-success` | Decorative stroke color used to define success-toned surface boundaries with normal emphasis. |
99
114
  | `--wpds-color-stroke-surface-success-strong` | Decorative stroke color used to define success-toned surface boundaries with strong emphasis. |
100
115
  | `--wpds-color-stroke-surface-info` | Decorative stroke color used to define info-toned surface boundaries with normal emphasis. |
@@ -109,7 +124,8 @@ Do not edit directly.
109
124
  | `--wpds-color-stroke-interactive-neutral-strong` | Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. |
110
125
  | `--wpds-color-stroke-interactive-brand` | Accessible stroke color used for interactive brand-toned elements with normal emphasis. |
111
126
  | `--wpds-color-stroke-interactive-brand-active` | Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. |
112
- | `--wpds-color-stroke-interactive-brand-disabled` | Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. |
127
+ | `--wpds-color-stroke-interactive-error` | Accessible stroke color used for interactive error-toned elements with normal emphasis. |
128
+ | `--wpds-color-stroke-interactive-error-active` | Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. |
113
129
  | `--wpds-color-stroke-interactive-error-strong` | Accessible stroke color used for interactive error-toned elements with strong emphasis. |
114
130
  | `--wpds-color-stroke-focus-brand` | Accessible stroke color applied to focus rings. |
115
131
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/theme",
3
- "version": "0.3.1-next.6deb34194.0",
3
+ "version": "0.4.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.36.1-next.6deb34194.0",
47
- "@wordpress/private-apis": "^1.36.1-next.6deb34194.0",
46
+ "@wordpress/element": "^6.37.0",
47
+ "@wordpress/private-apis": "^1.37.0",
48
48
  "colorjs.io": "^0.5.2",
49
49
  "memize": "^2.1.0"
50
50
  },
@@ -62,7 +62,7 @@
62
62
  "build:default-ramps": "node --import=esbuild-esm-loader/register bin/generate-default-ramps/index.ts",
63
63
  "build:tokens": "node --import=esbuild-esm-loader/register bin/generate-primitive-tokens/index.ts && cross-env NODE_OPTIONS=--import=esbuild-esm-loader/register tz build --config terrazzo.config.ts",
64
64
  "build": "npm run build:tokens && npm run build:default-ramps",
65
- "postbuild": "prettier --write tokens/color.json src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
65
+ "postbuild": "prettier --write tokens/color.json tokens/modes src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
66
66
  },
67
- "gitHead": "457096e9e9b3896d2d4fe54fc19d7fb571ee9a44"
67
+ "gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
68
68
  }
package/src/prebuilt/css/design-tokens.css CHANGED
@@ -21,6 +21,15 @@
21
21
  --wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
22
22
  --wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
23
23
  --wpds-color-bg-interactive-brand-weak-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
24
+ --wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
25
+ --wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
26
+ --wpds-color-bg-interactive-error-disabled: #e2e2e2; /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
27
+ --wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
28
+ --wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
29
+ --wpds-color-bg-interactive-error-strong-disabled: #d2d2d2; /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
30
+ --wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
31
+ --wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
32
+ --wpds-color-bg-interactive-error-weak-disabled: #e2e2e2; /* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */
24
33
  --wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */
25
34
  --wpds-color-bg-interactive-neutral-active: #eaeaea; /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
26
35
  --wpds-color-bg-interactive-neutral-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -69,6 +78,12 @@
69
78
  --wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
70
79
  --wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
71
80
  --wpds-color-fg-interactive-brand-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
81
+ --wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
82
+ --wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
83
+ --wpds-color-fg-interactive-error-disabled: #8a8a8a; /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
84
+ --wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
85
+ --wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
86
+ --wpds-color-fg-interactive-error-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */
72
87
  --wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
73
88
  --wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
74
89
  --wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -80,14 +95,15 @@
80
95
  --wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */
81
96
  --wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
82
97
  --wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
83
- --wpds-color-stroke-interactive-brand-disabled: #d8d8d8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
98
+ --wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
99
+ --wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
84
100
  --wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
85
101
  --wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
86
102
  --wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
87
103
  --wpds-color-stroke-interactive-neutral-disabled: #d8d8d8; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
88
104
  --wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
89
105
  --wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
90
- --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
106
+ --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
91
107
  --wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
92
108
  --wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
93
109
  --wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
package/src/prebuilt/js/design-tokens.js CHANGED
@@ -45,6 +45,15 @@ export default [
45
45
  '--wpds-color-bg-interactive-brand-weak',
46
46
  '--wpds-color-bg-interactive-brand-weak-active',
47
47
  '--wpds-color-bg-interactive-brand-weak-disabled',
48
+ '--wpds-color-bg-interactive-error',
49
+ '--wpds-color-bg-interactive-error-active',
50
+ '--wpds-color-bg-interactive-error-disabled',
51
+ '--wpds-color-bg-interactive-error-strong',
52
+ '--wpds-color-bg-interactive-error-strong-active',
53
+ '--wpds-color-bg-interactive-error-strong-disabled',
54
+ '--wpds-color-bg-interactive-error-weak',
55
+ '--wpds-color-bg-interactive-error-weak-active',
56
+ '--wpds-color-bg-interactive-error-weak-disabled',
48
57
  '--wpds-color-bg-track-neutral-weak',
49
58
  '--wpds-color-bg-track-neutral',
50
59
  '--wpds-color-bg-thumb-neutral-weak',
@@ -78,6 +87,12 @@ export default [
78
87
  '--wpds-color-fg-interactive-brand-strong',
79
88
  '--wpds-color-fg-interactive-brand-strong-active',
80
89
  '--wpds-color-fg-interactive-brand-strong-disabled',
90
+ '--wpds-color-fg-interactive-error',
91
+ '--wpds-color-fg-interactive-error-active',
92
+ '--wpds-color-fg-interactive-error-disabled',
93
+ '--wpds-color-fg-interactive-error-strong',
94
+ '--wpds-color-fg-interactive-error-strong-active',
95
+ '--wpds-color-fg-interactive-error-strong-disabled',
81
96
  '--wpds-color-stroke-surface-neutral',
82
97
  '--wpds-color-stroke-surface-neutral-weak',
83
98
  '--wpds-color-stroke-surface-neutral-strong',
@@ -97,7 +112,8 @@ export default [
97
112
  '--wpds-color-stroke-interactive-neutral-strong',
98
113
  '--wpds-color-stroke-interactive-brand',
99
114
  '--wpds-color-stroke-interactive-brand-active',
100
- '--wpds-color-stroke-interactive-brand-disabled',
115
+ '--wpds-color-stroke-interactive-error',
116
+ '--wpds-color-stroke-interactive-error-active',
101
117
  '--wpds-color-stroke-interactive-error-strong',
102
118
  '--wpds-color-stroke-focus-brand',
103
119
  '--wpds-dimension-base',
package/src/prebuilt/ts/color-tokens.ts CHANGED
@@ -6,19 +6,19 @@
6
6
  export default {
7
7
  'primary-bgFill1': [ 'bg-interactive-brand-strong' ],
8
8
  'primary-fgFill': [
9
- 'fg-interactive-brand-strong-active',
10
9
  'fg-interactive-brand-strong',
10
+ 'fg-interactive-brand-strong-active',
11
11
  ],
12
12
  'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ],
13
13
  'primary-surface2': [ 'bg-interactive-brand-active' ],
14
14
  'primary-surface4': [ 'bg-interactive-brand-weak-active' ],
15
15
  'primary-fgSurface3': [
16
- 'fg-interactive-brand-active',
17
16
  'fg-interactive-brand',
17
+ 'fg-interactive-brand-active',
18
18
  ],
19
19
  'primary-stroke3': [
20
- 'bg-thumb-brand-active',
21
20
  'bg-thumb-brand',
21
+ 'bg-thumb-brand-active',
22
22
  'stroke-focus-brand',
23
23
  'stroke-interactive-brand',
24
24
  'stroke-surface-brand-strong',
@@ -44,23 +44,44 @@ export default {
44
44
  'warning-fgSurface3': [ 'fg-content-warning-weak' ],
45
45
  'warning-stroke3': [ 'stroke-surface-warning-strong' ],
46
46
  'warning-stroke1': [ 'stroke-surface-warning' ],
47
- 'error-surface2': [ 'bg-surface-error-weak' ],
48
- 'error-surface4': [ 'bg-surface-error' ],
47
+ 'error-bgFill1': [ 'bg-interactive-error-strong' ],
48
+ 'error-fgFill': [
49
+ 'fg-interactive-error-strong',
50
+ 'fg-interactive-error-strong-active',
51
+ ],
52
+ 'error-bgFill2': [ 'bg-interactive-error-strong-active' ],
53
+ 'error-surface2': [
54
+ 'bg-interactive-error-active',
55
+ 'bg-surface-error-weak',
56
+ ],
57
+ 'error-surface4': [
58
+ 'bg-interactive-error-weak-active',
59
+ 'bg-surface-error',
60
+ ],
49
61
  'error-fgSurface4': [ 'fg-content-error' ],
50
- 'error-fgSurface3': [ 'fg-content-error-weak' ],
62
+ 'error-fgSurface3': [
63
+ 'fg-content-error-weak',
64
+ 'fg-interactive-error',
65
+ 'fg-interactive-error-active',
66
+ ],
51
67
  'error-stroke3': [
68
+ 'stroke-interactive-error',
52
69
  'stroke-interactive-error-strong',
53
70
  'stroke-surface-error-strong',
54
71
  ],
72
+ 'error-stroke4': [ 'stroke-interactive-error-active' ],
55
73
  'error-stroke1': [ 'stroke-surface-error' ],
56
74
  'bg-surface2': [ 'bg-surface-neutral' ],
57
75
  'bg-surface6': [
58
76
  'bg-interactive-brand-strong-disabled',
77
+ 'bg-interactive-error-strong-disabled',
59
78
  'bg-interactive-neutral-strong-disabled',
60
79
  ],
61
80
  'bg-surface5': [
62
81
  'bg-interactive-brand-disabled',
63
82
  'bg-interactive-brand-weak-disabled',
83
+ 'bg-interactive-error-disabled',
84
+ 'bg-interactive-error-weak-disabled',
64
85
  'bg-interactive-neutral-disabled',
65
86
  'bg-interactive-neutral-weak-disabled',
66
87
  ],
@@ -71,17 +92,19 @@ export default {
71
92
  'bg-surface3': [ 'bg-surface-neutral-strong' ],
72
93
  'bg-fgSurface4': [
73
94
  'fg-content-neutral',
74
- 'fg-interactive-neutral-active',
75
95
  'fg-interactive-neutral',
96
+ 'fg-interactive-neutral-active',
76
97
  ],
77
98
  'bg-fgSurface3': [
78
99
  'fg-content-neutral-weak',
79
100
  'fg-interactive-brand-strong-disabled',
101
+ 'fg-interactive-error-strong-disabled',
80
102
  'fg-interactive-neutral-strong-disabled',
81
103
  'fg-interactive-neutral-weak',
82
104
  ],
83
105
  'bg-fgSurface2': [
84
106
  'fg-interactive-brand-disabled',
107
+ 'fg-interactive-error-disabled',
85
108
  'fg-interactive-neutral-disabled',
86
109
  'fg-interactive-neutral-weak-disabled',
87
110
  ],
@@ -98,7 +121,6 @@ export default {
98
121
  'bg-stroke2': [
99
122
  'bg-thumb-brand-disabled',
100
123
  'bg-track-neutral',
101
- 'stroke-interactive-brand-disabled',
102
124
  'stroke-interactive-neutral-disabled',
103
125
  'stroke-surface-neutral',
104
126
  ],
@@ -106,8 +128,8 @@ export default {
106
128
  'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ],
107
129
  'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ],
108
130
  'bg-fgFillInverted': [
109
- 'fg-interactive-neutral-strong-active',
110
131
  'fg-interactive-neutral-strong',
132
+ 'fg-interactive-neutral-strong-active',
111
133
  ],
112
134
  'bg-surface1': [ 'bg-surface-neutral-weak' ],
113
135
  'caution-surface2': [ 'bg-surface-caution-weak' ],
package/terrazzo.config.ts CHANGED
@@ -8,11 +8,10 @@ import { makeCSSVar } from '@terrazzo/token-tools/css';
8
8
  /**
9
9
  * Internal dependencies
10
10
  */
11
- import pluginFigmaDsTokenManager from './bin/terrazzo-plugin-figma-ds-token-manager/index';
11
+ import pluginModeOverrides from './bin/terrazzo-plugin-mode-overrides/index';
12
12
  import pluginKnownWpdsCssVariables from './bin/terrazzo-plugin-known-wpds-css-variables/index';
13
13
  import pluginDsTokenDocs from './bin/terrazzo-plugin-ds-tokens-docs/index';
14
14
  import inlineAliasValues from './bin/terrazzo-plugin-inline-alias-values/index';
15
- import { publicTokenId } from './src/token-id.ts';
16
15
 
17
16
  export default defineConfig( {
18
17
  tokens: [
@@ -26,36 +25,36 @@ export default defineConfig( {
26
25
 
27
26
  plugins: [
28
27
  inlineAliasValues( {
29
- pattern: /^color\.primitive\./,
28
+ pattern: /^wpds-color\.primitive\./,
30
29
  filename: 'ts/color-tokens.ts',
31
30
  tokenId: ( tokenId ) =>
32
- publicTokenId( tokenId )
33
- .replace( /^color\./, '' )
31
+ tokenId
32
+ .replace( /\.primitive/, '' )
33
+ .replace( /^wpds-color\./, '' )
34
34
  .replace( /\./g, '-' ),
35
35
  } ),
36
- inlineAliasValues( { pattern: /^dimension\.primitive\./ } ),
36
+ inlineAliasValues( { pattern: /^wpds-dimension\.primitive\./ } ),
37
37
  pluginCSS( {
38
38
  filename: 'css/design-tokens.css',
39
- variableName: ( token ) =>
40
- makeCSSVar( `wpds.${ publicTokenId( token.id ) }` ),
39
+ variableName: ( token ) => makeCSSVar( token.id ),
41
40
  baseSelector: ':root',
42
41
  modeSelectors: [
43
42
  {
44
- tokens: [ 'dimension.*' ],
43
+ tokens: [ 'wpds-dimension.*' ],
45
44
  mode: '.',
46
45
  selectors: [
47
46
  "[data-wpds-theme-provider-id][data-wpds-density='default']",
48
47
  ],
49
48
  },
50
49
  {
51
- tokens: [ 'dimension.*' ],
50
+ tokens: [ 'wpds-dimension.*' ],
52
51
  mode: 'compact',
53
52
  selectors: [
54
53
  "[data-wpds-theme-provider-id][data-wpds-density='compact']",
55
54
  ],
56
55
  },
57
56
  {
58
- tokens: [ 'dimension.*' ],
57
+ tokens: [ 'wpds-dimension.*' ],
59
58
  mode: 'comfortable',
60
59
  selectors: [
61
60
  "[data-wpds-theme-provider-id][data-wpds-density='comfortable']",
@@ -70,15 +69,13 @@ export default defineConfig( {
70
69
  ],
71
70
  legacyHex: true,
72
71
  } ),
73
- pluginFigmaDsTokenManager( {
74
- filename: 'json/figma.json',
75
- } ),
76
72
  pluginKnownWpdsCssVariables( {
77
73
  filename: 'js/design-tokens.js',
78
74
  } ),
79
75
  pluginDsTokenDocs( {
80
76
  filename: '../../docs/ds-tokens.md',
81
77
  } ),
78
+ pluginModeOverrides(),
82
79
  ],
83
80
 
84
81
  // Linter rules current error when multiple entry files are used
package/tokens/border.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "border": {
2
+ "wpds-border": {
3
3
  "$type": "dimension",
4
4
  "radius": {
5
5
  "surface": {