@clay-design-system/tokens 0.0.0-stage → 0.12.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 (16) hide show
  1. package/README.md +126 -2
  2. package/dist/TOKEN_REFERENCE.md +1810 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +1 -0
  5. package/dist/mq.d.ts +17 -0
  6. package/dist/mq.js +18 -0
  7. package/dist/tokens.css +1144 -0
  8. package/dist/tokens.d.ts +1128 -0
  9. package/dist/tokens.js +1152 -0
  10. package/dist/tokens.resolved.css +1144 -0
  11. package/package.json +37 -3
  12. package/stylelint-plugin/allowed-breakpoints.js +75 -0
  13. package/stylelint-plugin/no-foundation-tokens.js +69 -0
  14. package/stylelint-plugin/no-literal-values.js +178 -0
  15. package/stylelint-plugin/reduced-motion.js +57 -0
  16. package/stylelint-plugin/require-layer.js +66 -0
package/dist/TOKEN_REFERENCE.md ADDED
@@ -0,0 +1,1810 @@
1
+ # Token Reference (auto-generated)
2
+
3
+ > Generated by `@clay-design-system/tokens` build. 1138 tokens total.
4
+
5
+ ## aspect-1
6
+
7
+ | Token | Value |
8
+ |-------|-------|
9
+ | `--clay-aspect-1-1` | `1 / 1` |
10
+
11
+ ## aspect-16
12
+
13
+ | Token | Value |
14
+ |-------|-------|
15
+ | `--clay-aspect-16-9` | `16 / 9` |
16
+
17
+ ## aspect-3
18
+
19
+ | Token | Value |
20
+ |-------|-------|
21
+ | `--clay-aspect-3-2` | `3 / 2` |
22
+
23
+ ## aspect-4
24
+
25
+ | Token | Value |
26
+ |-------|-------|
27
+ | `--clay-aspect-4-5` | `4 / 5` |
28
+
29
+ ## aspect-5
30
+
31
+ | Token | Value |
32
+ |-------|-------|
33
+ | `--clay-aspect-5-4` | `5 / 4` |
34
+
35
+ ## aspect-9
36
+
37
+ | Token | Value |
38
+ |-------|-------|
39
+ | `--clay-aspect-9-16` | `9 / 16` |
40
+
41
+ ## brand-crm
42
+
43
+ | Token | Value |
44
+ |-------|-------|
45
+ | `--clay-brand-crm-primary` | `var(--clay-color-green-500)` |
46
+ | `--clay-brand-crm-accent` | `var(--clay-color-blue-500)` |
47
+ | `--clay-brand-crm-secondary` | `var(--clay-color-blue-500)` |
48
+ | `--clay-brand-crm-surface` | `var(--clay-color-blue-100)` |
49
+ | `--clay-brand-crm-dark` | `var(--clay-color-green-900)` |
50
+
51
+ ## brand-dev
52
+
53
+ | Token | Value |
54
+ |-------|-------|
55
+ | `--clay-brand-dev-primary` | `var(--clay-color-blue-500)` |
56
+ | `--clay-brand-dev-accent` | `var(--clay-color-iris-300)` |
57
+ | `--clay-brand-dev-secondary` | `var(--clay-color-blue-500)` |
58
+ | `--clay-brand-dev-surface` | `var(--clay-color-blue-100)` |
59
+ | `--clay-brand-dev-dark` | `var(--clay-color-blue-800)` |
60
+
61
+ ## brand-monday
62
+
63
+ | Token | Value |
64
+ |-------|-------|
65
+ | `--clay-brand-monday-primary` | `var(--clay-color-iris-300)` |
66
+ | `--clay-brand-monday-accent` | `var(--clay-color-yellow-500)` |
67
+ | `--clay-brand-monday-surface` | `var(--clay-color-stone-100)` |
68
+ | `--clay-brand-monday-dark` | `var(--clay-color-grey-800)` |
69
+
70
+ ## brand-svc
71
+
72
+ | Token | Value |
73
+ |-------|-------|
74
+ | `--clay-brand-svc-primary` | `var(--clay-color-magenta-500)` |
75
+ | `--clay-brand-svc-accent` | `var(--clay-color-pink-500)` |
76
+ | `--clay-brand-svc-secondary` | `var(--clay-color-yellow-500)` |
77
+ | `--clay-brand-svc-surface` | `var(--clay-color-magenta-200)` |
78
+ | `--clay-brand-svc-dark` | `var(--clay-color-magenta-900)` |
79
+
80
+ ## brand-wm
81
+
82
+ | Token | Value |
83
+ |-------|-------|
84
+ | `--clay-brand-wm-primary` | `var(--clay-color-iris-300)` |
85
+ | `--clay-brand-wm-accent` | `var(--clay-color-pink-500)` |
86
+ | `--clay-brand-wm-secondary` | `var(--clay-color-yellow-500)` |
87
+ | `--clay-brand-wm-surface` | `var(--clay-color-iris-100)` |
88
+ | `--clay-brand-wm-dark` | `var(--clay-color-iris-800)` |
89
+
90
+ ## btn-font
91
+
92
+ | Token | Value |
93
+ |-------|-------|
94
+ | `--clay-btn-font-weight` | `var(--clay-web-type-weight-medium)` |
95
+
96
+ ## btn-icon
97
+
98
+ | Token | Value |
99
+ |-------|-------|
100
+ | `--clay-btn-icon-only-size-mini` | `44` |
101
+ | `--clay-btn-icon-size` | `var(--clay-size-space-500)` |
102
+ | `--clay-btn-icon-size-mini` | `var(--clay-size-space-400)` |
103
+ | `--clay-btn-icon-size-extra-mini` | `var(--clay-size-space-300)` |
104
+ | `--clay-btn-icon-only-icon-size` | `var(--clay-size-space-600)` |
105
+ | `--clay-btn-icon-black-bg` | `var(--clay-color-background-black-default)` |
106
+ | `--clay-btn-icon-black-bg-hover` | `var(--clay-color-grey-800)` |
107
+ | `--clay-btn-icon-black-bg-active` | `var(--clay-color-grey-800)` |
108
+ | `--clay-btn-icon-grey-bg` | `var(--clay-color-grey-300)` |
109
+ | `--clay-btn-icon-grey-bg-disabled` | `var(--clay-color-grey-300)` |
110
+ | `--clay-btn-icon-black-color` | `var(--clay-color-text-on-black)` |
111
+ | `--clay-btn-icon-grey-color` | `var(--clay-color-text-on-black)` |
112
+
113
+ ## btn-line
114
+
115
+ | Token | Value |
116
+ |-------|-------|
117
+ | `--clay-btn-line-height` | `1.5` |
118
+
119
+ ## btn-link
120
+
121
+ | Token | Value |
122
+ |-------|-------|
123
+ | `--clay-btn-link-black-border` | `rgba(0, 0, 0, 0.5)` |
124
+ | `--clay-btn-link-black-border-hover` | `rgba(28, 29, 33, 0.5)` |
125
+ | `--clay-btn-link-white-border` | `rgba(255, 255, 255, 0.5)` |
126
+ | `--clay-btn-link-white-border-hover` | `rgba(255, 255, 255, 0.5)` |
127
+ | `--clay-btn-link-gap` | `var(--clay-foundation-spacing-6)` |
128
+ | `--clay-btn-link-gap-hover` | `var(--clay-foundation-spacing-6)` |
129
+ | `--clay-btn-link-black-color` | `var(--clay-color-black)` |
130
+ | `--clay-btn-link-black-color-hover` | `var(--clay-color-black)` |
131
+ | `--clay-btn-link-white-color` | `var(--clay-color-text-on-black)` |
132
+ | `--clay-btn-link-white-color-hover` | `var(--clay-color-text-on-black)` |
133
+
134
+ ## btn-primary
135
+
136
+ | Token | Value |
137
+ |-------|-------|
138
+ | `--clay-btn-primary-white-bg-hover` | `var(--clay-color-white-400)` |
139
+ | `--clay-btn-primary-white-color` | `var(--clay-color-black)` |
140
+ | `--clay-btn-primary-black-bg` | `var(--clay-color-background-black-default)` |
141
+ | `--clay-btn-primary-black-bg-hover` | `var(--clay-color-grey-800)` |
142
+ | `--clay-btn-primary-iris-bg` | `var(--clay-color-background-brand-default)` |
143
+ | `--clay-btn-primary-iris-bg-hover` | `var(--clay-color-iris-500)` |
144
+ | `--clay-btn-primary-black-color` | `var(--clay-color-text-on-black)` |
145
+ | `--clay-btn-primary-iris-color` | `var(--clay-color-text-on-black)` |
146
+ | `--clay-btn-primary-white-bg` | `var(--clay-color-background-default-default)` |
147
+
148
+ ## btn-secondary
149
+
150
+ | Token | Value |
151
+ |-------|-------|
152
+ | `--clay-btn-secondary-black-bg` | `rgba(0, 0, 0, 0)` |
153
+ | `--clay-btn-secondary-iris-bg` | `rgba(0, 0, 0, 0)` |
154
+ | `--clay-btn-secondary-iris-bg-hover` | `rgba(0, 0, 0, 0)` |
155
+ | `--clay-btn-secondary-black-color` | `var(--clay-color-black)` |
156
+ | `--clay-btn-secondary-black-border` | `var(--clay-color-black)` |
157
+ | `--clay-btn-secondary-black-bg-hover` | `var(--clay-color-background-black-default)` |
158
+ | `--clay-btn-secondary-iris-color` | `var(--clay-color-iris-300)` |
159
+ | `--clay-btn-secondary-iris-color-hover` | `var(--clay-color-iris-500)` |
160
+ | `--clay-btn-secondary-iris-border` | `var(--clay-color-iris-300)` |
161
+ | `--clay-btn-secondary-iris-border-hover` | `var(--clay-color-iris-500)` |
162
+ | `--clay-btn-secondary-black-color-hover` | `var(--clay-color-text-on-black)` |
163
+
164
+ ## btn-size
165
+
166
+ | Token | Value |
167
+ |-------|-------|
168
+ | `--clay-btn-size-large-min-height` | `56` |
169
+ | `--clay-btn-size-regular-min-height` | `48` |
170
+ | `--clay-btn-size-mini-min-height` | `45` |
171
+ | `--clay-btn-size-large-font-size` | `var(--clay-web-type-p2-size)` |
172
+ | `--clay-btn-size-regular-font-size` | `var(--clay-web-type-p3-size)` |
173
+ | `--clay-btn-size-mini-font-size` | `var(--clay-web-type-p4-size)` |
174
+ | `--clay-btn-size-extra-mini-font-size` | `var(--clay-web-type-p5-size)` |
175
+ | `--clay-btn-size-large-padding-y` | `var(--clay-size-space-300)` |
176
+ | `--clay-btn-size-large-padding-x` | `var(--clay-size-space-600)` |
177
+ | `--clay-btn-size-large-gap` | `var(--clay-size-space-300)` |
178
+ | `--clay-btn-size-large-icon-size` | `var(--clay-size-space-500)` |
179
+ | `--clay-btn-size-large-gap-hover` | `var(--clay-size-space-500)` |
180
+ | `--clay-btn-size-large-radius` | `var(--clay-radius-4xl)` |
181
+ | `--clay-btn-size-regular-padding-y` | `var(--clay-size-space-300)` |
182
+ | `--clay-btn-size-regular-padding-x` | `var(--clay-size-space-600)` |
183
+ | `--clay-btn-size-regular-gap` | `var(--clay-size-space-200)` |
184
+ | `--clay-btn-size-regular-gap-hover` | `var(--clay-size-space-300)` |
185
+ | `--clay-btn-size-regular-radius` | `var(--clay-radius-2xl)` |
186
+ | `--clay-btn-size-mini-padding-y` | `var(--clay-size-space-300)` |
187
+ | `--clay-btn-size-mini-padding-x` | `var(--clay-size-space-500)` |
188
+ | `--clay-btn-size-mini-gap` | `var(--clay-size-space-200)` |
189
+ | `--clay-btn-size-mini-gap-hover` | `var(--clay-size-space-300)` |
190
+ | `--clay-btn-size-mini-radius` | `var(--clay-radius-2xl)` |
191
+ | `--clay-btn-size-extra-mini-padding-y` | `var(--clay-size-space-300)` |
192
+ | `--clay-btn-size-extra-mini-padding-x` | `var(--clay-size-space-400)` |
193
+ | `--clay-btn-size-extra-mini-gap` | `var(--clay-size-space-200)` |
194
+ | `--clay-btn-size-extra-mini-gap-hover` | `var(--clay-size-space-300)` |
195
+ | `--clay-btn-size-extra-mini-radius` | `var(--clay-radius-2xl)` |
196
+
197
+ ## card-action
198
+
199
+ | Token | Value |
200
+ |-------|-------|
201
+ | `--clay-card-action-rating-color` | `#f5a623` |
202
+ | `--clay-card-action-media-top-media-height` | `150` |
203
+ | `--clay-card-action-integration-height` | `188` |
204
+ | `--clay-card-action-agent-avatar-size` | `80` |
205
+ | `--clay-card-action-icon-size` | `24` |
206
+ | `--clay-card-action-icon-overlap` | `4` |
207
+ | `--clay-card-action-hover-shadow` | `var(--clay-effect-shadow-light)` |
208
+ | `--clay-card-action-border-color` | `var(--clay-color-grey-300)` |
209
+ | `--clay-card-action-radius` | `var(--clay-radius-lg)` |
210
+ | `--clay-card-action-title-color` | `var(--clay-color-text-default-default)` |
211
+ | `--clay-card-action-description-color` | `var(--clay-color-text-default-secondary)` |
212
+ | `--clay-card-action-media-top-padding` | `var(--clay-size-space-400)` |
213
+ | `--clay-card-action-media-top-gap` | `var(--clay-size-space-600)` |
214
+ | `--clay-card-action-media-top-media-radius` | `var(--clay-radius-sm)` |
215
+ | `--clay-card-action-media-top-media-background` | `var(--clay-color-grey-300)` |
216
+ | `--clay-card-action-integration-padding` | `var(--clay-size-space-800)` |
217
+ | `--clay-card-action-integration-gap` | `var(--clay-size-space-600)` |
218
+ | `--clay-card-action-agent-padding` | `var(--clay-size-space-400)` |
219
+ | `--clay-card-action-agent-gap` | `var(--clay-size-space-400)` |
220
+ | `--clay-card-action-agent-avatar-radius` | `var(--clay-radius-sm)` |
221
+ | `--clay-card-action-text-gap` | `var(--clay-size-space-200)` |
222
+ | `--clay-card-action-content-gap` | `var(--clay-size-space-400)` |
223
+ | `--clay-card-action-background` | `var(--clay-color-background-default-default)` |
224
+
225
+ ## card-background
226
+
227
+ | Token | Value |
228
+ |-------|-------|
229
+ | `--clay-card-background` | `var(--clay-color-background-default-default)` |
230
+
231
+ ## card-border
232
+
233
+ | Token | Value |
234
+ |-------|-------|
235
+ | `--clay-card-border` | `none` |
236
+
237
+ ## card-category
238
+
239
+ | Token | Value |
240
+ |-------|-------|
241
+ | `--clay-card-category-to-title` | `24` |
242
+
243
+ ## card-content
244
+
245
+ | Token | Value |
246
+ |-------|-------|
247
+ | `--clay-card-content-background` | `var(--clay-color-background-default-secondary)` |
248
+
249
+ ## card-description
250
+
251
+ | Token | Value |
252
+ |-------|-------|
253
+ | `--clay-card-description-to-button` | `32` |
254
+
255
+ ## card-gap
256
+
257
+ | Token | Value |
258
+ |-------|-------|
259
+ | `--clay-card-gap-value` | `16` |
260
+ | `--clay-card-gap` | `var(--clay-size-space-400)` |
261
+
262
+ ## card-horizontal
263
+
264
+ | Token | Value |
265
+ |-------|-------|
266
+ | `--clay-card-horizontal-tag-icon-size` | `12` |
267
+ | `--clay-card-horizontal-tag-icon-stack-size` | `17` |
268
+ | `--clay-card-horizontal-media-height-mobile` | `191` |
269
+ | `--clay-card-horizontal-min-height-desktop` | `373` |
270
+ | `--clay-card-horizontal-mobile-shadow` | `var(--clay-effect-shadow-light)` |
271
+ | `--clay-card-horizontal-border-color` | `var(--clay-color-grey-300)` |
272
+ | `--clay-card-horizontal-radius` | `var(--clay-radius-xl)` |
273
+ | `--clay-card-horizontal-heading-color` | `var(--clay-color-text-default-default)` |
274
+ | `--clay-card-horizontal-description-color` | `var(--clay-color-text-default-secondary)` |
275
+ | `--clay-card-horizontal-tag-color` | `var(--clay-color-text-default-default)` |
276
+ | `--clay-card-horizontal-content-padding` | `var(--clay-size-space-600)` |
277
+ | `--clay-card-horizontal-content-gap` | `var(--clay-size-space-800)` |
278
+ | `--clay-card-horizontal-heading-gap` | `var(--clay-size-space-400)` |
279
+ | `--clay-card-horizontal-tag-gap` | `var(--clay-size-space-200)` |
280
+ | `--clay-card-horizontal-tag-padding` | `var(--clay-size-space-200)` |
281
+ | `--clay-card-horizontal-tag-background` | `var(--clay-color-grey-100)` |
282
+ | `--clay-card-horizontal-tag-icon-gap` | `var(--clay-size-space-100)` |
283
+ | `--clay-card-horizontal-media-background` | `var(--clay-color-grey-200)` |
284
+ | `--clay-card-horizontal-media-radius-mobile` | `var(--clay-radius-sm)` |
285
+ | `--clay-card-horizontal-mobile-radius` | `var(--clay-radius-lg)` |
286
+ | `--clay-card-horizontal-mobile-padding` | `var(--clay-size-space-400)` |
287
+ | `--clay-card-horizontal-mobile-gap` | `var(--clay-size-space-600)` |
288
+
289
+ ## card-image
290
+
291
+ | Token | Value |
292
+ |-------|-------|
293
+ | `--clay-card-image-media-inset` | `0` |
294
+ | `--clay-card-image-border` | `none` |
295
+ | `--clay-card-image-shadow` | `none` |
296
+ | `--clay-card-image-radius-value` | `24` |
297
+ | `--clay-card-image-padding-value` | `24` |
298
+ | `--clay-card-image-gap-value` | `16` |
299
+ | `--clay-card-image-media-min-height` | `200` |
300
+ | `--clay-card-image-media-min-height-mobile` | `160` |
301
+ | `--clay-card-image-aspect` | `var(--clay-aspect-3-2)` |
302
+ | `--clay-card-image-media-background-default` | `var(--clay-color-background-default-tertiary)` |
303
+ | `--clay-card-image-media-background-brand` | `var(--clay-color-background-brand-default)` |
304
+ | `--clay-card-image-media-background-brand-secondary` | `var(--clay-color-background-brand-secondary)` |
305
+ | `--clay-card-image-media-background-positive` | `var(--clay-color-background-positive-tertiary)` |
306
+ | `--clay-card-image-media-background-positive-secondary` | `var(--clay-color-background-positive-secondary)` |
307
+ | `--clay-card-image-media-background-neutral` | `var(--clay-color-background-neutral-default)` |
308
+ | `--clay-card-image-background` | `var(--clay-color-background-default-default)` |
309
+ | `--clay-card-image-content-background` | `var(--clay-color-background-default-default)` |
310
+
311
+ ## card-inner
312
+
313
+ | Token | Value |
314
+ |-------|-------|
315
+ | `--clay-card-inner-padding-value` | `48` |
316
+
317
+ ## card-padding
318
+
319
+ | Token | Value |
320
+ |-------|-------|
321
+ | `--clay-card-padding-value` | `32` |
322
+ | `--clay-card-padding` | `var(--clay-size-space-800)` |
323
+
324
+ ## card-pill
325
+
326
+ | Token | Value |
327
+ |-------|-------|
328
+ | `--clay-card-pill-padding-y` | `8` |
329
+ | `--clay-card-pill-padding-x` | `16` |
330
+ | `--clay-card-pill-background` | `var(--clay-color-background-default-tertiary)` |
331
+
332
+ ## card-radius
333
+
334
+ | Token | Value |
335
+ |-------|-------|
336
+ | `--clay-card-radius-value` | `24` |
337
+ | `--clay-card-radius` | `var(--clay-radius-lg)` |
338
+ | `--clay-card-radius-x-large` | `var(--clay-radius-xl)` |
339
+ | `--clay-card-radius-large` | `var(--clay-radius-lg)` |
340
+ | `--clay-card-radius-medium` | `var(--clay-radius-md)` |
341
+ | `--clay-card-radius-small` | `var(--clay-radius-sm)` |
342
+
343
+ ## card-row
344
+
345
+ | Token | Value |
346
+ |-------|-------|
347
+ | `--clay-card-row-gap-value` | `48` |
348
+ | `--clay-card-row-min-height` | `550` |
349
+ | `--clay-card-row-gap` | `var(--clay-size-space-800)` |
350
+
351
+ ## card-section
352
+
353
+ | Token | Value |
354
+ |-------|-------|
355
+ | `--clay-card-section-background` | `var(--clay-color-background-default-default)` |
356
+
357
+ ## card-shadow
358
+
359
+ | Token | Value |
360
+ |-------|-------|
361
+ | `--clay-card-shadow` | `none` |
362
+ | `--clay-card-shadow-elevated` | `var(--clay-effect-shadow-light)` |
363
+
364
+ ## card-size
365
+
366
+ | Token | Value |
367
+ |-------|-------|
368
+ | `--clay-card-size-hero-radius-value` | `40` |
369
+ | `--clay-card-size-hero-padding` | `48` |
370
+ | `--clay-card-size-hero-gap` | `24` |
371
+ | `--clay-card-size-hero-min-height` | `400` |
372
+ | `--clay-card-size-feature-radius-value` | `24` |
373
+ | `--clay-card-size-feature-padding` | `48` |
374
+ | `--clay-card-size-feature-gap` | `16` |
375
+ | `--clay-card-size-feature-min-height` | `320` |
376
+ | `--clay-card-size-block-radius-value` | `16` |
377
+ | `--clay-card-size-block-padding` | `32` |
378
+ | `--clay-card-size-block-gap` | `16` |
379
+ | `--clay-card-size-block-min-height` | `240` |
380
+ | `--clay-card-size-tile-radius-value` | `8` |
381
+ | `--clay-card-size-tile-padding` | `16` |
382
+ | `--clay-card-size-tile-gap` | `8` |
383
+ | `--clay-card-size-tile-min-height` | `0` |
384
+ | `--clay-card-size-hero-radius` | `var(--clay-radius-xl)` |
385
+ | `--clay-card-size-feature-radius` | `var(--clay-radius-lg)` |
386
+ | `--clay-card-size-block-radius` | `var(--clay-radius-md)` |
387
+ | `--clay-card-size-tile-radius` | `var(--clay-radius-sm)` |
388
+
389
+ ## card-title
390
+
391
+ | Token | Value |
392
+ |-------|-------|
393
+ | `--clay-card-title-to-description` | `16` |
394
+
395
+ ## card-visual
396
+
397
+ | Token | Value |
398
+ |-------|-------|
399
+ | `--clay-card-visual-max-size` | `400` |
400
+ | `--clay-card-visual-min-height` | `280` |
401
+ | `--clay-card-visual-min-height-mobile` | `200` |
402
+
403
+ ## checkbox-bg
404
+
405
+ | Token | Value |
406
+ |-------|-------|
407
+ | `--clay-checkbox-bg` | `var(--clay-color-background-default-default)` |
408
+
409
+ ## checkbox-border
410
+
411
+ | Token | Value |
412
+ |-------|-------|
413
+ | `--clay-checkbox-border-color` | `var(--clay-color-border-default-secondary)` |
414
+ | `--clay-checkbox-border-color-hover` | `var(--clay-color-border-default-tertiary)` |
415
+
416
+ ## checkbox-check
417
+
418
+ | Token | Value |
419
+ |-------|-------|
420
+ | `--clay-checkbox-check-color` | `var(--clay-color-icon-neutral-on-neutral)` |
421
+ | `--clay-checkbox-check-size` | `var(--clay-size-icon-check)` |
422
+
423
+ ## checkbox-checked
424
+
425
+ | Token | Value |
426
+ |-------|-------|
427
+ | `--clay-checkbox-checked-bg` | `var(--clay-color-background-neutral-default)` |
428
+ | `--clay-checkbox-checked-border-color` | `var(--clay-color-border-neutral-default)` |
429
+
430
+ ## checkbox-color
431
+
432
+ | Token | Value |
433
+ |-------|-------|
434
+ | `--clay-checkbox-color` | `var(--clay-color-text-default-default)` |
435
+
436
+ ## checkbox-focus
437
+
438
+ | Token | Value |
439
+ |-------|-------|
440
+ | `--clay-checkbox-focus-ring-color` | `var(--clay-color-border-brand-default)` |
441
+
442
+ ## checkbox-font
443
+
444
+ | Token | Value |
445
+ |-------|-------|
446
+ | `--clay-checkbox-font-size` | `var(--clay-web-type-p3-size)` |
447
+
448
+ ## checkbox-gap
449
+
450
+ | Token | Value |
451
+ |-------|-------|
452
+ | `--clay-checkbox-gap` | `var(--clay-size-space-200)` |
453
+
454
+ ## checkbox-group
455
+
456
+ | Token | Value |
457
+ |-------|-------|
458
+ | `--clay-checkbox-group-font-size` | `var(--clay-web-type-p4-size)` |
459
+ | `--clay-checkbox-group-radius` | `var(--clay-radius-xs)` |
460
+ | `--clay-checkbox-group-padding` | `var(--clay-size-space-200)` |
461
+ | `--clay-checkbox-group-border-color` | `var(--clay-color-grey-200)` |
462
+ | `--clay-checkbox-group-bg-hover` | `var(--clay-color-iris-200)` |
463
+ | `--clay-checkbox-group-bg-selected` | `var(--clay-color-iris-300)` |
464
+ | `--clay-checkbox-group-color-on-selected` | `var(--clay-color-white)` |
465
+
466
+ ## checkbox-icon
467
+
468
+ | Token | Value |
469
+ |-------|-------|
470
+ | `--clay-checkbox-icon-min-width` | `88` |
471
+ | `--clay-checkbox-icon-icon-size` | `var(--clay-size-space-600)` |
472
+ | `--clay-checkbox-icon-icon-color` | `var(--clay-color-text-default-default)` |
473
+ | `--clay-checkbox-icon-icon-color-selected` | `var(--clay-color-white)` |
474
+ | `--clay-checkbox-icon-gap` | `var(--clay-size-space-300)` |
475
+ | `--clay-checkbox-icon-padding-y` | `var(--clay-size-space-400)` |
476
+ | `--clay-checkbox-icon-padding-x` | `var(--clay-size-space-300)` |
477
+
478
+ ## checkbox-radius
479
+
480
+ | Token | Value |
481
+ |-------|-------|
482
+ | `--clay-checkbox-radius` | `var(--clay-radius-xs)` |
483
+
484
+ ## checkbox-size
485
+
486
+ | Token | Value |
487
+ |-------|-------|
488
+ | `--clay-checkbox-size` | `var(--clay-size-space-500)` |
489
+
490
+ ## checkbox-square
491
+
492
+ | Token | Value |
493
+ |-------|-------|
494
+ | `--clay-checkbox-square-min-width` | `100` |
495
+ | `--clay-checkbox-square-gap` | `var(--clay-size-space-300)` |
496
+ | `--clay-checkbox-square-padding-y` | `var(--clay-size-space-200)` |
497
+ | `--clay-checkbox-square-padding-left` | `var(--clay-size-space-200)` |
498
+ | `--clay-checkbox-square-padding-right` | `var(--clay-size-space-400)` |
499
+
500
+ ## color-background
501
+
502
+ | Token | Value |
503
+ |-------|-------|
504
+ | `--clay-color-background-default-secondary` | `var(--clay-foundation-brand-color-grey-100)` |
505
+ | `--clay-color-background-default-tertiary` | `var(--clay-foundation-brand-color-grey-300)` |
506
+ | `--clay-color-background-default-default-hover` | `var(--clay-foundation-brand-color-grey-100)` |
507
+ | `--clay-color-background-disabled-default` | `var(--clay-foundation-brand-color-grey-200)` |
508
+ | `--clay-color-background-brand-default` | `var(--clay-foundation-brand-color-iris-300)` |
509
+ | `--clay-color-background-brand-hover` | `var(--clay-foundation-brand-color-iris-500)` |
510
+ | `--clay-color-background-brand-secondary` | `var(--clay-foundation-brand-color-iris-100)` |
511
+ | `--clay-color-background-brand-secondary-hover` | `var(--clay-foundation-brand-color-iris-200)` |
512
+ | `--clay-color-background-neutral-default` | `var(--clay-foundation-brand-color-grey-500)` |
513
+ | `--clay-color-background-neutral-secondary` | `var(--clay-foundation-brand-color-grey-300)` |
514
+ | `--clay-color-background-neutral-tertiary` | `var(--clay-foundation-brand-color-grey-200)` |
515
+ | `--clay-color-background-positive-secondary` | `var(--clay-foundation-brand-color-green-200)` |
516
+ | `--clay-color-background-positive-tertiary` | `var(--clay-foundation-brand-color-green-100)` |
517
+ | `--clay-color-background-danger-tertiary` | `var(--clay-foundation-brand-color-magenta-300)` |
518
+ | `--clay-color-background-black-default` | `var(--clay-color-black)` |
519
+ | `--clay-color-background-black-hover` | `var(--clay-foundation-brand-color-grey-800)` |
520
+ | `--clay-color-background-default-default` | `var(--clay-color-white)` |
521
+ | `--clay-color-background-nav-active` | `var(--clay-color-background-brand-secondary)` |
522
+
523
+ ## color-bg
524
+
525
+ | Token | Value |
526
+ |-------|-------|
527
+ | `--clay-color-bg-primary` | `var(--clay-color-background-default-default)` |
528
+
529
+ ## color-black
530
+
531
+ | Token | Value |
532
+ |-------|-------|
533
+ | `--clay-color-black` | `#000000` |
534
+ | `--clay-color-black-100` | `rgba(0, 0, 0, 0.05)` |
535
+ | `--clay-color-black-200` | `rgba(0, 0, 0, 0.1)` |
536
+ | `--clay-color-black-400` | `rgba(0, 0, 0, 0.4)` |
537
+
538
+ ## color-blue
539
+
540
+ | Token | Value |
541
+ |-------|-------|
542
+ | `--clay-color-blue-100` | `var(--clay-foundation-brand-color-blue-100)` |
543
+ | `--clay-color-blue-200` | `var(--clay-foundation-brand-color-blue-200)` |
544
+ | `--clay-color-blue-500` | `var(--clay-foundation-brand-color-blue-500)` |
545
+ | `--clay-color-blue-800` | `var(--clay-foundation-brand-color-blue-800)` |
546
+
547
+ ## color-border
548
+
549
+ | Token | Value |
550
+ |-------|-------|
551
+ | `--clay-color-border-default-secondary` | `var(--clay-foundation-brand-color-grey-500)` |
552
+ | `--clay-color-border-default-tertiary` | `var(--clay-foundation-brand-color-grey-800)` |
553
+ | `--clay-color-border-neutral-default` | `var(--clay-foundation-brand-color-grey-800)` |
554
+ | `--clay-color-border-neutral-tertiary` | `var(--clay-foundation-brand-color-grey-200)` |
555
+ | `--clay-color-border-brand-default` | `var(--clay-foundation-brand-color-iris-300)` |
556
+ | `--clay-color-border-black-default` | `var(--clay-color-black)` |
557
+ | `--clay-color-border-danger-default` | `var(--clay-foundation-brand-color-magenta-800)` |
558
+ | `--clay-color-border-default-default` | `var(--clay-color-white)` |
559
+
560
+ ## color-cyan
561
+
562
+ | Token | Value |
563
+ |-------|-------|
564
+ | `--clay-color-cyan-500` | `var(--clay-foundation-brand-color-cyan-500)` |
565
+
566
+ ## color-green
567
+
568
+ | Token | Value |
569
+ |-------|-------|
570
+ | `--clay-color-green-100` | `var(--clay-foundation-brand-color-green-100)` |
571
+ | `--clay-color-green-200` | `var(--clay-foundation-brand-color-green-200)` |
572
+ | `--clay-color-green-500` | `var(--clay-foundation-brand-color-green-500)` |
573
+ | `--clay-color-green-800` | `var(--clay-foundation-brand-color-green-800)` |
574
+ | `--clay-color-green-900` | `var(--clay-foundation-brand-color-green-900)` |
575
+
576
+ ## color-grey
577
+
578
+ | Token | Value |
579
+ |-------|-------|
580
+ | `--clay-color-grey-0` | `var(--clay-foundation-brand-color-grey-0)` |
581
+ | `--clay-color-grey-100` | `var(--clay-foundation-brand-color-grey-100)` |
582
+ | `--clay-color-grey-200` | `var(--clay-foundation-brand-color-grey-200)` |
583
+ | `--clay-color-grey-300` | `var(--clay-foundation-brand-color-grey-300)` |
584
+ | `--clay-color-grey-500` | `var(--clay-foundation-brand-color-grey-500)` |
585
+ | `--clay-color-grey-700` | `var(--clay-foundation-brand-color-grey-700)` |
586
+ | `--clay-color-grey-800` | `var(--clay-foundation-brand-color-grey-800)` |
587
+ | `--clay-color-grey-900` | `var(--clay-foundation-brand-color-grey-900)` |
588
+ | `--clay-color-grey-950` | `var(--clay-foundation-brand-color-grey-950)` |
589
+
590
+ ## color-harvest
591
+
592
+ | Token | Value |
593
+ |-------|-------|
594
+ | `--clay-color-harvest-500` | `var(--clay-foundation-brand-color-harvest-500)` |
595
+
596
+ ## color-highlight
597
+
598
+ | Token | Value |
599
+ |-------|-------|
600
+ | `--clay-color-highlight-cold` | `#97aeff` |
601
+
602
+ ## color-icon
603
+
604
+ | Token | Value |
605
+ |-------|-------|
606
+ | `--clay-color-icon-default-default` | `#1e1e1e` |
607
+ | `--clay-color-icon-default-secondary` | `#757575` |
608
+ | `--clay-color-icon-default-tertiary` | `#b3b3b3` |
609
+ | `--clay-color-icon-disabled-default` | `#b3b3b3` |
610
+ | `--clay-color-icon-brand-secondary` | `#9090ff` |
611
+ | `--clay-color-icon-brand-on-brand` | `#f5f5ff` |
612
+ | `--clay-color-icon-brand-on-brand-secondary` | `#4d4dff` |
613
+ | `--clay-color-icon-neutral-default` | `#303030` |
614
+ | `--clay-color-icon-neutral-secondary` | `#5a5a5a` |
615
+ | `--clay-color-icon-neutral-tertiary` | `#767676` |
616
+ | `--clay-color-icon-neutral-on-neutral` | `#f3f3f3` |
617
+ | `--clay-color-icon-neutral-on-neutral-secondary` | `#303030` |
618
+ | `--clay-color-icon-neutral-on-neutral-tertiary` | `#434343` |
619
+ | `--clay-color-icon-positive-default` | `#02542d` |
620
+ | `--clay-color-icon-positive-secondary` | `#009951` |
621
+ | `--clay-color-icon-positive-tertiary` | `#14ae5c` |
622
+ | `--clay-color-icon-positive-on-positive` | `#ebffee` |
623
+ | `--clay-color-icon-positive-on-positive-secondary` | `#02542d` |
624
+ | `--clay-color-icon-positive-on-positive-tertiary` | `#024023` |
625
+ | `--clay-color-icon-warning-default` | `#522504` |
626
+ | `--clay-color-icon-warning-secondary` | `#975102` |
627
+ | `--clay-color-icon-warning-tertiary` | `#bf6a02` |
628
+ | `--clay-color-icon-warning-on-warning` | `#401b01` |
629
+ | `--clay-color-icon-warning-on-warning-tertiary` | `#522504` |
630
+ | `--clay-color-icon-danger-default` | `#900b09` |
631
+ | `--clay-color-icon-danger-secondary` | `#c00f0c` |
632
+ | `--clay-color-icon-danger-tertiary` | `#ec221f` |
633
+ | `--clay-color-icon-danger-on-danger` | `#fee9e7` |
634
+ | `--clay-color-icon-danger-on-danger-secondary` | `#900b09` |
635
+ | `--clay-color-icon-danger-on-danger-tertiary` | `#900b09` |
636
+ | `--clay-color-icon-brand-default` | `var(--clay-foundation-brand-color-iris-300)` |
637
+ | `--clay-color-icon-brand-on-brand-tertiary` | `var(--clay-foundation-brand-color-iris-300)` |
638
+
639
+ ## color-iris
640
+
641
+ | Token | Value |
642
+ |-------|-------|
643
+ | `--clay-color-iris-100` | `var(--clay-foundation-brand-color-iris-100)` |
644
+ | `--clay-color-iris-200` | `var(--clay-foundation-brand-color-iris-200)` |
645
+ | `--clay-color-iris-300` | `var(--clay-foundation-brand-color-iris-300)` |
646
+ | `--clay-color-iris-500` | `var(--clay-foundation-brand-color-iris-500)` |
647
+ | `--clay-color-iris-800` | `var(--clay-foundation-brand-color-iris-800)` |
648
+
649
+ ## color-lime
650
+
651
+ | Token | Value |
652
+ |-------|-------|
653
+ | `--clay-color-lime-500` | `var(--clay-foundation-brand-color-lime-500)` |
654
+
655
+ ## color-magenta
656
+
657
+ | Token | Value |
658
+ |-------|-------|
659
+ | `--clay-color-magenta-200` | `var(--clay-foundation-brand-color-magenta-200)` |
660
+ | `--clay-color-magenta-300` | `var(--clay-foundation-brand-color-magenta-300)` |
661
+ | `--clay-color-magenta-500` | `var(--clay-foundation-brand-color-magenta-500)` |
662
+ | `--clay-color-magenta-800` | `var(--clay-foundation-brand-color-magenta-800)` |
663
+ | `--clay-color-magenta-900` | `var(--clay-foundation-brand-color-magenta-900)` |
664
+
665
+ ## color-orange
666
+
667
+ | Token | Value |
668
+ |-------|-------|
669
+ | `--clay-color-orange-500` | `var(--clay-foundation-brand-color-orange-500)` |
670
+
671
+ ## color-pink
672
+
673
+ | Token | Value |
674
+ |-------|-------|
675
+ | `--clay-color-pink-100` | `var(--clay-foundation-brand-color-pink-100)` |
676
+ | `--clay-color-pink-500` | `var(--clay-foundation-brand-color-pink-500)` |
677
+
678
+ ## color-purple
679
+
680
+ | Token | Value |
681
+ |-------|-------|
682
+ | `--clay-color-purple-500` | `var(--clay-foundation-brand-color-purple-500)` |
683
+
684
+ ## color-stone
685
+
686
+ | Token | Value |
687
+ |-------|-------|
688
+ | `--clay-color-stone-100` | `var(--clay-foundation-brand-color-stone-100)` |
689
+ | `--clay-color-stone-200` | `var(--clay-foundation-brand-color-stone-200)` |
690
+
691
+ ## color-surface
692
+
693
+ | Token | Value |
694
+ |-------|-------|
695
+ | `--clay-color-surface-secondary` | `var(--clay-color-background-default-secondary)` |
696
+
697
+ ## color-teal
698
+
699
+ | Token | Value |
700
+ |-------|-------|
701
+ | `--clay-color-teal-300` | `var(--clay-foundation-brand-color-teal-300)` |
702
+ | `--clay-color-teal-500` | `var(--clay-foundation-brand-color-teal-500)` |
703
+
704
+ ## color-text
705
+
706
+ | Token | Value |
707
+ |-------|-------|
708
+ | `--clay-color-text-default-default` | `var(--clay-foundation-brand-color-grey-800)` |
709
+ | `--clay-color-text-default-tertiary` | `var(--clay-foundation-brand-color-grey-300)` |
710
+ | `--clay-color-text-disabled-default` | `var(--clay-foundation-brand-color-grey-500)` |
711
+ | `--clay-color-text-brand-default` | `var(--clay-foundation-brand-color-iris-300)` |
712
+ | `--clay-color-text-on-black` | `var(--clay-color-white)` |
713
+ | `--clay-color-text-on-dark` | `var(--clay-color-white)` |
714
+ | `--clay-color-text-on-brand-primary` | `var(--clay-color-white)` |
715
+
716
+ ## color-white
717
+
718
+ | Token | Value |
719
+ |-------|-------|
720
+ | `--clay-color-white-100` | `rgba(255, 255, 255, 0.15)` |
721
+ | `--clay-color-white-200` | `rgba(255, 255, 255, 0.25)` |
722
+ | `--clay-color-white-300` | `rgba(255, 255, 255, 0.3)` |
723
+ | `--clay-color-white-400` | `rgba(255, 255, 255, 0.7)` |
724
+ | `--clay-color-white-500` | `rgba(255, 255, 255, 0.85)` |
725
+ | `--clay-color-white` | `var(--clay-foundation-brand-color-grey-0)` |
726
+
727
+ ## color-yellow
728
+
729
+ | Token | Value |
730
+ |-------|-------|
731
+ | `--clay-color-yellow-100` | `var(--clay-foundation-brand-color-yellow-100)` |
732
+ | `--clay-color-yellow-500` | `var(--clay-foundation-brand-color-yellow-500)` |
733
+
734
+ ## customer-logo
735
+
736
+ | Token | Value |
737
+ |-------|-------|
738
+ | `--clay-customer-logo-color-on-light-surface` | `#000000` |
739
+ | `--clay-customer-logo-color-on-dark-surface` | `#ffffff` |
740
+ | `--clay-customer-logo-surface-light` | `var(--clay-color-background-default-secondary)` |
741
+ | `--clay-customer-logo-surface-dark` | `var(--clay-color-background-black-default)` |
742
+ | `--clay-customer-logo-label-on-light-surface` | `var(--clay-color-text-default-tertiary)` |
743
+ | `--clay-customer-logo-label-on-dark-surface` | `var(--clay-color-text-on-black)` |
744
+
745
+ ## customer-story
746
+
747
+ | Token | Value |
748
+ |-------|-------|
749
+ | `--clay-customer-story-card-avatar-size` | `56` |
750
+ | `--clay-customer-story-card-stat-media-size` | `314` |
751
+ | `--clay-customer-story-card-quote-icon-width` | `80` |
752
+ | `--clay-customer-story-card-quote-icon-width-mobile` | `53` |
753
+ | `--clay-customer-story-card-quote-with-picture-media-height` | `246` |
754
+ | `--clay-customer-story-card-mobile-min-height` | `513` |
755
+ | `--clay-customer-story-card-radius` | `var(--clay-radius-md)` |
756
+ | `--clay-customer-story-card-media-radius` | `var(--clay-radius-sm)` |
757
+ | `--clay-customer-story-card-avatar-radius` | `var(--clay-radius-full)` |
758
+ | `--clay-customer-story-card-stat-bg` | `var(--clay-color-grey-300)` |
759
+ | `--clay-customer-story-card-stat-padding` | `var(--clay-size-space-300)` |
760
+ | `--clay-customer-story-card-stat-gap` | `var(--clay-size-space-500)` |
761
+ | `--clay-customer-story-card-quote-bg` | `var(--clay-color-grey-300)` |
762
+ | `--clay-customer-story-card-quote-padding` | `var(--clay-size-space-300)` |
763
+ | `--clay-customer-story-card-quote-gap` | `var(--clay-size-space-500)` |
764
+ | `--clay-customer-story-card-quote-content-gap` | `var(--clay-size-space-400)` |
765
+ | `--clay-customer-story-card-quote-with-picture-border-color` | `var(--clay-color-grey-300)` |
766
+ | `--clay-customer-story-card-quote-with-picture-padding` | `var(--clay-size-space-400)` |
767
+ | `--clay-customer-story-card-quote-with-picture-gap` | `var(--clay-size-space-800)` |
768
+ | `--clay-customer-story-card-quote-with-picture-avatar-gap` | `var(--clay-size-space-400)` |
769
+ | `--clay-customer-story-card-mobile-gap` | `var(--clay-size-space-500)` |
770
+ | `--clay-customer-story-card-quote-with-picture-bg` | `var(--clay-color-background-default-default)` |
771
+
772
+ ## effect-device
773
+
774
+ | Token | Value |
775
+ |-------|-------|
776
+ | `--clay-effect-device-frame-shadow` | `0 12px 24px rgba(28, 29, 33, 0.12)` |
777
+
778
+ ## effect-glass
779
+
780
+ | Token | Value |
781
+ |-------|-------|
782
+ | `--clay-effect-glass-shadow` | `11.8px 4.7px 28.4px 0px rgba(23, 24, 28, 0.08), 0px 15px 50px 0px rgba(23, 24, 28, 0.3)` |
783
+ | `--clay-effect-glass-background` | `rgba(255, 255, 255, 0.1)` |
784
+ | `--clay-effect-glass-blur` | `33px` |
785
+ | `--clay-effect-glass-border` | `1px solid rgba(255, 255, 255, 0.12)` |
786
+
787
+ ## effect-shadow
788
+
789
+ | Token | Value |
790
+ |-------|-------|
791
+ | `--clay-effect-shadow-light` | `0px 0px 40px 0px rgba(23, 24, 28, 0.06)` |
792
+ | `--clay-effect-shadow-hard` | `0px 8px 40px 0px rgba(23, 24, 28, 0.12)` |
793
+ | `--clay-effect-shadow-rise-small` | `0px 4px 8px 0px rgba(23, 24, 28, 0.2)` |
794
+ | `--clay-effect-shadow-rise-medium` | `0px 6px 20px 0px rgba(23, 24, 28, 0.2)` |
795
+
796
+ ## email-type
797
+
798
+ | Token | Value |
799
+ |-------|-------|
800
+ | `--clay-email-type-h1-line-height` | `1.1` |
801
+ | `--clay-email-type-h1-letter-spacing` | `-1` |
802
+ | `--clay-email-type-h2-line-height` | `1.3` |
803
+ | `--clay-email-type-h2-letter-spacing` | `-1` |
804
+ | `--clay-email-type-h3-line-height` | `1.3` |
805
+ | `--clay-email-type-h3-letter-spacing` | `-1` |
806
+ | `--clay-email-type-h4-line-height` | `1.3` |
807
+ | `--clay-email-type-h4-letter-spacing` | `0` |
808
+ | `--clay-email-type-h5-line-height` | `1.3` |
809
+ | `--clay-email-type-h5-letter-spacing` | `0` |
810
+ | `--clay-email-type-p1-line-height` | `1.4` |
811
+ | `--clay-email-type-p1-letter-spacing` | `0` |
812
+ | `--clay-email-type-p2-size` | `15` |
813
+ | `--clay-email-type-p2-size-mobile` | `15` |
814
+ | `--clay-email-type-p2-line-height` | `1.4` |
815
+ | `--clay-email-type-p2-letter-spacing` | `0` |
816
+ | `--clay-email-type-p3-line-height` | `1.5` |
817
+ | `--clay-email-type-p3-letter-spacing` | `0` |
818
+ | `--clay-email-type-p4-line-height` | `1.5` |
819
+ | `--clay-email-type-p4-letter-spacing` | `0` |
820
+ | `--clay-email-type-button-line-height` | `1` |
821
+ | `--clay-email-type-button-letter-spacing` | `0` |
822
+ | `--clay-email-type-family` | `var(--clay-foundation-type-family-sans)` |
823
+ | `--clay-email-type-weight-regular` | `var(--clay-foundation-type-weight-regular)` |
824
+ | `--clay-email-type-weight-semi` | `var(--clay-foundation-type-weight-semi)` |
825
+ | `--clay-email-type-weight-bold` | `var(--clay-foundation-type-weight-bold)` |
826
+ | `--clay-email-type-h1-size` | `var(--clay-foundation-type-size-1300)` |
827
+ | `--clay-email-type-h1-size-mobile` | `var(--clay-foundation-type-size-1100)` |
828
+ | `--clay-email-type-h2-size` | `var(--clay-foundation-type-size-1100)` |
829
+ | `--clay-email-type-h2-size-mobile` | `var(--clay-foundation-type-size-950)` |
830
+ | `--clay-email-type-h3-size` | `var(--clay-foundation-type-size-950)` |
831
+ | `--clay-email-type-h3-size-mobile` | `var(--clay-foundation-type-size-800)` |
832
+ | `--clay-email-type-h4-size` | `var(--clay-foundation-type-size-800)` |
833
+ | `--clay-email-type-h4-size-mobile` | `var(--clay-foundation-type-size-600)` |
834
+ | `--clay-email-type-h5-size` | `var(--clay-foundation-type-size-600)` |
835
+ | `--clay-email-type-h5-size-mobile` | `var(--clay-foundation-type-size-600)` |
836
+ | `--clay-email-type-p1-size` | `var(--clay-foundation-type-size-300)` |
837
+ | `--clay-email-type-p1-size-mobile` | `var(--clay-foundation-type-size-300)` |
838
+ | `--clay-email-type-p3-size` | `var(--clay-foundation-type-size-200)` |
839
+ | `--clay-email-type-p3-size-mobile` | `var(--clay-foundation-type-size-200)` |
840
+ | `--clay-email-type-p4-size` | `var(--clay-foundation-type-size-100)` |
841
+ | `--clay-email-type-p4-size-mobile` | `var(--clay-foundation-type-size-100)` |
842
+ | `--clay-email-type-button-size` | `var(--clay-foundation-type-size-300)` |
843
+ | `--clay-email-type-button-weight` | `var(--clay-foundation-type-weight-regular)` |
844
+
845
+ ## foundation-brand
846
+
847
+ | Token | Value |
848
+ |-------|-------|
849
+ | `--clay-foundation-brand-color-grey-100` | `#f3f4f5` |
850
+ | `--clay-foundation-brand-color-grey-200` | `#e6e7ea` |
851
+ | `--clay-foundation-brand-color-grey-300` | `#cacbcd` |
852
+ | `--clay-foundation-brand-color-grey-500` | `#7c7b7b` |
853
+ | `--clay-foundation-brand-color-grey-800` | `#252526` |
854
+ | `--clay-foundation-brand-color-yellow-100` | `#fff8da` |
855
+ | `--clay-foundation-brand-color-lime-500` | `#e5ff00` |
856
+ | `--clay-foundation-brand-color-stone-100` | `#f7f3ea` |
857
+ | `--clay-foundation-brand-color-stone-200` | `#f2e7d6` |
858
+ | `--clay-foundation-brand-color-harvest-500` | `#fe9b0b` |
859
+ | `--clay-foundation-brand-color-orange-500` | `#ff6b10` |
860
+ | `--clay-foundation-brand-color-magenta-200` | `#fff1fc` |
861
+ | `--clay-foundation-brand-color-magenta-300` | `#ffdbf7` |
862
+ | `--clay-foundation-brand-color-magenta-800` | `#8b0038` |
863
+ | `--clay-foundation-brand-color-magenta-900` | `#4f0000` |
864
+ | `--clay-foundation-brand-color-pink-100` | `#f6eff4` |
865
+ | `--clay-foundation-brand-color-pink-500` | `#fd84e2` |
866
+ | `--clay-foundation-brand-color-iris-100` | `#ebf0ff` |
867
+ | `--clay-foundation-brand-color-iris-200` | `#d9d7ff` |
868
+ | `--clay-foundation-brand-color-iris-500` | `#4b00d7` |
869
+ | `--clay-foundation-brand-color-iris-800` | `#20005c` |
870
+ | `--clay-foundation-brand-color-blue-100` | `#eff5fd` |
871
+ | `--clay-foundation-brand-color-blue-200` | `#cee5fe` |
872
+ | `--clay-foundation-brand-color-blue-500` | `#1e88fd` |
873
+ | `--clay-foundation-brand-color-blue-800` | `#003ea8` |
874
+ | `--clay-foundation-brand-color-teal-300` | `#7ef1f1` |
875
+ | `--clay-foundation-brand-color-teal-500` | `#00d2d2` |
876
+ | `--clay-foundation-brand-color-green-100` | `#e8fff4` |
877
+ | `--clay-foundation-brand-color-green-200` | `#ceead6` |
878
+ | `--clay-foundation-brand-color-green-800` | `#018158` |
879
+ | `--clay-foundation-brand-color-green-900` | `#014840` |
880
+
881
+ ## foundation-effect
882
+
883
+ | Token | Value |
884
+ |-------|-------|
885
+ | `--clay-foundation-effect-shadow-sm` | `0px 1px 2px 0px rgba(23, 24, 28, 0.06)` |
886
+ | `--clay-foundation-effect-shadow-md` | `0px 8px 24px -4px rgba(23, 24, 28, 0.08)` |
887
+ | `--clay-foundation-effect-shadow-lg` | `0px 16px 40px -8px rgba(23, 24, 28, 0.14)` |
888
+ | `--clay-foundation-effect-shadow-xl` | `0px 30px 60px -16px rgba(23, 24, 28, 0.2)` |
889
+ | `--clay-foundation-effect-blur-sm` | `40px` |
890
+ | `--clay-foundation-effect-blur-md` | `90px` |
891
+ | `--clay-foundation-effect-blur-lg` | `120px` |
892
+ | `--clay-foundation-effect-blur-xl` | `160px` |
893
+
894
+ ## foundation-radius
895
+
896
+ | Token | Value |
897
+ |-------|-------|
898
+ | `--clay-foundation-radius-none` | `0` |
899
+ | `--clay-foundation-radius-xs` | `4` |
900
+ | `--clay-foundation-radius-sm` | `8` |
901
+ | `--clay-foundation-radius-md` | `12` |
902
+ | `--clay-foundation-radius-lg` | `16` |
903
+ | `--clay-foundation-radius-xl` | `20` |
904
+ | `--clay-foundation-radius-2xl` | `24` |
905
+ | `--clay-foundation-radius-3xl` | `32` |
906
+ | `--clay-foundation-radius-4xl` | `40` |
907
+ | `--clay-foundation-radius-full` | `9999` |
908
+
909
+ ## foundation-spacing
910
+
911
+ | Token | Value |
912
+ |-------|-------|
913
+ | `--clay-foundation-spacing-0` | `0` |
914
+ | `--clay-foundation-spacing-2` | `2` |
915
+ | `--clay-foundation-spacing-4` | `4` |
916
+ | `--clay-foundation-spacing-6` | `6` |
917
+ | `--clay-foundation-spacing-8` | `8` |
918
+ | `--clay-foundation-spacing-12` | `12` |
919
+ | `--clay-foundation-spacing-16` | `16` |
920
+ | `--clay-foundation-spacing-20` | `20` |
921
+ | `--clay-foundation-spacing-24` | `24` |
922
+ | `--clay-foundation-spacing-32` | `32` |
923
+ | `--clay-foundation-spacing-40` | `40` |
924
+ | `--clay-foundation-spacing-48` | `48` |
925
+ | `--clay-foundation-spacing-64` | `64` |
926
+ | `--clay-foundation-spacing-80` | `80` |
927
+ | `--clay-foundation-spacing-96` | `96` |
928
+ | `--clay-foundation-spacing-120` | `120` |
929
+ | `--clay-foundation-spacing-160` | `160` |
930
+ | `--clay-foundation-spacing-180` | `180` |
931
+
932
+ ## foundation-stroke
933
+
934
+ | Token | Value |
935
+ |-------|-------|
936
+ | `--clay-foundation-stroke-width` | `1` |
937
+ | `--clay-foundation-stroke-color` | `#cacbcd` |
938
+
939
+ ## foundation-type
940
+
941
+ | Token | Value |
942
+ |-------|-------|
943
+ | `--clay-foundation-type-family-sans` | `Poppins, sans-serif` |
944
+ | `--clay-foundation-type-family-platform` | `Figtree, system-ui, sans-serif` |
945
+ | `--clay-foundation-type-weight-light` | `300` |
946
+ | `--clay-foundation-type-weight-regular` | `400` |
947
+ | `--clay-foundation-type-weight-medium` | `500` |
948
+ | `--clay-foundation-type-weight-semi` | `600` |
949
+ | `--clay-foundation-type-weight-bold` | `700` |
950
+ | `--clay-foundation-type-size-50` | `8` |
951
+ | `--clay-foundation-type-size-75` | `10` |
952
+ | `--clay-foundation-type-size-100` | `12` |
953
+ | `--clay-foundation-type-size-200` | `14` |
954
+ | `--clay-foundation-type-size-300` | `16` |
955
+ | `--clay-foundation-type-size-400` | `18` |
956
+ | `--clay-foundation-type-size-500` | `20` |
957
+ | `--clay-foundation-type-size-600` | `24` |
958
+ | `--clay-foundation-type-size-700` | `28` |
959
+ | `--clay-foundation-type-size-800` | `32` |
960
+ | `--clay-foundation-type-size-900` | `38` |
961
+ | `--clay-foundation-type-size-950` | `40` |
962
+ | `--clay-foundation-type-size-1000` | `44` |
963
+ | `--clay-foundation-type-size-1100` | `48` |
964
+ | `--clay-foundation-type-size-1200` | `55` |
965
+ | `--clay-foundation-type-size-1300` | `56` |
966
+ | `--clay-foundation-type-size-1400` | `64` |
967
+ | `--clay-foundation-type-size-1500` | `72` |
968
+ | `--clay-foundation-type-size-1600` | `110` |
969
+ | `--clay-foundation-type-size-1700` | `200` |
970
+
971
+ ## hover-flip
972
+
973
+ | Token | Value |
974
+ |-------|-------|
975
+ | `--clay-hover-flip-card-heading-line-height` | `1.2` |
976
+ | `--clay-hover-flip-card-heading-size` | `var(--clay-web-type-h3-desktop-size)` |
977
+ | `--clay-hover-flip-card-heading-size-mobile` | `var(--clay-web-type-h3-mobile-size)` |
978
+ | `--clay-hover-flip-card-heading-letter-spacing` | `var(--clay-web-type-h3-desktop-letter-spacing)` |
979
+ | `--clay-hover-flip-card-desc-size` | `var(--clay-web-type-p2-size)` |
980
+ | `--clay-hover-flip-card-radius` | `var(--clay-radius-md)` |
981
+ | `--clay-hover-flip-card-padding-mobile` | `var(--clay-size-space-600)` |
982
+ | `--clay-hover-flip-card-padding-top` | `var(--clay-size-space-1200)` |
983
+ | `--clay-hover-flip-card-padding-x` | `var(--clay-size-space-800)` |
984
+ | `--clay-hover-flip-card-padding-bottom` | `var(--clay-size-space-1200)` |
985
+ | `--clay-hover-flip-card-gap` | `var(--clay-size-space-1000)` |
986
+ | `--clay-hover-flip-card-shape-gap` | `var(--clay-size-space-400)` |
987
+ | `--clay-hover-flip-card-text-gap` | `var(--clay-size-space-300)` |
988
+ | `--clay-hover-flip-card-shape-size` | `var(--clay-size-space-1000)` |
989
+ | `--clay-hover-flip-card-icon-size` | `var(--clay-size-space-1000)` |
990
+ | `--clay-hover-flip-card-bg` | `var(--clay-color-grey-200)` |
991
+ | `--clay-hover-flip-card-heading-weight` | `var(--clay-web-type-weight-regular)` |
992
+ | `--clay-hover-flip-card-desc-weight` | `var(--clay-web-type-weight-regular)` |
993
+
994
+ ## input-bg
995
+
996
+ | Token | Value |
997
+ |-------|-------|
998
+ | `--clay-input-bg` | `var(--clay-color-background-default-default)` |
999
+
1000
+ ## input-border
1001
+
1002
+ | Token | Value |
1003
+ |-------|-------|
1004
+ | `--clay-input-border-color` | `var(--clay-color-border-default-secondary)` |
1005
+ | `--clay-input-border-color-hover` | `var(--clay-color-border-default-tertiary)` |
1006
+ | `--clay-input-border-color-focus` | `var(--clay-color-border-brand-default)` |
1007
+
1008
+ ## input-color
1009
+
1010
+ | Token | Value |
1011
+ |-------|-------|
1012
+ | `--clay-input-color` | `var(--clay-color-text-default-default)` |
1013
+
1014
+ ## input-disabled
1015
+
1016
+ | Token | Value |
1017
+ |-------|-------|
1018
+ | `--clay-input-disabled-bg` | `var(--clay-color-background-disabled-default)` |
1019
+ | `--clay-input-disabled-color` | `var(--clay-color-text-disabled-default)` |
1020
+
1021
+ ## input-error
1022
+
1023
+ | Token | Value |
1024
+ |-------|-------|
1025
+ | `--clay-input-error-border-color` | `var(--clay-color-border-danger-default)` |
1026
+ | `--clay-input-error-focus-ring-color` | `var(--clay-color-background-danger-tertiary)` |
1027
+
1028
+ ## input-focus
1029
+
1030
+ | Token | Value |
1031
+ |-------|-------|
1032
+ | `--clay-input-focus-ring-color` | `var(--clay-color-background-brand-secondary)` |
1033
+
1034
+ ## input-font
1035
+
1036
+ | Token | Value |
1037
+ |-------|-------|
1038
+ | `--clay-input-font-size` | `var(--clay-web-type-p3-size)` |
1039
+
1040
+ ## input-label
1041
+
1042
+ | Token | Value |
1043
+ |-------|-------|
1044
+ | `--clay-input-label-font-size` | `var(--clay-web-type-p4-size)` |
1045
+ | `--clay-input-label-font-weight` | `var(--clay-web-type-weight-semi)` |
1046
+ | `--clay-input-label-color` | `var(--clay-color-text-default-default)` |
1047
+
1048
+ ## input-padding
1049
+
1050
+ | Token | Value |
1051
+ |-------|-------|
1052
+ | `--clay-input-padding-y` | `var(--clay-size-space-200)` |
1053
+ | `--clay-input-padding-x` | `var(--clay-size-space-300)` |
1054
+
1055
+ ## input-placeholder
1056
+
1057
+ | Token | Value |
1058
+ |-------|-------|
1059
+ | `--clay-input-placeholder-color` | `var(--clay-color-text-default-tertiary)` |
1060
+
1061
+ ## input-radius
1062
+
1063
+ | Token | Value |
1064
+ |-------|-------|
1065
+ | `--clay-input-radius` | `var(--clay-radius-sm)` |
1066
+
1067
+ ## integration-card
1068
+
1069
+ | Token | Value |
1070
+ |-------|-------|
1071
+ | `--clay-integration-card-width` | `220` |
1072
+ | `--clay-integration-card-min-height` | `80` |
1073
+ | `--clay-integration-card-label-size` | `var(--clay-web-type-p3-size)` |
1074
+ | `--clay-integration-card-padding-y` | `var(--clay-size-space-400)` |
1075
+ | `--clay-integration-card-padding-x` | `var(--clay-size-space-600)` |
1076
+ | `--clay-integration-card-gap` | `var(--clay-size-space-300)` |
1077
+ | `--clay-integration-card-radius` | `var(--clay-radius-lg)` |
1078
+ | `--clay-integration-card-bg` | `var(--clay-color-grey-100)` |
1079
+ | `--clay-integration-card-label-weight` | `var(--clay-web-type-weight-medium)` |
1080
+ | `--clay-integration-card-label-color` | `var(--clay-color-grey-800)` |
1081
+
1082
+ ## layout-container
1083
+
1084
+ | Token | Value |
1085
+ |-------|-------|
1086
+ | `--clay-layout-container-max-width` | `1440` |
1087
+ | `--clay-layout-container-large` | `1440` |
1088
+ | `--clay-layout-container-narrow` | `1220` |
1089
+ | `--clay-layout-container-wide` | `1440` |
1090
+
1091
+ ## layout-demo
1092
+
1093
+ | Token | Value |
1094
+ |-------|-------|
1095
+ | `--clay-layout-demo-media-column-narrow` | `280` |
1096
+
1097
+ ## layout-drawer
1098
+
1099
+ | Token | Value |
1100
+ |-------|-------|
1101
+ | `--clay-layout-drawer-max-height` | `80vh` |
1102
+
1103
+ ## layout-footer
1104
+
1105
+ | Token | Value |
1106
+ |-------|-------|
1107
+ | `--clay-layout-footer-link-gap` | `16` |
1108
+ | `--clay-layout-footer-heading-to-links` | `16` |
1109
+ | `--clay-layout-footer-logo-to-links` | `24` |
1110
+ | `--clay-layout-footer-column-gap` | `64` |
1111
+
1112
+ ## layout-grid
1113
+
1114
+ | Token | Value |
1115
+ |-------|-------|
1116
+ | `--clay-layout-grid-columns` | `12` |
1117
+ | `--clay-layout-grid-gutter` | `20` |
1118
+ | `--clay-layout-grid-margin` | `80` |
1119
+ | `--clay-layout-grid-margin-mobile` | `24` |
1120
+
1121
+ ## layout-header
1122
+
1123
+ | Token | Value |
1124
+ |-------|-------|
1125
+ | `--clay-layout-header-padding-y` | `20` |
1126
+ | `--clay-layout-header-padding-x` | `24` |
1127
+ | `--clay-layout-header-nav-gap` | `8` |
1128
+ | `--clay-layout-header-logo-size` | `24` |
1129
+
1130
+ ## layout-input
1131
+
1132
+ | Token | Value |
1133
+ |-------|-------|
1134
+ | `--clay-layout-input-max-width` | `320` |
1135
+
1136
+ ## layout-logo
1137
+
1138
+ | Token | Value |
1139
+ |-------|-------|
1140
+ | `--clay-layout-logo-strip-height` | `32` |
1141
+ | `--clay-layout-logo-strip-height-md` | `40` |
1142
+
1143
+ ## layout-mobile
1144
+
1145
+ | Token | Value |
1146
+ |-------|-------|
1147
+ | `--clay-layout-mobile-preview-width` | `390` |
1148
+
1149
+ ## layout-section
1150
+
1151
+ | Token | Value |
1152
+ |-------|-------|
1153
+ | `--clay-layout-section-padding-y` | `64` |
1154
+ | `--clay-layout-section-padding-x` | `80` |
1155
+ | `--clay-layout-section-padding-x-mobile` | `24` |
1156
+
1157
+ ## marketing-customer
1158
+
1159
+ | Token | Value |
1160
+ |-------|-------|
1161
+ | `--clay-marketing-customer-logo-height` | `48` |
1162
+ | `--clay-marketing-customer-logo-color-on-light-surface` | `var(--clay-customer-logo-color-on-light-surface)` |
1163
+ | `--clay-marketing-customer-logo-color-on-dark-surface` | `var(--clay-customer-logo-color-on-dark-surface)` |
1164
+ | `--clay-marketing-customer-logo-surface-light` | `var(--clay-customer-logo-surface-light)` |
1165
+ | `--clay-marketing-customer-logo-surface-dark` | `var(--clay-customer-logo-surface-dark)` |
1166
+
1167
+ ## motion-duration
1168
+
1169
+ | Token | Value |
1170
+ |-------|-------|
1171
+ | `--clay-motion-duration-instant` | `0ms` |
1172
+ | `--clay-motion-duration-fast` | `150ms` |
1173
+ | `--clay-motion-duration-normal` | `220ms` |
1174
+ | `--clay-motion-duration-slow` | `320ms` |
1175
+
1176
+ ## motion-easing
1177
+
1178
+ | Token | Value |
1179
+ |-------|-------|
1180
+ | `--clay-motion-easing-default` | `cubic-bezier(0.25, 0.1, 0.25, 1)` |
1181
+ | `--clay-motion-easing-out` | `cubic-bezier(0, 0, 0.2, 1)` |
1182
+ | `--clay-motion-easing-in` | `cubic-bezier(0.4, 0, 1, 1)` |
1183
+ | `--clay-motion-easing-in-out` | `cubic-bezier(0.4, 0, 0.2, 1)` |
1184
+ | `--clay-motion-easing-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
1185
+
1186
+ ## motion-transition
1187
+
1188
+ | Token | Value |
1189
+ |-------|-------|
1190
+ | `--clay-motion-transition-fast` | `var(--clay-motion-duration-fast) var(--clay-motion-easing-out)` |
1191
+ | `--clay-motion-transition-normal` | `var(--clay-motion-duration-normal) var(--clay-motion-easing-out)` |
1192
+
1193
+ ## platform-type
1194
+
1195
+ | Token | Value |
1196
+ |-------|-------|
1197
+ | `--clay-platform-type-headline-xl-600-size` | `40` |
1198
+ | `--clay-platform-type-headline-xl-600-line-height` | `46` |
1199
+ | `--clay-platform-type-headline-xl-600-letter-spacing` | `0` |
1200
+ | `--clay-platform-type-headline-md-400-size` | `24` |
1201
+ | `--clay-platform-type-headline-md-400-line-height` | `1` |
1202
+ | `--clay-platform-type-headline-md-400-letter-spacing` | `-1` |
1203
+ | `--clay-platform-type-headline-md-300-size` | `24` |
1204
+ | `--clay-platform-type-headline-md-300-line-height` | `1` |
1205
+ | `--clay-platform-type-headline-md-300-letter-spacing` | `-1` |
1206
+ | `--clay-platform-type-headline-sm-500-size` | `18` |
1207
+ | `--clay-platform-type-headline-sm-500-line-height` | `1` |
1208
+ | `--clay-platform-type-headline-sm-500-letter-spacing` | `0` |
1209
+ | `--clay-platform-type-label-lg-600-size` | `16` |
1210
+ | `--clay-platform-type-label-lg-600-line-height` | `1` |
1211
+ | `--clay-platform-type-label-lg-600-letter-spacing` | `0` |
1212
+ | `--clay-platform-type-label-lg-400-size` | `16` |
1213
+ | `--clay-platform-type-label-lg-400-line-height` | `1` |
1214
+ | `--clay-platform-type-label-lg-400-letter-spacing` | `0` |
1215
+ | `--clay-platform-type-label-md-400-size` | `14` |
1216
+ | `--clay-platform-type-label-md-400-line-height` | `1` |
1217
+ | `--clay-platform-type-label-md-400-letter-spacing` | `0` |
1218
+ | `--clay-platform-type-label-sm-400-size` | `12` |
1219
+ | `--clay-platform-type-label-sm-400-line-height` | `1` |
1220
+ | `--clay-platform-type-label-sm-400-letter-spacing` | `0` |
1221
+ | `--clay-platform-type-caption-sm-600-size` | `10` |
1222
+ | `--clay-platform-type-caption-sm-600-line-height` | `8` |
1223
+ | `--clay-platform-type-caption-sm-600-letter-spacing` | `0` |
1224
+ | `--clay-platform-type-caption-sm-400-size` | `10` |
1225
+ | `--clay-platform-type-caption-sm-400-line-height` | `8` |
1226
+ | `--clay-platform-type-caption-sm-400-letter-spacing` | `0` |
1227
+ | `--clay-platform-type-caption-xs-400-size` | `8` |
1228
+ | `--clay-platform-type-caption-xs-400-line-height` | `8` |
1229
+ | `--clay-platform-type-caption-xs-400-letter-spacing` | `0` |
1230
+ | `--clay-platform-type-family` | `var(--clay-foundation-type-family-platform)` |
1231
+ | `--clay-platform-type-family-sans` | `var(--clay-foundation-type-family-sans)` |
1232
+ | `--clay-platform-type-family-platform` | `var(--clay-foundation-type-family-platform)` |
1233
+ | `--clay-platform-type-weight-light` | `var(--clay-foundation-type-weight-light)` |
1234
+ | `--clay-platform-type-weight-regular` | `var(--clay-foundation-type-weight-regular)` |
1235
+ | `--clay-platform-type-weight-medium` | `var(--clay-foundation-type-weight-medium)` |
1236
+ | `--clay-platform-type-weight-semi` | `var(--clay-foundation-type-weight-semi)` |
1237
+ | `--clay-platform-type-weight-bold` | `var(--clay-foundation-type-weight-bold)` |
1238
+ | `--clay-platform-type-headline-xl-600-weight` | `var(--clay-foundation-type-weight-medium)` |
1239
+ | `--clay-platform-type-headline-md-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1240
+ | `--clay-platform-type-headline-md-300-weight` | `var(--clay-foundation-type-weight-light)` |
1241
+ | `--clay-platform-type-headline-sm-500-weight` | `var(--clay-foundation-type-weight-medium)` |
1242
+ | `--clay-platform-type-label-lg-600-weight` | `var(--clay-foundation-type-weight-semi)` |
1243
+ | `--clay-platform-type-label-lg-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1244
+ | `--clay-platform-type-label-md-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1245
+ | `--clay-platform-type-label-sm-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1246
+ | `--clay-platform-type-caption-sm-600-weight` | `var(--clay-foundation-type-weight-semi)` |
1247
+ | `--clay-platform-type-caption-sm-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1248
+ | `--clay-platform-type-caption-xs-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1249
+
1250
+ ## radius-2xl
1251
+
1252
+ | Token | Value |
1253
+ |-------|-------|
1254
+ | `--clay-radius-2xl` | `var(--clay-foundation-radius-2xl)` |
1255
+
1256
+ ## radius-3xl
1257
+
1258
+ | Token | Value |
1259
+ |-------|-------|
1260
+ | `--clay-radius-3xl` | `var(--clay-foundation-radius-3xl)` |
1261
+
1262
+ ## radius-4xl
1263
+
1264
+ | Token | Value |
1265
+ |-------|-------|
1266
+ | `--clay-radius-4xl` | `var(--clay-foundation-radius-4xl)` |
1267
+
1268
+ ## radius-full
1269
+
1270
+ | Token | Value |
1271
+ |-------|-------|
1272
+ | `--clay-radius-full` | `var(--clay-foundation-radius-full)` |
1273
+
1274
+ ## radius-lg
1275
+
1276
+ | Token | Value |
1277
+ |-------|-------|
1278
+ | `--clay-radius-lg` | `var(--clay-foundation-radius-lg)` |
1279
+
1280
+ ## radius-md
1281
+
1282
+ | Token | Value |
1283
+ |-------|-------|
1284
+ | `--clay-radius-md` | `var(--clay-foundation-radius-md)` |
1285
+
1286
+ ## radius-none
1287
+
1288
+ | Token | Value |
1289
+ |-------|-------|
1290
+ | `--clay-radius-none` | `var(--clay-foundation-radius-none)` |
1291
+
1292
+ ## radius-sm
1293
+
1294
+ | Token | Value |
1295
+ |-------|-------|
1296
+ | `--clay-radius-sm` | `var(--clay-foundation-radius-sm)` |
1297
+
1298
+ ## radius-xl
1299
+
1300
+ | Token | Value |
1301
+ |-------|-------|
1302
+ | `--clay-radius-xl` | `var(--clay-foundation-radius-xl)` |
1303
+
1304
+ ## radius-xs
1305
+
1306
+ | Token | Value |
1307
+ |-------|-------|
1308
+ | `--clay-radius-xs` | `var(--clay-foundation-radius-xs)` |
1309
+
1310
+ ## search-active
1311
+
1312
+ | Token | Value |
1313
+ |-------|-------|
1314
+ | `--clay-search-active-text` | `var(--clay-color-black)` |
1315
+ | `--clay-search-active-button-bg` | `var(--clay-color-black)` |
1316
+ | `--clay-search-active-border` | `var(--clay-color-grey-800)` |
1317
+ | `--clay-search-active-icon-color` | `var(--clay-color-text-on-black)` |
1318
+
1319
+ ## search-border
1320
+
1321
+ | Token | Value |
1322
+ |-------|-------|
1323
+ | `--clay-search-border-width` | `var(--clay-size-stroke-border)` |
1324
+
1325
+ ## search-button
1326
+
1327
+ | Token | Value |
1328
+ |-------|-------|
1329
+ | `--clay-search-button-size` | `44` |
1330
+ | `--clay-search-button-radius` | `var(--clay-radius-full)` |
1331
+
1332
+ ## search-font
1333
+
1334
+ | Token | Value |
1335
+ |-------|-------|
1336
+ | `--clay-search-font-size` | `var(--clay-web-type-p5-size)` |
1337
+ | `--clay-search-font-weight` | `var(--clay-web-type-weight-regular)` |
1338
+
1339
+ ## search-gap
1340
+
1341
+ | Token | Value |
1342
+ |-------|-------|
1343
+ | `--clay-search-gap` | `var(--clay-size-space-200)` |
1344
+
1345
+ ## search-icon
1346
+
1347
+ | Token | Value |
1348
+ |-------|-------|
1349
+ | `--clay-search-icon-size` | `var(--clay-size-space-600)` |
1350
+
1351
+ ## search-idle
1352
+
1353
+ | Token | Value |
1354
+ |-------|-------|
1355
+ | `--clay-search-idle-text` | `var(--clay-color-black)` |
1356
+ | `--clay-search-idle-border` | `var(--clay-color-grey-300)` |
1357
+ | `--clay-search-idle-placeholder` | `var(--clay-color-grey-500)` |
1358
+ | `--clay-search-idle-button-bg` | `var(--clay-color-grey-300)` |
1359
+ | `--clay-search-idle-icon-color` | `var(--clay-color-text-on-black)` |
1360
+
1361
+ ## search-line
1362
+
1363
+ | Token | Value |
1364
+ |-------|-------|
1365
+ | `--clay-search-line-height` | `1.5` |
1366
+
1367
+ ## search-padding
1368
+
1369
+ | Token | Value |
1370
+ |-------|-------|
1371
+ | `--clay-search-padding-left` | `var(--clay-size-space-400)` |
1372
+ | `--clay-search-padding-right` | `var(--clay-size-space-200)` |
1373
+ | `--clay-search-padding-y` | `var(--clay-size-space-200)` |
1374
+
1375
+ ## search-radius
1376
+
1377
+ | Token | Value |
1378
+ |-------|-------|
1379
+ | `--clay-search-radius` | `var(--clay-radius-full)` |
1380
+
1381
+ ## size-blur
1382
+
1383
+ | Token | Value |
1384
+ |-------|-------|
1385
+ | `--clay-size-blur-100` | `4` |
1386
+
1387
+ ## size-depth
1388
+
1389
+ | Token | Value |
1390
+ |-------|-------|
1391
+ | `--clay-size-depth-0` | `0` |
1392
+ | `--clay-size-depth-100` | `4` |
1393
+ | `--clay-size-depth-400` | `16` |
1394
+ | `--clay-size-depth-800` | `32` |
1395
+ | `--clay-size-depth-025` | `1` |
1396
+ | `--clay-size-depth-negative-025` | `-1` |
1397
+ | `--clay-size-depth-negative-100` | `-4` |
1398
+ | `--clay-size-depth-negative-200` | `-8` |
1399
+
1400
+ ## size-focus
1401
+
1402
+ | Token | Value |
1403
+ |-------|-------|
1404
+ | `--clay-size-focus-outline-offset` | `2` |
1405
+
1406
+ ## size-icon
1407
+
1408
+ | Token | Value |
1409
+ |-------|-------|
1410
+ | `--clay-size-icon-small` | `24` |
1411
+ | `--clay-size-icon-xsmall` | `12` |
1412
+ | `--clay-size-icon-check` | `14` |
1413
+ | `--clay-size-icon-menu` | `20` |
1414
+
1415
+ ## size-input
1416
+
1417
+ | Token | Value |
1418
+ |-------|-------|
1419
+ | `--clay-size-input-min-height` | `40` |
1420
+
1421
+ ## size-padding
1422
+
1423
+ | Token | Value |
1424
+ |-------|-------|
1425
+ | `--clay-size-padding-xl` | `24` |
1426
+
1427
+ ## size-space
1428
+
1429
+ | Token | Value |
1430
+ |-------|-------|
1431
+ | `--clay-size-space-0` | `var(--clay-foundation-spacing-0)` |
1432
+ | `--clay-size-space-50` | `var(--clay-foundation-spacing-2)` |
1433
+ | `--clay-size-space-100` | `var(--clay-foundation-spacing-4)` |
1434
+ | `--clay-size-space-150` | `var(--clay-foundation-spacing-6)` |
1435
+ | `--clay-size-space-200` | `var(--clay-foundation-spacing-8)` |
1436
+ | `--clay-size-space-300` | `var(--clay-foundation-spacing-12)` |
1437
+ | `--clay-size-space-400` | `var(--clay-foundation-spacing-16)` |
1438
+ | `--clay-size-space-500` | `var(--clay-foundation-spacing-20)` |
1439
+ | `--clay-size-space-600` | `var(--clay-foundation-spacing-24)` |
1440
+ | `--clay-size-space-800` | `var(--clay-foundation-spacing-32)` |
1441
+ | `--clay-size-space-1000` | `var(--clay-foundation-spacing-40)` |
1442
+ | `--clay-size-space-1200` | `var(--clay-foundation-spacing-48)` |
1443
+ | `--clay-size-space-1600` | `var(--clay-foundation-spacing-64)` |
1444
+ | `--clay-size-space-2000` | `var(--clay-foundation-spacing-80)` |
1445
+ | `--clay-size-space-2400` | `var(--clay-foundation-spacing-96)` |
1446
+ | `--clay-size-space-3000` | `var(--clay-foundation-spacing-120)` |
1447
+ | `--clay-size-space-4000` | `var(--clay-foundation-spacing-160)` |
1448
+ | `--clay-size-space-4500` | `var(--clay-foundation-spacing-180)` |
1449
+
1450
+ ## size-stroke
1451
+
1452
+ | Token | Value |
1453
+ |-------|-------|
1454
+ | `--clay-size-stroke-focus-ring` | `2` |
1455
+ | `--clay-size-stroke-border` | `var(--clay-foundation-stroke-width)` |
1456
+
1457
+ ## size-toggle
1458
+
1459
+ | Token | Value |
1460
+ |-------|-------|
1461
+ | `--clay-size-toggle-track-width` | `40` |
1462
+ | `--clay-size-toggle-thumb` | `16` |
1463
+ | `--clay-size-toggle-thumb-offset` | `4` |
1464
+
1465
+ ## slider-arrow
1466
+
1467
+ | Token | Value |
1468
+ |-------|-------|
1469
+ | `--clay-slider-arrow-border-color` | `var(--clay-color-black)` |
1470
+ | `--clay-slider-arrow-color` | `var(--clay-color-black)` |
1471
+ | `--clay-slider-arrow-icon-size` | `var(--clay-size-icon-small)` |
1472
+ | `--clay-slider-arrow-padding` | `var(--clay-size-space-300)` |
1473
+ | `--clay-slider-arrow-radius` | `var(--clay-radius-full)` |
1474
+ | `--clay-slider-arrow-bg-hover` | `var(--clay-color-background-default-default-hover)` |
1475
+ | `--clay-slider-arrow-disabled-border-color` | `var(--clay-color-grey-300)` |
1476
+ | `--clay-slider-arrow-disabled-color` | `var(--clay-color-grey-300)` |
1477
+ | `--clay-slider-arrow-dark-bg` | `var(--clay-color-background-black-default)` |
1478
+ | `--clay-slider-arrow-dark-bg-hover` | `var(--clay-color-background-black-hover)` |
1479
+ | `--clay-slider-arrow-dark-border-color` | `var(--clay-color-white)` |
1480
+ | `--clay-slider-arrow-dark-color` | `var(--clay-color-white)` |
1481
+ | `--clay-slider-arrow-dark-disabled-border-color` | `var(--clay-color-grey-500)` |
1482
+ | `--clay-slider-arrow-dark-disabled-color` | `var(--clay-color-grey-500)` |
1483
+ | `--clay-slider-arrow-bg` | `var(--clay-color-background-default-default)` |
1484
+
1485
+ ## slider-dots
1486
+
1487
+ | Token | Value |
1488
+ |-------|-------|
1489
+ | `--clay-slider-dots-dark-bg` | `rgba(255, 255, 255, 0.2)` |
1490
+ | `--clay-slider-dots-dark-bg-hover` | `rgba(255, 255, 255, 0.4)` |
1491
+ | `--clay-slider-dots-gap` | `var(--clay-size-space-200)` |
1492
+ | `--clay-slider-dots-size` | `var(--clay-size-space-200)` |
1493
+ | `--clay-slider-dots-radius` | `var(--clay-radius-full)` |
1494
+ | `--clay-slider-dots-bg` | `var(--clay-color-background-neutral-tertiary)` |
1495
+ | `--clay-slider-dots-bg-hover` | `var(--clay-color-background-neutral-secondary)` |
1496
+ | `--clay-slider-dots-bg-active` | `var(--clay-color-background-black-default)` |
1497
+ | `--clay-slider-dots-dark-bg-active` | `var(--clay-color-background-default-default)` |
1498
+
1499
+ ## tabs-capsule
1500
+
1501
+ | Token | Value |
1502
+ |-------|-------|
1503
+ | `--clay-tabs-capsule-height` | `54` |
1504
+ | `--clay-tabs-capsule-stroke-default-bg` | `rgba(0, 0, 0, 0)` |
1505
+ | `--clay-tabs-capsule-stroke-active-bg` | `rgba(0, 0, 0, 0)` |
1506
+ | `--clay-tabs-capsule-font-size` | `var(--clay-web-type-p4-size)` |
1507
+ | `--clay-tabs-capsule-padding-x` | `var(--clay-size-space-1000)` |
1508
+ | `--clay-tabs-capsule-padding-y` | `var(--clay-size-space-300)` |
1509
+ | `--clay-tabs-capsule-radius` | `var(--clay-radius-full)` |
1510
+ | `--clay-tabs-capsule-font-weight` | `var(--clay-web-type-weight-regular)` |
1511
+ | `--clay-tabs-capsule-fill-default-bg` | `var(--clay-color-grey-300)` |
1512
+ | `--clay-tabs-capsule-fill-default-color` | `var(--clay-color-grey-500)` |
1513
+ | `--clay-tabs-capsule-fill-default-border` | `var(--clay-color-grey-300)` |
1514
+ | `--clay-tabs-capsule-fill-active-bg` | `var(--clay-color-iris-300)` |
1515
+ | `--clay-tabs-capsule-fill-active-color` | `var(--clay-color-white)` |
1516
+ | `--clay-tabs-capsule-fill-active-border` | `var(--clay-color-iris-300)` |
1517
+ | `--clay-tabs-capsule-stroke-default-color` | `var(--clay-color-text-default-default)` |
1518
+ | `--clay-tabs-capsule-stroke-default-border` | `var(--clay-color-grey-300)` |
1519
+ | `--clay-tabs-capsule-stroke-active-color` | `var(--clay-color-iris-300)` |
1520
+ | `--clay-tabs-capsule-stroke-active-border` | `var(--clay-color-iris-300)` |
1521
+
1522
+ ## tabs-focus
1523
+
1524
+ | Token | Value |
1525
+ |-------|-------|
1526
+ | `--clay-tabs-focus-ring-color` | `var(--clay-color-border-brand-default)` |
1527
+
1528
+ ## tabs-indicator
1529
+
1530
+ | Token | Value |
1531
+ |-------|-------|
1532
+ | `--clay-tabs-indicator-width-brand` | `3` |
1533
+ | `--clay-tabs-indicator-width-neutral` | `var(--clay-size-stroke-border)` |
1534
+ | `--clay-tabs-indicator-neutral` | `var(--clay-color-border-black-default)` |
1535
+ | `--clay-tabs-indicator-brand` | `var(--clay-color-background-brand-default)` |
1536
+
1537
+ ## tabs-list
1538
+
1539
+ | Token | Value |
1540
+ |-------|-------|
1541
+ | `--clay-tabs-list-gap` | `var(--clay-size-space-1000)` |
1542
+
1543
+ ## tabs-panel
1544
+
1545
+ | Token | Value |
1546
+ |-------|-------|
1547
+ | `--clay-tabs-panel-font-size` | `var(--clay-web-type-p3-size)` |
1548
+ | `--clay-tabs-panel-padding` | `var(--clay-size-space-600)` |
1549
+ | `--clay-tabs-panel-color` | `var(--clay-color-text-default-default)` |
1550
+
1551
+ ## tabs-shell
1552
+
1553
+ | Token | Value |
1554
+ |-------|-------|
1555
+ | `--clay-tabs-shell-muted-bg` | `var(--clay-color-grey-100)` |
1556
+ | `--clay-tabs-shell-muted-radius-sm` | `var(--clay-radius-lg)` |
1557
+ | `--clay-tabs-shell-muted-radius-lg` | `var(--clay-radius-xl)` |
1558
+ | `--clay-tabs-shell-muted-padding-x-sm` | `var(--clay-size-space-400)` |
1559
+ | `--clay-tabs-shell-muted-padding-top-sm` | `var(--clay-size-space-800)` |
1560
+ | `--clay-tabs-shell-muted-padding-bottom-sm` | `var(--clay-size-space-400)` |
1561
+ | `--clay-tabs-shell-muted-padding-y-lg` | `var(--clay-size-space-1000)` |
1562
+ | `--clay-tabs-shell-muted-padding-x-lg` | `var(--clay-size-space-1000)` |
1563
+ | `--clay-tabs-shell-stroke-border-width` | `var(--clay-size-stroke-border)` |
1564
+ | `--clay-tabs-shell-stroke-border-color` | `var(--clay-color-border-neutral-tertiary)` |
1565
+ | `--clay-tabs-shell-stroke-radius-sm` | `var(--clay-radius-lg)` |
1566
+ | `--clay-tabs-shell-stroke-radius-lg` | `var(--clay-radius-3xl)` |
1567
+ | `--clay-tabs-shell-stroke-padding-sm-x` | `var(--clay-size-space-400)` |
1568
+ | `--clay-tabs-shell-stroke-padding-sm-top` | `var(--clay-size-space-800)` |
1569
+ | `--clay-tabs-shell-stroke-padding-sm-bottom` | `var(--clay-size-space-400)` |
1570
+ | `--clay-tabs-shell-stroke-padding-lg-x-start` | `var(--clay-size-space-1000)` |
1571
+ | `--clay-tabs-shell-stroke-padding-lg-x-end` | `var(--clay-size-space-600)` |
1572
+ | `--clay-tabs-shell-stroke-padding-lg-y` | `var(--clay-size-space-600)` |
1573
+ | `--clay-tabs-shell-stroke-bg` | `var(--clay-color-background-default-default)` |
1574
+
1575
+ ## tabs-trigger
1576
+
1577
+ | Token | Value |
1578
+ |-------|-------|
1579
+ | `--clay-tabs-trigger-bg-hover` | `rgba(0, 0, 0, 0)` |
1580
+ | `--clay-tabs-trigger-active-bg` | `rgba(0, 0, 0, 0)` |
1581
+ | `--clay-tabs-trigger-min-height` | `36` |
1582
+ | `--clay-tabs-trigger-font-size` | `var(--clay-web-type-p3-size)` |
1583
+ | `--clay-tabs-trigger-font-weight` | `var(--clay-web-type-weight-regular)` |
1584
+ | `--clay-tabs-trigger-font-weight-active` | `var(--clay-web-type-weight-bold)` |
1585
+ | `--clay-tabs-trigger-color` | `var(--clay-color-text-default-default)` |
1586
+ | `--clay-tabs-trigger-color-hover` | `var(--clay-color-text-default-default)` |
1587
+ | `--clay-tabs-trigger-active-color` | `var(--clay-color-text-default-default)` |
1588
+ | `--clay-tabs-trigger-padding-y` | `var(--clay-size-space-300)` |
1589
+ | `--clay-tabs-trigger-padding-x` | `var(--clay-size-space-200)` |
1590
+ | `--clay-tabs-trigger-radius` | `var(--clay-radius-xs)` |
1591
+
1592
+ ## tag-bg
1593
+
1594
+ | Token | Value |
1595
+ |-------|-------|
1596
+ | `--clay-tag-bg` | `var(--clay-color-grey-300)` |
1597
+ | `--clay-tag-bg-hover` | `var(--clay-color-grey-200)` |
1598
+
1599
+ ## tag-border
1600
+
1601
+ | Token | Value |
1602
+ |-------|-------|
1603
+ | `--clay-tag-border-color` | `rgba(0, 0, 0, 0)` |
1604
+
1605
+ ## tag-color
1606
+
1607
+ | Token | Value |
1608
+ |-------|-------|
1609
+ | `--clay-tag-color` | `var(--clay-color-text-default-default)` |
1610
+
1611
+ ## tag-dot
1612
+
1613
+ | Token | Value |
1614
+ |-------|-------|
1615
+ | `--clay-tag-dot-size` | `18` |
1616
+ | `--clay-tag-dot-font-size` | `var(--clay-web-type-p3-size)` |
1617
+ | `--clay-tag-dot-radius` | `var(--clay-radius-xs)` |
1618
+ | `--clay-tag-dot-bg` | `var(--clay-color-grey-500)` |
1619
+
1620
+ ## tag-font
1621
+
1622
+ | Token | Value |
1623
+ |-------|-------|
1624
+ | `--clay-tag-font-size` | `var(--clay-web-type-p4-size)` |
1625
+ | `--clay-tag-font-weight` | `var(--clay-web-type-weight-regular)` |
1626
+
1627
+ ## tag-gap
1628
+
1629
+ | Token | Value |
1630
+ |-------|-------|
1631
+ | `--clay-tag-gap` | `var(--clay-size-space-200)` |
1632
+
1633
+ ## tag-icon
1634
+
1635
+ | Token | Value |
1636
+ |-------|-------|
1637
+ | `--clay-tag-icon-variant-font-size` | `var(--clay-web-type-p3-size)` |
1638
+ | `--clay-tag-icon-color` | `var(--clay-color-text-default-default)` |
1639
+ | `--clay-tag-icon-size` | `var(--clay-size-space-400)` |
1640
+ | `--clay-tag-icon-variant-icon-size` | `var(--clay-size-space-500)` |
1641
+
1642
+ ## tag-min
1643
+
1644
+ | Token | Value |
1645
+ |-------|-------|
1646
+ | `--clay-tag-min-height` | `34` |
1647
+
1648
+ ## tag-padding
1649
+
1650
+ | Token | Value |
1651
+ |-------|-------|
1652
+ | `--clay-tag-padding-y` | `var(--clay-size-space-300)` |
1653
+ | `--clay-tag-padding-x` | `var(--clay-size-space-200)` |
1654
+
1655
+ ## tag-radius
1656
+
1657
+ | Token | Value |
1658
+ |-------|-------|
1659
+ | `--clay-tag-radius` | `var(--clay-radius-sm)` |
1660
+
1661
+ ## toggle-color
1662
+
1663
+ | Token | Value |
1664
+ |-------|-------|
1665
+ | `--clay-toggle-color` | `var(--clay-color-text-default-default)` |
1666
+
1667
+ ## toggle-focus
1668
+
1669
+ | Token | Value |
1670
+ |-------|-------|
1671
+ | `--clay-toggle-focus-ring-color` | `var(--clay-color-border-brand-default)` |
1672
+
1673
+ ## toggle-font
1674
+
1675
+ | Token | Value |
1676
+ |-------|-------|
1677
+ | `--clay-toggle-font-size` | `var(--clay-web-type-p3-size)` |
1678
+
1679
+ ## toggle-gap
1680
+
1681
+ | Token | Value |
1682
+ |-------|-------|
1683
+ | `--clay-toggle-gap` | `var(--clay-size-space-200)` |
1684
+
1685
+ ## toggle-thumb
1686
+
1687
+ | Token | Value |
1688
+ |-------|-------|
1689
+ | `--clay-toggle-thumb-border-width` | `0` |
1690
+ | `--clay-toggle-thumb-border-color` | `rgba(0, 0, 0, 0)` |
1691
+ | `--clay-toggle-thumb-shadow` | `none` |
1692
+ | `--clay-toggle-thumb-bg` | `var(--clay-color-background-default-default)` |
1693
+
1694
+ ## toggle-track
1695
+
1696
+ | Token | Value |
1697
+ |-------|-------|
1698
+ | `--clay-toggle-track-radius` | `var(--clay-radius-full)` |
1699
+ | `--clay-toggle-track-height` | `var(--clay-size-space-600)` |
1700
+ | `--clay-toggle-track-bg` | `var(--clay-color-grey-300)` |
1701
+ | `--clay-toggle-track-bg-checked` | `var(--clay-color-background-black-default)` |
1702
+
1703
+ ## web-type
1704
+
1705
+ | Token | Value |
1706
+ |-------|-------|
1707
+ | `--clay-web-type-huge-desktop-size` | `128` |
1708
+ | `--clay-web-type-huge-desktop-line-height` | `1` |
1709
+ | `--clay-web-type-huge-desktop-letter-spacing` | `-0.03` |
1710
+ | `--clay-web-type-big-desktop-size` | `96` |
1711
+ | `--clay-web-type-big-desktop-line-height` | `1` |
1712
+ | `--clay-web-type-big-desktop-letter-spacing` | `-0.03` |
1713
+ | `--clay-web-type-large-desktop-size` | `72` |
1714
+ | `--clay-web-type-large-desktop-line-height` | `1.1` |
1715
+ | `--clay-web-type-large-desktop-letter-spacing` | `-0.03` |
1716
+ | `--clay-web-type-h1-desktop-size` | `64` |
1717
+ | `--clay-web-type-h1-desktop-line-height` | `1.1` |
1718
+ | `--clay-web-type-h1-desktop-letter-spacing` | `-0.03` |
1719
+ | `--clay-web-type-h2-desktop-size` | `48` |
1720
+ | `--clay-web-type-h2-desktop-line-height` | `1.2` |
1721
+ | `--clay-web-type-h2-desktop-letter-spacing` | `-0.03` |
1722
+ | `--clay-web-type-h3-desktop-size` | `36` |
1723
+ | `--clay-web-type-h3-desktop-line-height` | `1.2` |
1724
+ | `--clay-web-type-h3-desktop-letter-spacing` | `-0.02` |
1725
+ | `--clay-web-type-h4-desktop-size` | `24` |
1726
+ | `--clay-web-type-h4-desktop-line-height` | `1.3` |
1727
+ | `--clay-web-type-h4-desktop-letter-spacing` | `-0.02` |
1728
+ | `--clay-web-type-h5-desktop-size` | `20` |
1729
+ | `--clay-web-type-h5-desktop-line-height` | `1.4` |
1730
+ | `--clay-web-type-h5-desktop-letter-spacing` | `0` |
1731
+ | `--clay-web-type-h6-desktop-size` | `18` |
1732
+ | `--clay-web-type-h6-desktop-line-height` | `1.5` |
1733
+ | `--clay-web-type-h6-desktop-letter-spacing` | `-0.01` |
1734
+ | `--clay-web-type-h7-topic-desktop-size` | `16` |
1735
+ | `--clay-web-type-h7-topic-desktop-line-height` | `1.5` |
1736
+ | `--clay-web-type-h7-topic-desktop-letter-spacing` | `0` |
1737
+ | `--clay-web-type-huge-mobile-size` | `64` |
1738
+ | `--clay-web-type-huge-mobile-line-height` | `1.2` |
1739
+ | `--clay-web-type-huge-mobile-letter-spacing` | `-0.02` |
1740
+ | `--clay-web-type-big-mobile-size` | `56` |
1741
+ | `--clay-web-type-big-mobile-line-height` | `1.2` |
1742
+ | `--clay-web-type-big-mobile-letter-spacing` | `-0.02` |
1743
+ | `--clay-web-type-large-mobile-size` | `44` |
1744
+ | `--clay-web-type-large-mobile-line-height` | `1.2` |
1745
+ | `--clay-web-type-large-mobile-letter-spacing` | `-0.02` |
1746
+ | `--clay-web-type-h1-mobile-size` | `40` |
1747
+ | `--clay-web-type-h1-mobile-line-height` | `1.2` |
1748
+ | `--clay-web-type-h1-mobile-letter-spacing` | `-0.02` |
1749
+ | `--clay-web-type-h2-mobile-size` | `36` |
1750
+ | `--clay-web-type-h2-mobile-line-height` | `1.2` |
1751
+ | `--clay-web-type-h2-mobile-letter-spacing` | `-0.02` |
1752
+ | `--clay-web-type-h3-mobile-size` | `32` |
1753
+ | `--clay-web-type-h3-mobile-line-height` | `1.2` |
1754
+ | `--clay-web-type-h3-mobile-letter-spacing` | `-0.02` |
1755
+ | `--clay-web-type-h4-mobile-size` | `22` |
1756
+ | `--clay-web-type-h4-mobile-line-height` | `1.3` |
1757
+ | `--clay-web-type-h4-mobile-letter-spacing` | `-0.02` |
1758
+ | `--clay-web-type-h5-mobile-size` | `20` |
1759
+ | `--clay-web-type-h5-mobile-line-height` | `1.4` |
1760
+ | `--clay-web-type-h5-mobile-letter-spacing` | `-0.01` |
1761
+ | `--clay-web-type-h6-mobile-size` | `18` |
1762
+ | `--clay-web-type-h6-mobile-line-height` | `1.5` |
1763
+ | `--clay-web-type-h6-mobile-letter-spacing` | `-0.01` |
1764
+ | `--clay-web-type-h7-topic-mobile-size` | `16` |
1765
+ | `--clay-web-type-h7-topic-mobile-line-height` | `1.5` |
1766
+ | `--clay-web-type-h7-topic-mobile-letter-spacing` | `0` |
1767
+ | `--clay-web-type-p1-size` | `20` |
1768
+ | `--clay-web-type-p2-size` | `18` |
1769
+ | `--clay-web-type-p3-size` | `16` |
1770
+ | `--clay-web-type-p4-size` | `14` |
1771
+ | `--clay-web-type-p5-size` | `12` |
1772
+ | `--clay-web-type-p-line-height` | `1.5` |
1773
+ | `--clay-web-type-p-letter-spacing` | `0` |
1774
+ | `--clay-web-type-heading-line-height` | `var(--clay-web-type-h2-desktop-line-height)` |
1775
+ | `--clay-web-type-body-line-height` | `var(--clay-web-type-p-line-height)` |
1776
+ | `--clay-web-type-body-lg-size` | `var(--clay-web-type-p1-size)` |
1777
+ | `--clay-web-type-body-lg-line-height` | `var(--clay-web-type-p-line-height)` |
1778
+ | `--clay-web-type-label-size` | `var(--clay-web-type-p4-size)` |
1779
+ | `--clay-web-type-label-line-height` | `var(--clay-web-type-p-line-height)` |
1780
+ | `--clay-web-type-h3-line-height` | `var(--clay-web-type-h3-desktop-line-height)` |
1781
+ | `--clay-web-type-p5-letter-spacing` | `var(--clay-web-type-p-letter-spacing)` |
1782
+ | `--clay-web-type-family` | `var(--clay-foundation-type-family-sans)` |
1783
+ | `--clay-web-type-family-mono` | `var(--clay-foundation-type-family-sans)` |
1784
+ | `--clay-web-type-weight-regular` | `var(--clay-foundation-type-weight-regular)` |
1785
+ | `--clay-web-type-weight-medium` | `var(--clay-foundation-type-weight-medium)` |
1786
+ | `--clay-web-type-weight-semi` | `var(--clay-foundation-type-weight-semi)` |
1787
+ | `--clay-web-type-weight-bold` | `var(--clay-foundation-type-weight-bold)` |
1788
+ | `--clay-web-type-huge-desktop-weight` | `var(--clay-foundation-type-weight-medium)` |
1789
+ | `--clay-web-type-big-desktop-weight` | `var(--clay-foundation-type-weight-medium)` |
1790
+ | `--clay-web-type-large-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1791
+ | `--clay-web-type-h1-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1792
+ | `--clay-web-type-h2-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1793
+ | `--clay-web-type-h3-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1794
+ | `--clay-web-type-h4-desktop-weight` | `var(--clay-foundation-type-weight-medium)` |
1795
+ | `--clay-web-type-h5-desktop-weight` | `var(--clay-foundation-type-weight-medium)` |
1796
+ | `--clay-web-type-h6-desktop-weight` | `var(--clay-foundation-type-weight-semi)` |
1797
+ | `--clay-web-type-h7-topic-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1798
+ | `--clay-web-type-huge-mobile-weight` | `var(--clay-foundation-type-weight-medium)` |
1799
+ | `--clay-web-type-big-mobile-weight` | `var(--clay-foundation-type-weight-medium)` |
1800
+ | `--clay-web-type-large-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1801
+ | `--clay-web-type-h1-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1802
+ | `--clay-web-type-h2-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1803
+ | `--clay-web-type-h3-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1804
+ | `--clay-web-type-h4-mobile-weight` | `var(--clay-foundation-type-weight-medium)` |
1805
+ | `--clay-web-type-h5-mobile-weight` | `var(--clay-foundation-type-weight-medium)` |
1806
+ | `--clay-web-type-h6-mobile-weight` | `var(--clay-foundation-type-weight-semi)` |
1807
+ | `--clay-web-type-h7-topic-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1808
+ | `--clay-web-type-label-weight` | `var(--clay-web-type-weight-medium)` |
1809
+ | `--clay-web-type-h3-weight` | `var(--clay-web-type-h3-desktop-weight)` |
1810
+