luaniverse 4.2.6 → 4.2.8

package/dist/tailwind.preset.js

@@ -32,6 +32,10 @@ export const luaniversePreset = {
           hover: 'hsl(var(--destructive-hover, 351 100% 40%))', // Fallback to #CC001E
           active: 'hsl(var(--destructive-active, 351 100% 37%))', // Fallback to #BF001C
         },
+        info: {
+          DEFAULT: 'hsl(var(--info, 217 91% 60%))', // Fallback to blue-500
+          foreground: 'hsl(var(--info-foreground, 222 47% 11%))', // Fallback to dark
+        },
         // Brand neutral colors
         black: {
           DEFAULT: '#000000',

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: 220 13% 12%;
+    --foreground: 210 20% 98%;
+
+    /* 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 - Still prominent but comfortable) */
+    --default: 215 25% 35%; /* gray-600/650 - medium-light gray */
+    --default-foreground: 210 20% 98%; /* gray-50 - off-white text */
+    --default-hover: 217 19% 40%; /* slightly lighter on hover */
+    --default-active: 215 25% 30%; /* slightly darker on press */
+
+    /* Primary (Brand - Blue) - Brighter and more vibrant for CTAs */
+    --primary: 217 95% 65%; /* blue-450 - more saturated and lighter */
+    --primary-foreground: 210 20% 98%; /* gray-50 - off-white for better contrast */
+    --primary-hover: 213 97% 70%; /* blue-400 - brighter hover */
+    --primary-active: 217 91% 60%; /* blue-500 - original as active */
+
+    /* 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.6",
+  "version": "4.2.8",
   "description": "Lua Design System - A React component library for Lua applications",
   "type": "module",
   "main": "dist/index.cjs",