@hearthscale/app-ui 0.1.0 → 0.2.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/README.md +21 -2
- package/dist/CLASSES.md +283 -216
- package/dist/TOKENS.md +138 -20
- package/dist/chunks/chunk-SFZCPZQD.js +335 -0
- package/dist/editor.d.ts +32 -0
- package/dist/editor.js +69 -0
- package/dist/index.d.ts +322 -12
- package/dist/index.js +1093 -379
- package/dist/markdown.d.ts +25 -0
- package/dist/markdown.js +365 -0
- package/dist/ui.css +2451 -569
- package/package.json +28 -3
package/dist/TOKENS.md
CHANGED
|
@@ -57,13 +57,16 @@ one family apart.
|
|
|
57
57
|
| `--hov` | `rgba(150, 158, 175, 0.13)` | `rgba(120, 127, 145, 0.12)` | yes | yes | |
|
|
58
58
|
| `--hov-page` | `color-mix(in srgb, var(--card) 65%, var(--win))` | | yes | yes | |
|
|
59
59
|
| `--plate` | `color-mix(in srgb, var(--card) 60%, var(--win))` | | yes | yes | |
|
|
60
|
+
| `--hov-plate` | `color-mix(in srgb, var(--text) 7%, var(--plate))` | | yes | yes | |
|
|
61
|
+
| `--pressed` | `color-mix(in srgb, var(--text) 14%, transparent)` | | yes | yes | |
|
|
60
62
|
| `--act` | `rgba(158, 166, 182, 0.19)` | `rgba(255, 255, 255, 0.55)` | yes | yes | |
|
|
61
|
-
| `--accent` | `#ff9d2e` |
|
|
62
|
-
| `--link` | `var(--accent)` |
|
|
63
|
+
| `--accent` | `#ff9d2e` | | yes | yes | |
|
|
64
|
+
| `--link` | `var(--accent)` | | yes | yes | |
|
|
63
65
|
| `--selection` | `var(--hov)` | | yes | yes | |
|
|
64
66
|
| `--selection-ink` | `var(--text)` | | yes | yes | |
|
|
65
67
|
| `--switch-radius` | `6px` | | yes | no | |
|
|
66
68
|
| `--switch-gloss` | `var(--glimmer)` | | yes | yes | |
|
|
69
|
+
| `--switch-gloss-on` | `rgba(255, 255, 255, 0.25)` | | yes | yes | |
|
|
67
70
|
| `--switch-thumb-radius` | `4px` | | yes | no | |
|
|
68
71
|
| `--switch-thumb` | `var(--mut)` | | yes | yes | |
|
|
69
72
|
| `--switch-thumb-on` | `var(--accent-ink)` | | yes | yes | |
|
|
@@ -79,6 +82,47 @@ one family apart.
|
|
|
79
82
|
| `--ok` | `#3fb950` | `#2f9e44` | yes | yes | |
|
|
80
83
|
| `--warn` | `#d29922` | `#b7791f` | yes | yes | |
|
|
81
84
|
| `--bad-ink` | `#fff` | | yes | yes | |
|
|
85
|
+
| `--swatch-tint-share` | `22%` | `14%` | yes | no | |
|
|
86
|
+
| `--swatch-fill-ink` | `#fff` | | yes | yes | |
|
|
87
|
+
| `--swatch-rose` | `#eb617e` | `#c64563` | yes | yes | |
|
|
88
|
+
| `--swatch-rose-ink` | `#fe9aaa` | `#891739` | yes | yes | |
|
|
89
|
+
| `--swatch-rose-tint` | `color-mix( in srgb, var(--swatch-rose) var(--swatch-tint-share), trans…` | | yes | yes | |
|
|
90
|
+
| `--swatch-ember` | `#eb693f` | `#c74d23` | yes | yes | |
|
|
91
|
+
| `--swatch-ember-ink` | `#fea082` | `#852802` | yes | yes | |
|
|
92
|
+
| `--swatch-ember-tint` | `color-mix( in srgb, var(--swatch-ember) var(--swatch-tint-share), tran…` | | yes | yes | |
|
|
93
|
+
| `--swatch-amber` | `#ce8402` | `#a76a07` | yes | yes | |
|
|
94
|
+
| `--swatch-amber-ink` | `#faa836` | `#6a4203` | yes | yes | |
|
|
95
|
+
| `--swatch-amber-tint` | `color-mix( in srgb, var(--swatch-amber) var(--swatch-tint-share), tran…` | | yes | yes | |
|
|
96
|
+
| `--swatch-sun` | `#b09505` | `#8e7806` | yes | yes | |
|
|
97
|
+
| `--swatch-sun-ink` | `#d9ba26` | `#5a4b03` | yes | yes | |
|
|
98
|
+
| `--swatch-sun-tint` | `color-mix(in srgb, var(--swatch-sun) var(--swatch-tint-share), transpa…` | | yes | yes | |
|
|
99
|
+
| `--swatch-lime` | `#7fa707` | `#668700` | yes | yes | |
|
|
100
|
+
| `--swatch-lime-ink` | `#a5cc54` | `#3f5500` | yes | yes | |
|
|
101
|
+
| `--swatch-lime-tint` | `color-mix( in srgb, var(--swatch-lime) var(--swatch-tint-share), trans…` | | yes | yes | |
|
|
102
|
+
| `--swatch-moss` | `#42b14d` | `#229132` | yes | yes | |
|
|
103
|
+
| `--swatch-moss-ink` | `#76d57b` | `#015d15` | yes | yes | |
|
|
104
|
+
| `--swatch-moss-tint` | `color-mix( in srgb, var(--swatch-moss) var(--swatch-tint-share), trans…` | | yes | yes | |
|
|
105
|
+
| `--swatch-jade` | `#08b08d` | `#058e72` | yes | yes | |
|
|
106
|
+
| `--swatch-jade-ink` | `#0edbb0` | `#015a47` | yes | yes | |
|
|
107
|
+
| `--swatch-jade-tint` | `color-mix( in srgb, var(--swatch-jade) var(--swatch-tint-share), trans…` | | yes | yes | |
|
|
108
|
+
| `--swatch-sky` | `#06a6cd` | `#0986a6` | yes | yes | |
|
|
109
|
+
| `--swatch-sky-ink` | `#02d0ff` | `#02556a` | yes | yes | |
|
|
110
|
+
| `--swatch-sky-tint` | `color-mix(in srgb, var(--swatch-sky) var(--swatch-tint-share), transpa…` | | yes | yes | |
|
|
111
|
+
| `--swatch-ocean` | `#4297fd` | `#2679d8` | yes | yes | |
|
|
112
|
+
| `--swatch-ocean-ink` | `#8ebffe` | `#014a94` | yes | yes | |
|
|
113
|
+
| `--swatch-ocean-tint` | `color-mix( in srgb, var(--swatch-ocean) var(--swatch-tint-share), tran…` | | yes | yes | |
|
|
114
|
+
| `--swatch-indigo` | `#8087fd` | `#656ad8` | yes | yes | |
|
|
115
|
+
| `--swatch-indigo-ink` | `#acb5ff` | `#3d3d9a` | yes | yes | |
|
|
116
|
+
| `--swatch-indigo-tint` | `color-mix( in srgb, var(--swatch-indigo) var(--swatch-tint-share), tra…` | | yes | yes | |
|
|
117
|
+
| `--swatch-violet` | `#ab78ed` | `#8c5cc9` | yes | yes | |
|
|
118
|
+
| `--swatch-violet-ink` | `#cba8fe` | `#5c308e` | yes | yes | |
|
|
119
|
+
| `--swatch-violet-tint` | `color-mix( in srgb, var(--swatch-violet) var(--swatch-tint-share), tra…` | | yes | yes | |
|
|
120
|
+
| `--swatch-plum` | `#d368c1` | `#b14da1` | yes | yes | |
|
|
121
|
+
| `--swatch-plum-ink` | `#f794e4` | `#79226d` | yes | yes | |
|
|
122
|
+
| `--swatch-plum-tint` | `color-mix( in srgb, var(--swatch-plum) var(--swatch-tint-share), trans…` | | yes | yes | |
|
|
123
|
+
| `--swatch-slate` | `#8c97a6` | `#707a88` | yes | yes | |
|
|
124
|
+
| `--swatch-slate-ink` | `#b1bdcc` | `#434d5a` | yes | yes | |
|
|
125
|
+
| `--swatch-slate-tint` | `color-mix( in srgb, var(--swatch-slate) var(--swatch-tint-share), tran…` | | yes | yes | |
|
|
82
126
|
| `--diff-add` | `color-mix(in srgb, var(--ok) 16%, transparent)` | | yes | yes | |
|
|
83
127
|
| `--diff-add-gutter` | `color-mix(in srgb, var(--ok) 30%, transparent)` | | yes | yes | |
|
|
84
128
|
| `--diff-del` | `color-mix(in srgb, var(--bad) 16%, transparent)` | | yes | yes | |
|
|
@@ -144,27 +188,36 @@ one family apart.
|
|
|
144
188
|
| `--scroll-size` | `calc(var(--space) * 2.75)` | | yes | no | `11px` at the default `--space` |
|
|
145
189
|
| `--w-rail` | `calc(var(--space) * 14)` | | yes | no | `56px` at the default `--space` |
|
|
146
190
|
| `--icon-ctl-rail` | `calc(var(--space) * 10)` | | yes | no | `40px` at the default `--space` |
|
|
147
|
-
| `--gap-rail` | `
|
|
191
|
+
| `--gap-rail` | `var(--space)` | | yes | no | `4px` at the default `--space` |
|
|
148
192
|
| `--edge` | `calc(var(--space) * 2)` | | yes | no | `8px` at the default `--space` |
|
|
149
193
|
| `--h-lane` | `42px` | | yes | no | |
|
|
150
194
|
| `--h-lane-low` | `calc(var(--space) * 9)` | | yes | no | `36px` at the default `--space` |
|
|
151
195
|
| `--h-tab` | `calc(var(--space) * 7.5)` | | yes | no | `30px` at the default `--space` |
|
|
152
196
|
| `--tabcard-w` | `calc(var(--space) * 80)` | | yes | no | `320px` at the default `--space` |
|
|
153
197
|
| `--tabcard-dip` | `0.82` | | yes | no | |
|
|
154
|
-
| `--tab-
|
|
198
|
+
| `--tab-text-min` | `calc(var(--space) * 12)` | | yes | no | `48px` at the default `--space` |
|
|
199
|
+
| `--tab-fade` | `calc(var(--space) * 4)` | | yes | no | `16px` at the default `--space` |
|
|
200
|
+
| `--lane-arrow-w` | `calc(var(--space) * 5)` | | yes | no | `20px` at the default `--space` |
|
|
155
201
|
| `--h-lane-rule` | `calc(var(--space) * 6)` | | yes | no | `24px` at the default `--space` |
|
|
156
202
|
| `--lane-rule-alpha` | `0.22` | | yes | no | |
|
|
203
|
+
| `--lane-plus-alpha` | `0` | | yes | no | |
|
|
157
204
|
| `--gap-tile` | `calc(var(--space) * 1.5)` | | yes | no | `6px` at the default `--space` |
|
|
158
205
|
| `--grab-inset` | `var(--space)` | | yes | no | `4px` at the default `--space` |
|
|
159
206
|
| `--w-tile-min` | `calc(var(--space) * 80)` | | yes | no | `320px` at the default `--space` |
|
|
160
207
|
| `--h-tile-min` | `calc(var(--space) * 50)` | | yes | no | `200px` at the default `--space` |
|
|
161
208
|
| `--w-sidebar` | `calc(var(--space) * 59)` | | yes | no | `236px` at the default `--space` |
|
|
162
|
-
| `--pad-
|
|
163
|
-
| `--
|
|
209
|
+
| `--pad-sidebar` | `calc(var(--space) * 2.5)` | | yes | no | `10px` at the default `--space` |
|
|
210
|
+
| `--fan-tuck` | `0.6` | | yes | no | |
|
|
164
211
|
| `--rung-pressed-alpha` | `0.55` | | yes | no | |
|
|
212
|
+
| `--tab-rest-ink` | `color-mix(in srgb, var(--capt) 85%, var(--text))` | | yes | yes | |
|
|
213
|
+
| `--tab-rest-alpha` | `0.49` | | yes | no | |
|
|
165
214
|
| `--mark-hi` | `#ffd074` | | yes | yes | |
|
|
166
215
|
| `--mark-lo` | `#ff9d2e` | | yes | yes | |
|
|
216
|
+
| `--mark-grad` | `linear-gradient(180deg, var(--mark-hi), var(--mark-lo))` | | yes | no | |
|
|
217
|
+
| `--mark-glow` | `#ff9d2e` | | yes | yes | |
|
|
218
|
+
| `--map-floor` | `0.3` | | yes | no | |
|
|
167
219
|
| `--capt-close` | `#c42b1c` | | yes | yes | |
|
|
220
|
+
| `--capt-close-ink` | `#fff` | | yes | yes | |
|
|
168
221
|
| `--shadow-pop` | `0 5px 16px rgba(0, 0, 0, 0.07)` | | yes | no | |
|
|
169
222
|
| `--shadow-float` | `0 8px 28px rgba(0, 0, 0, 0.1)` | | yes | no | |
|
|
170
223
|
| `--shadow-modal` | `0 18px 48px rgba(0, 0, 0, 0.25)` | | yes | no | |
|
|
@@ -176,11 +229,60 @@ one family apart.
|
|
|
176
229
|
| `--scrim` | `rgba(0, 0, 0, 0.78)` | | yes | yes | |
|
|
177
230
|
| `--scrim-ink` | `#fff` | | yes | yes | |
|
|
178
231
|
| `--scrim-walk` | `rgba(4, 9, 18, 0.45)` | | yes | yes | |
|
|
179
|
-
| `--
|
|
232
|
+
| `--scrim-tour` | `0 0 0 100vmax var(--scrim-walk)` | | yes | no | |
|
|
180
233
|
| `--scrim-soft` | `color-mix(in srgb, var(--win) 55%, transparent)` | | yes | yes | |
|
|
181
234
|
| `--drop-border` | `2px dashed color-mix(in srgb, var(--mut) 50%, transparent)` | | yes | no | |
|
|
182
235
|
| `--scrim-dialog` | `rgba(0, 0, 0, 0.55)` | `var(--scrim-soft)` | yes | yes | |
|
|
183
236
|
| `--plate-menu` | `color-mix(in srgb, var(--win) 75%, var(--tipbg))` | | yes | yes | |
|
|
237
|
+
| `--glass-on-light-rim` | `rgba(0, 0, 0, 0.14)` | | yes | yes | |
|
|
238
|
+
| `--glass-on-light` | `rgba(255, 255, 255, 0.62)` | | yes | yes | |
|
|
239
|
+
| `--glass-on-light-hover` | `rgba(255, 255, 255, 0.8)` | | yes | yes | |
|
|
240
|
+
| `--glass-on-light-ink` | `rgba(0, 0, 0, 0.88)` | | yes | yes | |
|
|
241
|
+
| `--glass-on-light-lift` | `inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.18)` | | yes | no | |
|
|
242
|
+
| `--glass-on-dark-rim` | `rgba(255, 255, 255, 0.2)` | | yes | yes | |
|
|
243
|
+
| `--glass-on-dark` | `rgba(0, 0, 0, 0.58)` | | yes | yes | |
|
|
244
|
+
| `--glass-on-dark-hover` | `rgba(0, 0, 0, 0.74)` | | yes | yes | |
|
|
245
|
+
| `--glass-on-dark-ink` | `#fff` | | yes | yes | |
|
|
246
|
+
| `--glass-on-dark-lift` | `inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 8px rgba(0, 0, 0, 0.35)` | | yes | no | |
|
|
247
|
+
| `--film-press` | `linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, …` | | yes | no | |
|
|
248
|
+
| `--film-press-hover` | `linear-gradient( 180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255…` | | yes | no | |
|
|
249
|
+
| `--film-ticked` | `linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255,…` | | yes | no | |
|
|
250
|
+
| `--film-ticked-hover` | `linear-gradient( 180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255…` | | yes | no | |
|
|
251
|
+
| `--shadow-press` | `0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 22px rgba(0, 0, 0, 0.22)` | | yes | no | |
|
|
252
|
+
| `--shadow-ticked` | `0 1px 2px rgba(0, 0, 0, 0.18)` | | yes | no | |
|
|
253
|
+
| `--waytile-hover` | `color-mix(in srgb, var(--card) 90%, #000)` | | yes | yes | |
|
|
254
|
+
| `--shadow-orb` | `inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(0, 0, 0…` | | yes | no | |
|
|
255
|
+
| `--shadow-orb-lift` | `0 2px 8px rgba(0, 0, 0, 0.18)` | | yes | no | |
|
|
256
|
+
| `--shadow-swatch` | `inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(0, 0, 0, …` | | yes | no | |
|
|
257
|
+
| `--gloss-orb` | `radial-gradient( 120% 90% at 30% 0%, rgba(255, 255, 255, 0.4) 0%, rgba…` | | yes | no | |
|
|
258
|
+
| `--shadow-thumb` | `0 1px 3px rgba(0, 0, 0, 0.3)` | | yes | no | |
|
|
259
|
+
| `--ring-marker` | `0 0 0 1px rgba(0, 0, 0, 0.35)` | | yes | no | |
|
|
260
|
+
| `--shadow-logo` | `inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255…` | `inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(0, 0, 0,…` | yes | no | |
|
|
261
|
+
| `--gloss-logo` | `linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255,…` | | yes | no | |
|
|
262
|
+
| `--shadow-feature-logo` | `0 16px 28px -14px rgb(0 0 0 / 0.5)` | | yes | no | |
|
|
263
|
+
| `--scrim-feature` | `linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.5) 70%)` | | yes | no | |
|
|
264
|
+
| `--gloss-fill` | `linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, …` | | yes | no | |
|
|
265
|
+
| `--gloss-fill-edge` | `inset 0 1px 0 rgba(255, 255, 255, 0.55)` | | yes | no | |
|
|
266
|
+
| `--page-ground` | `#fff` | | yes | yes | |
|
|
267
|
+
| `--picture-ink` | `#fff` | | yes | yes | |
|
|
268
|
+
| `--picture-line` | `rgba(255, 255, 255, 0.45)` | | yes | yes | |
|
|
269
|
+
| `--picture-film` | `rgba(255, 255, 255, 0.07)` | | yes | yes | |
|
|
270
|
+
| `--picture-rim` | `rgba(255, 255, 255, 0.22)` | | yes | yes | |
|
|
271
|
+
| `--picture-gloss` | `inset 0 1px 0 rgba(255, 255, 255, 0.35)` | | yes | no | |
|
|
272
|
+
| `--picture-mesh-1` | `#22323f` | | yes | yes | |
|
|
273
|
+
| `--picture-mesh-2` | `#0b0b0c` | | yes | yes | |
|
|
274
|
+
| `--picture-mesh-3` | `#152725` | | yes | yes | |
|
|
275
|
+
| `--picture-mesh-4` | `#1c1d20` | | yes | yes | |
|
|
276
|
+
| `--picture-mesh-5` | `#0b0b0c` | | yes | yes | |
|
|
277
|
+
| `--picture-mesh-6` | `#1a2229` | | yes | yes | |
|
|
278
|
+
| `--heat-1` | `#693611` | | yes | yes | |
|
|
279
|
+
| `--heat-2` | `#a36a1f` | | yes | yes | |
|
|
280
|
+
| `--heat-3` | `#e8a530` | | yes | yes | |
|
|
281
|
+
| `--heat-4` | `#ffda6b` | | yes | yes | |
|
|
282
|
+
| `--heat-5` | `#ffe77a` | | yes | yes | |
|
|
283
|
+
| `--heat-6` | `#ff9a1f` | | yes | yes | |
|
|
284
|
+
| `--heat-7` | `#ff4d0087` | | yes | yes | |
|
|
285
|
+
| `--heat-ground` | `#000` | | yes | yes | |
|
|
184
286
|
| `--chip-file` | `color-mix(in srgb, var(--info) 16%, transparent)` | | yes | yes | |
|
|
185
287
|
| `--chip-folder` | `color-mix(in srgb, var(--warn) 18%, transparent)` | | yes | yes | |
|
|
186
288
|
| `--chip-skill` | `color-mix(in srgb, var(--ok) 16%, transparent)` | | yes | yes | |
|
|
@@ -189,6 +291,10 @@ one family apart.
|
|
|
189
291
|
| `--blur-overlay` | `blur(24px) saturate(1.4)` | | yes | no | |
|
|
190
292
|
| `--blur-sheet` | `blur(36px) saturate(1.45)` | | yes | no | |
|
|
191
293
|
| `--blur-tip` | `blur(1px)` | | yes | no | |
|
|
294
|
+
| `--blur-fan` | `blur(2px)` | | yes | no | |
|
|
295
|
+
| `--blur-glass` | `blur(10px)` | | yes | no | |
|
|
296
|
+
| `--blur-film` | `blur(14px)` | | yes | no | |
|
|
297
|
+
| `--blur-copy` | `blur(8px)` | | yes | no | |
|
|
192
298
|
| `--grain-image` | `url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%2…` | | yes | no | |
|
|
193
299
|
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | | yes | no | |
|
|
194
300
|
| `--dur` | `0.15s` | | yes | no | reduced motion: `0s` |
|
|
@@ -197,6 +303,9 @@ one family apart.
|
|
|
197
303
|
| `--dur-spin` | `0.9s` | | yes | no | |
|
|
198
304
|
| `--dur-shine` | `2.2s` | | yes | no | |
|
|
199
305
|
| `--dur-flash` | `1.2s` | | yes | no | |
|
|
306
|
+
| `--dur-copied` | `1.5s` | | yes | no | |
|
|
307
|
+
| `--dur-arrive` | `0.6s` | | yes | no | reduced motion: `0s` |
|
|
308
|
+
| `--dur-glow` | `0.35s` | | yes | no | |
|
|
200
309
|
| `--dur-scroll` | `25ms` | | yes | no | reduced motion: `0s` |
|
|
201
310
|
| `--press` | `none` | | yes | no | |
|
|
202
311
|
| `--press-fade` | `1` | | yes | no | |
|
|
@@ -215,6 +324,7 @@ one family apart.
|
|
|
215
324
|
| `--fs-page` | `26px` | | yes | no | |
|
|
216
325
|
| `--fs-code` | `22px` | | yes | no | |
|
|
217
326
|
| `--fs-page-hero` | `28px` | | yes | no | |
|
|
327
|
+
| `--fs-figure` | `30px` | | yes | no | |
|
|
218
328
|
| `--fs-wordmark` | `16.5px` | | yes | no | |
|
|
219
329
|
| `--fs-walk-title` | `40px` | | yes | no | |
|
|
220
330
|
| `--fw-med` | `500` | | yes | no | |
|
|
@@ -229,8 +339,7 @@ one family apart.
|
|
|
229
339
|
| `--docs-callout-info` | `#3b82f6` | | yes | yes | |
|
|
230
340
|
| `--fs-market-title` | `clamp(32px, 4.2cqi, 64px)` | | yes | no | |
|
|
231
341
|
| `--fs-market-lead` | `20px` | | yes | no | |
|
|
232
|
-
| `--fs-market-
|
|
233
|
-
| `--fs-market-tile-first` | `clamp(28px, 3vw, 40px)` | | yes | no | |
|
|
342
|
+
| `--fs-market-feature` | `clamp(26px, 3cqi, 40px)` | | yes | no | |
|
|
234
343
|
| `--fs-market-name` | `40px` | | yes | no | |
|
|
235
344
|
| `--fs-market-name-narrow` | `32px` | | yes | no | |
|
|
236
345
|
| `--fs-market-line` | `18px` | | yes | no | |
|
|
@@ -244,7 +353,16 @@ one family apart.
|
|
|
244
353
|
| `--market-wash-foot` | `oklch(0.15 0.015 220)` | `oklch(0.95 0.015 200)` | yes | yes | |
|
|
245
354
|
| `--market-hero-ink` | `#fff` | `var(--text)` | yes | yes | |
|
|
246
355
|
| `--market-hero-brightness` | `0.82` | `1` | yes | no | |
|
|
356
|
+
| `--market-cover-ratio` | `12 / 5` | | yes | no | |
|
|
247
357
|
| `--hue` | `0` | | no | no | written at run time |
|
|
358
|
+
| `--share` | `1` | | no | no | written at run time |
|
|
359
|
+
| `--fan-n` | `1` | | no | no | written at run time |
|
|
360
|
+
| `--fan-k` | `0` | | no | no | written at run time |
|
|
361
|
+
| `--tab-whole` | `0px` | | no | no | written at run time |
|
|
362
|
+
| `--tab-open` | `0px` | | no | no | written at run time |
|
|
363
|
+
| `--tab-bare` | `0px` | | no | no | written at run time |
|
|
364
|
+
| `--tab-w` | `0px` | | no | no | written at run time |
|
|
365
|
+
| `--strip-w` | `0px` | | no | no | written at run time |
|
|
248
366
|
| `--b1-h` | `0` | | no | no | written at run time |
|
|
249
367
|
| `--b1-l` | `0` | | no | no | written at run time |
|
|
250
368
|
| `--b1-c` | `0` | | no | no | written at run time |
|
|
@@ -283,14 +401,14 @@ one family apart.
|
|
|
283
401
|
The selectors whose corner reads each token. A theme reshapes a role
|
|
284
402
|
through its token; it selects a class only to set one family apart.
|
|
285
403
|
|
|
286
|
-
| Token | Selectors
|
|
287
|
-
| ----------------------- |
|
|
288
|
-
| `--r-card` | `.hs-setrow:where(:not(.hs-setrow + .hs-setrow))`, `.hs-setrow:where(:not(:has(+ .hs-setrow)))`, `.hs-menu`, `.hs-tip`, `.hs-md img`, `.hs-settings-plate`, `.hs-shelf-tile`, `.hs-shelf-file`, `.hs-ring-text`, `.hs-ask-preview-view`, `.hs-user-edit`, `.hs-user-bubble`, `.hs-user-tile`, `.hs-work-body`, `.hs-compaction-body`, `.hs-unknown-part`, `.hs-changed`, `.hs-chat-image`, `.hs-audio`, `.hs-md-picture`, `.hs-terminal-paste`, `.hs-view-frame`, `.hs-appearance-tile`, `.hs-theme-preview`, `.hs-colourway-tile`, `.hs-colourway-editor`, `.hs-notice`, `.hs-chart, .hs-diagram`, `.hs-code-block`, `.hs-shell .hs-code-slot`, `.hs-card`, `.hs-model-tile`, `.hs-model-stat`, `.hs-settings-card`, `.hs-settings-card > .hs-setrow:first-child`, `.hs-settings-card > .hs-setrow:last-child`, `.hs-settings-card-header`, `.hs-docs-image`, `.hs-docs-image-link:focus-visible`, `.hs-docs-table`, `.hs-docs-code`, `.hs-docs-callout`, `.hs-docs-card`, `.hs-docs-tabs`, `.hs-docs-accordion`, `.hs-shell .hs-docs-pager-card`, `.hs-market-hero::before`, `.hs-market-
|
|
289
|
-
| `--r-ctl` | `.hs-glassbtn`, `.hs-sessrow`, `.hs-projrow`, `.hs-plugrow`, `.hs-chip`, `.hs-mitem`, `.hs-url`, `.hs-level-control`, `.hs-model-trigger`, `.hs-picker-
|
|
290
|
-
| `--r-icon` | `.hs-market-logo`, `.hs-app-icon`
|
|
291
|
-
| `--r-pill` | `.hs-shell::-webkit-scrollbar-thumb, .hs-shell ::-webkit-scrollbar-thumb`, `.hs-sessrow[data-ins]::before`, `.hs-shell .hs-tabscroll::-webkit-scrollbar-thumb`, `.hs-range`, `.hs-jump`, `.hs-turn-rail-line`, `.hs-shelf-chip`, `.hs-drop-pill`, `.hs-copy-tip`, `.hs-audio-bar`, `.hs-meter[data-variant='bar']`, `.hs-chip[data-tone]`, `.hs-menu-chip, .hs-tooltip-chip`, `.hs-colour-slider`, `.hs-colour-slider-thumb`, `.hs-model-
|
|
292
|
-
| `--r-round` | `.hs-range::-webkit-slider-thumb`, `.hs-drawer-dot`, `.hs-composer-tool`, `.hs-composer-stop, .hs-composer-send`, `.hs-shelf-remove`, `.hs-ring`, `.hs-audio-play`, `.hs-tab-dot`, `.hs-walk-dot`, `.hs-orb`, `.hs-colourway-check, .hs-colourway-custom-check`, `.hs-
|
|
293
|
-
| `--r-sm` | `.hs-md code`, `.hs-diff-act`, `.hs-inline-chip`, `.hs-ring-layer-line`, `.hs-ask-data`, `.hs-ask-picture`, `.hs-kbd`, `.hs-chat-action`, `.hs-user-edit`, `.hs-user-bubble`, `.hs-md-missing`, `.hs-panel-favicon`, `.hs-tab-close`, `.hs-site-button`, `.hs-browser-menu-button`, `.hs-path-segment`, `.hs-panel-path`, `.hs-theme-remove`, `.hs-panel-small-button`, `.hs-browser-zoom-reset`, `.hs-icon-button[data-size='sm']`, `.hs-code-copy`, `.hs-docs-prose code`, `.hs-settings-number-steps button`, `.hs-key-binding`, `.hs-key-record`, `.hs-tab-card-preview`, `.hs-divider:focus-visible`
|
|
294
|
-
| `--r-tile` | `.hs-window`, `.hs-drawer`, `.hs-composer-main`, `.hs-drop-overlay`, `.hs-composer-dock > .hs-ask > .hs-card`, `.hs-confirm-box`, `.hs-walk[data-host='dialog'] .hs-walk-card`, `.hs-walk-image`, `.hs-sheet-box`, `.hs-view-modal-plate`, `.hs-modal`, `.hs-selection-dialog`, `.hs-tile-drop`, `.hs-surface`
|
|
295
|
-
| `--switch-radius` | `.hs-tog`
|
|
296
|
-
| `--switch-thumb-radius` | `.hs-tog .hs-toggle-thumb`
|
|
404
|
+
| Token | Selectors |
|
|
405
|
+
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
406
|
+
| `--r-card` | `.hs-setrow:where(:not(.hs-setrow + .hs-setrow))`, `.hs-setrow:where(:not(:has(+ .hs-setrow)))`, `.hs-menu`, `.hs-tip`, `.hs-md img`, `.hs-settings-plate`, `.hs-shelf-tile`, `.hs-shelf-file`, `.hs-ring-text`, `.hs-ask-preview-view`, `.hs-user-edit`, `.hs-user-bubble`, `.hs-user-tile`, `.hs-work-body`, `.hs-compaction-body`, `.hs-unknown-part`, `.hs-changed`, `.hs-chat-image`, `.hs-audio`, `.hs-media-text`, `.hs-md-picture`, `.hs-terminal-paste`, `.hs-tour-part`, `.hs-view-frame`, `.hs-appearance-tile`, `.hs-theme-preview`, `.hs-colourway-tile`, `.hs-colourway-editor`, `.hs-notice`, `.hs-overlay-note`, `.hs-chart, .hs-diagram`, `.hs-code-block`, `.hs-shell .hs-code-slot`, `.hs-card`, `.hs-model-tile`, `.hs-model-stat`, `.hs-settings-card`, `.hs-settings-card > .hs-setrow:first-child`, `.hs-settings-card > .hs-setrow:last-child`, `.hs-settings-card-header`, `.hs-docs-image`, `.hs-docs-image-link:focus-visible`, `.hs-docs-table`, `.hs-docs-code`, `.hs-docs-callout`, `.hs-docs-card`, `.hs-docs-tabs`, `.hs-docs-accordion`, `.hs-shell .hs-docs-pager-card`, `.hs-market-hero::before`, `.hs-market-feature`, `.hs-market-row, .hs-market-recommended-row`, `.hs-market-shots img`, `.hs-model-media-output img`, `.hs-model-runtime-row`, `.hs-server-log`, `.hs-dashboard-plate, .hs-bento-tile, .hs-figure`, `.hs-tab-card`, `.hs-popover`, `.hs-toast`, `.hs-picture-compare`, `.hs-rich-text pre` |
|
|
407
|
+
| `--r-ctl` | `.hs-glassbtn`, `.hs-sessrow`, `.hs-projrow`, `.hs-plugrow`, `.hs-chip`, `.hs-mitem`, `.hs-url`, `.hs-level-control`, `.hs-model-trigger`, `.hs-picker-row`, `.hs-nav-rail-item`, `.hs-search-result`, `.hs-turn-rail:focus-visible`, `.hs-composer-menu-row`, `.hs-ask-command`, `.hs-ask-option`, `.hs-ask-pick`, `.hs-ask-pick-press`, `.hs-input`, `.hs-user-file`, `.hs-work-line, .hs-work-toggle`, `.hs-spawn-member`, `.hs-media-actions button`, `.hs-audio-save`, `.hs-media-text-save`, `.hs-lightbox-button, .hs-lightbox-step`, `.hs-lightbox-reread`, `.hs-panel-button`, `.hs-browser-address`, `.hs-panel-picker`, `.hs-file-row`, `.hs-ta.hs-sheet-input`, `.hs-sidebar-rail-item`, `.hs-sidebar-drag`, `.hs-panel-field`, `.hs-button`, `.hs-icon-button`, `.hs-field-input`, `.hs-model-browser-row`, `.hs-selection-option`, `.hs-docs-code-copy`, `.hs-docs-card-icon`, `.hs-docs-tab`, `.hs-market-search`, `.hs-market-menu-button`, `.hs-shell .hs-signin-method`, `.hs-settings-tabs button`, `.hs-settings-input`, `.hs-settings-textarea textarea`, `.hs-settings-crumb-item button`, `.hs-segmented`, `.hs-segmented-option`, `.hs-shell .hs-dashboard-link`, `.hs-dashboard-menu`, `.hs-lane-crumb:focus-visible`, `.hs-lane-tabs-arrow` |
|
|
408
|
+
| `--r-icon` | `.hs-picture-tile`, `.hs-model-avatar`, `.hs-market-logo`, `.hs-market-logo img`, `.hs-app-icon` |
|
|
409
|
+
| `--r-pill` | `.hs-shell::-webkit-scrollbar-thumb, .hs-shell ::-webkit-scrollbar-thumb`, `.hs-sessrow[data-ins]::before`, `.hs-shell .hs-tabscroll::-webkit-scrollbar-thumb`, `.hs-range`, `.hs-jump`, `.hs-picker-row-action`, `.hs-overlay-thumb`, `.hs-turn-rail-line`, `.hs-shelf-chip`, `.hs-drop-pill`, `.hs-copy-tip`, `.hs-audio-bar`, `.hs-meter[data-variant='bar']`, `.hs-chip[data-tone]`, `.hs-menu-chip, .hs-tooltip-chip`, `.hs-colour-slider`, `.hs-colour-slider-thumb`, `.hs-model-detail-chip, .hs-model-capabilities-labeled .hs-model-capability`, `.hs-docs-callout-rail`, `.hs-docs-step::before`, `.hs-market-feature-dots`, `.hs-market-feature-dots button`, `.hs-shell .hs-signin-method small`, `.hs-model-fit`, `.hs-model-execution progress::-webkit-progress-bar`, `.hs-model-execution progress::-webkit-progress-value`, `.hs-installer-bar`, `.hs-world-map-ramp`, `.hs-picture-compare-name` |
|
|
410
|
+
| `--r-round` | `.hs-range::-webkit-slider-thumb`, `.hs-drawer-dot`, `.hs-composer-tool`, `.hs-composer-stop, .hs-composer-send`, `.hs-shelf-remove`, `.hs-ring`, `.hs-audio-play`, `.hs-tab-dot`, `.hs-walk-dot`, `.hs-orb`, `.hs-orb[data-sel='true']::after`, `.hs-colourway-check, .hs-colourway-custom-check`, `.hs-installer-dot`, `.hs-rail-plate-bypass`, `.hs-lane-tab[data-fit='mark'] > .hs-tab-close`, `.hs-fan-dot, .hs-fan-item-dot`, `.hs-swatch-dot`, `.hs-swatch-choice`, `.hs-date-grid-day`, `.hs-person-mark`, `.hs-picture-compare-knob` |
|
|
411
|
+
| `--r-sm` | `.hs-md code`, `.hs-diff-act`, `.hs-inline-chip`, `.hs-ring-layer-line`, `.hs-ask-data`, `.hs-ask-picture`, `.hs-kbd`, `.hs-chat-action`, `.hs-user-edit`, `.hs-user-bubble`, `.hs-md-missing`, `.hs-panel-favicon`, `.hs-tab-close`, `.hs-site-button`, `.hs-browser-menu-button`, `.hs-path-segment`, `.hs-panel-path`, `.hs-theme-remove`, `.hs-panel-small-button`, `.hs-browser-zoom-reset`, `.hs-icon-button[data-size='sm']`, `.hs-code-copy`, `.hs-docs-prose code`, `.hs-shell .hs-market-rate-star`, `.hs-settings-number-steps button`, `.hs-key-binding`, `.hs-key-record`, `.hs-bar-series-bar`, `.hs-bar-series-fill`, `.hs-tab-card-preview`, `.hs-divider:focus-visible`, `.hs-tinted` |
|
|
412
|
+
| `--r-tile` | `.hs-window`, `.hs-drawer`, `.hs-composer-main`, `.hs-drop-overlay`, `.hs-composer-dock > .hs-ask > .hs-card`, `.hs-tour-card`, `.hs-confirm-box`, `.hs-walk[data-host='dialog'] .hs-walk-card`, `.hs-walk-image`, `.hs-sheet-box`, `.hs-view-modal-plate`, `.hs-modal`, `.hs-selection-dialog`, `.hs-tile-drop`, `.hs-surface` |
|
|
413
|
+
| `--switch-radius` | `.hs-tog` |
|
|
414
|
+
| `--switch-thumb-radius` | `.hs-tog .hs-toggle-thumb` |
|