@webority/theme 0.0.10 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.0.10",
+  "version": "0.2.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": {
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "bootstrap": "5.3.3",
+    "country-flag-icons": "^1.6.20",
     "sass": "~1.77.8"
   },
   "scripts": {

package/scss/_components.scss

@@ -1,5 +1,5 @@
 // =====================================================================
-// Lumex — Shared custom component CSS.
+// Webority UI — shared custom component CSS.
 // Imported AFTER Bootstrap. Anything that needs to render identically
 // on the Razor marketing site AND the React customer portal lives here.
 // Per-project styling (page layouts, route-specific tweaks) stays in
@@ -7,13 +7,6 @@
 // =====================================================================
 
 
-// ---- Brand wordmark / logo ------------------------------------------
-.lumex-logo {
-    height: 2rem;
-    width: auto;
-}
-
-
 // ---- Section helpers ------------------------------------------------
 // Marketing + portal both use vertically-padded sections with the
 // brand's spacing rhythm. Bootstrap's py-* gets you part-way; these
@@ -72,14 +65,23 @@
 // ---- Button polish (used by both Razor + React) ---------------------
 // Flat buttons — no drop shadow. Active-press feedback (1px nudge) is
 // retained because it's a tactile signal, not a depth cue.
+// Default-size buttons match the shared control height so a button next to an
+// input in a filter bar or form row lines up exactly. sm/lg opt out — they are
+// deliberately a different size.
+.btn:not(.btn-sm):not(.btn-lg):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--wui-control-height);
+}
+
 .btn-primary {
-    // Pin hover/active to the reference's `--accent-dark` (#2440C4).
-    // Bootstrap's auto-shaded $primary would compute a slightly different
-    // shade, drifting off-spec by a few hex points.
-    --bs-btn-hover-bg:            #2440C4;
-    --bs-btn-hover-border-color:  #2440C4;
-    --bs-btn-active-bg:           #2440C4;
-    --bs-btn-active-border-color: #2440C4;
+    // Pin hover/active to the pressed-primary token so a rebrand tracks
+    // automatically instead of Bootstrap auto-shading $primary off-spec.
+    --bs-btn-hover-bg:            var(--wui-primary-pressed);
+    --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);
     &:active:not(:disabled) {
         transform: translateY(1px);
     }
@@ -139,17 +141,17 @@
 // (src/components/marketing/brand/watch-demo-button.tsx):
 //   - border  : rgba(13, 24, 43, 0.15)  (foreground/15 in marketing-root)
 //   - bg      : rgba(255, 255, 255, 0.6) (surface/60)
-//   - text    : #0d182b                  (text-foreground in marketing-root)
+//   - text    : --wui-text-heading      (text-foreground in marketing-root)
 //   - blur    : 4px                      (backdrop-blur-sm)
 //   - hover bg: #ffffff                  (hover:bg-surface = full opacity)
 .btn-ghost-dark {
-    --bs-btn-color:               #0d182b;
+    --bs-btn-color:               var(--wui-text-heading);
     --bs-btn-bg:                  rgba(255, 255, 255, 0.60);
     --bs-btn-border-color:        rgba(13, 24, 43, 0.15);
-    --bs-btn-hover-color:         #0d182b;
+    --bs-btn-hover-color:         var(--wui-text-heading);
     --bs-btn-hover-bg:            #ffffff;
     --bs-btn-hover-border-color:  rgba(13, 24, 43, 0.20);
-    --bs-btn-active-color:        #0d182b;
+    --bs-btn-active-color:        var(--wui-text-heading);
     --bs-btn-active-bg:           #ffffff;
     --bs-btn-active-border-color: rgba(13, 24, 43, 0.20);
     backdrop-filter: blur(4px);
@@ -170,10 +172,10 @@
 }
 
 
-// ---- Inputs (Lumex canonical) ---------------------------------------
+// ---- Inputs ---------------------------------------------------------
 // 5 locked states — default / hover / focus / disabled / error —
 // matching the reference `<Input>` component. Bootstrap drives the base
-// look via $input-* vars in _lumex-variables.scss; these blocks add the
+// look via $input-* vars in _variables.scss; these blocks add the
 // hover-border-darken cue and the leading/trailing-slot wrapper.
 //
 // The error state is driven by `aria-invalid="true"` (NOT by Bootstrap's
@@ -219,16 +221,16 @@
 // / error states are visible regardless of which child has focus.
 //
 // Usage:
-//   <div class="lumex-input-group">
-//     <span class="lumex-input-leading"><i class="bi bi-currency-dollar"></i></span>
+//   <div class="wui-input-group">
+//     <span class="wui-input-leading"><i class="bi bi-currency-dollar"></i></span>
 //     <input type="text" class="form-control" placeholder="0.00" />
 //   </div>
 //
-//   <div class="lumex-input-group">
+//   <div class="wui-input-group">
 //     <input type="password" class="form-control" placeholder="Password" />
-//     <button type="button" class="lumex-input-trailing"><i class="bi bi-eye"></i></button>
+//     <button type="button" class="wui-input-trailing"><i class="bi bi-eye"></i></button>
 //   </div>
-.lumex-input-group {
+.wui-input-group {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -236,30 +238,30 @@
     height: calc(2.5rem + 2px);          // 40px box + 1px border each side
     background: var(--wui-bg-light, #FFFFFF);
     border: 1px solid var(--bs-border-color);
-    border-radius: 0.625rem;             // 10px — matches the bare input radius
+    border-radius: var(--radius);        // matches the bare input radius
     transition: border-color 0.15s ease;
 
 
 }
-.lumex-input-group:hover:not(:focus-within):not(.is-disabled) {
+.wui-input-group:hover:not(:focus-within):not(.is-disabled) {
     border-color: rgba(120, 130, 157, 0.6);
 }
-.lumex-input-group:focus-within {
-    border-color: var(--wui-primary, #2F50E4);
+.wui-input-group:focus-within {
+    border-color: var(--wui-primary);
 }
-.lumex-input-group.is-disabled,
-.lumex-input-group:has(input:disabled) {
-    background: var(--wui-bg-muted, #F5F6FA);
+.wui-input-group.is-disabled,
+.wui-input-group:has(input:disabled) {
+    background: var(--wui-bg-muted);
     cursor: not-allowed;
     border-color: var(--bs-border-color);
 }
-.lumex-input-group.has-error,
-.lumex-input-group:has(input[aria-invalid="true"]) {
+.wui-input-group.has-error,
+.wui-input-group:has(input[aria-invalid="true"]) {
     border-color: var(--bs-danger);
 }
 
 // Strip the bare input's own chrome — the wrapper carries it all.
-.lumex-input-group > .form-control {
+.wui-input-group > .form-control {
     flex: 1 1 auto;
     min-width: 0;
     height: 100%;
@@ -270,8 +272,8 @@
     box-shadow: none !important;
     border-radius: 0;
 }
-.lumex-input-group > .form-control:focus,
-.lumex-input-group > .form-control:hover {
+.wui-input-group > .form-control:focus,
+.wui-input-group > .form-control:hover {
     border: 0;
     box-shadow: none !important;
     background: transparent;
@@ -279,12 +281,12 @@
 
 // Leading + trailing slots — flex children that hold icons or buttons.
 // Default muted color, inherits hover/focus state from the wrapper.
-.lumex-input-leading,
-.lumex-input-trailing {
+.wui-input-leading,
+.wui-input-trailing {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--wui-text-3, #78829D);
+    color: var(--wui-text-3);
     flex-shrink: 0;
     font-size: 1rem;
     line-height: 1;
@@ -293,8 +295,8 @@
 
 // When the trailing slot is a button (clear, toggle, etc.), reset
 // button chrome and re-enable pointer events.
-button.lumex-input-trailing,
-button.lumex-input-leading {
+button.wui-input-trailing,
+button.wui-input-leading {
     background: transparent;
     border: 0;
     padding: 0;
@@ -302,12 +304,12 @@ button.lumex-input-leading {
     cursor: pointer;
     transition: color 0.15s ease;
 }
-button.lumex-input-trailing:hover,
-button.lumex-input-leading:hover {
-    color: var(--wui-text-1, #252F4A);
+button.wui-input-trailing:hover,
+button.wui-input-leading:hover {
+    color: var(--wui-text-1);
 }
-button.lumex-input-trailing:focus-visible,
-button.lumex-input-leading:focus-visible {
+button.wui-input-trailing:focus-visible,
+button.wui-input-leading:focus-visible {
     outline: none;
     color: var(--wui-primary);
     border-radius: 9999px;
@@ -356,38 +358,15 @@ button.lumex-input-leading:focus-visible {
 
 
 // ---- Squircle corners (iOS-style) -----------------------------------
-// `corner-shape: squircle` renders a smoother continuous curve instead
-// of a simple circular arc — the same effect iOS app icons use. Mirrors
-// the locked design's global `* { corner-shape: squircle }` rule.
-// Browser support: Chrome 138+ and Safari 16+ with -webkit- prefix.
-// Older browsers ignore the property and fall back to standard
-// border-radius — no breakage.
-//
-// Apply by default to EVERY element, then explicitly opt
-// `.rounded-circle` and `.rounded-pill` back to `round` — squircle on
-// a 50% / 9999px radius reads as a subtly rounded square rather than a
-// true circle/pill.
-* {
-
-
-}
-.rounded-circle,
-.rounded-pill {
-
-
-}
-
-// Named opt-in utilities — preserved for places where authors want a
-// specific squircle radius without relying on Bootstrap's $border-radius.
+// 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;
-
-
 }
 .rounded-squircle {
     border-radius: 32px;
-
-
 }
 
 
@@ -396,7 +375,7 @@ button.lumex-input-leading:focus-visible {
 .hero-wash {
     background:
         radial-gradient(80% 50% at 50% 0%,
-            rgba(47, 80, 228, 0.08), transparent 70%),
+            color-mix(in srgb, var(--wui-primary) 8%, transparent), transparent 70%),
         var(--wui-bg-elevated);
 }
 
@@ -592,7 +571,7 @@ body {
 }
 * {
     scrollbar-width: thin;
-    scrollbar-color: rgba(145, 158, 171, 0.45) transparent;
+    scrollbar-color: var(--wui-scrollbar) transparent;
 }
 *::-webkit-scrollbar {
     width: 8px;
@@ -602,7 +581,7 @@ body {
     background: transparent;
 }
 *::-webkit-scrollbar-thumb {
-    background-color: rgba(145, 158, 171, 0.45);
+    background-color: var(--wui-scrollbar);
     border-radius: 9999px;
     border: 2px solid transparent;
     background-clip: padding-box;
@@ -611,11 +590,11 @@ body {
     transition: background-color 220ms ease;
 }
 *::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(145, 158, 171, 0.65);
+    background-color: var(--wui-scrollbar-hover);
     background-clip: padding-box;
 }
 *::-webkit-scrollbar-thumb:active {
-    background-color: rgba(145, 158, 171, 0.85);
+    background-color: var(--wui-scrollbar-active);
     background-clip: padding-box;
 }
 *::-webkit-scrollbar-corner {
@@ -625,10 +604,10 @@ body {
 // While the page is actively scrolling, give the thumb a slight extra
 // pop so the user can track its position more easily.
 html.is-scrolling * {
-    scrollbar-color: rgba(145, 158, 171, 0.65) transparent;
+    scrollbar-color: var(--wui-scrollbar-hover) transparent;
 }
 html.is-scrolling *::-webkit-scrollbar-thumb {
-    background-color: rgba(145, 158, 171, 0.65);
+    background-color: var(--wui-scrollbar-hover);
 }
 
 // Utility: completely hide a scrollbar (e.g., for marquee/horizontal