@hearthscale/app-ui 0.2.4 → 0.3.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/README.md +14 -14
- package/dist/CLASSES.md +21 -10
- package/dist/TOKENS.md +13 -11
- package/dist/index.d.ts +152 -85
- package/dist/index.js +246 -146
- package/dist/markdown.js +23 -1
- package/dist/ui.css +271 -50
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -43,19 +43,19 @@ A label names its action. Where a reason is needed, give it in a tooltip
|
|
|
43
43
|
|
|
44
44
|
## The parts
|
|
45
45
|
|
|
46
|
-
| Kind | Parts
|
|
47
|
-
| -------------- |
|
|
48
|
-
| Actions | `Button`, `IconButton`
|
|
49
|
-
| Surfaces | `Card`, `SettingsCard`, `SettingsSection`, `EmptyState`, `Notice`
|
|
50
|
-
| Scrolling | `OverlayScroll`
|
|
51
|
-
| Rows | `ListRow`, `InfoRow`, `LinkRow`, `FactRow`, `ToggleRow`
|
|
52
|
-
| Fields | `TextField`, `TextInput`, `Toggle`, `SegmentedControl`, `SettingsSearch`, `SettingsSelect`
|
|
53
|
-
| Tabs | `SettingsTabs`
|
|
54
|
-
| Status | `Chip`, `StatusWord`
|
|
55
|
-
| Text | `PageTitle`, `Label`, `Mono`
|
|
56
|
-
| Menus and tips | `MenuSurface`, `MItem`, `MSub`, `MDivider`, `MSection`, `anchorFrom`, `useFloatingTips`
|
|
57
|
-
| Dialogs | `ShellConfirm`
|
|
58
|
-
| Icons | `Icon`
|
|
46
|
+
| Kind | Parts |
|
|
47
|
+
| -------------- | ------------------------------------------------------------------------------------------------- |
|
|
48
|
+
| Actions | `Button`, `IconButton` |
|
|
49
|
+
| Surfaces | `Card`, `SettingsCard`, `SettingsSection`, `EmptyState`, `Notice` |
|
|
50
|
+
| Scrolling | `OverlayScroll` |
|
|
51
|
+
| Rows | `ListRow`, `InfoRow`, `LinkRow`, `FactRow`, `ToggleRow` |
|
|
52
|
+
| Fields | `TextField`, `TextInput`, `Toggle`, `SegmentedControl`, `SettingsSearch`, `SettingsSelect` |
|
|
53
|
+
| Tabs | `SettingsTabs` |
|
|
54
|
+
| Status | `Chip`, `StatusWord` |
|
|
55
|
+
| Text | `PageTitle`, `Label`, `Mono` |
|
|
56
|
+
| Menus and tips | `MenuSurface`, `MItem`, `MSub`, `MDivider`, `MSection`, `anchorFrom`, `spaces`, `useFloatingTips` |
|
|
57
|
+
| Dialogs | `ShellConfirm` |
|
|
58
|
+
| Icons | `Icon` |
|
|
59
59
|
|
|
60
60
|
Each part draws the same `hs-*` classes as the same part in Hearthscale, so a
|
|
61
61
|
theme reaches it as it reaches the shell.
|
|
@@ -117,7 +117,7 @@ import '@hearthscale/app-ui/remixicon.css';
|
|
|
117
117
|
|
|
118
118
|
## The rail icon
|
|
119
119
|
|
|
120
|
-
The rail shows the `icon` of your `app.json`
|
|
120
|
+
The rail shows the `icon` of your `app.json` 20 pixels square, beside
|
|
121
121
|
Hearthscale's own marks. Draw it to sit among them:
|
|
122
122
|
|
|
123
123
|
- **A 20 px grid.** A square `viewBox="0 0 24 24"` with the shape inside the
|
package/dist/CLASSES.md
CHANGED
|
@@ -35,6 +35,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
|
|
|
35
35
|
| `hs-sidebar-plus`, `hs-sidebar-spacer` | a row's new-session mark; the room the windowed list keeps for rows it does not draw |
|
|
36
36
|
| `hs-sidebar-rail-mark` | an app's mark on its rail plate |
|
|
37
37
|
| `hs-rail-plate-bypass` | the warning mark on the rail plate of an app at Bypass all permissions |
|
|
38
|
+
| `hs-badged`, `hs-badged-badge` | a mark with a smaller mark on its lower right corner, or a few letters (`data-letters`), as the rail’s rung of a Server on another device wears the first letters of its name; the smaller mark |
|
|
38
39
|
| `hs-rowact` | the actions that appear on a hovered row |
|
|
39
40
|
| `hs-pinned` | the pin mark on a pinned session row |
|
|
40
41
|
| `hs-spin` | a mark that turns while work runs, on an HTML box |
|
|
@@ -43,7 +44,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
|
|
|
43
44
|
| `hs-picker`, `hs-picker-search` | the model picker, its search |
|
|
44
45
|
| `hs-picker-list`, `hs-picker-empty` | the models, "No model matches." or why none can run |
|
|
45
46
|
| `hs-picker-row`, `hs-picker-row-text`, `hs-picker-row-name`, `hs-picker-row-sub` | one model (`data-state` is `ready`, `absent`, `downloading` or `unavailable`; `data-download` where a press downloads it or asks a paired Server for it), its name and where it runs |
|
|
46
|
-
| `hs-picker-row-action` | the Download on the row of a model this
|
|
47
|
+
| `hs-picker-row-action` | the Download on the row of a model this device's Server has not downloaded, or the Ask on the row of one a paired Server has not |
|
|
47
48
|
| `hs-picker-row-check` | the place of the mark of the model in use, which every row keeps |
|
|
48
49
|
| `hs-provider-mark` | a provider's place or cloud mark |
|
|
49
50
|
| `hs-rview`, `hs-ptab`, `hs-tabscroll` | a tab's own box, a tab of a strip, the tab strip |
|
|
@@ -77,7 +78,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
|
|
|
77
78
|
| `hs-walk` | a walkthrough; `data-host` is `dialog` (a plate over the shell, on a veil) or `window` (the whole window) |
|
|
78
79
|
| `hs-walk-card`, `hs-walk-close` | its card; the close mark at the card's top right |
|
|
79
80
|
| `hs-walk-image` | the picture band across the top of a card |
|
|
80
|
-
| `hs-server-picture`, `hs-apps-picture`, `hs-picture-mesh`, `hs-picture-tile`, `hs-picture-line`, `hs-heatmap-picture` | an onboarding card's picture over its mesh: the Server and a
|
|
81
|
+
| `hs-server-picture`, `hs-apps-picture`, `hs-picture-mesh`, `hs-picture-tile`, `hs-picture-line`, `hs-heatmap-picture` | an onboarding card's picture over its mesh: the Server and a device, the wall of apps; the mesh, a glass tile in it, a line between tiles; the heat picture of the hearth mark |
|
|
81
82
|
| `hs-tour`, `hs-tour-part`, `hs-tour-card`, `hs-tour-title`, `hs-tour-text`, `hs-tour-actions`, `hs-tour-fill` | a tour over the window: the veil, the part it lights, the card (`data-placed` once it stands beside the part), the stop's title and words, its buttons and the room that sets Back and Next apart from Close |
|
|
82
83
|
| `hs-walk-main` | the region under the picture that holds the words, the rows and the live content; `data-image` under one |
|
|
83
84
|
| `hs-walk-title`, `hs-walk-sub` | a card's title and the line under it |
|
|
@@ -180,7 +181,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
|
|
|
180
181
|
| `hs-diff-count` | a line count beside a changed file; `data-kind` is `add` or `del` |
|
|
181
182
|
| `hs-view-row` | a result's view in the transcript |
|
|
182
183
|
| `hs-media`, `hs-media-pictures`, `hs-media-actions` | what a call made; its pictures (`data-count` is `one` or `many`); the actions over a picture |
|
|
183
|
-
| `hs-chat-image`, `hs-chat-image-name` | a picture a call made, in a frame of its size; the name of
|
|
184
|
+
| `hs-chat-image`, `hs-chat-image-name` | a picture or a video a call made, in a frame of its size; the name of a picture that did not load |
|
|
184
185
|
| `hs-audio`, `hs-audio-play`, `hs-audio-name`, `hs-audio-bar`, `hs-audio-fill` | a sound's player, its play and pause, its name, its bar and the part played |
|
|
185
186
|
| `hs-audio-time`, `hs-audio-save` | the player's times and its Save |
|
|
186
187
|
| `hs-media-text`, `hs-media-text-head`, `hs-media-text-name`, `hs-media-text-save`, `hs-media-text-body` | a text a call made, such as a transcript; its head, its name, its Save, its words |
|
|
@@ -208,6 +209,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
|
|
|
208
209
|
| `hs-ring-fact`, `hs-ring-layer`, `hs-ring-layer-line`, `hs-ring-cost`, `hs-ring-text` | a fact of the prompt; one layer, its line (`data-static` for a tool's), its cost, its text |
|
|
209
210
|
| `hs-ask`, `hs-ask-head`, `hs-ask-mark`, `hs-ask-title`, `hs-ask-app`, `hs-ask-count` | a request (`data-placement` is `docked` or `floating`, `data-narrow` in its narrow form), its head, mark, title, app, and "1 of 3" |
|
|
210
211
|
| `hs-ask-body`, `hs-ask-note`, `hs-ask-data`, `hs-ask-command` | its sentence, a warning under it, a path or a code in it, the command it would run or what a tool call would do |
|
|
212
|
+
| `hs-ask-fold` | the press that shows the input of an app's tool |
|
|
211
213
|
| `hs-ask-change`, `hs-ask-hunk`, `hs-ask-line`, `hs-ask-sign` | the lines an edit would change, one edit, one line (`data-kind` is `del` or `add`), its sign |
|
|
212
214
|
| `hs-ask-tools`, `hs-ask-tool`, `hs-ask-tool-name`, `hs-ask-tool-text` | a connector's tools, one tool, its name, its description |
|
|
213
215
|
| `hs-ask-actions`, `hs-ask-keys`, `hs-ask-options`, `hs-ask-option` | the request's buttons and the keys that answer it; a question's options, one option |
|
|
@@ -282,7 +284,7 @@ One class per component, named after it: `hs-button`, `hs-card`, `hs-chart`,
|
|
|
282
284
|
| `hs-label` | a caption in the interface font |
|
|
283
285
|
| `hs-lockup-box`, `hs-lockup-mark`, `hs-lockup-word` | the lockup's 38px box, the mark on its floor, the wordmark beside it |
|
|
284
286
|
| `hs-model-avatar-initial` | a publisher's first letter where it has no picture |
|
|
285
|
-
| `hs-mono` | machine text inside a sentence or a row
|
|
287
|
+
| `hs-mono` | machine text inside a sentence or a row, in the interface font with even digits |
|
|
286
288
|
| `hs-page-title`, `hs-page-lead` | a page's heading (`data-hero` centres and enlarges it) and the line under it |
|
|
287
289
|
| `hs-fact-row`, `hs-fact-label`, `hs-fact-value` | a row of an information table, its label and its wrapping value |
|
|
288
290
|
| `hs-link-row`, `hs-link-row-chevron` | a row that opens its own page, and its chevron |
|
|
@@ -335,6 +337,7 @@ and add these:
|
|
|
335
337
|
| Class | Marks |
|
|
336
338
|
| ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
|
|
337
339
|
| `hs-caption-button` | a caption button a window with no system caption draws; `data-danger` on the close button |
|
|
340
|
+
| `hs-titlebar-drag` | the layer under a drawn title bar that drags the window |
|
|
338
341
|
| `hs-server-nav`, `hs-server-nav-pages`, `hs-server-nav-footer` | the dashboard's navigation column, its page list, its power action |
|
|
339
342
|
| `hs-server-window` | the box of the dashboard's page panel beside its navigation column |
|
|
340
343
|
| `hs-server-waiting` | the words a dashboard page shows while the Server is not running or not reached |
|
|
@@ -363,6 +366,7 @@ The pages the api draws at `admin.` (`DashboardFrame`, `Bento`, `BentoTile`,
|
|
|
363
366
|
| `hs-dashboard-brand` | the lockup at the start of the bar |
|
|
364
367
|
| `hs-dashboard-nav`, `hs-dashboard-link` | the links to the pages, and one link; `aria-current="page"` on the page on screen, whose plate shows |
|
|
365
368
|
| `hs-dashboard-menu-toggle`, `hs-dashboard-menu`, `hs-dashboard-menu-open`, `hs-dashboard-menu-close` | on a narrow screen: the box that holds whether the sheet of links is open, the menu button, and its two marks |
|
|
369
|
+
| `hs-dashboard-short` | with `hs-input`, a field as wide as its `size`, in a table's cell |
|
|
366
370
|
| `hs-dashboard-main`, `hs-dashboard-title`, `hs-dashboard-note` | the page under the bar (`data-centered` on a page that says one thing), its title, a sentence that says why it shows no figures |
|
|
367
371
|
| `hs-bento` | the grid of tiles: twelve columns on a wide screen, one on a narrow one |
|
|
368
372
|
| `hs-bento-tile` | a glass tile; `data-span` is its share of the twelve columns, `data-tall` two rows high, `data-aside` with a part beside what it holds |
|
|
@@ -412,6 +416,7 @@ named shell presentation hooks. They follow these component families:
|
|
|
412
416
|
|
|
413
417
|
Selection uses `data-sel="true"`; settings buttons expose `data-strong` and
|
|
414
418
|
`data-danger`, menu items expose `data-disabled`, and selects expose `data-open`.
|
|
419
|
+
`hs-select-note` is the quiet word at the end of a select, after its value.
|
|
415
420
|
`hs-floating-tip` is the box a tooltip floats in beside its mark, `hs-range-value` the
|
|
416
421
|
value beside a slider, `hs-size-step` a step of a size stepper,
|
|
417
422
|
`hs-row-anchor` a row that positions a mark over its corner, and
|
|
@@ -452,13 +457,18 @@ A file's preview in a view: `hs-document-view` holds Markdown, a CSV, a
|
|
|
452
457
|
diagram or a chart drawn from the file's text, a CSV as a Markdown table;
|
|
453
458
|
`hs-file-partial` says that only the head of a long file shows.
|
|
454
459
|
|
|
455
|
-
|
|
460
|
+
The test of a speech model uses `hs-speech-test`, the box of the words it heard, and
|
|
461
|
+
`hs-speech-test-end`, its time and its press at the end. The menu of a multi-select uses
|
|
462
|
+
`hs-multi-select-menu`, `hs-multi-select-list` and `hs-menu-search`, and a word beside
|
|
463
|
+
a model's name in its picker `hs-picker-row-word`. A list setting uses
|
|
464
|
+
`hs-list-setting*`. Model browsing uses `hs-model-browser*`, `hs-model-header*`, `hs-model-tile`,
|
|
456
465
|
`hs-model-stat`, `hs-model-stats`, `hs-model-capabilities`, `hs-model-capability`
|
|
457
466
|
and `hs-model-card`. Selected rows use `aria-pressed="true"`.
|
|
458
467
|
|
|
459
468
|
Settings grouping: `hs-settings-card` (`SettingsCard`) owns the outer border;
|
|
460
469
|
`hs-settings-group` / `hs-settings-group-title` divide its content.
|
|
461
470
|
`hs-settings-note` and `hs-settings-actions` inset descriptions and buttons;
|
|
471
|
+
`hs-setting-controls` holds several things at the end of a row;
|
|
462
472
|
`hs-settings-card-header` aligns collapsible group labels with row content.
|
|
463
473
|
`--content-width` sets the shared composer/settings column width.
|
|
464
474
|
`hs-settings-management` is the separate, right-aligned management footer.
|
|
@@ -483,9 +493,10 @@ hover actions; `.hs-model-hover-action` becomes visible on row hover or focus.
|
|
|
483
493
|
`hs-settings-tabs` uses `aria-selected` to paint its active glass button.
|
|
484
494
|
`hs-settings-breadcrumbs` and `hs-settings-crumb*` name inner-window locations.
|
|
485
495
|
Compact controls use `hs-settings-input`, `hs-settings-file` and
|
|
486
|
-
`hs-settings-textarea
|
|
496
|
+
`hs-settings-textarea`; `hs-settings-text` is a field for words, at one length on
|
|
497
|
+
every row. Model settings use
|
|
487
498
|
`hs-model-settings-*`; runtime controls use `hs-model-runtime-*`; downloads use
|
|
488
|
-
`hs-model-download*`, and a companion picker's label and repository field
|
|
499
|
+
`hs-model-download*`, `hs-model-offer-actions` under an offer of models, and a companion picker's label and repository field
|
|
489
500
|
`hs-model-companion-*`; generated image/audio previews use `hs-model-media-output`.
|
|
490
501
|
`hs-model-error` carries inline request failures. These selectors live in
|
|
491
502
|
`src/shell.css` and read the shared theme tokens.
|
|
@@ -521,9 +532,8 @@ the controls below a 470px card width without changing other settings layouts.
|
|
|
521
532
|
`.hs-key-remove`, the remove mark; `.hs-key-clash` is the line that names a key another
|
|
522
533
|
shortcut holds.
|
|
523
534
|
- `.hs-provider-title` — a provider's name behind its mark; `.hs-provider-offer` and
|
|
524
|
-
`.hs-provider-offer-name`, a
|
|
525
|
-
and its name
|
|
526
|
-
in, with its tip.
|
|
535
|
+
`.hs-provider-offer-name`, a device on the network the Providers page offers to add,
|
|
536
|
+
and its name.
|
|
527
537
|
|
|
528
538
|
## Breaks
|
|
529
539
|
|
|
@@ -579,3 +589,4 @@ Removed or renamed classes, with what replaces them:
|
|
|
579
589
|
| `hs-browser-pages`, `hs-browser-page` | `hs-tab-page` of a view's tab, `hs-web-page` of a web surface |
|
|
580
590
|
| `hs-panel-view-slot`, `hs-panel-action`, `hs-file-guest`, `hs-changed-show` | nothing: the window draws no Files, Diff, Terminal or browser tab of its own |
|
|
581
591
|
| `hs-app-bypass` | nothing |
|
|
592
|
+
| `hs-tipwrap`, `hs-provider-ask` | `hs-floating-tip` (`useFloatingTips`); nothing |
|
package/dist/TOKENS.md
CHANGED
|
@@ -188,6 +188,7 @@ one family apart.
|
|
|
188
188
|
| `--scroll-size` | `calc(var(--space) * 2.75)` | | yes | no | `11px` at the default `--space` |
|
|
189
189
|
| `--w-rail` | `calc(var(--space) * 14)` | | yes | no | `56px` at the default `--space` |
|
|
190
190
|
| `--icon-ctl-rail` | `calc(var(--space) * 10)` | | yes | no | `40px` at the default `--space` |
|
|
191
|
+
| `--h-badge` | `calc(var(--space) * 3)` | | yes | no | `12px` at the default `--space` |
|
|
191
192
|
| `--gap-rail` | `var(--space)` | | yes | no | `4px` at the default `--space` |
|
|
192
193
|
| `--edge` | `calc(var(--space) * 2)` | | yes | no | `8px` at the default `--space` |
|
|
193
194
|
| `--h-lane` | `42px` | | yes | no | |
|
|
@@ -310,6 +311,7 @@ one family apart.
|
|
|
310
311
|
| `--press` | `none` | | yes | no | |
|
|
311
312
|
| `--press-fade` | `1` | | yes | no | |
|
|
312
313
|
| `--hov-lift` | `none` | | yes | no | |
|
|
314
|
+
| `--fs-badge` | `8.5px` | | yes | no | |
|
|
313
315
|
| `--fs-mono-xs` | `10.5px` | | yes | no | |
|
|
314
316
|
| `--fs-mono` | `11px` | | yes | no | |
|
|
315
317
|
| `--fs-cap` | `11.5px` | | yes | no | |
|
|
@@ -401,14 +403,14 @@ one family apart.
|
|
|
401
403
|
The selectors whose corner reads each token. A theme reshapes a role
|
|
402
404
|
through its token; it selects a class only to set one family apart.
|
|
403
405
|
|
|
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-carousel-dots`, `.hs-carousel-dots button`, `.hs-carousel-dots button::before`, `.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`
|
|
406
|
+
| Token | Selectors |
|
|
407
|
+
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
408
|
+
| `--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 video, .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` |
|
|
409
|
+
| `--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-speech-test`, `.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` |
|
|
410
|
+
| `--r-icon` | `.hs-picture-tile`, `.hs-model-avatar`, `.hs-market-logo`, `.hs-market-logo img`, `.hs-app-icon` |
|
|
411
|
+
| `--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-carousel-dots`, `.hs-carousel-dots button`, `.hs-carousel-dots button::before`, `.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` |
|
|
412
|
+
| `--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-badged-badge`, `.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` |
|
|
413
|
+
| `--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` |
|
|
414
|
+
| `--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` |
|
|
415
|
+
| `--switch-radius` | `.hs-tog` |
|
|
416
|
+
| `--switch-thumb-radius` | `.hs-tog .hs-toggle-thumb` |
|