@rimelight/ui 0.0.41 → 0.0.43

package/src/components/tour/tour.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTourTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createTourTheme()
+export const tourTheme = defineTheme("tour", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/tree/RLATree.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { TreeProps } from "./tree"
-import treeTheme from "./tree.theme"
-
-
-const tree = scv(treeTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as TreeProps
-
-const classes = resolveClasses(tree, {}, useUi("tree", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { treeTheme } from "./tree.theme"
+
+
+
+const classes = treeTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/tree/tree.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTreeTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createTreeTheme()
+export const treeTheme = defineTheme("tree", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/user/RLAUser.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { UserProps } from "./user"
-import userTheme from "./user.theme"
-
-
-const user = scv(userTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as UserProps
-
-const classes = resolveClasses(user, {}, useUi("user", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { userTheme } from "./user.theme"
+
+
+
+const classes = userTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/user/user.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createUserTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createUserTheme()
+export const userTheme = defineTheme("user", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/video/RLAVideo.astro

@@ -1,9 +1,6 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { VideoProps } from "./video"
-import videoTheme from "./video.theme"
+import { videoTheme } from "./video.theme"
 import { Image } from "astro:assets"
 import RLAIcon from "../icon/RLAIcon.astro"
 
@@ -112,21 +109,19 @@ function getYoutubeEmbedUrl(rawUrl: string): string | null {
 }
 
 
-const video = scv(videoTheme)
 
 const {
   src,
   title = "YouTube Video Player",
   icon = "play",
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as VideoProps
 
-const classes = resolveClasses(video, {
+const classes = videoTheme({
+  ...Astro.props,
   title: !!(Astro.slots.has("title") || title),
-  icon: !!(Astro.slots.has("icon") || icon),
-}, useUi("video", uiProp), className);
+  icon: !!(Astro.slots.has("icon") || icon)
+});
 
 const embedUrl = getYoutubeEmbedUrl(src);
 const thumbnail = await getYoutubeThumbnail(src);

package/src/components/video/video.theme.ts

@@ -1,17 +1,14 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createVideoTheme = () =>
-  defineTheme({
-    slots: ["root", "trigger", "image", "icon"],
-    base: {
-      root: "relative aspect-video h-full w-full cursor-pointer overflow-hidden",
-      trigger: "group absolute inset-0 aspect-video h-full w-full overflow-hidden",
-      image: "h-full w-full object-cover",
-      icon: "absolute inset-0 m-auto h-24 w-24 text-white opacity-75 transition-opacity group-hover:opacity-100"
-    },
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {}
-  })
-
-export default createVideoTheme()
+export const videoTheme = defineTheme("video", {
+  slots: ["root", "trigger", "image", "icon"],
+  base: {
+    root: "relative aspect-video h-full w-full cursor-pointer overflow-hidden",
+    trigger: "group absolute inset-0 aspect-video h-full w-full overflow-hidden",
+    image: "h-full w-full object-cover",
+    icon: "absolute inset-0 m-auto h-24 w-24 text-white opacity-75 transition-opacity group-hover:opacity-100"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})

package/src/components/watermark/RLAWatermark.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { WatermarkProps } from "./watermark"
-import watermarkTheme from "./watermark.theme"
-
-
-const watermark = scv(watermarkTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as WatermarkProps
-
-const classes = resolveClasses(watermark, {}, useUi("watermark", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { watermarkTheme } from "./watermark.theme"
+
+
+
+const classes = watermarkTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/watermark/watermark.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createWatermarkTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createWatermarkTheme()
+export const watermarkTheme = defineTheme("watermark", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/window-mockup/RLAWindowMockup.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { WindowMockupProps } from "./window-mockup"
-import windowMockupTheme from "./window-mockup.theme"
-
-
-const windowMockup = scv(windowMockupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as WindowMockupProps
-
-const classes = resolveClasses(windowMockup, {}, useUi("windowMockup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { windowMockupTheme } from "./window-mockup.theme"
+
+
+
+const classes = windowMockupTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/window-mockup/window-mockup.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createWindowMockupTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createWindowMockupTheme()
+export const windowMockupTheme = defineTheme("window-mockup", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/icons.ts

@@ -0,0 +1,68 @@
+const svg = (inner: string) =>
+  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="100%" height="100%">${inner}</svg>`
+
+const ICONS = {
+  alertTriangle: `<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/>`,
+  alignLeft: `<line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/>`,
+  arrowLeft: `<path d="M19 12H5M12 19l-7-7 7-7"/>`,
+  arrowRight: `<path d="M5 12h14M12 5l7 7-7 7"/>`,
+  bell: `<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/>`,
+  check: `<path d="M20 6 9 17l-5-5"/>`,
+  chevronDown: `<path d="m6 9 6 6 6-6"/>`,
+  chevronLeft: `<path d="m15 18-6-6 6-6"/>`,
+  chevronRight: `<path d="m9 18 6-6-6-6"/>`,
+  chevronsUpDown: `<path d="m7 15 5 5 5-5M7 9l5-5 5 5"/>`,
+  circleCheck: `<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`,
+  circleX: `<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/>`,
+  close: `<path d="M18 6 6 18M6 6l12 12"/>`,
+  copy: `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`,
+  download: `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>`,
+  externalLink: `<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/>`,
+  fileQuestion: `<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4M9.1 11.8a3 3 0 0 1 5.8 1c0 .9-.6 1.4-1.1 1.8-.4.3-.8.7-.8 1.4M12 19h.01"/>`,
+  gripHorizontal: `<circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/>`,
+  gripVertical: `<circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>`,
+  hardDrive: `<rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 18h.01M10 18h.01M2 14L5 3h14l3 11"/>`,
+  image: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>`,
+  imageUpscale: `<path d="M16 3H3v13h13V3z"/><path d="M21 21v-4a2 2 0 0 0-2-2h-3M21 11V9M21 5a2 2 0 0 0-2-2h-1"/>`,
+  info: `<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>`,
+  layers: `<path d="m12 3-10 5L12 13l10-5-10-5Z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>`,
+  list: `<line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/>`,
+  loaderCircle: `<path d="M21 12a9 9 0 1 1-6.219-8.56"/>`,
+  moon: `<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>`,
+  panelLeft: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 3v18"/>`,
+  play: `<polygon points="6 3 20 12 6 21 6 3"/>`,
+  quote: `<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Zm11 0c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Z"/>`,
+  search: `<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>`,
+  share: `<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>`,
+  sun: `<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>`,
+  uploadCloud: `<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 12v9M9 15l3-3 3 3"/>`,
+  user: `<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
+  star: `<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>`,
+  lock: `<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`,
+  eye: `<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0z"/><circle cx="12" cy="12" r="3"/>`,
+  eyeOff: `<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499A10.75 10.75 0 0 1 2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.225-4.22"/><line x1="2" x2="22" y1="2" y2="22"/>`,
+  arrowUp: `<path d="M12 19V5M5 12l7-7 7 7"/>`,
+  arrowDown: `<path d="M12 5v14M19 12l-7 7-7-7"/>`,
+  edit: `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`,
+  link: `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`,
+  plus: `<path d="M5 12h14M12 5v14"/>`,
+  trash: `<path d="M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>`,
+  fileText: `<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8M16 13H8M16 17H8"/>`,
+  settings: `<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>`,
+  type: `<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/>`,
+  code: `<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>`,
+  film: `<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 3v18M17 3v18M3 7h4M17 7h4M3 12h18M3 17h4M17 17h4"/>`,
+  messageSquare: `<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>`,
+  bookOpen: `<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>`,
+  panelRight: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M15 3v18"/>`,
+  pin: `<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>`,
+  ellipsisVertical: `<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>`,
+  arrowUpFromLine: `<path d="m18 9-6-6-6 6"/><path d="M12 3v14"/><path d="M5 21h14"/>`,
+  arrowDownToLine: `<path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M5 21h14"/>`
+} as const
+
+export const DEFAULT_ICONS = Object.fromEntries(
+  Object.entries(ICONS).map(([k, v]) => [k, svg(v)])
+) as { readonly [K in keyof typeof ICONS]: string }
+
+export type RimelightIcons = Partial<Record<keyof typeof ICONS | (string & {}), string>>

package/src/index.ts

@@ -0,0 +1,31 @@
+import type { AstroIntegration } from "astro"
+import UnoCSS from "unocss/astro"
+import type { UIConfig } from "./types"
+import rimelightUiPreset from "./preset"
+
+export const ui = (config: UIConfig = {}): AstroIntegration[] => [
+  UnoCSS({
+    ...config.unocss,
+    presets: [rimelightUiPreset(config), ...(config.unocss?.presets ?? [])],
+    content: {
+      ...config.unocss?.content,
+      pipeline: config.unocss?.content?.pipeline !== false && {
+        ...config.unocss?.content?.pipeline,
+        include: [
+          /\.(vue|svelte|[jt]sx?|mdx?|astro|html)($|\?)/,
+          /[\\/](@rimelight\/ui|packages\/ui)[\\/]/,
+          ...[config.unocss?.content?.pipeline?.include ?? []].flat()
+        ]
+      }
+    }
+  }),
+  {
+    name: "@rimelight/ui",
+    hooks: {
+      "astro:config:setup": ({ updateConfig }) =>
+        void updateConfig({
+          vite: { define: { "import.meta.env.RIMELIGHT_UI_CONFIG": JSON.stringify(config) } }
+        })
+    }
+  }
+]

package/src/preset.ts

@@ -0,0 +1,146 @@
+import { presetIcons, presetTypography, presetWind4, type Preset } from "unocss"
+import type { ColorModeInput, PresetOptions } from "./types"
+
+export const P = {
+  neutral: [0, 0],
+  primary: [0.21, 260],
+  secondary: [0.18, 70],
+  info: [0.24, 260],
+  success: [0.2, 150],
+  warning: [0.17, 86],
+  error: [0.24, 25],
+  commentary: [0.29, 322],
+  ideation: [0.28, 293],
+  source: [0.13, 215]
+} as const
+
+const S =
+    "50:0.985:0.1:0.145:0.2,100:0.965:0.25:0.2:0.35,200:0.925:0.45:0.28:0.55,300:0.85:0.7:0.35:0.75,400:0.72:0.9:0.44:0.9,500:0.55:1:0.53:1,600:0.44:0.9:0.61:0.85,700:0.35:0.75:0.69:0.7,800:0.27:0.6:0.77:0.55,900:0.2:0.45:0.86:0.4,950:0.145:0.3:0.93:0.25"
+      .split(",")
+      .map((s) => s.split(":") as [string, any, any, any, any]),
+  INTENTS: Record<string, Record<string, string>> = Object.fromEntries(
+    "default:700:50:200:300,muted:600:100:200:300,elevated:800:100:200:400,accented:900:200:300:500,dimmed:500:50:300:400,toned:800:700:600:900,highlighted:950:200:800:950,inverted:50:950:800:700"
+      .split(",")
+      .map((s) => s.split(":") as [string, string, string, string, string])
+      .map(([k, text, bg, border, ring]) => [k, { text, bg, border, ring }])
+  ),
+  CSS_PROPS: Record<string, string> = {
+    text: "color",
+    bg: "background-color",
+    border: "border-color",
+    divide: "border-color",
+    ring: "--un-ring-color",
+    outline: "outline-color"
+  },
+  emit = (n: string, fn: (s: string, l1: number, c1: number, l2: number, c2: number) => string) =>
+    S.map(([s, l1, c1, l2, c2]) => `  --color-${n}-${s}: ${fn(s, l1, c1, l2, c2)};\n`).join("") +
+    `  --${n}: var(--color-${n}-500);\n  --${n}-foreground: light-dark(oklch(1 0 0), oklch(0.145 0 0));\n  --${n}-accent: var(--color-${n}-600);\n`,
+  cssVars = (custom: Record<string, ColorModeInput> = {}) =>
+    Object.entries(P)
+      .map(([n, [c, h]]) =>
+        emit(
+          n,
+          (_, l1, c1, l2, c2) =>
+            `light-dark(oklch(${l1} ${(c1 * c).toFixed(3)} ${h}), oklch(${l2} ${(c2 * c).toFixed(3)} ${h}))`
+        )
+      )
+      .join("") +
+    Object.entries(custom)
+      .map(([n, e]) => {
+        const m = (e.light || e.dark ? e : { light: e, dark: e }) as Record<
+            string,
+            Record<string, string>
+          >,
+          l = m.light?.["500"] ?? Object.values(m.light ?? {})[0] ?? "oklch(0.55 0.15 0)"
+        return emit(
+          n,
+          (s) => `light-dark(${m.light?.[s] ?? l}, ${m.dark?.[s] ?? m.dark?.["500"] ?? l})`
+        )
+      })
+      .join("")
+
+export default function rimelightUiPreset(options: PresetOptions = {}): Preset {
+  const allColors = Object.keys({ ...P, ...options.colors })
+  return {
+    name: "rimelight-ui",
+    outputToCssLayers: true,
+    safelist: [
+      ...allColors.map((c) => `rl-color-${c}`),
+      ...Object.values(options.icons ?? {}).filter(
+        (v): v is string => typeof v === "string" && v.startsWith("i-")
+      )
+    ],
+    presets: [
+      options.presets?.wind !== false && presetWind4(),
+      options.presets?.typography !== false && presetTypography(),
+      options.presets?.icons !== false && presetIcons()
+    ].filter(Boolean) as Preset[],
+    rules: [
+      [
+        /^rl-color-([\w-]+)$/,
+        ([, c]) => ({
+          "--rl-bg": `var(--color-${c}-500)`,
+          "--rl-ring": `var(--color-${c}-500)`,
+          "--rl-border": `var(--color-${c}-500)`,
+          "--rl-bg-hover": `var(--color-${c}-600)`,
+          "--rl-text": `var(--color-${c}-600)`
+        })
+      ],
+      [
+        /^(text|bg|ring|border|outline|divide)-([a-z]+)(?:\/(\d+))?$/,
+        ([, p, n, o]) => {
+          const prop = CSS_PROPS[p!],
+            s = INTENTS[n!]?.[p === "divide" ? "border" : p === "outline" ? "ring" : p!]
+          if (!prop || !s) return
+          const b = `var(--color-neutral-${s})`
+          return {
+            [prop]: o ? `color-mix(in srgb, ${b} ${o}%, transparent)` : b,
+            ...(p === "bg" && n === "inverted" && { color: "var(--color-neutral-50)" })
+          }
+        }
+      ],
+      [
+        /^rl-select$/,
+        () => `
+select.rl-select, select.rl-select::picker(select) { appearance: base-select; }
+select.rl-select::picker-icon { display: none; }
+select.rl-select::picker(select) { border: 1px solid var(--color-neutral-200, rgba(255, 255, 255, 0.1)); border-radius: 0.5rem; background-color: var(--color-neutral-100, #18181b); color: var(--color-neutral-950, #f4f4f5); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5); padding: 0.25rem; margin-top: 0.25rem; }
+select.rl-select option { padding: 0.375rem 0.625rem; border-radius: 0.375rem; background-color: var(--color-neutral-100, #18181b); color: var(--color-neutral-950, #f4f4f5); font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
+select.rl-select option:hover, select.rl-select option:focus { background-color: var(--color-neutral-200, #27272a); color: var(--color-neutral-950, #ffffff); }
+select.rl-select option:checked { background-color: var(--color-primary-500, #3b82f6); color: #ffffff; font-weight: 500; }
+`
+      ]
+    ],
+    theme: {
+      spacing: Object.fromEntries(
+        "6xs:0.125,5xs:0.25,4xs:0.375,3xs:0.5,2xs:0.625,xs:0.75,sm:0.875,md:1,lg:1.25,xl:1.5,2xl:2,3xl:3,4xl:4,5xl:6,6xl:8"
+          .split(",")
+          .map((s) => s.split(":") as [string, string])
+          .map(([k, v]) => [k, `${v}rem`])
+      ),
+      radius: Object.fromEntries(
+        "xs:- 0.375,sm:- 0.25,md:- 0.125,lg:,xl:+ 0.25,2xl:+ 0.5,3xl:+ 1"
+          .split(",")
+          .map((s) => s.split(":") as [string, string])
+          .map(([k, v]) => [k, v ? `calc(var(--radius) ${v}rem)` : "var(--radius)"])
+      ),
+      colors: Object.fromEntries(
+        allColors.map((c) => [
+          c,
+          {
+            DEFAULT: `var(--${c})`,
+            foreground: `var(--${c}-foreground)`,
+            accent: `var(--${c}-accent)`,
+            ...Object.fromEntries(S.map(([s]) => [s, `var(--color-${c}-${s})`]))
+          }
+        ])
+      )
+    },
+    preflights: [
+      {
+        getCSS: () =>
+          `:root {\n  color-scheme: light dark;\n  --radius: 0.625rem;\n  --rl-header-height: 4rem;\n  --rl-container: 90rem;\n}\n:root, .dark, .light, .rl-dark, .rl-light, [data-theme="dark"], [data-theme="light"] {\n${cssVars(options.colors)}}\n.dark, [data-theme="dark"], .rl-dark { color-scheme: dark; }\n.light, [data-theme="light"], .rl-light { color-scheme: light; }\nbody { background-color: light-dark(oklch(1 0 0), var(--color-neutral-50)); color: var(--color-neutral-950); }`
+      }
+    ]
+  }
+}

package/src/resolver.ts

@@ -0,0 +1,20 @@
+import { scv, cx } from "css-variants"
+import type { UIConfig } from "./types"
+
+export const uiConfig: UIConfig = import.meta.env.RIMELIGHT_UI_CONFIG ?? {}
+
+export const defineTheme = <const S extends string>(name: string, theme: any) => {
+  const root = (theme.slots.includes("root") ? "root" : theme.slots[0]) as S,
+    autoColor = theme.variants?.color === "auto",
+    scvFn = scv(autoColor ? { ...theme, variants: { ...theme.variants, color: {} } } : theme),
+    globalSlots = uiConfig.components?.themes?.[name]?.slots
+  return (props: any = {}): Record<S, string> => {
+    if (uiConfig.unstyled) return { [root]: cx(props.class, props.className) } as any
+    const slots = scvFn(props),
+      color = autoColor && (props.color ?? theme.defaultVariants?.color)
+    slots[root] = cx(slots[root], color && `rl-color-${color}`, props.class, props.className)
+    for (const [k, v] of Object.entries({ ...globalSlots, ...props.ui }))
+      slots[k] = cx(slots[k], typeof v === "function" ? v(slots[k] || "") : v)
+    return slots
+  }
+}