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/ui.css
+24 -22
View File
@@ -111,8 +111,8 @@
transition-duration: 0.01ms !important;
}
}
:where(button, a):focus-visible {
outline: 2px solid var(--wrn-color-primary);
:where(button, a, summary):focus-visible {
outline: 2px solid var(--wrn-color-focus);
outline-offset: 2px;
}
/* --- Component-system foundations --------------------------------------- */
@@ -122,15 +122,15 @@
}
.wrn-type--display {
font-size: clamp(2.25rem, 7vw, 4.75rem);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
font-weight: 750;
letter-spacing: -0.045em;
}
.wrn-type--heading {
font-size: clamp(1.25rem, 2vw, 1.75rem);
line-height: 1.1;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.15;
font-weight: 650;
letter-spacing: -0.028em;
}
.wrn-type--lead {
font-size: clamp(1.05rem, 2vw, 1.25rem);
@@ -172,8 +172,8 @@
}
.wrn-label {
color: var(--wrn-color-text);
font-size: 0.875rem;
font-weight: 650;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.4;
}
.wrn-required,
@@ -210,23 +210,24 @@
display: grid;
place-items: center;
padding: 1rem;
background: rgb(0 0 0 / 0.55);
backdrop-filter: blur(4px);
background: rgb(12 13 16 / 0.52);
backdrop-filter: blur(6px);
}
.wrn-dialog {
width: min(100%, 32rem);
max-height: calc(100dvh - 2rem);
overflow: auto;
padding: clamp(1.25rem, 4vw, 2rem);
padding: clamp(1.25rem, 4vw, 1.75rem);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
box-shadow: var(--wrn-shadow-1);
border-radius: var(--wrn-radius-lg);
box-shadow: var(--wrn-shadow-3);
}
.wrn-dialog__title {
margin: 0;
font-size: 1.35rem;
font-size: 1.25rem;
font-weight: 650;
line-height: 1.25;
}
.wrn-dialog__description {
@@ -287,10 +288,11 @@
box-shadow: var(--wrn-shadow-1);
}
.wrn-eyebrow {
color: var(--wrn-color-primary);
font-size: 0.75rem;
font-weight: 750;
letter-spacing: 0.1em;
color: var(--wrn-color-primary-text);
font-family: var(--wrn-font-mono, monospace);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wrn-auth-card > .wrn-eyebrow {
@@ -579,8 +581,8 @@
}
.wrn-well,
.wrn-inset-panel {
background: var(--wrn-color-surface-2);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
background: var(--wrn-color-surface-soft);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.05);
}
.wrn-scroll-area {
max-width: 100%;