@webority/theme 0.98.0 → 0.100.0

package/scss/wui/_media.scss

@@ -23,7 +23,7 @@
     object-fit: cover;
     display: block;
     // Photo fades + scales in so a late-arriving blob doesn't pop.
-    animation: wui-avatar-in 0.28s var(--wui-ease-out-quart, ease) both;
+    animation: wui-avatar-in 0.28s var(--wui-ease-out, ease) both;
 }
 .avatar {
     // `--avatar-size` drives the default (md, its 32px fallback) and any custom size. It is
@@ -35,7 +35,7 @@
     height: var(--avatar-size, 32px);
     border-radius: 999px;
     background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     // Initials take 37.5% of the disc but never go under the 12px text floor; a disc under 24px
     // takes half its size instead, the most two letters fit (the 20px preset sets 10px).
     font-size: max(min(12px, calc(var(--avatar-size, 32px) * 0.5)), calc(var(--avatar-size, 32px) * 0.375));
@@ -148,7 +148,7 @@
     -webkit-appearance: none;
     appearance: none;
     transition:
-        transform 0.15s var(--wui-ease-out-quart, ease),
+        transform 0.15s var(--wui-ease-out, ease),
         box-shadow 0.15s ease;
 }
 .avatar-clickable:hover {
@@ -202,7 +202,7 @@
     left: 50%;
     transform: translateX(-50%) translateY(4px);
     padding: 4px 8px;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     background: var(--color-text);
     color: var(--color-surface);
     font-size: 12px;
@@ -214,7 +214,7 @@
     z-index: 30;
     transition:
         opacity 0.16s ease,
-        transform 0.16s var(--wui-ease-out-quart, ease);
+        transform 0.16s var(--wui-ease-out, ease);
 }
 .avatar-label::after {
     content: "";
@@ -241,7 +241,7 @@
 .avatar-group > .avatar {
     margin-left: -10px;
     box-shadow: 0 0 0 2px var(--color-surface);
-    transition: transform 0.15s var(--wui-ease-out-quart, ease);
+    transition: transform 0.15s var(--wui-ease-out, ease);
 }
 .avatar-group > .avatar:first-child {
     margin-left: 0;
@@ -305,7 +305,7 @@
     gap: 12px;
     padding: 12px 14px;
     border: 1px dashed var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-surface);
     cursor: pointer;
     transition:
@@ -337,7 +337,7 @@
     justify-content: center;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .attach-drop:hover .attach-drop-icon {
     background: var(--color-surface);
@@ -369,7 +369,7 @@
     flex: 0 0 auto;
     font-size: 12px;
     font-weight: 600;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     border: 1px solid var(--color-border);
     border-radius: 999px;
     padding: 5px 14px;
@@ -380,7 +380,7 @@
 .attach-preview {
     width: 100%;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-surface);
     overflow: hidden;
 }
@@ -475,7 +475,7 @@
     gap: 12px;
     padding: 8px 12px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-surface);
     min-width: 0;
 }
@@ -486,10 +486,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     overflow: hidden;
     background: var(--color-bg-muted);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .attach-item-media img {
     width: 100%;
@@ -523,9 +523,6 @@
 }
 .attach-item-remove:hover {
     border-color: var(--color-danger);
-    // The glyph is graphical (icon-only button, 3:1) so the brand hue would technically pass
-    // at 3.36:1 — but "tint background ⇒ -text foreground" is worth keeping exceptionless, so
-    // check-contrast can enforce it by inspection instead of case-by-case judgement.
     color: var(--color-danger-text);
     background: var(--color-danger-soft);
 }
@@ -561,7 +558,7 @@
     display: flex;
     align-items: stretch;
     width: 100%;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     border: 1px solid var(--color-field-border);
     // Match AppInput: muted resting fill, lifts to a clean surface on focus.
@@ -578,7 +575,7 @@
 }
 .file-input:focus-within {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     box-shadow: none;
 }
 .file-input-btn {
@@ -640,7 +637,7 @@
 .file-input.file-input-tall:focus-within,
 .file-input.file-input-tall:active,
 .file-input.file-input-tall.dragging {
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     background: var(--color-surface);
     box-shadow: none;
 }
@@ -690,7 +687,7 @@
     background: var(--color-bg-muted);
 }
 .file-input.file-input-tall.has-files.dragging {
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     background: var(--color-surface);
 }
 // Width presets — put a .file-w-* class on the field (React className / Razor class) to cap the
@@ -731,7 +728,7 @@
     height: 54px;
     border-radius: 50%;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     transition: transform 0.15s ease;
 }
 .file-input.file-input-tall.dragging .file-input-icon {
@@ -743,7 +740,7 @@
     color: var(--color-text);
 }
 .file-input-title .browse {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .file-input.file-input-tall .file-input-text {
     padding: 0;
@@ -763,7 +760,7 @@
     display: block;
     width: 100%;
     height: 200px;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     border: 1px solid var(--color-border);
     overflow: hidden;
@@ -857,7 +854,7 @@
     font-size: 14px;
     font-weight: 600;
     border-radius: 999px;
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .file-preview-remove {
     position: absolute;
@@ -918,7 +915,7 @@
     align-items: center;
     justify-content: center;
     background: color-mix(in srgb, var(--color-surface) 65%, transparent);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     cursor: progress;
 }
 
@@ -974,7 +971,7 @@
     font-size: calc(var(--wui-logo-size) * 0.32);
     font-weight: 700;
     letter-spacing: -0.02em;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     background: var(--color-primary-soft);
 }
 // Avatar variant — the standard avatar disc (muted fill) instead of the soft-primary
@@ -1034,12 +1031,12 @@
         width: max-content;
         max-width: 160px;
         padding: 6px 10px;
-        border-radius: var(--radius, 10px);
+        border-radius: var(--wui-radius-md, 10px);
         corner-shape: squircle;
         background: var(--color-surface);
         color: var(--color-text);
-        border: 1px solid var(--color-border-light);
-        box-shadow: var(--wui-shadow-overlay);
+        border: 1px solid var(--color-border-subtle);
+        box-shadow: var(--wui-shadow-popover);
         font-size: 0.75rem;
         font-weight: 500;
         line-height: 1.3;
@@ -1227,7 +1224,7 @@
     width: 104px;
     height: 104px;
     flex: none;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     border: 1.5px dashed var(--color-border-strong);
     background: var(--color-bg-subtle);
     display: grid;
@@ -1261,7 +1258,7 @@
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
 }
 // hover overlay (camera + label), like the Minimals avatar uploader
 .logo-dropzone-overlay {

package/scss/wui/_mention-input.scss

@@ -27,9 +27,9 @@
     padding: 4px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .wui-mention-menu[hidden] {
     display: none;
@@ -40,7 +40,7 @@
     align-items: center;
     gap: 10px;
     padding: 8px 12px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     color: var(--color-text);
     cursor: pointer;
@@ -48,7 +48,7 @@
 // The active row is the element's, not :hover, so keys and pointer agree on one row.
 .wui-mention-option.is-active {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-mention-option-photo {
     flex: none;

package/scss/wui/_menu-motion.scss

@@ -27,7 +27,7 @@
 :root {
     --wui-menu-anim: wui-menu-drop;
     --wui-menu-anim-duration: 200ms;
-    --wui-menu-anim-ease: var(--wui-ease-out-quart);
+    --wui-menu-anim-ease: var(--wui-ease-out);
 }
 :root[data-wui-menu-motion="zoom"] {
     --wui-menu-anim: wui-menu-zoom;

package/scss/wui/_modal-remote.scss

@@ -13,7 +13,7 @@
 }
 .wui-modal-skeleton {
     height: 14px;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
 }
 .wui-modal-skeleton--short {
     width: 60%;
@@ -80,7 +80,7 @@
     max-height: none;
     height: 100%;
     border-radius: 0;
-    box-shadow: var(--shadow-overlay-lg);
+    box-shadow: var(--wui-shadow-modal);
 }
 @media (prefers-reduced-motion: reduce) {
     .modal.wui-remote-drawer .modal-dialog.wui-remote-drawer-dialog {

package/scss/wui/_navigation-menu.scss

@@ -54,13 +54,13 @@ wui-navigation-menu {
         outline-offset: 1px;
     }
     &[aria-current="page"] {
-        color: var(--color-primary-ink);
+        color: var(--color-primary-text);
     }
 }
 .wui-nav-menu-trigger > .wui-nav-menu-chevron {
     flex: none;
     margin-left: auto;
-    transition: rotate 150ms var(--wui-ease-out-quart);
+    transition: rotate 150ms var(--wui-ease-out);
 }
 .wui-nav-menu-trigger[aria-expanded="true"] > .wui-nav-menu-chevron {
     rotate: 180deg;
@@ -100,7 +100,7 @@ wui-navigation-menu {
         outline-offset: var(--wui-focus-ring-inset);
     }
     &[aria-current="page"] .wui-nav-menu-link-label {
-        color: var(--color-primary-ink);
+        color: var(--color-primary-text);
     }
     > .wui-icon {
         flex: none;
@@ -148,7 +148,7 @@ wui-navigation-menu {
         border-radius: var(--wui-radius-md);
         corner-shape: squircle;
         background: var(--color-surface);
-        box-shadow: var(--wui-shadow-overlay);
+        box-shadow: var(--wui-shadow-popover);
         transform-origin: top left;
 
         &[data-open] {

package/scss/wui/_navigation.scss

@@ -106,10 +106,10 @@
     place-items: center;
     width: 30px;
     height: 30px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // Sticky tools zone: search + section meta stay put while the list scrolls.
 .drawer-tools {
@@ -192,7 +192,7 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    min-height: var(--wui-control-height);
+    min-height: var(--wui-control-md);
     padding: 0 14px;
     border: 0;
     // Sits on the strip's own hairline rather than adding a second one.
@@ -211,7 +211,7 @@
     text-decoration: none;
     // A tab sits on the page surface with no fill of its own, so the shared 12% pressed wash
     // reads as a heavy grey block; half of it still answers the press.
-    --color-pressed-overlay: color-mix(in srgb, currentColor 6%, transparent);
+    --wui-pressed-overlay: color-mix(in srgb, currentColor 6%, transparent);
     transition:
         color 0.12s ease,
         border-color 0.12s ease;
@@ -227,7 +227,7 @@
     width: 18px;
     height: 18px;
     object-fit: cover;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
 }
 .app-tab:hover:not(:disabled):not(.disabled):not(.active) {
     color: var(--color-text);
@@ -242,7 +242,7 @@
     text-decoration: none;
 }
 .app-tab.active {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     // The active tab carries weight as well as colour — colour alone is a weak
     // signal for anyone who reads the strip at a glance or cannot distinguish it.
     font-weight: 600;
@@ -283,7 +283,7 @@
 .app-tab:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-inset);
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
 }
 // A destructive tab reads as destructive whether or not it is the active one.
 .app-tab.danger {
@@ -325,8 +325,8 @@
     // clip would shear off its rounded corner. A decelerating slide reaches the tab exactly and
     // never crosses the edge, so the radius is always intact.
     transition:
-        transform 0.42s var(--wui-ease-out-quart),
-        width 0.42s var(--wui-ease-out-quart),
+        transform 0.42s var(--wui-ease-out),
+        width 0.42s var(--wui-ease-out),
         opacity 0.15s ease;
 }
 .app-tabs[data-wui-tabs] .app-tab-indicator {
@@ -353,7 +353,7 @@
 }
 .app-tab.active .app-tab-count {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // Semantic tone tints — React `tone` / Razor `Tone`, matching the vocabulary
 // `.status-label` uses (success | warning | danger | info).
@@ -376,7 +376,7 @@
 
 // ── Sizes ──
 .app-tabs-sm .app-tab {
-    min-height: var(--wui-control-height-sm);
+    min-height: var(--wui-control-sm);
     padding: 0 10px;
     gap: 6px;
     font-size: 13px;
@@ -386,7 +386,7 @@
     height: 16px;
 }
 .app-tabs-lg .app-tab {
-    min-height: var(--wui-control-height-lg);
+    min-height: var(--wui-control-lg);
     padding: 0 18px;
     font-size: 15px;
 }
@@ -431,7 +431,7 @@
 .app-tabs-pills .app-tab {
     border-bottom: 0;
     margin-bottom: 0;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
 }
 // Fallback fill until the moving pill is wired.
 .app-tabs-pills .app-tab.active {
@@ -448,7 +448,7 @@
     // The pill fills the whole tab — no underline inset.
     --wui-tab-underline-inset: 0px;
     background: var(--color-primary-soft);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
 }
 .app-tabs-pills[data-active-danger] .app-tab-indicator {
     background: var(--color-danger-soft);
@@ -485,8 +485,8 @@
     height: var(--wui-tab-h, 0);
     transform: translateY(var(--wui-tab-y, 0));
     transition:
-        transform 0.42s var(--wui-ease-out-quart),
-        height 0.42s var(--wui-ease-out-quart),
+        transform 0.42s var(--wui-ease-out),
+        height 0.42s var(--wui-ease-out),
         opacity 0.15s ease;
 }
 // Vertical pills: the moving pill fills the row width.
@@ -588,16 +588,16 @@
     max-width: min(320px, calc(100vw - 8px));
     padding: 4px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-surface);
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .wui-overflow-item {
     display: block;
     width: 100%;
     padding: 8px 10px;
     border: 0;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     background: transparent;
     color: var(--color-text);
     font-family: inherit;
@@ -618,7 +618,7 @@
     outline-offset: var(--wui-focus-ring-inset);
 }
 .wui-overflow-item[aria-checked="true"] {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .wui-overflow-item[aria-disabled="true"] {
@@ -659,7 +659,7 @@
     transition: color 0.12s ease;
 }
 .search-wrap:focus-within > .search-icon {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .search-field,
 .search-input {
@@ -718,7 +718,7 @@
     height: 36px;
     padding: 0;
     border: 0;
-    border-radius: var(--wui-field-radius);
+    border-radius: var(--wui-field-md-radius);
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;
@@ -758,7 +758,7 @@
 // Sizes — sm / lg around the default, mirroring AppInput. The leading icon and clear button
 // track the height so they stay centred and clear of the text.
 .search-wrap.search-sm .search-input {
-    height: var(--wui-control-height-sm);
+    height: var(--wui-control-sm);
     padding-left: calc(13px + var(--wui-search-icon-size, 12px) + 9px);
     padding-right: 32px;
     font-size: 13px;
@@ -773,7 +773,7 @@
     right: 6px;
 }
 .search-wrap.search-lg .search-input {
-    height: var(--wui-control-height-lg);
+    height: var(--wui-control-lg);
     padding-left: calc(13px + var(--wui-search-icon-size, 24px) + 9px);
     padding-right: 40px;
     font-size: 16px;
@@ -820,7 +820,7 @@
     text-decoration: none;
 }
 .breadcrumb-item a:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     text-decoration: underline;
 }
 .breadcrumb-item.active {

package/scss/wui/_notification-center.scss

@@ -63,7 +63,7 @@
     border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-lg);
     background: var(--color-surface);
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     // Focus lands on the panel itself when it opens; the controls inside carry the visible focus.
     outline: none;
     transform-origin: top right;
@@ -100,7 +100,7 @@
     border: 0;
     border-radius: var(--wui-radius-sm);
     background: none;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font: inherit;
     font-size: 14px;
     font-weight: 500;
@@ -146,7 +146,7 @@
     min-height: 44px;
     padding: 12px 16px;
     border: 0;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-subtle);
     background: transparent;
     color: var(--color-text-body);
     font: inherit;
@@ -218,7 +218,7 @@
     justify-content: center;
     min-height: 44px;
     border-top: 1px solid var(--color-border);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;

package/scss/wui/_onboarding-checklist.scss

@@ -130,7 +130,7 @@
 .wui-onboarding-step.is-current .wui-onboarding-mark {
     border-color: var(--color-primary);
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-onboarding-step.is-done .wui-onboarding-mark {
     border-color: transparent;
@@ -158,7 +158,7 @@ a.wui-onboarding-label {
     text-underline-offset: 3px;
 }
 a.wui-onboarding-label:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     text-decoration-color: currentColor;
 }
 a.wui-onboarding-label::after {