@rimelight/ui 0.0.42 → 0.0.44

package/src/components/color-area/RLAColorArea.astro

@@ -1,12 +1,6 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveTheme } from "../../utils/resolveTheme"
-import colorAreaThemeDefault, { createColorAreaTheme } from "./color-area.theme"
-const colorAreaTheme = resolveTheme(colorAreaThemeDefault, createColorAreaTheme)
+import { colorAreaTheme } from "./color-area.theme"
 
-const colorArea = scv(colorAreaTheme)
 
 export interface Props {
   colorSpace?: "hsl" | "rgb" | "hsb"
@@ -38,15 +32,10 @@ const {
   yName,
   color = "primary",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as Props
 
-const classes = resolveClasses(colorArea, {
-  color,
-  theme
-}, useUi("colorArea", uiProp), className)
+const classes = colorAreaTheme(Astro.props)
 
 const initialValue = modelValue || defaultValue
 ---
@@ -56,6 +45,7 @@ const initialValue = modelValue || defaultValue
   data-x-channel={xChannel}
   data-y-channel={yChannel}
   data-disabled={disabled ? "true" : "false"}
+  data-theme={theme}
   {...rest}
 >
   <div class={classes.root} data-slot="root">

package/src/components/color-area/color-area.theme.ts

@@ -1,33 +1,17 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createColorAreaTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "area", "thumb"],
-    base: {
-      root: "relative block touch-none select-none rounded-lg w-full aspect-square outline-none",
-      area: "relative w-full h-full rounded-lg cursor-crosshair bg-muted outline-none",
-      thumb:
-        "absolute block size-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            thumb: `focus-visible:ring-[var(--rl-ring)]/50`
-          }
-        ])
-      ),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  })
-
-export default createColorAreaTheme()
+export const colorAreaTheme = defineTheme("color-area", {
+  slots: ["root", "area", "thumb"],
+  base: {
+    root: "relative block touch-none select-none rounded-lg w-full aspect-square outline-none",
+    area: "relative w-full h-full rounded-lg cursor-crosshair bg-muted outline-none",
+    thumb:
+      "absolute block size-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]/50"
+  },
+  variants: {
+    color: "auto"
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+})

package/src/components/color-area/color-area.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface ColorAreaProps {
   colorSpace?: "hsl" | "rgb" | "hsb"

package/src/components/color-field/RLAColorField.astro

@@ -1,12 +1,6 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveTheme } from "../../utils/resolveTheme"
-import colorFieldThemeDefault, { createColorFieldTheme } from "./color-field.theme"
-const colorFieldTheme = resolveTheme(colorFieldThemeDefault, createColorFieldTheme)
+import { colorFieldTheme } from "./color-field.theme"
 
-const colorField = scv(colorFieldTheme)
 
 export interface Props {
   channel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
@@ -42,15 +36,10 @@ const {
   step = 1,
   color = "primary",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as Props
 
-const classes = resolveClasses(colorField, {
-  color,
-  theme
-}, useUi("colorField", uiProp), className)
+const classes = colorFieldTheme(Astro.props)
 
 const initialValue = modelValue || defaultValue
 ---
@@ -62,10 +51,11 @@ const initialValue = modelValue || defaultValue
   data-disable-wheel={disableWheelChange ? "true" : "false"}
   data-readonly={readonly ? "true" : "false"}
   data-step={step}
+  data-theme={theme}
   {...rest}
 >
   <div class={classes.root} data-slot="root">
-    <div class="w-5 h-5 rounded border border-border mr-2 shrink-0 shadow-sm" data-slot="swatch"></div>
+    <div class="w-5 h-5 rounded border border-default mr-2 shrink-0 shadow-sm" data-slot="swatch"></div>
     <input
       type="text"
       class={classes.input}

package/src/components/color-field/color-field.theme.ts

@@ -1,32 +1,16 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createColorFieldTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "input"],
-    base: {
-      root: "relative flex items-center border border-border rounded-lg bg-background shadow-sm px-3 py-1.5 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-      input:
-        "w-full bg-transparent border-0 p-0 text-sm focus:outline-none focus:ring-0 text-foreground placeholder-muted-foreground"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            input: `focus:ring-0`
-          }
-        ])
-      ),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  })
-
-export default createColorFieldTheme()
+export const colorFieldTheme = defineTheme("color-field", {
+  slots: ["root", "input"],
+  base: {
+    root: "relative flex items-center border border-default rounded-lg bg-default shadow-sm px-3 py-1.5 focus-within:ring-2 focus-within:ring-[var(--rl-ring)]/50 focus-within:ring-offset-2",
+    input:
+      "w-full bg-transparent border-0 p-0 text-sm focus:outline-none focus:ring-0 text-highlighted placeholder-muted-foreground"
+  },
+  variants: {
+    color: "auto"
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+})

package/src/components/color-field/color-field.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface ColorFieldProps {
   channel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"

package/src/components/color-picker/RLAColorPicker.astro

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

package/src/components/color-picker/color-picker.theme.ts

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

package/src/components/color-slider/RLAColorSlider.astro

@@ -1,12 +1,6 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import { resolveTheme } from "../../utils/resolveTheme"
-import colorSliderThemeDefault, { createColorSliderTheme } from "./color-slider.theme"
-const colorSliderTheme = resolveTheme(colorSliderThemeDefault, createColorSliderTheme)
+import { colorSliderTheme } from "./color-slider.theme"
 
-const colorSlider = scv(colorSliderTheme)
 
 export interface Props {
   channel: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
@@ -40,15 +34,10 @@ const {
   step = 1,
   color = "primary",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as Props
 
-const classes = resolveClasses(colorSlider, {
-  color,
-  theme
-}, useUi("colorSlider", uiProp), className)
+const classes = colorSliderTheme(Astro.props)
 
 const initialValue = modelValue || defaultValue
 ---
@@ -60,6 +49,7 @@ const initialValue = modelValue || defaultValue
   data-orientation={orientation}
   data-inverted={inverted ? "true" : "false"}
   data-step={step}
+  data-theme={theme}
   {...rest}
 >
   <div class={classes.root} data-slot="root" data-orientation={orientation}>

package/src/components/color-slider/color-slider.theme.ts

@@ -1,34 +1,18 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createColorSliderTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "track", "thumb"],
-    base: {
-      root: "relative flex w-full touch-none select-none items-center outline-none",
-      track:
-        "relative h-3 w-full grow rounded-full border border-border bg-muted cursor-pointer outline-none",
-      thumb:
-        "absolute block size-5 rounded-full border-2 border-white shadow-md cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            thumb: `focus-visible:ring-[var(--rl-ring)]/50`
-          }
-        ])
-      ),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  })
-
-export default createColorSliderTheme()
+export const colorSliderTheme = defineTheme("color-slider", {
+  slots: ["root", "track", "thumb"],
+  base: {
+    root: "relative flex w-full touch-none select-none items-center outline-none",
+    track:
+      "relative h-3 w-full grow rounded-full border border-default bg-muted cursor-pointer outline-none",
+    thumb:
+      "absolute block size-5 rounded-full border-2 border-white shadow-md cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]/50"
+  },
+  variants: {
+    color: "auto"
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+})

package/src/components/color-slider/color-slider.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface ColorSliderProps {
   channel: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"

package/src/components/command-palette/RLACommandPalette.astro

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

package/src/components/command-palette/command-palette.theme.ts

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

package/src/components/compare/RLACompare.astro

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

package/src/components/compare/compare.theme.ts

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