@enderfall/ui 0.1.0 → 0.1.2

package/src/theme.css

@@ -0,0 +1,353 @@
+:root {
+  color-scheme: dark;
+  --ef-surface: #0b0c1a;
+  --ef-surface-soft: rgba(10, 13, 22, 0.78);
+  --ef-control-radius: 12px;
+  --ef-border-gradient: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-border-gradient-reverse: linear-gradient(315deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(0, 229, 255, 0.6),
+    rgba(124, 77, 255, 0.6),
+    rgba(255, 77, 210, 0.6),
+    rgba(255, 183, 77, 0.6)
+  );
+  --ef-button-surface: var(--ef-surface);
+  --ef-button-border: var(--ef-border-gradient);
+  --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-button-text: var(--text-strong);
+  --ef-button-glow-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
+  --ef-button-locked-bg: rgba(15, 18, 28, 0.7);
+  --ef-button-locked-border: rgba(255, 255, 255, 0.15);
+  --ef-button-locked-text: rgba(255, 255, 255, 0.7);
+  --ef-button-danger-border: linear-gradient(135deg, rgba(255, 92, 92, 0.8), rgba(255, 170, 170, 0.7));
+  --ef-button-danger-text: #ffd6d6;
+  --ef-button-warning-border: linear-gradient(135deg, rgba(255, 183, 77, 0.85), rgba(255, 221, 128, 0.7));
+  --ef-button-warning-text: #2b1a00;
+  --ef-button-info-border: linear-gradient(135deg, rgba(0, 229, 255, 0.7), rgba(124, 220, 255, 0.7));
+  --ef-button-info-text: #021823;
+  --ef-button-success-border: linear-gradient(135deg, rgba(76, 255, 200, 0.7), rgba(140, 255, 220, 0.7));
+  --ef-button-success-text: #041a10;
+  --ef-slider-surface: var(--ef-surface);
+  --ef-slider-border-color: var(--line-strong);
+  --ef-slider-track-radius: 6px;
+  --ef-slider-thumb-radius: 6px;
+  --ef-slider-thumb-clip: inset(0);
+  --ef-slider-thumb-mask: none;
+  --ef-toggle-track-radius: 6px;
+  --ef-toggle-thumb-radius: 6px;
+  --ef-toggle-box-radius: 6px;
+  --ef-toggle-check-radius: 2px;
+  --ef-toggle-check-bg: var(--ef-slider-border-color);
+  --ef-field-label: rgba(255, 255, 255, 0.7);
+  --ef-field-required: rgba(255, 183, 77, 0.95);
+  --ef-field-helper: rgba(255, 255, 255, 0.6);
+  --ef-field-error: #ff8a8a;
+  --ef-input-surface: #0b0c1a;
+  --ef-input-border: var(--ef-border-gradient);
+  --ef-input-text: #eef1f6;
+  --ef-input-placeholder: rgba(246, 245, 255, 0.45);
+  --ef-input-focus: rgba(124, 77, 255, 0.55);
+  --ef-input-shadow: 0 0 0 2px rgba(124, 77, 255, 0.2);
+  --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
+  --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
+  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
+  --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
+  --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
+  --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
+  --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
+  --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
+  --ef-stacked-image-gradient: linear-gradient(
+    135deg,
+    rgba(0, 229, 255, 0.35),
+    rgba(124, 77, 255, 0.35),
+    rgba(255, 77, 210, 0.25)
+  );
+  --text-strong: #f6f5ff;
+  --text-soft: rgba(238, 241, 246, 0.75);
+  --text-muted: rgba(247, 248, 251, 0.6);
+  --card: rgba(10, 13, 22, 0.78);
+  --card-border: rgba(124, 77, 255, 0.4);
+  --accent: #7c4dff;
+  --accent-bright: #00e5ff;
+  --accent-warm: #ff4dd2;
+  --accent-gold: #ffb74d;
+  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+  --font-main: "Inter", "Segoe UI", Arial, sans-serif;
+  --text: var(--text-strong);
+  --muted: var(--text-muted);
+  --line: var(--card-border);
+  --bg: #0b0f15;
+  --bg-soft: #141b26;
+  --accent-dark: #5e35ff;
+  --accent-alt: var(--accent-gold);
+  --accent-soft: rgba(255, 183, 77, 0.18);
+  --danger: #e06c6c;
+  --radius: 18px;
+  --row-odd: rgba(10, 13, 22, 0.9);
+  --scrollbar-track: rgba(255, 255, 255, 0.12);
+  --bg-glow: rgba(124, 77, 255, 0.18);
+  --panel: var(--card);
+  --panel-2: rgba(12, 16, 26, 0.9);
+  --ink: var(--text-strong);
+  --line-strong: var(--accent);
+  --accent-2: var(--accent-gold);
+  --frame-bg: linear-gradient(180deg, #0b0c1a 0%, #0a0d16 100%);
+  --bio-bg: linear-gradient(180deg, #0e101c, #0b0f15 85%);
+  --section-bg: linear-gradient(180deg, rgba(15, 18, 28, 0.92), rgba(12, 16, 24, 0.95));
+  --note-bg: rgba(10, 13, 22, 0.6);
+  --portrait-bg: #0c1322;
+  --chip-bg: rgba(12, 16, 26, 0.8);
+  --placeholder-bg:
+    linear-gradient(135deg, rgba(28, 38, 64, 0.9), rgba(12, 18, 32, 0.95)),
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 8px);
+  --placeholder-ink: #dde6f2;
+  --menu-card: var(--card);
+  --menu-line: var(--card-border);
+  --menu-shadow: var(--shadow);
+  --menu-bg-soft: rgba(124, 77, 255, 0.12);
+  --menu-radius: 18px;
+  --menu-muted: var(--text-muted);
+}
+
+:root[data-theme="light"],
+:root[data-theme="plain-light"] {
+  color-scheme: light;
+  --ef-control-radius: 12px;
+  --ef-surface: #ffffff;
+  --ef-surface-soft: rgba(255, 255, 255, 0.92);
+  --ef-border-gradient: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-border-gradient-reverse: linear-gradient(315deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(0, 229, 255, 0.6),
+    rgba(124, 77, 255, 0.6),
+    rgba(255, 77, 210, 0.6),
+    rgba(255, 183, 77, 0.6)
+  );
+  --ef-button-text: #1d232a;
+  --ef-button-glow-shadow: 0 0 20px rgba(124, 77, 255, 0.32);
+  --ef-button-locked-bg: rgba(255, 255, 255, 0.8);
+  --ef-button-locked-border: rgba(24, 32, 40, 0.18);
+  --ef-button-locked-text: rgba(24, 32, 40, 0.6);
+  --ef-button-danger-border: linear-gradient(135deg, rgba(200, 76, 76, 0.7), rgba(255, 138, 138, 0.65));
+  --ef-button-danger-text: #5a0f0f;
+  --ef-button-warning-border: linear-gradient(135deg, rgba(242, 159, 69, 0.75), rgba(255, 210, 128, 0.7));
+  --ef-button-warning-text: #4a2c00;
+  --ef-button-info-border: linear-gradient(135deg, rgba(0, 180, 210, 0.6), rgba(124, 180, 255, 0.6));
+  --ef-button-info-text: #0b2a3a;
+  --ef-button-success-border: linear-gradient(135deg, rgba(46, 170, 130, 0.65), rgba(130, 220, 180, 0.65));
+  --ef-button-success-text: #0b2b1d;
+  --ef-slider-surface: var(--ef-surface);
+  --ef-slider-border-color: var(--line-strong);
+  --ef-slider-track-radius: 6px;
+  --ef-slider-thumb-radius: 6px;
+  --ef-slider-thumb-clip: inset(0);
+  --ef-slider-thumb-mask: none;
+  --ef-toggle-track-radius: 6px;
+  --ef-toggle-thumb-radius: 6px;
+  --ef-toggle-box-radius: 6px;
+  --ef-toggle-check-radius: 2px;
+  --ef-toggle-check-bg: var(--ef-slider-border-color);
+  --ef-field-label: rgba(29, 35, 42, 0.7);
+  --ef-field-required: rgba(242, 159, 69, 0.9);
+  --ef-field-helper: rgba(29, 35, 42, 0.6);
+  --ef-field-error: #b83a3a;
+  --ef-input-surface: #ffffff;
+  --ef-input-border: var(--ef-border-gradient);
+  --ef-input-text: #1d232a;
+  --ef-input-placeholder: rgba(29, 35, 42, 0.45);
+  --ef-input-focus: rgba(31, 122, 140, 0.3);
+  --ef-input-shadow: 0 0 0 2px rgba(31, 122, 140, 0.14);
+  --ef-field-label: rgba(29, 35, 42, 0.7);
+  --ef-field-helper: rgba(29, 35, 42, 0.55);
+  --ef-field-error: #b34a4a;
+  --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
+  --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
+  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
+  --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
+  --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
+  --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
+  --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
+  --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
+  --ef-stacked-image-gradient: linear-gradient(
+    135deg,
+    rgba(0, 229, 255, 0.35),
+    rgba(124, 77, 255, 0.35),
+    rgba(255, 77, 210, 0.25)
+  );
+  --text-strong: #1d232a;
+  --text-soft: rgba(29, 35, 42, 0.75);
+  --text-muted: rgba(29, 35, 42, 0.6);
+  --card: rgba(255, 255, 255, 0.9);
+  --card-border: rgba(24, 32, 40, 0.12);
+  --shadow: 0 20px 50px rgba(24, 32, 40, 0.12);
+  --text: var(--text-strong);
+  --muted: var(--text-muted);
+  --line: rgba(24, 32, 40, 0.18);
+  --bg: #f4f1ea;
+  --bg-soft: #fbf7f0;
+  --accent-dark: #1f7a8c;
+  --accent-alt: #f29f45;
+  --accent-soft: rgba(242, 159, 69, 0.18);
+  --danger: #c84c4c;
+  --row-odd: rgba(255, 255, 255, 0.95);
+  --scrollbar-track: rgba(24, 32, 40, 0.08);
+  --bg-glow: rgba(31, 122, 140, 0.16);
+  --panel: var(--card);
+  --panel-2: rgba(255, 255, 255, 0.94);
+  --ink: var(--text-strong);
+  --line-strong: var(--accent);
+  --accent-2: var(--accent-alt);
+  --frame-bg: linear-gradient(180deg, #ffffff 0%, #f6ede1 100%);
+  --bio-bg: linear-gradient(180deg, #ffffff, #f9f6f0 85%);
+  --section-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 246, 240, 0.96));
+  --note-bg: rgba(255, 255, 255, 0.8);
+  --portrait-bg: #e7ecf2;
+  --chip-bg: rgba(255, 255, 255, 0.9);
+  --placeholder-bg:
+    linear-gradient(135deg, rgba(210, 225, 245, 0.9), rgba(240, 244, 248, 0.95)),
+    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0px, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 8px);
+  --placeholder-ink: #2b3440;
+  --menu-card: rgba(255, 255, 255, 0.88);
+  --menu-line: rgba(24, 32, 40, 0.12);
+  --menu-shadow: 0 16px 40px rgba(23, 28, 33, 0.12);
+  --menu-bg-soft: #f9f6f0;
+  --menu-radius: 18px;
+  --menu-muted: var(--text-muted);
+}
+
+:root[data-theme="plain-light"] {
+  --ef-border-gradient: linear-gradient(135deg, var(--line), var(--line));
+  --ef-border-gradient-reverse: linear-gradient(315deg, var(--line), var(--line));
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(24, 32, 40, 0.18),
+    rgba(24, 32, 40, 0.18)
+  );
+  --ef-button-border: var(--ef-border-gradient);
+  --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-input-border: var(--ef-border-gradient);
+  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
+}
+
+:root[data-theme="plain-dark"] {
+  color-scheme: dark;
+  --card-border: rgba(255, 255, 255, 0.16);
+  --line: rgba(255, 255, 255, 0.2);
+  --line-strong: rgba(255, 255, 255, 0.35);
+  --ef-border-gradient: linear-gradient(135deg, var(--line-strong), var(--line-strong));
+  --ef-border-gradient-reverse: linear-gradient(315deg, var(--line-strong), var(--line-strong));
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.18),
+    rgba(255, 255, 255, 0.18)
+  );
+  --ef-button-border: var(--ef-border-gradient);
+  --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-input-border: var(--ef-border-gradient);
+  --menu-line: var(--line);
+  --menu-bg-soft: rgba(255, 255, 255, 0.06);
+  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
+}
+
+
+
+:root[data-theme="atelier"] {
+  color-scheme: dark;
+  --ef-control-radius: 0px;
+  --ef-surface: #1b0b18;
+  --ef-surface-soft: rgba(27, 11, 24, 0.92);
+  --ef-border-gradient: linear-gradient(135deg, #ff86c8, #e255a1, #7dd6f6);
+  --ef-border-gradient-reverse: linear-gradient(315deg, #ff86c8, #e255a1, #7dd6f6);
+  --ef-border-gradient-soft: linear-gradient(
+    135deg,
+    rgba(255, 134, 200, 0.5),
+    rgba(226, 85, 161, 0.5),
+    rgba(125, 214, 246, 0.5)
+  );
+  --ef-slider-surface: var(--ef-surface);
+  --ef-slider-border-color: var(--line-strong);
+  --ef-slider-track-radius: 0px;
+  --ef-slider-thumb-radius: 0px;
+  --ef-slider-thumb-clip: inset(0);
+  --ef-slider-thumb-mask: none;
+  --ef-toggle-track-radius: 0px;
+  --ef-toggle-thumb-radius: 0px;
+  --ef-toggle-box-radius: 0px;
+  --ef-toggle-check-radius: 0px;
+  --ef-toggle-check-bg: var(--ef-slider-border-color);
+  --ef-button-surface: var(--ef-surface);
+  --ef-button-border: var(--ef-border-gradient);
+  --ef-button-border-soft: var(--ef-border-gradient-soft);
+  --ef-button-text: #f6eaf2;
+  --ef-button-glow-shadow: 0 0 24px rgba(226, 85, 161, 0.42);
+  --ef-input-surface: #1b0b18;
+  --ef-input-border: var(--ef-border-gradient);
+  --ef-input-text: #f6eaf2;
+  --ef-input-placeholder: rgba(246, 234, 242, 0.6);
+  --ef-input-focus: rgba(226, 85, 161, 0.45);
+  --ef-input-shadow: 0 0 0 2px rgba(226, 85, 161, 0.2);
+  --text-strong: #f6eaf2;
+  --text-soft: rgba(246, 234, 242, 0.8);
+  --text-muted: #dbc7d7;
+  --card: #1b0b18;
+  --card-border: rgba(192, 59, 132, 0.6);
+  --accent: #ff86c8;
+  --accent-bright: #7dd6f6;
+  --accent-warm: #e255a1;
+  --accent-gold: #ff86c8;
+  --shadow: rgba(0, 0, 0, 0.6);
+  --text: #f6eaf2;
+  --muted: #dbc7d7;
+  --line: #c03b84;
+  --bg: #130810;
+  --bg-soft: #241028;
+  --accent-dark: #c03b84;
+  --accent-alt: #7dd6f6;
+  --accent-soft: rgba(255, 134, 200, 0.18);
+  --danger: #e06c6c;
+  --radius: 18px;
+  --row-odd: rgba(27, 11, 24, 0.85);
+  --scrollbar-track: rgba(255, 255, 255, 0.08);
+  --bg-glow: #2a0f21;
+  --panel: #1b0b18;
+  --panel-2: #241028;
+  --ink: #f6eaf2;
+  --line-strong: #e255a1;
+  --accent-2: #7dd6f6;
+  --frame-bg: linear-gradient(180deg, #220b1a 0%, #12070f 100%);
+  --bio-bg: linear-gradient(180deg, #1a0b1b, #12070f 85%);
+  --section-bg: linear-gradient(180deg, rgba(35, 14, 32, 0.94), rgba(20, 9, 18, 0.95));
+  --note-bg: rgba(16, 7, 14, 0.6);
+  --portrait-bg: #131a2c;
+  --chip-bg: rgba(17, 9, 20, 0.8);
+  --placeholder-bg:
+    linear-gradient(135deg, rgba(60, 78, 108, 0.9), rgba(20, 30, 50, 0.95)),
+    repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.06) 0px,
+      rgba(255, 255, 255, 0.06) 1px,
+      transparent 1px,
+      transparent 8px
+    );
+  --placeholder-ink: #dde6f2;
+  --menu-card: #1b0b18;
+  --menu-line: rgba(192, 59, 132, 0.5);
+  --menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+  --menu-bg-soft: rgba(255, 134, 200, 0.12);
+  --menu-radius: 18px;
+  --menu-muted: #dbc7d7;
+}
+
+:root[data-theme="galaxy"] {
+  --ef-slider-track-radius: 6px;
+  --ef-slider-thumb-radius: 6px;
+  --ef-slider-thumb-clip: inset(0);
+  --ef-slider-thumb-mask: none;
+  --ef-toggle-track-radius: 6px;
+  --ef-toggle-thumb-radius: 6px;
+  --ef-toggle-box-radius: 6px;
+  --ef-toggle-check-radius: 2px;
+}
+