@slidev-polls/shared 0.0.1

package/src/ui/tokens.css

@@ -0,0 +1,61 @@
+:root {
+  --sp-bg: #ffffff;
+  --sp-bg-muted: #fafafa;
+  --sp-bg-subtle: #f4f4f5;
+  --sp-fg: #0a0a0a;
+  --sp-fg-muted: #52525b;
+  --sp-fg-subtle: #737373;
+  --sp-fg-faint: #a1a1aa;
+  --sp-border: #e5e5e5;
+  --sp-border-strong: #d4d4d8;
+  --sp-accent: #7c3aed;
+  --sp-accent-fg: #ffffff;
+  --sp-accent-soft: #ede9fe;
+  --sp-accent-ring: rgba(124, 58, 237, 0.4);
+  --sp-success: #16a34a;
+  --sp-success-bg: #dcfce7;
+  --sp-success-fg: #166534;
+  --sp-danger: #dc2626;
+  --sp-danger-bg: #fef2f2;
+  --sp-danger-fg: #991b1b;
+  --sp-radius-sm: 6px;
+  --sp-radius: 8px;
+  --sp-radius-lg: 10px;
+  --sp-radius-xl: 14px;
+  --sp-font-sans: "Inter", -apple-system, system-ui, sans-serif;
+  --sp-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --sp-dur: 400ms;
+}
+
+[data-theme="dark"] {
+  --sp-bg: #0a0a0a;
+  --sp-bg-muted: #18181b;
+  --sp-bg-subtle: #27272a;
+  --sp-fg: #fafafa;
+  --sp-fg-muted: #d4d4d8;
+  --sp-fg-subtle: #a1a1aa;
+  --sp-fg-faint: #71717a;
+  --sp-border: #27272a;
+  --sp-border-strong: #3f3f46;
+  --sp-accent: #a78bfa;
+  --sp-accent-fg: #0a0a0a;
+  /* Translucent accent so non-leader bars in ResultsPanel sit visibly above
+     the row background (--sp-bg-subtle = #27272a). The previous flat #3f3f46
+     was within ~10% lightness of the row and disappeared on dark slides. */
+  --sp-accent-soft: rgba(167, 139, 250, 0.28);
+  --sp-accent-ring: rgba(167, 139, 250, 0.4);
+  --sp-success: #22c55e;
+  --sp-success-bg: rgba(34, 197, 94, 0.15);
+  --sp-success-fg: #86efac;
+  --sp-danger: #ef4444;
+  --sp-danger-bg: rgba(239, 68, 68, 0.12);
+  --sp-danger-fg: #fca5a5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  [data-theme="dark"] {
+    --sp-dur: 0ms;
+  }
+}

package/src/ui/useTheme.ts

@@ -0,0 +1,78 @@
+import { ref, watch, type Ref } from "vue";
+
+export type ThemeMode = "light" | "dark";
+
+const STORAGE_KEY = "sp-theme";
+
+let modeRef: Ref<ThemeMode> | null = null;
+let mediaQuery: MediaQueryList | null = null;
+let mediaListener: ((e: MediaQueryListEvent) => void) | null = null;
+
+function readOverride(): ThemeMode | null {
+  try {
+    const v = localStorage.getItem(STORAGE_KEY);
+    return v === "light" || v === "dark" ? v : null;
+  } catch {
+    return null;
+  }
+}
+
+function osPrefersDark(): boolean {
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+}
+
+function apply(mode: ThemeMode) {
+  document.documentElement.setAttribute("data-theme", mode);
+}
+
+export function useTheme() {
+  if (modeRef) {
+    return {
+      mode: modeRef,
+      setMode,
+      toggle
+    };
+  }
+
+  const initial: ThemeMode = readOverride() ?? (osPrefersDark() ? "dark" : "light");
+  modeRef = ref<ThemeMode>(initial);
+  apply(initial);
+
+  watch(modeRef, (m) => apply(m));
+
+  mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+  if (mediaQuery) {
+    mediaListener = (e) => {
+      if (readOverride() !== null) return;
+      modeRef!.value = e.matches ? "dark" : "light";
+    };
+    mediaQuery.addEventListener("change", mediaListener);
+  }
+
+  return { mode: modeRef, setMode, toggle };
+}
+
+function setMode(m: ThemeMode) {
+  if (!modeRef) return;
+  modeRef.value = m;
+  apply(m);
+  try {
+    localStorage.setItem(STORAGE_KEY, m);
+  } catch {
+    /* noop */
+  }
+}
+
+function toggle() {
+  if (!modeRef) return;
+  setMode(modeRef.value === "light" ? "dark" : "light");
+}
+
+export function __resetThemeForTests() {
+  if (mediaQuery && mediaListener) {
+    mediaQuery.removeEventListener("change", mediaListener);
+  }
+  modeRef = null;
+  mediaQuery = null;
+  mediaListener = null;
+}