@wordpress/theme 0.1.1-next.2f1c7c01b.0 → 0.2.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 (91) hide show
  1. package/bin/terrazzo-plugin-ds-tokens-docs/index.ts +5 -24
  2. package/bin/terrazzo-plugin-inline-alias-values/index.ts +84 -0
  3. package/bin/terrazzo-plugin-known-wpds-css-variables/index.ts +19 -39
  4. package/build/color-ramps/lib/constants.js +4 -4
  5. package/build/color-ramps/lib/constants.js.map +2 -2
  6. package/build/color-ramps/lib/default-ramps.js +82 -82
  7. package/build/color-ramps/lib/default-ramps.js.map +1 -1
  8. package/build/color-ramps/lib/find-color-with-constraints.js +36 -53
  9. package/build/color-ramps/lib/find-color-with-constraints.js.map +2 -2
  10. package/build/color-ramps/lib/index.js +64 -63
  11. package/build/color-ramps/lib/index.js.map +2 -2
  12. package/build/color-ramps/lib/ramp-configs.js +3 -3
  13. package/build/color-ramps/lib/ramp-configs.js.map +1 -1
  14. package/build/color-ramps/lib/utils.js +63 -2
  15. package/build/color-ramps/lib/utils.js.map +2 -2
  16. package/build/prebuilt/js/design-tokens.js +5 -10
  17. package/build/prebuilt/js/design-tokens.js.map +2 -2
  18. package/build/prebuilt/json/figma.json +105 -905
  19. package/build/prebuilt/ts/color-tokens.js +137 -0
  20. package/build/prebuilt/ts/color-tokens.js.map +7 -0
  21. package/build/token-id.js +30 -0
  22. package/build/token-id.js.map +7 -0
  23. package/build/use-theme-provider-styles.js +18 -27
  24. package/build/use-theme-provider-styles.js.map +3 -3
  25. package/build-module/color-ramps/lib/constants.js +3 -3
  26. package/build-module/color-ramps/lib/constants.js.map +2 -2
  27. package/build-module/color-ramps/lib/default-ramps.js +82 -82
  28. package/build-module/color-ramps/lib/default-ramps.js.map +1 -1
  29. package/build-module/color-ramps/lib/find-color-with-constraints.js +38 -60
  30. package/build-module/color-ramps/lib/find-color-with-constraints.js.map +2 -2
  31. package/build-module/color-ramps/lib/index.js +68 -65
  32. package/build-module/color-ramps/lib/index.js.map +2 -2
  33. package/build-module/color-ramps/lib/ramp-configs.js +3 -3
  34. package/build-module/color-ramps/lib/ramp-configs.js.map +1 -1
  35. package/build-module/color-ramps/lib/utils.js +63 -2
  36. package/build-module/color-ramps/lib/utils.js.map +2 -2
  37. package/build-module/prebuilt/js/design-tokens.js +5 -10
  38. package/build-module/prebuilt/js/design-tokens.js.map +2 -2
  39. package/build-module/prebuilt/json/figma.json +105 -905
  40. package/build-module/prebuilt/ts/color-tokens.js +117 -0
  41. package/build-module/prebuilt/ts/color-tokens.js.map +7 -0
  42. package/build-module/token-id.js +6 -0
  43. package/build-module/token-id.js.map +7 -0
  44. package/build-module/use-theme-provider-styles.js +18 -27
  45. package/build-module/use-theme-provider-styles.js.map +2 -2
  46. package/build-types/color-ramps/lib/constants.d.ts +2 -2
  47. package/build-types/color-ramps/lib/constants.d.ts.map +1 -1
  48. package/build-types/color-ramps/lib/find-color-with-constraints.d.ts +2 -3
  49. package/build-types/color-ramps/lib/find-color-with-constraints.d.ts.map +1 -1
  50. package/build-types/color-ramps/lib/index.d.ts.map +1 -1
  51. package/build-types/color-ramps/lib/utils.d.ts +21 -2
  52. package/build-types/color-ramps/lib/utils.d.ts.map +1 -1
  53. package/build-types/color-ramps/stories/index.story.d.ts.map +1 -1
  54. package/build-types/prebuilt/ts/color-tokens.d.ts +7 -0
  55. package/build-types/prebuilt/ts/color-tokens.d.ts.map +1 -0
  56. package/build-types/stories/index.story.d.ts.map +1 -1
  57. package/build-types/theme-provider.d.ts.map +1 -1
  58. package/build-types/token-id.d.ts +9 -0
  59. package/build-types/token-id.d.ts.map +1 -0
  60. package/build-types/use-theme-provider-styles.d.ts.map +1 -1
  61. package/docs/ds-tokens.md +10 -178
  62. package/package.json +4 -4
  63. package/src/color-ramps/lib/constants.ts +7 -5
  64. package/src/color-ramps/lib/default-ramps.ts +82 -82
  65. package/src/color-ramps/lib/find-color-with-constraints.ts +53 -77
  66. package/src/color-ramps/lib/index.ts +98 -102
  67. package/src/color-ramps/lib/ramp-configs.ts +3 -3
  68. package/src/color-ramps/lib/utils.ts +109 -5
  69. package/src/color-ramps/test/__snapshots__/index.test.ts.snap +45706 -360
  70. package/src/color-ramps/test/index.test.ts +41 -14
  71. package/src/prebuilt/css/design-tokens.css +88 -413
  72. package/src/prebuilt/js/design-tokens.js +5 -10
  73. package/src/prebuilt/json/figma.json +105 -905
  74. package/src/prebuilt/ts/color-tokens.ts +117 -0
  75. package/src/stories/index.story.tsx +4 -18
  76. package/src/test/token-id.test.ts +12 -0
  77. package/src/token-id.ts +9 -0
  78. package/src/use-theme-provider-styles.ts +20 -35
  79. package/terrazzo.config.ts +15 -12
  80. package/tokens/color.json +82 -82
  81. package/tokens/dimension.json +75 -0
  82. package/tsconfig.bin.tsbuildinfo +1 -1
  83. package/tsconfig.src.tsbuildinfo +1 -1
  84. package/build/prebuilt/ts/design-tokens.js +0 -391
  85. package/build/prebuilt/ts/design-tokens.js.map +0 -7
  86. package/build-module/prebuilt/ts/design-tokens.js +0 -371
  87. package/build-module/prebuilt/ts/design-tokens.js.map +0 -7
  88. package/build-types/prebuilt/ts/design-tokens.d.ts +0 -7
  89. package/build-types/prebuilt/ts/design-tokens.d.ts.map +0 -1
  90. package/src/prebuilt/ts/design-tokens.ts +0 -371
  91. package/tokens/spacing.json +0 -45
package/src/prebuilt/ts/design-tokens.ts DELETED
@@ -1,371 +0,0 @@
1
- /**
2
- * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.
3
- * Do not edit this file directly.
4
- */
5
-
6
- export default {
7
- '--wpds-border-radius-x-small': {
8
- '.': '1px',
9
- },
10
- '--wpds-border-radius-small': {
11
- '.': '2px',
12
- },
13
- '--wpds-border-radius-medium': {
14
- '.': '4px',
15
- },
16
- '--wpds-border-radius-large': {
17
- '.': '8px',
18
- },
19
- '--wpds-border-width-focus': {
20
- '.': '2px',
21
- 'high-dpi': '1.5px',
22
- },
23
- '--wpds-color-bg-surface-neutral': {
24
- '.': 'var(--wpds-color-private-bg-surface2)',
25
- },
26
- '--wpds-color-bg-surface-neutral-strong': {
27
- '.': 'var(--wpds-color-private-bg-surface3)',
28
- },
29
- '--wpds-color-bg-surface-neutral-weak': {
30
- '.': 'var(--wpds-color-private-bg-surface1)',
31
- },
32
- '--wpds-color-bg-surface-brand': {
33
- '.': 'var(--wpds-color-private-primary-surface1)',
34
- },
35
- '--wpds-color-bg-surface-success': {
36
- '.': 'var(--wpds-color-private-success-surface4)',
37
- },
38
- '--wpds-color-bg-surface-success-weak': {
39
- '.': 'var(--wpds-color-private-success-surface2)',
40
- },
41
- '--wpds-color-bg-surface-info': {
42
- '.': 'var(--wpds-color-private-info-surface4)',
43
- },
44
- '--wpds-color-bg-surface-info-weak': {
45
- '.': 'var(--wpds-color-private-info-surface2)',
46
- },
47
- '--wpds-color-bg-surface-warning': {
48
- '.': 'var(--wpds-color-private-warning-surface4)',
49
- },
50
- '--wpds-color-bg-surface-warning-weak': {
51
- '.': 'var(--wpds-color-private-warning-surface2)',
52
- },
53
- '--wpds-color-bg-surface-caution': {
54
- '.': 'var(--wpds-color-private-caution-surface4)',
55
- },
56
- '--wpds-color-bg-surface-caution-weak': {
57
- '.': 'var(--wpds-color-private-caution-surface2)',
58
- },
59
- '--wpds-color-bg-surface-error': {
60
- '.': 'var(--wpds-color-private-error-surface4)',
61
- },
62
- '--wpds-color-bg-surface-error-weak': {
63
- '.': 'var(--wpds-color-private-error-surface2)',
64
- },
65
- '--wpds-color-bg-interactive-neutral': {
66
- '.': '#00000000',
67
- },
68
- '--wpds-color-bg-interactive-neutral-active': {
69
- '.': 'var(--wpds-color-private-bg-surface4)',
70
- },
71
- '--wpds-color-bg-interactive-neutral-disabled': {
72
- '.': 'var(--wpds-color-private-bg-surface5)',
73
- },
74
- '--wpds-color-bg-interactive-neutral-strong': {
75
- '.': 'var(--wpds-color-private-bg-bg-fill-inverted1)',
76
- },
77
- '--wpds-color-bg-interactive-neutral-strong-active': {
78
- '.': 'var(--wpds-color-private-bg-bg-fill-inverted2)',
79
- },
80
- '--wpds-color-bg-interactive-neutral-strong-disabled': {
81
- '.': 'var(--wpds-color-private-bg-surface6)',
82
- },
83
- '--wpds-color-bg-interactive-neutral-weak': {
84
- '.': '#00000000',
85
- },
86
- '--wpds-color-bg-interactive-neutral-weak-active': {
87
- '.': 'var(--wpds-color-private-bg-surface4)',
88
- },
89
- '--wpds-color-bg-interactive-neutral-weak-disabled': {
90
- '.': 'var(--wpds-color-private-bg-surface5)',
91
- },
92
- '--wpds-color-bg-interactive-brand': {
93
- '.': '#00000000',
94
- },
95
- '--wpds-color-bg-interactive-brand-active': {
96
- '.': 'var(--wpds-color-private-primary-surface2)',
97
- },
98
- '--wpds-color-bg-interactive-brand-disabled': {
99
- '.': 'var(--wpds-color-private-bg-surface5)',
100
- },
101
- '--wpds-color-bg-interactive-brand-strong': {
102
- '.': 'var(--wpds-color-private-primary-bg-fill1)',
103
- },
104
- '--wpds-color-bg-interactive-brand-strong-active': {
105
- '.': 'var(--wpds-color-private-primary-bg-fill2)',
106
- },
107
- '--wpds-color-bg-interactive-brand-strong-disabled': {
108
- '.': 'var(--wpds-color-private-bg-surface6)',
109
- },
110
- '--wpds-color-bg-interactive-brand-weak': {
111
- '.': '#00000000',
112
- },
113
- '--wpds-color-bg-interactive-brand-weak-active': {
114
- '.': 'var(--wpds-color-private-primary-surface4)',
115
- },
116
- '--wpds-color-bg-interactive-brand-weak-disabled': {
117
- '.': 'var(--wpds-color-private-bg-surface5)',
118
- },
119
- '--wpds-color-bg-track-neutral-weak': {
120
- '.': 'var(--wpds-color-private-bg-stroke1)',
121
- },
122
- '--wpds-color-bg-track-neutral': {
123
- '.': 'var(--wpds-color-private-bg-stroke2)',
124
- },
125
- '--wpds-color-bg-thumb-neutral-weak': {
126
- '.': 'var(--wpds-color-private-bg-stroke3)',
127
- },
128
- '--wpds-color-bg-thumb-neutral-weak-active': {
129
- '.': 'var(--wpds-color-private-bg-stroke4)',
130
- },
131
- '--wpds-color-bg-thumb-brand': {
132
- '.': 'var(--wpds-color-private-primary-stroke3)',
133
- },
134
- '--wpds-color-bg-thumb-brand-active': {
135
- '.': 'var(--wpds-color-private-primary-stroke3)',
136
- },
137
- '--wpds-color-bg-thumb-brand-disabled': {
138
- '.': 'var(--wpds-color-private-bg-stroke2)',
139
- },
140
- '--wpds-color-fg-content-neutral': {
141
- '.': 'var(--wpds-color-private-bg-fg-surface4)',
142
- },
143
- '--wpds-color-fg-content-neutral-weak': {
144
- '.': 'var(--wpds-color-private-bg-fg-surface3)',
145
- },
146
- '--wpds-color-fg-content-success': {
147
- '.': 'var(--wpds-color-private-success-fg-surface4)',
148
- },
149
- '--wpds-color-fg-content-success-weak': {
150
- '.': 'var(--wpds-color-private-success-fg-surface3)',
151
- },
152
- '--wpds-color-fg-content-info': {
153
- '.': 'var(--wpds-color-private-info-fg-surface4)',
154
- },
155
- '--wpds-color-fg-content-info-weak': {
156
- '.': 'var(--wpds-color-private-info-fg-surface3)',
157
- },
158
- '--wpds-color-fg-content-warning': {
159
- '.': 'var(--wpds-color-private-warning-fg-surface4)',
160
- },
161
- '--wpds-color-fg-content-warning-weak': {
162
- '.': 'var(--wpds-color-private-warning-fg-surface3)',
163
- },
164
- '--wpds-color-fg-content-caution': {
165
- '.': 'var(--wpds-color-private-caution-fg-surface4)',
166
- },
167
- '--wpds-color-fg-content-caution-weak': {
168
- '.': 'var(--wpds-color-private-caution-fg-surface3)',
169
- },
170
- '--wpds-color-fg-content-error': {
171
- '.': 'var(--wpds-color-private-error-fg-surface4)',
172
- },
173
- '--wpds-color-fg-content-error-weak': {
174
- '.': 'var(--wpds-color-private-error-fg-surface3)',
175
- },
176
- '--wpds-color-fg-interactive-neutral': {
177
- '.': 'var(--wpds-color-private-bg-fg-surface4)',
178
- },
179
- '--wpds-color-fg-interactive-neutral-active': {
180
- '.': 'var(--wpds-color-private-bg-fg-surface4)',
181
- },
182
- '--wpds-color-fg-interactive-neutral-disabled': {
183
- '.': 'var(--wpds-color-private-bg-fg-surface2)',
184
- },
185
- '--wpds-color-fg-interactive-neutral-strong': {
186
- '.': 'var(--wpds-color-private-bg-fg-fill-inverted)',
187
- },
188
- '--wpds-color-fg-interactive-neutral-strong-active': {
189
- '.': 'var(--wpds-color-private-bg-fg-fill-inverted)',
190
- },
191
- '--wpds-color-fg-interactive-neutral-strong-disabled': {
192
- '.': 'var(--wpds-color-private-bg-fg-surface3)',
193
- },
194
- '--wpds-color-fg-interactive-neutral-weak': {
195
- '.': 'var(--wpds-color-private-bg-fg-surface3)',
196
- },
197
- '--wpds-color-fg-interactive-neutral-weak-disabled': {
198
- '.': 'var(--wpds-color-private-bg-fg-surface2)',
199
- },
200
- '--wpds-color-fg-interactive-brand': {
201
- '.': 'var(--wpds-color-private-primary-fg-surface3)',
202
- },
203
- '--wpds-color-fg-interactive-brand-active': {
204
- '.': 'var(--wpds-color-private-primary-fg-surface3)',
205
- },
206
- '--wpds-color-fg-interactive-brand-disabled': {
207
- '.': 'var(--wpds-color-private-bg-fg-surface2)',
208
- },
209
- '--wpds-color-fg-interactive-brand-strong': {
210
- '.': 'var(--wpds-color-private-primary-fg-fill)',
211
- },
212
- '--wpds-color-fg-interactive-brand-strong-active': {
213
- '.': 'var(--wpds-color-private-primary-fg-fill)',
214
- },
215
- '--wpds-color-fg-interactive-brand-strong-disabled': {
216
- '.': 'var(--wpds-color-private-bg-fg-surface3)',
217
- },
218
- '--wpds-color-stroke-surface-neutral': {
219
- '.': 'var(--wpds-color-private-bg-stroke2)',
220
- },
221
- '--wpds-color-stroke-surface-neutral-weak': {
222
- '.': 'var(--wpds-color-private-bg-stroke1)',
223
- },
224
- '--wpds-color-stroke-surface-neutral-strong': {
225
- '.': 'var(--wpds-color-private-bg-stroke3)',
226
- },
227
- '--wpds-color-stroke-surface-brand': {
228
- '.': 'var(--wpds-color-private-primary-stroke1)',
229
- },
230
- '--wpds-color-stroke-surface-brand-strong': {
231
- '.': 'var(--wpds-color-private-primary-stroke3)',
232
- },
233
- '--wpds-color-stroke-surface-success': {
234
- '.': 'var(--wpds-color-private-success-stroke1)',
235
- },
236
- '--wpds-color-stroke-surface-success-strong': {
237
- '.': 'var(--wpds-color-private-success-stroke3)',
238
- },
239
- '--wpds-color-stroke-surface-info': {
240
- '.': 'var(--wpds-color-private-info-stroke1)',
241
- },
242
- '--wpds-color-stroke-surface-info-strong': {
243
- '.': 'var(--wpds-color-private-info-stroke3)',
244
- },
245
- '--wpds-color-stroke-surface-warning': {
246
- '.': 'var(--wpds-color-private-warning-stroke1)',
247
- },
248
- '--wpds-color-stroke-surface-warning-strong': {
249
- '.': 'var(--wpds-color-private-warning-stroke3)',
250
- },
251
- '--wpds-color-stroke-surface-error': {
252
- '.': 'var(--wpds-color-private-error-stroke1)',
253
- },
254
- '--wpds-color-stroke-surface-error-strong': {
255
- '.': 'var(--wpds-color-private-error-stroke3)',
256
- },
257
- '--wpds-color-stroke-interactive-neutral': {
258
- '.': 'var(--wpds-color-private-bg-stroke3)',
259
- },
260
- '--wpds-color-stroke-interactive-neutral-active': {
261
- '.': 'var(--wpds-color-private-bg-stroke4)',
262
- },
263
- '--wpds-color-stroke-interactive-neutral-disabled': {
264
- '.': 'var(--wpds-color-private-bg-stroke2)',
265
- },
266
- '--wpds-color-stroke-interactive-neutral-strong': {
267
- '.': 'var(--wpds-color-private-bg-stroke4)',
268
- },
269
- '--wpds-color-stroke-interactive-brand': {
270
- '.': 'var(--wpds-color-private-primary-stroke3)',
271
- },
272
- '--wpds-color-stroke-interactive-brand-active': {
273
- '.': 'var(--wpds-color-private-primary-stroke4)',
274
- },
275
- '--wpds-color-stroke-interactive-brand-disabled': {
276
- '.': 'var(--wpds-color-private-bg-stroke2)',
277
- },
278
- '--wpds-color-stroke-interactive-error-strong': {
279
- '.': 'var(--wpds-color-private-error-stroke3)',
280
- },
281
- '--wpds-color-stroke-focus-brand': {
282
- '.': 'var(--wpds-color-private-primary-stroke3)',
283
- },
284
- '--wpds-elevation-x-small': {
285
- '.': '0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',
286
- },
287
- '--wpds-elevation-small': {
288
- '.': '0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',
289
- },
290
- '--wpds-elevation-medium': {
291
- '.': '0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005',
292
- },
293
- '--wpds-elevation-large': {
294
- '.': '0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',
295
- },
296
- '--wpds-spacing-05': {
297
- '.': '4px',
298
- },
299
- '--wpds-spacing-10': {
300
- '.': '8px',
301
- },
302
- '--wpds-spacing-15': {
303
- '.': '12px',
304
- },
305
- '--wpds-spacing-20': {
306
- '.': '16px',
307
- },
308
- '--wpds-spacing-30': {
309
- '.': '24px',
310
- },
311
- '--wpds-spacing-40': {
312
- '.': '32px',
313
- },
314
- '--wpds-spacing-50': {
315
- '.': '40px',
316
- },
317
- '--wpds-spacing-60': {
318
- '.': '48px',
319
- },
320
- '--wpds-spacing-70': {
321
- '.': '56px',
322
- },
323
- '--wpds-spacing-80': {
324
- '.': '64px',
325
- },
326
- '--wpds-font-family-heading': {
327
- '.': '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
328
- },
329
- '--wpds-font-family-body': {
330
- '.': '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
331
- },
332
- '--wpds-font-family-mono': {
333
- '.': '"Menlo", "Consolas", monaco, monospace',
334
- },
335
- '--wpds-font-size-x-small': {
336
- '.': '11px',
337
- },
338
- '--wpds-font-size-small': {
339
- '.': '12px',
340
- },
341
- '--wpds-font-size-medium': {
342
- '.': '13px',
343
- },
344
- '--wpds-font-size-large': {
345
- '.': '15px',
346
- },
347
- '--wpds-font-size-x-large': {
348
- '.': '20px',
349
- },
350
- '--wpds-font-size-2x-large': {
351
- '.': '32px',
352
- },
353
- '--wpds-font-line-height-x-small': {
354
- '.': '16px',
355
- },
356
- '--wpds-font-line-height-small': {
357
- '.': '20px',
358
- },
359
- '--wpds-font-line-height-medium': {
360
- '.': '24px',
361
- },
362
- '--wpds-font-line-height-large': {
363
- '.': '28px',
364
- },
365
- '--wpds-font-line-height-x-large': {
366
- '.': '32px',
367
- },
368
- '--wpds-font-line-height-2x-large': {
369
- '.': '40px',
370
- },
371
- } as Record< string, Record< string, string > >;
package/tokens/spacing.json DELETED
@@ -1,45 +0,0 @@
1
- {
2
- "spacing": {
3
- "$type": "dimension",
4
- "05": {
5
- "$value": { "value": 4, "unit": "px" },
6
- "$description": "Extra small spacing"
7
- },
8
- "10": {
9
- "$value": { "value": 8, "unit": "px" },
10
- "$description": "Small spacing"
11
- },
12
- "15": {
13
- "$value": { "value": 12, "unit": "px" },
14
- "$description": "Medium spacing"
15
- },
16
- "20": {
17
- "$value": { "value": 16, "unit": "px" },
18
- "$description": "Large spacing"
19
- },
20
- "30": {
21
- "$value": { "value": 24, "unit": "px" },
22
- "$description": "Extra large spacing"
23
- },
24
- "40": {
25
- "$value": { "value": 32, "unit": "px" },
26
- "$description": "2X large spacing"
27
- },
28
- "50": {
29
- "$value": { "value": 40, "unit": "px" },
30
- "$description": "3X large spacing"
31
- },
32
- "60": {
33
- "$value": { "value": 48, "unit": "px" },
34
- "$description": "4X large spacing"
35
- },
36
- "70": {
37
- "$value": { "value": 56, "unit": "px" },
38
- "$description": "5X large spacing"
39
- },
40
- "80": {
41
- "$value": { "value": 64, "unit": "px" },
42
- "$description": "6X large spacing"
43
- }
44
- }
45
- }