@webority/theme 0.83.1 → 0.83.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.83.1",
+  "version": "0.83.3",
   "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": {
@@ -33,6 +33,7 @@
     "./css/runtime-brand": "./dist/webority-runtime-brand.css",
     "./purge-safelist.json": "./dist/purge-safelist.json",
     "./token-meanings.json": "./token-meanings.json",
+    "./postcss/forced-states": "./dist/postcss/forced-states.mjs",
     "./logos/*": "./logos/*",
     "./package.json": "./package.json"
   },
@@ -41,8 +42,12 @@
   },
   "sass": "index.scss",
   "style": "dist/webority-theme.css",
+  "dependencies": {
+    "postcss-selector-parser": "^7.1.7"
+  },
   "peerDependencies": {
-    "bootstrap": "5.3.3"
+    "bootstrap": "5.3.3",
+    "postcss": "^8.5.31"
   },
   "devDependencies": {
     "bootstrap": "5.3.3",

package/scss/_wui-aliases.scss

@@ -299,6 +299,11 @@
   --wui-primary-20: color-mix(in srgb, var(--wui-dark-primary) 26%, var(--wui-dark-bg-surface));
   --wui-primary-30: color-mix(in srgb, var(--wui-dark-primary) 40%, var(--wui-dark-bg-surface));
   --wui-primary-50: color-mix(in srgb, var(--wui-dark-primary) 62%, var(--wui-dark-bg-surface));
+  // Soft surfaces and the faintest danger tint follow dark mode as the primary tints do.
+  --wui-surface-mute: var(--wui-dark-bg-muted);
+  --wui-surface-soft: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
+  --wui-surface-violet-soft: color-mix(in srgb, var(--wui-dark-primary) 6%, var(--wui-dark-bg-surface));
+  --wui-danger-5: color-mix(in srgb, var(--wui-danger) 10%, var(--wui-dark-bg-surface));
 
   // Re-bridge the Bootstrap colour vars onto the (now dark) app tokens so the
   // named-var text/body/border utilities — .text-body-secondary, .text-muted,

package/scss/wui/_shell-parts.scss

@@ -40,6 +40,16 @@
     .app-shell:has(> .wui-tabbar) .app-footer {
         bottom: calc(var(--wui-tabbar-h) + env(safe-area-inset-bottom));
     }
+    .app-shell:has(> .wui-tabbar) > .wui-shell-launcher {
+        bottom: calc(var(--wui-tabbar-h) + 16px + env(safe-area-inset-bottom));
+    }
+}
+// A floating slot pinned to the bottom end corner over the page; on a phone the tab bar block above lifts it.
+.wui-shell-launcher {
+    position: fixed;
+    inset-inline-end: 24px;
+    bottom: calc(24px + env(safe-area-inset-bottom));
+    z-index: var(--wui-z-fixed);
 }
 .wui-tabbar-item {
     position: relative;

package/scss/wui/_shell.scss

@@ -757,6 +757,25 @@
         border-color 0.2s ease,
         box-shadow 0.2s ease;
 }
+.app-topbar[data-tone="primary"] {
+    background: var(--color-primary);
+    color: var(--color-on-primary-ink);
+}
+.app-topbar[data-tone="primary"] :is(.app-topbar-menu, .topbar-icon-btn, .wui-usermenu-trigger) {
+    color: inherit;
+}
+// The trigger's name, role and caret take the ink too. Scoped to the trigger, because the open
+// menu repeats the name and role on its surface, where the ink would be unreadable.
+.app-topbar[data-tone="primary"] .wui-usermenu-trigger :is(.wui-usermenu-name, .wui-usermenu-role, .wui-usermenu-caret) {
+    color: inherit;
+}
+.app-topbar[data-tone="primary"] .app-topbar-menu {
+    background: transparent;
+    border-color: color-mix(in srgb, var(--color-on-primary-ink) 60%, transparent);
+}
+.app-topbar[data-tone="primary"] :is(.app-topbar-menu, .topbar-icon-btn, .wui-usermenu-trigger):hover {
+    background: color-mix(in srgb, var(--color-on-primary-ink) 12%, transparent);
+}
 // Two groups: the leading one shrinks and ellipsises a long page title, the
 // trailing one is pinned so actions are never pushed off-screen.
 .app-topbar-start {