elementdrawing 1.0.0

package/src/css/themes.css

@@ -0,0 +1,517 @@
+/*
+ * ElementDrawing Framework - Themes CSS
+ * Theme definitions: light theme, dark theme, custom color themes,
+ * CSS custom properties for theming, and theme switching support.
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+/* ─── Light Theme (Default) ────────────────────────────────────────────────── */
+
+:root,
+[data-theme="light"],
+.ed-theme-light {
+  /* ── Primary Colors ── */
+  --ed-primary: #3b82f6;
+  --ed-primary-hover: #2563eb;
+  --ed-primary-active: #1d4ed8;
+  --ed-primary-light: #eff6ff;
+  --ed-primary-dark: #1e40af;
+
+  /* ── Secondary Colors ── */
+  --ed-secondary: #8b5cf6;
+  --ed-secondary-hover: #7c3aed;
+  --ed-secondary-active: #6d28d9;
+  --ed-secondary-light: #f5f3ff;
+  --ed-secondary-dark: #5b21b6;
+
+  /* ── Accent Colors ── */
+  --ed-accent: #06b6d4;
+  --ed-accent-hover: #0891b2;
+  --ed-accent-light: #ecfeff;
+
+  /* ── Semantic Colors ── */
+  --ed-success: #22c55e;
+  --ed-success-hover: #16a34a;
+  --ed-success-light: #f0fdf4;
+
+  --ed-warning: #f59e0b;
+  --ed-warning-hover: #d97706;
+  --ed-warning-light: #fffbeb;
+
+  --ed-danger: #ef4444;
+  --ed-danger-hover: #dc2626;
+  --ed-danger-light: #fef2f2;
+
+  --ed-info: #0ea5e9;
+  --ed-info-hover: #0284c7;
+  --ed-info-light: #f0f9ff;
+
+  /* ── Background Colors ── */
+  --ed-bg-primary: #ffffff;
+  --ed-bg-secondary: #f9fafb;
+  --ed-bg-tertiary: #f3f4f6;
+  --ed-bg-inverse: #111827;
+  --ed-bg-overlay: rgba(0, 0, 0, 0.5);
+
+  /* ── Text Colors ── */
+  --ed-text-primary: #111827;
+  --ed-text-secondary: #4b5563;
+  --ed-text-tertiary: #9ca3af;
+  --ed-text-inverse: #ffffff;
+  --ed-text-link: #2563eb;
+  --ed-text-link-hover: #1d4ed8;
+
+  /* ── Border Colors ── */
+  --ed-border-primary: #e5e7eb;
+  --ed-border-secondary: #d1d5db;
+  --ed-border-focus: #3b82f6;
+
+  /* ── Component-Specific ── */
+  --ed-card-bg: #ffffff;
+  --ed-card-border: #e5e7eb;
+  --ed-modal-bg: #ffffff;
+  --ed-input-bg: #ffffff;
+  --ed-input-color: #111827;
+  --ed-input-border: #d1d5db;
+  --ed-input-focus-border: #3b82f6;
+  --ed-input-focus-ring: rgba(59, 130, 246, 0.15);
+  --ed-input-placeholder: #9ca3af;
+  --ed-input-disabled-bg: #f3f4f6;
+
+  /* ── Scrollbar Colors ── */
+  --ed-scrollbar-track: #f1f1f1;
+  --ed-scrollbar-thumb: #c1c1c1;
+  --ed-scrollbar-thumb-hover: #a0a0a0;
+
+  /* ── Focus Ring ── */
+  --ed-focus-ring: rgba(59, 130, 246, 0.4);
+  --ed-focus-ring-color: #3b82f6;
+
+  /* ── Selection ── */
+  --ed-selection-bg: rgba(59, 130, 246, 0.3);
+  --ed-selection-color: inherit;
+
+  /* ── Shadow Colors ── */
+  --ed-shadow-color: rgba(0, 0, 0, 0.1);
+  --ed-shadow-color-lg: rgba(0, 0, 0, 0.15);
+
+  color-scheme: light;
+}
+
+/* ─── Dark Theme ───────────────────────────────────────────────────────────── */
+
+[data-theme="dark"],
+.ed-theme-dark {
+  /* ── Primary Colors ── */
+  --ed-primary: #60a5fa;
+  --ed-primary-hover: #3b82f6;
+  --ed-primary-active: #2563eb;
+  --ed-primary-light: #1e3a5f;
+  --ed-primary-dark: #93c5fd;
+
+  /* ── Secondary Colors ── */
+  --ed-secondary: #a78bfa;
+  --ed-secondary-hover: #8b5cf6;
+  --ed-secondary-active: #7c3aed;
+  --ed-secondary-light: #2e1065;
+  --ed-secondary-dark: #c4b5fd;
+
+  /* ── Accent Colors ── */
+  --ed-accent: #22d3ee;
+  --ed-accent-hover: #06b6d4;
+  --ed-accent-light: #164e63;
+
+  /* ── Semantic Colors ── */
+  --ed-success: #4ade80;
+  --ed-success-hover: #22c55e;
+  --ed-success-light: #14532d;
+
+  --ed-warning: #fbbf24;
+  --ed-warning-hover: #f59e0b;
+  --ed-warning-light: #78350f;
+
+  --ed-danger: #f87171;
+  --ed-danger-hover: #ef4444;
+  --ed-danger-light: #7f1d1d;
+
+  --ed-info: #38bdf8;
+  --ed-info-hover: #0ea5e9;
+  --ed-info-light: #0c4a6e;
+
+  /* ── Background Colors ── */
+  --ed-bg-primary: #0f172a;
+  --ed-bg-secondary: #1e293b;
+  --ed-bg-tertiary: #334155;
+  --ed-bg-inverse: #f9fafb;
+  --ed-bg-overlay: rgba(0, 0, 0, 0.7);
+
+  /* ── Text Colors ── */
+  --ed-text-primary: #f1f5f9;
+  --ed-text-secondary: #94a3b8;
+  --ed-text-tertiary: #64748b;
+  --ed-text-inverse: #0f172a;
+  --ed-text-link: #60a5fa;
+  --ed-text-link-hover: #93c5fd;
+
+  /* ── Border Colors ── */
+  --ed-border-primary: #334155;
+  --ed-border-secondary: #475569;
+  --ed-border-focus: #60a5fa;
+
+  /* ── Component-Specific ── */
+  --ed-card-bg: #1e293b;
+  --ed-card-border: #334155;
+  --ed-modal-bg: #1e293b;
+  --ed-input-bg: #1e293b;
+  --ed-input-color: #f1f5f9;
+  --ed-input-border: #475569;
+  --ed-input-focus-border: #60a5fa;
+  --ed-input-focus-ring: rgba(96, 165, 250, 0.2);
+  --ed-input-placeholder: #64748b;
+  --ed-input-disabled-bg: #0f172a;
+
+  /* ── Scrollbar Colors ── */
+  --ed-scrollbar-track: #1e293b;
+  --ed-scrollbar-thumb: #475569;
+  --ed-scrollbar-thumb-hover: #64748b;
+
+  /* ── Focus Ring ── */
+  --ed-focus-ring: rgba(96, 165, 250, 0.4);
+  --ed-focus-ring-color: #60a5fa;
+
+  /* ── Selection ── */
+  --ed-selection-bg: rgba(96, 165, 250, 0.35);
+  --ed-selection-color: inherit;
+
+  /* ── Shadow Colors ── */
+  --ed-shadow-color: rgba(0, 0, 0, 0.3);
+  --ed-shadow-color-lg: rgba(0, 0, 0, 0.5);
+
+  color-scheme: dark;
+}
+
+/* ─── Ocean Theme ──────────────────────────────────────────────────────────── */
+
+[data-theme="ocean"],
+.ed-theme-ocean {
+  --ed-primary: #0ea5e9;
+  --ed-primary-hover: #0284c7;
+  --ed-primary-light: #e0f2fe;
+  --ed-secondary: #06b6d4;
+  --ed-secondary-hover: #0891b2;
+  --ed-accent: #14b8a6;
+  --ed-success: #10b981;
+  --ed-warning: #f59e0b;
+  --ed-danger: #ef4444;
+  --ed-info: #38bdf8;
+  --ed-bg-primary: #f0f9ff;
+  --ed-bg-secondary: #e0f2fe;
+  --ed-bg-tertiary: #bae6fd;
+  --ed-text-primary: #0c4a6e;
+  --ed-text-secondary: #0369a1;
+  --ed-text-tertiary: #7dd3fc;
+  --ed-border-primary: #bae6fd;
+  --ed-border-secondary: #7dd3fc;
+  --ed-card-bg: #ffffff;
+  --ed-card-border: #bae6fd;
+  --ed-modal-bg: #ffffff;
+  --ed-input-bg: #ffffff;
+  --ed-input-border: #7dd3fc;
+  --ed-input-focus-border: #0ea5e9;
+  --ed-input-focus-ring: rgba(14, 165, 233, 0.15);
+  --ed-scrollbar-track: #e0f2fe;
+  --ed-scrollbar-thumb: #7dd3fc;
+  --ed-focus-ring: rgba(14, 165, 233, 0.4);
+  --ed-selection-bg: rgba(14, 165, 233, 0.3);
+  --ed-shadow-color: rgba(14, 165, 233, 0.1);
+  color-scheme: light;
+}
+
+/* ─── Forest Theme ─────────────────────────────────────────────────────────── */
+
+[data-theme="forest"],
+.ed-theme-forest {
+  --ed-primary: #16a34a;
+  --ed-primary-hover: #15803d;
+  --ed-primary-light: #f0fdf4;
+  --ed-secondary: #65a30d;
+  --ed-secondary-hover: #4d7c0f;
+  --ed-accent: #84cc16;
+  --ed-success: #22c55e;
+  --ed-warning: #eab308;
+  --ed-danger: #dc2626;
+  --ed-info: #0ea5e9;
+  --ed-bg-primary: #fefce8;
+  --ed-bg-secondary: #fef9c3;
+  --ed-bg-tertiary: #fef08a;
+  --ed-text-primary: #1a2e05;
+  --ed-text-secondary: #365314;
+  --ed-text-tertiary: #84cc16;
+  --ed-border-primary: #bef264;
+  --ed-border-secondary: #a3e635;
+  --ed-card-bg: #ffffff;
+  --ed-card-border: #bef264;
+  --ed-modal-bg: #ffffff;
+  --ed-input-bg: #ffffff;
+  --ed-input-border: #a3e635;
+  --ed-input-focus-border: #16a34a;
+  --ed-input-focus-ring: rgba(22, 163, 74, 0.15);
+  --ed-scrollbar-track: #fef9c3;
+  --ed-scrollbar-thumb: #a3e635;
+  --ed-focus-ring: rgba(22, 163, 74, 0.4);
+  --ed-selection-bg: rgba(22, 163, 74, 0.3);
+  color-scheme: light;
+}
+
+/* ─── Sunset Theme ─────────────────────────────────────────────────────────── */
+
+[data-theme="sunset"],
+.ed-theme-sunset {
+  --ed-primary: #f97316;
+  --ed-primary-hover: #ea580c;
+  --ed-primary-light: #fff7ed;
+  --ed-secondary: #ec4899;
+  --ed-secondary-hover: #db2777;
+  --ed-accent: #f43f5e;
+  --ed-success: #22c55e;
+  --ed-warning: #eab308;
+  --ed-danger: #ef4444;
+  --ed-info: #0ea5e9;
+  --ed-bg-primary: #fffbeb;
+  --ed-bg-secondary: #fef3c7;
+  --ed-bg-tertiary: #fde68a;
+  --ed-text-primary: #431407;
+  --ed-text-secondary: #9a3412;
+  --ed-text-tertiary: #fb923c;
+  --ed-border-primary: #fed7aa;
+  --ed-border-secondary: #fdba74;
+  --ed-card-bg: #ffffff;
+  --ed-card-border: #fed7aa;
+  --ed-modal-bg: #ffffff;
+  --ed-input-bg: #ffffff;
+  --ed-input-border: #fdba74;
+  --ed-input-focus-border: #f97316;
+  --ed-input-focus-ring: rgba(249, 115, 22, 0.15);
+  --ed-scrollbar-track: #fef3c7;
+  --ed-scrollbar-thumb: #fdba74;
+  --ed-focus-ring: rgba(249, 115, 22, 0.4);
+  --ed-selection-bg: rgba(249, 115, 22, 0.3);
+  color-scheme: light;
+}
+
+/* ─── Midnight Theme ───────────────────────────────────────────────────────── */
+
+[data-theme="midnight"],
+.ed-theme-midnight {
+  --ed-primary: #818cf8;
+  --ed-primary-hover: #6366f1;
+  --ed-primary-light: #1e1b4b;
+  --ed-secondary: #c084fc;
+  --ed-secondary-hover: #a855f7;
+  --ed-accent: #e879f9;
+  --ed-success: #4ade80;
+  --ed-warning: #fbbf24;
+  --ed-danger: #f87171;
+  --ed-info: #38bdf8;
+  --ed-bg-primary: #0c0a1d;
+  --ed-bg-secondary: #1a1735;
+  --ed-bg-tertiary: #2d2a4a;
+  --ed-text-primary: #e2e8f0;
+  --ed-text-secondary: #a5b4c8;
+  --ed-text-tertiary: #64748b;
+  --ed-border-primary: #2d2a4a;
+  --ed-border-secondary: #3d3a5c;
+  --ed-card-bg: #1a1735;
+  --ed-card-border: #2d2a4a;
+  --ed-modal-bg: #1a1735;
+  --ed-input-bg: #1a1735;
+  --ed-input-color: #e2e8f0;
+  --ed-input-border: #3d3a5c;
+  --ed-input-focus-border: #818cf8;
+  --ed-input-focus-ring: rgba(129, 140, 248, 0.2);
+  --ed-input-placeholder: #64748b;
+  --ed-scrollbar-track: #1a1735;
+  --ed-scrollbar-thumb: #3d3a5c;
+  --ed-focus-ring: rgba(129, 140, 248, 0.4);
+  --ed-selection-bg: rgba(129, 140, 248, 0.35);
+  --ed-shadow-color: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
+}
+
+/* ─── High Contrast Theme ──────────────────────────────────────────────────── */
+
+[data-theme="high-contrast"],
+.ed-theme-high-contrast {
+  --ed-primary: #0050d8;
+  --ed-primary-hover: #003da8;
+  --ed-primary-light: #e6f0ff;
+  --ed-secondary: #7c3aed;
+  --ed-secondary-hover: #5b21b6;
+  --ed-success: #008a00;
+  --ed-warning: #b85c00;
+  --ed-danger: #cc0000;
+  --ed-info: #0066cc;
+  --ed-bg-primary: #ffffff;
+  --ed-bg-secondary: #f5f5f5;
+  --ed-text-primary: #000000;
+  --ed-text-secondary: #333333;
+  --ed-text-tertiary: #666666;
+  --ed-border-primary: #000000;
+  --ed-border-secondary: #333333;
+  --ed-card-bg: #ffffff;
+  --ed-card-border: #000000;
+  --ed-input-border: #000000;
+  --ed-input-focus-border: #0050d8;
+  --ed-input-focus-ring: rgba(0, 80, 216, 0.3);
+  --ed-focus-ring: rgba(0, 80, 216, 0.5);
+  --ed-selection-bg: rgba(0, 80, 216, 0.4);
+  color-scheme: light;
+}
+
+/* ─── Theme Transition ─────────────────────────────────────────────────────── */
+
+[data-theme-transition] *,
+[data-theme-transition] *::before,
+[data-theme-transition] *::after {
+  transition: background-color 400ms ease,
+              color 400ms ease,
+              border-color 400ms ease,
+              box-shadow 400ms ease !important;
+}
+
+/* ─── System Preference Detection ──────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    /* ── Primary Colors ── */
+    --ed-primary: #60a5fa;
+    --ed-primary-hover: #3b82f6;
+    --ed-primary-light: #1e3a5f;
+    --ed-primary-dark: #93c5fd;
+
+    /* ── Background Colors ── */
+    --ed-bg-primary: #0f172a;
+    --ed-bg-secondary: #1e293b;
+    --ed-bg-tertiary: #334155;
+
+    /* ── Text Colors ── */
+    --ed-text-primary: #f1f5f9;
+    --ed-text-secondary: #94a3b8;
+    --ed-text-tertiary: #64748b;
+
+    /* ── Border Colors ── */
+    --ed-border-primary: #334155;
+    --ed-border-secondary: #475569;
+
+    /* ── Component-Specific ── */
+    --ed-card-bg: #1e293b;
+    --ed-card-border: #334155;
+    --ed-modal-bg: #1e293b;
+    --ed-input-bg: #1e293b;
+    --ed-input-color: #f1f5f9;
+    --ed-input-border: #475569;
+    --ed-input-focus-border: #60a5fa;
+    --ed-input-placeholder: #64748b;
+    --ed-scrollbar-track: #1e293b;
+    --ed-scrollbar-thumb: #475569;
+
+    /* ── Semantic Colors ── */
+    --ed-success: #4ade80;
+    --ed-warning: #fbbf24;
+    --ed-danger: #f87171;
+    --ed-info: #38bdf8;
+
+    color-scheme: dark;
+  }
+}
+
+/* ─── Theme Switching Utility Classes ──────────────────────────────────────── */
+
+.ed-theme-transition {
+  transition: background-color 400ms ease,
+              color 400ms ease,
+              border-color 400ms ease,
+              box-shadow 400ms ease;
+}
+
+.ed-theme-transition * {
+  transition: background-color 400ms ease,
+              color 400ms ease,
+              border-color 400ms ease,
+              box-shadow 400ms ease;
+}
+
+/* ─── Theme-Aware Component Overrides ──────────────────────────────────────── */
+
+/* Dark theme specific adjustments */
+[data-theme="dark"] .ed-card,
+.ed-theme-dark .ed-card {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .ed-btn-secondary,
+.ed-theme-dark .ed-btn-secondary {
+  background-color: var(--ed-bg-tertiary);
+  border-color: var(--ed-border-secondary);
+  color: var(--ed-text-primary);
+}
+
+[data-theme="dark"] .ed-table th,
+.ed-theme-dark .ed-table th {
+  background-color: var(--ed-bg-tertiary);
+}
+
+[data-theme="dark"] .ed-table tbody tr:hover,
+.ed-theme-dark .ed-table tbody tr:hover {
+  background-color: var(--ed-bg-tertiary);
+}
+
+[data-theme="dark"] .ed-code,
+.ed-theme-dark .ed-code {
+  background-color: var(--ed-bg-tertiary);
+  color: var(--ed-text-secondary);
+}
+
+[data-theme="dark"] .ed-divider,
+.ed-theme-dark .ed-divider {
+  border-color: var(--ed-border-secondary);
+}
+
+/* ─── Color Theme Variants for Components ──────────────────────────────────── */
+
+/* Primary variant */
+.ed-theme-primary {
+  --ed-primary: #3b82f6;
+  --ed-primary-hover: #2563eb;
+  --ed-primary-light: #eff6ff;
+}
+
+/* Emerald variant */
+.ed-theme-emerald {
+  --ed-primary: #10b981;
+  --ed-primary-hover: #059669;
+  --ed-primary-light: #ecfdf5;
+}
+
+/* Violet variant */
+.ed-theme-violet {
+  --ed-primary: #8b5cf6;
+  --ed-primary-hover: #7c3aed;
+  --ed-primary-light: #f5f3ff;
+}
+
+/* Rose variant */
+.ed-theme-rose {
+  --ed-primary: #f43f5e;
+  --ed-primary-hover: #e11d48;
+  --ed-primary-light: #fff1f2;
+}
+
+/* Amber variant */
+.ed-theme-amber {
+  --ed-primary: #f59e0b;
+  --ed-primary-hover: #d97706;
+  --ed-primary-light: #fffbeb;
+}