@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/index.js

@@ -3,13 +3,48 @@ import {
   getOtherLanguage,
   LANGUAGE_NAMES
 } from "./lib/types";
+import {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
+  isThemePresetName,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESET_STORAGE_KEY,
+  THEME_PRESETS
+} from "./lib/theme-presets";
+import { formatChange, normalizeDate } from "./lib/format";
+import { useBodyScrollLock } from "./lib/use-body-scroll-lock";
 import { useDebounce } from "./lib/use-debounce";
+import { useEscapeKey } from "./lib/use-escape-key";
 import { useHorizontalScroll } from "./lib/use-horizontal-scroll";
+import { useLiveDate } from "./lib/use-live-date";
+import { useMounted } from "./lib/use-mounted";
+import {
+  setCustomTheme,
+  setThemePreset,
+  useThemePreset
+} from "./lib/use-theme-preset";
 import { cn } from "./lib/utils";
 export {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
   LANGUAGE_NAMES,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESETS,
+  THEME_PRESET_STORAGE_KEY,
   cn,
+  formatChange,
   getOtherLanguage,
+  isThemePresetName,
+  normalizeDate,
+  setCustomTheme,
+  setThemePreset,
+  useBodyScrollLock,
   useDebounce,
-  useHorizontalScroll
+  useEscapeKey,
+  useHorizontalScroll,
+  useLiveDate,
+  useMounted,
+  useThemePreset
 };

package/dist/lib/format.js

@@ -0,0 +1,14 @@
+function formatChange(change) {
+  const sign = change > 0 ? "+" : "";
+  return `${sign}${change.toFixed(2)}%`;
+}
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
+export {
+  formatChange,
+  normalizeDate
+};

package/dist/lib/theme-presets.js

@@ -0,0 +1,32 @@
+const THEME_PRESET_STORAGE_KEY = "vllnt-theme-preset";
+const CUSTOM_THEME_NAME = "custom";
+const THEME_CUSTOM_CSS_STORAGE_KEY = "vllnt-theme-custom-css";
+const THEME_CUSTOM_STYLE_ID = "vllnt-theme-custom-style";
+const THEME_PRESETS = [
+  { label: "Default", name: "default", swatch: "oklch(0.2044 0 0)" },
+  { label: "Matrix", name: "matrix", swatch: "oklch(0.8 0.24 150)" },
+  { label: "Dracula", name: "dracula", swatch: "oklch(0.72 0.16 300)" },
+  { label: "Synthwave", name: "synthwave", swatch: "oklch(0.68 0.26 350)" },
+  { label: "Tron", name: "tron", swatch: "oklch(0.78 0.15 215)" },
+  { label: "Cyberpunk", name: "cyberpunk", swatch: "oklch(0.86 0.19 100)" },
+  { label: "Nord", name: "nord", swatch: "oklch(0.72 0.08 230)" },
+  { label: "Claude", name: "claude", swatch: "oklch(0.66 0.11 45)" },
+  { label: "ChatGPT", name: "chatgpt", swatch: "oklch(0.68 0.12 168)" },
+  { label: "Gemini", name: "gemini", swatch: "oklch(0.62 0.17 280)" },
+  { label: "Future Dusk", name: "dusk", swatch: "oklch(0.62 0.13 290)" },
+  { label: "Cyber Lime", name: "cyberlime", swatch: "oklch(0.88 0.22 128)" },
+  { label: "Aura", name: "aura", swatch: "oklch(0.66 0.26 350)" }
+];
+const DEFAULT_THEME_PRESET = "default";
+function isThemePresetName(value) {
+  return THEME_PRESETS.some((preset) => preset.name === value);
+}
+export {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESETS,
+  THEME_PRESET_STORAGE_KEY,
+  isThemePresetName
+};

package/dist/lib/use-body-scroll-lock.js

@@ -0,0 +1,30 @@
+"use client";
+import { useEffect } from "react";
+let lockCount = 0;
+let previousOverflow = "";
+function lockBodyScroll() {
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount += 1;
+}
+function unlockBodyScroll() {
+  if (lockCount === 0) return;
+  lockCount -= 1;
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow;
+  }
+}
+function useBodyScrollLock(active) {
+  useEffect(() => {
+    if (!active) return;
+    lockBodyScroll();
+    return () => {
+      unlockBodyScroll();
+    };
+  }, [active]);
+}
+export {
+  useBodyScrollLock
+};

package/dist/lib/use-escape-key.js

@@ -0,0 +1,24 @@
+"use client";
+import { useEffect } from "react";
+function useEscapeKey(onEscape, {
+  enabled = true,
+  preventDefault = false,
+  target = "window"
+} = {}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const node = target === "document" ? document : window;
+    const handleKeyDown = (event) => {
+      if (!(event instanceof KeyboardEvent) || event.key !== "Escape") return;
+      if (preventDefault) event.preventDefault();
+      onEscape();
+    };
+    node.addEventListener("keydown", handleKeyDown);
+    return () => {
+      node.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [enabled, onEscape, preventDefault, target]);
+}
+export {
+  useEscapeKey
+};

package/dist/lib/use-live-date.js

@@ -0,0 +1,26 @@
+"use client";
+import * as React from "react";
+import { normalizeDate } from "./format";
+function useLiveDate(now, intervalMs) {
+  const fixedNow = React.useMemo(
+    () => now ? normalizeDate(now) : void 0,
+    [now]
+  );
+  const [liveNow, setLiveNow] = React.useState(fixedNow ?? /* @__PURE__ */ new Date());
+  React.useEffect(() => {
+    if (fixedNow) {
+      setLiveNow(fixedNow);
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setLiveNow(/* @__PURE__ */ new Date());
+    }, intervalMs);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [fixedNow, intervalMs]);
+  return liveNow;
+}
+export {
+  useLiveDate
+};

package/dist/lib/use-theme-preset.js

@@ -0,0 +1,95 @@
+"use client";
+import { useSyncExternalStore } from "react";
+import {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
+  isThemePresetName,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESET_STORAGE_KEY,
+  THEME_PRESETS
+} from "./theme-presets";
+function safeIdent(value) {
+  return value.replaceAll(/[^\w-]/g, "");
+}
+function safeValue(value) {
+  return value.replaceAll(/[^\s\w%.-]/g, "");
+}
+function themeDeclarations(variables) {
+  return Object.entries(variables).map(([token, value]) => `--${safeIdent(token)}:${safeValue(value)}`).join(";");
+}
+function buildCustomCss(theme) {
+  const light = themeDeclarations(theme.light) + (theme.radius ? `;--radius:${safeValue(theme.radius)}` : "");
+  return `html[data-theme="${CUSTOM_THEME_NAME}"]{${light}}html[data-theme="${CUSTOM_THEME_NAME}"].dark{${themeDeclarations(theme.dark)}}`;
+}
+function clearCustomTheme() {
+  document.querySelector(`#${THEME_CUSTOM_STYLE_ID}`)?.remove();
+  try {
+    window.localStorage.removeItem(THEME_CUSTOM_CSS_STORAGE_KEY);
+  } catch {
+  }
+}
+const listeners = /* @__PURE__ */ new Set();
+function emit() {
+  listeners.forEach((listener) => {
+    listener();
+  });
+}
+function subscribe(onStoreChange) {
+  listeners.add(onStoreChange);
+  return () => {
+    listeners.delete(onStoreChange);
+  };
+}
+function getSnapshot() {
+  const value = document.documentElement.dataset.theme;
+  if (value === CUSTOM_THEME_NAME) return CUSTOM_THEME_NAME;
+  return value && isThemePresetName(value) ? value : DEFAULT_THEME_PRESET;
+}
+function getServerSnapshot() {
+  return DEFAULT_THEME_PRESET;
+}
+function setThemePreset(name) {
+  clearCustomTheme();
+  const root = document.documentElement;
+  if (name === DEFAULT_THEME_PRESET) {
+    delete root.dataset.theme;
+  } else {
+    root.dataset.theme = name;
+  }
+  try {
+    window.localStorage.setItem(THEME_PRESET_STORAGE_KEY, name);
+  } catch {
+  }
+  emit();
+}
+function setCustomTheme(theme) {
+  const css = buildCustomCss(theme);
+  const existing = document.querySelector(`#${THEME_CUSTOM_STYLE_ID}`);
+  const style = existing instanceof HTMLStyleElement ? existing : document.createElement("style");
+  style.id = THEME_CUSTOM_STYLE_ID;
+  style.textContent = css;
+  if (!existing) {
+    document.head.append(style);
+  }
+  document.documentElement.dataset.theme = CUSTOM_THEME_NAME;
+  try {
+    window.localStorage.setItem(THEME_PRESET_STORAGE_KEY, CUSTOM_THEME_NAME);
+    window.localStorage.setItem(THEME_CUSTOM_CSS_STORAGE_KEY, css);
+  } catch {
+  }
+  emit();
+}
+function useThemePreset() {
+  const preset = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  return { preset, presets: THEME_PRESETS, setPreset: setThemePreset };
+}
+export {
+  setCustomTheme,
+  setThemePreset,
+  useThemePreset
+};

package/dist/tailwind-preset.js

@@ -27,37 +27,37 @@ const preset = {
       },
       colors: {
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
+          DEFAULT: "oklch(var(--accent) / <alpha-value>)",
+          foreground: "oklch(var(--accent-foreground) / <alpha-value>)"
         },
-        background: "hsl(var(--background))",
-        border: "hsl(var(--border))",
+        background: "oklch(var(--background) / <alpha-value>)",
+        border: "oklch(var(--border) / <alpha-value>)",
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
+          DEFAULT: "oklch(var(--card) / <alpha-value>)",
+          foreground: "oklch(var(--card-foreground) / <alpha-value>)"
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
+          DEFAULT: "oklch(var(--destructive) / <alpha-value>)",
+          foreground: "oklch(var(--destructive-foreground) / <alpha-value>)"
         },
-        foreground: "hsl(var(--foreground))",
-        input: "hsl(var(--input))",
+        foreground: "oklch(var(--foreground) / <alpha-value>)",
+        input: "oklch(var(--input) / <alpha-value>)",
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
+          DEFAULT: "oklch(var(--muted) / <alpha-value>)",
+          foreground: "oklch(var(--muted-foreground) / <alpha-value>)"
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
+          DEFAULT: "oklch(var(--popover) / <alpha-value>)",
+          foreground: "oklch(var(--popover-foreground) / <alpha-value>)"
         },
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
+          DEFAULT: "oklch(var(--primary) / <alpha-value>)",
+          foreground: "oklch(var(--primary-foreground) / <alpha-value>)"
         },
-        ring: "hsl(var(--ring))",
+        ring: "oklch(var(--ring) / <alpha-value>)",
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
+          DEFAULT: "oklch(var(--secondary) / <alpha-value>)",
+          foreground: "oklch(var(--secondary-foreground) / <alpha-value>)"
         }
       },
       fontFamily: {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.2.1",
-  "description": "React component library — 93 components built on Radix UI, Tailwind CSS, and CVA",
+  "version": "0.3.0-canary.00b20d6",
+  "description": "React component library — 225 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",
-  "homepage": "https://github.com/vllnt/ui#readme",
+  "homepage": "https://ui.vllnt.ai",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vllnt/ui.git",
@@ -36,7 +36,8 @@
       "import": "./dist/tailwind-preset.js"
     },
     "./styles.css": "./styles.css",
-    "./themes/default.css": "./themes/default.css"
+    "./themes/default.css": "./themes/default.css",
+    "./themes/presets.css": "./themes/presets.css"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -68,6 +69,7 @@
     }
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@mdx-js/mdx": "^3.1.1",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -101,13 +103,17 @@
     "html-to-image": "^1.11.13",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.468.0",
+    "qrcode": "1.5.4",
     "react-day-picker": "^9.13.0",
+    "react-hook-form": "^7.73.1",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^4.3.3",
     "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.5.5",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
@@ -123,25 +129,25 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22",
+    "@types/qrcode": "1.5.6",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@vitest/coverage-v8": "^4.0.16",
+    "@vitest/coverage-v8": "^4.1.9",
     "@vllnt/eslint-config": "^1.0.0",
     "@vllnt/typescript": "^1.0.0",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.39.1",
     "jsdom": "^26.1.0",
     "playwright": "^1.57.0",
-    "postcss": "^8.5.6",
-    "remark-gfm": "^4.0.1",
+    "postcss": "^8.5.10",
     "storybook": "^10.2.17",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.5.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.16"
+    "vitest": "^4.1.9"
   },
   "scripts": {
     "build": "tsup",
@@ -163,6 +169,7 @@
     "storybook:generate-docs": "tsx scripts/generate-docs.ts",
     "storybook:verify": "tsx scripts/verify-stories.ts",
     "storybook:fix-stories": "tsx scripts/fix-stories.ts",
-    "check:stories": "tsx scripts/check-story-coverage.ts"
+    "check:stories": "tsx scripts/check-story-coverage.ts",
+    "check:use-client": "tsx scripts/check-use-client.ts"
   }
 }

package/styles.css

@@ -11,47 +11,47 @@
 /* Default theme variables */
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --background: 1 0 0;
+    --foreground: 0.1445 0 0;
+    --card: 1 0 0;
+    --card-foreground: 0.1445 0 0;
+    --popover: 1 0 0;
+    --popover-foreground: 0.1445 0 0;
+    --primary: 0.2044 0 0;
+    --primary-foreground: 0.9848 0 0;
+    --secondary: 0.9703 0 0;
+    --secondary-foreground: 0.2044 0 0;
+    --muted: 0.9703 0 0;
+    --muted-foreground: 0.5555 0 0;
+    --accent: 0.9703 0 0;
+    --accent-foreground: 0.2044 0 0;
+    --destructive: 0.6368 0.2078 25.326;
+    --destructive-foreground: 0.9848 0 0;
+    --border: 0.9219 0 0;
+    --input: 0.9219 0 0;
+    --ring: 0.1445 0 0;
     --radius: 0.5rem;
   }
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --background: 0 0 0;
+    --foreground: 0.9848 0 0;
+    --card: 0.1445 0 0;
+    --card-foreground: 0.9848 0 0;
+    --popover: 0.1445 0 0;
+    --popover-foreground: 0.9848 0 0;
+    --primary: 0.9848 0 0;
+    --primary-foreground: 0.2044 0 0;
+    --secondary: 0.2686 0 0;
+    --secondary-foreground: 0.9848 0 0;
+    --muted: 0.2686 0 0;
+    --muted-foreground: 0.7153 0 0;
+    --accent: 0.2686 0 0;
+    --accent-foreground: 0.9848 0 0;
+    --destructive: 0.3959 0.1331 25.721;
+    --destructive-foreground: 0.9848 0 0;
+    --border: 0.2686 0 0;
+    --input: 0.2686 0 0;
+    --ring: 0.8697 0 0;
   }
 }
 
@@ -115,6 +115,63 @@
     }
   }
 
+  @keyframes vllnt-text-shimmer {
+    from {
+      background-position: 200% center;
+    }
+    to {
+      background-position: 0% center;
+    }
+  }
+
+  @keyframes vllnt-sparkle {
+    0%,
+    100% {
+      opacity: 0;
+      transform: scale(0) rotate(0deg);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1) rotate(90deg);
+    }
+  }
+
+  @keyframes vllnt-meteor {
+    0% {
+      opacity: 1;
+      transform: rotate(var(--vllnt-meteor-angle, 215deg)) translateX(0);
+    }
+    70% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: rotate(var(--vllnt-meteor-angle, 215deg)) translateX(-500px);
+    }
+  }
+
+  @keyframes vllnt-particle-float {
+    0%,
+    100% {
+      opacity: 0.3;
+      transform: translateY(0);
+    }
+    50% {
+      opacity: 0.85;
+      transform: translateY(-24px);
+    }
+  }
+
+  @keyframes vllnt-liquid-shift {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
   .ml-safe {
     margin-left: env(safe-area-inset-left, 0);
   }

package/themes/default.css

@@ -1,44 +1,44 @@
-/* Default theme variables */
+/* Default theme variables. Values are OKLCH channels ("L C H"), consumed as oklch(var(--x)). */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 3.9%;
+  --background: 1 0 0;
+  --foreground: 0.1445 0 0;
+  --card: 1 0 0;
+  --card-foreground: 0.1445 0 0;
+  --popover: 1 0 0;
+  --popover-foreground: 0.1445 0 0;
+  --primary: 0.2044 0 0;
+  --primary-foreground: 0.9848 0 0;
+  --secondary: 0.9703 0 0;
+  --secondary-foreground: 0.2044 0 0;
+  --muted: 0.9703 0 0;
+  --muted-foreground: 0.5555 0 0;
+  --accent: 0.9703 0 0;
+  --accent-foreground: 0.2044 0 0;
+  --destructive: 0.6368 0.2078 25.326;
+  --destructive-foreground: 0.9848 0 0;
+  --border: 0.9219 0 0;
+  --input: 0.9219 0 0;
+  --ring: 0.1445 0 0;
   --radius: 0.5rem;
 }
 .dark {
-  --background: 0 0% 0%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
+  --background: 0 0 0;
+  --foreground: 0.9848 0 0;
+  --card: 0.1445 0 0;
+  --card-foreground: 0.9848 0 0;
+  --popover: 0.1445 0 0;
+  --popover-foreground: 0.9848 0 0;
+  --primary: 0.9848 0 0;
+  --primary-foreground: 0.2044 0 0;
+  --secondary: 0.2686 0 0;
+  --secondary-foreground: 0.9848 0 0;
+  --muted: 0.2686 0 0;
+  --muted-foreground: 0.7153 0 0;
+  --accent: 0.2686 0 0;
+  --accent-foreground: 0.9848 0 0;
+  --destructive: 0.3959 0.1331 25.721;
+  --destructive-foreground: 0.9848 0 0;
+  --border: 0.2686 0 0;
+  --input: 0.2686 0 0;
+  --ring: 0.8697 0 0;
 }