@justin_evo/evo-ui 1.0.1

package/src/css/base/_color.scss

@@ -0,0 +1,159 @@
+// ===========================================
+// REFINED COLOR PALETTE - Gaming Card System
+// ===========================================
+
+// Blue (primary) — bright vibrant blue
+$evo-blue-100: #dbeafe;
+$evo-blue-200: #bfdbfe;
+$evo-blue-300: #93c5fd;
+$evo-blue-400: #60a5fa;
+$evo-blue-500: #3b82f6;
+$evo-blue-600: #2563eb;
+$evo-blue-700: #1d4ed8;
+$evo-blue-800: #1e40af;
+$evo-blue-900: #1e3a8a;
+
+// Gray (secondary) — refined neutral gray
+$evo-gray-100: #f3f4f6;
+$evo-gray-200: #e5e7eb;
+$evo-gray-300: #d1d5db;
+$evo-gray-400: #9ca3af;
+$evo-gray-500: #6b7280;
+$evo-gray-600: #4b5563;
+$evo-gray-700: #374151;
+$evo-gray-800: #1f2937;
+$evo-gray-900: #111827;
+
+// Red (danger) — vivid red for alerts
+$evo-red-100: #fee2e2;
+$evo-red-200: #fecaca;
+$evo-red-300: #fca5a5;
+$evo-red-400: #f87171;
+$evo-red-500: #ef4444;
+$evo-red-600: #dc2626;
+$evo-red-700: #b91c1c;
+$evo-red-800: #991b1b;
+$evo-red-900: #7f1d1d;
+
+// Yellow (warning) — warm golden yellow
+$evo-yellow-100: #fef9c3;
+$evo-yellow-200: #fef08a;
+$evo-yellow-300: #fde047;
+$evo-yellow-400: #facc15;
+$evo-yellow-500: #eab308;
+$evo-yellow-600: #ca8a04;
+$evo-yellow-700: #a16207;
+$evo-yellow-800: #854d0e;
+$evo-yellow-900: #713f12;
+
+// Green (success) — fresh vibrant green
+$evo-green-100: #dcfce7;
+$evo-green-200: #bbf7d0;
+$evo-green-300: #86efac;
+$evo-green-400: #4ade80;
+$evo-green-500: #22c55e;
+$evo-green-600: #16a34a;
+$evo-green-700: #15803d;
+$evo-green-800: #166534;
+$evo-green-900: #14532d;
+
+// Purple (info/accent) — rich purple for special elements
+$evo-purple-100: #f3e8ff;
+$evo-purple-200: #e9d5ff;
+$evo-purple-300: #d8b4fe;
+$evo-purple-400: #c084fc;
+$evo-purple-500: #a855f7;
+$evo-purple-600: #9333ea;
+$evo-purple-700: #7e22ce;
+$evo-purple-800: #6b21a8;
+$evo-purple-900: #581c87;
+
+// Mono White (Smoke) — refined neutral foundations
+$evo-white-100: #ffffff; // Pure White
+$evo-white-200: #fafafa; // Off White
+$evo-white-300: #f5f5f5; // Snow
+$evo-white-400: #ebebeb; // Pearl
+$evo-white-500: #e0e0e0; // Silver Mist
+$evo-white-600: #c7c7c7; // Platinum
+$evo-white-700: #a1a1a1; // Cool Gray
+$evo-white-800: #7a7a7a; // Stone
+$evo-white-900: #5c5c5c; // Graphite
+
+// Mono Black (Midnight) — deep contrast blacks
+$evo-black-100: #52525b; // Zinc
+$evo-black-200: #3f3f46; // Charcoal
+$evo-black-300: #27272a; // Onyx
+$evo-black-400: #1c1c1e; // Jet
+$evo-black-500: #18181b; // Rich Black
+$evo-black-600: #121214; // Dark Matter
+$evo-black-700: #0c0c0e; // Void
+$evo-black-800: #060608; // Abyss
+$evo-black-900: #000000; // True Black
+
+// Cyan (Primary) — Electric, futuristic blue-cyan
+$evo-cyan-100: #ecfeff;
+$evo-cyan-200: #cffafe;
+$evo-cyan-300: #a5f3fc;
+$evo-cyan-400: #22d3ee;
+$evo-cyan-500: #06b6d4;
+$evo-cyan-600: #0891b2;
+$evo-cyan-700: #0e7490;
+$evo-cyan-800: #155e75;
+$evo-cyan-900: #164e63;
+
+// Rose (Legendary) — Warm, powerful pink-red
+$evo-rose-100: #fff1f2;
+$evo-rose-200: #fecdd3;
+$evo-rose-300: #fda4af;
+$evo-rose-400: #fb7185;
+$evo-rose-500: #f43f5e;
+$evo-rose-600: #e11d48;
+$evo-rose-700: #be123c;
+$evo-rose-800: #9f1239;
+$evo-rose-900: #881337;
+
+// Emerald (Rare) — Rich, deep green
+$evo-emerald-100: #d1fae5;
+$evo-emerald-200: #a7f3d0;
+$evo-emerald-300: #6ee7b7;
+$evo-emerald-400: #34d399;
+$evo-emerald-500: #10b981;
+$evo-emerald-600: #059669;
+$evo-emerald-700: #047857;
+$evo-emerald-800: #065f46;
+$evo-emerald-900: #064e3b;
+
+// Amber (Epic) — Warm gold-orange
+$evo-amber-100: #fef3c7;
+$evo-amber-200: #fde68a;
+$evo-amber-300: #fcd34d;
+$evo-amber-400: #fbbf24;
+$evo-amber-500: #f59e0b;
+$evo-amber-600: #d97706;
+$evo-amber-700: #b45309;
+$evo-amber-800: #92400e;
+$evo-amber-900: #78350f;
+
+// Violet (Mythic) — Deep, mystical purple
+$evo-violet-100: #ede9fe;
+$evo-violet-200: #ddd6fe;
+$evo-violet-300: #c4b5fd;
+$evo-violet-400: #a78bfa;
+$evo-violet-500: #8b5cf6;
+$evo-violet-600: #7c3aed;
+$evo-violet-700: #6d28d9;
+$evo-violet-800: #5b21b6;
+$evo-violet-900: #4c1d95;
+
+// Slate (Neutral) — Modern cool grays
+$evo-slate-50:  #f8fafc;
+$evo-slate-100: #f1f5f9;
+$evo-slate-200: #e2e8f0;
+$evo-slate-300: #cbd5e1;
+$evo-slate-400: #94a3b8;
+$evo-slate-500: #64748b;
+$evo-slate-600: #475569;
+$evo-slate-700: #334155;
+$evo-slate-800: #1e293b;
+$evo-slate-900: #0f172a;
+$evo-slate-950: #020617;

package/src/css/base/_theme.scss

@@ -0,0 +1,237 @@
+// ==========================================================
+// EVO-UI THEME TOKENS
+// ----------------------------------------------------------
+// Semantic CSS custom properties for light & dark themes.
+//
+// Theme is controlled by a `data-theme` attribute on <html>:
+//   <html data-theme="light">  →  light tokens
+//   <html data-theme="dark">   →  dark tokens
+//   (no attribute)             →  follows OS via prefers-color-scheme
+//
+// Developers can override any token at any scope:
+//   :root { --evo-color-primary: #ff6b6b; }
+//
+// All themed component styles read these tokens, never raw
+// palette colors, so a single attribute flip re-themes the
+// entire UI without re-rendering React or reloading CSS.
+// ==========================================================
+
+@use './color' as *;
+
+// ---------- Light theme tokens ----------
+@mixin evo-theme-light {
+  // Surfaces
+  --evo-color-bg:                  #{$evo-white-100};
+  --evo-color-bg-rgb:              255, 255, 255;
+  --evo-color-surface:             #{$evo-slate-50};
+  --evo-color-surface-elevated:    #{$evo-white-100};
+  --evo-color-surface-sunken:      #{$evo-slate-100};
+  --evo-color-surface-hover:       #{$evo-slate-100};
+  --evo-color-surface-active:      #{$evo-slate-200};
+
+  // Borders
+  --evo-color-border:              #{$evo-slate-200};
+  --evo-color-border-strong:       #{$evo-slate-300};
+  --evo-color-border-subtle:       #{$evo-slate-100};
+
+  // Text
+  --evo-color-text:                #{$evo-slate-900};
+  --evo-color-text-secondary:      #{$evo-slate-600};
+  --evo-color-text-muted:          #{$evo-slate-500};
+  --evo-color-text-inverted:       #{$evo-white-100};
+
+  // Brand (primary)
+  --evo-color-primary:             #{$evo-cyan-600};
+  --evo-color-primary-rgb:         8, 145, 178;
+  --evo-color-primary-hover:       #{$evo-cyan-700};
+  --evo-color-primary-active:      #{$evo-cyan-800};
+  --evo-color-primary-focus:       #{$evo-cyan-400};
+  --evo-color-primary-fg:          #{$evo-white-100};
+  --evo-color-primary-soft:        #{$evo-cyan-100};
+  --evo-color-primary-soft-hover:  #{$evo-cyan-200};
+
+  // Secondary (neutral chrome)
+  --evo-color-secondary:           #{$evo-slate-100};
+  --evo-color-secondary-hover:     #{$evo-slate-200};
+  --evo-color-secondary-active:    #{$evo-slate-300};
+  --evo-color-secondary-fg:        #{$evo-slate-800};
+  --evo-color-secondary-border:    #{$evo-slate-300};
+
+  // Status — Danger
+  --evo-color-danger:              #{$evo-rose-600};
+  --evo-color-danger-rgb:          225, 29, 72;
+  --evo-color-danger-hover:        #{$evo-rose-700};
+  --evo-color-danger-active:       #{$evo-rose-800};
+  --evo-color-danger-focus:        #{$evo-rose-400};
+  --evo-color-danger-fg:           #{$evo-white-100};
+  --evo-color-danger-soft:         #{$evo-rose-100};
+
+  // Status — Warning
+  --evo-color-warning:             #{$evo-amber-500};
+  --evo-color-warning-rgb:         245, 158, 11;
+  --evo-color-warning-hover:       #{$evo-amber-600};
+  --evo-color-warning-active:      #{$evo-amber-700};
+  --evo-color-warning-focus:       #{$evo-amber-300};
+  --evo-color-warning-fg:          #{$evo-amber-900};
+  --evo-color-warning-soft:        #{$evo-amber-100};
+
+  // Status — Success
+  --evo-color-success:             #{$evo-emerald-600};
+  --evo-color-success-rgb:         5, 150, 105;
+  --evo-color-success-hover:       #{$evo-emerald-700};
+  --evo-color-success-active:      #{$evo-emerald-800};
+  --evo-color-success-focus:       #{$evo-emerald-400};
+  --evo-color-success-fg:          #{$evo-white-100};
+  --evo-color-success-soft:        #{$evo-emerald-100};
+
+  // Status — Info
+  --evo-color-info:                #{$evo-violet-600};
+  --evo-color-info-rgb:            124, 58, 237;
+  --evo-color-info-hover:          #{$evo-violet-700};
+  --evo-color-info-active:         #{$evo-violet-800};
+  --evo-color-info-focus:          #{$evo-violet-400};
+  --evo-color-info-fg:             #{$evo-white-100};
+  --evo-color-info-soft:           #{$evo-violet-100};
+
+  // Overlays & effects
+  --evo-color-overlay:             rgba(15, 23, 42, 0.45);
+  --evo-color-backdrop:            rgba(15, 23, 42, 0.6);
+  --evo-shadow-color:              0 0 0;
+  --evo-shadow-strength:           0.08;
+
+  // Skeleton / shimmer
+  --evo-color-skeleton-base:       #{$evo-slate-200};
+  --evo-color-skeleton-highlight:  #{$evo-slate-100};
+
+  // Color scheme hint for native UI (scrollbars, form controls)
+  color-scheme: light;
+}
+
+// ---------- Dark theme tokens ----------
+@mixin evo-theme-dark {
+  // Surfaces — soft dark grays (not pure black) per 2026 best practice
+  --evo-color-bg:                  #{$evo-slate-950};
+  --evo-color-bg-rgb:              2, 6, 23;
+  --evo-color-surface:             #{$evo-slate-900};
+  --evo-color-surface-elevated:    #{$evo-slate-800};
+  --evo-color-surface-sunken:      #{$evo-slate-950};
+  --evo-color-surface-hover:       #{$evo-slate-800};
+  --evo-color-surface-active:      #{$evo-slate-700};
+
+  // Borders
+  --evo-color-border:              #{$evo-slate-700};
+  --evo-color-border-strong:       #{$evo-slate-600};
+  --evo-color-border-subtle:       #{$evo-slate-800};
+
+  // Text — off-white for less eye strain
+  --evo-color-text:                #{$evo-slate-50};
+  --evo-color-text-secondary:      #{$evo-slate-300};
+  --evo-color-text-muted:          #{$evo-slate-400};
+  --evo-color-text-inverted:       #{$evo-slate-900};
+
+  // Brand (primary) — lighter, more luminous in dark mode
+  --evo-color-primary:             #{$evo-cyan-400};
+  --evo-color-primary-rgb:         34, 211, 238;
+  --evo-color-primary-hover:       #{$evo-cyan-300};
+  --evo-color-primary-active:      #{$evo-cyan-500};
+  --evo-color-primary-focus:       #{$evo-cyan-300};
+  --evo-color-primary-fg:          #{$evo-slate-950};
+  --evo-color-primary-soft:        rgba(34, 211, 238, 0.12);
+  --evo-color-primary-soft-hover:  rgba(34, 211, 238, 0.18);
+
+  // Secondary
+  --evo-color-secondary:           rgba(255, 255, 255, 0.06);
+  --evo-color-secondary-hover:     rgba(255, 255, 255, 0.10);
+  --evo-color-secondary-active:    rgba(255, 255, 255, 0.15);
+  --evo-color-secondary-fg:        #{$evo-slate-200};
+  --evo-color-secondary-border:    #{$evo-slate-600};
+
+  // Status — Danger
+  --evo-color-danger:              #{$evo-rose-500};
+  --evo-color-danger-rgb:          244, 63, 94;
+  --evo-color-danger-hover:        #{$evo-rose-400};
+  --evo-color-danger-active:       #{$evo-rose-600};
+  --evo-color-danger-focus:        #{$evo-rose-300};
+  --evo-color-danger-fg:           #{$evo-white-100};
+  --evo-color-danger-soft:         rgba(244, 63, 94, 0.12);
+
+  // Status — Warning
+  --evo-color-warning:             #{$evo-amber-400};
+  --evo-color-warning-rgb:         251, 191, 36;
+  --evo-color-warning-hover:       #{$evo-amber-300};
+  --evo-color-warning-active:      #{$evo-amber-500};
+  --evo-color-warning-focus:       #{$evo-amber-300};
+  --evo-color-warning-fg:          #{$evo-slate-950};
+  --evo-color-warning-soft:        rgba(251, 191, 36, 0.12);
+
+  // Status — Success
+  --evo-color-success:             #{$evo-emerald-500};
+  --evo-color-success-rgb:         16, 185, 129;
+  --evo-color-success-hover:       #{$evo-emerald-400};
+  --evo-color-success-active:      #{$evo-emerald-600};
+  --evo-color-success-focus:       #{$evo-emerald-300};
+  --evo-color-success-fg:          #{$evo-white-100};
+  --evo-color-success-soft:        rgba(16, 185, 129, 0.12);
+
+  // Status — Info
+  --evo-color-info:                #{$evo-violet-500};
+  --evo-color-info-rgb:            139, 92, 246;
+  --evo-color-info-hover:          #{$evo-violet-400};
+  --evo-color-info-active:         #{$evo-violet-600};
+  --evo-color-info-focus:          #{$evo-violet-300};
+  --evo-color-info-fg:             #{$evo-white-100};
+  --evo-color-info-soft:           rgba(139, 92, 246, 0.12);
+
+  // Overlays & effects
+  --evo-color-overlay:             rgba(0, 0, 0, 0.65);
+  --evo-color-backdrop:            rgba(0, 0, 0, 0.75);
+  --evo-shadow-color:              0 0 0;
+  --evo-shadow-strength:           0.35;
+
+  // Skeleton / shimmer
+  --evo-color-skeleton-base:       #{$evo-slate-800};
+  --evo-color-skeleton-highlight:  #{$evo-slate-700};
+
+  color-scheme: dark;
+}
+
+// ---------- Apply themes ----------
+// 1. Explicit data-theme attribute wins (developer/user choice)
+:root,
+[data-theme='light'] {
+  @include evo-theme-light;
+}
+
+[data-theme='dark'] {
+  @include evo-theme-dark;
+}
+
+// 2. No data-theme attribute → follow OS preference automatically.
+//    Only applies when the user/site hasn't set data-theme at all.
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    @include evo-theme-dark;
+  }
+}
+
+// ---------- Smooth theme transitions ----------
+// Animate color changes on theme flip — but skip during the
+// initial paint and respect users who request reduced motion.
+:root[data-theme-transition='true'] *,
+:root[data-theme-transition='true'] *::before,
+:root[data-theme-transition='true'] *::after {
+  transition: background-color 200ms ease,
+              border-color 200ms ease,
+              color 200ms ease,
+              fill 200ms ease,
+              stroke 200ms ease,
+              box-shadow 200ms ease !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root[data-theme-transition='true'] *,
+  :root[data-theme-transition='true'] *::before,
+  :root[data-theme-transition='true'] *::after {
+    transition: none !important;
+  }
+}

package/src/css/base/_variables.scss

@@ -0,0 +1,161 @@
+@use './color' as *;
+
+// ==========================================================
+// EVO-UI SCSS VARIABLES
+// ----------------------------------------------------------
+// Two kinds of variables live in this file:
+//
+//  1. SEMANTIC (theme-aware) — emit `var(--evo-*)` so the
+//     same component code resolves to light or dark values
+//     based on the current `data-theme`.
+//
+//  2. STATIC (sizes, radii, transitions, typography) — plain
+//     SCSS literals. These don't change between themes.
+//
+// To override a theme color, set the CSS variable in your
+// app — never reassign these SCSS variables directly.
+// ==========================================================
+
+// ---------- Semantic colors (theme-aware) ----------
+
+// Primary
+$evo-primary-color:    var(--evo-color-primary);
+$evo-primary-hover:    var(--evo-color-primary-hover);
+$evo-primary-active:   var(--evo-color-primary-active);
+$evo-primary-focus:    var(--evo-color-primary-focus);
+$evo-primary-fg:       var(--evo-color-primary-fg);
+$evo-primary-soft:     var(--evo-color-primary-soft);
+$evo-primary-rgb:      var(--evo-color-primary-rgb);
+
+// Secondary
+$evo-secondary-bg:      var(--evo-color-secondary);
+$evo-secondary-color:   var(--evo-color-secondary);
+$evo-secondary-border:  var(--evo-color-secondary-border);
+$evo-secondary-hover:   var(--evo-color-secondary-hover);
+$evo-secondary-active:  var(--evo-color-secondary-active);
+$evo-secondary-text:    var(--evo-color-secondary-fg);
+$evo-secondary-focus:   var(--evo-color-secondary-border);
+
+// Danger
+$evo-danger-color:     var(--evo-color-danger);
+$evo-danger-hover:     var(--evo-color-danger-hover);
+$evo-danger-active:    var(--evo-color-danger-active);
+$evo-danger-focus:     var(--evo-color-danger-focus);
+$evo-danger-fg:        var(--evo-color-danger-fg);
+$evo-danger-soft:      var(--evo-color-danger-soft);
+$evo-danger-rgb:       var(--evo-color-danger-rgb);
+
+// Warning
+$evo-warning-color:    var(--evo-color-warning);
+$evo-warning-hover:    var(--evo-color-warning-hover);
+$evo-warning-active:   var(--evo-color-warning-active);
+$evo-warning-focus:    var(--evo-color-warning-focus);
+$evo-warning-text:     var(--evo-color-warning-fg);
+$evo-warning-soft:     var(--evo-color-warning-soft);
+
+// Success
+$evo-success-color:    var(--evo-color-success);
+$evo-success-hover:    var(--evo-color-success-hover);
+$evo-success-active:   var(--evo-color-success-active);
+$evo-success-focus:    var(--evo-color-success-focus);
+$evo-success-fg:       var(--evo-color-success-fg);
+$evo-success-soft:     var(--evo-color-success-soft);
+
+// Info
+$evo-info-color:       var(--evo-color-info);
+$evo-info-hover:       var(--evo-color-info-hover);
+$evo-info-active:      var(--evo-color-info-active);
+$evo-info-focus:       var(--evo-color-info-focus);
+$evo-info-fg:          var(--evo-color-info-fg);
+$evo-info-soft:        var(--evo-color-info-soft);
+
+// Surfaces, borders, text — the semantic foundation
+$color-background:         var(--evo-color-bg);
+$color-surface:            var(--evo-color-surface);
+$color-surface-elevated:   var(--evo-color-surface-elevated);
+$color-surface-sunken:     var(--evo-color-surface-sunken);
+$color-surface-hover:      var(--evo-color-surface-hover);
+$color-surface-active:     var(--evo-color-surface-active);
+$color-border:             var(--evo-color-border);
+$color-border-strong:      var(--evo-color-border-strong);
+$color-border-subtle:      var(--evo-color-border-subtle);
+$color-text-primary:       var(--evo-color-text);
+$color-text-secondary:     var(--evo-color-text-secondary);
+$color-text-muted:         var(--evo-color-text-muted);
+$color-text-inverted:      var(--evo-color-text-inverted);
+$color-overlay:            var(--evo-color-overlay);
+$color-backdrop:           var(--evo-color-backdrop);
+
+// Skeleton
+$color-skeleton-base:      var(--evo-color-skeleton-base);
+$color-skeleton-highlight: var(--evo-color-skeleton-highlight);
+
+// ---------- Card defaults (theme-aware) ----------
+$evo-card-bg:        $color-surface-elevated;
+$evo-card-border:    $color-border;
+$evo-card-padding:   1rem 0.5rem;
+
+// ---------- Static design tokens (theme-independent) ----------
+
+// Button sizing
+$evo-btn-padding-y:       0.25rem;
+$evo-btn-padding-x:       0.63rem;
+$evo-btn-padding-y-sm:    0.13rem;
+$evo-btn-padding-x-sm:    0.38rem;
+$evo-btn-padding-y-lg:    0.37rem;
+$evo-btn-padding-x-lg:    0.88rem;
+
+$evo-btn-font-size:       0.875rem;
+$evo-btn-font-size-sm:    0.75rem;
+$evo-btn-font-size-lg:    1rem;
+$evo-btn-font-weight:     600;
+$evo-btn-line-height:     1.5;
+
+// Card sizing
+$card-width: 280px;
+$card-height: 380px;
+$card-padding: 1.25rem;
+
+// Border radius
+$radius-sm:   6px;
+$radius-md:   12px;
+$radius-lg:   16px;
+$radius-xl:   20px;
+$radius-full: 9999px;
+
+// Shadows — read `--evo-shadow-color` and `--evo-shadow-strength`
+// so they automatically deepen in dark mode.
+$shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
+$shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
+$shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
+$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+// Transitions
+$transition-fast:   150ms ease;
+$transition-normal: 250ms ease;
+$transition-slow:   400ms ease;
+$transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+// Typography
+$font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-display: 'Cal Sans', 'Inter', sans-serif;
+
+$text-xs:  0.75rem;
+$text-sm:  0.875rem;
+$text-base: 1rem;
+$text-lg:  1.125rem;
+$text-xl:  1.25rem;
+$text-2xl: 1.5rem;
+$text-3xl: 1.875rem;
+
+// Shape & motion
+$evo-border-radius:        8px;
+$evo-border-radius-sm:     4px;
+$evo-border-radius-lg:     12px;
+$evo-border-radius-pill:   9999px;
+
+$evo-btn-transition:       150ms ease;
+$evo-btn-disabled-opacity: 0.5;
+$evo-btn-outline-offset:   2px;
+$evo-btn-outline-width:    2px;

package/src/css/breadcrumb.module.scss

@@ -0,0 +1,50 @@
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  font-family: $font-sans;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  list-style: none;
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+  color: $color-text-muted;
+  font-size: $text-sm;
+  padding: 0 0.375rem;
+  list-style: none;
+  user-select: none;
+}
+
+.link {
+  font-size: $text-sm;
+  color: $evo-primary-color;
+  text-decoration: none;
+  transition: color $transition-fast;
+  border-radius: $radius-sm;
+
+  &:hover { color: $evo-primary-hover; text-decoration: underline; }
+  &:focus-visible { outline: 2px solid $evo-primary-focus; outline-offset: 2px; }
+}
+
+.text {
+  font-size: $text-sm;
+  color: $color-text-secondary;
+}
+
+.current {
+  color: $color-text-primary;
+  font-weight: 500;
+}