@clay-design-system/tokens 0.0.0-stage → 0.10.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 (12) hide show
  1. package/dist/TOKEN_REFERENCE.md +1811 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +1 -0
  4. package/dist/mq.d.ts +15 -0
  5. package/dist/mq.js +16 -0
  6. package/dist/tokens.css +989 -0
  7. package/dist/tokens.d.ts +973 -0
  8. package/dist/tokens.js +997 -0
  9. package/dist/tokens.resolved.css +989 -0
  10. package/package.json +37 -3
  11. package/stylelint-plugin/no-foundation-tokens.js +69 -0
  12. package/README.md +0 -3
package/dist/TOKEN_REFERENCE.md ADDED
@@ -0,0 +1,1811 @@
1
+ # Token Reference (auto-generated)
2
+
3
+ > Generated by `@clay-design-system/tokens` build. 983 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-secondary` | `var(--clay-foundation-brand-color-grey-500)` |
710
+ | `--clay-color-text-default-tertiary` | `var(--clay-foundation-brand-color-grey-300)` |
711
+ | `--clay-color-text-disabled-default` | `var(--clay-foundation-brand-color-grey-500)` |
712
+ | `--clay-color-text-brand-default` | `var(--clay-foundation-brand-color-iris-300)` |
713
+ | `--clay-color-text-on-black` | `var(--clay-color-white)` |
714
+ | `--clay-color-text-on-dark` | `var(--clay-color-white)` |
715
+ | `--clay-color-text-on-brand-primary` | `var(--clay-color-white)` |
716
+
717
+ ## color-white
718
+
719
+ | Token | Value |
720
+ |-------|-------|
721
+ | `--clay-color-white-100` | `rgba(255, 255, 255, 0.15)` |
722
+ | `--clay-color-white-200` | `rgba(255, 255, 255, 0.25)` |
723
+ | `--clay-color-white-300` | `rgba(255, 255, 255, 0.3)` |
724
+ | `--clay-color-white-400` | `rgba(255, 255, 255, 0.7)` |
725
+ | `--clay-color-white-500` | `rgba(255, 255, 255, 0.85)` |
726
+ | `--clay-color-white` | `var(--clay-foundation-brand-color-grey-0)` |
727
+
728
+ ## color-yellow
729
+
730
+ | Token | Value |
731
+ |-------|-------|
732
+ | `--clay-color-yellow-100` | `var(--clay-foundation-brand-color-yellow-100)` |
733
+ | `--clay-color-yellow-500` | `var(--clay-foundation-brand-color-yellow-500)` |
734
+
735
+ ## customer-logo
736
+
737
+ | Token | Value |
738
+ |-------|-------|
739
+ | `--clay-customer-logo-color-on-light-surface` | `#000000` |
740
+ | `--clay-customer-logo-color-on-dark-surface` | `#ffffff` |
741
+ | `--clay-customer-logo-surface-light` | `var(--clay-color-background-default-secondary)` |
742
+ | `--clay-customer-logo-surface-dark` | `var(--clay-color-background-black-default)` |
743
+ | `--clay-customer-logo-label-on-light-surface` | `var(--clay-color-text-default-tertiary)` |
744
+ | `--clay-customer-logo-label-on-dark-surface` | `var(--clay-color-text-on-black)` |
745
+
746
+ ## customer-story
747
+
748
+ | Token | Value |
749
+ |-------|-------|
750
+ | `--clay-customer-story-card-avatar-size` | `56` |
751
+ | `--clay-customer-story-card-stat-media-size` | `314` |
752
+ | `--clay-customer-story-card-quote-icon-width` | `80` |
753
+ | `--clay-customer-story-card-quote-icon-width-mobile` | `53` |
754
+ | `--clay-customer-story-card-quote-with-picture-media-height` | `246` |
755
+ | `--clay-customer-story-card-mobile-min-height` | `513` |
756
+ | `--clay-customer-story-card-radius` | `var(--clay-radius-md)` |
757
+ | `--clay-customer-story-card-media-radius` | `var(--clay-radius-sm)` |
758
+ | `--clay-customer-story-card-avatar-radius` | `var(--clay-radius-full)` |
759
+ | `--clay-customer-story-card-stat-bg` | `var(--clay-color-grey-300)` |
760
+ | `--clay-customer-story-card-stat-padding` | `var(--clay-size-space-300)` |
761
+ | `--clay-customer-story-card-stat-gap` | `var(--clay-size-space-500)` |
762
+ | `--clay-customer-story-card-quote-bg` | `var(--clay-color-grey-300)` |
763
+ | `--clay-customer-story-card-quote-padding` | `var(--clay-size-space-300)` |
764
+ | `--clay-customer-story-card-quote-gap` | `var(--clay-size-space-500)` |
765
+ | `--clay-customer-story-card-quote-content-gap` | `var(--clay-size-space-400)` |
766
+ | `--clay-customer-story-card-quote-with-picture-border-color` | `var(--clay-color-grey-300)` |
767
+ | `--clay-customer-story-card-quote-with-picture-padding` | `var(--clay-size-space-400)` |
768
+ | `--clay-customer-story-card-quote-with-picture-gap` | `var(--clay-size-space-800)` |
769
+ | `--clay-customer-story-card-quote-with-picture-avatar-gap` | `var(--clay-size-space-400)` |
770
+ | `--clay-customer-story-card-mobile-gap` | `var(--clay-size-space-500)` |
771
+ | `--clay-customer-story-card-quote-with-picture-bg` | `var(--clay-color-background-default-default)` |
772
+
773
+ ## effect-device
774
+
775
+ | Token | Value |
776
+ |-------|-------|
777
+ | `--clay-effect-device-frame-shadow` | `0 12px 24px rgba(28, 29, 33, 0.12)` |
778
+
779
+ ## effect-glass
780
+
781
+ | Token | Value |
782
+ |-------|-------|
783
+ | `--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)` |
784
+ | `--clay-effect-glass-background` | `rgba(255, 255, 255, 0.1)` |
785
+ | `--clay-effect-glass-blur` | `33px` |
786
+ | `--clay-effect-glass-border` | `1px solid rgba(255, 255, 255, 0.12)` |
787
+
788
+ ## effect-shadow
789
+
790
+ | Token | Value |
791
+ |-------|-------|
792
+ | `--clay-effect-shadow-light` | `0px 0px 40px 0px rgba(23, 24, 28, 0.06)` |
793
+ | `--clay-effect-shadow-hard` | `0px 8px 40px 0px rgba(23, 24, 28, 0.12)` |
794
+ | `--clay-effect-shadow-rise-small` | `0px 4px 8px 0px rgba(23, 24, 28, 0.2)` |
795
+ | `--clay-effect-shadow-rise-medium` | `0px 6px 20px 0px rgba(23, 24, 28, 0.2)` |
796
+
797
+ ## email-type
798
+
799
+ | Token | Value |
800
+ |-------|-------|
801
+ | `--clay-email-type-h1-line-height` | `1.1` |
802
+ | `--clay-email-type-h1-letter-spacing` | `-1` |
803
+ | `--clay-email-type-h2-line-height` | `1.3` |
804
+ | `--clay-email-type-h2-letter-spacing` | `-1` |
805
+ | `--clay-email-type-h3-line-height` | `1.3` |
806
+ | `--clay-email-type-h3-letter-spacing` | `-1` |
807
+ | `--clay-email-type-h4-line-height` | `1.3` |
808
+ | `--clay-email-type-h4-letter-spacing` | `0` |
809
+ | `--clay-email-type-h5-line-height` | `1.3` |
810
+ | `--clay-email-type-h5-letter-spacing` | `0` |
811
+ | `--clay-email-type-p1-line-height` | `1.4` |
812
+ | `--clay-email-type-p1-letter-spacing` | `0` |
813
+ | `--clay-email-type-p2-size` | `15` |
814
+ | `--clay-email-type-p2-size-mobile` | `15` |
815
+ | `--clay-email-type-p2-line-height` | `1.4` |
816
+ | `--clay-email-type-p2-letter-spacing` | `0` |
817
+ | `--clay-email-type-p3-line-height` | `1.5` |
818
+ | `--clay-email-type-p3-letter-spacing` | `0` |
819
+ | `--clay-email-type-p4-line-height` | `1.5` |
820
+ | `--clay-email-type-p4-letter-spacing` | `0` |
821
+ | `--clay-email-type-button-line-height` | `1` |
822
+ | `--clay-email-type-button-letter-spacing` | `0` |
823
+ | `--clay-email-type-family` | `var(--clay-foundation-type-family-sans)` |
824
+ | `--clay-email-type-weight-regular` | `var(--clay-foundation-type-weight-regular)` |
825
+ | `--clay-email-type-weight-semi` | `var(--clay-foundation-type-weight-semi)` |
826
+ | `--clay-email-type-weight-bold` | `var(--clay-foundation-type-weight-bold)` |
827
+ | `--clay-email-type-h1-size` | `var(--clay-foundation-type-size-1300)` |
828
+ | `--clay-email-type-h1-size-mobile` | `var(--clay-foundation-type-size-1100)` |
829
+ | `--clay-email-type-h2-size` | `var(--clay-foundation-type-size-1100)` |
830
+ | `--clay-email-type-h2-size-mobile` | `var(--clay-foundation-type-size-950)` |
831
+ | `--clay-email-type-h3-size` | `var(--clay-foundation-type-size-950)` |
832
+ | `--clay-email-type-h3-size-mobile` | `var(--clay-foundation-type-size-800)` |
833
+ | `--clay-email-type-h4-size` | `var(--clay-foundation-type-size-800)` |
834
+ | `--clay-email-type-h4-size-mobile` | `var(--clay-foundation-type-size-600)` |
835
+ | `--clay-email-type-h5-size` | `var(--clay-foundation-type-size-600)` |
836
+ | `--clay-email-type-h5-size-mobile` | `var(--clay-foundation-type-size-600)` |
837
+ | `--clay-email-type-p1-size` | `var(--clay-foundation-type-size-300)` |
838
+ | `--clay-email-type-p1-size-mobile` | `var(--clay-foundation-type-size-300)` |
839
+ | `--clay-email-type-p3-size` | `var(--clay-foundation-type-size-200)` |
840
+ | `--clay-email-type-p3-size-mobile` | `var(--clay-foundation-type-size-200)` |
841
+ | `--clay-email-type-p4-size` | `var(--clay-foundation-type-size-100)` |
842
+ | `--clay-email-type-p4-size-mobile` | `var(--clay-foundation-type-size-100)` |
843
+ | `--clay-email-type-button-size` | `var(--clay-foundation-type-size-300)` |
844
+ | `--clay-email-type-button-weight` | `var(--clay-foundation-type-weight-regular)` |
845
+
846
+ ## foundation-brand
847
+
848
+ | Token | Value |
849
+ |-------|-------|
850
+ | `--clay-foundation-brand-color-grey-100` | `#f3f4f5` |
851
+ | `--clay-foundation-brand-color-grey-200` | `#e6e7ea` |
852
+ | `--clay-foundation-brand-color-grey-300` | `#cacbcd` |
853
+ | `--clay-foundation-brand-color-grey-500` | `#7c7b7b` |
854
+ | `--clay-foundation-brand-color-grey-800` | `#252526` |
855
+ | `--clay-foundation-brand-color-yellow-100` | `#fff8da` |
856
+ | `--clay-foundation-brand-color-lime-500` | `#e5ff00` |
857
+ | `--clay-foundation-brand-color-stone-100` | `#f7f3ea` |
858
+ | `--clay-foundation-brand-color-stone-200` | `#f2e7d6` |
859
+ | `--clay-foundation-brand-color-harvest-500` | `#fe9b0b` |
860
+ | `--clay-foundation-brand-color-orange-500` | `#ff6b10` |
861
+ | `--clay-foundation-brand-color-magenta-200` | `#fff1fc` |
862
+ | `--clay-foundation-brand-color-magenta-300` | `#ffdbf7` |
863
+ | `--clay-foundation-brand-color-magenta-800` | `#8b0038` |
864
+ | `--clay-foundation-brand-color-magenta-900` | `#4f0000` |
865
+ | `--clay-foundation-brand-color-pink-100` | `#f6eff4` |
866
+ | `--clay-foundation-brand-color-pink-500` | `#fd84e2` |
867
+ | `--clay-foundation-brand-color-iris-100` | `#ebf0ff` |
868
+ | `--clay-foundation-brand-color-iris-200` | `#d9d7ff` |
869
+ | `--clay-foundation-brand-color-iris-500` | `#4b00d7` |
870
+ | `--clay-foundation-brand-color-iris-800` | `#20005c` |
871
+ | `--clay-foundation-brand-color-blue-100` | `#eff5fd` |
872
+ | `--clay-foundation-brand-color-blue-200` | `#cee5fe` |
873
+ | `--clay-foundation-brand-color-blue-500` | `#1e88fd` |
874
+ | `--clay-foundation-brand-color-blue-800` | `#003ea8` |
875
+ | `--clay-foundation-brand-color-teal-300` | `#7ef1f1` |
876
+ | `--clay-foundation-brand-color-teal-500` | `#00d2d2` |
877
+ | `--clay-foundation-brand-color-green-100` | `#e8fff4` |
878
+ | `--clay-foundation-brand-color-green-200` | `#ceead6` |
879
+ | `--clay-foundation-brand-color-green-800` | `#018158` |
880
+ | `--clay-foundation-brand-color-green-900` | `#014840` |
881
+
882
+ ## foundation-effect
883
+
884
+ | Token | Value |
885
+ |-------|-------|
886
+ | `--clay-foundation-effect-shadow-sm` | `0px 1px 2px 0px rgba(23, 24, 28, 0.06)` |
887
+ | `--clay-foundation-effect-shadow-md` | `0px 8px 24px -4px rgba(23, 24, 28, 0.08)` |
888
+ | `--clay-foundation-effect-shadow-lg` | `0px 16px 40px -8px rgba(23, 24, 28, 0.14)` |
889
+ | `--clay-foundation-effect-shadow-xl` | `0px 30px 60px -16px rgba(23, 24, 28, 0.2)` |
890
+ | `--clay-foundation-effect-blur-sm` | `40px` |
891
+ | `--clay-foundation-effect-blur-md` | `90px` |
892
+ | `--clay-foundation-effect-blur-lg` | `120px` |
893
+ | `--clay-foundation-effect-blur-xl` | `160px` |
894
+
895
+ ## foundation-radius
896
+
897
+ | Token | Value |
898
+ |-------|-------|
899
+ | `--clay-foundation-radius-none` | `0` |
900
+ | `--clay-foundation-radius-xs` | `4` |
901
+ | `--clay-foundation-radius-sm` | `8` |
902
+ | `--clay-foundation-radius-md` | `12` |
903
+ | `--clay-foundation-radius-lg` | `16` |
904
+ | `--clay-foundation-radius-xl` | `20` |
905
+ | `--clay-foundation-radius-2xl` | `24` |
906
+ | `--clay-foundation-radius-3xl` | `32` |
907
+ | `--clay-foundation-radius-4xl` | `40` |
908
+ | `--clay-foundation-radius-full` | `9999` |
909
+
910
+ ## foundation-spacing
911
+
912
+ | Token | Value |
913
+ |-------|-------|
914
+ | `--clay-foundation-spacing-0` | `0` |
915
+ | `--clay-foundation-spacing-2` | `2` |
916
+ | `--clay-foundation-spacing-4` | `4` |
917
+ | `--clay-foundation-spacing-6` | `6` |
918
+ | `--clay-foundation-spacing-8` | `8` |
919
+ | `--clay-foundation-spacing-12` | `12` |
920
+ | `--clay-foundation-spacing-16` | `16` |
921
+ | `--clay-foundation-spacing-20` | `20` |
922
+ | `--clay-foundation-spacing-24` | `24` |
923
+ | `--clay-foundation-spacing-32` | `32` |
924
+ | `--clay-foundation-spacing-40` | `40` |
925
+ | `--clay-foundation-spacing-48` | `48` |
926
+ | `--clay-foundation-spacing-64` | `64` |
927
+ | `--clay-foundation-spacing-80` | `80` |
928
+ | `--clay-foundation-spacing-96` | `96` |
929
+ | `--clay-foundation-spacing-120` | `120` |
930
+ | `--clay-foundation-spacing-160` | `160` |
931
+ | `--clay-foundation-spacing-180` | `180` |
932
+
933
+ ## foundation-stroke
934
+
935
+ | Token | Value |
936
+ |-------|-------|
937
+ | `--clay-foundation-stroke-width` | `1` |
938
+ | `--clay-foundation-stroke-color` | `#cacbcd` |
939
+
940
+ ## foundation-type
941
+
942
+ | Token | Value |
943
+ |-------|-------|
944
+ | `--clay-foundation-type-family-sans` | `Poppins, sans-serif` |
945
+ | `--clay-foundation-type-family-platform` | `Figtree, system-ui, sans-serif` |
946
+ | `--clay-foundation-type-weight-light` | `300` |
947
+ | `--clay-foundation-type-weight-regular` | `400` |
948
+ | `--clay-foundation-type-weight-medium` | `500` |
949
+ | `--clay-foundation-type-weight-semi` | `600` |
950
+ | `--clay-foundation-type-weight-bold` | `700` |
951
+ | `--clay-foundation-type-size-50` | `8` |
952
+ | `--clay-foundation-type-size-75` | `10` |
953
+ | `--clay-foundation-type-size-100` | `12` |
954
+ | `--clay-foundation-type-size-200` | `14` |
955
+ | `--clay-foundation-type-size-300` | `16` |
956
+ | `--clay-foundation-type-size-400` | `18` |
957
+ | `--clay-foundation-type-size-500` | `20` |
958
+ | `--clay-foundation-type-size-600` | `24` |
959
+ | `--clay-foundation-type-size-700` | `28` |
960
+ | `--clay-foundation-type-size-800` | `32` |
961
+ | `--clay-foundation-type-size-900` | `38` |
962
+ | `--clay-foundation-type-size-950` | `40` |
963
+ | `--clay-foundation-type-size-1000` | `44` |
964
+ | `--clay-foundation-type-size-1100` | `48` |
965
+ | `--clay-foundation-type-size-1200` | `55` |
966
+ | `--clay-foundation-type-size-1300` | `56` |
967
+ | `--clay-foundation-type-size-1400` | `64` |
968
+ | `--clay-foundation-type-size-1500` | `72` |
969
+ | `--clay-foundation-type-size-1600` | `110` |
970
+ | `--clay-foundation-type-size-1700` | `200` |
971
+
972
+ ## hover-flip
973
+
974
+ | Token | Value |
975
+ |-------|-------|
976
+ | `--clay-hover-flip-card-heading-line-height` | `1.2` |
977
+ | `--clay-hover-flip-card-heading-size` | `var(--clay-web-type-h3-desktop-size)` |
978
+ | `--clay-hover-flip-card-heading-size-mobile` | `var(--clay-web-type-h3-mobile-size)` |
979
+ | `--clay-hover-flip-card-heading-letter-spacing` | `var(--clay-web-type-h3-desktop-letter-spacing)` |
980
+ | `--clay-hover-flip-card-desc-size` | `var(--clay-web-type-p2-size)` |
981
+ | `--clay-hover-flip-card-radius` | `var(--clay-radius-md)` |
982
+ | `--clay-hover-flip-card-padding-mobile` | `var(--clay-size-space-600)` |
983
+ | `--clay-hover-flip-card-padding-top` | `var(--clay-size-space-1200)` |
984
+ | `--clay-hover-flip-card-padding-x` | `var(--clay-size-space-800)` |
985
+ | `--clay-hover-flip-card-padding-bottom` | `var(--clay-size-space-1200)` |
986
+ | `--clay-hover-flip-card-gap` | `var(--clay-size-space-1000)` |
987
+ | `--clay-hover-flip-card-shape-gap` | `var(--clay-size-space-400)` |
988
+ | `--clay-hover-flip-card-text-gap` | `var(--clay-size-space-300)` |
989
+ | `--clay-hover-flip-card-shape-size` | `var(--clay-size-space-1000)` |
990
+ | `--clay-hover-flip-card-icon-size` | `var(--clay-size-space-1000)` |
991
+ | `--clay-hover-flip-card-bg` | `var(--clay-color-grey-200)` |
992
+ | `--clay-hover-flip-card-heading-weight` | `var(--clay-web-type-weight-regular)` |
993
+ | `--clay-hover-flip-card-desc-weight` | `var(--clay-web-type-weight-regular)` |
994
+
995
+ ## input-bg
996
+
997
+ | Token | Value |
998
+ |-------|-------|
999
+ | `--clay-input-bg` | `var(--clay-color-background-default-default)` |
1000
+
1001
+ ## input-border
1002
+
1003
+ | Token | Value |
1004
+ |-------|-------|
1005
+ | `--clay-input-border-color` | `var(--clay-color-border-default-secondary)` |
1006
+ | `--clay-input-border-color-hover` | `var(--clay-color-border-default-tertiary)` |
1007
+ | `--clay-input-border-color-focus` | `var(--clay-color-border-brand-default)` |
1008
+
1009
+ ## input-color
1010
+
1011
+ | Token | Value |
1012
+ |-------|-------|
1013
+ | `--clay-input-color` | `var(--clay-color-text-default-default)` |
1014
+
1015
+ ## input-disabled
1016
+
1017
+ | Token | Value |
1018
+ |-------|-------|
1019
+ | `--clay-input-disabled-bg` | `var(--clay-color-background-disabled-default)` |
1020
+ | `--clay-input-disabled-color` | `var(--clay-color-text-disabled-default)` |
1021
+
1022
+ ## input-error
1023
+
1024
+ | Token | Value |
1025
+ |-------|-------|
1026
+ | `--clay-input-error-border-color` | `var(--clay-color-border-danger-default)` |
1027
+ | `--clay-input-error-focus-ring-color` | `var(--clay-color-background-danger-tertiary)` |
1028
+
1029
+ ## input-focus
1030
+
1031
+ | Token | Value |
1032
+ |-------|-------|
1033
+ | `--clay-input-focus-ring-color` | `var(--clay-color-background-brand-secondary)` |
1034
+
1035
+ ## input-font
1036
+
1037
+ | Token | Value |
1038
+ |-------|-------|
1039
+ | `--clay-input-font-size` | `var(--clay-web-type-p3-size)` |
1040
+
1041
+ ## input-label
1042
+
1043
+ | Token | Value |
1044
+ |-------|-------|
1045
+ | `--clay-input-label-font-size` | `var(--clay-web-type-p4-size)` |
1046
+ | `--clay-input-label-font-weight` | `var(--clay-web-type-weight-semi)` |
1047
+ | `--clay-input-label-color` | `var(--clay-color-text-default-default)` |
1048
+
1049
+ ## input-padding
1050
+
1051
+ | Token | Value |
1052
+ |-------|-------|
1053
+ | `--clay-input-padding-y` | `var(--clay-size-space-200)` |
1054
+ | `--clay-input-padding-x` | `var(--clay-size-space-300)` |
1055
+
1056
+ ## input-placeholder
1057
+
1058
+ | Token | Value |
1059
+ |-------|-------|
1060
+ | `--clay-input-placeholder-color` | `var(--clay-color-text-default-tertiary)` |
1061
+
1062
+ ## input-radius
1063
+
1064
+ | Token | Value |
1065
+ |-------|-------|
1066
+ | `--clay-input-radius` | `var(--clay-radius-sm)` |
1067
+
1068
+ ## integration-card
1069
+
1070
+ | Token | Value |
1071
+ |-------|-------|
1072
+ | `--clay-integration-card-width` | `220` |
1073
+ | `--clay-integration-card-min-height` | `80` |
1074
+ | `--clay-integration-card-label-size` | `var(--clay-web-type-p3-size)` |
1075
+ | `--clay-integration-card-padding-y` | `var(--clay-size-space-400)` |
1076
+ | `--clay-integration-card-padding-x` | `var(--clay-size-space-600)` |
1077
+ | `--clay-integration-card-gap` | `var(--clay-size-space-300)` |
1078
+ | `--clay-integration-card-radius` | `var(--clay-radius-lg)` |
1079
+ | `--clay-integration-card-bg` | `var(--clay-color-grey-100)` |
1080
+ | `--clay-integration-card-label-weight` | `var(--clay-web-type-weight-medium)` |
1081
+ | `--clay-integration-card-label-color` | `var(--clay-color-grey-800)` |
1082
+
1083
+ ## layout-container
1084
+
1085
+ | Token | Value |
1086
+ |-------|-------|
1087
+ | `--clay-layout-container-max-width` | `1440` |
1088
+ | `--clay-layout-container-large` | `1440` |
1089
+ | `--clay-layout-container-narrow` | `1220` |
1090
+ | `--clay-layout-container-wide` | `1440` |
1091
+
1092
+ ## layout-demo
1093
+
1094
+ | Token | Value |
1095
+ |-------|-------|
1096
+ | `--clay-layout-demo-media-column-narrow` | `280` |
1097
+
1098
+ ## layout-drawer
1099
+
1100
+ | Token | Value |
1101
+ |-------|-------|
1102
+ | `--clay-layout-drawer-max-height` | `80vh` |
1103
+
1104
+ ## layout-footer
1105
+
1106
+ | Token | Value |
1107
+ |-------|-------|
1108
+ | `--clay-layout-footer-link-gap` | `16` |
1109
+ | `--clay-layout-footer-heading-to-links` | `16` |
1110
+ | `--clay-layout-footer-logo-to-links` | `24` |
1111
+ | `--clay-layout-footer-column-gap` | `64` |
1112
+
1113
+ ## layout-grid
1114
+
1115
+ | Token | Value |
1116
+ |-------|-------|
1117
+ | `--clay-layout-grid-columns` | `12` |
1118
+ | `--clay-layout-grid-gutter` | `20` |
1119
+ | `--clay-layout-grid-margin` | `80` |
1120
+ | `--clay-layout-grid-margin-mobile` | `24` |
1121
+
1122
+ ## layout-header
1123
+
1124
+ | Token | Value |
1125
+ |-------|-------|
1126
+ | `--clay-layout-header-padding-y` | `20` |
1127
+ | `--clay-layout-header-padding-x` | `24` |
1128
+ | `--clay-layout-header-nav-gap` | `8` |
1129
+ | `--clay-layout-header-logo-size` | `24` |
1130
+
1131
+ ## layout-input
1132
+
1133
+ | Token | Value |
1134
+ |-------|-------|
1135
+ | `--clay-layout-input-max-width` | `320` |
1136
+
1137
+ ## layout-logo
1138
+
1139
+ | Token | Value |
1140
+ |-------|-------|
1141
+ | `--clay-layout-logo-strip-height` | `32` |
1142
+ | `--clay-layout-logo-strip-height-md` | `40` |
1143
+
1144
+ ## layout-mobile
1145
+
1146
+ | Token | Value |
1147
+ |-------|-------|
1148
+ | `--clay-layout-mobile-preview-width` | `390` |
1149
+
1150
+ ## layout-section
1151
+
1152
+ | Token | Value |
1153
+ |-------|-------|
1154
+ | `--clay-layout-section-padding-y` | `64` |
1155
+ | `--clay-layout-section-padding-x` | `80` |
1156
+ | `--clay-layout-section-padding-x-mobile` | `24` |
1157
+
1158
+ ## marketing-customer
1159
+
1160
+ | Token | Value |
1161
+ |-------|-------|
1162
+ | `--clay-marketing-customer-logo-height` | `48` |
1163
+ | `--clay-marketing-customer-logo-color-on-light-surface` | `var(--clay-customer-logo-color-on-light-surface)` |
1164
+ | `--clay-marketing-customer-logo-color-on-dark-surface` | `var(--clay-customer-logo-color-on-dark-surface)` |
1165
+ | `--clay-marketing-customer-logo-surface-light` | `var(--clay-customer-logo-surface-light)` |
1166
+ | `--clay-marketing-customer-logo-surface-dark` | `var(--clay-customer-logo-surface-dark)` |
1167
+
1168
+ ## motion-duration
1169
+
1170
+ | Token | Value |
1171
+ |-------|-------|
1172
+ | `--clay-motion-duration-instant` | `0ms` |
1173
+ | `--clay-motion-duration-fast` | `150ms` |
1174
+ | `--clay-motion-duration-normal` | `220ms` |
1175
+ | `--clay-motion-duration-slow` | `320ms` |
1176
+
1177
+ ## motion-easing
1178
+
1179
+ | Token | Value |
1180
+ |-------|-------|
1181
+ | `--clay-motion-easing-default` | `cubic-bezier(0.25, 0.1, 0.25, 1)` |
1182
+ | `--clay-motion-easing-out` | `cubic-bezier(0, 0, 0.2, 1)` |
1183
+ | `--clay-motion-easing-in` | `cubic-bezier(0.4, 0, 1, 1)` |
1184
+ | `--clay-motion-easing-in-out` | `cubic-bezier(0.4, 0, 0.2, 1)` |
1185
+ | `--clay-motion-easing-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
1186
+
1187
+ ## motion-transition
1188
+
1189
+ | Token | Value |
1190
+ |-------|-------|
1191
+ | `--clay-motion-transition-fast` | `var(--clay-motion-duration-fast) var(--clay-motion-easing-out)` |
1192
+ | `--clay-motion-transition-normal` | `var(--clay-motion-duration-normal) var(--clay-motion-easing-out)` |
1193
+
1194
+ ## platform-type
1195
+
1196
+ | Token | Value |
1197
+ |-------|-------|
1198
+ | `--clay-platform-type-headline-xl-600-size` | `40` |
1199
+ | `--clay-platform-type-headline-xl-600-line-height` | `46` |
1200
+ | `--clay-platform-type-headline-xl-600-letter-spacing` | `0` |
1201
+ | `--clay-platform-type-headline-md-400-size` | `24` |
1202
+ | `--clay-platform-type-headline-md-400-line-height` | `1` |
1203
+ | `--clay-platform-type-headline-md-400-letter-spacing` | `-1` |
1204
+ | `--clay-platform-type-headline-md-300-size` | `24` |
1205
+ | `--clay-platform-type-headline-md-300-line-height` | `1` |
1206
+ | `--clay-platform-type-headline-md-300-letter-spacing` | `-1` |
1207
+ | `--clay-platform-type-headline-sm-500-size` | `18` |
1208
+ | `--clay-platform-type-headline-sm-500-line-height` | `1` |
1209
+ | `--clay-platform-type-headline-sm-500-letter-spacing` | `0` |
1210
+ | `--clay-platform-type-label-lg-600-size` | `16` |
1211
+ | `--clay-platform-type-label-lg-600-line-height` | `1` |
1212
+ | `--clay-platform-type-label-lg-600-letter-spacing` | `0` |
1213
+ | `--clay-platform-type-label-lg-400-size` | `16` |
1214
+ | `--clay-platform-type-label-lg-400-line-height` | `1` |
1215
+ | `--clay-platform-type-label-lg-400-letter-spacing` | `0` |
1216
+ | `--clay-platform-type-label-md-400-size` | `14` |
1217
+ | `--clay-platform-type-label-md-400-line-height` | `1` |
1218
+ | `--clay-platform-type-label-md-400-letter-spacing` | `0` |
1219
+ | `--clay-platform-type-label-sm-400-size` | `12` |
1220
+ | `--clay-platform-type-label-sm-400-line-height` | `1` |
1221
+ | `--clay-platform-type-label-sm-400-letter-spacing` | `0` |
1222
+ | `--clay-platform-type-caption-sm-600-size` | `10` |
1223
+ | `--clay-platform-type-caption-sm-600-line-height` | `8` |
1224
+ | `--clay-platform-type-caption-sm-600-letter-spacing` | `0` |
1225
+ | `--clay-platform-type-caption-sm-400-size` | `10` |
1226
+ | `--clay-platform-type-caption-sm-400-line-height` | `8` |
1227
+ | `--clay-platform-type-caption-sm-400-letter-spacing` | `0` |
1228
+ | `--clay-platform-type-caption-xs-400-size` | `8` |
1229
+ | `--clay-platform-type-caption-xs-400-line-height` | `8` |
1230
+ | `--clay-platform-type-caption-xs-400-letter-spacing` | `0` |
1231
+ | `--clay-platform-type-family` | `var(--clay-foundation-type-family-platform)` |
1232
+ | `--clay-platform-type-family-sans` | `var(--clay-foundation-type-family-sans)` |
1233
+ | `--clay-platform-type-family-platform` | `var(--clay-foundation-type-family-platform)` |
1234
+ | `--clay-platform-type-weight-light` | `var(--clay-foundation-type-weight-light)` |
1235
+ | `--clay-platform-type-weight-regular` | `var(--clay-foundation-type-weight-regular)` |
1236
+ | `--clay-platform-type-weight-medium` | `var(--clay-foundation-type-weight-medium)` |
1237
+ | `--clay-platform-type-weight-semi` | `var(--clay-foundation-type-weight-semi)` |
1238
+ | `--clay-platform-type-weight-bold` | `var(--clay-foundation-type-weight-bold)` |
1239
+ | `--clay-platform-type-headline-xl-600-weight` | `var(--clay-foundation-type-weight-medium)` |
1240
+ | `--clay-platform-type-headline-md-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1241
+ | `--clay-platform-type-headline-md-300-weight` | `var(--clay-foundation-type-weight-light)` |
1242
+ | `--clay-platform-type-headline-sm-500-weight` | `var(--clay-foundation-type-weight-medium)` |
1243
+ | `--clay-platform-type-label-lg-600-weight` | `var(--clay-foundation-type-weight-semi)` |
1244
+ | `--clay-platform-type-label-lg-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1245
+ | `--clay-platform-type-label-md-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1246
+ | `--clay-platform-type-label-sm-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1247
+ | `--clay-platform-type-caption-sm-600-weight` | `var(--clay-foundation-type-weight-semi)` |
1248
+ | `--clay-platform-type-caption-sm-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1249
+ | `--clay-platform-type-caption-xs-400-weight` | `var(--clay-foundation-type-weight-regular)` |
1250
+
1251
+ ## radius-2xl
1252
+
1253
+ | Token | Value |
1254
+ |-------|-------|
1255
+ | `--clay-radius-2xl` | `var(--clay-foundation-radius-2xl)` |
1256
+
1257
+ ## radius-3xl
1258
+
1259
+ | Token | Value |
1260
+ |-------|-------|
1261
+ | `--clay-radius-3xl` | `var(--clay-foundation-radius-3xl)` |
1262
+
1263
+ ## radius-4xl
1264
+
1265
+ | Token | Value |
1266
+ |-------|-------|
1267
+ | `--clay-radius-4xl` | `var(--clay-foundation-radius-4xl)` |
1268
+
1269
+ ## radius-full
1270
+
1271
+ | Token | Value |
1272
+ |-------|-------|
1273
+ | `--clay-radius-full` | `var(--clay-foundation-radius-full)` |
1274
+
1275
+ ## radius-lg
1276
+
1277
+ | Token | Value |
1278
+ |-------|-------|
1279
+ | `--clay-radius-lg` | `var(--clay-foundation-radius-lg)` |
1280
+
1281
+ ## radius-md
1282
+
1283
+ | Token | Value |
1284
+ |-------|-------|
1285
+ | `--clay-radius-md` | `var(--clay-foundation-radius-md)` |
1286
+
1287
+ ## radius-none
1288
+
1289
+ | Token | Value |
1290
+ |-------|-------|
1291
+ | `--clay-radius-none` | `var(--clay-foundation-radius-none)` |
1292
+
1293
+ ## radius-sm
1294
+
1295
+ | Token | Value |
1296
+ |-------|-------|
1297
+ | `--clay-radius-sm` | `var(--clay-foundation-radius-sm)` |
1298
+
1299
+ ## radius-xl
1300
+
1301
+ | Token | Value |
1302
+ |-------|-------|
1303
+ | `--clay-radius-xl` | `var(--clay-foundation-radius-xl)` |
1304
+
1305
+ ## radius-xs
1306
+
1307
+ | Token | Value |
1308
+ |-------|-------|
1309
+ | `--clay-radius-xs` | `var(--clay-foundation-radius-xs)` |
1310
+
1311
+ ## search-active
1312
+
1313
+ | Token | Value |
1314
+ |-------|-------|
1315
+ | `--clay-search-active-text` | `var(--clay-color-black)` |
1316
+ | `--clay-search-active-button-bg` | `var(--clay-color-black)` |
1317
+ | `--clay-search-active-border` | `var(--clay-color-grey-800)` |
1318
+ | `--clay-search-active-icon-color` | `var(--clay-color-text-on-black)` |
1319
+
1320
+ ## search-border
1321
+
1322
+ | Token | Value |
1323
+ |-------|-------|
1324
+ | `--clay-search-border-width` | `var(--clay-size-stroke-border)` |
1325
+
1326
+ ## search-button
1327
+
1328
+ | Token | Value |
1329
+ |-------|-------|
1330
+ | `--clay-search-button-size` | `44` |
1331
+ | `--clay-search-button-radius` | `var(--clay-radius-full)` |
1332
+
1333
+ ## search-font
1334
+
1335
+ | Token | Value |
1336
+ |-------|-------|
1337
+ | `--clay-search-font-size` | `var(--clay-web-type-p5-size)` |
1338
+ | `--clay-search-font-weight` | `var(--clay-web-type-weight-regular)` |
1339
+
1340
+ ## search-gap
1341
+
1342
+ | Token | Value |
1343
+ |-------|-------|
1344
+ | `--clay-search-gap` | `var(--clay-size-space-200)` |
1345
+
1346
+ ## search-icon
1347
+
1348
+ | Token | Value |
1349
+ |-------|-------|
1350
+ | `--clay-search-icon-size` | `var(--clay-size-space-600)` |
1351
+
1352
+ ## search-idle
1353
+
1354
+ | Token | Value |
1355
+ |-------|-------|
1356
+ | `--clay-search-idle-text` | `var(--clay-color-black)` |
1357
+ | `--clay-search-idle-border` | `var(--clay-color-grey-300)` |
1358
+ | `--clay-search-idle-placeholder` | `var(--clay-color-grey-500)` |
1359
+ | `--clay-search-idle-button-bg` | `var(--clay-color-grey-300)` |
1360
+ | `--clay-search-idle-icon-color` | `var(--clay-color-text-on-black)` |
1361
+
1362
+ ## search-line
1363
+
1364
+ | Token | Value |
1365
+ |-------|-------|
1366
+ | `--clay-search-line-height` | `1.5` |
1367
+
1368
+ ## search-padding
1369
+
1370
+ | Token | Value |
1371
+ |-------|-------|
1372
+ | `--clay-search-padding-left` | `var(--clay-size-space-400)` |
1373
+ | `--clay-search-padding-right` | `var(--clay-size-space-200)` |
1374
+ | `--clay-search-padding-y` | `var(--clay-size-space-200)` |
1375
+
1376
+ ## search-radius
1377
+
1378
+ | Token | Value |
1379
+ |-------|-------|
1380
+ | `--clay-search-radius` | `var(--clay-radius-full)` |
1381
+
1382
+ ## size-blur
1383
+
1384
+ | Token | Value |
1385
+ |-------|-------|
1386
+ | `--clay-size-blur-100` | `4` |
1387
+
1388
+ ## size-depth
1389
+
1390
+ | Token | Value |
1391
+ |-------|-------|
1392
+ | `--clay-size-depth-0` | `0` |
1393
+ | `--clay-size-depth-100` | `4` |
1394
+ | `--clay-size-depth-400` | `16` |
1395
+ | `--clay-size-depth-800` | `32` |
1396
+ | `--clay-size-depth-025` | `1` |
1397
+ | `--clay-size-depth-negative-025` | `-1` |
1398
+ | `--clay-size-depth-negative-100` | `-4` |
1399
+ | `--clay-size-depth-negative-200` | `-8` |
1400
+
1401
+ ## size-focus
1402
+
1403
+ | Token | Value |
1404
+ |-------|-------|
1405
+ | `--clay-size-focus-outline-offset` | `2` |
1406
+
1407
+ ## size-icon
1408
+
1409
+ | Token | Value |
1410
+ |-------|-------|
1411
+ | `--clay-size-icon-small` | `24` |
1412
+ | `--clay-size-icon-xsmall` | `12` |
1413
+ | `--clay-size-icon-check` | `14` |
1414
+ | `--clay-size-icon-menu` | `20` |
1415
+
1416
+ ## size-input
1417
+
1418
+ | Token | Value |
1419
+ |-------|-------|
1420
+ | `--clay-size-input-min-height` | `40` |
1421
+
1422
+ ## size-padding
1423
+
1424
+ | Token | Value |
1425
+ |-------|-------|
1426
+ | `--clay-size-padding-xl` | `24` |
1427
+
1428
+ ## size-space
1429
+
1430
+ | Token | Value |
1431
+ |-------|-------|
1432
+ | `--clay-size-space-0` | `var(--clay-foundation-spacing-0)` |
1433
+ | `--clay-size-space-50` | `var(--clay-foundation-spacing-2)` |
1434
+ | `--clay-size-space-100` | `var(--clay-foundation-spacing-4)` |
1435
+ | `--clay-size-space-150` | `var(--clay-foundation-spacing-6)` |
1436
+ | `--clay-size-space-200` | `var(--clay-foundation-spacing-8)` |
1437
+ | `--clay-size-space-300` | `var(--clay-foundation-spacing-12)` |
1438
+ | `--clay-size-space-400` | `var(--clay-foundation-spacing-16)` |
1439
+ | `--clay-size-space-500` | `var(--clay-foundation-spacing-20)` |
1440
+ | `--clay-size-space-600` | `var(--clay-foundation-spacing-24)` |
1441
+ | `--clay-size-space-800` | `var(--clay-foundation-spacing-32)` |
1442
+ | `--clay-size-space-1000` | `var(--clay-foundation-spacing-40)` |
1443
+ | `--clay-size-space-1200` | `var(--clay-foundation-spacing-48)` |
1444
+ | `--clay-size-space-1600` | `var(--clay-foundation-spacing-64)` |
1445
+ | `--clay-size-space-2000` | `var(--clay-foundation-spacing-80)` |
1446
+ | `--clay-size-space-2400` | `var(--clay-foundation-spacing-96)` |
1447
+ | `--clay-size-space-3000` | `var(--clay-foundation-spacing-120)` |
1448
+ | `--clay-size-space-4000` | `var(--clay-foundation-spacing-160)` |
1449
+ | `--clay-size-space-4500` | `var(--clay-foundation-spacing-180)` |
1450
+
1451
+ ## size-stroke
1452
+
1453
+ | Token | Value |
1454
+ |-------|-------|
1455
+ | `--clay-size-stroke-focus-ring` | `2` |
1456
+ | `--clay-size-stroke-border` | `var(--clay-foundation-stroke-width)` |
1457
+
1458
+ ## size-toggle
1459
+
1460
+ | Token | Value |
1461
+ |-------|-------|
1462
+ | `--clay-size-toggle-track-width` | `40` |
1463
+ | `--clay-size-toggle-thumb` | `16` |
1464
+ | `--clay-size-toggle-thumb-offset` | `4` |
1465
+
1466
+ ## slider-arrow
1467
+
1468
+ | Token | Value |
1469
+ |-------|-------|
1470
+ | `--clay-slider-arrow-border-color` | `var(--clay-color-black)` |
1471
+ | `--clay-slider-arrow-color` | `var(--clay-color-black)` |
1472
+ | `--clay-slider-arrow-icon-size` | `var(--clay-size-icon-small)` |
1473
+ | `--clay-slider-arrow-padding` | `var(--clay-size-space-300)` |
1474
+ | `--clay-slider-arrow-radius` | `var(--clay-radius-full)` |
1475
+ | `--clay-slider-arrow-bg-hover` | `var(--clay-color-background-default-default-hover)` |
1476
+ | `--clay-slider-arrow-disabled-border-color` | `var(--clay-color-grey-300)` |
1477
+ | `--clay-slider-arrow-disabled-color` | `var(--clay-color-grey-300)` |
1478
+ | `--clay-slider-arrow-dark-bg` | `var(--clay-color-background-black-default)` |
1479
+ | `--clay-slider-arrow-dark-bg-hover` | `var(--clay-color-background-black-hover)` |
1480
+ | `--clay-slider-arrow-dark-border-color` | `var(--clay-color-white)` |
1481
+ | `--clay-slider-arrow-dark-color` | `var(--clay-color-white)` |
1482
+ | `--clay-slider-arrow-dark-disabled-border-color` | `var(--clay-color-grey-500)` |
1483
+ | `--clay-slider-arrow-dark-disabled-color` | `var(--clay-color-grey-500)` |
1484
+ | `--clay-slider-arrow-bg` | `var(--clay-color-background-default-default)` |
1485
+
1486
+ ## slider-dots
1487
+
1488
+ | Token | Value |
1489
+ |-------|-------|
1490
+ | `--clay-slider-dots-dark-bg` | `rgba(255, 255, 255, 0.2)` |
1491
+ | `--clay-slider-dots-dark-bg-hover` | `rgba(255, 255, 255, 0.4)` |
1492
+ | `--clay-slider-dots-gap` | `var(--clay-size-space-200)` |
1493
+ | `--clay-slider-dots-size` | `var(--clay-size-space-200)` |
1494
+ | `--clay-slider-dots-radius` | `var(--clay-radius-full)` |
1495
+ | `--clay-slider-dots-bg` | `var(--clay-color-background-neutral-tertiary)` |
1496
+ | `--clay-slider-dots-bg-hover` | `var(--clay-color-background-neutral-secondary)` |
1497
+ | `--clay-slider-dots-bg-active` | `var(--clay-color-background-black-default)` |
1498
+ | `--clay-slider-dots-dark-bg-active` | `var(--clay-color-background-default-default)` |
1499
+
1500
+ ## tabs-capsule
1501
+
1502
+ | Token | Value |
1503
+ |-------|-------|
1504
+ | `--clay-tabs-capsule-height` | `54` |
1505
+ | `--clay-tabs-capsule-stroke-default-bg` | `rgba(0, 0, 0, 0)` |
1506
+ | `--clay-tabs-capsule-stroke-active-bg` | `rgba(0, 0, 0, 0)` |
1507
+ | `--clay-tabs-capsule-font-size` | `var(--clay-web-type-p4-size)` |
1508
+ | `--clay-tabs-capsule-padding-x` | `var(--clay-size-space-1000)` |
1509
+ | `--clay-tabs-capsule-padding-y` | `var(--clay-size-space-300)` |
1510
+ | `--clay-tabs-capsule-radius` | `var(--clay-radius-full)` |
1511
+ | `--clay-tabs-capsule-font-weight` | `var(--clay-web-type-weight-regular)` |
1512
+ | `--clay-tabs-capsule-fill-default-bg` | `var(--clay-color-grey-300)` |
1513
+ | `--clay-tabs-capsule-fill-default-color` | `var(--clay-color-grey-500)` |
1514
+ | `--clay-tabs-capsule-fill-default-border` | `var(--clay-color-grey-300)` |
1515
+ | `--clay-tabs-capsule-fill-active-bg` | `var(--clay-color-iris-300)` |
1516
+ | `--clay-tabs-capsule-fill-active-color` | `var(--clay-color-white)` |
1517
+ | `--clay-tabs-capsule-fill-active-border` | `var(--clay-color-iris-300)` |
1518
+ | `--clay-tabs-capsule-stroke-default-color` | `var(--clay-color-text-default-default)` |
1519
+ | `--clay-tabs-capsule-stroke-default-border` | `var(--clay-color-grey-300)` |
1520
+ | `--clay-tabs-capsule-stroke-active-color` | `var(--clay-color-iris-300)` |
1521
+ | `--clay-tabs-capsule-stroke-active-border` | `var(--clay-color-iris-300)` |
1522
+
1523
+ ## tabs-focus
1524
+
1525
+ | Token | Value |
1526
+ |-------|-------|
1527
+ | `--clay-tabs-focus-ring-color` | `var(--clay-color-border-brand-default)` |
1528
+
1529
+ ## tabs-indicator
1530
+
1531
+ | Token | Value |
1532
+ |-------|-------|
1533
+ | `--clay-tabs-indicator-width-brand` | `3` |
1534
+ | `--clay-tabs-indicator-width-neutral` | `var(--clay-size-stroke-border)` |
1535
+ | `--clay-tabs-indicator-neutral` | `var(--clay-color-border-black-default)` |
1536
+ | `--clay-tabs-indicator-brand` | `var(--clay-color-background-brand-default)` |
1537
+
1538
+ ## tabs-list
1539
+
1540
+ | Token | Value |
1541
+ |-------|-------|
1542
+ | `--clay-tabs-list-gap` | `var(--clay-size-space-1000)` |
1543
+
1544
+ ## tabs-panel
1545
+
1546
+ | Token | Value |
1547
+ |-------|-------|
1548
+ | `--clay-tabs-panel-font-size` | `var(--clay-web-type-p3-size)` |
1549
+ | `--clay-tabs-panel-padding` | `var(--clay-size-space-600)` |
1550
+ | `--clay-tabs-panel-color` | `var(--clay-color-text-default-default)` |
1551
+
1552
+ ## tabs-shell
1553
+
1554
+ | Token | Value |
1555
+ |-------|-------|
1556
+ | `--clay-tabs-shell-muted-bg` | `var(--clay-color-grey-100)` |
1557
+ | `--clay-tabs-shell-muted-radius-sm` | `var(--clay-radius-lg)` |
1558
+ | `--clay-tabs-shell-muted-radius-lg` | `var(--clay-radius-xl)` |
1559
+ | `--clay-tabs-shell-muted-padding-x-sm` | `var(--clay-size-space-400)` |
1560
+ | `--clay-tabs-shell-muted-padding-top-sm` | `var(--clay-size-space-800)` |
1561
+ | `--clay-tabs-shell-muted-padding-bottom-sm` | `var(--clay-size-space-400)` |
1562
+ | `--clay-tabs-shell-muted-padding-y-lg` | `var(--clay-size-space-1000)` |
1563
+ | `--clay-tabs-shell-muted-padding-x-lg` | `var(--clay-size-space-1000)` |
1564
+ | `--clay-tabs-shell-stroke-border-width` | `var(--clay-size-stroke-border)` |
1565
+ | `--clay-tabs-shell-stroke-border-color` | `var(--clay-color-border-neutral-tertiary)` |
1566
+ | `--clay-tabs-shell-stroke-radius-sm` | `var(--clay-radius-lg)` |
1567
+ | `--clay-tabs-shell-stroke-radius-lg` | `var(--clay-radius-3xl)` |
1568
+ | `--clay-tabs-shell-stroke-padding-sm-x` | `var(--clay-size-space-400)` |
1569
+ | `--clay-tabs-shell-stroke-padding-sm-top` | `var(--clay-size-space-800)` |
1570
+ | `--clay-tabs-shell-stroke-padding-sm-bottom` | `var(--clay-size-space-400)` |
1571
+ | `--clay-tabs-shell-stroke-padding-lg-x-start` | `var(--clay-size-space-1000)` |
1572
+ | `--clay-tabs-shell-stroke-padding-lg-x-end` | `var(--clay-size-space-600)` |
1573
+ | `--clay-tabs-shell-stroke-padding-lg-y` | `var(--clay-size-space-600)` |
1574
+ | `--clay-tabs-shell-stroke-bg` | `var(--clay-color-background-default-default)` |
1575
+
1576
+ ## tabs-trigger
1577
+
1578
+ | Token | Value |
1579
+ |-------|-------|
1580
+ | `--clay-tabs-trigger-bg-hover` | `rgba(0, 0, 0, 0)` |
1581
+ | `--clay-tabs-trigger-active-bg` | `rgba(0, 0, 0, 0)` |
1582
+ | `--clay-tabs-trigger-min-height` | `36` |
1583
+ | `--clay-tabs-trigger-font-size` | `var(--clay-web-type-p3-size)` |
1584
+ | `--clay-tabs-trigger-font-weight` | `var(--clay-web-type-weight-regular)` |
1585
+ | `--clay-tabs-trigger-font-weight-active` | `var(--clay-web-type-weight-bold)` |
1586
+ | `--clay-tabs-trigger-color` | `var(--clay-color-text-default-default)` |
1587
+ | `--clay-tabs-trigger-color-hover` | `var(--clay-color-text-default-default)` |
1588
+ | `--clay-tabs-trigger-active-color` | `var(--clay-color-text-default-default)` |
1589
+ | `--clay-tabs-trigger-padding-y` | `var(--clay-size-space-300)` |
1590
+ | `--clay-tabs-trigger-padding-x` | `var(--clay-size-space-200)` |
1591
+ | `--clay-tabs-trigger-radius` | `var(--clay-radius-xs)` |
1592
+
1593
+ ## tag-bg
1594
+
1595
+ | Token | Value |
1596
+ |-------|-------|
1597
+ | `--clay-tag-bg` | `var(--clay-color-grey-300)` |
1598
+ | `--clay-tag-bg-hover` | `var(--clay-color-grey-200)` |
1599
+
1600
+ ## tag-border
1601
+
1602
+ | Token | Value |
1603
+ |-------|-------|
1604
+ | `--clay-tag-border-color` | `rgba(0, 0, 0, 0)` |
1605
+
1606
+ ## tag-color
1607
+
1608
+ | Token | Value |
1609
+ |-------|-------|
1610
+ | `--clay-tag-color` | `var(--clay-color-text-default-default)` |
1611
+
1612
+ ## tag-dot
1613
+
1614
+ | Token | Value |
1615
+ |-------|-------|
1616
+ | `--clay-tag-dot-size` | `18` |
1617
+ | `--clay-tag-dot-font-size` | `var(--clay-web-type-p3-size)` |
1618
+ | `--clay-tag-dot-radius` | `var(--clay-radius-xs)` |
1619
+ | `--clay-tag-dot-bg` | `var(--clay-color-grey-500)` |
1620
+
1621
+ ## tag-font
1622
+
1623
+ | Token | Value |
1624
+ |-------|-------|
1625
+ | `--clay-tag-font-size` | `var(--clay-web-type-p4-size)` |
1626
+ | `--clay-tag-font-weight` | `var(--clay-web-type-weight-regular)` |
1627
+
1628
+ ## tag-gap
1629
+
1630
+ | Token | Value |
1631
+ |-------|-------|
1632
+ | `--clay-tag-gap` | `var(--clay-size-space-200)` |
1633
+
1634
+ ## tag-icon
1635
+
1636
+ | Token | Value |
1637
+ |-------|-------|
1638
+ | `--clay-tag-icon-variant-font-size` | `var(--clay-web-type-p3-size)` |
1639
+ | `--clay-tag-icon-color` | `var(--clay-color-text-default-default)` |
1640
+ | `--clay-tag-icon-size` | `var(--clay-size-space-400)` |
1641
+ | `--clay-tag-icon-variant-icon-size` | `var(--clay-size-space-500)` |
1642
+
1643
+ ## tag-min
1644
+
1645
+ | Token | Value |
1646
+ |-------|-------|
1647
+ | `--clay-tag-min-height` | `34` |
1648
+
1649
+ ## tag-padding
1650
+
1651
+ | Token | Value |
1652
+ |-------|-------|
1653
+ | `--clay-tag-padding-y` | `var(--clay-size-space-300)` |
1654
+ | `--clay-tag-padding-x` | `var(--clay-size-space-200)` |
1655
+
1656
+ ## tag-radius
1657
+
1658
+ | Token | Value |
1659
+ |-------|-------|
1660
+ | `--clay-tag-radius` | `var(--clay-radius-sm)` |
1661
+
1662
+ ## toggle-color
1663
+
1664
+ | Token | Value |
1665
+ |-------|-------|
1666
+ | `--clay-toggle-color` | `var(--clay-color-text-default-default)` |
1667
+
1668
+ ## toggle-focus
1669
+
1670
+ | Token | Value |
1671
+ |-------|-------|
1672
+ | `--clay-toggle-focus-ring-color` | `var(--clay-color-border-brand-default)` |
1673
+
1674
+ ## toggle-font
1675
+
1676
+ | Token | Value |
1677
+ |-------|-------|
1678
+ | `--clay-toggle-font-size` | `var(--clay-web-type-p3-size)` |
1679
+
1680
+ ## toggle-gap
1681
+
1682
+ | Token | Value |
1683
+ |-------|-------|
1684
+ | `--clay-toggle-gap` | `var(--clay-size-space-200)` |
1685
+
1686
+ ## toggle-thumb
1687
+
1688
+ | Token | Value |
1689
+ |-------|-------|
1690
+ | `--clay-toggle-thumb-border-width` | `0` |
1691
+ | `--clay-toggle-thumb-border-color` | `rgba(0, 0, 0, 0)` |
1692
+ | `--clay-toggle-thumb-shadow` | `none` |
1693
+ | `--clay-toggle-thumb-bg` | `var(--clay-color-background-default-default)` |
1694
+
1695
+ ## toggle-track
1696
+
1697
+ | Token | Value |
1698
+ |-------|-------|
1699
+ | `--clay-toggle-track-radius` | `var(--clay-radius-full)` |
1700
+ | `--clay-toggle-track-height` | `var(--clay-size-space-600)` |
1701
+ | `--clay-toggle-track-bg` | `var(--clay-color-grey-300)` |
1702
+ | `--clay-toggle-track-bg-checked` | `var(--clay-color-background-black-default)` |
1703
+
1704
+ ## web-type
1705
+
1706
+ | Token | Value |
1707
+ |-------|-------|
1708
+ | `--clay-web-type-huge-desktop-size` | `128` |
1709
+ | `--clay-web-type-huge-desktop-line-height` | `1` |
1710
+ | `--clay-web-type-huge-desktop-letter-spacing` | `-0.03` |
1711
+ | `--clay-web-type-big-desktop-size` | `96` |
1712
+ | `--clay-web-type-big-desktop-line-height` | `1` |
1713
+ | `--clay-web-type-big-desktop-letter-spacing` | `-0.03` |
1714
+ | `--clay-web-type-large-desktop-size` | `72` |
1715
+ | `--clay-web-type-large-desktop-line-height` | `1.1` |
1716
+ | `--clay-web-type-large-desktop-letter-spacing` | `-0.03` |
1717
+ | `--clay-web-type-h1-desktop-size` | `64` |
1718
+ | `--clay-web-type-h1-desktop-line-height` | `1.1` |
1719
+ | `--clay-web-type-h1-desktop-letter-spacing` | `-0.03` |
1720
+ | `--clay-web-type-h2-desktop-size` | `48` |
1721
+ | `--clay-web-type-h2-desktop-line-height` | `1.2` |
1722
+ | `--clay-web-type-h2-desktop-letter-spacing` | `-0.03` |
1723
+ | `--clay-web-type-h3-desktop-size` | `36` |
1724
+ | `--clay-web-type-h3-desktop-line-height` | `1.2` |
1725
+ | `--clay-web-type-h3-desktop-letter-spacing` | `-0.02` |
1726
+ | `--clay-web-type-h4-desktop-size` | `24` |
1727
+ | `--clay-web-type-h4-desktop-line-height` | `1.3` |
1728
+ | `--clay-web-type-h4-desktop-letter-spacing` | `-0.02` |
1729
+ | `--clay-web-type-h5-desktop-size` | `20` |
1730
+ | `--clay-web-type-h5-desktop-line-height` | `1.4` |
1731
+ | `--clay-web-type-h5-desktop-letter-spacing` | `0` |
1732
+ | `--clay-web-type-h6-desktop-size` | `18` |
1733
+ | `--clay-web-type-h6-desktop-line-height` | `1.5` |
1734
+ | `--clay-web-type-h6-desktop-letter-spacing` | `-0.01` |
1735
+ | `--clay-web-type-h7-topic-desktop-size` | `16` |
1736
+ | `--clay-web-type-h7-topic-desktop-line-height` | `1.5` |
1737
+ | `--clay-web-type-h7-topic-desktop-letter-spacing` | `0` |
1738
+ | `--clay-web-type-huge-mobile-size` | `64` |
1739
+ | `--clay-web-type-huge-mobile-line-height` | `1.2` |
1740
+ | `--clay-web-type-huge-mobile-letter-spacing` | `-0.02` |
1741
+ | `--clay-web-type-big-mobile-size` | `56` |
1742
+ | `--clay-web-type-big-mobile-line-height` | `1.2` |
1743
+ | `--clay-web-type-big-mobile-letter-spacing` | `-0.02` |
1744
+ | `--clay-web-type-large-mobile-size` | `44` |
1745
+ | `--clay-web-type-large-mobile-line-height` | `1.2` |
1746
+ | `--clay-web-type-large-mobile-letter-spacing` | `-0.02` |
1747
+ | `--clay-web-type-h1-mobile-size` | `40` |
1748
+ | `--clay-web-type-h1-mobile-line-height` | `1.2` |
1749
+ | `--clay-web-type-h1-mobile-letter-spacing` | `-0.02` |
1750
+ | `--clay-web-type-h2-mobile-size` | `36` |
1751
+ | `--clay-web-type-h2-mobile-line-height` | `1.2` |
1752
+ | `--clay-web-type-h2-mobile-letter-spacing` | `-0.02` |
1753
+ | `--clay-web-type-h3-mobile-size` | `32` |
1754
+ | `--clay-web-type-h3-mobile-line-height` | `1.2` |
1755
+ | `--clay-web-type-h3-mobile-letter-spacing` | `-0.02` |
1756
+ | `--clay-web-type-h4-mobile-size` | `22` |
1757
+ | `--clay-web-type-h4-mobile-line-height` | `1.3` |
1758
+ | `--clay-web-type-h4-mobile-letter-spacing` | `-0.02` |
1759
+ | `--clay-web-type-h5-mobile-size` | `20` |
1760
+ | `--clay-web-type-h5-mobile-line-height` | `1.4` |
1761
+ | `--clay-web-type-h5-mobile-letter-spacing` | `-0.01` |
1762
+ | `--clay-web-type-h6-mobile-size` | `18` |
1763
+ | `--clay-web-type-h6-mobile-line-height` | `1.5` |
1764
+ | `--clay-web-type-h6-mobile-letter-spacing` | `-0.01` |
1765
+ | `--clay-web-type-h7-topic-mobile-size` | `16` |
1766
+ | `--clay-web-type-h7-topic-mobile-line-height` | `1.5` |
1767
+ | `--clay-web-type-h7-topic-mobile-letter-spacing` | `0` |
1768
+ | `--clay-web-type-p1-size` | `20` |
1769
+ | `--clay-web-type-p2-size` | `18` |
1770
+ | `--clay-web-type-p3-size` | `16` |
1771
+ | `--clay-web-type-p4-size` | `14` |
1772
+ | `--clay-web-type-p5-size` | `12` |
1773
+ | `--clay-web-type-p-line-height` | `1.5` |
1774
+ | `--clay-web-type-p-letter-spacing` | `0` |
1775
+ | `--clay-web-type-heading-line-height` | `var(--clay-web-type-h2-desktop-line-height)` |
1776
+ | `--clay-web-type-body-line-height` | `var(--clay-web-type-p-line-height)` |
1777
+ | `--clay-web-type-body-lg-size` | `var(--clay-web-type-p1-size)` |
1778
+ | `--clay-web-type-body-lg-line-height` | `var(--clay-web-type-p-line-height)` |
1779
+ | `--clay-web-type-label-size` | `var(--clay-web-type-p4-size)` |
1780
+ | `--clay-web-type-label-line-height` | `var(--clay-web-type-p-line-height)` |
1781
+ | `--clay-web-type-h3-line-height` | `var(--clay-web-type-h3-desktop-line-height)` |
1782
+ | `--clay-web-type-p5-letter-spacing` | `var(--clay-web-type-p-letter-spacing)` |
1783
+ | `--clay-web-type-family` | `var(--clay-foundation-type-family-sans)` |
1784
+ | `--clay-web-type-family-mono` | `var(--clay-foundation-type-family-sans)` |
1785
+ | `--clay-web-type-weight-regular` | `var(--clay-foundation-type-weight-regular)` |
1786
+ | `--clay-web-type-weight-medium` | `var(--clay-foundation-type-weight-medium)` |
1787
+ | `--clay-web-type-weight-semi` | `var(--clay-foundation-type-weight-semi)` |
1788
+ | `--clay-web-type-weight-bold` | `var(--clay-foundation-type-weight-bold)` |
1789
+ | `--clay-web-type-huge-desktop-weight` | `var(--clay-foundation-type-weight-medium)` |
1790
+ | `--clay-web-type-big-desktop-weight` | `var(--clay-foundation-type-weight-medium)` |
1791
+ | `--clay-web-type-large-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1792
+ | `--clay-web-type-h1-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1793
+ | `--clay-web-type-h2-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1794
+ | `--clay-web-type-h3-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1795
+ | `--clay-web-type-h4-desktop-weight` | `var(--clay-foundation-type-weight-medium)` |
1796
+ | `--clay-web-type-h5-desktop-weight` | `var(--clay-foundation-type-weight-medium)` |
1797
+ | `--clay-web-type-h6-desktop-weight` | `var(--clay-foundation-type-weight-semi)` |
1798
+ | `--clay-web-type-h7-topic-desktop-weight` | `var(--clay-foundation-type-weight-regular)` |
1799
+ | `--clay-web-type-huge-mobile-weight` | `var(--clay-foundation-type-weight-medium)` |
1800
+ | `--clay-web-type-big-mobile-weight` | `var(--clay-foundation-type-weight-medium)` |
1801
+ | `--clay-web-type-large-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1802
+ | `--clay-web-type-h1-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1803
+ | `--clay-web-type-h2-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1804
+ | `--clay-web-type-h3-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1805
+ | `--clay-web-type-h4-mobile-weight` | `var(--clay-foundation-type-weight-medium)` |
1806
+ | `--clay-web-type-h5-mobile-weight` | `var(--clay-foundation-type-weight-medium)` |
1807
+ | `--clay-web-type-h6-mobile-weight` | `var(--clay-foundation-type-weight-semi)` |
1808
+ | `--clay-web-type-h7-topic-mobile-weight` | `var(--clay-foundation-type-weight-regular)` |
1809
+ | `--clay-web-type-label-weight` | `var(--clay-web-type-weight-medium)` |
1810
+ | `--clay-web-type-h3-weight` | `var(--clay-web-type-h3-desktop-weight)` |
1811
+