@sykoramaros/marosh-components 0.1.15 → 0.2.0

package/src/providers/ThemeContextProvider.tsx

@@ -0,0 +1,272 @@
+// src/providers/ThemeContextProvider.tsx
+import React, { createContext, useContext, useEffect, useRef, useState } from "react"
+
+// Typy - EXPORTUJ JE!
+export type ThemeMode = "light" | "dark"
+
+export interface ThemeConfig {
+  name: string
+  cssVars: {
+    theme: Record<string, string>
+    light: Record<string, string>
+    dark: Record<string, string>
+  }
+  css?: {
+    "@layer base"?: Record<string, any>
+  }
+}
+
+export type ThemeRegistry = Record<string, ThemeConfig>
+
+// Context
+interface ThemeContextType {
+  isDarkMode: boolean
+  setIsDarkMode: (value: boolean) => void
+  themeName: string
+  setThemeName: (value: string) => void
+  availableThemes: string[]
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error("useThemeContext must be used within ThemeContextProvider")
+  }
+  return context
+}
+
+// Provider Props
+export interface ThemeContextProviderProps {
+  children: React.ReactNode
+  themes: ThemeRegistry // <- Uživatel předá své themes!
+  defaultTheme?: string
+  defaultMode?: ThemeMode
+}
+
+// Provider
+export const ThemeContextProvider = ({
+  children,
+  themes,
+  defaultTheme,
+  defaultMode = "light",
+}: ThemeContextProviderProps) => {
+  // Určit default theme
+  const initialTheme = defaultTheme || Object.keys(themes)[0] || "default"
+
+  const [isDarkMode, setIsDarkMode] = useState(defaultMode === "dark")
+  const [themeName, setThemeName] = useState<string>(initialTheme)
+  const appliedVarsRef = useRef<string[]>([])
+
+  const mode: ThemeMode = isDarkMode ? "dark" : "light"
+
+  useEffect(() => {
+    const theme = themes[themeName] || Object.values(themes)[0]
+
+    if (!theme) {
+      console.warn(`Theme "${themeName}" not found`)
+      return
+    }
+
+    // Smazat CSS proměnné předchozího tématu
+    appliedVarsRef.current.forEach((key) => {
+      document.documentElement.style.removeProperty(key)
+    })
+
+    const newKeys: string[] = []
+
+    // Aplikovat CSS proměnné pro mode (light/dark)
+    Object.entries(theme.cssVars[mode] || {}).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--${key}`, value)
+      newKeys.push(`--${key}`)
+    })
+
+    // Aplikovat CSS proměnné z theme (včetně fontů)
+    Object.entries(theme.cssVars.theme || {}).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--${key}`, value)
+      newKeys.push(`--${key}`)
+    })
+
+    appliedVarsRef.current = newKeys
+
+    // Vytvořit a přidat @layer base styly
+    const styleId = "theme-base-styles"
+    let styleElement = document.getElementById(styleId) as HTMLStyleElement
+
+    if (!styleElement) {
+      styleElement = document.createElement("style")
+      styleElement.id = styleId
+      document.head.appendChild(styleElement)
+    }
+
+    // Převést objekt @layer base na CSS řetězec
+    const baseStyles = theme.css?.["@layer base"]
+    if (baseStyles) {
+      const cssString = Object.entries(baseStyles)
+        .map(([selector, styles]) => {
+          const styleString = Object.entries(styles as Record<string, string>)
+            .map(([prop, val]) => `${prop}: ${val};`)
+            .join(" ")
+          return `${selector} { ${styleString} }`
+        })
+        .join("\n")
+
+      styleElement.textContent = `@layer base { ${cssString} }`
+    } else {
+      styleElement.textContent = ""
+    }
+
+    // Nastavit data atributy
+    document.documentElement.setAttribute("data-theme", themeName)
+    document.documentElement.setAttribute("data-mode", mode)
+  }, [themeName, mode, themes])
+
+  const availableThemes = Object.keys(themes)
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        isDarkMode,
+        setIsDarkMode,
+        themeName,
+        setThemeName,
+        availableThemes,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+// // src/providers/ThemeContextProvider.tsx
+// import React, { createContext, useContext, useEffect, useState } from "react"
+
+// // Přímý import JSON
+// import defaultJson from "@/themes/default.json"
+// import maroshThemeJson from "@/themes/marosh-theme.json"
+// import newThemeJson from "@/themes/new-theme.json"
+// import natureJson from "@/themes/nature.json"
+// import retroArcadeJson from "@/themes/retro-arcade.json"
+// import tangerineJson from "@/themes/tangerine.json"
+// import bubblegumJson from "@/themes/bubblegum.json"
+
+// // Typy
+// type ThemeMode = "light" | "dark"
+// type ThemeName =
+//   | "default"
+//   | "marosh"
+//   | "newTheme"
+//   | "nature"
+//   | "retro-arcade"
+//   | "tangerine"
+//   | "bubblegum"
+
+// interface ThemeConfig {
+//   name: string
+//   cssVars: {
+//     theme: Record<string, string>
+//     light: Record<string, string>
+//     dark: Record<string, string>
+//   }
+//   css: {
+//     "@layer base": Record<string, any>
+//   }
+// }
+
+// // Data
+// const themeData = {
+//   default: defaultJson as ThemeConfig,
+//   marosh: maroshThemeJson as ThemeConfig,
+//   newTheme: newThemeJson as ThemeConfig,
+//   nature: natureJson as ThemeConfig,
+//   "retro-arcade": retroArcadeJson as ThemeConfig,
+//   tangerine: tangerineJson as ThemeConfig,
+//   bubblegum: bubblegumJson as ThemeConfig,
+// }
+
+// // Context
+// interface ThemeContextType {
+//   isDarkMode: boolean
+//   setIsDarkMode: (value: boolean) => void
+//   themeName: ThemeName
+//   setThemeName: (value: ThemeName) => void
+// }
+
+// const ThemeContext = createContext<ThemeContextType>({
+//   isDarkMode: false,
+//   setIsDarkMode: () => {},
+//   themeName: "marosh",
+//   setThemeName: () => {},
+// })
+
+// export const useThemeContext = () => useContext(ThemeContext)
+
+// // Provider
+// export const ThemeContextProvider = ({
+//   children,
+//   defaultTheme = "marosh",
+// }: {
+//   children: React.ReactNode
+//   defaultTheme?: ThemeName
+// }) => {
+//   const [isDarkMode, setIsDarkMode] = useState(false)
+//   const [themeName, setThemeName] = useState<ThemeName>(defaultTheme)
+
+//   const mode: ThemeMode = isDarkMode ? "dark" : "light"
+
+//   console.log("ThemeContextProvider - isDarkMode:", isDarkMode, "mode:", mode)
+
+//   useEffect(() => {
+//     const theme = themeData[themeName] || themeData.default
+
+//     // Aplikovat CSS proměnné
+//     Object.entries(theme.cssVars[mode]).forEach(([key, value]) => {
+//       document.documentElement.style.setProperty(`--${key}`, value)
+//     })
+
+//     // Aplikovat CSS proměnné z theme (včetně fontů)
+//     Object.entries(theme.cssVars.theme).forEach(([key, value]) => {
+//       document.documentElement.style.setProperty(`--${key}`, value)
+//     })
+
+//     // Vytvořit a přidat @layer base styly
+//     const styleId = "theme-base-styles"
+//     let styleElement = document.getElementById(styleId) as HTMLStyleElement
+
+//     if (!styleElement) {
+//       styleElement = document.createElement("style")
+//       styleElement.id = styleId
+//       document.head.appendChild(styleElement)
+//     }
+
+//     // Převést objekt @layer base na CSS řetězec
+//     const baseStyles = theme.css?.["@layer base"]
+//     if (baseStyles) {
+//       const cssString = Object.entries(baseStyles)
+//         .map(([selector, styles]) => {
+//           const styleString = Object.entries(styles as Record<string, string>)
+//             .map(([prop, val]) => `${prop}: ${val};`)
+//             .join(" ")
+//           return `${selector} { ${styleString} }`
+//         })
+//         .join("\n")
+
+//       styleElement.textContent = `@layer base { ${cssString} }`
+//     } else {
+//       styleElement.textContent = ""
+//     }
+
+//     // Nastavit data atributy
+//     document.documentElement.setAttribute("data-theme", themeName)
+//     document.documentElement.setAttribute("data-mode", mode)
+//   }, [themeName, mode])
+
+//   return (
+//     <ThemeContext.Provider
+//       value={{ isDarkMode, setIsDarkMode, themeName, setThemeName }}
+//     >
+//       {children}
+//     </ThemeContext.Provider>
+//   )
+// }

package/src/themes/bubblegum.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "bubblegum",
+  "type": "registry:style",
+  "css": {
+    "@layer base": {
+      "body": {
+        "letter-spacing": "var(--tracking-normal)"
+      }
+    }
+  },
+  "cssVars": {
+    "theme": {
+      "font-sans": "Poppins, sans-serif",
+      "font-mono": "Fira Code, monospace",
+      "font-serif": "Lora, serif",
+      "radius": "0.4rem",
+      "tracking-tighter": "calc(var(--tracking-normal) - 0.05em)",
+      "tracking-tight": "calc(var(--tracking-normal) - 0.025em)",
+      "tracking-wide": "calc(var(--tracking-normal) + 0.025em)",
+      "tracking-wider": "calc(var(--tracking-normal) + 0.05em)",
+      "tracking-widest": "calc(var(--tracking-normal) + 0.1em)"
+    },
+    "light": {
+      "background": "oklch(0.9399 0.0203 345.6985)",
+      "foreground": "oklch(0.4712 0 0)",
+      "card": "oklch(0.9498 0.0500 86.8891)",
+      "card-foreground": "oklch(0.4712 0 0)",
+      "popover": "oklch(1.0000 0 0)",
+      "popover-foreground": "oklch(0.4712 0 0)",
+      "primary": "oklch(0.6209 0.1801 348.1385)",
+      "primary-foreground": "oklch(1.0000 0 0)",
+      "secondary": "oklch(0.8095 0.0694 198.1863)",
+      "secondary-foreground": "oklch(0.3211 0 0)",
+      "muted": "oklch(0.8800 0.0504 212.0952)",
+      "muted-foreground": "oklch(0.5795 0 0)",
+      "accent": "oklch(0.9195 0.0801 87.6670)",
+      "accent-foreground": "oklch(0.3211 0 0)",
+      "destructive": "oklch(0.7091 0.1697 21.9551)",
+      "destructive-foreground": "oklch(1.0000 0 0)",
+      "border": "oklch(0.6209 0.1801 348.1385)",
+      "input": "oklch(0.9189 0 0)",
+      "ring": "oklch(0.7002 0.1597 350.7532)",
+      "chart-1": "oklch(0.7002 0.1597 350.7532)",
+      "chart-2": "oklch(0.8189 0.0799 212.0892)",
+      "chart-3": "oklch(0.9195 0.0801 87.6670)",
+      "chart-4": "oklch(0.7998 0.1110 348.1791)",
+      "chart-5": "oklch(0.6197 0.1899 353.9091)",
+      "radius": "0.4rem",
+      "sidebar": "oklch(0.9140 0.0424 343.0913)",
+      "sidebar-foreground": "oklch(0.3211 0 0)",
+      "sidebar-primary": "oklch(0.6559 0.2118 354.3084)",
+      "sidebar-primary-foreground": "oklch(1.0000 0 0)",
+      "sidebar-accent": "oklch(0.8228 0.1095 346.0184)",
+      "sidebar-accent-foreground": "oklch(0.3211 0 0)",
+      "sidebar-border": "oklch(0.9464 0.0327 307.1745)",
+      "sidebar-ring": "oklch(0.6559 0.2118 354.3084)",
+      "font-sans": "Poppins, sans-serif",
+      "font-serif": "Lora, serif",
+      "font-mono": "Fira Code, monospace",
+      "shadow-color": "hsl(325.78 58.18% 56.86% / 0.5)",
+      "shadow-opacity": "1.0",
+      "shadow-blur": "0px",
+      "shadow-spread": "0px",
+      "shadow-offset-x": "3px",
+      "shadow-offset-y": "3px",
+      "letter-spacing": "0em",
+      "spacing": "0.25rem",
+      "shadow-2xs": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50)",
+      "shadow-xs": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50)",
+      "shadow-sm": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow-md": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 2px 4px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow-lg": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 4px 6px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow-xl": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 8px 10px -1px hsl(325.7800 58.1800% 56.8600% / 1.00)",
+      "shadow-2xl": "3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 2.50)",
+      "tracking-normal": "0em"
+    },
+    "dark": {
+      "background": "oklch(0.2497 0.0305 234.1628)",
+      "foreground": "oklch(0.9306 0.0197 349.0785)",
+      "card": "oklch(0.2902 0.0299 233.5352)",
+      "card-foreground": "oklch(0.9306 0.0197 349.0785)",
+      "popover": "oklch(0.2902 0.0299 233.5352)",
+      "popover-foreground": "oklch(0.9306 0.0197 349.0785)",
+      "primary": "oklch(0.9195 0.0801 87.6670)",
+      "primary-foreground": "oklch(0.2497 0.0305 234.1628)",
+      "secondary": "oklch(0.7794 0.0803 4.1330)",
+      "secondary-foreground": "oklch(0.2497 0.0305 234.1628)",
+      "muted": "oklch(0.2713 0.0086 255.5780)",
+      "muted-foreground": "oklch(0.7794 0.0803 4.1330)",
+      "accent": "oklch(0.6699 0.0988 356.9762)",
+      "accent-foreground": "oklch(0.9306 0.0197 349.0785)",
+      "destructive": "oklch(0.6702 0.1806 350.3599)",
+      "destructive-foreground": "oklch(0.2497 0.0305 234.1628)",
+      "border": "oklch(0.3907 0.0399 242.2181)",
+      "input": "oklch(0.3093 0.0305 232.0027)",
+      "ring": "oklch(0.6998 0.0896 201.8672)",
+      "chart-1": "oklch(0.6998 0.0896 201.8672)",
+      "chart-2": "oklch(0.7794 0.0803 4.1330)",
+      "chart-3": "oklch(0.6699 0.0988 356.9762)",
+      "chart-4": "oklch(0.4408 0.0702 217.0848)",
+      "chart-5": "oklch(0.2713 0.0086 255.5780)",
+      "radius": "0.4rem",
+      "sidebar": "oklch(0.2303 0.0270 235.9743)",
+      "sidebar-foreground": "oklch(0.9670 0.0029 264.5419)",
+      "sidebar-primary": "oklch(0.6559 0.2118 354.3084)",
+      "sidebar-primary-foreground": "oklch(1.0000 0 0)",
+      "sidebar-accent": "oklch(0.8228 0.1095 346.0184)",
+      "sidebar-accent-foreground": "oklch(0.2781 0.0296 256.8480)",
+      "sidebar-border": "oklch(0.3729 0.0306 259.7328)",
+      "sidebar-ring": "oklch(0.6559 0.2118 354.3084)",
+      "font-sans": "Poppins, sans-serif",
+      "font-serif": "Lora, serif",
+      "font-mono": "Fira Code, monospace",
+      "shadow-color": "#324859",
+      "shadow-opacity": "1.0",
+      "shadow-blur": "0px",
+      "shadow-spread": "0px",
+      "shadow-offset-x": "3px",
+      "shadow-offset-y": "3px",
+      "letter-spacing": "0em",
+      "spacing": "0.25rem",
+      "shadow-2xs": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50)",
+      "shadow-xs": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50)",
+      "shadow-sm": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow-md": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 2px 4px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow-lg": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 4px 6px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow-xl": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 8px 10px -1px hsl(206.1538 28.0576% 27.2549% / 1.00)",
+      "shadow-2xl": "3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 2.50)"
+    }
+  }
+}

package/src/themes/default.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "default",
+  "type": "registry:style",
+  "css": {
+    "@layer base": {
+      "body": {
+        "letter-spacing": "var(--tracking-normal)"
+      }
+    }
+  },
+  "cssVars": {
+    "theme": {
+      "font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+      "font-serif": "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+      "radius": "0.5rem",
+      "tracking-tighter": "calc(var(--tracking-normal) - 0.05em)",
+      "tracking-tight": "calc(var(--tracking-normal) - 0.025em)",
+      "tracking-wide": "calc(var(--tracking-normal) + 0.025em)",
+      "tracking-wider": "calc(var(--tracking-normal) + 0.05em)",
+      "tracking-widest": "calc(var(--tracking-normal) + 0.1em)"
+    },
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 265.731)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 265.731)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 265.731)",
+      "primary": "oklch(0.216 0.006 265.755)",
+      "primary-foreground": "oklch(0.984 0.003 247.858)",
+      "secondary": "oklch(0.968 0.007 247.896)",
+      "secondary-foreground": "oklch(0.216 0.006 265.755)",
+      "muted": "oklch(0.968 0.007 247.896)",
+      "muted-foreground": "oklch(0.553 0.013 256.802)",
+      "accent": "oklch(0.968 0.007 247.896)",
+      "accent-foreground": "oklch(0.216 0.006 265.755)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "destructive-foreground": "oklch(0.984 0.003 247.858)",
+      "border": "oklch(0.928 0.006 264.531)",
+      "input": "oklch(0.928 0.006 264.531)",
+      "ring": "oklch(0.147 0.004 265.731)",
+      "chart-1": "oklch(0.646 0.222 16.439)",
+      "chart-2": "oklch(0.6 0.118 184.704)",
+      "chart-3": "oklch(0.398 0.07 227.392)",
+      "chart-4": "oklch(0.828 0.189 84.429)",
+      "chart-5": "oklch(0.769 0.188 55.934)",
+      "radius": "0.5rem",
+      "sidebar": "oklch(0.984 0.003 247.858)",
+      "sidebar-foreground": "oklch(0.147 0.004 265.731)",
+      "sidebar-primary": "oklch(0.216 0.006 265.755)",
+      "sidebar-primary-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-accent": "oklch(0.968 0.007 247.896)",
+      "sidebar-accent-foreground": "oklch(0.216 0.006 265.755)",
+      "sidebar-border": "oklch(0.928 0.006 264.531)",
+      "sidebar-ring": "oklch(0.147 0.004 265.731)",
+      "font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "font-serif": "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+      "font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+      "shadow-color": "oklch(0 0 0)",
+      "shadow-opacity": "0.1",
+      "shadow-blur": "3px",
+      "shadow-spread": "0px",
+      "shadow-offset-x": "0px",
+      "shadow-offset-y": "1px",
+      "letter-spacing": "0em",
+      "spacing": "0.25rem",
+      "shadow-2xs": "0px 1px 3px 0px oklch(0 0 0 / 0.05)",
+      "shadow-xs": "0px 1px 3px 0px oklch(0 0 0 / 0.05)",
+      "shadow-sm": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 1px 2px -1px oklch(0 0 0 / 0.10)",
+      "shadow": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 1px 2px -1px oklch(0 0 0 / 0.10)",
+      "shadow-md": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 2px 4px -1px oklch(0 0 0 / 0.10)",
+      "shadow-lg": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 4px 6px -1px oklch(0 0 0 / 0.10)",
+      "shadow-xl": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 8px 10px -1px oklch(0 0 0 / 0.10)",
+      "shadow-2xl": "0px 1px 3px 0px oklch(0 0 0 / 0.25)",
+      "tracking-normal": "0em"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 265.731)",
+      "foreground": "oklch(0.984 0.003 247.858)",
+      "card": "oklch(0.147 0.004 265.731)",
+      "card-foreground": "oklch(0.984 0.003 247.858)",
+      "popover": "oklch(0.147 0.004 265.731)",
+      "popover-foreground": "oklch(0.984 0.003 247.858)",
+      "primary": "oklch(0.984 0.003 247.858)",
+      "primary-foreground": "oklch(0.216 0.006 265.755)",
+      "secondary": "oklch(0.268 0.007 260.031)",
+      "secondary-foreground": "oklch(0.984 0.003 247.858)",
+      "muted": "oklch(0.268 0.007 260.031)",
+      "muted-foreground": "oklch(0.707 0.022 261.325)",
+      "accent": "oklch(0.268 0.007 260.031)",
+      "accent-foreground": "oklch(0.984 0.003 247.858)",
+      "destructive": "oklch(0.396 0.141 25.723)",
+      "destructive-foreground": "oklch(0.984 0.003 247.858)",
+      "border": "oklch(0.268 0.007 260.031)",
+      "input": "oklch(0.268 0.007 260.031)",
+      "ring": "oklch(0.84 0.042 260.03)",
+      "chart-1": "oklch(0.488 0.243 264.376)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.769 0.188 55.934)",
+      "chart-4": "oklch(0.627 0.265 303.9)",
+      "chart-5": "oklch(0.645 0.246 16.439)",
+      "radius": "0.5rem",
+      "sidebar": "oklch(0.147 0.004 265.731)",
+      "sidebar-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-primary": "oklch(0.984 0.003 247.858)",
+      "sidebar-primary-foreground": "oklch(0.216 0.006 265.755)",
+      "sidebar-accent": "oklch(0.268 0.007 260.031)",
+      "sidebar-accent-foreground": "oklch(0.984 0.003 247.858)",
+      "sidebar-border": "oklch(0.268 0.007 260.031)",
+      "sidebar-ring": "oklch(0.84 0.042 260.03)",
+      "font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "font-serif": "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+      "font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+      "shadow-color": "oklch(0 0 0)",
+      "shadow-opacity": "0.1",
+      "shadow-blur": "3px",
+      "shadow-spread": "0px",
+      "shadow-offset-x": "0px",
+      "shadow-offset-y": "1px",
+      "letter-spacing": "0em",
+      "spacing": "0.25rem",
+      "shadow-2xs": "0px 1px 3px 0px oklch(0 0 0 / 0.05)",
+      "shadow-xs": "0px 1px 3px 0px oklch(0 0 0 / 0.05)",
+      "shadow-sm": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 1px 2px -1px oklch(0 0 0 / 0.10)",
+      "shadow": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 1px 2px -1px oklch(0 0 0 / 0.10)",
+      "shadow-md": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 2px 4px -1px oklch(0 0 0 / 0.10)",
+      "shadow-lg": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 4px 6px -1px oklch(0 0 0 / 0.10)",
+      "shadow-xl": "0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 8px 10px -1px oklch(0 0 0 / 0.10)",
+      "shadow-2xl": "0px 1px 3px 0px oklch(0 0 0 / 0.25)"
+    }
+  }
+}

package/src/themes/index.ts

@@ -0,0 +1,17 @@
+import maroshTheme from "./marosh-theme.json"
+import defaultTheme from "./default.json"
+import bubblegumTheme from "./bubblegum.json"
+import natureTheme from "./nature.json"
+import retroArcadeTheme from "./retro-arcade.json"
+import tangerineTheme from "./tangerine.json"
+import newTheme from "./new-theme.json"
+
+export const themeData = {
+  default: defaultTheme,
+  marosh: maroshTheme,
+  bubblegum: bubblegumTheme,
+  nature: natureTheme,
+  "retro-arcade": retroArcadeTheme,
+  tangerine: tangerineTheme,
+  "new-theme": newTheme,
+}