luaniverse 4.2.4 → 4.2.7

package/dist/styles.css

@@ -1,6 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Onest:wght@400;500;600;700&display=swap') layer(base);
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Onest:wght@400;500;600;700&display=swap')
+layer(base);
 
 @import 'react-day-picker/style.css';
+@import './theme.css';
 
 @import 'tailwindcss' prefix(lua);
 
@@ -52,21 +54,13 @@
   --color-destructive-active: hsl(var(--destructive-active));
   --color-black: #000000;
   --color-black-hover: #333333;
-  --color-neutral-50: #F9FAFB;
-  --color-neutral-100: #F4F4F4;
-  --color-neutral-200: #EBEBEB;
-  --color-neutral-300: #E6E6E6;
-  --color-neutral-400: #E0E0E0;
-  --color-neutral-500: #D1D5DB;
-  --color-neutral-600: #E5E7EB;
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --color-chart-1: hsl(var(--chart-1));
-  --color-chart-2: hsl(var(--chart-2));
-  --color-chart-3: hsl(var(--chart-3));
-  --color-chart-4: hsl(var(--chart-4));
-  --color-chart-5: hsl(var(--chart-5));
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f4f4f4;
+  --color-neutral-200: #ebebeb;
+  --color-neutral-300: #e6e6e6;
+  --color-neutral-400: #e0e0e0;
+  --color-neutral-500: #d1d5db;
+  --color-neutral-600: #e5e7eb;
 }
 
 /*
@@ -87,10 +81,6 @@
   }
 }
 
-
-
-
-
 @utility link-primary {
   /* Responsive breakpoints */
 
@@ -116,70 +106,16 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 218 100% 59%;
-    --primary-foreground: 0 0% 100%;
-    --primary-hover: 218 91% 56%;
-    --primary-active: 218 85% 52%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --secondary-hover: 240 4.8% 90%;
-    --secondary-active: 240 4.8% 85%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 351 100% 45%;
-    --destructive-foreground: 0 0% 100%;
-    --destructive-hover: 351 100% 40%;
-    --destructive-active: 351 100% 37%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --foreground: 240 10% 3.9%;
+    }
+  }
   .dark {
-    --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 218 100% 59%;
-    --primary-foreground: 0 0% 100%;
-    --primary-hover: 218 91% 56%;
-    --primary-active: 218 85% 52%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --secondary-hover: 240 3.7% 20%;
-    --secondary-active: 240 3.7% 25%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 351 100% 45%;
-    --destructive-foreground: 0 0% 100%;
-    --destructive-hover: 351 100% 40%;
-    --destructive-active: 351 100% 37%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
   }
 }
 
@@ -190,16 +126,21 @@
   body {
     @apply lua:bg-background lua:text-foreground lua:font-sans;
   }
-  
+
   /* Typography base styles */
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     @apply lua:font-heading lua:text-foreground;
   }
-  
+
   p {
     @apply lua:text-sm lua:leading-relaxed lua:font-sans lua:text-foreground;
   }
-  
+
   /* Link base styles */
   a {
     @apply lua:text-primary lua:underline-offset-4 lua:hover:underline lua:focus-visible:outline-2 lua:focus-visible:outline-ring lua:focus-visible:outline-offset-2 lua:focus-visible:rounded-sm;
@@ -207,55 +148,96 @@
   }
 }
 
+
 /* Sheet Animation Keyframes */
 @keyframes slide-in-from-top {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(0); }
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }
 
 @keyframes slide-in-from-bottom {
-  0% { transform: translateY(100%); }
-  100% { transform: translateY(0); }
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }
 
 @keyframes slide-in-from-left {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
 @keyframes slide-in-from-right {
-  0% { transform: translateX(100%); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
 @keyframes slide-out-to-top {
-  0% { transform: translateY(0); }
-  100% { transform: translateY(-100%); }
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
 }
 
 @keyframes slide-out-to-bottom {
-  0% { transform: translateY(0); }
-  100% { transform: translateY(100%); }
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
 }
 
 @keyframes slide-out-to-left {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-100%); }
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
 }
 
 @keyframes slide-out-to-right {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(100%); }
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 @keyframes fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes fade-out {
-  0% { opacity: 1; }
-  100% { opacity: 0; }
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 /* Sheet Animation Classes */
@@ -308,58 +290,58 @@
 }
 
 /* Data attribute variants for Sheet animations */
-.lua\:data-\[state\=open\]\:animate-in[data-state="open"] {
+.lua\:data-\[state\=open\]\:animate-in[data-state='open'] {
   animation: fade-in 0.2s ease-out;
 }
 
-.lua\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
+.lua\:data-\[state\=closed\]\:animate-out[data-state='closed'] {
   animation: fade-out 0.2s ease-out;
 }
 
-.lua\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
+.lua\:data-\[state\=open\]\:fade-in-0[data-state='open'] {
   animation: fade-in 0.2s ease-out;
 }
 
-.lua\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+.lua\:data-\[state\=closed\]\:fade-out-0[data-state='closed'] {
   animation: fade-out 0.2s ease-out;
 }
 
-.lua\:data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
+.lua\:data-\[state\=open\]\:slide-in-from-top[data-state='open'] {
   animation: slide-in-from-top 0.3s ease-out;
 }
 
-.lua\:data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
+.lua\:data-\[state\=closed\]\:slide-out-to-top[data-state='closed'] {
   animation: slide-out-to-top 0.3s ease-out;
 }
 
-.lua\:data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
+.lua\:data-\[state\=open\]\:slide-in-from-bottom[data-state='open'] {
   animation: slide-in-from-bottom 0.3s ease-out;
 }
 
-.lua\:data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
+.lua\:data-\[state\=closed\]\:slide-out-to-bottom[data-state='closed'] {
   animation: slide-out-to-bottom 0.3s ease-out;
 }
 
-.lua\:data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
+.lua\:data-\[state\=open\]\:slide-in-from-left[data-state='open'] {
   animation: slide-in-from-left 0.3s ease-out;
 }
 
-.lua\:data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
+.lua\:data-\[state\=closed\]\:slide-out-to-left[data-state='closed'] {
   animation: slide-out-to-left 0.3s ease-out;
 }
 
-.lua\:data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
+.lua\:data-\[state\=open\]\:slide-in-from-right[data-state='open'] {
   animation: slide-in-from-right 0.3s ease-out;
 }
 
-.lua\:data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
+.lua\:data-\[state\=closed\]\:slide-out-to-right[data-state='closed'] {
   animation: slide-out-to-right 0.3s ease-out;
 }
 
-.lua\:data-\[state\=open\]\:duration-500[data-state="open"] {
+.lua\:data-\[state\=open\]\:duration-500[data-state='open'] {
   animation-duration: 500ms;
 }
 
-.lua\:data-\[state\=closed\]\:duration-300[data-state="closed"] {
+.lua\:data-\[state\=closed\]\:duration-300[data-state='closed'] {
   animation-duration: 300ms;
-} 
+}

package/dist/tailwind.preset.js

@@ -2,8 +2,8 @@ import { luaniverseSafelist } from './safelist.js';
 
 /** @type {import('tailwindcss').Config} */
 export const luaniversePreset = {
-  // Dark mode disabled globally
-  darkMode: false,
+  // Dark mode enabled using class strategy
+  darkMode: 'class',
   // Safelist story-specific arbitrary values that are hard to standardize
   safelist: luaniverseSafelist,
   theme: {

package/dist/theme.css

@@ -0,0 +1,254 @@
+/**
+ * Luaniverse Semantic Color System
+ * 
+ * This theme uses a two-level token system:
+ * 1. @layer base: Raw HSL values (space-separated) for light mode in :root
+ * 2. @theme inline: Color tokens that wrap base values with hsl(var(...))
+ * 3. @media (prefers-color-scheme: dark): Dark mode HSL values in :root
+ * 
+ * Usage:
+ * - Use bg-card, text-foreground, bg-primary, etc. as regular Tailwind classes
+ * - Tokens automatically switch based on prefers-color-scheme - NO dark: prefixes needed
+ * - Example: className="lua:bg-card lua:text-foreground lua:border-border"
+ */
+
+@layer base {
+  :root {
+    /* Base Colors */
+    --background: 0 0% 100%; /* white */
+    --foreground: 222 47% 11%; /* gray-900 */
+
+    /* Card & Surface */
+    --card: 0 0% 100%; /* white */
+    --card-foreground: 222 47% 11%; /* gray-900 */
+
+    /* Popover */
+    --popover: 0 0% 100%; /* white */
+    --popover-foreground: 222 47% 11%; /* gray-900 */
+
+    /* Default (Emphasis - Black/Bold) */
+    --default: 0 0% 0%; /* black */
+    --default-foreground: 0 0% 100%; /* white */
+    --default-hover: 0 0% 10%; /* near-black */
+    --default-active: 0 0% 10%; /* near-black */
+
+    /* Primary (Brand - Blue) */
+    --primary: 221 83% 53%; /* blue-600 */
+    --primary-foreground: 0 0% 100%; /* white */
+    --primary-hover: 221 83% 45%; /* blue-700 */
+    --primary-active: 221 77% 40%; /* blue-800 */
+
+    /* Secondary (Neutral) */
+    --secondary: 220 13% 95%; /* gray-100 */
+    --secondary-foreground: 222 47% 11%; /* gray-900 */
+    --secondary-hover: 220 13% 91%; /* gray-200 */
+    --secondary-active: 220 13% 82%; /* gray-300 */
+
+    /* Muted */
+    --muted: 220 13% 95%; /* gray-100 */
+    --muted-foreground: 215 16% 47%; /* gray-600 */
+
+    /* Accent */
+    --accent: 221 83% 53%; /* blue-600 */
+    --accent-foreground: 0 0% 100%; /* white */
+    
+    /* Accent Subtle (for tabs, pills) */
+    --accent-subtle: 214 100% 97%; /* blue-50 - very light blue */
+    --accent-subtle-foreground: 213 97% 27%; /* blue-800 */
+    --accent-subtle-hover: 214 100% 92%; /* blue-100 */
+
+    /* Destructive (Danger) */
+    --destructive: 0 84% 60%; /* red-500 */
+    --destructive-foreground: 0 0% 100%; /* white */
+    --destructive-hover: 0 72% 51%; /* red-600 */
+    --destructive-active: 0 74% 42%; /* red-700 */
+
+    /* Success */
+    --success: 142 71% 45%; /* green-600 */
+    --success-foreground: 0 0% 100%; /* white */
+    --success-hover: 142 76% 36%; /* green-700 */
+
+    /* Warning */
+    --warning: 38 92% 50%; /* yellow-500 */
+    --warning-foreground: 0 0% 100%; /* white */
+    --warning-hover: 43 96% 56%; /* yellow-400 */
+
+    /* Border & Input */
+    --border: 220 13% 91%; /* gray-200 */
+    --input: 220 13% 91%; /* gray-200 */
+    --ring: 221 83% 53%; /* blue-600 */
+  }
+}
+
+@theme inline {
+  /* Base Color Tokens */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  /* Card & Surface Tokens */
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  /* Popover Tokens */
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  /* Default Tokens (Emphasis - Black/Bold) */
+  --color-default: hsl(var(--default));
+  --color-default-foreground: hsl(var(--default-foreground));
+  --color-default-hover: hsl(var(--default-hover));
+  --color-default-active: hsl(var(--default-active));
+
+  /* Primary Tokens (Brand - Blue) */
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-primary-hover: hsl(var(--primary-hover));
+  --color-primary-active: hsl(var(--primary-active));
+
+  /* Secondary Tokens (Neutral - Gray) */
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-secondary-hover: hsl(var(--secondary-hover));
+  --color-secondary-active: hsl(var(--secondary-active));
+
+  /* Muted Tokens */
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  /* Accent Tokens */
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  
+  /* Accent Subtle Tokens (for tabs, pills) */
+  --color-accent-subtle: hsl(var(--accent-subtle));
+  --color-accent-subtle-foreground: hsl(var(--accent-subtle-foreground));
+  --color-accent-subtle-hover: hsl(var(--accent-subtle-hover));
+
+  /* Destructive Tokens (Danger - Red) */
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-destructive-hover: hsl(var(--destructive-hover));
+  --color-destructive-active: hsl(var(--destructive-active));
+
+  /* Success Tokens (Green) */
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-success-hover: hsl(var(--success-hover));
+
+  /* Warning Tokens (Amber) */
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-warning-hover: hsl(var(--warning-hover));
+
+  /* Border, Input & Ring Tokens */
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Base Colors - Dark grays and off-whites */
+    --background: 222 47% 11%; /* gray-900 */
+    --foreground: 210 20% 98%; /* gray-50 */
+
+    /* Card & Surface - Slightly lighter than background for depth */
+    --card: 217 19% 18%; /* gray-800/850 - elevated surface */
+    --card-foreground: 210 20% 98%; /* gray-50 */
+
+    /* Popover - Slightly lighter than background for depth */
+    --popover: 217 19% 18%; /* gray-800/850 - elevated surface */
+    --popover-foreground: 210 20% 98%; /* gray-50 */
+
+    /* Default (Emphasis - Inverted for dark mode) */
+    --default: 220 13% 95%; /* gray-100 - light gray for dark bg */
+    --default-foreground: 222 47% 11%; /* gray-900 - dark text */
+    --default-hover: 210 20% 98%; /* gray-50 - lighter on hover */
+    --default-active: 220 13% 91%; /* gray-200 - darker on press */
+
+    /* Primary (Brand - Blue) - Slightly lighter for visibility */
+    --primary: 217 91% 60%; /* blue-500 */
+    --primary-foreground: 222 47% 11%; /* gray-900 */
+    --primary-hover: 213 94% 68%; /* blue-400 */
+    --primary-active: 221 83% 53%; /* blue-600 */
+
+    /* Secondary (Neutral) - Dark grays */
+    --secondary: 217 19% 27%; /* gray-700 */
+    --secondary-foreground: 210 20% 98%; /* gray-50 */
+    --secondary-hover: 215 25% 27%; /* gray-600 */
+    --secondary-active: 215 28% 17%; /* gray-800 */
+
+    /* Muted */
+    --muted: 217 19% 27%; /* gray-700 */
+    --muted-foreground: 215 16% 47%; /* gray-400 */
+
+    /* Accent */
+    --accent: 217 91% 60%; /* blue-500 */
+    --accent-foreground: 222 47% 11%; /* gray-900 */
+    
+    /* Accent Subtle (for tabs, pills) */
+    --accent-subtle: 215 25% 27%; /* gray-700 - dark subtle bg */
+    --accent-subtle-foreground: 213 94% 68%; /* blue-400 - bright blue text */
+    --accent-subtle-hover: 217 19% 35%; /* gray-600 - lighter hover */
+
+    /* Destructive (Danger) - Slightly muted */
+    --destructive: 0 84% 60%; /* red-500 */
+    --destructive-foreground: 0 0% 100%; /* white */
+    --destructive-hover: 0 91% 71%; /* red-400 */
+    --destructive-active: 0 72% 51%; /* red-600 */
+
+    /* Success - Slightly lighter */
+    --success: 142 71% 45%; /* green-600 */
+    --success-foreground: 0 0% 100%; /* white */
+    --success-hover: 142 69% 58%; /* green-500 */
+
+    /* Warning - Amber tones for better dark mode */
+    --warning: 38 92% 50%; /* amber-500 */
+    --warning-foreground: 222 47% 11%; /* gray-900 */
+    --warning-hover: 43 96% 56%; /* amber-400 */
+
+    /* Border & Input */
+    --border: 215 25% 27%; /* gray-700 */
+    --input: 215 25% 27%; /* gray-700 */
+    --ring: 213 94% 68%; /* blue-400 */
+  }
+}
+
+.rdp-root {
+  /* Calendar background */
+  --rdp-background-color: hsl(var(--card));
+  
+  /* Use semantic tokens for selected days instead of default blue */
+  --rdp-accent-color: hsl(var(--foreground));
+  --rdp-accent-background-color: hsl(var(--secondary));
+
+  /* Range selection colors */
+  --rdp-range_middle-background-color: hsl(var(--muted));
+  --rdp-range_middle-color: hsl(var(--foreground));
+  --rdp-range_start-background: hsl(var(--secondary));
+  --rdp-range_start-color: hsl(var(--default-foreground));
+  --rdp-range_end-background: hsl(var(--secondary));
+  --rdp-range_end-color: hsl(var(--foreground));
+
+  /* Today indicator - use foreground color with bold font (handled in classNames) */
+  --rdp-today-color: hsl(var(--foreground));
+}
+
+[data-theme='dark'] .rdp-root {
+  /* Calendar background and base colors for dark mode */
+  --rdp-background-color: hsl(var(--card));
+  
+  /* Use semantic tokens for selected days in dark mode */
+  --rdp-accent-color: hsl(var(--foreground));
+  --rdp-accent-background-color: hsl(var(--secondary));
+  
+  /* Range selection colors for dark mode */
+  --rdp-range_middle-background-color: hsl(var(--muted));
+  --rdp-range_middle-color: hsl(var(--foreground));
+  --rdp-range_start-background: hsl(var(--secondary));
+  --rdp-range_start-color: hsl(var(--foreground));
+  --rdp-range_end-background: hsl(var(--secondary));
+  --rdp-range_end-color: hsl(var(--foreground));
+  
+  /* Today indicator for dark mode */
+  --rdp-today-color: hsl(var(--foreground));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luaniverse",
-  "version": "4.2.4",
+  "version": "4.2.7",
   "description": "Lua Design System - A React component library for Lua applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -114,6 +114,7 @@
     "react-dom": "^18.3.1",
     "semantic-release": "^24.2.0",
     "storybook": "^8.3.6",
+    "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^4.1.11",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.3.5",