@webority/theme 0.52.1 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.52.1",
+  "version": "0.53.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/_components.scss

@@ -106,7 +106,8 @@
 .btn-outline-primary {
     --bs-btn-color: var(--color-primary-ink);
     --bs-btn-border-color: var(--color-primary);
-    --bs-btn-hover-color: var(--wui-primary-text);
+    // The hover fill is the theme's primary (the lifted one in dark mode), so its label is too.
+    --bs-btn-hover-color: var(--color-primary-text);
     --bs-btn-hover-bg: var(--color-primary);
     --bs-btn-hover-border-color: var(--color-primary);
     --bs-btn-active-color: var(--wui-primary-text);
@@ -148,6 +149,9 @@
     --bs-btn-active-color: var(--color-danger-text);
     --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 26%, transparent);
     --bs-btn-active-border-color: transparent;
+    // Bootstrap builds the focus ring from --bs-btn-focus-shadow-rgb, which only its own
+    // variants set; a custom variant needs the ring itself or keyboard focus shows nothing.
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-danger) 50%, transparent);
 }
 
 // Soft neutral tinted button — a quieter alternative to .btn-light for a secondary
@@ -162,6 +166,7 @@
     --bs-btn-active-bg: var(--color-border-strong);
     --bs-btn-active-color: var(--color-text);
     --bs-btn-active-border-color: transparent;
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
 }
 
 // Light outline for a dark banner/hero CTA, where .btn-outline-primary's brand-coloured

package/scss/_tokens.scss

@@ -272,11 +272,11 @@
     --wui-dark-text: #e6e8ee;
     --wui-dark-text-muted: #b4b9c6;
     --wui-dark-text-subtle: #8a90a0;
-    // Primary as TEXT and as the fill under near-black ink. Lifted from #6B83EC, which measured
-    // 3.75:1 as text on its own soft tint over the muted fill (avatar initials, selected rows, primary
-    // pills, the dropzone's Browse link); this clears 4.5:1 on every dark surface and tint.
-    --wui-dark-primary: #8097F0;
-    --wui-dark-primary-hover:#93A6F2;
+    // Primary as TEXT, rings and focus borders, and as the fill under near-black ink: the brand
+    // primary lifted until it clears 4.5:1 on every dark surface and tint (_variables.scss), so a
+    // brand set with wui-brand-primary reaches dark mode. A runtime override must clear the same.
+    --wui-dark-primary: #{wui-hex($wui-dark-primary)};
+    --wui-dark-primary-hover: #{wui-hex($wui-dark-primary-hover)};
 
     // Dark mode shadow remaps — lighter shadows (white ink) for visibility on dark surfaces.
     --wui-dark-shadow-thumb: 0 2px 6px rgba(255, 255, 255, 0.1);

package/scss/_variables.scss

@@ -123,13 +123,42 @@ $wui-ink-surfaces: (#FFFFFF, #F4F6F8, #F5F6FA, #F9FBFC);
     @return #0F0F0F;
 }
 
+// ---- The primary on a dark surface -----------------------------------
+// Dark mode paints text, rings, focus borders and the fill under the near-black label with one
+// colour, --wui-dark-primary. A brand primary is chosen as a light-mode fill and sinks into a dark
+// page (an indigo or royal blue measures under 3:1 there), so the dark primary is $primary mixed
+// with white, in 2% steps, until it clears 4.5:1 on every dark surface (the --wui-dark-bg-*
+// hexes), on its own 15% avatar tint, on the brand's 20% soft tint and under the near-black label.
+$wui-dark-ink-surfaces: (#0F1117, #0D0F15, #232733, #181B23);
+
+@function wui-dark-primary-worst($ink, $primary) {
+    $tints: (color.mix($ink, #181B23, 15%), color.mix($primary, #232733, 20%), #0F0F0F);
+    @return wui-worst-contrast($ink, list.join($wui-dark-ink-surfaces, $tints));
+}
+
+@function wui-dark-primary($primary) {
+    $ink: $primary;
+    $step: 0;
+    @while wui-dark-primary-worst($ink, $primary) < $wui-ink-floor and $step < 50 {
+        $step: $step + 1;
+        $ink: color.mix(#FFFFFF, $primary, $step * 2%);
+    }
+    @return rgb(
+        math.round(color.channel($ink, "red", $space: rgb)),
+        math.round(color.channel($ink, "green", $space: rgb)),
+        math.round(color.channel($ink, "blue", $space: rgb))
+    );
+}
+
 $wui-primary-ink: wui-primary-ink($primary) !default;
 $wui-primary-text: wui-on-primary($primary) !default;
+$wui-dark-primary: wui-dark-primary($primary) !default;
+$wui-dark-primary-hover: color.mix(#FFFFFF, $wui-dark-primary, 12%) !default;
 $link-color: $wui-primary-ink !default;
 
 // Brand helper — set a product's primary ONCE and have the theme-colour map
 // (so every .btn-primary / .bg-primary / .text-primary utility), $link-color,
-// $link-hover-color, the primary ink and the on-primary label follow, instead of
+// $link-hover-color, the primary ink, the on-primary label and the dark primary follow, instead of
 // overriding each in turn. Call it in the product's pre-bootstrap variables,
 // BEFORE `bootstrap/scss/bootstrap`, e.g.:
 //
@@ -144,6 +173,8 @@ $link-color: $wui-primary-ink !default;
     $theme-colors: map-merge($theme-colors, ("primary": $primary)) !global;
     $wui-primary-ink: wui-primary-ink($primary) !global;
     $wui-primary-text: wui-on-primary($primary) !global;
+    $wui-dark-primary: wui-dark-primary($primary) !global;
+    $wui-dark-primary-hover: color.mix(#FFFFFF, $wui-dark-primary, 12%) !global;
     $link-color: $wui-primary-ink !global;
     $link-hover-color: mix(black, $wui-primary-ink, 12%) !global;
 }

package/scss/_wui-aliases.scss

@@ -214,8 +214,8 @@
   --color-primary: var(--wui-dark-primary);
   --color-primary-hover: var(--wui-dark-primary-hover);
   --color-primary-soft: color-mix(in srgb, var(--wui-primary) 20%, transparent);
-  // Dark mode primary text: #fff on #6B83EC measures 3.5:1, below WCAG AA (4.5:1).
-  // Map to a near-black for safe contrast (6.9:1 on --wui-dark-primary) when text sits on primary fill.
+  // White fails on the lifted dark primary; the derivation in _variables.scss keeps this near-black
+  // at 4.5:1 or better on it.
   --color-primary-text: #0F0F0F;
   // The dark primary is already lifted to clear 4.5:1 on every dark surface and tint.
   --color-primary-ink: var(--wui-dark-primary);

package/scss/wui/_overlays.scss

@@ -238,6 +238,9 @@
 .wui-modal-footer {
     flex: 0 0 auto;
     display: flex;
+    // On a narrow phone, or with enlarged text spacing, a button that no longer fits moves to its
+    // own line instead of squeezing its label onto two.
+    flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
     gap: 10px;
@@ -645,7 +648,6 @@
 .wui-toast--warning {
     --wui-toast-accent: var(--color-warning);
 }
-.wui-toast--error,
 .wui-toast--danger {
     --wui-toast-accent: var(--color-danger);
 }

package/scss/wui/_shell.scss

@@ -769,11 +769,19 @@
         width: var(--app-sidebar-w);
         padding: 20px 16px;
         transform: translateX(-100%);
-        transition: transform 0.24s var(--wui-ease-out-quart);
+        // Hidden once the slide-out ends so a closed drawer's links leave the Tab order.
+        visibility: hidden;
+        transition:
+            transform 0.24s var(--wui-ease-out-quart),
+            visibility 0s linear 0.24s;
         box-shadow: var(--shadow-overlay-lg);
     }
     .app-shell.app-shell.mobile-open .app-sidebar {
         transform: translateX(0);
+        visibility: visible;
+        transition:
+            transform 0.24s var(--wui-ease-out-quart),
+            visibility 0s;
     }
     // The rail is a desktop affordance; on a drawer it makes no sense, so the
     // drawer always shows full labels even when the desktop state is collapsed.