@webority/theme 0.7.8 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.7.8",
+  "version": "0.8.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/_wui-components.scss

@@ -18,6 +18,10 @@
 // This file is now an INDEX. The rules live in ./wui/*.scss, split by domain
 // because one 5,000-line stylesheet made finding a component a grep.
 //
+// Shared tone-pill mixin — used by .badge, .status-label, and .chip.
+// Must be imported before components that use it.
+@import "wui/tone-pill";
+
 // The order below is LOAD-BEARING. A later partial may deliberately override an
 // earlier one, so reordering these imports silently changes the cascade — and
 // nothing in the build will complain. `pnpm check:theme` measures the rules that
@@ -47,10 +51,14 @@
 // and nothing failing anywhere to point at the cause. The component shipped; its styling did
 // not. That is the same escape as th.sortable and .u-name, and the fix is the same principle:
 // a component and the CSS it requires travel together.
-//
+
 // It is not free — roughly 183KB raw, 45KB gzipped, mostly inlined SVG. A product that never
 // renders a phone field can skip it by importing the `wui/*` partials above individually
 // instead of this aggregate; that is the deliberate opt-out, and it is a choice rather than
 // an accident.
 @import "flags";
 @import "wui/shell";
+@import "wui/dock";
+@import "wui/toolbar";
+// Last: restates the settled state of menus other partials style, so it must win.
+@import "wui/menu-motion";

package/scss/wui/_card.scss

@@ -7,6 +7,23 @@
 // Part of the wui-components layer — see _wui-components.scss for the load
 // order. Order within the layer is LOAD-BEARING; never reorder the imports.
 
+// Default (md) card inset — a uniform 20px on the header, body and footer, driven by one
+// friendly token. A consumer class can retune the padding by setting --wui-card-pad (e.g.
+// `.tight-card { --wui-card-pad: 12px }` with `className`/`class` on the card) without
+// overriding a selector. The padding-scale classes (.card-compact, .card-pad-*) still win —
+// they set `padding` directly on the header/body/footer.
+.card {
+    --wui-card-pad: 20px;
+    --bs-card-spacer-y: var(--wui-card-pad);
+    --bs-card-spacer-x: var(--wui-card-pad);
+    --bs-card-cap-padding-y: var(--wui-card-pad);
+    --bs-card-cap-padding-x: var(--wui-card-pad);
+    // Default card is borderless — a flat surface. The border-STYLE stays solid (Bootstrap's
+    // `border: var(--bs-card-border-width) solid …`), so a variant or a consumer class can
+    // bring the edge back just by giving it a width (set --bs-card-border-width).
+    --bs-card-border-width: 0;
+}
+
 // A card header that carries a title on the left and controls on the right — the
 // pattern nearly every panel header uses, so it belongs here rather than being
 // re-flexed with utilities on each one.
@@ -40,8 +57,10 @@
 // ── Variants ──────────────────────────────────────────────────────────────────
 // `default` is the flat surface above. The rest are opt-in visual treatments,
 // chosen by the `variant` prop (React) / attribute (Razor).
-// Flat elevation: no in-page drop shadow — stronger border is the edge cue.
+// Flat elevation: no in-page drop shadow — stronger border is the edge cue. The default card
+// is borderless, so re-assert a width here (this variant's whole cue is that border).
 .card-elevated {
+    --bs-card-border-width: 1px;
     border-color: var(--color-border-strong);
 }
 .card-outlined {

package/scss/wui/_controls.scss

@@ -95,14 +95,29 @@
 .wui-check:hover:not(:disabled):not(:checked),
 .wui-radio:hover:not(:disabled):not(:checked) {
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
 }
+// Keyboard focus keeps a restrained brand ring — a keyboard user MUST see where focus is
+// (a11y). :focus-visible matches keyboard/AT focus only, never a plain mouse click.
 .form-check-input:focus-visible,
 .wui-check:focus-visible,
 .wui-radio:focus-visible {
     outline: none;
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
+}
+// A plain MOUSE click must leave NO lingering focus/active glow, ring, border tint or
+// darkening — Bootstrap paints all of them on :focus/:active. Neutralise them for pointer
+// focus + active while the keyboard ring above stays, so a mouse click just toggles cleanly.
+.form-check-input:focus:not(:focus-visible),
+.wui-check:focus:not(:focus-visible),
+.wui-radio:focus:not(:focus-visible),
+.form-check-input:active,
+.wui-check:active,
+.wui-radio:active {
+    outline: none;
+    box-shadow: none;
+    filter: none;
 }
 .form-check-input:checked,
 .wui-check:checked,
@@ -167,7 +182,7 @@
 }
 .form-switch .form-check-input:hover:not(:disabled):not(:checked) {
     border-color: transparent;
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
 }
 .form-switch .form-check-input:checked {
     border-color: transparent;
@@ -176,6 +191,39 @@
     // Re-assert the knob — the checkbox :checked tick has equal specificity.
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='white'/%3E%3C/svg%3E");
 }
+// On a mouse click the switch's track border reverts to its resting transparent — Bootstrap's
+// :focus otherwise tints it brand-blue, leaving a coloured outline after the click. The shared
+// :focus:not(:focus-visible) rule already dropped the glow; this drops the border tint too.
+.form-switch .form-check-input:focus:not(:focus-visible) {
+    border-color: transparent;
+}
+
+// Circular variant (shape="circle") — a compact round on/off button instead of a sliding
+// pill. The track is a square-sized circle; the knob dot stays CENTRED in both states (no
+// left/right slide) and the fill flips to primary when on. Placed after the base switch
+// block so the equal-specificity :checked position override wins on source order.
+.form-switch-circle .form-check-input {
+    width: 24px;
+    height: 24px;
+    // The switch is a type="checkbox", which carries `corner-shape: squircle` — on a square
+    // that renders a rounded square, not a circle. Reset to a true round corner.
+    corner-shape: round;
+    border-radius: 999px;
+    background-position: center;
+    background-size: 10px 10px;
+}
+.form-switch-circle .form-check-input:checked {
+    background-position: center;
+}
+
+// Rounded-pill variant (shape="round") — the same sliding pill, but with truly circular
+// ends. The switch is a type=checkbox, so it inherits the checkbox's default
+// `corner-shape: squircle`, which superellipses the pill's ends; reset it to `round` for
+// the fully semicircular track in the reference. Only the corner shape changes — size,
+// knob and slide are the base pill's.
+.form-switch-round .form-check-input {
+    corner-shape: round;
+}
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,
     .wui-check,
@@ -1050,30 +1098,21 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
 }
 .badge-primary {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
+    @include wui-tone-pill-colors(primary, var(--color-primary));
     border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
 }
 .badge-success {
-    background: var(--color-success-soft);
-    color: var(--color-success-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(success);
 }
 .badge-warning,
 .badge-warn {
-    background: var(--color-warning-soft);
-    color: var(--color-warning-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(warning);
 }
 .badge-danger {
-    background: var(--color-danger-soft);
-    color: var(--color-danger-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(danger);
 }
 .badge-info {
-    background: var(--color-info-soft);
-    color: var(--color-info-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(info);
 }
 .badge-dot::before {
     content: "";
@@ -1109,29 +1148,24 @@ wui-select[compact] {
 .status-label.success,
 .status-label.tone-ok,
 .status-label.tone-green {
-    background: color-mix(in srgb, var(--color-success) 16%, transparent);
-    color: var(--color-success-text);
+    @include wui-tone-pill-colors(success);
 }
 .status-label.warning,
 .status-label.tone-warn,
 .status-label.tone-amber {
-    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
-    color: var(--color-warning-text);
+    @include wui-tone-pill-colors(warning);
 }
 .status-label.danger,
 .status-label.tone-bad,
 .status-label.tone-red {
-    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
-    color: var(--color-danger-text);
+    @include wui-tone-pill-colors(danger);
 }
 .status-label.info,
 .status-label.tone-blue {
-    background: color-mix(in srgb, var(--color-info) 16%, transparent);
-    color: var(--color-info-text);
+    @include wui-tone-pill-colors(info);
 }
 .status-label.primary {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
+    @include wui-tone-pill-colors(primary, var(--color-primary));
 }
 // Default/neutral — also the bare `.status-label` look, so an unknown or omitted
 // tone still renders as a proper pill instead of transparent text.

package/scss/wui/_data.scss

@@ -249,7 +249,10 @@
 // floating 42px header band, airy rows on a hairline rule, and an inset from
 // the card edge. Column geometry is NOT set here.
 .table-wrap:has(> .table-ledger) {
-    padding: 20px 20px 0;
+    // One token drives the whole inset so a consumer can retune the table's padding with a
+    // class (set --wui-table-pad) without overriding this selector. Bottom padding is now
+    // included (was 0) so the last row isn't flush against the card edge.
+    padding: var(--wui-table-pad, 20px);
 }
 .table-ledger {
     border-spacing: 0;

package/scss/wui/_dock.scss

@@ -0,0 +1,102 @@
+// ── Floating dock ──
+// AppFloatingDock / <app-floating-dock> / <wui-dock> — a macOS-style pill of icon
+// links. The element writes --wui-dock-mag (1 → max-scale) per item on pointermove;
+// everything visual lives here. With no JS (or coarse pointer / reduced motion /
+// `static`) the var stays 1 and the dock is a plain icon row.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+wui-dock {
+    --dock-size: 44px;
+
+    display: inline-flex;
+    align-items: flex-end;
+    gap: 10px;
+    padding: 10px 14px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-xl);
+    corner-shape: squircle;
+    box-shadow: var(--wui-shadow-overlay);
+    // 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);
+}
+
+.dock-item {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: calc(var(--dock-size) * var(--wui-dock-mag, 1));
+    height: calc(var(--dock-size) * var(--wui-dock-mag, 1));
+    border: none;
+    border-radius: 50%;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    cursor: pointer;
+    // Smooths the snap-back when the pointer leaves; during tracking the element
+    // updates per frame, so the short transition just softens the steps.
+    transition:
+        width 120ms var(--wui-ease-ui),
+        height 120ms var(--wui-ease-ui),
+        background-color 160ms var(--wui-ease-ui),
+        color 160ms var(--wui-ease-ui);
+}
+.dock-item:hover,
+.dock-item:focus-visible {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.dock-item:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    // Keyboard users get no pointer tracking — grow the focused item itself.
+    --wui-dock-mag: 1.25;
+}
+
+.dock-item-icon {
+    display: grid;
+    place-items: center;
+    font-size: calc(18px * var(--wui-dock-mag, 1));
+    line-height: 1;
+}
+// Node icons (SVGs) don't inherit font-size — scale the box instead.
+.dock-item-icon > svg {
+    transform: scale(var(--wui-dock-mag, 1));
+}
+
+.dock-item-tip {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    translate: -50% 4px;
+    padding: 4px 10px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    box-shadow: var(--wui-shadow-thumb);
+    color: var(--color-text);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.35;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+        opacity 140ms var(--wui-ease-ui),
+        translate 140ms var(--wui-ease-ui);
+    z-index: var(--wui-z-tooltip);
+}
+.dock-item:hover .dock-item-tip,
+.dock-item:focus-visible .dock-item-tip {
+    opacity: 1;
+    translate: -50% 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dock-item,
+    .dock-item-tip {
+        transition: none;
+    }
+}