luaniverse 4.2.4 → 4.2.6

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luaniverse",
-  "version": "4.2.4",
+  "version": "4.2.6",
   "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",