mirror of
https://github.com/kuhyx/utils.git
synced 2026-11-10 18:47:20 +01:00
Krzysztof kuhy Rudnicki
03bf1ed08b
The web counterpart to design_system (Dart): one :root block of frozen tokens plus the components that were duplicated across repos. Extracted from dufs-cloud and awesome-mcp-explorer, which both now consume it. - tokens.css: the frozen palette, spacing/radius/type scales, shadow policy and focus ring, under the canonical variable names from unified-design-system. Also ships the global :focus-visible rule, rather than leaving each consumer to remember it. - RangeSlider: reconciled from the two drifted copies. Takes the accessible DOM from awesome-mcp-explorer (real <button> thumbs with role="slider" and the aria-value* trio) and grab-the-nearer-thumb from dufs-cloud. Keyboard support (arrows/PageUp/PageDown/Home/End) is new: both donors were pointer-only, which the design system rules out, and an arrow-key-deaf role="slider" is an ARIA role that lies. - quantile.ts + fuzzyMatch: the genuinely duplicated helpers. FilterBar is deliberately absent. The two same-named components share no structure -- a horizontal <select> strip over files vs a vertical tri-state chip sidebar over servers, with disjoint FilterState, props and sort keys. It is the name-collision-is-not-a-duplicate trap, so extracting it would ship a widget nobody imports. dist/ is committed (and un-ignored against the root rule) because Vite does not transpile dependencies; consumers stay at zero config. Consumed via pnpm's &path:/web_ui suffix -- npm cannot install from a subdirectory of a git repo. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U4Rj3s7K2qzrLNgJqqPhno
69 lines
1.5 KiB
CSS
69 lines
1.5 KiB
CSS
/*
|
|
* Styling for the shared RangeSlider. Imported separately from tokens.css:
|
|
* import "@kuhyx/web-ui/tokens.css";
|
|
* import "@kuhyx/web-ui/range-slider.css";
|
|
*
|
|
* Every value routes through a token — no literals.
|
|
*/
|
|
|
|
.slider-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--text-muted);
|
|
font-size: var(--text-caption);
|
|
letter-spacing: var(--tracking-caption);
|
|
}
|
|
|
|
.slider-value {
|
|
/* Tabular figures so a dragging readout does not reflow the row. */
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.slider-track {
|
|
position: relative;
|
|
height: 22px;
|
|
margin-top: var(--space-1);
|
|
/* Let the element own the gesture instead of the page scrolling under it. */
|
|
touch-action: none;
|
|
}
|
|
|
|
.slider-track::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 9px;
|
|
right: 0;
|
|
left: 0;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.slider-fill {
|
|
position: absolute;
|
|
top: 9px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.slider-thumb {
|
|
position: absolute;
|
|
top: 4px;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-left: -7px;
|
|
padding: 0;
|
|
border: 2px solid var(--accent);
|
|
border-radius: 50%;
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* The thumbs are the keyboard target, so the ring must be unmistakable. The
|
|
* global :focus-visible rule in tokens.css already colours it; the wider offset
|
|
* here keeps it clear of the 14px circle. */
|
|
.slider-thumb:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|