@youcan/celeste 0.13.1 → 0.14.1
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.
- package/ai/README.md +21 -0
- package/ai/component-registry.json +1864 -664
- package/ai/icons.json +12600 -0
- package/ai/tokens.json +2189 -0
- package/dist/celeste.css +228 -0
- package/dist/cjs/chunks/components.cjs +2 -0
- package/dist/cjs/chunks/mochi.cjs +168 -0
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/mochi.cjs +2 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/mochi/index.d.ts +2 -0
- package/dist/components/mochi/mochi.d.ts +22 -0
- package/dist/es/chunks/components.js +2 -0
- package/dist/es/chunks/mochi.js +162 -0
- package/dist/es/index.js +2 -1
- package/dist/es/mochi.js +2 -0
- package/package.json +3 -3
- package/src/components/index.ts +1 -0
- package/src/components/mochi/index.ts +2 -0
- package/src/components/mochi/mochi.vue +480 -0
- package/src/components/mochi/stories/mochi.stories.ts +105 -0
- package/src/components/modal/stories/modal.stories.ts +3 -3
- package/src/components/sidebar/sidebar-menu-action.vue +3 -0
- package/src/components/sidebar/sidebar-menu-button.vue +4 -0
- package/src/components/sidebar/sidebar-menu-sub-button.vue +3 -0
- package/src/components/sidebar/sidebar-menu-sub.vue +2 -0
- package/src/components/sidebar/sidebar-menu.vue +3 -0
- package/src/components/sidebar/stories/sidebar.stories.ts +2 -2
- package/ai/component-registry.md +0 -3496
- package/ai/icons.md +0 -142
- package/ai/tokens.md +0 -444
package/ai/tokens.md
DELETED
|
@@ -1,444 +0,0 @@
|
|
|
1
|
-
# Celeste Design Tokens
|
|
2
|
-
|
|
3
|
-
> Generated from `@youcan/celeste-tokens@0.13.1`. Do not edit.
|
|
4
|
-
|
|
5
|
-
**352 tokens.** Use them as CSS custom properties: `var(--color-text-sub-600)`.
|
|
6
|
-
|
|
7
|
-
**70 are semantic** — they change automatically under `[data-theme="dark"]`.
|
|
8
|
-
Always prefer a semantic token over the primitive it resolves to: `--color-text-sub-600`
|
|
9
|
-
adapts to dark mode, `--color-neutral-600` does not.
|
|
10
|
-
|
|
11
|
-
Dark mode is applied by setting `data-theme="dark"` on an ancestor, or `data-theme="system"`
|
|
12
|
-
to follow the OS. Never hard-code a dark colour.
|
|
13
|
-
|
|
14
|
-
---
|
|
15
|
-
|
|
16
|
-
## animation
|
|
17
|
-
|
|
18
|
-
- `--animation-extra-fast`: 100ms
|
|
19
|
-
- `--animation-extra-slow`: 500ms
|
|
20
|
-
- `--animation-fast`: 200ms
|
|
21
|
-
- `--animation-normal`: 300ms
|
|
22
|
-
- `--animation-slow`: 400ms
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
|
-
## breakpoint
|
|
27
|
-
|
|
28
|
-
- `--breakpoint-2xl`: 1536px
|
|
29
|
-
- `--breakpoint-lg`: 1024px
|
|
30
|
-
- `--breakpoint-md`: 768px
|
|
31
|
-
- `--breakpoint-sm`: 640px
|
|
32
|
-
- `--breakpoint-xl`: 1280px
|
|
33
|
-
|
|
34
|
-
---
|
|
35
|
-
|
|
36
|
-
## color
|
|
37
|
-
|
|
38
|
-
### Semantic — prefer these
|
|
39
|
-
|
|
40
|
-
- `--color-bg-soft-200`: #ebebeb → #333333 in dark
|
|
41
|
-
- `--color-bg-strong-950`: #171717 → #ffffff in dark
|
|
42
|
-
- `--color-bg-sub-300`: #d1d1d1 → #5c5c5c in dark
|
|
43
|
-
- `--color-bg-surface-800`: #292929 → #ebebeb in dark
|
|
44
|
-
- `--color-bg-weak-50`: #f7f7f7 → #1c1c1c in dark
|
|
45
|
-
- `--color-bg-white-0`: #ffffff → #171717 in dark
|
|
46
|
-
- `--color-icon-disabled-300`: #d1d1d1 → #5c5c5c in dark
|
|
47
|
-
- `--color-icon-soft-400`: #a3a3a3 → #7b7b7b in dark
|
|
48
|
-
- `--color-icon-strong-950`: #171717 → #ffffff in dark
|
|
49
|
-
- `--color-icon-sub-600`: #5c5c5c → #a3a3a3 in dark
|
|
50
|
-
- `--color-icon-white-0`: #ffffff → #171717 in dark
|
|
51
|
-
- `--color-illustration-soft-200`: #ebebeb → #292929 in dark
|
|
52
|
-
- `--color-illustration-strong-400`: #a3a3a3 → #5c5c5c in dark
|
|
53
|
-
- `--color-illustration-sub-300`: #d1d1d1 → #333333 in dark
|
|
54
|
-
- `--color-illustration-weak-100`: #f5f5f5 → #1c1c1c in dark
|
|
55
|
-
- `--color-illustration-white-0`: #ffffff → #171717 in dark
|
|
56
|
-
- `--color-overlay-overlay`: rgba(2, 13, 23, 0.24) → rgba(82, 88, 102, 0.32) in dark
|
|
57
|
-
- `--color-social-amazon`: #353e47 → #ffffff in dark
|
|
58
|
-
- `--color-social-apple`: #000000 → #ffffff in dark
|
|
59
|
-
- `--color-social-github`: #24292f → #ffffff in dark
|
|
60
|
-
- `--color-social-notion`: #1e2226 → #ffffff in dark
|
|
61
|
-
- `--color-social-tidal`: #000000 → #ffffff in dark
|
|
62
|
-
- `--color-social-twitter`: #010101 → #ffffff in dark
|
|
63
|
-
- `--color-social-zendesk`: #16140d → #ffffff in dark
|
|
64
|
-
- `--color-state-away-base`: #f6b51e → #e6a819 in dark
|
|
65
|
-
- `--color-state-away-dark`: #624c18 → #ffd268 in dark
|
|
66
|
-
- `--color-state-away-light`: #ffecc0 → rgba(251, 198, 75, 0.24) in dark
|
|
67
|
-
- `--color-state-away-lighter`: #fffaeb → rgba(251, 198, 75, 0.16) in dark
|
|
68
|
-
- `--color-state-error-base`: #fb3748 → #e93544 in dark
|
|
69
|
-
- `--color-state-error-dark`: #681219 → #ff6875 in dark
|
|
70
|
-
- `--color-state-error-light`: #ffc0c5 → rgba(251, 55, 72, 0.24) in dark
|
|
71
|
-
- `--color-state-error-lighter`: #ffebec → rgba(251, 55, 72, 0.16) in dark
|
|
72
|
-
- `--color-state-faded-dark`: #292929 → #d1d1d1 in dark
|
|
73
|
-
- `--color-state-faded-light`: #ebebeb → rgba(163, 163, 163, 0.24) in dark
|
|
74
|
-
- `--color-state-faded-lighter`: #f5f5f5 → rgba(163, 163, 163, 0.16) in dark
|
|
75
|
-
- `--color-state-feature-dark`: #351a75 → #8c71f6 in dark
|
|
76
|
-
- `--color-state-feature-light`: #cac0ff → rgba(120, 77, 239, 0.24) in dark
|
|
77
|
-
- `--color-state-feature-lighter`: #efebff → rgba(120, 77, 239, 0.16) in dark
|
|
78
|
-
- `--color-state-highlighted-base`: #fb4ba3 → #e9358f in dark
|
|
79
|
-
- `--color-state-highlighted-dark`: #68123d → #ff68b3 in dark
|
|
80
|
-
- `--color-state-highlighted-light`: #ffc0df → rgba(251, 75, 163, 0.24) in dark
|
|
81
|
-
- `--color-state-highlighted-lighter`: #ffebf4 → rgba(251, 75, 163, 0.16) in dark
|
|
82
|
-
- `--color-state-information-dark`: #122368 → #6895ff in dark
|
|
83
|
-
- `--color-state-information-light`: #c0d5ff → rgba(71, 108, 255, 0.24) in dark
|
|
84
|
-
- `--color-state-information-lighter`: #ebf1ff → rgba(71, 108, 255, 0.16) in dark
|
|
85
|
-
- `--color-state-stable-base`: #22d3bb → #1daf9c in dark
|
|
86
|
-
- `--color-state-stable-dark`: #0b463e → #3fdec9 in dark
|
|
87
|
-
- `--color-state-stable-light`: #c2f5ee → rgba(34, 211, 187, 0.24) in dark
|
|
88
|
-
- `--color-state-stable-lighter`: #e4fbf8 → rgba(34, 211, 187, 0.16) in dark
|
|
89
|
-
- `--color-state-success-base`: #1fc16b → #1daf61 in dark
|
|
90
|
-
- `--color-state-success-dark`: #0b4627 → #3ee089 in dark
|
|
91
|
-
- `--color-state-success-light`: #c2f5da → rgba(31, 193, 107, 0.16) in dark
|
|
92
|
-
- `--color-state-success-lighter`: #e0faec → rgba(31, 193, 107, 0.1) in dark
|
|
93
|
-
- `--color-state-verified-base`: #47c2ff → #35ade9 in dark
|
|
94
|
-
- `--color-state-verified-dark`: #124b68 → #68cdff in dark
|
|
95
|
-
- `--color-state-verified-light`: #c0eaff → rgba(71, 194, 255, 0.24) in dark
|
|
96
|
-
- `--color-state-verified-lighter`: #ebf8ff → rgba(71, 194, 255, 0.16) in dark
|
|
97
|
-
- `--color-state-warning-base`: #ff8447 → #e97135 in dark
|
|
98
|
-
- `--color-state-warning-dark`: #682f12 → #ff9a68 in dark
|
|
99
|
-
- `--color-state-warning-light`: #ffd5c0 → rgba(255, 145, 71, 0.24) in dark
|
|
100
|
-
- `--color-state-warning-lighter`: #fff1eb → rgba(255, 145, 71, 0.16) in dark
|
|
101
|
-
- `--color-stroke-soft-200`: #ebebeb → #333333 in dark
|
|
102
|
-
- `--color-stroke-strong-950`: #171717 → #ffffff in dark
|
|
103
|
-
- `--color-stroke-sub-300`: #d1d1d1 → #5c5c5c in dark
|
|
104
|
-
- `--color-stroke-white-0`: #ffffff → #171717 in dark
|
|
105
|
-
- `--color-text-disabled-300`: #d1d1d1 → #5c5c5c in dark
|
|
106
|
-
- `--color-text-soft-400`: #a3a3a3 → #7b7b7b in dark
|
|
107
|
-
- `--color-text-strong-950`: #171717 → #ffffff in dark
|
|
108
|
-
- `--color-text-sub-600`: #5c5c5c → #a3a3a3 in dark
|
|
109
|
-
- `--color-text-white-0`: #ffffff → #171717 in dark
|
|
110
|
-
|
|
111
|
-
### Primitive — fixed values
|
|
112
|
-
|
|
113
|
-
- `--color-black-alpha-10`: rgba(23, 23, 23, 0.1)
|
|
114
|
-
- `--color-black-alpha-16`: rgba(23, 23, 23, 0.16)
|
|
115
|
-
- `--color-black-alpha-24`: rgba(23, 23, 23, 0.24)
|
|
116
|
-
- `--color-blue-100`: #d5e2ff
|
|
117
|
-
- `--color-blue-200`: #c0d5ff
|
|
118
|
-
- `--color-blue-300`: #97baff
|
|
119
|
-
- `--color-blue-400`: #6895ff
|
|
120
|
-
- `--color-blue-50`: #ebf1ff
|
|
121
|
-
- `--color-blue-500`: #335cff
|
|
122
|
-
- `--color-blue-600`: #3559e9
|
|
123
|
-
- `--color-blue-700`: #2547d0
|
|
124
|
-
- `--color-blue-800`: #1f3bad
|
|
125
|
-
- `--color-blue-900`: #182f8b
|
|
126
|
-
- `--color-blue-950`: #122368
|
|
127
|
-
- `--color-blue-alpha-10`: rgba(71, 108, 255, 0.1)
|
|
128
|
-
- `--color-blue-alpha-16`: rgba(71, 108, 255, 0.16)
|
|
129
|
-
- `--color-blue-alpha-24`: rgba(71, 108, 255, 0.24)
|
|
130
|
-
- `--color-brand-100`: #ffd6e9
|
|
131
|
-
- `--color-brand-200`: #ffc2dd
|
|
132
|
-
- `--color-brand-300`: #ff99c7
|
|
133
|
-
- `--color-brand-400`: #ff66ab
|
|
134
|
-
- `--color-brand-50`: #ffebf4
|
|
135
|
-
- `--color-brand-500`: #e1116f
|
|
136
|
-
- `--color-brand-600`: #cb0f64
|
|
137
|
-
- `--color-brand-700`: #b40e59
|
|
138
|
-
- `--color-brand-800`: #9e0c4e
|
|
139
|
-
- `--color-brand-900`: #870a43
|
|
140
|
-
- `--color-brand-950`: #681239
|
|
141
|
-
- `--color-green-100`: #d0fbe9
|
|
142
|
-
- `--color-green-200`: #c2f5da
|
|
143
|
-
- `--color-green-300`: #84ebb4
|
|
144
|
-
- `--color-green-400`: #3ee089
|
|
145
|
-
- `--color-green-50`: #e0faec
|
|
146
|
-
- `--color-green-500`: #1fc16b
|
|
147
|
-
- `--color-green-600`: #1daf61
|
|
148
|
-
- `--color-green-700`: #178c4e
|
|
149
|
-
- `--color-green-800`: #1a7544
|
|
150
|
-
- `--color-green-900`: #16643b
|
|
151
|
-
- `--color-green-950`: #0b4627
|
|
152
|
-
- `--color-green-alpha-10`: rgba(31, 193, 107, 0.1)
|
|
153
|
-
- `--color-green-alpha-16`: rgba(31, 193, 107, 0.16)
|
|
154
|
-
- `--color-green-alpha-24`: rgba(31, 193, 107, 0.24)
|
|
155
|
-
- `--color-neutral-0`: #ffffff
|
|
156
|
-
- `--color-neutral-100`: #f5f5f5
|
|
157
|
-
- `--color-neutral-200`: #ebebeb
|
|
158
|
-
- `--color-neutral-300`: #d1d1d1
|
|
159
|
-
- `--color-neutral-400`: #a3a3a3
|
|
160
|
-
- `--color-neutral-50`: #f7f7f7
|
|
161
|
-
- `--color-neutral-500`: #7b7b7b
|
|
162
|
-
- `--color-neutral-600`: #5c5c5c
|
|
163
|
-
- `--color-neutral-700`: #333333
|
|
164
|
-
- `--color-neutral-800`: #292929
|
|
165
|
-
- `--color-neutral-900`: #1c1c1c
|
|
166
|
-
- `--color-neutral-950`: #171717
|
|
167
|
-
- `--color-neutral-alpha-10`: rgba(163, 163, 163, 0.1)
|
|
168
|
-
- `--color-neutral-alpha-16`: rgba(163, 163, 163, 0.16)
|
|
169
|
-
- `--color-neutral-alpha-24`: rgba(163, 163, 163, 0.24)
|
|
170
|
-
- `--color-orange-100`: #ffe3d5
|
|
171
|
-
- `--color-orange-200`: #ffd5c0
|
|
172
|
-
- `--color-orange-300`: #ffba97
|
|
173
|
-
- `--color-orange-400`: #ff9a68
|
|
174
|
-
- `--color-orange-50`: #fff1eb
|
|
175
|
-
- `--color-orange-500`: #ff8447
|
|
176
|
-
- `--color-orange-600`: #e97135
|
|
177
|
-
- `--color-orange-700`: #d05e25
|
|
178
|
-
- `--color-orange-800`: #ad4e1f
|
|
179
|
-
- `--color-orange-900`: #8b3e18
|
|
180
|
-
- `--color-orange-950`: #682f12
|
|
181
|
-
- `--color-orange-alpha-10`: rgba(255, 145, 71, 0.1)
|
|
182
|
-
- `--color-orange-alpha-16`: rgba(255, 145, 71, 0.16)
|
|
183
|
-
- `--color-orange-alpha-24`: rgba(255, 145, 71, 0.24)
|
|
184
|
-
- `--color-pink-100`: #ffd5ea
|
|
185
|
-
- `--color-pink-200`: #ffc0df
|
|
186
|
-
- `--color-pink-300`: #ff97cb
|
|
187
|
-
- `--color-pink-400`: #ff68b3
|
|
188
|
-
- `--color-pink-50`: #ffebf4
|
|
189
|
-
- `--color-pink-500`: #fb4ba3
|
|
190
|
-
- `--color-pink-600`: #e9358f
|
|
191
|
-
- `--color-pink-700`: #d0257a
|
|
192
|
-
- `--color-pink-800`: #ad1f66
|
|
193
|
-
- `--color-pink-900`: #8b1852
|
|
194
|
-
- `--color-pink-950`: #68123d
|
|
195
|
-
- `--color-pink-alpha-10`: rgba(251, 75, 163, 0.1)
|
|
196
|
-
- `--color-pink-alpha-16`: rgba(251, 75, 163, 0.16)
|
|
197
|
-
- `--color-pink-alpha-24`: rgba(251, 75, 163, 0.24)
|
|
198
|
-
- `--color-primary-alpha-10`: rgba(251, 75, 163, 0.1)
|
|
199
|
-
- `--color-primary-alpha-16`: rgba(251, 75, 163, 0.16)
|
|
200
|
-
- `--color-primary-alpha-24`: rgba(251, 75, 163, 0.24)
|
|
201
|
-
- `--color-primary-base`: #e1116f
|
|
202
|
-
- `--color-primary-dark`: #cb0f64
|
|
203
|
-
- `--color-primary-darker`: #b40e59
|
|
204
|
-
- `--color-purple-100`: #dcd5ff
|
|
205
|
-
- `--color-purple-200`: #cac0ff
|
|
206
|
-
- `--color-purple-300`: #a897ff
|
|
207
|
-
- `--color-purple-400`: #8c71f6
|
|
208
|
-
- `--color-purple-50`: #efebff
|
|
209
|
-
- `--color-purple-500`: #7d52f4
|
|
210
|
-
- `--color-purple-600`: #693ee0
|
|
211
|
-
- `--color-purple-700`: #5b2cc9
|
|
212
|
-
- `--color-purple-800`: #4c25a7
|
|
213
|
-
- `--color-purple-900`: #3d1d86
|
|
214
|
-
- `--color-purple-950`: #351a75
|
|
215
|
-
- `--color-purple-alpha-10`: rgba(120, 77, 239, 0.1)
|
|
216
|
-
- `--color-purple-alpha-16`: rgba(120, 77, 239, 0.16)
|
|
217
|
-
- `--color-purple-alpha-24`: rgba(120, 77, 239, 0.24)
|
|
218
|
-
- `--color-red-100`: #ffd5d8
|
|
219
|
-
- `--color-red-200`: #ffc0c5
|
|
220
|
-
- `--color-red-300`: #ff97a0
|
|
221
|
-
- `--color-red-400`: #ff6875
|
|
222
|
-
- `--color-red-50`: #ffebec
|
|
223
|
-
- `--color-red-500`: #fb3748
|
|
224
|
-
- `--color-red-600`: #e93544
|
|
225
|
-
- `--color-red-700`: #d02533
|
|
226
|
-
- `--color-red-800`: #ad1f2b
|
|
227
|
-
- `--color-red-900`: #8b1822
|
|
228
|
-
- `--color-red-950`: #681219
|
|
229
|
-
- `--color-red-alpha-10`: rgba(251, 55, 72, 0.1)
|
|
230
|
-
- `--color-red-alpha-16`: rgba(251, 55, 72, 0.16)
|
|
231
|
-
- `--color-red-alpha-24`: rgba(251, 55, 72, 0.24)
|
|
232
|
-
- `--color-sky-100`: #d5f1ff
|
|
233
|
-
- `--color-sky-200`: #c0eaff
|
|
234
|
-
- `--color-sky-300`: #97dcff
|
|
235
|
-
- `--color-sky-400`: #68cdff
|
|
236
|
-
- `--color-sky-50`: #ebf8ff
|
|
237
|
-
- `--color-sky-500`: #47c2ff
|
|
238
|
-
- `--color-sky-600`: #35ade9
|
|
239
|
-
- `--color-sky-700`: #2597d0
|
|
240
|
-
- `--color-sky-800`: #1f7ead
|
|
241
|
-
- `--color-sky-900`: #18658b
|
|
242
|
-
- `--color-sky-950`: #124b68
|
|
243
|
-
- `--color-sky-alpha-10`: rgba(71, 194, 255, 0.1)
|
|
244
|
-
- `--color-sky-alpha-16`: rgba(71, 194, 255, 0.16)
|
|
245
|
-
- `--color-sky-alpha-24`: rgba(71, 194, 255, 0.24)
|
|
246
|
-
- `--color-state-faded-base`: #7b7b7b
|
|
247
|
-
- `--color-state-feature-base`: #7d52f4
|
|
248
|
-
- `--color-state-information-base`: #335cff
|
|
249
|
-
- `--color-static-black`: #171717
|
|
250
|
-
- `--color-static-white`: #ffffff
|
|
251
|
-
- `--color-teal-100`: #d0fbf5
|
|
252
|
-
- `--color-teal-200`: #c2f5ee
|
|
253
|
-
- `--color-teal-300`: #84ebdd
|
|
254
|
-
- `--color-teal-400`: #3fdec9
|
|
255
|
-
- `--color-teal-50`: #e4fbf8
|
|
256
|
-
- `--color-teal-500`: #22d3bb
|
|
257
|
-
- `--color-teal-600`: #1daf9c
|
|
258
|
-
- `--color-teal-700`: #178c7d
|
|
259
|
-
- `--color-teal-800`: #1a7569
|
|
260
|
-
- `--color-teal-900`: #16645a
|
|
261
|
-
- `--color-teal-950`: #0b463e
|
|
262
|
-
- `--color-teal-alpha-10`: rgba(34, 211, 187, 0.1)
|
|
263
|
-
- `--color-teal-alpha-16`: rgba(34, 211, 187, 0.16)
|
|
264
|
-
- `--color-teal-alpha-24`: rgba(34, 211, 187, 0.24)
|
|
265
|
-
- `--color-white-alpha-10`: rgba(255, 255, 255, 0.1)
|
|
266
|
-
- `--color-white-alpha-16`: rgba(255, 255, 255, 0.16)
|
|
267
|
-
- `--color-white-alpha-24`: rgba(255, 255, 255, 0.24)
|
|
268
|
-
- `--color-yellow-100`: #ffefcc
|
|
269
|
-
- `--color-yellow-200`: #ffecc0
|
|
270
|
-
- `--color-yellow-300`: #ffe097
|
|
271
|
-
- `--color-yellow-400`: #ffd268
|
|
272
|
-
- `--color-yellow-50`: #fffaeb
|
|
273
|
-
- `--color-yellow-500`: #f6b51e
|
|
274
|
-
- `--color-yellow-600`: #e6a819
|
|
275
|
-
- `--color-yellow-700`: #c99a2c
|
|
276
|
-
- `--color-yellow-800`: #a78025
|
|
277
|
-
- `--color-yellow-900`: #86661d
|
|
278
|
-
- `--color-yellow-950`: #624c18
|
|
279
|
-
- `--color-yellow-alpha-10`: rgba(251, 198, 75, 0.1)
|
|
280
|
-
- `--color-yellow-alpha-16`: rgba(251, 198, 75, 0.16)
|
|
281
|
-
- `--color-yellow-alpha-24`: rgba(251, 198, 75, 0.24)
|
|
282
|
-
|
|
283
|
-
---
|
|
284
|
-
|
|
285
|
-
## docs
|
|
286
|
-
|
|
287
|
-
- `--docs-label`: 500 18px/32px InterVariable, Cairo, sans-serif
|
|
288
|
-
- `--docs-paragraph`: 400 18px/32px InterVariable, Cairo, sans-serif
|
|
289
|
-
|
|
290
|
-
---
|
|
291
|
-
|
|
292
|
-
## font
|
|
293
|
-
|
|
294
|
-
- `--font-families-cairo`: Cairo
|
|
295
|
-
- `--font-families-display`: InterDisplay, Cairo, sans-serif
|
|
296
|
-
- `--font-families-geist-mono`: 'Geist Mono'
|
|
297
|
-
- `--font-families-inter`: InterVariable
|
|
298
|
-
- `--font-families-inter-display`: InterDisplay
|
|
299
|
-
- `--font-families-mono`: 'Geist Mono', monospace
|
|
300
|
-
- `--font-families-sans`: InterVariable, Cairo, sans-serif
|
|
301
|
-
- `--font-size-0`: 11px
|
|
302
|
-
- `--font-size-1`: 12px
|
|
303
|
-
- `--font-size-10`: 56px
|
|
304
|
-
- `--font-size-2`: 14px
|
|
305
|
-
- `--font-size-3`: 16px
|
|
306
|
-
- `--font-size-4`: 18px
|
|
307
|
-
- `--font-size-5`: 20px
|
|
308
|
-
- `--font-size-6`: 24px
|
|
309
|
-
- `--font-size-7`: 32px
|
|
310
|
-
- `--font-size-8`: 40px
|
|
311
|
-
- `--font-size-9`: 48px
|
|
312
|
-
- `--font-weights-display-0`: 500
|
|
313
|
-
- `--font-weights-sans-0`: 400
|
|
314
|
-
- `--font-weights-sans-1`: 500
|
|
315
|
-
|
|
316
|
-
---
|
|
317
|
-
|
|
318
|
-
## label
|
|
319
|
-
|
|
320
|
-
- `--label-lg`: 500 18px/24px InterVariable, Cairo, sans-serif
|
|
321
|
-
- `--label-md`: 500 16px/24px InterVariable, Cairo, sans-serif
|
|
322
|
-
- `--label-sm`: 500 14px/20px InterVariable, Cairo, sans-serif
|
|
323
|
-
- `--label-xl`: 500 24px/32px InterVariable, Cairo, sans-serif
|
|
324
|
-
- `--label-xs`: 500 12px/16px InterVariable, Cairo, sans-serif
|
|
325
|
-
|
|
326
|
-
---
|
|
327
|
-
|
|
328
|
-
## letter
|
|
329
|
-
|
|
330
|
-
- `--letter-spacing-0`: -0.01em
|
|
331
|
-
- `--letter-spacing-1`: -0.005em
|
|
332
|
-
- `--letter-spacing-2`: 0em
|
|
333
|
-
- `--letter-spacing-3`: -0.015em
|
|
334
|
-
- `--letter-spacing-4`: -0.011000000000000001em
|
|
335
|
-
- `--letter-spacing-5`: -0.006em
|
|
336
|
-
- `--letter-spacing-6`: 0.06em
|
|
337
|
-
- `--letter-spacing-7`: 0.04em
|
|
338
|
-
- `--letter-spacing-8`: 0.02em
|
|
339
|
-
|
|
340
|
-
---
|
|
341
|
-
|
|
342
|
-
## line
|
|
343
|
-
|
|
344
|
-
- `--line-heights-0`: 64px
|
|
345
|
-
- `--line-heights-1`: 56px
|
|
346
|
-
- `--line-heights-2`: 48px
|
|
347
|
-
- `--line-heights-3`: 40px
|
|
348
|
-
- `--line-heights-4`: 32px
|
|
349
|
-
- `--line-heights-5`: 28px
|
|
350
|
-
- `--line-heights-6`: 24px
|
|
351
|
-
- `--line-heights-7`: 20px
|
|
352
|
-
- `--line-heights-8`: 16px
|
|
353
|
-
- `--line-heights-9`: 12px
|
|
354
|
-
|
|
355
|
-
---
|
|
356
|
-
|
|
357
|
-
## paragraph
|
|
358
|
-
|
|
359
|
-
- `--paragraph-indent-0`: 0px
|
|
360
|
-
- `--paragraph-lg`: 400 18px/24px InterVariable, Cairo, sans-serif
|
|
361
|
-
- `--paragraph-md`: 400 16px/24px InterVariable, Cairo, sans-serif
|
|
362
|
-
- `--paragraph-sm`: 400 14px/20px InterVariable, Cairo, sans-serif
|
|
363
|
-
- `--paragraph-spacing-0`: 0
|
|
364
|
-
- `--paragraph-xl`: 400 24px/32px InterVariable, Cairo, sans-serif
|
|
365
|
-
- `--paragraph-xs`: 400 12px/16px InterVariable, Cairo, sans-serif
|
|
366
|
-
|
|
367
|
-
---
|
|
368
|
-
|
|
369
|
-
## radius
|
|
370
|
-
|
|
371
|
-
- `--radius-10`: 10px
|
|
372
|
-
- `--radius-12`: 12px
|
|
373
|
-
- `--radius-16`: 16px
|
|
374
|
-
- `--radius-20`: 20px
|
|
375
|
-
- `--radius-24`: 24px
|
|
376
|
-
- `--radius-4`: 4px
|
|
377
|
-
- `--radius-6`: 6px
|
|
378
|
-
- `--radius-8`: 8px
|
|
379
|
-
- `--radius-full`: 999px
|
|
380
|
-
|
|
381
|
-
---
|
|
382
|
-
|
|
383
|
-
## shadow
|
|
384
|
-
|
|
385
|
-
- `--shadow-buttons-error-focus`: 0 0 0 2px #ffffff, 0 0 0 4px #fb37481a
|
|
386
|
-
- `--shadow-buttons-important-focus`: 0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29
|
|
387
|
-
- `--shadow-buttons-primary-focus`: 0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a
|
|
388
|
-
- `--shadow-fancy-buttons-error`: 0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748
|
|
389
|
-
- `--shadow-fancy-buttons-neutral`: 0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628
|
|
390
|
-
- `--shadow-fancy-buttons-primary`: 0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f
|
|
391
|
-
- `--shadow-fancy-buttons-stroke`: 0 1px 3px 0 #0e121b1f, 0 0 0 1px #e1e4ea
|
|
392
|
-
- `--shadow-regular-md`: 0 16px 32px -12px #0e121b1a
|
|
393
|
-
- `--shadow-regular-xs`: 0 1px 2px 0 #0a0d1408
|
|
394
|
-
- `--shadow-toggle-switch`: 0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08
|
|
395
|
-
|
|
396
|
-
---
|
|
397
|
-
|
|
398
|
-
## spacing
|
|
399
|
-
|
|
400
|
-
- `--spacing-0`: 0
|
|
401
|
-
- `--spacing-10`: 10px
|
|
402
|
-
- `--spacing-12`: 12px
|
|
403
|
-
- `--spacing-14`: 14px
|
|
404
|
-
- `--spacing-16`: 16px
|
|
405
|
-
- `--spacing-2`: 2px
|
|
406
|
-
- `--spacing-20`: 20px
|
|
407
|
-
- `--spacing-24`: 24px
|
|
408
|
-
- `--spacing-28`: 28px
|
|
409
|
-
- `--spacing-32`: 32px
|
|
410
|
-
- `--spacing-36`: 36px
|
|
411
|
-
- `--spacing-4`: 4px
|
|
412
|
-
- `--spacing-40`: 40px
|
|
413
|
-
- `--spacing-44`: 40px
|
|
414
|
-
- `--spacing-48`: 48px
|
|
415
|
-
- `--spacing-6`: 6px
|
|
416
|
-
- `--spacing-8`: 8px
|
|
417
|
-
|
|
418
|
-
---
|
|
419
|
-
|
|
420
|
-
## subheading
|
|
421
|
-
|
|
422
|
-
- `--subheading-md`: 500 16px/24px InterVariable, Cairo, sans-serif
|
|
423
|
-
- `--subheading-sm`: 500 14px/20px InterVariable, Cairo, sans-serif
|
|
424
|
-
- `--subheading-xs`: 500 12px/16px InterVariable, Cairo, sans-serif
|
|
425
|
-
- `--subheading-xxs`: 500 11px/12px InterVariable, Cairo, sans-serif
|
|
426
|
-
|
|
427
|
-
---
|
|
428
|
-
|
|
429
|
-
## text
|
|
430
|
-
|
|
431
|
-
- `--text-case-none`: none
|
|
432
|
-
- `--text-case-uppercase`: uppercase
|
|
433
|
-
- `--text-decoration-none`: none
|
|
434
|
-
|
|
435
|
-
---
|
|
436
|
-
|
|
437
|
-
## title
|
|
438
|
-
|
|
439
|
-
- `--title-h1-title`: 500 56px/64px InterDisplay, Cairo, sans-serif
|
|
440
|
-
- `--title-h2-title`: 500 48px/56px InterDisplay, Cairo, sans-serif
|
|
441
|
-
- `--title-h3-title`: 500 40px/48px InterDisplay, Cairo, sans-serif
|
|
442
|
-
- `--title-h4-title`: 500 32px/40px InterDisplay, Cairo, sans-serif
|
|
443
|
-
- `--title-h5-title`: 500 24px/32px InterDisplay, Cairo, sans-serif
|
|
444
|
-
- `--title-h6-title`: 500 20px/28px InterDisplay, Cairo, sans-serif
|