flowbite-svelte 2.0.0-next.2 → 2.0.0-next.3

package/dist/theme-selector/theme.d.ts

@@ -0,0 +1,85 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme-provider/themeUtils";
+export type ThemeSelectorVariants = VariantProps<typeof themeSelector> & Classes<typeof themeSelector>;
+export declare const themeSelector: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+    swatchPosition: {
+        first: {
+            colorSwatch: string;
+        };
+        middle: {
+            colorSwatch: string;
+        };
+        last: {
+            colorSwatch: string;
+        };
+    };
+}, {
+    button: string;
+    dropdown: string;
+    item: string;
+    itemLabel: string;
+    colorSwatchContainer: string;
+    colorSwatch: string;
+}, undefined, {
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+    swatchPosition: {
+        first: {
+            colorSwatch: string;
+        };
+        middle: {
+            colorSwatch: string;
+        };
+        last: {
+            colorSwatch: string;
+        };
+    };
+}, {
+    button: string;
+    dropdown: string;
+    item: string;
+    itemLabel: string;
+    colorSwatchContainer: string;
+    colorSwatch: string;
+}, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+    swatchPosition: {
+        first: {
+            colorSwatch: string;
+        };
+        middle: {
+            colorSwatch: string;
+        };
+        last: {
+            colorSwatch: string;
+        };
+    };
+}, {
+    button: string;
+    dropdown: string;
+    item: string;
+    itemLabel: string;
+    colorSwatchContainer: string;
+    colorSwatch: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/theme-selector/theme.js

@@ -0,0 +1,35 @@
+import { tv } from "tailwind-variants";
+export const themeSelector = tv({
+    slots: {
+        button: "gap-2 rounded-sm border-0 px-1 py-1 shadow-none focus:ring-gray-100 dark:focus:ring-gray-700",
+        dropdown: "w-52 px-2",
+        item: "mb-1 inline-flex w-full items-center justify-between rounded-xl",
+        itemLabel: "theme-select-button inline-flex w-full items-center justify-between rounded",
+        colorSwatchContainer: "flex items-center rounded-xs",
+        colorSwatch: "h-3.5 w-[1.125rem]"
+    },
+    variants: {
+        active: {
+            true: {
+                item: "bg-brand-50 dark:bg-brand-900/20"
+            },
+            false: {
+                item: ""
+            }
+        },
+        swatchPosition: {
+            first: {
+                colorSwatch: "rounded-s-xs"
+            },
+            middle: {
+                colorSwatch: ""
+            },
+            last: {
+                colorSwatch: "rounded-e-xs"
+            }
+        }
+    },
+    defaultVariants: {
+        active: false
+    }
+});

package/dist/theme-selector/themeStore.svelte.d.ts

@@ -0,0 +1,6 @@
+import { themeConfigs, type FlowbiteTheme, type ThemeId } from "./themes";
+export declare function loadTheme(themeId: ThemeId): void;
+export declare function getCurrentTheme(): ThemeId;
+export declare function getSelectedTheme(): FlowbiteTheme | undefined;
+export { themeConfigs };
+export type { FlowbiteTheme, ThemeId };

package/dist/theme-selector/themeStore.svelte.js

@@ -0,0 +1,88 @@
+import { themeConfigs } from "./themes";
+const browser = typeof window !== "undefined";
+const dev = import.meta.env.DEV;
+function isThemeId(value) {
+    return themeConfigs.some((t) => t.id === value);
+}
+const getInitialTheme = () => {
+    if (browser) {
+        try {
+            const stored = localStorage.getItem("flowbite-svelte-theme");
+            if (stored && isThemeId(stored))
+                return stored;
+        }
+        catch (e) {
+            // console.warn("localStorage not available:", e);
+            return "default";
+        }
+    }
+    return "default";
+};
+// Using $state rune for reactive global state
+let currentTheme = $state(getInitialTheme());
+// Using $derived for computed value
+let selectedTheme = $derived(themeConfigs.find((t) => t.id === currentTheme));
+export function loadTheme(themeId) {
+    if (!browser)
+        return;
+    const theme = themeConfigs.find((t) => t.id === themeId);
+    if (!theme) {
+        console.error(`Theme ${themeId} not found`);
+        return;
+    }
+    if (dev)
+        console.log(`Loading theme: ${themeId}`);
+    // Remove ALL existing theme links
+    const existingLinks = document.querySelectorAll("#dynamic-theme-css, #initial-theme-css, #dynamic-theme-font");
+    existingLinks.forEach((link) => link.remove());
+    // Add new font
+    const fontLink = document.createElement("link");
+    fontLink.id = "dynamic-theme-font";
+    fontLink.rel = "stylesheet";
+    fontLink.href = theme.fontUrl;
+    fontLink.onerror = () => {
+        console.warn(`Failed to load font for theme ${themeId}`);
+    };
+    document.head.appendChild(fontLink);
+    // Add new theme CSS
+    const themeLink = document.createElement("link");
+    themeLink.id = "dynamic-theme-css";
+    themeLink.rel = "stylesheet";
+    themeLink.href = theme.cssPath;
+    // Add onload handler
+    themeLink.onload = () => {
+        if (dev)
+            console.log(`✓ Theme ${themeId} loaded successfully`);
+        // Reading offsetHeight triggers synchronous layout recalculation
+        void document.body.offsetHeight;
+        // Also trigger recalculation by temporarily modifying a style
+        const html = document.documentElement;
+        const originalTransition = html.style.transition;
+        html.style.transition = "none";
+        void html.offsetHeight;
+        html.style.transition = originalTransition;
+    };
+    themeLink.onerror = () => {
+        console.error(`✗ Failed to load theme ${themeId} from ${theme.cssPath}`);
+    };
+    document.head.appendChild(themeLink);
+    // Save to localStorage
+    try {
+        localStorage.setItem("flowbite-svelte-theme", themeId);
+    }
+    catch (e) {
+        console.warn("Could not save theme:", e);
+    }
+    // Update state
+    currentTheme = themeId;
+    if (dev)
+        console.log(`Theme state updated to: ${currentTheme}`);
+}
+// Export getter functions to access the state
+export function getCurrentTheme() {
+    return currentTheme;
+}
+export function getSelectedTheme() {
+    return selectedTheme;
+}
+export { themeConfigs };

package/dist/theme-selector/themes/default-runtime.css

@@ -0,0 +1,229 @@
+:root {
+  --font-sans:
+    "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-body:
+    "Inter", "ui-sans-serif", "system-ui", "-apple-system", "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace";
+
+  /* TEXT VARIABLES */
+  --text-2xs: 0.625rem;
+  --spacing-8xl: 90rem;
+  --leading-9: 36px; /* rem pls */
+  --leading-7: 28px;
+  --leading-8: 32px;
+  --leading-6: 24px;
+  --leading-4: 16px;
+  --leading-none: 1px;
+  --leading-5: 20px;
+  --tracking-tighter: -0.8px;
+  --leading-heading-none: 60px;
+  --tracking-tight: -0.4px;
+
+  /* BORDER RADIUS VARIABLES */
+  --radius-0: 0px;
+  --radius-xxs: 2px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius: 8px;
+  --radius-base: 12px;
+  --radius-lg: 16px;
+
+  /* BORDER WIDTH VARIABLES */
+  --default-border-width: 1px;
+
+  /* TEXT COLORS VARIABLES */
+  /* main text color */
+  --color-body: var(--color-gray-600);
+  --color-body-subtle: var(--color-gray-500);
+
+  /* text heading colors */
+  --color-heading: var(--color-gray-900);
+
+  /* used for custom brand colors */
+  --color-fg-brand-subtle: var(--color-blue-200);
+  --color-fg-brand: var(--color-blue-700);
+  --color-fg-brand-strong: var(--color-blue-900);
+
+  /* used for status colors */
+  --color-fg-success: var(--color-emerald-700);
+  --color-fg-success-strong: var(--color-emerald-900);
+  --color-fg-danger: var(--color-rose-700);
+  --color-fg-danger-strong: var(--color-rose-900);
+  --color-fg-warning-subtle: var(--color-orange-600);
+  --color-fg-warning: var(--color-orange-900);
+  --color-fg-yellow: var(--color-yellow-400);
+  --color-fg-disabled: var(--color-gray-400);
+  --color-fg-purple: var(--color-purple-600);
+  --color-fg-cyan: var(--color-cyan-600);
+  --color-fg-indigo: var(--color-indigo-600);
+  --color-fg-pink: var(--color-pink-600);
+  --color-fg-lime: var(--color-lime-600);
+
+  /* BACKGROUND COLOR VARIABLES */
+  /* used for neutral colors */
+  --color-neutral-primary-soft: var(--color-white);
+  --color-neutral-primary: var(--color-white);
+  --color-neutral-primary-medium: var(--color-white);
+  --color-neutral-primary-strong: var(--color-white);
+  --color-neutral-secondary-soft: var(--color-gray-50);
+  --color-neutral-secondary: var(--color-gray-50);
+  --color-neutral-secondary-medium: var(--color-gray-50);
+  --color-neutral-secondary-strong: var(--color-gray-50);
+  --color-neutral-secondary-strongest: var(--color-gray-50);
+  --color-neutral-tertiary-soft: var(--color-gray-100);
+  --color-neutral-tertiary: var(--color-gray-100);
+  --color-neutral-tertiary-medium: var(--color-gray-100);
+  --color-neutral-quaternary: var(--color-gray-200);
+  --color-neutral-quaternary-medium: var(--color-gray-200);
+  --color-gray: var(--color-gray-300);
+
+  /* used for brand colors */
+  --color-brand-softer: var(--color-blue-50);
+  --color-brand-soft: var(--color-blue-100);
+  --color-brand: var(--color-blue-700);
+  --color-brand-medium: var(--color-blue-200);
+  --color-brand-strong: var(--color-blue-800);
+
+  /* used for status colors */
+  --color-success-soft: var(--color-emerald-50);
+  --color-success: var(--color-emerald-700);
+  --color-success-medium: var(--color-emerald-100);
+  --color-success-strong: var(--color-emerald-800);
+  --color-danger-soft: var(--color-rose-50);
+  --color-danger: var(--color-rose-700);
+  --color-danger-medium: var(--color-rose-100);
+  --color-danger-strong: var(--color-rose-800);
+  --color-warning-soft: var(--color-orange-50);
+  --color-warning: var(--color-orange-500);
+  --color-warning-medium: var(--color-orange-100);
+  --color-warning-strong: var(--color-orange-700);
+  --color-dark-soft: var(--color-gray-800);
+  --color-dark: var(--color-gray-800);
+  --color-dark-strong: var(--color-gray-900);
+  --color-disabled: var(--color-gray-100);
+  --color-purple: var(--color-purple-500);
+  --color-sky: var(--color-sky-500);
+  --color-teal: var(--color-teal-600);
+  --color-pink: var(--color-pink-600);
+  --color-cyan: var(--color-cyan-500);
+  --color-fuchsia: var(--color-fuchsia-600);
+  --color-indigo: var(--color-indigo-600);
+  --color-orange: var(--color-orange-400);
+
+  /* BORDER COLOR VARIABLES */
+  --color-buffer: var(--color-white);
+  --color-buffer-medium: var(--color-white);
+  --color-buffer-strong: var(--color-white);
+  --color-muted: var(--color-gray-50);
+  --color-light-subtle: var(--color-gray-100);
+  --color-light: var(--color-gray-100);
+  --color-light-medium: var(--color-gray-100);
+  --color-default-subtle: var(--color-gray-200);
+  --color-default: var(--color-gray-200);
+  --color-default-medium: var(--color-gray-200);
+  --color-default-strong: var(--color-gray-200);
+
+  /* used for status colors */
+  --color-success-subtle: var(--color-emerald-200);
+  --color-danger-subtle: var(--color-rose-200);
+  --color-warning-subtle: var(--color-orange-200);
+  --color-brand-subtle: var(--color-blue-200);
+  --color-brand-light: var(--color-blue-600);
+  --color-dark-subtle: var(--color-gray-800);
+  --color-dark-backdrop: var(--color-gray-950);
+
+  /* shiki variables */
+  --color-shiki-fg-brand: #79b8ff;
+  --color-shiki-fg-brand-subtle: #9ecbff;
+}
+
+.dark {
+  /* text color variables */
+  --color-body: var(--color-gray-400);
+  --color-body-subtle: var(--color-gray-400);
+  --color-heading: var(--color-white);
+  --color-fg-brand-subtle: var(--color-blue-200);
+  --color-fg-brand: var(--color-blue-500);
+  --color-fg-brand-strong: var(--color-blue-400);
+  --color-fg-success: var(--color-emerald-600);
+  --color-fg-success-strong: var(--color-emerald-300);
+  --color-fg-danger: var(--color-rose-500);
+  --color-fg-danger-strong: var(--color-rose-300);
+  --color-fg-warning-subtle: var(--color-orange-500);
+  --color-fg-warning: var(--color-orange-300);
+  --color-fg-yellow: var(--color-yellow-400);
+  --color-fg-disabled: var(--color-gray-600);
+  --color-fg-purple: var(--color-purple-500);
+  --color-fg-cyan: var(--color-cyan-500);
+  --color-fg-indigo: var(--color-indigo-500);
+  --color-fg-pink: var(--color-pink-500);
+  --color-fg-lime: var(--color-lime-500);
+
+  /* background color variables */
+  --color-neutral-primary-soft: var(--color-gray-900);
+  --color-neutral-primary: var(--color-gray-950);
+  --color-neutral-primary-medium: var(--color-gray-800);
+  --color-neutral-primary-strong: var(--color-gray-700);
+  --color-neutral-secondary-soft: var(--color-gray-900);
+  --color-neutral-secondary: var(--color-gray-950);
+  --color-neutral-secondary-medium: var(--color-gray-800);
+  --color-neutral-secondary-strong: var(--color-gray-700);
+  --color-neutral-secondary-strongest: var(--color-gray-600);
+  --color-neutral-tertiary-soft: var(--color-gray-900);
+  --color-neutral-tertiary: var(--color-gray-800);
+  --color-neutral-tertiary-medium: var(--color-gray-700);
+  --color-neutral-quaternary: var(--color-gray-700);
+  --color-neutral-quaternary-medium: var(--color-gray-600);
+  --color-gray: var(--color-gray-600);
+  --color-brand-softer: var(--color-blue-950);
+  --color-brand-soft: var(--color-blue-900);
+  --color-brand: var(--color-blue-600);
+  --color-brand-medium: var(--color-blue-900);
+  --color-brand-strong: var(--color-blue-700);
+  --color-success-soft: var(--color-emerald-950);
+  --color-success: var(--color-emerald-600);
+  --color-success-medium: var(--color-emerald-900);
+  --color-success-strong: var(--color-emerald-700);
+  --color-danger-soft: var(--color-rose-950);
+  --color-danger: var(--color-rose-700);
+  --color-danger-medium: var(--color-rose-900);
+  --color-danger-strong: var(--color-rose-800);
+  --color-warning-soft: var(--color-orange-950);
+  --color-warning: var(--color-orange-600);
+  --color-warning-medium: var(--color-orange-900);
+  --color-warning-strong: var(--color-orange-700);
+  --color-dark-soft: var(--color-gray-700);
+  --color-dark: var(--color-gray-800);
+  --color-dark-strong: var(--color-gray-700);
+  --color-disabled: var(--color-gray-800);
+  --color-purple: var(--color-purple-500);
+  --color-sky: var(--color-sky-500);
+  --color-teal: var(--color-teal-500);
+  --color-pink: var(--color-pink-500);
+  --color-cyan: var(--color-cyan-500);
+  --color-fuchsia: var(--color-fuchsia-500);
+  --color-indigo: var(--color-indigo-500);
+  --color-orange: var(--color-orange-400);
+
+  /* border color variables */
+  --color-buffer: var(--color-gray-950);
+  --color-buffer-medium: var(--color-gray-900);
+  --color-buffer-strong: var(--color-gray-800);
+  --color-muted: var(--color-gray-900);
+  --color-light-subtle: var(--color-gray-900);
+  --color-light: var(--color-gray-800);
+  --color-light-medium: var(--color-gray-700);
+  --color-default-subtle: var(--color-gray-900);
+  --color-default: var(--color-gray-800);
+  --color-default-medium: var(--color-gray-700);
+  --color-default-strong: var(--color-gray-600);
+  --color-success-subtle: var(--color-emerald-900);
+  --color-danger-subtle: var(--color-rose-900);
+  --color-warning-subtle: var(--color-orange-900);
+  --color-brand-subtle: var(--color-blue-900);
+  --color-brand-light: var(--color-blue-600);
+  --color-dark-subtle: var(--color-gray-700);
+  --color-dark-backdrop: var(--color-gray-950);
+}

package/dist/theme-selector/themes/enterprise-runtime.css

@@ -0,0 +1,210 @@
+:root {
+  --font-sans: "STIX Two Text", serif;
+  --font-body: "STIX Two Text", serif;
+
+  /* Flowbite variables */
+
+  --leading-9: 36px; /* rem pls */
+  --leading-7: 28px;
+  --leading-8: 32px;
+  --leading-6: 24px;
+  --leading-4: 16px;
+  --leading-none: 1px;
+  --leading-5: 20px;
+  --tracking-tighter: -0.8px;
+  --leading-heading-none: 60px;
+  --tracking-tight: -0.4px;
+
+  --text-xs: 0.825rem;
+  --text-sm: 0.925rem;
+  --text-base: 1.125rem;
+
+  /* radius variables */
+  --radius-xxs: 1px;
+  --radius-xs: 1px;
+  --radius-sm: 1px;
+  --radius: 4px;
+  --radius: 4px;
+  --radius-md: 4px;
+  --radius-base: 4px;
+  --radius-lg: 4px;
+
+  /* border width variables */
+  --default-border-width: 1px;
+
+  /* text color variables */
+  --color-body: var(--color-zinc-600);
+  --color-body-subtle: var(--color-zinc-500);
+  --color-heading: var(--color-zinc-900);
+  --color-fg-brand-subtle: var(--color-cyan-200);
+  --color-fg-brand: var(--color-cyan-700);
+  --color-fg-brand-strong: var(--color-cyan-900);
+  --color-fg-success: var(--color-green-700);
+  --color-fg-success-strong: var(--color-green-900);
+  --color-fg-danger: var(--color-red-700);
+  --color-fg-danger-strong: var(--color-red-900);
+  --color-fg-warning-subtle: var(--color-orange-600);
+  --color-fg-warning: var(--color-orange-900);
+  --color-fg-yellow: var(--color-yellow-400);
+  --color-fg-disabled: var(--color-zinc-400);
+  --color-fg-purple: var(--color-purple-600);
+  --color-fg-cyan: var(--color-cyan-600);
+  --color-fg-indigo: var(--color-cyan-600);
+  --color-fg-pink: var(--color-pink-600);
+  --color-fg-lime: var(--color-lime-600);
+
+  /* background color variables */
+  --color-neutral-primary-soft: var(--color-white);
+  --color-neutral-primary: var(--color-white);
+  --color-neutral-primary-medium: var(--color-white);
+  --color-neutral-primary-strong: var(--color-white);
+  --color-neutral-secondary-soft: var(--color-white);
+  --color-neutral-secondary: var(--color-white);
+  --color-neutral-secondary-medium: var(--color-white);
+  --color-neutral-secondary-strong: var(--color-white);
+  --color-neutral-secondary-strongest: var(--color-white);
+  --color-neutral-tertiary-soft: var(--color-zinc-100);
+  --color-neutral-tertiary: var(--color-zinc-100);
+  --color-neutral-tertiary-medium: var(--color-zinc-100);
+  --color-neutral-quaternary: var(--color-zinc-200);
+  --color-neutral-quaternary-medium: var(--color-zinc-200);
+  --color-gray: var(--color-zinc-300);
+  --color-brand-softer: var(--color-cyan-50);
+  --color-brand-soft: var(--color-cyan-100);
+  --color-brand: var(--color-cyan-900);
+  --color-brand-medium: var(--color-cyan-200);
+  --color-brand-strong: var(--color-cyan-800);
+  --color-success-soft: var(--color-green-50);
+  --color-success: var(--color-green-700);
+  --color-success-medium: var(--color-green-100);
+  --color-success-strong: var(--color-green-800);
+  --color-danger-soft: var(--color-red-50);
+  --color-danger: var(--color-red-700);
+  --color-danger-medium: var(--color-red-100);
+  --color-danger-strong: var(--color-red-800);
+  --color-warning-soft: var(--color-orange-50);
+  --color-warning: var(--color-orange-500);
+  --color-warning-medium: var(--color-orange-100);
+  --color-warning-strong: var(--color-orange-700);
+  --color-dark-soft: var(--color-zinc-800);
+  --color-dark: var(--color-zinc-800);
+  --color-dark-strong: var(--color-zinc-900);
+  --color-disabled: var(--color-zinc-100);
+  --color-purple: var(--color-purple-500);
+  --color-sky: var(--color-sky-500);
+  --color-teal: var(--color-teal-600);
+  --color-pink: var(--color-pink-600);
+  --color-cyan: var(--color-cyan-500);
+  --color-fuchsia: var(--color-fuchsia-600);
+  --color-indigo: var(--color-cyan-600);
+  --color-orange: var(--color-orange-400);
+
+  /* border color variables */
+  --color-buffer: var(--color-white);
+  --color-buffer-medium: var(--color-white);
+  --color-buffer-strong: var(--color-white);
+  --color-muted: var(--color-zinc-50);
+  --color-light-subtle: var(--color-zinc-100);
+  --color-light: var(--color-zinc-100);
+  --color-light-medium: var(--color-zinc-100);
+  --color-default-subtle: var(--color-zinc-200);
+  --color-default: var(--color-zinc-200);
+  --color-default-medium: var(--color-zinc-200);
+  --color-default-strong: var(--color-zinc-200);
+  --color-success-subtle: var(--color-green-200);
+  --color-danger-subtle: var(--color-red-200);
+  --color-warning-subtle: var(--color-orange-200);
+  --color-brand-subtle: var(--color-cyan-200);
+  --color-brand-light: var(--color-cyan-600);
+  --color-dark-subtle: var(--color-zinc-800);
+  --color-dark-backdrop: var(--color-zinc-950);
+}
+
+.dark {
+  /* text color variables */
+  --color-body: var(--color-zinc-400);
+  --color-body-subtle: var(--color-zinc-400);
+  --color-heading: var(--color-white);
+  --color-fg-brand-subtle: var(--color-cyan-200);
+  --color-fg-brand: var(--color-cyan-500);
+  --color-fg-brand-strong: var(--color-cyan-400);
+  --color-fg-success: var(--color-green-600);
+  --color-fg-success-strong: var(--color-green-300);
+  --color-fg-danger: var(--color-red-500);
+  --color-fg-danger-strong: var(--color-red-300);
+  --color-fg-warning-subtle: var(--color-orange-500);
+  --color-fg-warning: var(--color-orange-300);
+  --color-fg-yellow: var(--color-yellow-400);
+  --color-fg-disabled: var(--color-zinc-600);
+  --color-fg-purple: var(--color-purple-500);
+  --color-fg-cyan: var(--color-cyan-500);
+  --color-fg-indigo: var(--color-cyan-500);
+  --color-fg-pink: var(--color-pink-500);
+  --color-fg-lime: var(--color-lime-500);
+
+  /* background color variables */
+  --color-neutral-primary-soft: var(--color-zinc-900);
+  --color-neutral-primary: var(--color-zinc-950);
+  --color-neutral-primary-medium: var(--color-zinc-800);
+  --color-neutral-primary-strong: var(--color-zinc-700);
+  --color-neutral-secondary-soft: var(--color-zinc-900);
+  --color-neutral-secondary: var(--color-zinc-950);
+  --color-neutral-secondary-medium: var(--color-zinc-800);
+  --color-neutral-secondary-strong: var(--color-zinc-700);
+  --color-neutral-secondary-strongest: var(--color-zinc-600);
+  --color-neutral-tertiary-soft: var(--color-zinc-900);
+  --color-neutral-tertiary: var(--color-zinc-800);
+  --color-neutral-tertiary-medium: var(--color-zinc-700);
+  --color-neutral-quaternary: var(--color-zinc-700);
+  --color-neutral-quaternary-medium: var(--color-zinc-600);
+  --color-gray: var(--color-zinc-600);
+  --color-brand-softer: var(--color-cyan-950);
+  --color-brand-soft: var(--color-cyan-900);
+  --color-brand: var(--color-cyan-600);
+  --color-brand-medium: var(--color-cyan-900);
+  --color-brand-strong: var(--color-cyan-700);
+  --color-success-soft: var(--color-green-950);
+  --color-success: var(--color-green-600);
+  --color-success-medium: var(--color-green-900);
+  --color-success-strong: var(--color-green-700);
+  --color-danger-soft: var(--color-red-950);
+  --color-danger: var(--color-red-700);
+  --color-danger-medium: var(--color-red-900);
+  --color-danger-strong: var(--color-red-800);
+  --color-warning-soft: var(--color-orange-950);
+  --color-warning: var(--color-orange-600);
+  --color-warning-medium: var(--color-orange-900);
+  --color-warning-strong: var(--color-orange-700);
+  --color-dark-soft: var(--color-zinc-700);
+  --color-dark: var(--color-zinc-800);
+  --color-dark-strong: var(--color-zinc-700);
+  --color-disabled: var(--color-zinc-800);
+  --color-purple: var(--color-purple-500);
+  --color-sky: var(--color-sky-500);
+  --color-teal: var(--color-teal-500);
+  --color-pink: var(--color-pink-500);
+  --color-cyan: var(--color-cyan-500);
+  --color-fuchsia: var(--color-fuchsia-500);
+  --color-indigo: var(--color-cyan-500);
+  --color-orange: var(--color-orange-400);
+
+  /* border color variables */
+  --color-buffer: var(--color-zinc-950);
+  --color-buffer-medium: var(--color-zinc-900);
+  --color-buffer-strong: var(--color-zinc-800);
+  --color-muted: var(--color-zinc-900);
+  --color-light-subtle: var(--color-zinc-900);
+  --color-light: var(--color-zinc-800);
+  --color-light-medium: var(--color-zinc-700);
+  --color-default-subtle: var(--color-zinc-900);
+  --color-default: var(--color-zinc-800);
+  --color-default-medium: var(--color-zinc-700);
+  --color-default-strong: var(--color-zinc-600);
+  --color-success-subtle: var(--color-green-900);
+  --color-danger-subtle: var(--color-red-900);
+  --color-warning-subtle: var(--color-orange-900);
+  --color-brand-subtle: var(--color-cyan-900);
+  --color-brand-light: var(--color-cyan-600);
+  --color-dark-subtle: var(--color-zinc-700);
+  --color-dark-backdrop: var(--color-zinc-950);
+}