@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/badge.module.scss

@@ -1,82 +1,82 @@
-@use 'base/variables' as *;
-@use 'base/color' as *;
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  font-family: $font-sans;
-  font-weight: 600;
-  border-radius: $radius-full;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  line-height: 1;
-
-  &.sm { font-size: 0.65rem;  padding: 0.15rem 0.45rem; }
-  &.md { font-size: $text-xs; padding: 0.25rem 0.625rem; }
-  &.lg { font-size: $text-sm; padding: 0.375rem 0.75rem; }
-}
-
-// Solid
-.solid {
-  &.primary   { background: $evo-primary-color;  color: $evo-primary-fg;   border-color: $evo-primary-color; }
-  &.secondary { background: $color-surface-active; color: $color-text-primary; border-color: $color-border-strong; }
-  &.success   { background: $evo-success-color;   color: $evo-success-fg;   border-color: $evo-success-color; }
-  &.warning   { background: $evo-warning-color;   color: $evo-warning-text; border-color: $evo-warning-color; }
-  &.danger    { background: $evo-danger-color;    color: $evo-danger-fg;    border-color: $evo-danger-color; }
-  &.info      { background: $evo-info-color;      color: $evo-info-fg;      border-color: $evo-info-color; }
-}
-
-// Outline
-.outline {
-  background: transparent;
-  &.primary   { color: $evo-primary-color;    border-color: $evo-primary-color; }
-  &.secondary { color: $color-text-secondary; border-color: $color-border-strong; }
-  &.success   { color: $evo-success-color;    border-color: $evo-success-color; }
-  &.warning   { color: $evo-warning-color;    border-color: $evo-warning-color; }
-  &.danger    { color: $evo-danger-color;     border-color: $evo-danger-color; }
-  &.info      { color: $evo-info-color;       border-color: $evo-info-color; }
-}
-
-// Subtle
-.subtle {
-  &.primary   { background: color-mix(in srgb, $evo-primary-color 15%, transparent); color: $evo-primary-color; border-color: transparent; }
-  &.secondary { background: $color-surface-hover; color: $color-text-secondary; border-color: transparent; }
-  &.success   { background: color-mix(in srgb, $evo-success-color 15%, transparent); color: $evo-success-color; border-color: transparent; }
-  &.warning   { background: color-mix(in srgb, $evo-warning-color 15%, transparent); color: $evo-warning-color; border-color: transparent; }
-  &.danger    { background: color-mix(in srgb, $evo-danger-color  15%, transparent); color: $evo-danger-color;  border-color: transparent; }
-  &.info      { background: color-mix(in srgb, $evo-info-color    15%, transparent); color: $evo-info-color;    border-color: transparent; }
-}
-
-.dot {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background-color: currentColor;
-  flex-shrink: 0;
-}
-
-.removeBtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: currentColor;
-  opacity: 0.7;
-  font-size: 0.6rem;
-  padding: 0;
-  line-height: 1;
-  transition: opacity $transition-fast;
-  margin-left: 0.1rem;
-
-  &:hover { opacity: 1; }
-}
-
-.badgeGroup {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  align-items: center;
-}
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-family: $font-sans;
+  font-weight: 600;
+  border-radius: $radius-full;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: 1;
+
+  &.sm { font-size: 0.65rem;  padding: 0.15rem 0.45rem; }
+  &.md { font-size: $text-xs; padding: 0.25rem 0.625rem; }
+  &.lg { font-size: $text-sm; padding: 0.375rem 0.75rem; }
+}
+
+// Solid
+.solid {
+  &.primary   { background: $evo-primary-color;  color: $evo-primary-fg;   border-color: $evo-primary-color; }
+  &.secondary { background: $color-surface-active; color: $color-text-primary; border-color: $color-border-strong; }
+  &.success   { background: $evo-success-color;   color: $evo-success-fg;   border-color: $evo-success-color; }
+  &.warning   { background: $evo-warning-color;   color: $evo-warning-text; border-color: $evo-warning-color; }
+  &.danger    { background: $evo-danger-color;    color: $evo-danger-fg;    border-color: $evo-danger-color; }
+  &.info      { background: $evo-info-color;      color: $evo-info-fg;      border-color: $evo-info-color; }
+}
+
+// Outline
+.outline {
+  background: transparent;
+  &.primary   { color: $evo-primary-color;    border-color: $evo-primary-color; }
+  &.secondary { color: $color-text-secondary; border-color: $color-border-strong; }
+  &.success   { color: $evo-success-color;    border-color: $evo-success-color; }
+  &.warning   { color: $evo-warning-color;    border-color: $evo-warning-color; }
+  &.danger    { color: $evo-danger-color;     border-color: $evo-danger-color; }
+  &.info      { color: $evo-info-color;       border-color: $evo-info-color; }
+}
+
+// Subtle
+.subtle {
+  &.primary   { background: color-mix(in srgb, $evo-primary-color 15%, transparent); color: $evo-primary-color; border-color: transparent; }
+  &.secondary { background: $color-surface-hover; color: $color-text-secondary; border-color: transparent; }
+  &.success   { background: color-mix(in srgb, $evo-success-color 15%, transparent); color: $evo-success-color; border-color: transparent; }
+  &.warning   { background: color-mix(in srgb, $evo-warning-color 15%, transparent); color: $evo-warning-color; border-color: transparent; }
+  &.danger    { background: color-mix(in srgb, $evo-danger-color  15%, transparent); color: $evo-danger-color;  border-color: transparent; }
+  &.info      { background: color-mix(in srgb, $evo-info-color    15%, transparent); color: $evo-info-color;    border-color: transparent; }
+}
+
+.dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background-color: currentColor;
+  flex-shrink: 0;
+}
+
+.removeBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: currentColor;
+  opacity: 0.7;
+  font-size: 0.6rem;
+  padding: 0;
+  line-height: 1;
+  transition: opacity $transition-fast;
+  margin-left: 0.1rem;
+
+  &:hover { opacity: 1; }
+}
+
+.badgeGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-items: center;
+}

package/src/css/base/_color.scss

@@ -1,159 +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;
+// ===========================================
+// 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;