@webority/theme 0.99.0 → 0.100.0

package/scss/wui/_display.scss

@@ -12,7 +12,7 @@
     display: flex;
     flex-direction: column;
     padding: 18px 20px;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     background: var(--color-surface);
 }
@@ -25,14 +25,14 @@
     margin-bottom: 12px;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // Tone modifiers — same semantic vocabulary as .badge/.status-label (success / warning /
 // danger / info / primary / neutral). primary is the default look above, restated here so
 // an explicit icon-tone="primary" matches an omitted one.
 .kpi-icon-primary {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .kpi-icon-success {
     background: var(--color-success-soft);
@@ -107,7 +107,7 @@
     width: 48px;
     height: 16px;
     margin-top: 8px;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .kpi-sparkline polyline {
     stroke-width: 1.5;
@@ -241,7 +241,7 @@ a.kpi {
         transform 0.15s ease;
 }
 a.kpi:hover {
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--wui-shadow-card);
     transform: translateY(-2px);
 }
 a.kpi:focus-visible {
@@ -299,7 +299,7 @@ a.kpi:focus-visible {
     place-items: center;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .info-meta {
     display: flex;
@@ -332,7 +332,7 @@ a.info-row:hover {
     text-decoration: none;
 }
 a.info-row:hover .info-value {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     text-decoration: underline;
 }
 
@@ -479,7 +479,7 @@ a.info-row:hover .info-value {
 // ============================================================================
 .segmented {
     --segmented-selected-bg: var(--color-thumb);
-    --segmented-option-h: calc(var(--wui-control-height) - 8px);
+    --segmented-option-h: calc(var(--wui-control-md) - 8px);
     --segmented-icon: 14px;
     --segmented-note: 12px;
     position: relative;
@@ -564,7 +564,7 @@ a.info-row:hover .info-value {
 // Without JS this per-option pill stands in for the sliding thumb below, so it carries the same edge and shadow.
 .segmented-option:has(.segmented-input:checked) {
     background: var(--segmented-selected-bg);
-    box-shadow: 0 0 0 1px var(--color-border), var(--wui-shadow-thumb);
+    box-shadow: 0 0 0 1px var(--color-border), var(--wui-thumb-shadow);
     color: var(--color-text);
 }
 // The ring is drawn on the label because the input it belongs to has no box.
@@ -585,7 +585,7 @@ a.info-row:hover .info-value {
     border-radius: 999px;
     background: var(--segmented-selected-bg);
     // A shadow, not a border: a border would add to the width JS measures and sets.
-    box-shadow: 0 0 0 1px var(--color-border), var(--wui-shadow-thumb);
+    box-shadow: 0 0 0 1px var(--color-border), var(--wui-thumb-shadow);
     opacity: 0;
     pointer-events: none;
 }
@@ -629,11 +629,11 @@ a.info-row:hover .info-value {
     bottom: 3px;
 }
 .segmented-sm {
-    --segmented-option-h: calc(var(--wui-control-height-sm) - 8px);
+    --segmented-option-h: calc(var(--wui-control-sm) - 8px);
     --segmented-icon: 13px;
 }
 .segmented-lg {
-    --segmented-option-h: calc(var(--wui-control-height-lg) - 8px);
+    --segmented-option-h: calc(var(--wui-control-lg) - 8px);
     --segmented-icon: 16px;
 }
 .segmented-sm .segmented-option {
@@ -691,7 +691,7 @@ a.info-row:hover .info-value {
     height: 40px;
     padding: 0;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-surface);
     cursor: pointer;
 }
@@ -702,11 +702,11 @@ a.info-row:hover .info-value {
 }
 .color-field-swatch::-webkit-color-swatch {
     border: none;
-    border-radius: calc(var(--radius) - 3px);
+    border-radius: calc(var(--wui-radius-md) - 3px);
 }
 .color-field-swatch::-moz-color-swatch {
     border: none;
-    border-radius: calc(var(--radius) - 3px);
+    border-radius: calc(var(--wui-radius-md) - 3px);
 }
 .color-field-swatch:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -722,12 +722,12 @@ a.info-row:hover .info-value {
 // The swatch tracks the control height per size, less the 4px inset the md swatch already
 // keeps against the 44px field, so the chip stays visually inset at every size.
 .color-field-sm .color-field-swatch {
-    width: calc(var(--wui-control-height-sm) - 4px);
-    height: calc(var(--wui-control-height-sm) - 4px);
+    width: calc(var(--wui-control-sm) - 4px);
+    height: calc(var(--wui-control-sm) - 4px);
 }
 .color-field-lg .color-field-swatch {
-    width: calc(var(--wui-control-height-lg) - 4px);
-    height: calc(var(--wui-control-height-lg) - 4px);
+    width: calc(var(--wui-control-lg) - 4px);
+    height: calc(var(--wui-control-lg) - 4px);
 }
 
 // ============================================================================
@@ -831,12 +831,12 @@ a.info-row:hover .info-value {
 }
 .timeline-by-link:hover,
 .timeline-by-link:focus-visible {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .timeline-note {
     margin: 6px 0 0;
     padding: 8px 10px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-bg-muted);
     font-size: 13px;
     line-height: 1.5;
@@ -905,23 +905,23 @@ a.info-row:hover .info-value {
 // dot's own hue. The fill is softened a touch (mixed toward the surface) so the
 // states read gentler than the raw brand tones.
 .timeline--progress .timeline-item.is-done .timeline-dot {
-    color: var(--color-on-status-fill);
+    color: var(--color-on-success);
     background: color-mix(in srgb, var(--color-success) 82%, var(--color-surface));
     box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-success-soft);
 }
 .timeline--progress .timeline-item.is-current .timeline-dot {
-    color: var(--color-on-status-fill);
+    color: var(--color-on-warning);
     background: color-mix(in srgb, var(--color-warning) 82%, var(--color-surface));
     box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-warning-soft);
 }
 .timeline--progress .timeline-item.is-rejected .timeline-dot {
-    color: var(--color-on-status-fill);
+    color: var(--color-on-danger);
     background: color-mix(in srgb, var(--color-danger) 82%, var(--color-surface));
     box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-danger-soft);
 }
 // Blocked / waiting on an external action — informational blue.
 .timeline--progress .timeline-item.is-on-hold .timeline-dot {
-    color: var(--color-on-status-fill);
+    color: var(--color-on-info);
     background: color-mix(in srgb, var(--color-info) 82%, var(--color-surface));
     box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-info-soft);
 }
@@ -1043,7 +1043,7 @@ a.info-row:hover .info-value {
     --wui-timeline-dot: 56px;
     --wui-timeline-step-ring: 7px;
     --wui-timeline-step-tint: var(--color-primary-soft);
-    --wui-timeline-step-ink: var(--color-primary-ink);
+    --wui-timeline-step-ink: var(--color-primary-text);
     // The line between discs: 6px dashes with 6px gaps, 1px thick.
     --wui-timeline-step-line: var(--color-border-strong);
     --wui-timeline-step-dash: 6px;
@@ -1114,7 +1114,7 @@ a.info-row:hover .info-value {
     line-height: 1.4;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    color: var(--wui-timeline-step-ink, var(--color-primary-ink));
+    color: var(--wui-timeline-step-ink, var(--color-primary-text));
 }
 .wui-timeline--steps .timeline-title {
     font-size: 16px;
@@ -1259,7 +1259,7 @@ a.info-row:hover .info-value {
 .compare-table {
     overflow: hidden;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     background: var(--color-surface);
 }
@@ -1285,7 +1285,7 @@ a.info-row:hover .info-value {
 }
 .compare-table th.is-highlight {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .compare-table td.is-highlight {
     background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
@@ -1322,14 +1322,14 @@ a.info-row:hover .info-value {
     gap: 12px;
     padding: 14px 16px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
     background: var(--color-surface);
     color: inherit;
     text-decoration: none;
     transition:
-        border-color 0.3s var(--wui-ease-out-quart),
-        background 0.3s var(--wui-ease-out-quart);
+        border-color 0.3s var(--wui-ease-out),
+        background 0.3s var(--wui-ease-out);
 }
 .res-card,
 .res-card:hover {
@@ -1351,8 +1351,8 @@ a.info-row:hover .info-value {
     place-items: center;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
-    transition: background 0.3s var(--wui-ease-out-quart);
+    color: var(--color-primary-text);
+    transition: background 0.3s var(--wui-ease-out);
 }
 // On hover the card takes the soft tint, so the icon inverts to the surface
 // colour to stay distinct from it.
@@ -1371,10 +1371,10 @@ a.info-row:hover .info-value {
     font-weight: 600;
     line-height: 1.4;
     color: var(--color-text);
-    transition: color 0.3s var(--wui-ease-out-quart);
+    transition: color 0.3s var(--wui-ease-out);
 }
 .res-card:hover .res-card-title {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .res-card-text {
     margin-top: 2px;
@@ -1408,7 +1408,7 @@ a.info-row:hover .info-value {
     align-self: center;
     width: 64px;
     height: 64px;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -1496,14 +1496,14 @@ a.info-row:hover .info-value {
     align-items: center;
     gap: 0.35em;
     position: relative;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 500;
     cursor: pointer;
     border-radius: 4px;
-    transition: color 0.25s var(--wui-ease-out-quart);
+    transition: color 0.25s var(--wui-ease-out);
 }
 .wui-link:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-link.wui-link--surface-dark,
 .wui-link.wui-link--surface-dark:hover {
@@ -1555,7 +1555,7 @@ a.info-row:hover .info-value {
     background: currentColor;
     transform: scaleX(0);
     transform-origin: left center;
-    transition: transform 0.5s var(--wui-ease-out-quart);
+    transition: transform 0.5s var(--wui-ease-out);
 }
 .wui-link--underline-center .wui-link__label::after {
     transform-origin: center;
@@ -1569,7 +1569,7 @@ a.info-row:hover .info-value {
 
 // slide — the whole link (label + icons) nudges to the right.
 .wui-link--slide {
-    transition: color 0.25s var(--wui-ease-out-quart), transform 0.25s var(--wui-ease-out-quart);
+    transition: color 0.25s var(--wui-ease-out), transform 0.25s var(--wui-ease-out);
 }
 .wui-link--slide:hover,
 .wui-link--slide:focus-visible {
@@ -1581,7 +1581,7 @@ a.info-row:hover .info-value {
     margin-inline-start: -0.2em;
     opacity: 0;
     transform: translateX(-4px);
-    transition: opacity 0.25s var(--wui-ease-out-quart), transform 0.25s var(--wui-ease-out-quart), margin 0.25s var(--wui-ease-out-quart);
+    transition: opacity 0.25s var(--wui-ease-out), transform 0.25s var(--wui-ease-out), margin 0.25s var(--wui-ease-out);
 }
 .wui-link--icon:hover .wui-link__ic--right,
 .wui-link--icon:focus-visible .wui-link__ic--right {
@@ -1600,7 +1600,7 @@ a.info-row:hover .info-value {
     background: var(--color-primary-soft);
     transform: scaleX(0);
     transform-origin: left center;
-    transition: transform 0.3s var(--wui-ease-out-quart);
+    transition: transform 0.3s var(--wui-ease-out);
 }
 .wui-link--highlight:hover .wui-link__label::before,
 .wui-link--highlight:focus-visible .wui-link__label::before {
@@ -1616,7 +1616,7 @@ a.info-row:hover .info-value {
     position: absolute;
     top: 0;
     opacity: 0;
-    transition: opacity 0.25s var(--wui-ease-out-quart), transform 0.25s var(--wui-ease-out-quart);
+    transition: opacity 0.25s var(--wui-ease-out), transform 0.25s var(--wui-ease-out);
 }
 .wui-link--bracket .wui-link__label::before {
     content: "[";
@@ -1642,7 +1642,7 @@ a.info-row:hover .info-value {
 }
 .wui-link--fade:hover,
 .wui-link--fade:focus-visible {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // static — the same thin single line, always visible (no text-decoration, so it matches
@@ -1655,7 +1655,7 @@ a.info-row:hover .info-value {
 }
 .wui-link--static:hover .wui-link__label::after,
 .wui-link--static:focus-visible .wui-link__label::after {
-    animation: wui-link-underline-slide 0.5s var(--wui-ease-out-quart);
+    animation: wui-link-underline-slide 0.5s var(--wui-ease-out);
 }
 @keyframes wui-link-underline-slide {
     from {
@@ -1668,7 +1668,7 @@ a.info-row:hover .info-value {
 
 // grow — the label's letters open up on hover.
 .wui-link--grow {
-    transition: color 0.25s var(--wui-ease-out-quart), letter-spacing 0.25s var(--wui-ease-out-quart);
+    transition: color 0.25s var(--wui-ease-out), letter-spacing 0.25s var(--wui-ease-out);
 }
 .wui-link--grow:hover,
 .wui-link--grow:focus-visible {
@@ -1677,7 +1677,7 @@ a.info-row:hover .info-value {
 
 // glow — a soft accent glow blooms behind the text on hover.
 .wui-link--glow {
-    transition: color 0.25s var(--wui-ease-out-quart), text-shadow 0.3s var(--wui-ease-out-quart);
+    transition: color 0.25s var(--wui-ease-out), text-shadow 0.3s var(--wui-ease-out);
 }
 .wui-link--glow:hover,
 .wui-link--glow:focus-visible {
@@ -1706,7 +1706,7 @@ a.info-row:hover .info-value {
 }
 .wui-link--shine:hover .wui-link__label,
 .wui-link--shine:focus-visible .wui-link__label {
-    animation: wui-link-shine 0.9s var(--wui-ease-out-quart);
+    animation: wui-link-shine 0.9s var(--wui-ease-out);
 }
 @keyframes wui-link-shine {
     from {
@@ -1775,6 +1775,6 @@ a.info-row:hover .info-value {
     .wui-link--shine .wui-link__label {
         background-image: none;
         -webkit-text-fill-color: var(--color-primary);
-        color: var(--color-primary-ink);
+        color: var(--color-primary-text);
     }
 }

package/scss/wui/_dock.scss

@@ -17,7 +17,7 @@ wui-dock {
     border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     // Item boxes grow on hover; anchoring the row height to the rest size keeps the
     // pill from pushing surrounding layout while items magnify upward out of it.
     height: calc(var(--dock-size) + 20px);
@@ -46,7 +46,7 @@ wui-dock {
 .dock-item:hover,
 .dock-item:focus-visible {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .dock-item:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -75,7 +75,7 @@ wui-dock {
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-sm);
-    box-shadow: var(--wui-shadow-thumb);
+    box-shadow: var(--wui-thumb-shadow);
     color: var(--color-text);
     font-size: 12px;
     font-weight: 500;
@@ -103,5 +103,5 @@ wui-dock {
 
 // The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
 .dock-item:active:not(:disabled, [aria-disabled="true"]) {
-    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+    background-image: linear-gradient(var(--wui-pressed-overlay), var(--wui-pressed-overlay)) !important;
 }

package/scss/wui/_drawer.scss

@@ -42,7 +42,7 @@
     flex-direction: column;
     background: var(--color-surface);
     color: var(--color-text);
-    box-shadow: var(--wui-shadow-overlay-lg);
+    box-shadow: var(--wui-shadow-modal);
     overflow: hidden;
 }
 .wui-drawer-panel:focus {
@@ -137,7 +137,7 @@
         bottom: 0;
         height: calc(var(--wui-drawer-max, 90) * 1dvh);
         max-height: 100dvh;
-        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+        border-radius: var(--wui-radius-xl) var(--wui-radius-xl) 0 0;
         corner-shape: squircle;
         transform: translateY(100%);
     }
@@ -172,7 +172,7 @@
         justify-content: center;
         width: 64px;
         height: 28px;
-        border-radius: var(--radius);
+        border-radius: var(--wui-radius-md);
         cursor: inherit;
     }
     .wui-drawer-handle::before {

package/scss/wui/_file-viewer.scss

@@ -472,7 +472,7 @@ wui-file-viewer:fullscreen {
     height: 96px;
     border-radius: 50%;
     background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-file-viewer-controls {
     flex: 0 0 auto;
@@ -509,6 +509,6 @@ wui-file-viewer:fullscreen {
 
 // The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
 .wui-file-viewer-zoom:active:not(:disabled, [aria-disabled="true"]) {
-    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+    background-image: linear-gradient(var(--wui-pressed-overlay), var(--wui-pressed-overlay)) !important;
 }
 

package/scss/wui/_filter-popover.scss

@@ -26,7 +26,7 @@
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-lg);
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     z-index: var(--wui-z-popover);
 }
 

package/scss/wui/_floating.scss

@@ -53,7 +53,7 @@
     height: var(--wui-floating-size);
     padding: 0;
     border-radius: 50%;
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 // Quieter than the primary circle: a light brand tint, the brand icon and a thin brand border.
 .wui-floating-btn--secondary {