@hearthscale/app-ui 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +25 -0
- package/README.md +167 -2
- package/dist/CLASSES.md +574 -0
- package/dist/TOKENS.md +413 -0
- package/dist/chunks/chunk-E3RFTBRS.js +332 -0
- package/dist/editor.d.ts +32 -0
- package/dist/editor.js +69 -0
- package/dist/fonts/InterVariable.woff2 +0 -0
- package/dist/fonts/JetBrainsMono-Bold.woff2 +0 -0
- package/dist/fonts/JetBrainsMono-Medium.woff2 +0 -0
- package/dist/fonts/JetBrainsMono-Regular.woff2 +0 -0
- package/dist/fonts/JetBrainsMono-SemiBold.woff2 +0 -0
- package/dist/fonts/OFL.txt +92 -0
- package/dist/index.d.ts +745 -0
- package/dist/index.js +1499 -0
- package/dist/markdown.d.ts +25 -0
- package/dist/markdown.js +365 -0
- package/dist/remixicon/License +201 -0
- package/dist/remixicon/remixicon.css +3229 -0
- package/dist/remixicon/remixicon.woff2 +0 -0
- package/dist/ui.css +12023 -0
- package/package.json +82 -3
package/dist/TOKENS.md
ADDED
|
@@ -0,0 +1,413 @@
|
|
|
1
|
+
# Design tokens
|
|
2
|
+
|
|
3
|
+
Generated by `scripts/tokens.mjs` from `src/theme.css` and the sheets
|
|
4
|
+
it imports at each build of this package. Edit the sheets, not this file.
|
|
5
|
+
The README groups the tokens by role. The theme guide of the developer
|
|
6
|
+
documentation shows the two sections below as they are written here.
|
|
7
|
+
|
|
8
|
+
## Every token
|
|
9
|
+
|
|
10
|
+
Every token is set on `.hs-shell`. **Theme** says whether a theme's
|
|
11
|
+
`theme.css` may set it. **Colourway** says whether a colourway's
|
|
12
|
+
`light.css` and `dark.css` may set it: a colourway sets colours only, and
|
|
13
|
+
the alphas, shadows, grain and gradient geometry belong to the theme.
|
|
14
|
+
**Light** is the value under `[data-theme='light']` where it differs.
|
|
15
|
+
|
|
16
|
+
`--space` is the scale's unit: every inset, gap, offset, line box and
|
|
17
|
+
part size in the shell is a count of it, `calc(var(--space) * n)`. A
|
|
18
|
+
theme that sets it changes the density of the whole app; the tokens
|
|
19
|
+
counted in it (the Note gives what each holds at the default unit) set
|
|
20
|
+
one family apart.
|
|
21
|
+
|
|
22
|
+
| Token | Default | Light | Theme | Colourway | Note |
|
|
23
|
+
| -------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ----- | --------- | ------------------------------------ |
|
|
24
|
+
| `--font-app` | `'Inter Variable', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',…` | | yes | no | |
|
|
25
|
+
| `--font-mono` | `'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace` | | yes | no | |
|
|
26
|
+
| `--font-brand` | `-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial,…` | | yes | no | |
|
|
27
|
+
| `--gs` | `0` | | no | no | written at run time |
|
|
28
|
+
| `--chat-size` | `15px` | | no | no | written at run time |
|
|
29
|
+
| `--chat-lh` | `1.65` | | yes | no | |
|
|
30
|
+
| `--bg` | `#0b0b0c` | `#eef0f2` | yes | yes | |
|
|
31
|
+
| `--fadeL` | `radial-gradient(460px 360px at 2% 0%, var(--fade-1)), radial-gradient(…` | | yes | no | |
|
|
32
|
+
| `--fade-1` | `rgba(94, 150, 196, 0.16) 0%, rgba(94, 150, 196, 0.1) 35%, rgba(94, 150…` | `rgba(150, 192, 228, 0.65) 0%, rgba(150, 192, 228, 0.43) 35%, rgba(150,…` | yes | yes | |
|
|
33
|
+
| `--fade-2` | `rgba(60, 150, 135, 0.1) 0%, rgba(60, 150, 135, 0.07) 35%, rgba(60, 150…` | `rgba(178, 214, 200, 0.42) 0%, rgba(178, 214, 200, 0.28) 35%, rgba(178,…` | yes | yes | |
|
|
34
|
+
| `--fade-3` | `rgba(94, 150, 196, 0.13) 0%, rgba(94, 150, 196, 0.09) 35%, rgba(94, 15…` | `rgba(242, 211, 184, 0.38) 0%, rgba(242, 211, 184, 0.25) 35%, rgba(242,…` | yes | yes | |
|
|
35
|
+
| `--fade-4` | `rgba(215, 206, 190, 0.12) 0%, rgba(215, 206, 190, 0.08) 35%, rgba(215,…` | `rgba(233, 222, 200, 0.5) 0%, rgba(233, 222, 200, 0.33) 35%, rgba(233, …` | yes | yes | |
|
|
36
|
+
| `--fade-5` | `rgba(140, 110, 220, 0.11) 0%, rgba(140, 110, 220, 0.07) 35%, rgba(140,…` | `rgba(200, 186, 238, 0.45) 0%, rgba(200, 186, 238, 0.3) 35%, rgba(200, …` | yes | yes | |
|
|
37
|
+
| `--fade-6` | `rgba(94, 150, 196, 0.1) 0%, rgba(94, 150, 196, 0.07) 35%, rgba(94, 150…` | `rgba(150, 192, 228, 0.4) 0%, rgba(150, 192, 228, 0.27) 35%, rgba(150, …` | yes | yes | |
|
|
38
|
+
| `--glassrgb` | `19 19 21` | `250 251 252` | yes | yes | |
|
|
39
|
+
| `--glassa` | `0.42` | `0.4` | yes | no | |
|
|
40
|
+
| `--glass` | `rgb( var(--glassrgb) / calc( var(--glassa) * (1 + min(0, var(--gs)) * …` | | no | no | built from `--gs`: set its inputs |
|
|
41
|
+
| `--wino` | `calc(1 + min(0, var(--gs)) * 0.6)` | | no | no | built from `--gs`: set its inputs |
|
|
42
|
+
| `--panergb` | `150 158 175` | `120 127 145` | yes | yes | |
|
|
43
|
+
| `--pane` | `rgb( var(--panergb) / calc(0.13 * (1 + min(0, var(--gs)) * 0.6) + max(…` | `rgb( var(--panergb) / calc(0.12 * (1 + min(0, var(--gs)) * 0.6) + max(…` | no | no | built from `--gs`: set its inputs |
|
|
44
|
+
| `--gloss` | `linear-gradient(180deg, var(--gloss-hi), var(--gloss-lo) 140px, transp…` | | yes | no | |
|
|
45
|
+
| `--gloss-hi` | `rgba(255, 255, 255, 0.07)` | `rgba(255, 255, 255, 0.55)` | yes | yes | |
|
|
46
|
+
| `--gloss-lo` | `rgba(255, 255, 255, 0.02)` | `rgba(255, 255, 255, 0.18)` | yes | yes | |
|
|
47
|
+
| `--glossline` | `rgba(255, 255, 255, 0.1)` | `rgba(255, 255, 255, 0.75)` | yes | yes | |
|
|
48
|
+
| `--text` | `#ebedf2` | `#15181f` | yes | yes | |
|
|
49
|
+
| `--mut` | `#9aa0ae` | `#4c5260` | yes | yes | |
|
|
50
|
+
| `--dim` | `#63666f` | `#7b8290` | yes | yes | |
|
|
51
|
+
| `--win` | `#131316` | `#ffffff` | yes | yes | |
|
|
52
|
+
| `--winb` | `#26262c` | `#e7e1d6` | yes | yes | |
|
|
53
|
+
| `--line` | `#1e1e24` | `#f0ede6` | yes | yes | |
|
|
54
|
+
| `--card` | `#18181d` | `#f5f6f8` | yes | yes | |
|
|
55
|
+
| `--content-width` | `calc(var(--space) * 194.5)` | | yes | no | `778px` at the default `--space` |
|
|
56
|
+
| `--cardb` | `#2b2b33` | `#dcdfe5` | yes | yes | |
|
|
57
|
+
| `--hov` | `rgba(150, 158, 175, 0.13)` | `rgba(120, 127, 145, 0.12)` | yes | yes | |
|
|
58
|
+
| `--hov-page` | `color-mix(in srgb, var(--card) 65%, var(--win))` | | yes | yes | |
|
|
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
|
+
| `--press` | `none` | | yes | no | |
|
|
62
|
+
| `--act` | `rgba(158, 166, 182, 0.19)` | `rgba(255, 255, 255, 0.55)` | yes | yes | |
|
|
63
|
+
| `--accent` | `#ff9d2e` | | yes | yes | |
|
|
64
|
+
| `--link` | `var(--accent)` | | yes | yes | |
|
|
65
|
+
| `--selection` | `var(--hov)` | | yes | yes | |
|
|
66
|
+
| `--selection-ink` | `var(--text)` | | yes | yes | |
|
|
67
|
+
| `--switch-radius` | `6px` | | yes | no | |
|
|
68
|
+
| `--switch-gloss` | `var(--glimmer)` | | yes | yes | |
|
|
69
|
+
| `--switch-gloss-on` | `rgba(255, 255, 255, 0.25)` | | yes | yes | |
|
|
70
|
+
| `--switch-thumb-radius` | `4px` | | yes | no | |
|
|
71
|
+
| `--switch-thumb` | `var(--mut)` | | yes | yes | |
|
|
72
|
+
| `--switch-thumb-on` | `var(--accent-ink)` | | yes | yes | |
|
|
73
|
+
| `--session-row-height` | `calc(var(--space) * 7.25)` | | yes | no | `29px` at the default `--space` |
|
|
74
|
+
| `--subagent-row-height` | `calc(var(--space) * 6.75)` | | yes | no | `27px` at the default `--space` |
|
|
75
|
+
| `--project-row-height` | `calc(var(--space) * 7.75)` | | yes | no | `31px` at the default `--space` |
|
|
76
|
+
| `--selection-bar-height` | `calc(var(--space) * 7)` | | yes | no | `28px` at the default `--space` |
|
|
77
|
+
| `--compose-height` | `0px` | | no | no | written at run time |
|
|
78
|
+
| `--sidebar-inset` | `calc(var(--space) * 3.5)` | | yes | no | `14px` at the default `--space` |
|
|
79
|
+
| `--sidebar-rowact-w` | `calc(var(--space) * 12)` | | yes | no | `48px` at the default `--space` |
|
|
80
|
+
| `--info` | `#58a6ff` | `#1867c0` | yes | yes | |
|
|
81
|
+
| `--bad` | `#d5573f` | `#c2452e` | yes | yes | |
|
|
82
|
+
| `--ok` | `#3fb950` | `#2f9e44` | yes | yes | |
|
|
83
|
+
| `--warn` | `#d29922` | `#b7791f` | yes | yes | |
|
|
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 | |
|
|
126
|
+
| `--diff-add` | `color-mix(in srgb, var(--ok) 16%, transparent)` | | yes | yes | |
|
|
127
|
+
| `--diff-add-gutter` | `color-mix(in srgb, var(--ok) 30%, transparent)` | | yes | yes | |
|
|
128
|
+
| `--diff-del` | `color-mix(in srgb, var(--bad) 16%, transparent)` | | yes | yes | |
|
|
129
|
+
| `--diff-del-gutter` | `color-mix(in srgb, var(--bad) 30%, transparent)` | | yes | yes | |
|
|
130
|
+
| `--diff-pick` | `color-mix(in srgb, var(--info) 26%, transparent)` | | yes | yes | |
|
|
131
|
+
| `--accent-grad` | `radial-gradient( 95% 130% at 50% 96%, #fff3c4 0%, #ffd77e 22%, #ffab38…` | | yes | yes | |
|
|
132
|
+
| `--accent-grad-off` | `radial-gradient( 95% 130% at 50% 96%, #ecd7a8 0%, #dbb679 22%, #c39149…` | | yes | yes | |
|
|
133
|
+
| `--accent-ink` | `#241505` | | yes | yes | |
|
|
134
|
+
| `--accent-glow` | `0 12px 32px var(--accent-glow-tint)` | | yes | no | |
|
|
135
|
+
| `--accent-glow-tint` | `rgba(240, 138, 18, 0.3)` | | yes | yes | |
|
|
136
|
+
| `--accent-shadow` | `inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1.5px 0 rgba(255, 2…` | | yes | no | |
|
|
137
|
+
| `--accent-shadow-tint` | `rgba(240, 138, 18, 0.35)` | | yes | yes | |
|
|
138
|
+
| `--accent-sheen` | `linear-gradient( 180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255…` | | yes | no | |
|
|
139
|
+
| `--accent-bevel` | `inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(255, 255…` | | yes | no | |
|
|
140
|
+
| `--accent-glimmer` | `linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95) 50%, tr…` | | yes | no | |
|
|
141
|
+
| `--accent-shadow-off` | `inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1.5px 0 rgba(255, 2…` | | yes | no | |
|
|
142
|
+
| `--bubu` | `#f4f5f6` | `#23262e` | yes | yes | |
|
|
143
|
+
| `--bubut` | `#101115` | `#f6f7f9` | yes | yes | |
|
|
144
|
+
| `--tiprgb` | `26 26 30` | `252 252 253` | yes | yes | |
|
|
145
|
+
| `--tipa` | `0.28` | `0.86` | yes | no | |
|
|
146
|
+
| `--tipbg` | `rgb( var(--tiprgb) / calc(var(--tipa) * (1 + min(0, var(--gs)) * 0.6) …` | | no | no | built from `--gs`: set its inputs |
|
|
147
|
+
| `--tipline` | `rgba(255, 255, 255, 0.14)` | `rgba(20, 20, 30, 0.12)` | yes | yes | |
|
|
148
|
+
| `--grain` | `0.016` | `0.01` | yes | no | |
|
|
149
|
+
| `--btnhov` | `rgba(158, 166, 182, 0.19)` | `rgba(120, 127, 145, 0.2)` | yes | yes | |
|
|
150
|
+
| `--capt` | `#46484e` | `#b0b5be` | yes | yes | |
|
|
151
|
+
| `--scroll` | `rgba(255, 255, 255, 0.14)` | `rgba(0, 0, 0, 0.18)` | yes | yes | |
|
|
152
|
+
| `--scrollhov` | `rgba(255, 255, 255, 0.3)` | `rgba(0, 0, 0, 0.34)` | yes | yes | |
|
|
153
|
+
| `--sline` | `#26262c` | `rgba(30, 30, 40, 0.11)` | yes | yes | |
|
|
154
|
+
| `--glimmer` | `rgba(255, 255, 255, 0.45)` | `rgba(255, 255, 255, 0.95)` | yes | yes | |
|
|
155
|
+
| `--barbg` | `rgba(13, 13, 17, 0.3)` | `rgba(215, 212, 206, 0.3)` | yes | yes | |
|
|
156
|
+
| `--wshadow` | `0 2px 8px var(--wshadow-near), 0 10px 28px var(--wshadow-far)` | `0 2px 8px var(--wshadow-near), -8px 10px 48px var(--wshadow-far)` | yes | no | |
|
|
157
|
+
| `--wshadow-near` | `rgba(0, 0, 0, 0.2)` | `rgba(95, 72, 40, 0.08)` | yes | yes | |
|
|
158
|
+
| `--wshadow-far` | `rgba(0, 0, 0, 0.22)` | `rgba(95, 72, 40, 0.12)` | yes | yes | |
|
|
159
|
+
| `--r` | `12px` | | yes | no | |
|
|
160
|
+
| `--r-ctl` | `var(--r)` | | yes | no | |
|
|
161
|
+
| `--r-card` | `var(--r)` | | yes | no | |
|
|
162
|
+
| `--r-tile` | `var(--r)` | | yes | no | |
|
|
163
|
+
| `--r-sm` | `calc(var(--r-ctl) / 2)` | | yes | no | |
|
|
164
|
+
| `--r-round` | `50%` | | yes | no | |
|
|
165
|
+
| `--r-pill` | `999px` | | yes | no | |
|
|
166
|
+
| `--r-icon` | `22%` | | yes | no | |
|
|
167
|
+
| `--drawer-inset` | `calc(var(--space) * 5.5)` | | yes | no | `22px` at the default `--space` |
|
|
168
|
+
| `--bw` | `1px` | | yes | no | |
|
|
169
|
+
| `--space` | `4px` | | yes | no | |
|
|
170
|
+
| `--pad-row-y` | `calc(var(--space) * 3.25)` | | yes | no | `13px` at the default `--space` |
|
|
171
|
+
| `--pad-row-x` | `calc(var(--space) * 4.5)` | | yes | no | `18px` at the default `--space` |
|
|
172
|
+
| `--gap-row` | `calc(var(--space) * 3.5)` | | yes | no | `14px` at the default `--space` |
|
|
173
|
+
| `--gap-label` | `calc(var(--space) * 0.5)` | | yes | no | `2px` at the default `--space` |
|
|
174
|
+
| `--pad-card` | `calc(var(--space) * 3.25) calc(var(--space) * 3.75)` | | yes | no | `13px 15px` at the default `--space` |
|
|
175
|
+
| `--pad-ctl` | `0 calc(var(--space) * 3.5)` | | yes | no | `0 14px` at the default `--space` |
|
|
176
|
+
| `--pad-ctl-lg` | `0 calc(var(--space) * 4.5)` | | yes | no | `0 18px` at the default `--space` |
|
|
177
|
+
| `--h-ctl` | `calc(var(--space) * 7.5)` | | yes | no | `30px` at the default `--space` |
|
|
178
|
+
| `--h-ctl-md` | `calc(var(--space) * 9)` | | yes | no | `36px` at the default `--space` |
|
|
179
|
+
| `--h-ctl-lg` | `calc(var(--space) * 11)` | | yes | no | `44px` at the default `--space` |
|
|
180
|
+
| `--icon-ctl-sm` | `calc(var(--space) * 5.5)` | | yes | no | `22px` at the default `--space` |
|
|
181
|
+
| `--icon-ctl-md` | `calc(var(--space) * 7.5)` | | yes | no | `30px` at the default `--space` |
|
|
182
|
+
| `--icon-ctl-lg` | `calc(var(--space) * 9.5)` | | yes | no | `38px` at the default `--space` |
|
|
183
|
+
| `--gap-stack` | `calc(var(--space) * 2)` | | yes | no | `8px` at the default `--space` |
|
|
184
|
+
| `--gap-inline` | `calc(var(--space) * 1.5)` | | yes | no | `6px` at the default `--space` |
|
|
185
|
+
| `--pad-chip` | `1px calc(var(--space) * 1.5)` | | yes | no | `1px 6px` at the default `--space` |
|
|
186
|
+
| `--gap-page` | `calc(var(--space) * 6)` | | yes | no | `24px` at the default `--space` |
|
|
187
|
+
| `--lh-body` | `1.5` | | yes | no | |
|
|
188
|
+
| `--scroll-size` | `calc(var(--space) * 2.75)` | | yes | no | `11px` at the default `--space` |
|
|
189
|
+
| `--w-rail` | `calc(var(--space) * 14)` | | yes | no | `56px` at the default `--space` |
|
|
190
|
+
| `--icon-ctl-rail` | `calc(var(--space) * 10)` | | yes | no | `40px` at the default `--space` |
|
|
191
|
+
| `--gap-rail` | `var(--space)` | | yes | no | `4px` at the default `--space` |
|
|
192
|
+
| `--edge` | `calc(var(--space) * 2)` | | yes | no | `8px` at the default `--space` |
|
|
193
|
+
| `--h-lane` | `42px` | | yes | no | |
|
|
194
|
+
| `--h-lane-low` | `calc(var(--space) * 9)` | | yes | no | `36px` at the default `--space` |
|
|
195
|
+
| `--h-tab` | `calc(var(--space) * 7.5)` | | yes | no | `30px` at the default `--space` |
|
|
196
|
+
| `--tabcard-w` | `calc(var(--space) * 80)` | | yes | no | `320px` at the default `--space` |
|
|
197
|
+
| `--tabcard-dip` | `0.82` | | yes | no | |
|
|
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` |
|
|
201
|
+
| `--h-lane-rule` | `calc(var(--space) * 6)` | | yes | no | `24px` at the default `--space` |
|
|
202
|
+
| `--lane-rule-alpha` | `0.22` | | yes | no | |
|
|
203
|
+
| `--lane-plus-alpha` | `0` | | yes | no | |
|
|
204
|
+
| `--gap-tile` | `calc(var(--space) * 1.5)` | | yes | no | `6px` at the default `--space` |
|
|
205
|
+
| `--grab-inset` | `var(--space)` | | yes | no | `4px` at the default `--space` |
|
|
206
|
+
| `--w-tile-min` | `calc(var(--space) * 80)` | | yes | no | `320px` at the default `--space` |
|
|
207
|
+
| `--h-tile-min` | `calc(var(--space) * 50)` | | yes | no | `200px` at the default `--space` |
|
|
208
|
+
| `--w-sidebar` | `calc(var(--space) * 59)` | | yes | no | `236px` at the default `--space` |
|
|
209
|
+
| `--pad-sidebar` | `calc(var(--space) * 2.5)` | | yes | no | `10px` at the default `--space` |
|
|
210
|
+
| `--fan-tuck` | `0.6` | | yes | no | |
|
|
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 | |
|
|
214
|
+
| `--mark-hi` | `#ffd074` | | yes | yes | |
|
|
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 | |
|
|
219
|
+
| `--capt-close` | `#c42b1c` | | yes | yes | |
|
|
220
|
+
| `--capt-close-ink` | `#fff` | | yes | yes | |
|
|
221
|
+
| `--shadow-pop` | `0 5px 16px rgba(0, 0, 0, 0.07)` | | yes | no | |
|
|
222
|
+
| `--shadow-float` | `0 8px 28px rgba(0, 0, 0, 0.1)` | | yes | no | |
|
|
223
|
+
| `--shadow-modal` | `0 18px 48px rgba(0, 0, 0, 0.25)` | | yes | no | |
|
|
224
|
+
| `--shadow-drag` | `0 8px 24px rgba(0, 0, 0, 0.3)` | | yes | no | |
|
|
225
|
+
| `--ring` | `inset 0 0 0 1px var(--cardb)` | | yes | no | |
|
|
226
|
+
| `--gloss-edge` | `inset 0 1px 0 var(--glossline)` | | yes | no | |
|
|
227
|
+
| `--shadow-raise` | `none` | | yes | no | |
|
|
228
|
+
| `--focus` | `0 0 0 2px var(--btnhov)` | | yes | no | |
|
|
229
|
+
| `--scrim` | `rgba(0, 0, 0, 0.78)` | | yes | yes | |
|
|
230
|
+
| `--scrim-ink` | `#fff` | | yes | yes | |
|
|
231
|
+
| `--scrim-walk` | `rgba(4, 9, 18, 0.45)` | | yes | yes | |
|
|
232
|
+
| `--scrim-tour` | `0 0 0 100vmax var(--scrim-walk)` | | yes | no | |
|
|
233
|
+
| `--scrim-soft` | `color-mix(in srgb, var(--win) 55%, transparent)` | | yes | yes | |
|
|
234
|
+
| `--drop-border` | `2px dashed color-mix(in srgb, var(--mut) 50%, transparent)` | | yes | no | |
|
|
235
|
+
| `--scrim-dialog` | `rgba(0, 0, 0, 0.55)` | `var(--scrim-soft)` | yes | yes | |
|
|
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 | |
|
|
286
|
+
| `--chip-file` | `color-mix(in srgb, var(--info) 16%, transparent)` | | yes | yes | |
|
|
287
|
+
| `--chip-folder` | `color-mix(in srgb, var(--warn) 18%, transparent)` | | yes | yes | |
|
|
288
|
+
| `--chip-skill` | `color-mix(in srgb, var(--ok) 16%, transparent)` | | yes | yes | |
|
|
289
|
+
| `--chip-terminal` | `color-mix(in srgb, var(--mut) 18%, transparent)` | | yes | yes | |
|
|
290
|
+
| `--blur-surface` | `blur(14px) saturate(1.35)` | | yes | no | |
|
|
291
|
+
| `--blur-overlay` | `blur(24px) saturate(1.4)` | | yes | no | |
|
|
292
|
+
| `--blur-sheet` | `blur(36px) saturate(1.45)` | | yes | no | |
|
|
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 | |
|
|
298
|
+
| `--grain-image` | `url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%2…` | | yes | no | |
|
|
299
|
+
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | | yes | no | |
|
|
300
|
+
| `--dur` | `0.15s` | | yes | no | reduced motion: `0s` |
|
|
301
|
+
| `--dur-slow` | `0.23s` | | yes | no | reduced motion: `0s` |
|
|
302
|
+
| `--dur-stagger` | `30ms` | | yes | no | reduced motion: `0s` |
|
|
303
|
+
| `--dur-spin` | `0.9s` | | yes | no | |
|
|
304
|
+
| `--dur-shine` | `2.2s` | | yes | no | |
|
|
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 | |
|
|
309
|
+
| `--dur-scroll` | `25ms` | | yes | no | reduced motion: `0s` |
|
|
310
|
+
| `--press-fade` | `1` | | yes | no | |
|
|
311
|
+
| `--hov-lift` | `none` | | yes | no | |
|
|
312
|
+
| `--fs-mono-xs` | `10.5px` | | yes | no | |
|
|
313
|
+
| `--fs-mono` | `11px` | | yes | no | |
|
|
314
|
+
| `--fs-cap` | `11.5px` | | yes | no | |
|
|
315
|
+
| `--fs-sm` | `12px` | | yes | no | |
|
|
316
|
+
| `--fs-body` | `12.5px` | | yes | no | |
|
|
317
|
+
| `--fs-row` | `13px` | | yes | no | |
|
|
318
|
+
| `--fs-md` | `13.5px` | | yes | no | |
|
|
319
|
+
| `--fs-dialog` | `14px` | | yes | no | |
|
|
320
|
+
| `--fs-lead` | `15.5px` | | yes | no | |
|
|
321
|
+
| `--fs-title` | `18px` | | yes | no | |
|
|
322
|
+
| `--fs-hero` | `27px` | | yes | no | |
|
|
323
|
+
| `--fs-page` | `26px` | | yes | no | |
|
|
324
|
+
| `--fs-code` | `22px` | | yes | no | |
|
|
325
|
+
| `--fs-page-hero` | `28px` | | yes | no | |
|
|
326
|
+
| `--fs-figure` | `30px` | | yes | no | |
|
|
327
|
+
| `--fs-wordmark` | `16.5px` | | yes | no | |
|
|
328
|
+
| `--fs-walk-title` | `40px` | | yes | no | |
|
|
329
|
+
| `--fw-med` | `500` | | yes | no | |
|
|
330
|
+
| `--fw-semi` | `600` | | yes | no | |
|
|
331
|
+
| `--fw-strong` | `620` | | yes | no | |
|
|
332
|
+
| `--fs-docs` | `15.5px` | | yes | no | |
|
|
333
|
+
| `--fs-docs-aside` | `14.5px` | | yes | no | |
|
|
334
|
+
| `--fs-docs-note` | `14px` | | yes | no | |
|
|
335
|
+
| `--fs-docs-tab` | `13.5px` | | yes | no | |
|
|
336
|
+
| `--fs-docs-code` | `13px` | | yes | no | |
|
|
337
|
+
| `--fs-docs-code-title` | `12.5px` | | yes | no | |
|
|
338
|
+
| `--docs-callout-info` | `#3b82f6` | | yes | yes | |
|
|
339
|
+
| `--fs-market-title` | `clamp(32px, 4.2cqi, 64px)` | | yes | no | |
|
|
340
|
+
| `--fs-market-lead` | `20px` | | yes | no | |
|
|
341
|
+
| `--fs-market-feature` | `clamp(26px, 3cqi, 40px)` | | yes | no | |
|
|
342
|
+
| `--fs-market-name` | `40px` | | yes | no | |
|
|
343
|
+
| `--fs-market-name-narrow` | `32px` | | yes | no | |
|
|
344
|
+
| `--fs-market-line` | `18px` | | yes | no | |
|
|
345
|
+
| `--fs-market-fact` | `17px` | | yes | no | |
|
|
346
|
+
| `--fw-market-name` | `700` | | yes | no | |
|
|
347
|
+
| `--market-blob-1` | `oklch(0.4 0.1 245 / 0.6)` | `oklch(0.8 0.11 245 / 0.68)` | yes | yes | |
|
|
348
|
+
| `--market-blob-2` | `oklch(0.4 0.08 185 / 0.52)` | `oklch(0.84 0.09 185 / 0.58)` | yes | yes | |
|
|
349
|
+
| `--market-blob-3` | `oklch(0.6 0.12 84 / 0.56)` | `oklch(0.86 0.13 80 / 0.63)` | yes | yes | |
|
|
350
|
+
| `--market-blob-4` | `oklch(0.38 0.1 300 / 0.64)` | `oklch(0.8 0.11 300 / 0.72)` | yes | yes | |
|
|
351
|
+
| `--market-wash-top` | `oklch(0.18 0.02 250)` | `oklch(0.94 0.02 240)` | yes | yes | |
|
|
352
|
+
| `--market-wash-foot` | `oklch(0.15 0.015 220)` | `oklch(0.95 0.015 200)` | yes | yes | |
|
|
353
|
+
| `--market-hero-ink` | `#fff` | `var(--text)` | yes | yes | |
|
|
354
|
+
| `--market-hero-brightness` | `0.82` | `1` | yes | no | |
|
|
355
|
+
| `--market-cover-ratio` | `12 / 5` | | yes | no | |
|
|
356
|
+
| `--hue` | `0` | | no | no | written at run time |
|
|
357
|
+
| `--share` | `1` | | no | no | written at run time |
|
|
358
|
+
| `--fan-n` | `1` | | no | no | written at run time |
|
|
359
|
+
| `--fan-k` | `0` | | no | no | written at run time |
|
|
360
|
+
| `--tab-whole` | `0px` | | no | no | written at run time |
|
|
361
|
+
| `--tab-open` | `0px` | | no | no | written at run time |
|
|
362
|
+
| `--tab-bare` | `0px` | | no | no | written at run time |
|
|
363
|
+
| `--tab-w` | `0px` | | no | no | written at run time |
|
|
364
|
+
| `--strip-w` | `0px` | | no | no | written at run time |
|
|
365
|
+
| `--b1-h` | `0` | | no | no | written at run time |
|
|
366
|
+
| `--b1-l` | `0` | | no | no | written at run time |
|
|
367
|
+
| `--b1-c` | `0` | | no | no | written at run time |
|
|
368
|
+
| `--b1-w` | `0px` | | no | no | written at run time |
|
|
369
|
+
| `--b1-t` | `0px` | | no | no | written at run time |
|
|
370
|
+
| `--b1-x` | `0px` | | no | no | written at run time |
|
|
371
|
+
| `--b1-y` | `0%` | | no | no | written at run time |
|
|
372
|
+
| `--b1-a` | `0%` | | no | no | written at run time |
|
|
373
|
+
| `--b2-h` | `0` | | no | no | written at run time |
|
|
374
|
+
| `--b2-l` | `0` | | no | no | written at run time |
|
|
375
|
+
| `--b2-c` | `0` | | no | no | written at run time |
|
|
376
|
+
| `--b2-w` | `0px` | | no | no | written at run time |
|
|
377
|
+
| `--b2-t` | `0px` | | no | no | written at run time |
|
|
378
|
+
| `--b2-x` | `0px` | | no | no | written at run time |
|
|
379
|
+
| `--b2-y` | `0%` | | no | no | written at run time |
|
|
380
|
+
| `--b2-a` | `0%` | | no | no | written at run time |
|
|
381
|
+
| `--b3-h` | `0` | | no | no | written at run time |
|
|
382
|
+
| `--b3-l` | `0` | | no | no | written at run time |
|
|
383
|
+
| `--b3-c` | `0` | | no | no | written at run time |
|
|
384
|
+
| `--b3-w` | `0px` | | no | no | written at run time |
|
|
385
|
+
| `--b3-t` | `0px` | | no | no | written at run time |
|
|
386
|
+
| `--b3-x` | `0px` | | no | no | written at run time |
|
|
387
|
+
| `--b3-y` | `0%` | | no | no | written at run time |
|
|
388
|
+
| `--b3-a` | `0%` | | no | no | written at run time |
|
|
389
|
+
| `--b4-h` | `0` | | no | no | written at run time |
|
|
390
|
+
| `--b4-l` | `0` | | no | no | written at run time |
|
|
391
|
+
| `--b4-c` | `0` | | no | no | written at run time |
|
|
392
|
+
| `--b4-w` | `0px` | | no | no | written at run time |
|
|
393
|
+
| `--b4-t` | `0px` | | no | no | written at run time |
|
|
394
|
+
| `--b4-x` | `0px` | | no | no | written at run time |
|
|
395
|
+
| `--b4-y` | `0%` | | no | no | written at run time |
|
|
396
|
+
| `--b4-a` | `0%` | | no | no | written at run time |
|
|
397
|
+
|
|
398
|
+
## Corners by role
|
|
399
|
+
|
|
400
|
+
The selectors whose corner reads each token. A theme reshapes a role
|
|
401
|
+
through its token; it selects a class only to set one family apart.
|
|
402
|
+
|
|
403
|
+
| Token | Selectors |
|
|
404
|
+
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
405
|
+
| `--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` |
|
|
406
|
+
| `--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` |
|
|
407
|
+
| `--r-icon` | `.hs-picture-tile`, `.hs-model-avatar`, `.hs-market-logo`, `.hs-market-logo img`, `.hs-app-icon` |
|
|
408
|
+
| `--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` |
|
|
409
|
+
| `--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` |
|
|
410
|
+
| `--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` |
|
|
411
|
+
| `--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` |
|
|
412
|
+
| `--switch-radius` | `.hs-tog` |
|
|
413
|
+
| `--switch-thumb-radius` | `.hs-tog .hs-toggle-thumb` |
|