@rimelight/ui 0.0.42 → 0.0.43

package/src/components/kbd/kbd.theme.ts

@@ -1,97 +1,55 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createKbdTheme = (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"],
-    base: {
-      root: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase"
-    },
-    variants: {
-      color: colorVariants,
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      size: {
-        sm: { root: "h-4 min-w-[16px] text-[10px]" },
-        md: { root: "h-5 min-w-[20px] text-[11px]" },
-        lg: { root: "h-6 min-w-[24px] text-[12px]" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
+export const kbdTheme = defineTheme("kbd", {
+  slots: ["root"],
+  base: {
+    root: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase"
+  },
+  variants: {
+    color: "auto",
+    variant: {
+      solid: { root: "bg-[var(--rl-bg)] text-white" },
+      outline: { root: "ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)]" },
+      soft: { root: "text-[var(--rl-text)] bg-[var(--rl-bg)]/10" },
+      subtle: {
+        root: "text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10"
       }
     },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
-        }
-      })),
-      ...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)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] 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"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: { root: "text-inverted bg-inverted" }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: { root: "ring ring-inset ring-accented text-default bg-default" }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: { root: "text-default bg-elevated" }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: { root: "ring ring-inset ring-accented text-default bg-elevated" }
-      }
-    ],
-    defaultVariants: {
+    size: {
+      sm: { root: "h-4 min-w-[16px] text-[10px]" },
+      md: { root: "h-5 min-w-[20px] text-[11px]" },
+      lg: { root: "h-6 min-w-[24px] text-[12px]" }
+    },
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
+      variant: "solid",
+      classNames: { root: "text-inverted bg-inverted" }
+    },
+    {
+      color: "neutral",
       variant: "outline",
+      classNames: { root: "ring ring-inset ring-accented text-default bg-default" }
+    },
+    {
       color: "neutral",
-      size: "md"
+      variant: "soft",
+      classNames: { root: "text-default bg-elevated" }
+    },
+    {
+      color: "neutral",
+      variant: "subtle",
+      classNames: { root: "ring ring-inset ring-accented text-default bg-elevated" }
     }
-  })
-}
-
-export default createKbdTheme()
+  ],
+  defaultVariants: {
+    variant: "outline",
+    color: "neutral",
+    size: "md"
+  }
+})

package/src/components/kbd/kbd.ts

@@ -1,4 +1,7 @@
 export interface KbdProps {
+  color?: string
+  variant?: string
+  theme?: string
   /**
    * The size scale of the keyboard key component.
    */

package/src/components/knob/RLAKnob.astro

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

package/src/components/knob/knob.theme.ts

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

package/src/components/label/RLALabel.astro

@@ -1,27 +1,16 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { LabelProps } from "./label"
-import { resolveTheme } from "../../utils/resolveTheme"
-import labelThemeDefault, { createLabelTheme } from "./label.theme"
-const labelTheme = resolveTheme(labelThemeDefault, createLabelTheme)
-
-
-const label = scv(labelTheme)
-
-const {
-  for: htmlFor,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LabelProps
-
-const classes = resolveClasses(label, {
-  size
-}, useUi("label", uiProp), className)
----
-<label class={classes.root} data-slot="root" for={htmlFor} {...rest}>
-  <slot />
-</label>
+---
+import type { LabelProps } from "./label"
+import { labelTheme } from "./label.theme"
+
+
+
+const {
+  for: htmlFor,
+  ...rest
+} = Astro.props as LabelProps
+
+const classes = labelTheme(Astro.props)
+---
+<label class={classes.root} data-slot="root" for={htmlFor} {...rest}>
+  <slot />
+</label>

package/src/components/label/label.theme.ts

@@ -1,22 +1,18 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createLabelTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-    },
-    variants: {
-      size: {
-        sm: { root: "text-xs" },
-        md: { root: "text-sm" },
-        lg: { root: "text-base" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
+export const labelTheme = defineTheme("label", {
+  slots: ["root"],
+  base: {
+    root: "font-medium leading-none text-highlighted peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  },
+  variants: {
+    size: {
+      sm: { root: "text-xs" },
+      md: { root: "text-sm" },
+      lg: { root: "text-base" }
     }
-  })
-
-export default createLabelTheme()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

package/src/components/layout-grid/RLALayoutGrid.astro

@@ -1,11 +1,7 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { LayoutGridProps } from "./layout-grid"
-import layoutGridTheme from "./layout-grid.theme"
+import { layoutGridTheme } from "./layout-grid.theme"
 
-const layoutGrid = scv(layoutGridTheme)
 
 const {
   cols = 4,
@@ -17,8 +13,8 @@ const {
   mdBreakpoint = 768,
   lgBreakpoint = 1024,
   xlBreakpoint = 1280,
-  gutter = [0.75, 1, 1.5, 1.5, 1.5],
-  margin = [0.75, 1, 1.5, 1.5, 1.5],
+  gutter = [0.75, 1, 1.5, 2, 2],
+  margin = [0.75, 1, 1.5, 2, 2],
   gridColor = "#ff0000",
   gridOpacity = 0.1,
   maxWidth = "1440px",
@@ -34,8 +30,6 @@ const {
   zIndex = 1000,
   shortcut = "meta_shift_g",
   devOnly = true,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as LayoutGridProps
 
@@ -56,7 +50,7 @@ const normalizeArray = (val: number | number[] | undefined, defaultVal: number):
 const gutterArray = normalizeArray(gutter, 1)
 const marginArray = normalizeArray(margin, 1)
 
-const classes = resolveClasses(layoutGrid, {}, useUi("layoutGrid", uiProp), className)
+const classes = layoutGridTheme(Astro.props)
 ---
 
 {shouldRender && (
@@ -97,7 +91,7 @@ const classes = resolveClasses(layoutGrid, {}, useUi("layoutGrid", uiProp), clas
 )}
 
 <script>
-  import { defineShortcuts } from "../../utils/shortcuts"
+  import { defineShortcuts } from "../../shortcuts"
 
   function hexToRgba(hex: string, alpha: number): string {
     const cleanHex = hex.replace('#', '')

package/src/components/layout-grid/layout-grid.theme.ts

@@ -1,16 +1,13 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createLayoutGridTheme = () =>
-  defineTheme({
-    slots: ["root", "overlay", "container", "columns"],
-    base: {
-      root: "",
-      overlay: "fixed top-0 left-0 w-full h-full pointer-events-none",
-      container: "h-full mx-auto",
-      columns: "grid h-full"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createLayoutGridTheme()
+export const layoutGridTheme = defineTheme("layout-grid", {
+  slots: ["root", "overlay", "container", "columns"],
+  base: {
+    root: "",
+    overlay: "fixed top-0 left-0 w-full h-full pointer-events-none",
+    container: "h-full mx-auto",
+    columns: "grid h-full"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/link/RLALink.astro

@@ -1,13 +1,9 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { LinkProps } from "./link"
-import linkTheme from "./link.theme"
+import { linkTheme } from "./link.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 import { resolveLinkAttrs } from "./helpers"
 
-const link = scv(linkTheme)
 
 const {
   label,
@@ -15,8 +11,6 @@ const {
   trailingIcon,
   href,
   external,
-  externalIcon,
-  noExternalIcon,
   target,
   rel,
   prefetch,
@@ -24,27 +18,19 @@ const {
   disabled,
   raw,
   ariaLabel,
-  ariaCurrentValue,
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as LinkProps
 
 const attrs = resolveLinkAttrs(Astro.props)
 
 const classes = raw
-  ? { root: className || "" }
-  : resolveClasses(
-      link,
-      {
-        theme,
+  ? { root: (Astro.props.class as string) || "", leadingIcon: "", label: "", trailingIcon: "" }
+  : (linkTheme({
+  theme,
         ...(active !== undefined ? { active } : {}),
-        disabled: !!disabled
-      },
-      useUi("link", uiProp),
-      className
-    )
+        disabled: !!disabled,
+}) as Record<string, string>)
 ---
 
 <a

package/src/components/link/RLSLink.tsx

@@ -1,14 +1,9 @@
 import { createMemo, splitProps, type Component, type JSX } from "solid-js"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { LinkProps } from "./link"
-import linkTheme from "./link.theme"
+import { linkTheme } from "./link.theme"
 import RLSIcon from "../icon/RLSIcon"
 import { resolveLinkAttrs } from "./helpers"
 
-const link = scv(linkTheme)
-
 type RLSLinkProps = LinkProps & {
   children?: JSX.Element
   leading?: JSX.Element
@@ -47,16 +42,13 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
       return { root: props.class || "" }
     }
 
-    return resolveClasses(
-      link,
-      {
-        theme: props.theme,
-        ...(props.active !== undefined ? { active: props.active } : {}),
-        disabled: !!props.disabled
-      },
-      useUi("link", props.ui),
-      props.class
-    )
+    return linkTheme({
+      theme: props.theme,
+      ...(props.active !== undefined ? { active: props.active } : {}),
+      disabled: !!props.disabled,
+      ui: props.ui,
+      class: props.class
+    })
   })
 
   return (

package/src/components/link/RLVLink.vue

@@ -1,15 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { LinkProps } from "./link"
-import linkTheme from "./link.theme"
+import { linkTheme } from "./link.theme"
 import RLVIcon from "../icon/RLVIcon.vue"
 import { resolveLinkAttrs } from "./helpers"
 
-const link = scv(linkTheme)
-
 defineOptions({ name: "RLVLink", inheritAttrs: false })
 
 const props = defineProps<LinkProps>()
@@ -27,16 +22,12 @@ const resolvedClasses = computed(() => {
     return { root: props.class || "" } as Record<string, string>
   }
 
-  return resolveClasses(
-    link,
-    {
-      theme: props.theme,
-      ...(props.active !== undefined ? { active: props.active } : {}),
-      disabled: !!props.disabled
-    },
-    useUi("link", props.ui),
-    props.class
-  )
+  return linkTheme({
+    theme: props.theme,
+    ...(props.active !== undefined ? { active: props.active } : {}),
+    disabled: !!props.disabled,
+    class: props.class
+  })
 })
 </script>
 

package/src/components/link/link.theme.ts

@@ -1,40 +1,40 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createLinkTheme = () =>
-  defineTheme({
-    slots: ["root", "label", "leadingIcon", "trailingIcon"],
-    base: {
-      root: "outline-primary/25 focus-visible:outline-3 rounded-md inline-flex items-center gap-1 leading-none transition-colors",
-      label: "",
-      leadingIcon: "-translate-y-[1.5px]",
-      trailingIcon: "-translate-y-[1.5px]"
+export const linkTheme = defineTheme("link", {
+  slots: ["root", "label", "leadingIcon", "trailingIcon"],
+  base: {
+    root: "outline-primary/25 focus-visible:outline-3 rounded-md inline-flex items-center gap-1 leading-none transition-colors",
+    label: "",
+    leadingIcon: "-translate-y-[1.5px]",
+    trailingIcon: "-translate-y-[1.5px]"
+  },
+  variants: {
+    active: {
+      true: { root: "text-primary" },
+      false: { root: "text-muted" }
     },
-    variants: {
-      active: {
-        true: { root: "text-primary" },
-        false: { root: "text-muted" }
-      },
-      disabled: {
-        true: { root: "cursor-not-allowed opacity-75" },
-        false: {}
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
+    disabled: {
+      true: { root: "cursor-not-allowed opacity-75" },
+      false: {}
     },
-    compoundVariants: [
-      {
-        active: false,
-        disabled: false,
-        classNames: { root: ["hover:text-default"] }
-      },
-      {
-        active: true,
-        disabled: false,
-        classNames: { root: ["hover:text-primary"] }
-      }
-    ]
-  })
-
-export default createLinkTheme()
+    theme: {
+      light: { root: "rl-light" },
+      dark: { root: "rl-dark" }
+    }
+  },
+  compoundVariants: [
+    {
+      active: false,
+      disabled: false,
+      classNames: { root: "hover:text-default" }
+    },
+    {
+      active: true,
+      disabled: false,
+      classNames: { root: "hover:text-primary" }
+    }
+  ],
+  defaultVariants: {
+    active: false
+  }
+})

package/src/components/link/link.ts

@@ -1,22 +1,22 @@
-import type { Theme } from "../../types/component"
+import type { Theme } from "../../types"
 
 export interface LinkProps {
   /**
    * The text label displayed inside the link. Alternative to passing children via the default slot.
    */
-  label?: string
+  label?: string | undefined
   /**
    * Icon name displayed before the link label.
    */
-  leadingIcon?: string
+  leadingIcon?: string | undefined
   /**
    * Icon name displayed after the link label. Replaces the external icon when set.
    */
-  trailingIcon?: string
+  trailingIcon?: string | undefined
   /**
    * The URL the link points to.
    */
-  href?: string
+  href?: string | undefined
   /**
    * Forces the link to be treated as an external link.
    *