@webority/theme 0.7.2 → 0.7.3

package/index.scss

@@ -0,0 +1,15 @@
+// Default-brand full chain — compiled to dist/webority-theme.css (the RCL static
+// asset + the zero-toolchain convenience build). Consumers who want brand-exact
+// output import the partials individually with their OWN _variables before bootstrap.
+//
+// Load order is LOAD-BEARING — never reorder:
+//   variables (before bootstrap) -> bootstrap -> tokens -> aliases -> components -> wui-components
+// Flags are NOT imported here: _wui-components already imports them (the phone control needs
+// them), and legacy @import does not dedupe, so a second import emitted all ~245 flag classes
+// twice (≈490 selectors) and bloated the bundle.
+@import "scss/variables";
+@import "bootstrap/scss/bootstrap";
+@import "scss/tokens";
+@import "scss/wui-aliases";
+@import "scss/components";
+@import "scss/wui-components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.7.2",
+  "version": "0.7.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": {
@@ -13,6 +13,7 @@
     "directory": "packages/theme"
   },
   "files": [
+    "index.scss",
     "scss",
     "dist"
   ],

package/scss/_components.scss

@@ -121,6 +121,38 @@
     --bs-btn-disabled-border-color: var(--wui-danger-strong);
 }
 
+// Outline variants — tokenized like the solid buttons above so they follow a product's
+// RUNTIME --wui-* brand instead of Bootstrap's compile-time colours. Resting = brand outline
+// on a transparent fill; hover fills with the brand and flips the label to the on-brand text
+// token; active deepens to the pressed fill.
+.btn-outline-primary {
+    --bs-btn-color:                 var(--color-primary);
+    --bs-btn-border-color:          var(--color-primary);
+    --bs-btn-hover-color:           var(--wui-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);
+    --bs-btn-active-bg:             var(--wui-primary-pressed);
+    --bs-btn-active-border-color:   var(--wui-primary-pressed);
+    --bs-btn-disabled-color:        var(--color-primary);
+    --bs-btn-disabled-border-color: var(--color-primary);
+}
+
+// Outline danger uses the deepened --wui-danger-strong (5.80:1, carries white) that solid
+// .btn-danger uses, so an outline-danger hover reads identically to solid danger.
+.btn-outline-danger {
+    --bs-btn-color:                 var(--wui-danger-strong);
+    --bs-btn-border-color:          var(--wui-danger-strong);
+    --bs-btn-hover-color:           #fff;
+    --bs-btn-hover-bg:              var(--wui-danger-strong);
+    --bs-btn-hover-border-color:    var(--wui-danger-strong);
+    --bs-btn-active-color:          #fff;
+    --bs-btn-active-bg:             var(--wui-danger-strong-hover);
+    --bs-btn-active-border-color:   var(--wui-danger-strong-hover);
+    --bs-btn-disabled-color:        var(--wui-danger-strong);
+    --bs-btn-disabled-border-color: var(--wui-danger-strong);
+}
+
 // Themed disabled state (fleet default). Bootstrap's own disabled look is just the
 // variant's colour at --bs-btn-disabled-opacity (.65) — barely different from the active
 // button on a tinted brand palette. Give the ordinary case a real desaturated/muted look
@@ -148,6 +180,10 @@
 // sm/lg are re-asserted so they keep their own rung instead of the base value.
 .btn {
     --bs-btn-border-radius: var(--wui-radius);
+    // Smooth iOS-style corners so buttons match the squircle geometry every other
+    // control in the system already uses (inputs, selects, pills). Older browsers
+    // fall back to the plain border-radius arc — no breakage.
+    corner-shape: squircle;
 }
 .btn-sm,
 .btn-group-sm > .btn {
@@ -164,6 +200,10 @@
 // padding, an icon–label gap, a rounded hover highlight tinted with the brand,
 // and a danger variant so a row-action menu reads as one considered control.
 .dropdown-menu {
+    // Elevated surface (like .card), not Bootstrap's default page --bs-body-bg: otherwise the
+    // menu blends into a tinted page and, in dark mode, resolves to the page colour instead of
+    // the elevated surface.
+    --bs-dropdown-bg:               var(--color-surface);
     --bs-dropdown-min-width:        12rem;
     --bs-dropdown-padding-x:        0.375rem;
     --bs-dropdown-padding-y:        0.375rem;
@@ -232,7 +272,7 @@
 //
 // Reference values:
 //   - height       : 48px         (h-12 = 3rem)
-//   - radius       : 16px          (matches `.btn-squircle` literal)
+//   - radius       : 16px          (--wui-radius-xl)
 //   - font         : 14px / 500    (text-sm font-medium)
 //   - padding-x    : 20px (px-5)   default — Watch demo / outline-dark
 //                    Primary CTA overrides to 24px (px-6) inline
@@ -247,7 +287,7 @@
     --bs-btn-font-size:     0.875rem;   // 14px
     --bs-btn-font-weight:   500;
     --bs-btn-line-height:   1.25;
-    --bs-btn-border-radius: 16px;       // matches .btn-squircle exactly
+    --bs-btn-border-radius: var(--wui-radius-xl);   // 16px
     min-height: 3rem;                   // 48px (h-12)
 
 
@@ -546,16 +586,21 @@ button.wui-input-leading:focus-visible {
 }
 
 
-// ---- Squircle corners (iOS-style) -----------------------------------
-// Named opt-in utilities for a specific squircle radius without relying
-// on Bootstrap's $border-radius. A consuming product can layer a global
-// `corner-shape: squircle` rule on top (Chrome 138+ / Safari 16+; older
-// browsers fall back to the plain border-radius — no breakage).
-.btn-squircle {
-    border-radius: 16px;
+// ---- Radius step utilities ------------------------------------------
+// Every .btn is already a squircle (see base .btn above), so a button that
+// wants a larger corner only needs a bigger radius — hence .btn-radius-xl,
+// named for what it does (an xl radius step) rather than the corner shape.
+.btn-radius-xl {
+    --bs-btn-border-radius: var(--wui-radius-xl);   // 16px
 }
+
+// Generic (non-button) squircle rounding. Unlike .btn, an arbitrary element
+// gets no corner-shape from the base rules, so this utility sets it itself —
+// otherwise the name would lie and it'd render a plain 32px arc. Older
+// browsers fall back to that arc (Chrome 138+ / Safari 16+ for the squircle).
 .rounded-squircle {
     border-radius: 32px;
+    corner-shape: squircle;
 }
 
 

package/scss/_tokens.scss

@@ -51,6 +51,9 @@
     // Easing curves — match locked design's CSS / Framer Motion exports
     --wui-ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
     --wui-ease-ui:        cubic-bezier(0.32, 0.72, 0, 1);
+    // Elastic / spring — overshoots the target then settles (the y > 1 control point).
+    // Used by the tab ink-bar so a tab switch springs into place rather than sliding flat.
+    --wui-ease-elastic:   cubic-bezier(0.34, 1.56, 0.64, 1);
 
     // Elevation — exposes the Bootstrap $box-shadow* SCSS vars (set in
     // _variables.scss) as CSS vars so inline styles / JS / the portal

package/scss/_variables.scss

@@ -11,14 +11,16 @@
 // ---- Brand colors ---------------------------------------------------
 // Neutral indigo default. The full ramp lives in _tokens.scss as CSS
 // variables since Bootstrap only consumes the named theme colors.
-$primary:      #4F46E5;
-$secondary:    #4B5675;  // foreground-3 — quiet text + secondary buttons
-$success:      #04B440;
-$info:         #056EE9;
-$warning:      #DFA000;
-$danger:       #E82646;
-$light:        #F9FBFC;  // surface-mute
-$dark:         #071437;  // text-heading
+// `!default` so a product that sets these in its own _variables BEFORE importing this file
+// (the documented override path) wins — a plain assignment here would clobber the brand.
+$primary:      #4F46E5 !default;
+$secondary:    #4B5675 !default;  // foreground-3 — quiet text + secondary buttons
+$success:      #04B440 !default;
+$info:         #056EE9 !default;
+$warning:      #DFA000 !default;
+$danger:       #E82646 !default;
+$light:        #F9FBFC !default;  // surface-mute
+$dark:         #071437 !default;  // text-heading
 
 // Override `$theme-colors` so Bootstrap's $theme-colors map includes
 // our brand. Anything we add here gets utility classes generated

package/scss/wui/_controls.scss

@@ -363,7 +363,9 @@
     outline: none;
     background-color: var(--color-bg-muted);
     color: var(--color-text);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    // Full-strength brand border is the focus cue (no glow) — the prior 30% tint read at
+    // ~1.5:1, below WCAG 2.2 SC 1.4.11's 3:1 for a non-text focus indicator.
+    border-color: var(--color-primary);
     box-shadow: none;
 }
 // Textarea renders as .form-control.textarea (react-bootstrap). Match the
@@ -374,7 +376,9 @@ textarea.textarea.form-control:hover:not(:focus):not(:disabled):not([readonly])
 }
 textarea.textarea:focus {
     outline: none;
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    // Full-strength brand border is the focus cue (no glow) — the prior 30% tint read at
+    // ~1.5:1, below WCAG 2.2 SC 1.4.11's 3:1 for a non-text focus indicator.
+    border-color: var(--color-primary);
     box-shadow: none;
 }
 .input::placeholder,
@@ -995,6 +999,7 @@ wui-select[compact] {
     color: var(--color-success-text);
     border-color: transparent;
 }
+.badge-warning,
 .badge-warn {
     background: var(--color-warning-soft);
     color: var(--color-warning-text);

package/scss/wui/_media.scss

@@ -494,6 +494,30 @@
 .file-preview:hover .file-preview-img {
     transform: scale(1.03);
 }
+// Non-image single file: a centered file-type icon + name filling the same shell as the image
+// thumbnail, so a PDF/doc doesn't render as a broken <img>.
+.file-preview-file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    color: var(--color-text-subtle);
+    background: var(--color-bg-muted);
+}
+.file-preview-file-name {
+    max-width: 100%;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--color-text);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .file-preview-overlay {
     position: absolute;
     inset: 0;

package/scss/wui/_navigation.scss

@@ -108,28 +108,58 @@
 // The tab strip both surfaces render. React drives it as a controlled strip and
 // Razor additionally renders Bootstrap panels beneath it, but the strip markup —
 // and therefore the look — is identical.
+//
+// The active state is an "ink bar" (.app-tab-indicator): one element per strip that
+// SLIDES between tabs with an elastic overshoot (--wui-ease-elastic). It is JS-measured
+// — variable-width tabs cannot be positioned in pure CSS — so until the JS wires the
+// strip (`[data-wui-tabs]`) the active tab keeps a plain static underline as a fallback,
+// and no-JS / first paint never show a bare strip.
+
+// Optional overflow wrapper: the scroll chevrons live HERE, outside the scrolling strip,
+// so they stay pinned while the tabs scroll under them.
+.app-tabs-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
 .app-tabs {
+    position: relative;
     display: flex;
     align-items: center;
     gap: 2px;
     border-bottom: 1px solid var(--color-border);
     overflow-x: auto;
     scrollbar-width: none;
-    // The React AppTabs renders a react-bootstrap <Nav>, so the element also
-    // carries `.nav`, which declares `flex-wrap: wrap`. Both are (0,1,0), so
-    // today this wins only because the theme is imported after Bootstrap —
-    // see the doubled-selector rule below, which does not depend on that.
     flex-wrap: nowrap;
+    // Auto-scrolling the active tab into view (and the chevrons) glides rather than jumps.
+    scroll-behavior: smooth;
 }
-// Doubled to (0,2,0) so the tab strip keeps scrolling even if a consumer loads
-// Bootstrap after the theme, which would otherwise let `.nav` win on order.
+// Doubled to (0,2,0) so the strip keeps scrolling even if a consumer loads Bootstrap
+// after the theme, which would otherwise let `.nav`'s flex-wrap:wrap win on order.
 .app-tabs.app-tabs {
     flex-wrap: nowrap;
 }
 .app-tabs::-webkit-scrollbar {
     display: none;
 }
+// When the wrapper reports overflow, fade the clipped edge(s) so cut tabs read as
+// "more this way" rather than an abrupt crop. Masked on the strip (the scroller) itself.
+.app-tabs-wrap.is-overflow-start .app-tabs {
+    mask-image: linear-gradient(90deg, transparent, #000 28px);
+}
+.app-tabs-wrap.is-overflow-end .app-tabs {
+    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
+}
+.app-tabs-wrap.is-overflow-start.is-overflow-end .app-tabs {
+    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
+}
+
 .app-tab {
+    position: relative;
+    // Above the pills ink bar, which sits at z-index 0.
+    z-index: 1;
     display: inline-flex;
     align-items: center;
     gap: 8px;
@@ -155,11 +185,17 @@
 }
 .app-tab.active {
     color: var(--color-primary);
+    // Static fallback underline (no-JS / first paint); the ink bar takes over once wired.
     border-bottom-color: var(--color-primary);
     // 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;
 }
+// Once JS wires the ink bar it owns the underline — drop the per-tab fallback so the
+// two never double up during a slide.
+.app-tabs[data-wui-tabs] .app-tab.active {
+    border-bottom-color: transparent;
+}
 .app-tab:disabled {
     color: var(--color-text-subtle);
     cursor: not-allowed;
@@ -180,10 +216,41 @@
     color: var(--color-danger-text);
     border-bottom-color: var(--color-danger);
 }
+.app-tabs[data-wui-tabs] .app-tab.danger.active {
+    border-bottom-color: transparent;
+}
 .app-tab.danger .app-tab-count {
     background: var(--color-danger-soft);
     color: var(--color-danger-text);
 }
+
+// ── The sliding ink bar ──
+// Positioned from JS-set custom props: --wui-tab-x/-w (horizontal), --wui-tab-y/-h
+// (vertical). Hidden until the strip is wired AND measured, so it never flashes at 0,0.
+.app-tab-indicator {
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    height: 2px;
+    width: var(--wui-tab-w, 0);
+    background: var(--color-primary);
+    border-radius: 2px;
+    transform: translateX(var(--wui-tab-x, 0));
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        transform 0.42s var(--wui-ease-elastic),
+        width 0.42s var(--wui-ease-elastic),
+        opacity 0.15s ease;
+}
+.app-tabs[data-wui-tabs] .app-tab-indicator {
+    opacity: 1;
+}
+// A destructive active tab tints the bar red too (attribute set by the driver).
+.app-tabs[data-active-danger] .app-tab-indicator {
+    background: var(--color-danger);
+}
+
 // Trailing count pill.
 .app-tab-count {
     display: inline-flex;
@@ -221,13 +288,31 @@
     color: var(--color-info-text);
 }
 
+// ── Sizes ──
+.app-tabs-sm .app-tab {
+    padding: 6px 10px;
+    gap: 6px;
+    font-size: 13px;
+}
+.app-tabs-lg .app-tab {
+    padding: 14px 18px;
+    font-size: 15px;
+}
+
+// ── Fitted: tabs share the width equally (no scroll). ──
+.app-tabs-fitted .app-tab {
+    flex: 1 1 0;
+    justify-content: center;
+}
+
 // Wrapper for a self-contained tabs widget (strip + panels), as <app-tabs>
 // renders server-side. React composes the strip and its panels itself.
 .app-tabs-group > .tab-content {
     padding-top: 16px;
 }
 
-// Pills variant — a segmented control rather than an underline.
+// Pills variant — a segmented control rather than an underline; the ink bar becomes
+// the moving pill behind the active tab.
 .app-tabs-pills {
     gap: 4px;
     border-bottom: 0;
@@ -237,9 +322,104 @@
     margin-bottom: 0;
     border-radius: var(--radius);
 }
+// Fallback fill until the moving pill is wired.
 .app-tabs-pills .app-tab.active {
     background: var(--color-primary-soft);
 }
+.app-tabs-pills[data-wui-tabs] .app-tab.active {
+    background: transparent;
+}
+.app-tabs-pills .app-tab-indicator {
+    top: 0;
+    bottom: 0;
+    height: auto;
+    z-index: 0;
+    background: var(--color-primary-soft);
+    border-radius: var(--radius);
+}
+.app-tabs-pills[data-active-danger] .app-tab-indicator {
+    background: var(--color-danger-soft);
+}
+
+// ── Vertical orientation — a side rail; the ink bar becomes a moving left edge. ──
+.app-tabs-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    border-bottom: 0;
+    border-left: 1px solid var(--color-border);
+    overflow-x: visible;
+    overflow-y: auto;
+}
+.app-tabs-vertical .app-tab {
+    justify-content: flex-start;
+    border-bottom: 0;
+    border-left: 2px solid transparent;
+    margin-bottom: 0;
+    margin-left: -1px;
+}
+.app-tabs-vertical .app-tab.active {
+    border-left-color: var(--color-primary);
+    border-bottom-color: transparent;
+}
+.app-tabs-vertical[data-wui-tabs] .app-tab.active {
+    border-left-color: transparent;
+}
+.app-tabs-vertical .app-tab-indicator {
+    left: -1px;
+    top: 0;
+    bottom: auto;
+    width: 2px;
+    height: var(--wui-tab-h, 0);
+    transform: translateY(var(--wui-tab-y, 0));
+    transition:
+        transform 0.42s var(--wui-ease-elastic),
+        height 0.42s var(--wui-ease-elastic),
+        opacity 0.15s ease;
+}
+// Vertical pills: the moving pill fills the row width.
+.app-tabs-vertical.app-tabs-pills .app-tab-indicator {
+    left: 0;
+    width: 100%;
+}
+
+// ── Scroll chevrons (overflow affordance) — shown by JS only when that side overflows. ──
+.app-tabs-scroll-btn {
+    flex: none;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    cursor: pointer;
+}
+.app-tabs-scroll-btn:hover {
+    color: var(--color-text);
+    background: var(--color-bg-muted);
+}
+.app-tabs-scroll-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+.app-tabs-wrap.is-overflow-start .app-tabs-scroll-btn.prev,
+.app-tabs-wrap.is-overflow-end .app-tabs-scroll-btn.next {
+    display: inline-flex;
+}
+
+// ── Motion off — no slide, no overshoot; the bar just fades in place. ──
+@media (prefers-reduced-motion: reduce) {
+    .app-tab-indicator,
+    .app-tabs-vertical .app-tab-indicator {
+        transition: opacity 0.15s ease;
+    }
+    .app-tabs {
+        scroll-behavior: auto;
+    }
+}
 
 // ── Search field ──
 // The search control both surfaces render: a rounded field with a leading