From 332ef63177d714a1c0936189b57d9fa9f571961e Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 21 May 2026 01:35:13 +0200
Subject: [PATCH] demos: theme scrollbars + add missing data-uix-radio chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/routes/uix/uix.css | 72 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/web/routes/uix/uix.css b/web/routes/uix/uix.css
index c38e46ee7..0344f25d9 100644
--- a/web/routes/uix/uix.css
+++ b/web/routes/uix/uix.css
@@ -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;