@webority/theme 0.0.9

package/scss/_tokens.scss

@@ -0,0 +1,159 @@
+// =====================================================================
+// Lumex — 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;
+
+    // Foreground ramp (cool blue-grey neutrals) — for text hierarchy
+    // beyond Bootstrap's body-color / body-secondary-color.
+    --wui-text-heading: #071437;
+    --wui-text-1:       #252F4A;
+    --wui-text-2:       #4B5675;
+    --wui-text-3:       #78829D;
+    --wui-text-4:       #99A1B7;
+    --wui-text-5:       #C4CADA;
+
+    // Surfaces
+    --wui-bg-page:      #F4F6F8;
+    --wui-bg-light:     #FFFFFF;
+    --wui-bg-elevated:  #F9FBFC;
+    --wui-bg-muted:     #F5F6FA;
+    --wui-border-light: #EBEDF3;
+    --wui-border-soft:  #F4F6F8;
+
+    // Gradients (hero, CTA)
+    --wui-hero-gradient:
+        radial-gradient(ellipse 120% 80% at 50% 30%,
+            #6E86F0 0%, #2F50E4 35%, #2440C4 75%, #16297A 100%);
+    --wui-cta-gradient:
+        radial-gradient(ellipse 120% 100% at 50% 50%,
+            #1F2F8C 0%, #0E1450 60%, #04082A 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
+    // 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};
+
+    // ---- Marketing surface ramp -------------------------------------
+    // Soft tints + neutral washes used by mega-menu hover, callout cards,
+    // and section accents. Distinct from --wui-bg-* (which are the
+    // platform/portal palette).
+    --wui-surface-soft:      #F2EFFE;
+    --wui-surface-blue:      #ECE4FE;
+    --wui-surface-blue-soft: #FCFCFC;
+    --wui-surface-mute:      #F9FBFC;
+    --wui-ink:               #000000;
+
+    // ---- Foreground ramp aliases -----------------------------------
+    // Marketing-side parlance — names mirror the standalone design.
+    // These point at the same hex values as --wui-text-* (kept as
+    // aliases rather than duplicated literals so a re-tune of the text
+    // ramp updates both sides at once).
+    --wui-fg-2: var(--wui-text-1);
+    --wui-fg-3: var(--wui-text-2);
+    --wui-fg-4: var(--wui-text-3);
+    --wui-fg-5: var(--wui-text-5);
+
+    // ---- Neutral ramp ----------------------------------------------
+    // Used by table emphasis, dividers, and mega-menu hover surfaces.
+    --wui-neutral-border-dark:  #EBEDF3;
+    --wui-neutral-border-light: #F9FBFC;
+    --wui-neutral-bg-dark:      #F5F6FA;
+    --wui-neutral-bg-light:     #F9FBFC;
+
+    // ---- Accent-dark -----------------------------------------------
+    // Link hover, focused button, deep-purple CTA underline. Matches
+    // $link-hover-color in _lumex-variables.scss but exposed as a CSS
+    // var so JS / inline styles can reach it.
+    --wui-accent-dark: #2440C4;
+
+    // ---- Container width + responsive padding ----------------------
+    // The standalone design uses a 1512px max canvas with generous side
+    // padding that grows on wider viewports. Pair with .container-cloves.
+    --wui-container-max: 1512px;
+    --wui-container-pad: 24px;
+
+    // ---- 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.
+    // Shared by the portal (aliased to --color-*) and marketing alerts/badges.
+    --wui-info-active:    #056EE9;
+    --wui-info:           #1B84FF;
+    --wui-info-50:        #8DC2FF;
+    --wui-info-30:        #BBDBFF;
+    --wui-info-20:        #D1E6FF;
+    --wui-info-10:        #E9F3FF;
+    --wui-info-5:         #F3F9FF;
+
+    --wui-success-active: #04B440;
+    --wui-success:        #17C653;
+    --wui-success-50:     #8BE3A9;
+    --wui-success-30:     #BAEECC;
+    --wui-success-20:     #D1F4DD;
+    --wui-success-10:     #E8FAEE;
+    --wui-success-5:      #F3FCF6;
+
+    --wui-warning-active: #DFA000;
+    --wui-warning:        #F6B100;
+    --wui-warning-50:     #FBD880;
+    --wui-warning-30:     #FDE8B3;
+    --wui-warning-20:     #FDEFCC;
+    --wui-warning-10:     #FFF8E6;
+    --wui-warning-5:      #FEFBF2;
+
+    --wui-danger-active:  #E82646;
+    --wui-danger:         #F8285A;
+    --wui-danger-50:      #FC94AD;
+    --wui-danger-30:      #FDBFCE;
+    --wui-danger-20:      #FED4DE;
+    --wui-danger-10:      #FFEAEF;
+    --wui-danger-5:       #FEF4F6;
+
+    // Corner radii (DESIGN.md scale) — portal aliases as --radius-*
+    --wui-radius-sm: 6px;
+    --wui-radius:    10px;
+    --wui-radius-lg: 16px;
+    --wui-radius-xl: 24px;
+
+    // ---- Portal dark palette ----------------------------------------
+    // Marketing stays light. Portal flips [data-theme="dark"] and maps
+    // --color-* aliases onto these so dark hexes live in theme/, not the app.
+    --wui-dark-bg-page:      #0f1117;
+    --wui-dark-bg-elevated:  #0d0f15;
+    --wui-dark-bg-muted:     #232733;
+    --wui-dark-bg-surface:   #181b23;
+    --wui-dark-border:       #2a2f3a;
+    --wui-dark-border-strong:#3a414f;
+    --wui-dark-text:         #e6e8ee;
+    --wui-dark-text-muted:   #b4b9c6;
+    --wui-dark-text-subtle:  #8a90a0;
+    --wui-dark-primary:      #6B83EC;
+    --wui-dark-primary-hover:#93A6F2;
+}
+
+// Bootstrap md / xl (not invented px)
+@media (min-width: 768px) {
+    :root { --wui-container-pad: 64px; }
+}
+@media (min-width: 1200px) {
+    :root { --wui-container-pad: 88px; }
+}

package/scss/_variables.scss

@@ -0,0 +1,199 @@
+// =====================================================================
+// Lumex — 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).
+// =====================================================================
+
+
+// ---- 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;
+$secondary:    #4B5675;  // foreground-3 — quiet text + secondary buttons
+$success:      #04B440;
+$info:         #056EE9;
+$warning:      #DFA000;
+$danger:       #E82646;
+$light:        #F9FBFC;  // surface-mute
+$dark:         #071437;  // text-heading
+
+// Override `$theme-colors` so Bootstrap's $theme-colors map includes
+// our brand. Anything we add here gets utility classes generated
+// automatically (e.g. adding "accent" gives you bg-accent, text-accent).
+$theme-colors: (
+    "primary":   $primary,
+    "secondary": $secondary,
+    "success":   $success,
+    "info":      $info,
+    "warning":   $warning,
+    "danger":    $danger,
+    "light":     $light,
+    "dark":      $dark,
+);
+
+
+// ---- Body / text ----------------------------------------------------
+$body-color:        #252F4A;  // text-1 from locked palette
+$body-bg:           #FFFFFF;
+$body-secondary-color: #4B5675;
+$body-tertiary-color:  #78829D;
+$body-secondary-bg: #F9FBFC;
+$body-tertiary-bg:  #F5F6FA;
+
+
+// ---- Borders --------------------------------------------------------
+$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;
+$border-radius-pill:  9999px;
+
+
+// ---- Typography -----------------------------------------------------
+$font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$font-family-monospace:  'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+$font-size-base:    1rem;       // 16px
+$line-height-base:  1.55;
+
+$font-weight-light:    300;
+$font-weight-normal:   400;
+$font-weight-medium:   500;
+$font-weight-semibold: 600;
+$font-weight-bold:     700;
+
+$headings-font-weight:    600;
+$headings-line-height:    1.2;
+$headings-letter-spacing: -0.02em;
+$headings-color:          #071437;
+
+$display-font-weight:     500;
+$display-line-height:     1.05;
+
+$h1-font-size: 2.5rem;   // 40px
+$h2-font-size: 2rem;     // 32px
+$h3-font-size: 1.5rem;   // 24px
+$h4-font-size: 1.25rem;  // 20px
+$h5-font-size: 1.125rem; // 18px
+$h6-font-size: 1rem;     // 16px
+
+
+// ---- Spacing --------------------------------------------------------
+// Bootstrap default ladder is 0/.25/.5/1/1.5/3rem. We add 6/8/10/12
+// for hero / section padding so utility classes like `py-8` exist.
+$spacer: 1rem;
+$spacers: (
+    0:  0,
+    1:  $spacer * 0.25,    // 4px
+    2:  $spacer * 0.5,     // 8px
+    3:  $spacer,           // 16px
+    4:  $spacer * 1.5,     // 24px
+    5:  $spacer * 3,       // 48px
+    6:  $spacer * 4.5,     // 72px
+    7:  $spacer * 5,       // 80px
+    8:  $spacer * 6,       // 96px
+    10: $spacer * 8,       // 128px
+    12: $spacer * 10,      // 160px
+);
+
+
+// ---- Container widths -----------------------------------------------
+// The locked design uses a wider canvas (1512px max) with generous side
+// padding. Override Bootstrap's narrower default so marketing layouts
+// breathe properly on large monitors.
+$container-max-widths: (
+    sm:   540px,
+    md:   720px,
+    lg:   960px,
+    xl:  1140px,
+    xxl: 1320px,
+);
+
+
+// ---- Shadows --------------------------------------------------------
+// Mirrors the `card / card-lifted / card-lifted-hover` shadow tokens
+// from the locked design.
+$box-shadow-sm:  0 1px 2px rgba(7, 20, 55, 0.04), 0 4px 12px rgba(7, 20, 55, 0.06);
+$box-shadow:     0 0 2px 0 rgba(145, 158, 171, 0.20), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
+$box-shadow-lg:  0 0 2px 0 rgba(145, 158, 171, 0.20), 0 20px 40px -4px rgba(145, 158, 171, 0.20);
+
+
+// ---- Buttons --------------------------------------------------------
+$btn-font-weight:        500;
+$btn-padding-y:          0.625rem;
+$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-transition:         color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+
+
+// ---- Forms ----------------------------------------------------------
+// Matches the reference `<Input>` component spec (5 locked states:
+// default / hover / focus / disabled / error). The border itself is the
+// focus cue — no separate box-shadow glow. Disabled gets a muted bg.
+// Error is driven by `aria-invalid="true"` (no separate .is-invalid
+// class needed for the visual change).
+$input-bg:                #FFFFFF;
+$input-disabled-bg:       #F5F6FA;   // --wui-bg-muted
+$input-border-color:      $border-color;
+$input-focus-border-color: $primary;
+$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-placeholder-color: #99A1B7;    // --wui-text-4
+
+
+// ---- Cards ----------------------------------------------------------
+$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
+// needs to sit "above" the page (currently disabled — set to `none`).
+$card-box-shadow:      none;
+$card-spacer-y:        1.5rem;
+$card-spacer-x:        1.5rem;
+
+
+// ---- Nav / dropdown --------------------------------------------------
+$nav-link-font-weight:   500;
+$dropdown-border-color:  $border-color;
+$dropdown-border-radius: $border-radius-lg;
+$dropdown-box-shadow:    $box-shadow-lg;
+
+
+// ---- Modals + toasts ------------------------------------------------
+$modal-content-border-color:  $border-color;
+$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-box-shadow:      $box-shadow-lg;
+
+
+// ---- Links ----------------------------------------------------------
+$link-color:           $primary;
+$link-hover-color:     #2440C4;   // accent-dark
+$link-decoration:      none;
+$link-hover-decoration: underline;
+
+
+// ---- Focus ring -----------------------------------------------------
+$focus-ring-width:    3px;
+$focus-ring-color:    rgba(47, 80, 228, 0.30);
+$focus-ring-blur:     0;

package/scss/_wui-aliases.scss

@@ -0,0 +1,128 @@
+// Portal component token aliases.
+//
+// The extracted component CSS (_wui-components.scss) references --color-* /
+// --radius-* / --shadow-* names. Those are aliases onto the canonical --wui-*
+// design tokens, so the component layer is self-contained: a consumer that
+// imports the theme gets the components fully styled, with no app-local token
+// layer required. Alias only — never declare a brand hex here.
+
+:root {
+  // Surfaces
+  --color-bg:            var(--wui-bg-page);
+  --color-bg-subtle:     var(--wui-bg-elevated);
+  --color-bg-muted:      var(--wui-bg-muted);
+  --color-surface:       var(--wui-bg-light);
+
+  // Borders
+  --color-border:        var(--wui-border-light);
+  --color-border-light:  var(--wui-border-soft);
+  --color-border-strong: var(--wui-text-5);
+
+  // Text ramp
+  --color-text:          var(--wui-text-heading);
+  --color-text-muted:    var(--wui-text-2);
+  --color-text-subtle:   var(--wui-text-3);
+
+  // Bootstrap colour vars bridged onto app tokens so un-tokenised BS text
+  // flips with data-theme.
+  --bs-body-color:       var(--color-text);
+  --bs-emphasis-color:   var(--color-text);
+  --bs-secondary-color:  var(--color-text-muted);
+  --bs-tertiary-color:   var(--color-text-subtle);
+  --bs-body-bg:          var(--color-bg);
+  --bs-border-color:     var(--color-border);
+
+  // Brand
+  --color-primary:       var(--wui-primary);
+  --color-primary-hover: var(--wui-primary-pressed);
+  --color-primary-soft:  var(--wui-primary-10);
+
+  // Semantic status ramps
+  --color-info-active:    var(--wui-info-active);
+  --color-info:           var(--wui-info);
+  --color-info-50:        var(--wui-info-50);
+  --color-info-30:        var(--wui-info-30);
+  --color-info-20:        var(--wui-info-20);
+  --color-info-10:        var(--wui-info-10);
+  --color-info-5:         var(--wui-info-5);
+  --color-info-strong:    var(--color-info-active);
+  --color-info-soft:      var(--color-info-10);
+
+  --color-success-active: var(--wui-success-active);
+  --color-success:        var(--wui-success);
+  --color-success-50:     var(--wui-success-50);
+  --color-success-30:     var(--wui-success-30);
+  --color-success-20:     var(--wui-success-20);
+  --color-success-10:     var(--wui-success-10);
+  --color-success-5:      var(--wui-success-5);
+  --color-success-strong: var(--color-success-active);
+  --color-success-soft:   var(--color-success-10);
+
+  --color-warning-active: var(--wui-warning-active);
+  --color-warning:        var(--wui-warning);
+  --color-warning-50:     var(--wui-warning-50);
+  --color-warning-30:     var(--wui-warning-30);
+  --color-warning-20:     var(--wui-warning-20);
+  --color-warning-10:     var(--wui-warning-10);
+  --color-warning-5:      var(--wui-warning-5);
+  --color-warning-strong: var(--color-warning-active);
+  --color-warning-soft:   var(--color-warning-10);
+
+  --color-danger-active:  var(--wui-danger-active);
+  --color-danger:         var(--wui-danger);
+  --color-danger-50:      var(--wui-danger-50);
+  --color-danger-30:      var(--wui-danger-30);
+  --color-danger-20:      var(--wui-danger-20);
+  --color-danger-10:      var(--wui-danger-10);
+  --color-danger-5:       var(--wui-danger-5);
+  --color-danger-strong:  var(--color-danger-active);
+  --color-danger-soft:    var(--color-danger-10);
+
+  // Accent → warning ramp
+  --color-accent:        var(--color-warning);
+  --color-accent-soft:   var(--color-warning-soft);
+
+  // Scrim — media hover overlays (logo uploader)
+  --color-scrim:         color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
+  --color-on-scrim:      var(--wui-bg-light);
+
+  // Elevation — flat (borders only)
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+
+  // Corner radii
+  --radius-sm: var(--wui-radius-sm);
+  --radius:    var(--wui-radius);
+  --radius-lg: var(--wui-radius-lg);
+  --radius-xl: var(--wui-radius-xl);
+}
+
+:root[data-theme="dark"] {
+  --color-bg:            var(--wui-dark-bg-page);
+  --color-bg-subtle:     var(--wui-dark-bg-elevated);
+  --color-bg-muted:      var(--wui-dark-bg-muted);
+  --color-surface:       var(--wui-dark-bg-surface);
+
+  --color-border:        var(--wui-dark-border);
+  --color-border-strong: var(--wui-dark-border-strong);
+
+  --color-text:          var(--wui-dark-text);
+  --color-text-muted:    var(--wui-dark-text-muted);
+  --color-text-subtle:   var(--wui-dark-text-subtle);
+
+  --color-primary:       var(--wui-dark-primary);
+  --color-primary-hover: var(--wui-dark-primary-hover);
+  --color-primary-soft:  color-mix(in srgb, var(--wui-primary) 20%, transparent);
+
+  --color-success-soft:  color-mix(in srgb, var(--wui-success) 18%, transparent);
+  --color-warning-soft:  color-mix(in srgb, var(--wui-warning) 18%, transparent);
+  --color-danger-soft:   color-mix(in srgb, var(--wui-danger) 18%, transparent);
+  --color-info-soft:     color-mix(in srgb, var(--wui-info) 18%, transparent);
+  --color-accent-soft:   var(--color-warning-soft);
+
+  --color-scrim:         color-mix(in srgb, black 62%, transparent);
+  --color-on-scrim:      var(--wui-bg-light);
+
+  color-scheme: dark;
+}