@almadar/ui 1.0.21 → 1.0.22

package/themes/copper.css

@@ -0,0 +1,203 @@
+/**
+ * Copper Theme — "Warm Industrial"
+ *
+ * Metallic copper and bronze tones with a functional, solid personality.
+ * Inspired by industrial metalwork, riveted surfaces, and forged components.
+ * Thicker borders, heavier font weights, and fast mechanical transitions
+ * create a utilitarian aesthetic that prioritizes clarity and durability
+ * over decoration.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="copper-light"] {
+    /* Shadows - Warm metallic, bronze-tinted */
+    --shadow-main: 0 1px 3px rgba(180, 83, 9, 0.1), 0 1px 2px rgba(180, 83, 9, 0.06);
+    --shadow-sm: 0 1px 2px rgba(180, 83, 9, 0.06);
+    --shadow-lg:
+        0 10px 25px -5px rgba(180, 83, 9, 0.12), 0 8px 10px -6px rgba(180, 83, 9, 0.08);
+    --shadow-inner: inset 0 1px 2px rgba(180, 83, 9, 0.06);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(180, 83, 9, 0.18);
+    --shadow-active: 0 1px 2px rgba(180, 83, 9, 0.06);
+
+    /* Border radius - Functional, not too rounded */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-full: 9999px;
+
+    /* Border width - Thick, industrial */
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+
+    /* Colors - Metallic copper and warm neutrals */
+    --color-primary: #b45309;
+    --color-primary-hover: #92400e;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #f5f0ea;
+    --color-secondary-hover: #ebe4da;
+    --color-secondary-foreground: #292524;
+
+    --color-accent: #78350f;
+    --color-accent-foreground: #fef3c7;
+
+    --color-muted: #f5f0ea;
+    --color-muted-foreground: #78716c;
+
+    --color-background: #faf8f5;
+    --color-foreground: #292524;
+    --color-card: #ffffff;
+    --color-card-foreground: #292524;
+    --color-surface: #f5f0ea;
+    --color-border: rgba(180, 83, 9, 0.25);
+    --color-input: rgba(180, 83, 9, 0.25);
+    --color-ring: #b45309;
+
+    /* 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 - Heavier weights, functional */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 700;
+    --letter-spacing: 0em;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 2;
+    --icon-color: #b45309;
+
+    /* Transitions - Mechanical, fast */
+    --transition-fast: 100ms;
+    --transition-normal: 200ms;
+    --transition-slow: 300ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Subtle, functional */
+    --hover-scale: 1.0;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 1px;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #b45309;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="copper-dark"] {
+    /* Shadows - Deep bronze glow on dark */
+    --shadow-main: 0 1px 3px rgba(217, 119, 6, 0.1), 0 1px 2px rgba(0, 0, 0, 0.22);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
+    --shadow-lg:
+        0 10px 25px -5px rgba(0, 0, 0, 0.38), 0 8px 10px -6px rgba(217, 119, 6, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.28);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(217, 119, 6, 0.16);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.22);
+
+    /* Border radius - Functional, not too rounded */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-full: 9999px;
+
+    /* Border width - Thick, industrial */
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+
+    /* Colors - Bright copper on dark bronze */
+    --color-primary: #d97706;
+    --color-primary-hover: #f59e0b;
+    --color-primary-foreground: #1a1410;
+
+    --color-secondary: #262018;
+    --color-secondary-hover: #302820;
+    --color-secondary-foreground: #e7e0d6;
+
+    --color-accent: #78350f;
+    --color-accent-foreground: #fef3c7;
+
+    --color-muted: #262018;
+    --color-muted-foreground: #d6d3d1;
+
+    --color-background: #1a1410;
+    --color-foreground: #e7e0d6;
+    --color-card: #262018;
+    --color-card-foreground: #e7e0d6;
+    --color-surface: #302820;
+    --color-border: rgba(180, 83, 9, 0.3);
+    --color-input: rgba(180, 83, 9, 0.3);
+    --color-ring: #d97706;
+
+    /* 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 - Heavier weights, functional */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 700;
+    --letter-spacing: 0em;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 2;
+    --icon-color: #d97706;
+
+    /* Transitions - Mechanical, fast */
+    --transition-fast: 100ms;
+    --transition-normal: 200ms;
+    --transition-slow: 300ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Subtle, functional */
+    --hover-scale: 1.0;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 1px;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #d97706;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/themes/ember.css

@@ -0,0 +1,206 @@
+/**
+ * Ember Theme — "Fire & Energy"
+ *
+ * A bold, energetic palette driven by deep reds and warm ambers.
+ * Designed for applications that need to convey power, urgency, and
+ * intensity. Features dramatic shadows with red glow in dark mode,
+ * heavier font weights for impactful typography, and punchy fast
+ * transitions that make every interaction feel decisive and forceful.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="ember-light"] {
+    /* Shadows - Warm, dramatic */
+    --shadow-main: 0 2px 6px rgba(220, 38, 38, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 3px rgba(220, 38, 38, 0.06);
+    --shadow-lg:
+        0 8px 24px -4px rgba(220, 38, 38, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
+    --shadow-inner: inset 0 1px 3px rgba(220, 38, 38, 0.06);
+    --shadow-none: none;
+    --shadow-hover:
+        0 8px 28px -4px rgba(220, 38, 38, 0.16), 0 4px 12px rgba(245, 158, 11, 0.08);
+    --shadow-active: 0 1px 3px rgba(220, 38, 38, 0.08);
+
+    /* Border radius - Controlled, not too rounded */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Warm reds and ambers */
+    --color-primary: #dc2626;
+    --color-primary-hover: #b91c1c;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #fef2f2;
+    --color-secondary-hover: #fee2e2;
+    --color-secondary-foreground: #7f1d1d;
+
+    --color-accent: #f59e0b;
+    --color-accent-foreground: #451a03;
+
+    --color-muted: #fef2f2;
+    --color-muted-foreground: #78716c;
+
+    --color-background: #fef2f2;
+    --color-foreground: #450a0a;
+    --color-card: #ffffff;
+    --color-card-foreground: #450a0a;
+    --color-surface: #fee2e2;
+    --color-border: rgba(220, 38, 38, 0.2);
+    --color-input: rgba(220, 38, 38, 0.25);
+    --color-ring: #dc2626;
+
+    /* Semantic colors */
+    --color-error: #be123c;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #d97706;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Bold, heavy */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0em;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 2.25;
+    --icon-color: #dc2626;
+
+    /* Transitions - Fast, punchy */
+    --transition-fast: 80ms;
+    --transition-normal: 150ms;
+    --transition-slow: 250ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Energetic */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.96;
+    --active-translate-y: 1px;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #dc2626;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="ember-dark"] {
+    /* Shadows - Dramatic red glow */
+    --shadow-main:
+        0 2px 8px rgba(220, 38, 38, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-sm: 0 1px 4px rgba(220, 38, 38, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-lg:
+        0 8px 28px rgba(220, 38, 38, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-none: none;
+    --shadow-hover:
+        0 8px 32px rgba(220, 38, 38, 0.25), 0 4px 16px rgba(245, 158, 11, 0.1);
+    --shadow-active: 0 2px 6px rgba(220, 38, 38, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
+
+    /* Border radius - Controlled, not too rounded */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Deep red-black */
+    --color-primary: #f87171;
+    --color-primary-hover: #fca5a5;
+    --color-primary-foreground: #1a0505;
+
+    --color-secondary: #2a0a0a;
+    --color-secondary-hover: #3d1111;
+    --color-secondary-foreground: #fee2e2;
+
+    --color-accent: #f59e0b;
+    --color-accent-foreground: #451a03;
+
+    --color-muted: #2a0a0a;
+    --color-muted-foreground: #fca5a5;
+
+    --color-background: #1a0505;
+    --color-foreground: #fee2e2;
+    --color-card: #2a0a0a;
+    --color-card-foreground: #fee2e2;
+    --color-surface: #3d1111;
+    --color-border: rgba(245, 158, 11, 0.2);
+    --color-input: rgba(245, 158, 11, 0.25);
+    --color-ring: #f87171;
+
+    /* Semantic colors - Brighter for dark mode */
+    --color-error: #fb7185;
+    --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 - Bold, heavy */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0em;
+    --line-height: 1.5;
+
+    /* Icon styling */
+    --icon-stroke-width: 2.25;
+    --icon-color: #f87171;
+
+    /* Transitions - Fast, punchy */
+    --transition-fast: 80ms;
+    --transition-normal: 150ms;
+    --transition-slow: 250ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Energetic */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.96;
+    --active-translate-y: 1px;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #f87171;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/themes/forest.css

@@ -0,0 +1,206 @@
+/**
+ * Forest Theme - "Woodland Serenity"
+ *
+ * Inspired by the calm of a sunlit forest. Features warm organic shadows
+ * with brown tints, natural green tones from deep emerald to soft sage,
+ * and gentle organic curves that evoke leaves and bark. Natural-paced
+ * transitions create a grounded, earthy, tranquil experience.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="forest-light"] {
+    /* Shadows - Warm organic, brown-tinted */
+    --shadow-main:
+        0 3px 10px rgba(45, 106, 79, 0.1), 0 1px 3px rgba(62, 39, 15, 0.06);
+    --shadow-sm: 0 2px 4px rgba(62, 39, 15, 0.07);
+    --shadow-lg:
+        0 8px 24px rgba(45, 106, 79, 0.12), 0 4px 8px rgba(62, 39, 15, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(62, 39, 15, 0.06);
+    --shadow-none: none;
+    --shadow-hover:
+        0 10px 32px rgba(45, 106, 79, 0.16), 0 4px 10px rgba(62, 39, 15, 0.08);
+    --shadow-active: 0 2px 6px rgba(45, 106, 79, 0.1);
+
+    /* Border radius - Organic curves */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Forest green on warm light background */
+    --color-primary: #2d6a4f;
+    --color-primary-hover: #1b4332;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #f0f5f1;
+    --color-secondary-hover: #dfe8e0;
+    --color-secondary-foreground: #1b4332;
+
+    --color-accent: #95d5b2;
+    --color-accent-foreground: #1b4332;
+
+    --color-muted: #f0f5f1;
+    --color-muted-foreground: #5f7a68;
+
+    --color-background: #f8faf8;
+    --color-foreground: #1a2e22;
+    --color-card: #ffffff;
+    --color-card-foreground: #1a2e22;
+    --color-surface: #f0f5f1;
+    --color-border: rgba(45, 106, 79, 0.2);
+    --color-input: rgba(45, 106, 79, 0.15);
+    --color-ring: #2d6a4f;
+
+    /* 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 - Natural, grounded */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: 0em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #2d6a4f;
+
+    /* Transitions - Natural pace */
+    --transition-fast: 150ms;
+    --transition-normal: 300ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --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: #2d6a4f;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="forest-dark"] {
+    /* Shadows - Warm earthy glow from primary */
+    --shadow-main:
+        0 3px 12px rgba(82, 183, 136, 0.1), 0 1px 3px rgba(0, 0, 0, 0.15);
+    --shadow-sm: 0 2px 5px rgba(82, 183, 136, 0.07);
+    --shadow-lg:
+        0 8px 28px rgba(82, 183, 136, 0.18), 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 36px rgba(82, 183, 136, 0.25), 0 4px 12px rgba(149, 213, 178, 0.12);
+    --shadow-active: 0 2px 6px rgba(82, 183, 136, 0.15);
+
+    /* Border radius - Organic curves */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Bright sage on deep forest */
+    --color-primary: #52b788;
+    --color-primary-hover: #74c69d;
+    --color-primary-foreground: #081c11;
+
+    --color-secondary: #142a1c;
+    --color-secondary-hover: #1e3a28;
+    --color-secondary-foreground: #d4e8db;
+
+    --color-accent: #95d5b2;
+    --color-accent-foreground: #081c11;
+
+    --color-muted: #142a1c;
+    --color-muted-foreground: #88ad96;
+
+    --color-background: #0c1a12;
+    --color-foreground: #e6f0ea;
+    --color-card: #12251a;
+    --color-card-foreground: #e6f0ea;
+    --color-surface: #142a1c;
+    --color-border: rgba(82, 183, 136, 0.2);
+    --color-input: rgba(82, 183, 136, 0.22);
+    --color-ring: #52b788;
+
+    /* 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 - Natural, grounded */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: 0em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #52b788;
+
+    /* Transitions - Natural pace */
+    --transition-fast: 150ms;
+    --transition-normal: 300ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --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: #52b788;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/themes/index.css

@@ -6,7 +6,22 @@
  *   [data-theme="themename-dark"] { ... }
  */
 
+/* Core themes */
 @import "./wireframe.css";
 @import "./minimalist.css";
 @import "./almadar.css";
 @import "./trait-wars.css";
+
+/* Extended themes */
+@import "./ocean.css";
+@import "./forest.css";
+@import "./sunset.css";
+@import "./lavender.css";
+@import "./rose.css";
+@import "./slate.css";
+@import "./ember.css";
+@import "./midnight.css";
+@import "./sand.css";
+@import "./neon.css";
+@import "./arctic.css";
+@import "./copper.css";