@almadar/shell-web 0.0.0-stage → 1.0.0

package/themes/neon.css

@@ -0,0 +1,453 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/neon.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="neon-light"] {
+    --color-primary: #0e7490;
+    --color-primary-hover: #155e75;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #ccfbf1;
+    --color-secondary-hover: #99f6e4;
+    --color-secondary-foreground: #134e4a;
+    --color-accent: #be185d;
+    --color-accent-foreground: #ffffff;
+    --color-muted: #ccfbf1;
+    --color-muted-foreground: #475569;
+    --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;
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #0e7490;
+    --color-series-2: #d74291;
+    --color-series-3: #6d28d9;
+    --color-series-4: #b45309;
+    --color-series-5: #618305;
+    --color-series-6: #1d4ed8;
+    --color-series-7: #a914a4;
+    --color-series-8: #0f766e;
+    --color-diagram-ink: #134e4a;
+    --color-diagram-label: #475569;
+    --color-diagram-guide: #7a8aa0;
+    --color-diagram-axis: #134e4a;
+    --color-diagram-grid: rgba(34,211,238,0.3);
+    --color-diagram-highlight: #be185d;
+    --color-diagram-fill: #ccfbf1;
+    --radius-none: 0px;
+    --radius-sm: 3px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-xl: 14px;
+    --radius-full: 9999px;
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+    --font-family: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0.03em;
+    --line-height: 1.5;
+    --icon-color: #22d3ee;
+    --transition-fast: 80ms;
+    --transition-normal: 160ms;
+    --transition-slow: 150ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.6, 1);
+    --hover-scale: 1.0;
+    --hover-translate-y: 0;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #22d3ee;
+    --shadow-main: 0 0 8px rgba(34,211,238,0.6), 0 0 22px rgba(34,211,238,0.35), inset 0 0 10px rgba(34,211,238,0.15);
+    --shadow-sm: 0 0 5px rgba(34,211,238,0.6), 0 0 12px rgba(34,211,238,0.3);
+    --shadow-lg: 0 0 12px rgba(34,211,238,0.75), 0 0 40px rgba(34,211,238,0.45), 0 0 80px rgba(244,114,182,0.25);
+    --shadow-inner: inset 0 0 12px rgba(34,211,238,0.25);
+    --shadow-none: none;
+    --shadow-hover: 0 0 12px rgba(244,114,182,0.75), 0 0 30px rgba(244,114,182,0.45);
+    --shadow-active: 0 0 4px rgba(34,211,238,0.8), inset 0 0 14px rgba(34,211,238,0.35);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-11: 44px;
+    --space-12: 48px;
+    --button-height-sm: 28px;
+    --button-height-md: 36px;
+    --button-height-lg: 44px;
+    --input-height-sm: 28px;
+    --input-height-md: 36px;
+    --input-height-lg: 44px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    --card-padding-sm: 12px;
+    --card-padding-md: 16px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    --font-family-display: "Tilt Neon", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-body: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --heading-weight: 400;
+    --heading-transform: uppercase;
+    --heading-tracking: 0.08em;
+    --heading-style: normal;
+    --heading-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 10px rgba(34,211,238,0.55);
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    --duration-instant: 0ms;
+    --duration-fast: var(--transition-fast);
+    --duration-normal: var(--transition-normal);
+    --duration-slow: var(--transition-slow);
+    --duration-dramatic: 400ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.4, 0, 0.6, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: scale(1.04);
+    --motion-modal-exit-to-transform: scale(1.04);
+    --motion-popover-enter-from-transform: scale(1.02);
+    --motion-popover-exit-to-transform: scale(1.02);
+    --motion-toast-enter-from-transform: translateX(16px);
+    --motion-toast-exit-to-transform: translateX(16px);
+    --motion-page-enter-from-transform: none;
+    --icon-family: lucide;
+    --icon-stroke-width: 2;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: var(--radius-md);
+    --radius-interactive: var(--radius-sm);
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-page-image: radial-gradient(circle at 20% 10%, rgba(34,211,238,0.10), transparent 45%), radial-gradient(circle at 80% 90%, rgba(244,114,182,0.10), transparent 45%);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 L1440 0 V100 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><path d='M0 20 C40 0 80 40 120 20 S160 0 160 20 M0 60 C40 40 80 80 120 60 S160 40 160 60' fill='none' stroke='black' stroke-width='1.5'/></svg>");
+    --surface-texture-size: 160px 80px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
+    --diagram-stroke-thin: 1;
+    --diagram-stroke-normal: 2;
+    --diagram-stroke-bold: 3;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 8 5;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: outline;
+    --diagram-fill-opacity: 0.15;
+    --diagram-roughness: 0;
+    --diagram-glow: 4;
+    --diagram-shadow: none;
+    --diagram-marker: triangle;
+    --diagram-label-font: mono;
+    --diagram-label-size: xs;
+    --diagram-label-weight: 500;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 4px;
+    --material-roughness: 0.25;
+    --material-metalness: 0.4;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.45;
+    --light-key: 1.2;
+    --light-key-color: #c4f8ff;
+    --scene-fog: 0.2;
+}
+
+[data-theme="neon-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.85);
+    --color-input: rgba(34, 211, 238, 0.35);
+    --color-ring: #22d3ee;
+    --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;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #00cec2;
+    --color-series-2: #f472b6;
+    --color-series-3: #a78bfa;
+    --color-series-4: #fb9e21;
+    --color-series-5: #a8f470;
+    --color-series-6: #60a5fa;
+    --color-series-7: #e879f9;
+    --color-series-8: #6cf2c8;
+    --color-diagram-ink: #e2e8f0;
+    --color-diagram-label: #94a3b8;
+    --color-diagram-guide: #64748b;
+    --color-diagram-axis: #94a3b8;
+    --color-diagram-grid: rgba(34,211,238,0.18);
+    --color-diagram-highlight: #1abbe7;
+    --color-diagram-fill: #0c2a3a;
+    --radius-none: 0px;
+    --radius-sm: 3px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-xl: 14px;
+    --radius-full: 9999px;
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+    --font-family: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0.03em;
+    --line-height: 1.5;
+    --icon-color: #22d3ee;
+    --transition-fast: 80ms;
+    --transition-normal: 160ms;
+    --transition-slow: 150ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.6, 1);
+    --hover-scale: 1.0;
+    --hover-translate-y: 0;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #22d3ee;
+    --shadow-main: 0 0 8px rgba(34,211,238,0.6), 0 0 22px rgba(34,211,238,0.35), inset 0 0 10px rgba(34,211,238,0.15);
+    --shadow-sm: 0 0 5px rgba(34,211,238,0.6), 0 0 12px rgba(34,211,238,0.3);
+    --shadow-lg: 0 0 12px rgba(34,211,238,0.75), 0 0 40px rgba(34,211,238,0.45), 0 0 80px rgba(244,114,182,0.25);
+    --shadow-inner: inset 0 0 12px rgba(34,211,238,0.25);
+    --shadow-none: none;
+    --shadow-hover: 0 0 12px rgba(244,114,182,0.75), 0 0 30px rgba(244,114,182,0.45);
+    --shadow-active: 0 0 4px rgba(34,211,238,0.8), inset 0 0 14px rgba(34,211,238,0.35);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-11: 44px;
+    --space-12: 48px;
+    --button-height-sm: 28px;
+    --button-height-md: 36px;
+    --button-height-lg: 44px;
+    --input-height-sm: 28px;
+    --input-height-md: 36px;
+    --input-height-lg: 44px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    --card-padding-sm: 12px;
+    --card-padding-md: 16px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    --font-family-display: "Tilt Neon", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-body: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --heading-weight: 400;
+    --heading-transform: uppercase;
+    --heading-tracking: 0.08em;
+    --heading-style: normal;
+    --heading-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 10px rgba(34,211,238,0.55);
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    --duration-instant: 0ms;
+    --duration-fast: var(--transition-fast);
+    --duration-normal: var(--transition-normal);
+    --duration-slow: var(--transition-slow);
+    --duration-dramatic: 400ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.4, 0, 0.6, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: scale(1.04);
+    --motion-modal-exit-to-transform: scale(1.04);
+    --motion-popover-enter-from-transform: scale(1.02);
+    --motion-popover-exit-to-transform: scale(1.02);
+    --motion-toast-enter-from-transform: translateX(16px);
+    --motion-toast-exit-to-transform: translateX(16px);
+    --motion-page-enter-from-transform: none;
+    --icon-family: lucide;
+    --icon-stroke-width: 2;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: var(--radius-md);
+    --radius-interactive: var(--radius-sm);
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-page-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='30'><path d='M0 .5h60M0 15.5h60M30 .5v15M0 15.5v15M60 15.5v15' stroke='%23ffffff' stroke-opacity='.06' fill='none'/></svg>");
+    --surface-page-image-size: 60px 30px;
+    --surface-diagram: #050a1a;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 L1440 0 V100 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80'><path d='M0 20 C40 0 80 40 120 20 S160 0 160 20 M0 60 C40 40 80 80 120 60 S160 40 160 60' fill='none' stroke='black' stroke-width='1.5'/></svg>");
+    --surface-texture-size: 160px 80px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
+    --diagram-stroke-thin: 1;
+    --diagram-stroke-normal: 2;
+    --diagram-stroke-bold: 3;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 8 5;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: outline;
+    --diagram-fill-opacity: 0.2;
+    --diagram-roughness: 0;
+    --diagram-glow: 10;
+    --diagram-shadow: none;
+    --diagram-marker: triangle;
+    --diagram-label-font: mono;
+    --diagram-label-size: xs;
+    --diagram-label-weight: 500;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 4px;
+    --material-roughness: 0.2;
+    --material-metalness: 0.5;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.3;
+    --light-key: 1.3;
+    --light-key-color: #9defff;
+    --scene-fog: 0.3;
+}