@webority/theme 0.7.1 → 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.1",
+  "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

@@ -49,8 +49,11 @@
 // ---- Display heading -------------------------------------------------
 // Bootstrap's .display-1..6 ladder skews bigger than our locked design.
 // .h-display drops in where the marketing hero needs the locked
-// font-weight 500 + tight letter-spacing.
+// font-weight 500 + tight letter-spacing. font-family reads --wui-font-display
+// so a product can swap in a serif/brand display face by overriding just that
+// token (default: the same body stack .font-display already uses).
 .h-display {
+    font-family: var(--wui-font-display, var(--bs-body-font-family));
     font-weight: 500;
     letter-spacing: -0.03em;
     line-height: 1.05;
@@ -89,6 +92,14 @@
     --bs-btn-hover-border-color:  var(--wui-primary-pressed);
     --bs-btn-active-bg:           var(--wui-primary-pressed);
     --bs-btn-active-border-color: var(--wui-primary-pressed);
+    // Bootstrap computes this label colour at SCSS compile time from the library's
+    // default $primary, so it can never react to a product overriding --wui-primary as a
+    // runtime CSS var. Routing it through the token makes a light-primary brand's
+    // --wui-primary-text override reach the button.
+    --bs-btn-color:               var(--wui-primary-text);
+    --bs-btn-hover-color:         var(--wui-primary-text);
+    --bs-btn-active-color:        var(--wui-primary-text);
+    --bs-btn-disabled-color:      var(--wui-primary-text);
 }
 
 .btn-danger {
@@ -110,6 +121,56 @@
     --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
+// instead, reusing the same tokens .input:disabled already uses so a disabled button and
+// a disabled field read as the same state.
+//
+// Excludes .btn-primary and .btn-danger, which already theme their OWN disabled state
+// above (a faded version of their own fill, driven by --bs-btn-disabled-*) — :not() keeps
+// this rule from fighting theirs rather than relying on source order.
+.btn:disabled:not(.btn-primary):not(.btn-danger),
+.btn.disabled:not(.btn-primary):not(.btn-danger) {
+    background-color: var(--color-bg-muted);
+    border-color: var(--color-border);
+    color: var(--color-text-subtle);
+    opacity: 1;
+    cursor: not-allowed;
+}
+
 
 // ---- Component radii from tokens ------------------------------------
 // .btn/.card/.input capture Bootstrap's compiled $*-border-radius (the library
@@ -119,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 {
@@ -135,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;
@@ -203,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
@@ -218,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)
 
 
@@ -265,6 +334,30 @@
 }
 
 
+// ---- Ghost button (transparent, brand-tinted hover) ------------------
+// A real ghost button: transparent at rest (no fill, no border), current text colour;
+// only the background lights up — a soft brand tint, the same recipe as a
+// .dropdown-item's hover — on hover/active. AppButton's `ghost` variant emits this class
+// on both surfaces; distinct from Bootstrap's .btn-link, which reads as a hyperlink
+// (underlined, link-coloured text) rather than a quiet button. Marketing anchors reach
+// for it directly for the same look on a plain <a>.
+//
+// No .btn-ghost-sm/-lg rungs: unlike .btn-pill (a bespoke marketing sizing system), this
+// is an ordinary .btn variant, so it sizes the same way .btn-primary/.btn-danger do —
+// Bootstrap's own .btn-sm/.btn-lg.
+.btn-ghost {
+    --bs-btn-color:               var(--color-text);
+    --bs-btn-bg:                  transparent;
+    --bs-btn-border-color:        transparent;
+    --bs-btn-hover-color:         var(--color-text);
+    --bs-btn-hover-bg:            var(--wui-primary-5);
+    --bs-btn-hover-border-color:  transparent;
+    --bs-btn-active-color:        var(--color-text);
+    --bs-btn-active-bg:           var(--wui-primary-10);
+    --bs-btn-active-border-color: transparent;
+}
+
+
 // ---- Card "lifted" (shadowless) -------------------------------------
 // Previously a soft drop-shadow card; now flat. The `.card-lifted`
 // class is preserved so existing call sites don't break — it now
@@ -493,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
@@ -119,6 +122,15 @@
     --wui-container-max: 1512px;
     --wui-container-pad: 24px;
 
+    // ---- Primary "on-fill" text --------------------------------------
+    // Unlike the semantic -text tokens below (a legible STANDALONE colour derived
+    // from a fill, for using the status colour AS body text), this is the text/icon
+    // colour to use ON TOP OF a solid --wui-primary fill — a selected datepicker day,
+    // an active pagination page, a checked segmented option, .btn-primary's label.
+    // Default assumes primary is dark enough for white; a brand with a light primary
+    // overrides this to a dark value instead.
+    --wui-primary-text: #fff;
+
     // ---- Semantic status ramps -------------------------------------
     // Canonical info/success/warning/danger scales: `active` (text/icon on
     // light), the base `100` (vivid fills/dots), then tints 50/30/20/10/5.
@@ -189,6 +201,38 @@
     --wui-dark-text-subtle:  #8a90a0;
     --wui-dark-primary:      #6B83EC;
     --wui-dark-primary-hover:#93A6F2;
+
+    // ---- Fluid type scale --------------------------------------------
+    // clamp(min, preferred, max) so type scales smoothly between viewports instead of
+    // stepping at Bootstrap's breakpoints. `base` sits close to Bootstrap's own 1rem body
+    // size; every other step is derived at a consistent ratio, up and down. Additive only —
+    // nothing in the shared theme consumes these yet, a product opts in per element.
+    --wui-fs-xs:   clamp(0.75rem,  0.73rem + 0.1vw,  0.8125rem);
+    --wui-fs-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
+    --wui-fs-base: clamp(0.95rem,  0.9rem + 0.25vw,  1.05rem);
+    --wui-fs-lg:   clamp(1.05rem,  0.98rem + 0.35vw, 1.25rem);
+    --wui-fs-xl:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);
+    --wui-fs-2xl:  clamp(1.5rem,   1.3rem + 1vw,     2rem);
+    --wui-fs-3xl:  clamp(1.875rem, 1.5rem + 1.75vw,  2.75rem);
+
+    // ---- Display font slot --------------------------------------------
+    // A dedicated slot for a display/heading typeface, kept separate from
+    // $font-family-base so a product can point ONLY its display headings (.h-display) at a
+    // serif or another brand face by overriding this one token, without touching body copy.
+    // Defaults to the same stack .font-display already uses.
+    --wui-font-display: var(--bs-body-font-family);
+
+    // ---- Z-index scale -------------------------------------------------
+    // Bootstrap's own ladder ($zindex-dropdown etc.), exposed as CSS vars so a component
+    // or a consuming product can layer against the same scale instead of inventing values.
+    --wui-z-dropdown:       1000;
+    --wui-z-sticky:         1020;
+    --wui-z-fixed:          1030;
+    --wui-z-modal-backdrop: 1040;
+    --wui-z-modal:          1050;
+    --wui-z-popover:        1060;
+    --wui-z-tooltip:        1070;
+    --wui-z-toast:          1080;
 }
 
 // Bootstrap md / xl (not invented px)

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-aliases.scss

@@ -36,6 +36,9 @@
   --color-primary:       var(--wui-primary);
   --color-primary-hover: var(--wui-primary-pressed);
   --color-primary-soft:  var(--wui-primary-10);
+  // Text/icon colour for content sitting ON a solid --color-primary fill — see
+  // --wui-primary-text for why this is a different axis from the -text tokens below.
+  --color-primary-text:  var(--wui-primary-text);
 
   // Semantic status ramps
   --color-info-active:    var(--wui-info-active);

package/scss/_wui-components.scss

@@ -34,6 +34,7 @@
 @import "wui/disclosure";
 @import "wui/display";
 @import "wui/flow";
+@import "wui/scrollbar";
 
 // Flags belong here because <wui-phone> cannot render without them.
 //

package/scss/wui/_choice.scss

@@ -415,6 +415,11 @@
     color: var(--color-primary);
     font-weight: 500;
 }
+// allow-custom's freeform row — reads as an action ("Add "…"") rather than a listed value.
+.search-select-option-custom {
+    font-style: italic;
+    color: var(--color-primary);
+}
 .search-select-empty {
     padding: 12px 10px;
     font-size: 13px;
@@ -627,7 +632,7 @@ button.datepicker-month:hover {
 }
 .datepicker-day.is-selected {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .datepicker-day:disabled {
@@ -696,7 +701,7 @@ button.datepicker-month:hover {
 }
 .datepicker-cell.is-selected {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .datepicker-cell:disabled {
@@ -842,7 +847,7 @@ button.datepicker-month:hover {
 .datepicker-day.is-range-start,
 .datepicker-day.is-range-end {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .daterange-hint {

package/scss/wui/_controls.scss

@@ -348,9 +348,12 @@
     resize: none;
     overflow: hidden;
 }
-.input:hover:not(:focus):not(:disabled),
-.select:hover:not(:focus):not(:disabled),
-.textarea:hover:not(:focus):not(:disabled) {
+// The `.error` / `.is-invalid` / `[aria-invalid="true"]` guards keep an invalid field's
+// danger border visible on hover — without them the hover rule repaints it grey and the
+// error signal disappears the moment the cursor passes over the field.
+.input:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
+.select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
+.textarea:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error) {
     background-color: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
@@ -360,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
@@ -371,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,
@@ -992,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/_data.scss

@@ -407,6 +407,46 @@
     cursor: not-allowed;
 }
 
+// Numbered mode (mode="numbered") — windowed page buttons sitting between the prev/next
+// arrows in .tpg-nav, same 32px circular hit target as .tpg-arrow.
+.tpg-page {
+    display: grid;
+    place-items: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    border-radius: 50%;
+    font-size: 13px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+        background 0.14s ease,
+        color 0.14s ease;
+}
+.tpg-page:hover:not(.is-active) {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+}
+.tpg-page.is-active {
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+    cursor: default;
+}
+.tpg-ellipsis {
+    display: grid;
+    place-items: center;
+    min-width: 24px;
+    height: 32px;
+    color: var(--color-text-subtle);
+    font-size: 13px;
+    user-select: none;
+}
+
 // Horizontal scroll guard + flush-fit inside a card. Wrapping the table here
 // also stops `.card > .table` header-corner rounding from applying mid-card.
 .table-wrap {

package/scss/wui/_display.scss

@@ -31,7 +31,9 @@
 .kpi-label {
     font-size: 13px;
     font-weight: 500;
-    color: var(--color-text-subtle);
+    // --color-text-muted (not -subtle): -subtle is ~4.5:1 on white and dips below AA on the
+    // filled/accent variant's tinted surface. -muted clears AA on every kpi variant.
+    color: var(--color-text-muted);
 }
 .kpi-value {
     margin-top: 6px;
@@ -76,6 +78,18 @@
     margin-top: 2px;
 }
 
+// Surface variants — plain (above) is the bordered card; these swap the fill and drop the
+// border so a dashboard can mix a KPI strip with the surrounding card without every tile
+// drawing its own outline.
+.kpi.kpi-filled {
+    border-color: transparent;
+    background: var(--color-bg-subtle);
+}
+.kpi.kpi-accent {
+    border-color: transparent;
+    background: var(--color-primary-soft);
+}
+
 // A row of tiles. Wraps rather than scrolls — a KPI strip that scrolls hides numbers.
 .kpi-row {
     display: grid;
@@ -213,11 +227,34 @@ a.info-row:hover .info-value {
 .segmented-option:hover {
     color: var(--color-text);
 }
+// A per-option sub-label under the main text — optional, so a segment without one keeps the
+// plain single-line layout above untouched.
+.segmented-option-text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+    line-height: 1.2;
+}
+.segmented-option-label {
+    font: inherit;
+    color: inherit;
+}
+.segmented-option-note {
+    font-size: 10px;
+    font-weight: 400;
+    // Inherits the option's current text colour (muted, hover, or white-on-checked) rather
+    // than a fixed token, so it always matches without a separate state per variant. No opacity
+    // muting — that dropped the sub-label below AA on an unchecked option; the 10px size already
+    // distinguishes it from the label.
+    color: currentColor;
+}
 .segmented-option:has(.segmented-input:checked) {
     background: var(--color-primary);
-    // Fixed white, not a token: the pill is always the brand fill, so its label
-    // must contrast with that fill and not with the page.
-    color: #fff;
+    // Token, not fixed white: the pill is always the brand fill, so its label must
+    // contrast with THAT fill, not the page — a light-primary brand overrides
+    // --wui-primary-text to a dark value and this follows automatically.
+    color: var(--color-primary-text);
 }
 // The ring is drawn on the label because the input it belongs to has no box.
 .segmented-option:has(.segmented-input:focus-visible) {

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;