@enderfall/ui 0.1.0 → 0.1.4

package/src/components/UserMenu.css

@@ -0,0 +1,273 @@
+.user-section {
+  position: relative;
+  display: inline-block;
+  z-index: 30;
+  --user-border-gradient: var(--ef-border-gradient);
+  --user-button-height: 46px;
+}
+
+.user-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 2px solid transparent;
+  padding: 8px 12px;
+  border-radius: var(--ef-control-radius, 12px);
+  min-height: 46px;
+  height: var(--user-button-height);
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--user-border-gradient) border-box;
+  color: var(--text-strong);
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
+}
+
+.user-section[data-open="true"] .user-button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-color: transparent;
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-fallback {
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.user-name {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  font-size: 0.7rem;
+  opacity: 0.7;
+  display: inline-flex;
+}
+
+.chevron svg {
+  width: 14px;
+  height: 14px;
+}
+
+.chevron.open svg {
+  transform: rotate(180deg);
+}
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% - 2px);
+  width: 100%;
+  min-width: 100%;
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--user-border-gradient) border-box;
+  border: 2px solid transparent;
+  border-top: none;
+  border-radius: 0 0 var(--ef-control-radius, 12px) var(--ef-control-radius, 12px);
+  padding: 8px;
+  display: grid;
+  gap: 6px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(12px);
+  opacity: 0;
+  transform: translateY(-6px);
+  pointer-events: none;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+  z-index: 200;
+}
+
+.dropdown[data-open="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.dropdown-item {
+  border: 2px solid transparent;
+  padding: 10px 16px;
+  border-radius: var(--ef-control-radius, 12px);
+  background:
+    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
+    var(--ef-border-gradient) border-box;
+  color: var(--text-strong);
+  font-weight: 600;
+  font-size: 0.85rem;
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  box-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
+}
+
+.dropdown-item:hover {
+  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+.dropdown-item.theme-preview {
+  border: 2px solid transparent;
+  border-radius: var(--ef-control-radius, 12px);
+  background:
+    linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
+    var(--ef-button-border) border-box;
+  color: var(--ef-button-text);
+  box-shadow: var(--shadow);
+}
+
+.dropdown-item.theme-preview:hover {
+  box-shadow: var(--shadow);
+  filter: brightness(1.04);
+  transform: translateY(-1px);
+}
+
+.dropdown-item.theme-preview.is-disabled,
+.dropdown-item.theme-preview.is-disabled:hover {
+  opacity: 0.6;
+  box-shadow: none;
+  filter: none;
+  transform: none;
+  background:
+    linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
+    var(--ef-button-border-soft) border-box;
+}
+
+.dropdown-item.is-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.dropdown-item.is-disabled:hover {
+  box-shadow: none;
+  transform: none;
+}
+
+.dropdown-empty {
+  padding: 10px 12px;
+  border-radius: var(--ef-control-radius, 12px);
+  border: 2px dashed rgba(255, 255, 255, 0.1);
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.dropdown-item-rich {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+}
+
+.dropdown-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.12);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.dropdown-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dropdown-avatar-fallback {
+  line-height: 1;
+}
+
+.dropdown-item-text {
+  display: grid;
+  gap: 2px;
+}
+
+.dropdown-item-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.dropdown-item-subtitle {
+  font-size: 0.72rem;
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.dropdown-item-actions {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.dropdown-action {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-strong);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.dropdown-action.ef-button {
+  padding: 0;
+  min-width: 0;
+  box-shadow: none;
+}
+
+.dropdown-action svg {
+  width: 14px;
+  height: 14px;
+}
+
+.dropdown-action.is-delete {
+  border-color: rgba(255, 120, 120, 0.45);
+  color: rgb(255, 164, 164);
+}
+
+.dropdown-action:hover {
+  filter: brightness(1.1);
+}
+
+@media (max-width: 760px) {
+  .user-button {
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  .user-name {
+    display: inline;
+    max-width: 32vw;
+  }
+}

package/src/index.ts

@@ -0,0 +1,45 @@
+export type ThemeMode = string;
+export { AccessGate } from "./components/AccessGate";
+export { Button } from "./components/Button";
+export { FormField } from "./components/FormField";
+export { Input, Textarea, Select } from "./components/Input";
+export { Panel } from "./components/Panel";
+export { StackedCard } from "./components/StackedCard";
+export { Dropdown } from "./components/Dropdown";
+export { MainHeader } from "./components/MainHeader";
+export { FloatingFooter } from "./components/FloatingFooter";
+export { Modal } from "./components/Modal";
+export { PreferencesModal } from "./components/PreferencesModal";
+export { Toggle } from "./components/Toggle";
+export { Slider } from "./components/Slider";
+export { StatDots } from "./components/StatDots";
+export { Tabs } from "./components/Tabs";
+export { SideMenu, SideMenuSubmenu } from "./components/SideMenu";
+
+type ThemeOptions<T extends ThemeMode> = {
+  storageKey: string;
+  defaultTheme: T;
+  allowed: readonly T[];
+  dataAttribute?: string;
+  bodyClass?: string | null;
+};
+
+export const getStoredTheme = <T extends ThemeMode>(options: ThemeOptions<T>) => {
+  const stored = localStorage.getItem(options.storageKey);
+  if (stored && options.allowed.includes(stored as T)) {
+    return stored as T;
+  }
+  if (stored === "dark" && options.allowed.includes("galaxy" as T)) {
+    return "galaxy" as T;
+  }
+  return options.defaultTheme;
+};
+
+export const applyTheme = <T extends ThemeMode>(theme: T, options: ThemeOptions<T>) => {
+  const dataAttribute = options.dataAttribute ?? "data-theme";
+  if (options.bodyClass) {
+    document.body.classList.toggle(options.bodyClass, theme === (options.defaultTheme as string));
+  }
+  document.documentElement.setAttribute(dataAttribute, theme);
+  localStorage.setItem(options.storageKey, theme);
+};

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;
+}
+

package/styles.css

@@ -7,6 +7,7 @@
 @import "./src/components/Input.css";
 @import "./src/components/Toggle.css";
 @import "./src/components/Slider.css";
+@import "./src/components/Tabs.css";
 @import "./src/components/StackedCard.css";
 @import "./src/components/Panel.css";
 @import "./src/components/Modal.css";