@almadar/ui 1.0.21 → 1.0.22

package/themes/slate.css

@@ -0,0 +1,201 @@
+/**
+ * Slate Theme — "Corporate Edge"
+ *
+ * A cool gray, professional palette built for corporate dashboards
+ * and business applications. Features sharp, almost-square corners,
+ * minimal shadows with small offsets, and snappy transitions that
+ * convey precision and efficiency. Heavy Inter weights anchor the
+ * typography with tight negative letter-spacing for a dense, data-rich feel.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="slate-light"] {
+    /* Shadows - Sharp minimal (small offset, low blur) */
+    --shadow-main: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
+    --shadow-sm: 0 1px 1px rgba(15, 23, 42, 0.04);
+    --shadow-lg: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
+    --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 4px 12px -4px rgba(15, 23, 42, 0.1);
+    --shadow-active: 0 1px 1px rgba(15, 23, 42, 0.04);
+
+    /* Border radius - Almost sharp, corporate */
+    --radius-none: 0px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 8px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Cool slate grays */
+    --color-primary: #475569;
+    --color-primary-hover: #334155;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #f1f5f9;
+    --color-secondary-hover: #e2e8f0;
+    --color-secondary-foreground: #1e293b;
+
+    --color-accent: #0ea5e9;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #f1f5f9;
+    --color-muted-foreground: #64748b;
+
+    --color-background: #f8fafc;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f1f5f9;
+    --color-border: #cbd5e1;
+    --color-input: #cbd5e1;
+    --color-ring: #475569;
+
+    /* 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 */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: -0.02em;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #475569;
+
+    /* Transitions - Snappy */
+    --transition-fast: 100ms;
+    --transition-normal: 200ms;
+    --transition-slow: 300ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - No scale, subtle vertical lift */
+    --hover-scale: 1.0;
+    --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: #475569;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="slate-dark"] {
+    /* Shadows - Subtle dark corporate */
+    --shadow-main: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.15);
+    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.15);
+    --shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-none: none;
+    --shadow-hover: 0 4px 12px -4px rgba(0, 0, 0, 0.35);
+    --shadow-active: 0 1px 1px rgba(0, 0, 0, 0.15);
+
+    /* Border radius - Almost sharp, corporate */
+    --radius-none: 0px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 8px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Deep slate dark */
+    --color-primary: #94a3b8;
+    --color-primary-hover: #cbd5e1;
+    --color-primary-foreground: #0b1120;
+
+    --color-secondary: #1e293b;
+    --color-secondary-hover: #334155;
+    --color-secondary-foreground: #e2e8f0;
+
+    --color-accent: #0ea5e9;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #1e293b;
+    --color-muted-foreground: #94a3b8;
+
+    --color-background: #0b1120;
+    --color-foreground: #f1f5f9;
+    --color-card: #1e293b;
+    --color-card-foreground: #f1f5f9;
+    --color-surface: #1e293b;
+    --color-border: #334155;
+    --color-input: #334155;
+    --color-ring: #0ea5e9;
+
+    /* 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: 700;
+    --letter-spacing: -0.02em;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #94a3b8;
+
+    /* Transitions - Snappy */
+    --transition-fast: 100ms;
+    --transition-normal: 200ms;
+    --transition-slow: 300ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - No scale, subtle vertical lift */
+    --hover-scale: 1.0;
+    --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: #0ea5e9;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/themes/sunset.css

@@ -0,0 +1,206 @@
+/**
+ * Sunset Theme - "Golden Hour"
+ *
+ * Inspired by the warmth of a setting sun. Features golden glowing shadows,
+ * very rounded playful border radii, and a vibrant coral-to-amber palette.
+ * Pronounced hover lifts and snappy transitions create an energetic, warm,
+ * inviting experience full of buoyant energy.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="sunset-light"] {
+    /* Shadows - Warm golden glow */
+    --shadow-main:
+        0 4px 12px rgba(231, 111, 81, 0.1), 0 1px 3px rgba(244, 162, 97, 0.08);
+    --shadow-sm: 0 2px 5px rgba(244, 162, 97, 0.08);
+    --shadow-lg:
+        0 8px 28px rgba(231, 111, 81, 0.14), 0 4px 10px rgba(244, 162, 97, 0.08);
+    --shadow-inner: inset 0 1px 2px rgba(231, 111, 81, 0.06);
+    --shadow-none: none;
+    --shadow-hover:
+        0 12px 36px rgba(231, 111, 81, 0.2), 0 4px 12px rgba(244, 162, 97, 0.12);
+    --shadow-active: 0 2px 6px rgba(231, 111, 81, 0.12);
+
+    /* Border radius - Very rounded, playful */
+    --radius-none: 0px;
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 20px;
+    --radius-xl: 24px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Coral on warm light background */
+    --color-primary: #e76f51;
+    --color-primary-hover: #d4533a;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #fef3ee;
+    --color-secondary-hover: #fce5d8;
+    --color-secondary-foreground: #5c2a1a;
+
+    --color-accent: #f4a261;
+    --color-accent-foreground: #3d1e0a;
+
+    --color-muted: #fef3ee;
+    --color-muted-foreground: #8c6354;
+
+    --color-background: #fefaf8;
+    --color-foreground: #2c1810;
+    --color-card: #ffffff;
+    --color-card-foreground: #2c1810;
+    --color-surface: #fef3ee;
+    --color-border: rgba(231, 111, 81, 0.2);
+    --color-input: rgba(231, 111, 81, 0.15);
+    --color-ring: #e76f51;
+
+    /* 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: #0ea5e9;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Tight, expressive */
+    --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.02em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #e76f51;
+
+    /* Transitions - Snappy and warm */
+    --transition-fast: 150ms;
+    --transition-normal: 280ms;
+    --transition-slow: 450ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Larger scale, pronounced lift */
+    --hover-scale: 1.03;
+    --hover-translate-y: -3px;
+    --hover-translate-x: 0;
+    --active-scale: 0.97;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #e76f51;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="sunset-dark"] {
+    /* Shadows - Warm amber glow from primary */
+    --shadow-main:
+        0 4px 14px rgba(244, 132, 95, 0.12), 0 1px 3px rgba(0, 0, 0, 0.15);
+    --shadow-sm: 0 2px 6px rgba(244, 132, 95, 0.08);
+    --shadow-lg:
+        0 8px 30px rgba(244, 132, 95, 0.2), 0 4px 10px rgba(0, 0, 0, 0.12);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.15);
+    --shadow-none: none;
+    --shadow-hover:
+        0 12px 40px rgba(244, 132, 95, 0.3), 0 4px 12px rgba(244, 162, 97, 0.15);
+    --shadow-active: 0 2px 8px rgba(244, 132, 95, 0.18);
+
+    /* Border radius - Very rounded, playful */
+    --radius-none: 0px;
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 20px;
+    --radius-xl: 24px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Bright coral on deep amber */
+    --color-primary: #f4845f;
+    --color-primary-hover: #f6a085;
+    --color-primary-foreground: #1a0800;
+
+    --color-secondary: #261510;
+    --color-secondary-hover: #3a201a;
+    --color-secondary-foreground: #f5ddd4;
+
+    --color-accent: #f4a261;
+    --color-accent-foreground: #1a0e08;
+
+    --color-muted: #261510;
+    --color-muted-foreground: #b88a78;
+
+    --color-background: #1a0e08;
+    --color-foreground: #f5ebe6;
+    --color-card: #221612;
+    --color-card-foreground: #f5ebe6;
+    --color-surface: #261510;
+    --color-border: rgba(244, 132, 95, 0.22);
+    --color-input: rgba(244, 132, 95, 0.25);
+    --color-ring: #f4845f;
+
+    /* 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: #38bdf8;
+    --color-info-foreground: #000000;
+
+    /* Typography - Tight, expressive */
+    --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.02em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #f4845f;
+
+    /* Transitions - Snappy and warm */
+    --transition-fast: 150ms;
+    --transition-normal: 280ms;
+    --transition-slow: 450ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Larger scale, pronounced lift */
+    --hover-scale: 1.03;
+    --hover-translate-y: -3px;
+    --hover-translate-x: 0;
+    --active-scale: 0.97;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #f4845f;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/dist/chunk-4FRUCUO5.js

@@ -1,14 +0,0 @@
-import { ThemeProvider, useTheme } from './chunk-I5RSZIOE.js';
-
-// context/DesignThemeContext.tsx
-var DesignThemeProvider = ThemeProvider;
-function useDesignTheme() {
-  const { theme, setTheme, availableThemes } = useTheme();
-  return {
-    designTheme: theme,
-    setDesignTheme: setTheme,
-    availableThemes: availableThemes.map((t) => t.name)
-  };
-}
-
-export { DesignThemeProvider, useDesignTheme };