demos: theme scrollbars + add missing data-uix-radio chrome

Two visible inconsistencies in dark theme that the user flagged:

1. Scrollbars in code blocks (and any other scrollable inside the
   demos) rendered with the user-agent default chrome — bright white
   track + thumb on a dark surface. Only `[data-uix-rail]` (the left
   navigation column) had a themed scrollbar.

   Added a universal WebKit scrollbar theme scoped to
   `[data-uix-docs]`: transparent track, `--uix-line` thumb with
   2px padding-clipped border so it reads as a thin rounded handle
   that hovers to `--uix-line-strong`. Both axes (10px width).
   Firefox handled via `scrollbar-color` + `scrollbar-width: thin`
   on the root.

2. `[data-uix-radio]` had zero CSS rules — the date-range-picker
   demo's `mode` (inline / modal) selector fell back to native radio
   inputs and an unstyled label, while its sibling controls used the
   themed `[data-uix-switch]`. Two switches-as-controls + one set of
   native radios in the same panel.

   Mirrored the data-uix-switch chrome at radio size: 16x16 circle,
   `--uix-line` border, `--uix-surface-sunken` background, inner
   pill in `--uix-accent` when checked, focus ring matches the rest.
   Label uses the same color + size as data-uix-switch-label.

Verified in browser on date-range-picker demo: the `mode` radios now
read as the same control family as the surrounding switches, and the
code-snippet scrollbar is dark-themed instead of bright white.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent 8ccd9de033
commit 332ef63177

@ -180,6 +180,33 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-block-size: 100vh;
/* Firefox scrollbar — themed thin track that reads on both light + dark. */
scrollbar-color: var(--uix-line) transparent;
scrollbar-width: thin;
}
/* WebKit scrollbar — universal demo theme so code blocks, scroll areas,
stage canvas etc. all read on dark mode (default is white track). */
[data-uix-docs] ::-webkit-scrollbar {
inline-size: 10px;
block-size: 10px;
}
[data-uix-docs] ::-webkit-scrollbar-track {
background: transparent;
}
[data-uix-docs] ::-webkit-scrollbar-thumb {
background: var(--uix-line);
border-radius: var(--uix-radius-sm);
border: 2px solid transparent;
background-clip: padding-box;
}
[data-uix-docs] ::-webkit-scrollbar-thumb:hover {
background: var(--uix-line-strong);
background-clip: padding-box;
border: 2px solid transparent;
}
[data-uix-docs] ::-webkit-scrollbar-corner {
background: transparent;
}
/* ── Shell layout ──────────────────────────────────────────────────── */
@ -1074,6 +1101,51 @@
}
[data-uix-switch-label] { font-size: var(--uix-text-sm); color: var(--uix-text); }
/* Radio (enum, single-select) — sibling chrome to data-uix-switch so demos
that use radios for picker-style choices read as the same control family. */
[data-uix-radio] {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
[data-uix-radio] input[type="radio"] {
appearance: none;
-webkit-appearance: none;
inline-size: 16px;
block-size: 16px;
margin: 0;
padding: 0;
border: 1px solid var(--uix-line);
border-radius: var(--uix-radius-full);
background: var(--uix-surface-sunken);
cursor: pointer;
position: relative;
transition:
background var(--uix-duration-fast) var(--uix-ease),
border-color var(--uix-duration-fast) var(--uix-ease);
}
[data-uix-radio] input[type="radio"]::after {
content: "";
position: absolute;
inset: 3px;
border-radius: var(--uix-radius-full);
background: transparent;
transition: background var(--uix-duration-fast) var(--uix-ease);
}
[data-uix-radio] input[type="radio"]:checked {
border-color: var(--uix-accent);
}
[data-uix-radio] input[type="radio"]:checked::after {
background: var(--uix-accent);
}
[data-uix-radio] input[type="radio"]:focus-visible {
outline: none;
box-shadow: var(--uix-ring);
}
[data-uix-radio-label] { font-size: var(--uix-text-sm); color: var(--uix-text); }
/* Chip group (enum) */
[data-uix-chips] {
display: inline-flex;

Loading…
Cancel
Save

Powered by TurnKey Linux.