WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(release): redesign UI tokens and publish styles 0.8.26, ui 0.8.86

Browse Source 
Visual-only redesign ("instrument panel"): cool graphite neutrals for light
and dark, layered hairline elevation, larger radii, a mono token for
eyebrows/data, keycap-style solid and secondary buttons, recessed input
wells and tab tracks, a stronger dialog, and a theme-driven focus outline.
No props, outputs or behaviour change.

Also records the already-published csr 0.8.42, styles 0.8.25 and ui 0.8.85
changes (optional chaining/nullish in the reactive runtime, shared
theme/accent cookie sync, BackToTop hidden attribute).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed 2026-09-30 12:00:27 +05:30
1 parent f4eaf416be
commit 1179fc2810
16 files changed
+322 -108
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/input.wrn
+13 -3
View File
@@ -295,9 +295,14 @@ component Input {
border-radius: var(--wrn-radius-sm, 6px);
box-shadow: none;
}
.wrn-next--field:not([data-invalid="true"]) :where(input, textarea, select):hover:not(:disabled):not(:focus-visible) {
border-color: var(--wrn-color-input-border-hover, var(--wrn-color-border-strong));
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
box-shadow:
inset 0 1px 2px rgb(0 0 0 / 0.04),
0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -349,12 +354,17 @@ component Input {
min-width: 0;
}
.wrn-next__field-control > :is(input, textarea, select) {
/* Recessed well: the inverse of the raised keycap button. */
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.8125rem;
}
.wrn-next__field-control > :is(input, textarea)::placeholder {
color: var(--wrn-color-input-placeholder, var(--wrn-color-muted));
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
}