@almadar/ui 1.0.21 → 1.0.22

package/themes/ocean.css

@@ -0,0 +1,206 @@
+/**
+ * Ocean Theme - "Deep Sea Calm"
+ *
+ * Inspired by the tranquil depths of the ocean. Features soft layered
+ * shadows with blue tints, smooth wave-like border radii, and a serene
+ * palette ranging from deep navy to bright cyan. Slow, fluid transitions
+ * create a calm, immersive experience like light filtering through water.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="ocean-light"] {
+    /* Shadows - Soft layered with blue tint */
+    --shadow-main:
+        0 4px 12px rgba(0, 119, 182, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 2px 6px rgba(0, 119, 182, 0.08);
+    --shadow-lg:
+        0 8px 28px rgba(0, 119, 182, 0.14), 0 4px 10px rgba(0, 0, 0, 0.05);
+    --shadow-inner: inset 0 1px 3px rgba(0, 119, 182, 0.06);
+    --shadow-none: none;
+    --shadow-hover:
+        0 12px 36px rgba(0, 119, 182, 0.18), 0 4px 12px rgba(0, 180, 216, 0.1);
+    --shadow-active: 0 2px 6px rgba(0, 119, 182, 0.12);
+
+    /* Border radius - Smooth like waves */
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 18px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Ocean blue on light background */
+    --color-primary: #0077b6;
+    --color-primary-hover: #005f8a;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #edf6f9;
+    --color-secondary-hover: #d6eef5;
+    --color-secondary-foreground: #023e5a;
+
+    --color-accent: #00b4d8;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #edf6f9;
+    --color-muted-foreground: #5a7d8e;
+
+    --color-background: #f7fbfd;
+    --color-foreground: #0a2540;
+    --color-card: #ffffff;
+    --color-card-foreground: #0a2540;
+    --color-surface: #edf6f9;
+    --color-border: rgba(0, 119, 182, 0.2);
+    --color-input: rgba(0, 119, 182, 0.15);
+    --color-ring: #0077b6;
+
+    /* 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 - Clean, spacious */
+    --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.65;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #0077b6;
+
+    /* Transitions - Slow and smooth like currents */
+    --transition-fast: 200ms;
+    --transition-normal: 350ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.25, 0.1, 0.25, 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: #0077b6;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="ocean-dark"] {
+    /* Shadows - Blue-tinted colored glow */
+    --shadow-main:
+        0 4px 14px rgba(72, 202, 228, 0.12), 0 1px 3px rgba(0, 0, 0, 0.15);
+    --shadow-sm: 0 2px 6px rgba(72, 202, 228, 0.08);
+    --shadow-lg:
+        0 8px 30px rgba(72, 202, 228, 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(72, 202, 228, 0.3), 0 4px 12px rgba(0, 180, 216, 0.15);
+    --shadow-active: 0 2px 8px rgba(72, 202, 228, 0.18);
+
+    /* Border radius - Smooth like waves */
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 18px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Bright cyan on deep navy */
+    --color-primary: #48cae4;
+    --color-primary-hover: #76d8eb;
+    --color-primary-foreground: #062031;
+
+    --color-secondary: #112840;
+    --color-secondary-hover: #1a3654;
+    --color-secondary-foreground: #cae9f5;
+
+    --color-accent: #00b4d8;
+    --color-accent-foreground: #062031;
+
+    --color-muted: #112840;
+    --color-muted-foreground: #8ab4c8;
+
+    --color-background: #0a1628;
+    --color-foreground: #e8f0f5;
+    --color-card: #0f2035;
+    --color-card-foreground: #e8f0f5;
+    --color-surface: #112840;
+    --color-border: rgba(72, 202, 228, 0.22);
+    --color-input: rgba(72, 202, 228, 0.25);
+    --color-ring: #48cae4;
+
+    /* 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 - Clean, spacious */
+    --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.65;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #48cae4;
+
+    /* Transitions - Slow and smooth like currents */
+    --transition-fast: 200ms;
+    --transition-normal: 350ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.25, 0.1, 0.25, 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: #48cae4;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/themes/rose.css

@@ -0,0 +1,201 @@
+/**
+ * Rose Theme — "Elegant Bloom"
+ *
+ * Pink and rose palette with warm, elegant, and sophisticated aesthetics.
+ * Gentle curves, graceful transitions, and rose-tinted shadows create
+ * a refined atmosphere perfect for lifestyle, beauty, and luxury UIs.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="rose-light"] {
+    /* Shadows - Rose-tinted, warm */
+    --shadow-main: 0 1px 3px rgba(225, 29, 72, 0.08), 0 1px 2px rgba(225, 29, 72, 0.05);
+    --shadow-sm: 0 1px 2px rgba(225, 29, 72, 0.05);
+    --shadow-lg:
+        0 10px 25px -5px rgba(225, 29, 72, 0.12), 0 8px 10px -6px rgba(225, 29, 72, 0.08);
+    --shadow-inner: inset 0 1px 2px rgba(225, 29, 72, 0.06);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(225, 29, 72, 0.2);
+    --shadow-active: 0 1px 2px rgba(225, 29, 72, 0.05);
+
+    /* Border radius - Gentle curves */
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 22px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Rose palette, warm and elegant */
+    --color-primary: #e11d48;
+    --color-primary-hover: #be123c;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #fff1f2;
+    --color-secondary-hover: #ffe4e6;
+    --color-secondary-foreground: #9f1239;
+
+    --color-accent: #fb7185;
+    --color-accent-foreground: #4c0519;
+
+    --color-muted: #ffe4e6;
+    --color-muted-foreground: #6b7280;
+
+    --color-background: #fff1f2;
+    --color-foreground: #4c0519;
+    --color-card: #ffffff;
+    --color-card-foreground: #4c0519;
+    --color-surface: #ffe4e6;
+    --color-border: rgba(225, 29, 72, 0.15);
+    --color-input: rgba(225, 29, 72, 0.12);
+    --color-ring: #e11d48;
+
+    /* 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 - Light, 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.01em;
+    --line-height: 1.65;
+
+    /* Icon styling - Rose tint */
+    --icon-stroke-width: 1.5;
+    --icon-color: #e11d48;
+
+    /* Transitions - Graceful, smooth */
+    --transition-fast: 200ms;
+    --transition-normal: 350ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Subtle, elegant */
+    --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: #e11d48;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="rose-dark"] {
+    /* Shadows - Deep rose-tinted */
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(225, 29, 72, 0.12);
+    --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(225, 29, 72, 0.15);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(251, 113, 133, 0.3);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.25);
+
+    /* Border radius - Gentle curves */
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 22px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Deep rose dark mode */
+    --color-primary: #fb7185;
+    --color-primary-hover: #fda4af;
+    --color-primary-foreground: #4c0519;
+
+    --color-secondary: #2a0a1a;
+    --color-secondary-hover: #3d1025;
+    --color-secondary-foreground: #fecdd3;
+
+    --color-accent: #fb7185;
+    --color-accent-foreground: #4c0519;
+
+    --color-muted: #2a0a1a;
+    --color-muted-foreground: #fda4af;
+
+    --color-background: #1a0510;
+    --color-foreground: #ffe4e6;
+    --color-card: #2a0a1a;
+    --color-card-foreground: #ffe4e6;
+    --color-surface: #3d1025;
+    --color-border: rgba(251, 113, 133, 0.2);
+    --color-input: rgba(251, 113, 133, 0.15);
+    --color-ring: #fb7185;
+
+    /* 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.01em;
+    --line-height: 1.65;
+
+    /* Icon styling - Lighter rose for dark */
+    --icon-stroke-width: 1.5;
+    --icon-color: #fb7185;
+
+    /* Transitions - Graceful, smooth */
+    --transition-fast: 200ms;
+    --transition-normal: 350ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Subtle, elegant */
+    --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: #fb7185;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}

package/themes/sand.css

@@ -0,0 +1,202 @@
+/**
+ * Sand Theme — "Desert Minimal"
+ *
+ * Warm beige and amber earth tones that evoke sun-baked desert landscapes.
+ * A calm, natural aesthetic with soft golden shadows, rounded organic radii,
+ * and gentle transitions. The palette draws from sandstone, amber, and
+ * sun-bleached clay — grounded, warm, and inviting.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="sand-light"] {
+    /* Shadows - Warm earth-toned, amber-tinted */
+    --shadow-main: 0 1px 3px rgba(146, 64, 14, 0.08), 0 1px 2px rgba(146, 64, 14, 0.05);
+    --shadow-sm: 0 1px 2px rgba(146, 64, 14, 0.05);
+    --shadow-lg:
+        0 10px 25px -5px rgba(146, 64, 14, 0.1), 0 8px 10px -6px rgba(146, 64, 14, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(146, 64, 14, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(146, 64, 14, 0.14);
+    --shadow-active: 0 1px 2px rgba(146, 64, 14, 0.05);
+
+    /* Border radius - Natural, soft */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Warm amber earth tones */
+    --color-primary: #92400e;
+    --color-primary-hover: #78350f;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #fef9c3;
+    --color-secondary-hover: #fef3c7;
+    --color-secondary-foreground: #451a03;
+
+    --color-accent: #d97706;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #fef9c3;
+    --color-muted-foreground: #78716c;
+
+    --color-background: #fefdfb;
+    --color-foreground: #451a03;
+    --color-card: #ffffff;
+    --color-card-foreground: #451a03;
+    --color-surface: #fef3c7;
+    --color-border: rgba(146, 64, 14, 0.2);
+    --color-input: rgba(146, 64, 14, 0.22);
+    --color-ring: #92400e;
+
+    /* 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: 600;
+    --letter-spacing: 0em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #92400e;
+
+    /* Transitions - Gentle, natural */
+    --transition-fast: 150ms;
+    --transition-normal: 300ms;
+    --transition-slow: 450ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --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: #92400e;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="sand-dark"] {
+    /* Shadows - Deep warm amber glow */
+    --shadow-main: 0 1px 3px rgba(217, 119, 6, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-lg:
+        0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(217, 119, 6, 0.08);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.25);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(217, 119, 6, 0.15);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+    /* Border radius - Natural, soft */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Warm amber on deep brown */
+    --color-primary: #fbbf24;
+    --color-primary-hover: #fcd34d;
+    --color-primary-foreground: #18120a;
+
+    --color-secondary: #241c10;
+    --color-secondary-hover: #302416;
+    --color-secondary-foreground: #fef3c7;
+
+    --color-accent: #d97706;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #241c10;
+    --color-muted-foreground: #fbbf24;
+
+    --color-background: #18120a;
+    --color-foreground: #fef3c7;
+    --color-card: #241c10;
+    --color-card-foreground: #fef3c7;
+    --color-surface: #302416;
+    --color-border: rgba(217, 119, 6, 0.2);
+    --color-input: rgba(217, 119, 6, 0.25);
+    --color-ring: #fbbf24;
+
+    /* 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: 0em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #d97706;
+
+    /* Transitions - Gentle, natural */
+    --transition-fast: 150ms;
+    --transition-normal: 300ms;
+    --transition-slow: 450ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --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: #d97706;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}