@almadar/ui 5.123.0 → 5.124.0

package/themes/slate.css

@@ -1,233 +0,0 @@
-/**
- * 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: 6px;
-    --radius-lg: 10px;
-    --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;
-
-    /* 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;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette */
-    --duration-instant: 0ms;
-    --duration-fast: var(--transition-fast);
-    --duration-normal: var(--transition-normal);
-    --duration-slow: var(--transition-slow);
-    --duration-dramatic: 600ms;
-    /* Motion axis — easing palette */
-    --easing-linear: linear;
-    --easing-standard: var(--transition-timing);
-    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
-    --icon-family: lucide;
-    --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
-    --elevation-card: var(--shadow-sm);
-    --elevation-popover: var(--shadow-main);
-    --elevation-dialog: var(--shadow-lg);
-    --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
-    --radius-container: var(--radius-md);
-    --radius-interactive: var(--radius-md);
-    --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
-    --border-hairline: 1px;
-    --border-standard: var(--border-width);
-    --border-heavy: var(--border-width-thick);
-}
-
-/* ==========================================================================
- * 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: 6px;
-    --radius-lg: 10px;
-    --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;
-
-    /* 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;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette */
-    --duration-instant: 0ms;
-    --duration-fast: var(--transition-fast);
-    --duration-normal: var(--transition-normal);
-    --duration-slow: var(--transition-slow);
-    --duration-dramatic: 600ms;
-    /* Motion axis — easing palette */
-    --easing-linear: linear;
-    --easing-standard: var(--transition-timing);
-    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
-    --icon-family: lucide;
-    --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
-    --elevation-card: var(--shadow-sm);
-    --elevation-popover: var(--shadow-main);
-    --elevation-dialog: var(--shadow-lg);
-    --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
-    --radius-container: var(--radius-md);
-    --radius-interactive: var(--radius-md);
-    --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
-    --border-hairline: 1px;
-    --border-standard: var(--border-width);
-    --border-heavy: var(--border-width-thick);
-}

package/themes/sunset.css

@@ -1,238 +0,0 @@
-/**
- * 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: #c2410c;
-    --color-primary-hover: #9a3412;
-    --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;
-
-    /* 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;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette */
-    --duration-instant: 0ms;
-    --duration-fast: var(--transition-fast);
-    --duration-normal: var(--transition-normal);
-    --duration-slow: var(--transition-slow);
-    --duration-dramatic: 600ms;
-    /* Motion axis — easing palette */
-    --easing-linear: linear;
-    --easing-standard: var(--transition-timing);
-    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
-    --icon-family: lucide;
-    --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
-    --elevation-card: var(--shadow-sm);
-    --elevation-popover: var(--shadow-main);
-    --elevation-dialog: var(--shadow-lg);
-    --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
-    --radius-container: var(--radius-md);
-    --radius-interactive: var(--radius-md);
-    --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
-    --border-hairline: 1px;
-    --border-standard: var(--border-width);
-    --border-heavy: var(--border-width-thick);
-}
-
-/* ==========================================================================
- * 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;
-
-    /* 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;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette */
-    --duration-instant: 0ms;
-    --duration-fast: var(--transition-fast);
-    --duration-normal: var(--transition-normal);
-    --duration-slow: var(--transition-slow);
-    --duration-dramatic: 600ms;
-    /* Motion axis — easing palette */
-    --easing-linear: linear;
-    --easing-standard: var(--transition-timing);
-    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
-    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
-    --icon-family: lucide;
-    --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
-    --elevation-card: var(--shadow-sm);
-    --elevation-popover: var(--shadow-main);
-    --elevation-dialog: var(--shadow-lg);
-    --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
-    --radius-container: var(--radius-md);
-    --radius-interactive: var(--radius-md);
-    --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
-    --border-hairline: 1px;
-    --border-standard: var(--border-width);
-    --border-heavy: var(--border-width-thick);
-}