@almadar/ui 1.0.21 → 1.0.23

package/themes/lavender.css

@@ -0,0 +1,201 @@
+/**
+ * Lavender Theme — "Creative Studio"
+ *
+ * Violet/purple palette with soft, creative, and playful aesthetics.
+ * Pillowy rounded corners, bouncy transitions, and purple-tinted shadows
+ * make this theme ideal for creative tools, design apps, and playful UIs.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="lavender-light"] {
+    /* Shadows - Purple-tinted, soft */
+    --shadow-main: 0 1px 3px rgba(124, 58, 237, 0.1), 0 1px 2px rgba(124, 58, 237, 0.06);
+    --shadow-sm: 0 1px 2px rgba(124, 58, 237, 0.06);
+    --shadow-lg:
+        0 10px 25px -5px rgba(124, 58, 237, 0.15), 0 8px 10px -6px rgba(124, 58, 237, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(124, 58, 237, 0.08);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(124, 58, 237, 0.25);
+    --shadow-active: 0 1px 2px rgba(124, 58, 237, 0.06);
+
+    /* Border radius - Pillowy, very rounded */
+    --radius-none: 0px;
+    --radius-sm: 12px;
+    --radius-md: 16px;
+    --radius-lg: 24px;
+    --radius-xl: 32px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Violet palette, soft and creative */
+    --color-primary: #7c3aed;
+    --color-primary-hover: #6d28d9;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #f5f3ff;
+    --color-secondary-hover: #ede9fe;
+    --color-secondary-foreground: #5b21b6;
+
+    --color-accent: #a78bfa;
+    --color-accent-foreground: #2e1065;
+
+    --color-muted: #ede9fe;
+    --color-muted-foreground: #6b7280;
+
+    --color-background: #faf5ff;
+    --color-foreground: #2e1065;
+    --color-card: #ffffff;
+    --color-card-foreground: #2e1065;
+    --color-surface: #f3e8ff;
+    --color-border: rgba(124, 58, 237, 0.2);
+    --color-input: rgba(124, 58, 237, 0.15);
+    --color-ring: #7c3aed;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Clean, slightly loose */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.01em;
+    --line-height: 1.6;
+
+    /* Icon styling - Violet tint */
+    --icon-stroke-width: 1.5;
+    --icon-color: #7c3aed;
+
+    /* Transitions - Bouncy, playful */
+    --transition-fast: 180ms;
+    --transition-normal: 300ms;
+    --transition-slow: 450ms;
+    --transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    /* Hover/Active transforms - Playful lift */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #7c3aed;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="lavender-dark"] {
+    /* Shadows - Deep purple-tinted */
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(124, 58, 237, 0.15);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
+    --shadow-lg:
+        0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(124, 58, 237, 0.2);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(124, 58, 237, 0.35);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.25);
+
+    /* Border radius - Pillowy, very rounded */
+    --radius-none: 0px;
+    --radius-sm: 12px;
+    --radius-md: 16px;
+    --radius-lg: 24px;
+    --radius-xl: 32px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Deep purple dark mode */
+    --color-primary: #a78bfa;
+    --color-primary-hover: #c4b5fd;
+    --color-primary-foreground: #2e1065;
+
+    --color-secondary: #1a0d30;
+    --color-secondary-hover: #251445;
+    --color-secondary-foreground: #e9d5ff;
+
+    --color-accent: #a78bfa;
+    --color-accent-foreground: #2e1065;
+
+    --color-muted: #1a0d30;
+    --color-muted-foreground: #c4b5fd;
+
+    --color-background: #0f0720;
+    --color-foreground: #f3e8ff;
+    --color-card: #1a0d30;
+    --color-card-foreground: #f3e8ff;
+    --color-surface: #251445;
+    --color-border: rgba(167, 139, 250, 0.2);
+    --color-input: rgba(167, 139, 250, 0.15);
+    --color-ring: #a78bfa;
+
+    /* Semantic colors - Brighter for dark mode */
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #60a5fa;
+    --color-info-foreground: #000000;
+
+    /* Typography */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.01em;
+    --line-height: 1.6;
+
+    /* Icon styling - Lighter violet for dark */
+    --icon-stroke-width: 1.5;
+    --icon-color: #a78bfa;
+
+    /* Transitions - Bouncy, playful */
+    --transition-fast: 180ms;
+    --transition-normal: 300ms;
+    --transition-slow: 450ms;
+    --transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    /* Hover/Active transforms - Playful lift */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #a78bfa;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/themes/midnight.css

@@ -0,0 +1,202 @@
+/**
+ * Midnight Theme — "Noir Elegance"
+ *
+ * Indigo/navy palette with sophisticated and luxurious aesthetics.
+ * Refined corners, slow luxurious transitions, and deep indigo-tinted
+ * shadows create an atmosphere of understated elegance, perfect for
+ * dashboards, analytics, and professional enterprise UIs.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="midnight-light"] {
+    /* Shadows - Indigo-tinted, deep */
+    --shadow-main: 0 1px 3px rgba(99, 102, 241, 0.1), 0 1px 2px rgba(99, 102, 241, 0.06);
+    --shadow-sm: 0 1px 2px rgba(99, 102, 241, 0.06);
+    --shadow-lg:
+        0 10px 25px -5px rgba(99, 102, 241, 0.15), 0 8px 10px -6px rgba(99, 102, 241, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(99, 102, 241, 0.08);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(99, 102, 241, 0.22);
+    --shadow-active: 0 1px 2px rgba(99, 102, 241, 0.06);
+
+    /* Border radius - Refined */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 18px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Indigo palette, sophisticated */
+    --color-primary: #6366f1;
+    --color-primary-hover: #4f46e5;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #eef2ff;
+    --color-secondary-hover: #e0e7ff;
+    --color-secondary-foreground: #3730a3;
+
+    --color-accent: #818cf8;
+    --color-accent-foreground: #1e1b4b;
+
+    --color-muted: #e0e7ff;
+    --color-muted-foreground: #6b7280;
+
+    --color-background: #eef2ff;
+    --color-foreground: #1e1b4b;
+    --color-card: #ffffff;
+    --color-card-foreground: #1e1b4b;
+    --color-surface: #e0e7ff;
+    --color-border: rgba(99, 102, 241, 0.2);
+    --color-input: rgba(99, 102, 241, 0.15);
+    --color-ring: #6366f1;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Wide, elegant */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 300;
+    --font-weight-medium: 450;
+    --font-weight-bold: 600;
+    --letter-spacing: 0.02em;
+    --line-height: 1.6;
+
+    /* Icon styling - Indigo tint */
+    --icon-stroke-width: 1.5;
+    --icon-color: #6366f1;
+
+    /* Transitions - Slow, luxurious */
+    --transition-fast: 200ms;
+    --transition-normal: 400ms;
+    --transition-slow: 600ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Dignified, minimal */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #6366f1;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="midnight-dark"] {
+    /* Shadows - Deep indigo-tinted */
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(99, 102, 241, 0.1);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-lg:
+        0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(99, 102, 241, 0.15);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.35);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(129, 140, 248, 0.3);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+    /* Border radius - Refined */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 18px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Near-black indigo dark mode */
+    --color-primary: #818cf8;
+    --color-primary-hover: #a5b4fc;
+    --color-primary-foreground: #1e1b4b;
+
+    --color-secondary: #12122a;
+    --color-secondary-hover: #1e1e3d;
+    --color-secondary-foreground: #c7d2fe;
+
+    --color-accent: #818cf8;
+    --color-accent-foreground: #1e1b4b;
+
+    --color-muted: #1e1e3d;
+    --color-muted-foreground: #a5b4fc;
+
+    --color-background: #0a0a1a;
+    --color-foreground: #e0e7ff;
+    --color-card: #12122a;
+    --color-card-foreground: #e0e7ff;
+    --color-surface: #1e1e3d;
+    --color-border: rgba(129, 140, 248, 0.2);
+    --color-input: rgba(129, 140, 248, 0.15);
+    --color-ring: #818cf8;
+
+    /* Semantic colors - Brighter for dark mode */
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #60a5fa;
+    --color-info-foreground: #000000;
+
+    /* Typography */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 300;
+    --font-weight-medium: 450;
+    --font-weight-bold: 600;
+    --letter-spacing: 0.02em;
+    --line-height: 1.6;
+
+    /* Icon styling - Lighter indigo for dark */
+    --icon-stroke-width: 1.5;
+    --icon-color: #818cf8;
+
+    /* Transitions - Slow, luxurious */
+    --transition-fast: 200ms;
+    --transition-normal: 400ms;
+    --transition-slow: 600ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Dignified, minimal */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #818cf8;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/themes/neon.css

@@ -0,0 +1,208 @@
+/**
+ * Neon Theme — "Cyberpunk"
+ *
+ * A high-contrast cyberpunk palette with bright cyan and pink on dark
+ * backgrounds. Features neon glow box-shadows that intensify on hover,
+ * razor-sharp corners for a tech aesthetic, thick outlined borders, and
+ * near-instant linear transitions that feel digital and responsive.
+ * Wide letter-spacing and heavy weights evoke sci-fi terminal readouts.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="neon-light"] {
+    /* Shadows - Soft standard (light mode is more restrained) */
+    --shadow-main: 0 2px 8px rgba(34, 211, 238, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 4px rgba(34, 211, 238, 0.08);
+    --shadow-lg:
+        0 6px 20px rgba(34, 211, 238, 0.12), 0 3px 8px rgba(0, 0, 0, 0.06);
+    --shadow-inner: inset 0 1px 3px rgba(34, 211, 238, 0.06);
+    --shadow-none: none;
+    --shadow-hover:
+        0 6px 24px rgba(34, 211, 238, 0.16), 0 2px 8px rgba(244, 114, 182, 0.06);
+    --shadow-active: 0 1px 4px rgba(34, 211, 238, 0.1);
+
+    /* Border radius - Sharp, tech aesthetic */
+    --radius-none: 0px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 6px;
+    --radius-full: 9999px;
+
+    /* Border width - Thick outlined look */
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+
+    /* Colors - Teal-tinted light mode */
+    --color-primary: #0891b2;
+    --color-primary-hover: #0e7490;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #ccfbf1;
+    --color-secondary-hover: #99f6e4;
+    --color-secondary-foreground: #134e4a;
+
+    --color-accent: #ec4899;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #ccfbf1;
+    --color-muted-foreground: #64748b;
+
+    --color-background: #f0fdfa;
+    --color-foreground: #134e4a;
+    --color-card: #ffffff;
+    --color-card-foreground: #134e4a;
+    --color-surface: #ccfbf1;
+    --color-border: rgba(34, 211, 238, 0.3);
+    --color-input: rgba(34, 211, 238, 0.35);
+    --color-ring: #22d3ee;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Wide, tech */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0.05em;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 2.0;
+    --icon-color: #22d3ee;
+
+    /* Transitions - Instant, digital */
+    --transition-fast: 50ms;
+    --transition-normal: 100ms;
+    --transition-slow: 150ms;
+    --transition-timing: linear;
+
+    /* Hover/Active transforms - Glow comes from shadow, not movement */
+    --hover-scale: 1.0;
+    --hover-translate-y: 0;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #22d3ee;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="neon-dark"] {
+    /* Shadows - NEON GLOW effect */
+    --shadow-main:
+        0 0 12px rgba(34, 211, 238, 0.3), 0 4px 14px rgba(0, 0, 0, 0.4);
+    --shadow-sm:
+        0 0 6px rgba(34, 211, 238, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
+    --shadow-lg:
+        0 0 24px rgba(34, 211, 238, 0.4), 0 8px 30px rgba(0, 0, 0, 0.5);
+    --shadow-inner: inset 0 0 8px rgba(34, 211, 238, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-none: none;
+    --shadow-hover:
+        0 0 20px rgba(34, 211, 238, 0.5), 0 0 40px rgba(244, 114, 182, 0.2);
+    --shadow-active:
+        0 0 8px rgba(34, 211, 238, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
+
+    /* Border radius - Sharp, tech aesthetic */
+    --radius-none: 0px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 6px;
+    --radius-full: 9999px;
+
+    /* Border width - Thick outlined look */
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+
+    /* Colors - Cyberpunk dark */
+    --color-primary: #22d3ee;
+    --color-primary-hover: #06b6d4;
+    --color-primary-foreground: #042f2e;
+
+    --color-secondary: #0f172a;
+    --color-secondary-hover: #1e293b;
+    --color-secondary-foreground: #e2e8f0;
+
+    --color-accent: #f472b6;
+    --color-accent-foreground: #4a044e;
+
+    --color-muted: #1e293b;
+    --color-muted-foreground: #67e8f9;
+
+    --color-background: #020617;
+    --color-foreground: #e2e8f0;
+    --color-card: #0f172a;
+    --color-card-foreground: #e2e8f0;
+    --color-surface: #1e293b;
+    --color-border: rgba(34, 211, 238, 0.3);
+    --color-input: rgba(34, 211, 238, 0.35);
+    --color-ring: #22d3ee;
+
+    /* Semantic colors - Neon-bright for dark mode */
+    --color-error: #ff6b6b;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #38bdf8;
+    --color-info-foreground: #000000;
+
+    /* Typography - Wide, tech */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0.05em;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 2.0;
+    --icon-color: #22d3ee;
+
+    /* Transitions - Instant, digital */
+    --transition-fast: 50ms;
+    --transition-normal: 100ms;
+    --transition-slow: 150ms;
+    --transition-timing: linear;
+
+    /* Hover/Active transforms - Glow comes from shadow, not movement */
+    --hover-scale: 1.0;
+    --hover-translate-y: 0;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #22d3ee;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}