@rimelight/ui 0.0.41 → 0.0.43

package/src/components/button/RLVButton.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
 import { computed, useSlots, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ButtonProps } from "./button"
-import { resolveTheme } from "../../utils/resolveTheme"
-import buttonThemeDefault, { createButtonTheme } from "./button.theme"
-const buttonTheme = resolveTheme(buttonThemeDefault, createButtonTheme)
+import { buttonTheme } from "./button.theme"
 import RLVIcon from "../icon/RLVIcon.vue"
 const attrs = useAttrs()
-const button = scv(buttonTheme)
 
 const {
   variant = "solid",
@@ -24,9 +18,7 @@ const {
   block = false,
   active = false,
   activeColor,
-  activeVariant,
-  ui: uiProp,
-  class: className
+  activeVariant
 } = defineProps<ButtonProps>()
 
 const slots = useSlots()
@@ -61,22 +53,17 @@ defineSlots<{
 }>()
 
 const resolvedClasses = computed(() =>
-  resolveClasses(
-    button,
-    {
-      variant: active && activeVariant ? activeVariant : variant,
-      color: active && activeColor ? activeColor : color,
-      size,
-      block,
-      square: square || (!label && !slots.default),
-      leading: isLeading.value,
-      trailing: isTrailing.value,
-      loading,
-      active
-    },
-    useUi("button", uiProp),
-    className
-  )
+  buttonTheme({
+    variant: active && activeVariant ? activeVariant : variant,
+    color: active && activeColor ? activeColor : color,
+    size,
+    block,
+    square: square || (!label && !slots.default),
+    leading: isLeading.value,
+    trailing: isTrailing.value,
+    loading,
+    active
+  })
 )
 
 const Tag = href ? "a" : "button"

package/src/components/button/button.theme.ts

@@ -1,235 +1,178 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createButtonTheme = (colors: readonly string[] = colorConfig.colors) => {
-  const colorVariants: Record<string, { root: string }> = { neutral: { root: "" } }
-  for (const c of colors) {
-    colorVariants[c] = { root: "" }
-  }
-
-  return defineTheme({
-    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
-    base: {
-      root: [
-        "group inline-flex items-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
-        "transition-colors outline-none",
-        "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
-      ],
-      label: "truncate",
-      leadingIcon: "shrink-0 flex items-center justify-center",
-      leadingAvatar: "shrink-0",
-      leadingAvatarSize: "",
-      trailingIcon: "shrink-0 flex items-center justify-center"
-    },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" },
-        ghost: { root: "" },
-        link: { root: "" }
-      },
-      color: colorVariants,
-      size: {
-        xs: {
-          root: "text-xs gap-1 [&_svg]:size-4",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-4"
-        },
-        sm: {
-          root: "text-sm gap-1.5 [&_svg]:size-4",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-4"
-        },
-        md: {
-          root: "text-base gap-2 [&_svg]:size-5",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "xs",
-          trailingIcon: "size-5"
-        },
-        lg: {
-          root: "text-lg gap-2.5 [&_svg]:size-5",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "sm",
-          trailingIcon: "size-5"
-        },
-        xl: {
-          root: "text-2xl gap-3 [&_svg]:size-7",
-          leadingIcon: "size-7",
-          leadingAvatarSize: "lg",
-          trailingIcon: "size-7"
-        }
-      },
-      justify: {
-        start: { root: "justify-start" },
-        center: { root: "justify-center" },
-        end: { root: "justify-end" },
-        between: { root: "justify-between" },
-        around: { root: "justify-around" },
-        evenly: { root: "justify-evenly" }
+export const buttonTheme = defineTheme("button", {
+  slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
+  base: {
+    root: [
+      "group inline-flex items-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
+      "transition-colors outline-none",
+      "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
+    ],
+    label: "truncate",
+    leadingIcon: "shrink-0 flex items-center justify-center",
+    leadingAvatar: "shrink-0",
+    leadingAvatarSize: "",
+    trailingIcon: "shrink-0 flex items-center justify-center"
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: "bg-[var(--rl-bg)] text-white hover:bg-[var(--rl-bg-hover)] active:bg-[var(--rl-bg-hover)] disabled:bg-[var(--rl-bg)] aria-disabled:bg-[var(--rl-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]"
       },
-      block: {
-        true: { root: "w-full", trailingIcon: "ms-auto" }
+      outline: {
+        root: "ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
       },
-      square: {
-        true: {},
-        false: {}
+      soft: {
+        root: "text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 focus:outline-none focus-visible:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10"
       },
-      rounded: {
-        true: { root: "rounded-full" },
-        false: { root: "rounded-md" }
+      subtle: {
+        root: "text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
       },
-      leading: { true: {} },
-      trailing: { true: {} },
-      loading: { true: {} },
-      active: {
-        true: { root: "" },
-        false: { root: "" }
+      ghost: {
+        root: "text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent"
       },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
+      link: {
+        root: "text-[var(--rl-text)] hover:text-[var(--rl-text)]/75 active:text-[var(--rl-text)]/75 disabled:text-[var(--rl-text)] aria-disabled:text-[var(--rl-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--rl-ring)]"
       }
     },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " bg-[var(--rl-bg)] text-white hover:bg-[var(--rl-bg-hover)] active:bg-[var(--rl-bg-hover)] disabled:bg-[var(--rl-bg)] aria-disabled:bg-[var(--rl-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 focus:outline-none focus-visible:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "ghost" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "link" as const,
-        color,
-        classNames: {
-          root:
-            "rl-color-" +
-            color +
-            " text-[var(--rl-text)] hover:text-[var(--rl-text)]/75 active:text-[var(--rl-text)]/75 disabled:text-[var(--rl-text)] aria-disabled:text-[var(--rl-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: {
-          root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: {
-          root: "ring ring-inset ring-current text-default bg-transparent hover:bg-elevated active:bg-elevated disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
-        }
+    color: "auto",
+    size: {
+      xs: {
+        root: "text-xs gap-1 [&_svg]:size-4",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-4"
       },
-      {
-        color: "neutral",
-        variant: "ghost",
-        classNames: {
-          root: "text-default hover:bg-hover active:bg-hover/80 focus:outline-none focus-visible:bg-hover hover:disabled:bg-transparent hover:aria-disabled:bg-transparent"
-        }
+      sm: {
+        root: "text-sm gap-1.5 [&_svg]:size-4",
+        leadingIcon: "size-4",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-4"
       },
-      {
-        color: "neutral",
-        variant: "link",
-        classNames: {
-          root: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
-        }
+      md: {
+        root: "text-base gap-2 [&_svg]:size-5",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-5"
       },
-      { square: false, size: "xs", classNames: { root: "px-2 py-1" } },
-      { square: true, size: "xs", classNames: { root: "p-1" } },
-      { square: false, size: "sm", classNames: { root: "px-2.5 py-1.5" } },
-      { square: true, size: "sm", classNames: { root: "p-1.5" } },
-      { square: false, size: "md", classNames: { root: "px-3 py-2" } },
-      { square: true, size: "md", classNames: { root: "p-2" } },
-      { square: false, size: "lg", classNames: { root: "px-3.5 py-2.5" } },
-      { square: true, size: "lg", classNames: { root: "p-2.5" } },
-      { square: false, size: "xl", classNames: { root: "px-5 py-3.5" } },
-      { square: true, size: "xl", classNames: { root: "p-3.5" } },
-      {
-        loading: true,
-        leading: true,
-        classNames: {
-          leadingIcon: "animate-spin"
-        }
+      lg: {
+        root: "text-lg gap-2.5 [&_svg]:size-5",
+        leadingIcon: "size-5",
+        leadingAvatarSize: "sm",
+        trailingIcon: "size-5"
       },
-      {
-        loading: true,
-        leading: false,
-        trailing: true,
-        classNames: {
-          trailingIcon: "animate-spin"
-        }
+      xl: {
+        root: "text-2xl gap-3 [&_svg]:size-7",
+        leadingIcon: "size-7",
+        leadingAvatarSize: "lg",
+        trailingIcon: "size-7"
       }
-    ],
-    defaultVariants: {
+    },
+    justify: {
+      start: { root: "justify-start" },
+      center: { root: "justify-center" },
+      end: { root: "justify-end" },
+      between: { root: "justify-between" },
+      around: { root: "justify-around" },
+      evenly: { root: "justify-evenly" }
+    },
+    block: {
+      true: { root: "w-full", trailingIcon: "ms-auto" }
+    },
+    square: {
+      true: {},
+      false: {}
+    },
+    rounded: {
+      true: { root: "rounded-full" },
+      false: { root: "rounded-md" }
+    },
+    leading: { true: {} },
+    trailing: { true: {} },
+    loading: { true: {} },
+    active: {
+      true: { root: "" },
+      false: { root: "" }
+    },
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
       variant: "solid",
-      color: "primary",
-      size: "md",
-      justify: "center"
+      classNames: {
+        root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "outline",
+      classNames: {
+        root: "ring ring-inset ring-current text-default bg-transparent hover:bg-elevated active:bg-elevated disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "soft",
+      classNames: {
+        root: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      classNames: {
+        root: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "ghost",
+      classNames: {
+        root: "text-default hover:bg-hover active:bg-hover/80 focus:outline-none focus-visible:bg-hover hover:disabled:bg-transparent hover:aria-disabled:bg-transparent"
+      }
+    },
+    {
+      color: "neutral",
+      variant: "link",
+      classNames: {
+        root: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
+      }
+    },
+    { square: false, size: "xs", classNames: { root: "px-2 py-1" } },
+    { square: true, size: "xs", classNames: { root: "p-1" } },
+    { square: false, size: "sm", classNames: { root: "px-2.5 py-1.5" } },
+    { square: true, size: "sm", classNames: { root: "p-1.5" } },
+    { square: false, size: "md", classNames: { root: "px-3 py-2" } },
+    { square: true, size: "md", classNames: { root: "p-2" } },
+    { square: false, size: "lg", classNames: { root: "px-3.5 py-2.5" } },
+    { square: true, size: "lg", classNames: { root: "p-2.5" } },
+    { square: false, size: "xl", classNames: { root: "px-5 py-3.5" } },
+    { square: true, size: "xl", classNames: { root: "p-3.5" } },
+    {
+      loading: true,
+      leading: true,
+      classNames: {
+        leadingIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      classNames: {
+        trailingIcon: "animate-spin"
+      }
     }
-  })
-}
-
-export default createButtonTheme()
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    justify: "center",
+    rounded: false
+  }
+})

package/src/components/button/button.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 import type { LinkProps } from "../link/link"
 
 export interface ButtonProps extends LinkProps {

package/src/components/calendar/RLACalendar.astro

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

package/src/components/calendar/calendar.theme.ts

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

package/src/components/callout/RLACallout.astro

@@ -1,15 +1,9 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { CalloutProps } from "./callout"
-import { resolveTheme } from "../../utils/resolveTheme"
-import calloutThemeDefault, { createCalloutTheme } from "./callout.theme"
-const calloutTheme = resolveTheme(calloutThemeDefault, createCalloutTheme)
+import { calloutTheme } from "./callout.theme"
 import RLAAvatar from "../avatar/RLAAvatar.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
-const callout = scv(calloutTheme)
 
 const {
   variant = "solid",
@@ -20,9 +14,6 @@ const {
   avatar,
   actions,
   close,
-  theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as CalloutProps
 
@@ -44,11 +35,11 @@ const resolvedVariant = (variant === "solid" || variant === "outline" || variant
 const resolvedIcon = icon ?? colorToIcon[resolvedColor]
 const hasTitleRow = !!(title || Astro.slots.has("title") || Astro.slots.has("header") || avatar || close || Astro.slots.has("close"))
 
-const classes = resolveClasses(callout, {
+const classes = calloutTheme({
+  ...Astro.props,
   variant: resolvedVariant,
-  color: resolvedColor as any,
-  theme
-}, useUi("callout", uiProp), className)
+  color: resolvedColor as any
+})
 ---
 <div
   class={classes.root}