@webority/theme 0.0.9 → 0.2.0

package/scss/_tokens.scss

@@ -1,21 +1,22 @@
 // =====================================================================
-// Lumex — Custom CSS variables.
+// Webority UI — custom CSS variables.
 // Things Bootstrap doesn't natively have a slot for: extended brand
 // ramps, gradient definitions, easing curves, etc. Imported AFTER
 // `bootstrap/scss/bootstrap` so we don't clobber its computed values.
 // =====================================================================
 
 :root {
-    // Extended Lumex primary-blue ramp — used for tints, washes, hovers.
-    --wui-primary:          #2F50E4;
-    --wui-primary-hover:    #4A66E8;
-    --wui-primary-pressed:  #2440C4;
-    --wui-primary-50:       #97A8F2;
-    --wui-primary-30:       #C1CBF7;
-    --wui-primary-20:       #D5DCFA;
-    --wui-primary-15:       #E0E5FB;
-    --wui-primary-10:       #EAEEFC;
-    --wui-primary-5:        #F5F6FE;
+    // Extended primary ramp — neutral indigo default; used for tints,
+    // washes, hovers. Products override --wui-primary* with their brand.
+    --wui-primary:          #4F46E5;
+    --wui-primary-hover:    #6366F1;
+    --wui-primary-pressed:  #4338CA;
+    --wui-primary-50:       #818CF8;
+    --wui-primary-30:       #A5B4FC;
+    --wui-primary-20:       #C7D2FE;
+    --wui-primary-15:       #DDE1FD;
+    --wui-primary-10:       #E0E7FF;
+    --wui-primary-5:        #EEF2FF;
 
     // Foreground ramp (cool blue-grey neutrals) — for text hierarchy
     // beyond Bootstrap's body-color / body-secondary-color.
@@ -37,22 +38,39 @@
     // Gradients (hero, CTA)
     --wui-hero-gradient:
         radial-gradient(ellipse 120% 80% at 50% 30%,
-            #6E86F0 0%, #2F50E4 35%, #2440C4 75%, #16297A 100%);
+            #818CF8 0%, #4F46E5 35%, #4338CA 75%, #312E81 100%);
     --wui-cta-gradient:
         radial-gradient(ellipse 120% 100% at 50% 50%,
-            #1F2F8C 0%, #0E1450 60%, #04082A 100%);
+            #312E81 0%, #1E1B4B 60%, #0F0D2E 100%);
 
     // 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);
 
     // Elevation — exposes the Bootstrap $box-shadow* SCSS vars (set in
-    // _lumex-variables.scss) as CSS vars so inline styles / JS / the portal
+    // _variables.scss) as CSS vars so inline styles / JS / the portal
     // can reach the same values Bootstrap utilities use.
     --wui-shadow-card:               #{$box-shadow-sm};
     --wui-shadow-card-lifted:        #{$box-shadow};
     --wui-shadow-card-lifted-hover:  #{$box-shadow-lg};
 
+    // Overlay elevation. The rule: in-page surfaces stay FLAT (a card is a
+    // border, not a shadow); only things that float above the page lift —
+    // menus, popovers, modals. One ink (the heading navy) so every overlay
+    // casts the same light; components must never hand-roll a shadow.
+    --wui-shadow-overlay:    0 8px 28px -6px rgba(7, 20, 55, 0.14);
+    --wui-shadow-overlay-lg: 0 24px 60px -16px rgba(7, 20, 55, 0.28);
+
+    // One height for every form control. Buttons, inputs and selects share form
+    // rows, so they must line up — they were 46.8px and 45px, which reads as a
+    // misalignment on every filter bar. 44px is also the WCAG touch-target floor.
+    --wui-control-height: 44px;
+
+    // Scrollbar thumb — one quiet grey-blue at three interaction strengths.
+    --wui-scrollbar:        rgba(145, 158, 171, 0.45);
+    --wui-scrollbar-hover:  rgba(145, 158, 171, 0.65);
+    --wui-scrollbar-active: rgba(145, 158, 171, 0.85);
+
     // ---- Marketing surface ramp -------------------------------------
     // Soft tints + neutral washes used by mega-menu hover, callout cards,
     // and section accents. Distinct from --wui-bg-* (which are the
@@ -82,9 +100,9 @@
 
     // ---- Accent-dark -----------------------------------------------
     // Link hover, focused button, deep-purple CTA underline. Matches
-    // $link-hover-color in _lumex-variables.scss but exposed as a CSS
+    // $link-hover-color in _variables.scss but exposed as a CSS
     // var so JS / inline styles can reach it.
-    --wui-accent-dark: #2440C4;
+    --wui-accent-dark: #4338CA;
 
     // ---- Container width + responsive padding ----------------------
     // The standalone design uses a 1512px max canvas with generous side
@@ -130,9 +148,9 @@
 
     // Corner radii (DESIGN.md scale) — portal aliases as --radius-*
     --wui-radius-sm: 6px;
-    --wui-radius:    10px;
-    --wui-radius-lg: 16px;
-    --wui-radius-xl: 24px;
+    --wui-radius:    8px;
+    --wui-radius-lg: 12px;
+    --wui-radius-xl: 16px;
 
     // ---- Portal dark palette ----------------------------------------
     // Marketing stays light. Portal flips [data-theme="dark"] and maps

package/scss/_variables.scss

@@ -1,19 +1,17 @@
 // =====================================================================
-// Lumex — Bootstrap variable overrides.
+// Webority UI — Bootstrap variable overrides.
 // Imported BEFORE `bootstrap/scss/bootstrap` so Bootstrap derives every
 // utility class (.btn-primary, .bg-info, .text-success, etc.) from these
-// values. Shared by Lumex.Web (Razor) and Lumex.Web.Customer.Frontend
-// (React) so the marketing site and portal stay visually identical.
-//
-// Source of truth: docs/DESIGN-SYSTEM.md (mirrors locked palette from
-// Design/Lumex-Updated/src/app/globals.css).
+// values. Shared by every product's Razor marketing site and React portal
+// so both surfaces stay visually identical. Products override these with
+// their own _variables imported before this file.
 // =====================================================================
 
 
 // ---- Brand colors ---------------------------------------------------
-// Lumex primary blue. The full blue ramp lives in _lumex-tokens.scss as
-// CSS variables since Bootstrap only consumes the named theme colors.
-$primary:      #2F50E4;
+// 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;
@@ -50,11 +48,14 @@ $body-tertiary-bg:  #F5F6FA;
 $border-color: #EBEDF3;
 $border-color-translucent: rgba(13, 24, 43, 0.08);
 
-$border-radius:       0.625rem;   // 10px — Bootstrap default 0.375rem felt small for our card chrome
-$border-radius-sm:    0.375rem;
-$border-radius-lg:    1rem;
-$border-radius-xl:    1.5rem;
-$border-radius-2xl:   2rem;
+// One ladder; every component derives from it (Bootstrap's own model). Set a
+// component's radius by pointing it at a rung, never by hardcoding a px value —
+// that is what let buttons drift to ~3x Bootstrap's.
+$border-radius:       0.5rem;     // 8px  — buttons, inputs, dropdowns
+$border-radius-sm:    0.375rem;   // 6px
+$border-radius-lg:    0.75rem;    // 12px — cards, toasts
+$border-radius-xl:    1rem;       // 16px — modals
+$border-radius-2xl:   1.5rem;     // 24px
 $border-radius-pill:  9999px;
 
 
@@ -129,13 +130,15 @@ $box-shadow-lg:  0 0 2px 0 rgba(145, 158, 171, 0.20), 0 20px 40px -4px rgba(145,
 
 // ---- Buttons --------------------------------------------------------
 $btn-font-weight:        500;
-$btn-padding-y:          0.625rem;
+// Height comes from --wui-control-height (see _components.scss) so buttons line
+// up with inputs; the padding just needs to sit inside that.
+$btn-padding-y:          0.5rem;
 $btn-padding-x:          1.25rem;
 $btn-padding-y-lg:       0.875rem;
 $btn-padding-x-lg:       1.75rem;
-$btn-border-radius:      $border-radius-lg;
-$btn-border-radius-sm:   $border-radius;
-$btn-border-radius-lg:   $border-radius-xl;
+$btn-border-radius:      $border-radius;      // 8px
+$btn-border-radius-sm:   $border-radius-sm;   // 6px
+$btn-border-radius-lg:   $border-radius-lg;   // 12px
 $btn-transition:         color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
 
 
@@ -153,7 +156,7 @@ $input-focus-box-shadow:  none;       // border IS the focus cue
 $input-focus-color:       $body-color;
 $input-padding-y:         0.5rem;     // 8px → 40px total height with 1rem font + 1.5 line-height
 $input-padding-x:         0.875rem;   // 14px — comfortable inset for leading icon space
-$input-border-radius:     0.625rem;   // 10px — refined from 16px to match reference rounded-lg
+$input-border-radius:     $border-radius;   // 8px — matches buttons; controls share one corner
 $input-placeholder-color: #99A1B7;    // --wui-text-4
 
 
@@ -162,7 +165,7 @@ $card-border-color:    $border-color;
 $card-border-radius:   $border-radius-lg;
 // Flat surfaces — no drop shadow on default .card. Depth is conveyed
 // via background tint + hairline border instead. Use .card-lifted
-// utility (in _lumex-components.scss) only when a card legitimately
+// utility (in _components.scss) only when a card legitimately
 // needs to sit "above" the page (currently disabled — set to `none`).
 $card-box-shadow:      none;
 $card-spacer-y:        1.5rem;
@@ -172,7 +175,7 @@ $card-spacer-x:        1.5rem;
 // ---- Nav / dropdown --------------------------------------------------
 $nav-link-font-weight:   500;
 $dropdown-border-color:  $border-color;
-$dropdown-border-radius: $border-radius-lg;
+$dropdown-border-radius: $border-radius;
 $dropdown-box-shadow:    $box-shadow-lg;
 
 
@@ -182,18 +185,18 @@ $modal-content-border-radius: $border-radius-xl;
 $modal-content-box-shadow-xs: $box-shadow-lg;
 
 $toast-border-color:    $border-color;
-$toast-border-radius:   $border-radius-pill;  // pill-shape toast — matches locked Sonner override
+$toast-border-radius:   $border-radius-lg;
 $toast-box-shadow:      $box-shadow-lg;
 
 
 // ---- Links ----------------------------------------------------------
 $link-color:           $primary;
-$link-hover-color:     #2440C4;   // accent-dark
+$link-hover-color:     #4338CA;   // accent-dark (primary pressed)
 $link-decoration:      none;
 $link-hover-decoration: underline;
 
 
 // ---- Focus ring -----------------------------------------------------
 $focus-ring-width:    3px;
-$focus-ring-color:    rgba(47, 80, 228, 0.30);
+$focus-ring-color:    rgba($primary, 0.30);   // tracks $primary automatically
 $focus-ring-blur:     0;

package/scss/_wui-aliases.scss

@@ -86,10 +86,12 @@
   --color-scrim:         color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
   --color-on-scrim:      var(--wui-bg-light);
 
-  // Elevation — flat (borders only)
+  // Elevation — in-page surfaces flat (borders only); floating overlays lift.
   --shadow-sm: none;
   --shadow-md: none;
   --shadow-lg: none;
+  --shadow-overlay:    var(--wui-shadow-overlay);
+  --shadow-overlay-lg: var(--wui-shadow-overlay-lg);
 
   // Corner radii
   --radius-sm: var(--wui-radius-sm);