@rimelight/ui 0.0.43 → 0.0.44

package/src/components/select/RLSSelect.tsx

@@ -1,5 +1,7 @@
 import { createMemo, splitProps, For, type Component, type JSX } from "solid-js"
 import type { SelectItem } from "./select"
+import { selectTheme } from "./select.theme"
+import RLSIcon from "../icon/RLSIcon"
 
 export interface RLSSelectProps {
   id?: string
@@ -17,14 +19,6 @@ export interface RLSSelectProps {
   onBlur?: (e: FocusEvent & { currentTarget: HTMLSelectElement }) => void
 }
 
-const SIZE_CLASSES = {
-  xs: "py-0.5 pl-2 pr-6 text-xs",
-  sm: "py-1 pl-2.5 pr-7 text-xs",
-  md: "py-1.5 pl-3 pr-8 text-sm",
-  lg: "py-2 pl-3.5 pr-9 text-base",
-  xl: "py-2.5 pl-4 pr-10 text-base"
-} as const
-
 const RLSSelect: Component<RLSSelectProps> = (allProps) => {
   const [props, rest] = splitProps(allProps, [
     "id",
@@ -42,7 +36,12 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
     "onBlur"
   ])
 
-  const sizeClass = createMemo(() => SIZE_CLASSES[props.size ?? "md"])
+  const classes = createMemo(() =>
+    selectTheme({
+      size: props.size,
+      class: props.class
+    })
+  )
 
   const normalizedItems = createMemo(() => {
     if (!props.items) return []
@@ -50,11 +49,19 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
       if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
         return { label: String(item), value: String(item), disabled: false }
       }
-      const i = item as { label?: string; value?: any; disabled?: boolean }
+      const i = item as {
+        label?: string
+        value?: any
+        disabled?: boolean
+        icon?: string
+        avatar?: { src?: string; alt?: string; loading?: "lazy" | "eager" }
+      }
       return {
         label: String(i.label ?? i.value ?? ""),
         value: String(i.value ?? ""),
-        disabled: !!i.disabled
+        disabled: !!i.disabled,
+        icon: i.icon,
+        avatar: i.avatar
       }
     })
   })
@@ -68,7 +75,7 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
   )
 
   return (
-    <div class={`relative inline-flex items-center w-full ${props.class || ""}`}>
+    <div class={`${classes().root}`}>
       <select
         id={props.id}
         name={props.name}
@@ -76,7 +83,8 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
         required={props.required}
         onChange={props.onChange}
         onBlur={props.onBlur}
-        class={`rl-select w-full cursor-pointer rounded-md border border-default bg-default ${sizeClass()} text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50`}
+        class={classes().select}
+        data-slot="select"
         {...rest}
       >
         {props.placeholder ? (
@@ -95,6 +103,10 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
                 disabled={item.disabled}
                 selected={currentValue() !== undefined ? currentValue() === item.value : undefined}
               >
+                {item.icon ? <RLSIcon name={item.icon} class="rl-select-item-icon" /> : null}
+                {item.avatar ? (
+                  <img src={item.avatar.src} alt={item.avatar.alt} class="rl-select-item-icon" />
+                ) : null}
                 {item.label}
               </option>
             )}
@@ -103,7 +115,7 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
       </select>
 
       {/* Custom Chevron arrow */}
-      <span class="pointer-events-none absolute right-2 flex items-center text-muted-foreground">
+      <span class={classes().icon} data-slot="icon">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="14"
@@ -119,6 +131,48 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
           <path d="M6 9l6 6 6-6" />
         </svg>
       </span>
+
+      <style>{`
+        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(--rl-neutral-200);
+          border-radius: var(--radius-md, 0.375rem);
+          background-color: var(--rl-neutral-100);
+          color: var(--rl-neutral-950);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
+          padding: 0.25rem;
+          margin-top: 0.25rem;
+        }
+        select.rl-select option {
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+          padding: 0.375rem 0.625rem;
+          border-radius: calc(var(--radius-md, 0.375rem) - 0.125rem);
+          background-color: var(--rl-neutral-100);
+          color: var(--rl-neutral-950);
+          font-size: 0.875rem;
+          cursor: pointer;
+          transition: background-color 0.15s ease, color 0.15s ease;
+        }
+        select.rl-select .rl-select-item-icon {
+          width: 1rem;
+          height: 1rem;
+          flex-shrink: 0;
+        }
+        select.rl-select option:hover,
+        select.rl-select option:focus {
+          background-color: var(--rl-neutral-200);
+          color: var(--rl-neutral-950);
+        }
+        select.rl-select option:checked {
+          background-color: var(--rl-primary-500);
+          color: var(--rl-neutral-50);
+          font-weight: 500;
+        }
+      `}</style>
     </div>
   )
 }

package/src/components/select/RLVSelect.vue

@@ -55,6 +55,13 @@ const normalizedItems = computed(() => {
         :value="item.value"
         :disabled="item.disabled"
       >
+        <RLVIcon v-if="item.icon" :name="item.icon" class="rl-select-item-icon" />
+        <img
+          v-else-if="item.avatar"
+          :src="item.avatar.src"
+          :alt="item.avatar.alt"
+          class="rl-select-item-icon"
+        />
         {{ item.label }}
       </option>
     </select>
@@ -63,3 +70,53 @@ const normalizedItems = computed(() => {
     </span>
   </div>
 </template>
+
+<style>
+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(--rl-neutral-200);
+  border-radius: var(--radius-md, 0.375rem);
+  background-color: var(--rl-neutral-100);
+  color: var(--rl-neutral-950);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.25),
+    0 4px 6px -4px rgba(0, 0, 0, 0.15);
+  padding: 0.25rem;
+  margin-top: 0.25rem;
+}
+select.rl-select option {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: calc(var(--radius-md, 0.375rem) - 0.125rem);
+  background-color: var(--rl-neutral-100);
+  color: var(--rl-neutral-950);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+select.rl-select .rl-select-item-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+select.rl-select option:hover,
+select.rl-select option:focus {
+  background-color: var(--rl-neutral-200);
+  color: var(--rl-neutral-950);
+}
+select.rl-select option:checked {
+  background-color: var(--rl-primary-500);
+  color: var(--primary-foreground, #ffffff);
+  font-weight: 500;
+}
+</style>

package/src/components/select/select.theme.ts

@@ -1,108 +1,23 @@
 import { defineTheme } from "../../resolver"
 
 export const selectTheme = defineTheme("select", {
-  slots: [
-    "root",
-    "label",
-    "trigger",
-    "leading",
-    "leadingIcon",
-    "leadingAvatar",
-    "trailing",
-    "trailingIcon",
-    "trailingClear",
-    "value",
-    "placeholder",
-    "content",
-    "viewport",
-    "group",
-    "empty",
-    "separator",
-    "item",
-    "itemLeadingIcon",
-    "itemLeadingAvatar",
-    "itemLeadingChip",
-    "itemWrapper",
-    "itemLabel",
-    "itemDescription",
-    "itemTrailingIcon",
-    "input",
-    "createOption"
-  ],
+  slots: ["root", "select", "icon"],
   base: {
-    root: "relative w-full flex flex-col gap-1.5",
-    label: "text-sm font-medium text-highlighted",
-    trigger:
-      "relative group w-full inline-flex items-center justify-between rounded-md border border-default bg-default px-3 py-2 text-sm shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-75 cursor-pointer",
-    leading: "inline-flex items-center gap-1.5 shrink-0 me-2",
-    leadingIcon: "shrink-0 size-4 text-muted",
-    leadingAvatar: "shrink-0 size-4 rounded-full object-cover",
-    trailing: "inline-flex items-center gap-1.5 shrink-0 ms-auto",
-    trailingIcon: "shrink-0 size-4 text-muted transition-transform duration-200",
-    trailingClear: "p-0 text-muted hover:text-highlighted cursor-pointer",
-    value: "truncate text-highlighted",
-    placeholder: "truncate text-muted",
-    content:
-      "absolute z-50 left-0 right-0 min-w-[12rem] bg-default shadow-lg rounded-md border border-default overflow-hidden mt-1 flex flex-col max-h-60",
-    viewport: "relative p-1 scroll-py-1 overflow-y-auto flex-1 divide-y divide-border/50",
-    group: "p-1 isolate",
-    empty: "p-3 text-center text-sm text-muted",
-    separator: "-mx-1 my-1 h-px bg-border",
-    item: "group relative w-full flex items-center justify-between select-none outline-none rounded-md px-2 py-1.5 text-sm cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    itemLeadingIcon: "shrink-0 size-4 me-2 text-muted group-hover:text-highlighted",
-    itemLeadingAvatar: "shrink-0 size-4 me-2 rounded-full object-cover",
-    itemLeadingChip: "shrink-0 size-2.5 me-2 rounded-full",
-    itemWrapper: "flex-1 flex flex-col min-w-0",
-    itemLabel: "truncate font-normal",
-    itemDescription: "truncate text-xs text-muted",
-    itemTrailingIcon: "shrink-0 size-4 ms-auto text-primary",
-    input:
-      "w-full border-b border-default bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted",
-    createOption:
-      "p-2 text-sm font-medium text-primary hover:bg-accent cursor-pointer flex items-center gap-2 border-t border-default"
+    root: "relative inline-flex items-center w-full",
+    select:
+      "rl-select w-full cursor-pointer rounded-md border border-default bg-default text-highlighted shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
+    icon: "pointer-events-none absolute right-2 flex items-center text-muted"
   },
   variants: {
     size: {
-      xs: {
-        trigger: "h-7 px-2 text-xs",
-        item: "py-1 px-1.5 text-xs",
-        input: "py-1 px-2 text-xs"
-      },
-      sm: {
-        trigger: "h-8 px-2.5 text-xs",
-        item: "py-1 px-2 text-xs",
-        input: "py-1.5 px-2.5 text-xs"
-      },
-      md: {
-        trigger: "h-9 px-3 text-sm",
-        item: "py-1.5 px-2 text-sm",
-        input: "py-2 px-3 text-sm"
-      },
-      lg: {
-        trigger: "h-10 px-3.5 text-sm",
-        item: "py-2 px-2.5 text-sm",
-        input: "py-2.5 px-3.5 text-sm"
-      },
-      xl: {
-        trigger: "h-11 px-4 text-base",
-        item: "py-2.5 px-3 text-base",
-        input: "py-3 px-4 text-base"
-      }
-    },
-    variant: {
-      outline: { trigger: "bg-default border border-default hover:bg-accent/50" },
-      soft: { trigger: "bg-accent/50 border-transparent hover:bg-accent" },
-      subtle: { trigger: "bg-accent border border-default hover:bg-accent/80" },
-      ghost: { trigger: "bg-transparent border-transparent hover:bg-accent" },
-      none: { trigger: "bg-transparent border-transparent px-0 shadow-none" }
-    },
-    theme: {
-      dark: { root: "rl-dark" },
-      light: { root: "rl-light" }
+      xs: { select: "py-0.5 pl-2 pr-6 text-xs" },
+      sm: { select: "py-1 pl-2.5 pr-7 text-xs" },
+      md: { select: "py-1.5 pl-3 pr-8 text-sm" },
+      lg: { select: "py-2 pl-3.5 pr-9 text-base" },
+      xl: { select: "py-2.5 pl-4 pr-10 text-base" }
     }
   },
   defaultVariants: {
-    size: "md",
-    variant: "outline"
+    size: "md"
   }
 })

package/src/components/shortcuts/RLAShortcuts.astro

@@ -1,6 +1,6 @@
 ---
 import RLAIcon from "../icon/RLAIcon.astro"
-import { uiConfig } from "../../resolver"
+import uiConfig from "virtual:rimelight/ui"
 
 interface Props {
   categories?: Record<string, string>
@@ -40,7 +40,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
       <div class="rla-shortcuts-header">
         <h3 id={`${modalId}-title`} class="rla-shortcuts-title">Keyboard Shortcuts</h3>
         <button class="rla-shortcuts-close" aria-label="Close shortcuts help">
-          <RLAIcon name="close" class="w-4 h-4" />
+          <RLAIcon name="i-rl-close" class="w-4 h-4" />
         </button>
       </div>
 
@@ -300,7 +300,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
   .rla-shortcuts-close {
     background: transparent;
     border: none;
-    color: var(--color-neutral-400, #a3a3a3);
+    color: var(--rl-neutral-400, #a3a3a3);
     cursor: pointer;
     padding: 6px;
     border-radius: 6px;
@@ -312,7 +312,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
 
   .rla-shortcuts-close:hover {
     color: #fff;
-    background-color: var(--color-neutral-800, #262626);
+    background-color: var(--rl-neutral-800, #262626);
   }
 
   .rla-shortcuts-close:focus {
@@ -320,7 +320,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
   }
 
   .rla-shortcuts-close:focus-visible {
-    outline: 2px solid var(--color-primary-500, #3b82f6) !important;
+    outline: 2px solid var(--rl-primary-500, #3b82f6) !important;
   }
 
   .rla-shortcuts-body {
@@ -343,7 +343,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: var(--color-primary-500, #3b82f6);
+    color: var(--rl-primary-500, #3b82f6);
     font-weight: 700;
   }
 
@@ -376,7 +376,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
 
   .rla-shortcuts-desc {
     font-size: 0.75rem;
-    color: var(--color-neutral-400, #a3a3a3);
+    color: var(--rl-neutral-400, #a3a3a3);
   }
 
   .rla-shortcuts-keys {
@@ -403,7 +403,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
 
   .rla-shortcuts-empty {
     font-size: 0.875rem;
-    color: var(--color-neutral-500, #737373);
+    color: var(--rl-neutral-500, #737373);
     text-align: center;
     padding: 16px 0;
   }
@@ -413,7 +413,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
     background-color: #09090b !important;
     border-top: 1px solid #27272a;
     font-size: 0.75rem;
-    color: var(--color-neutral-400, #a3a3a3);
+    color: var(--rl-neutral-400, #a3a3a3);
     display: flex;
     justify-content: flex-end;
   }

package/src/components/sidebar/RLASidebar.astro

@@ -55,7 +55,7 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
         <slot name="header">
           {logo && (
             <span data-slot="sidebar-logo" class="flex items-center gap-2">
-              <RLAIcon name="layers" class="size-5 text-primary" />
+              <RLAIcon name="i-rl-layers" class="size-5 text-primary" />
               <span class="truncate">{logo}</span>
             </span>
           )}
@@ -82,7 +82,7 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
         class="fixed top-4 left-4 z-50 flex size-9 items-center justify-center rounded-md bg-default border border-default shadow-sm hover:bg-muted transition-colors"
         aria-label="Toggle sidebar"
       >
-        <RLAIcon name="panelLeft" class="size-4" />
+        <RLAIcon name="i-rl-panelLeft" class="size-4" />
       </button>
     )}
 
@@ -121,7 +121,7 @@ const textSizeClass = _depth === 0 ? "" : "text-xs"
                     {t(b.text)}
                   </RLABadge>
                 )}
-                <RLAIcon name="chevronRight" class="size-3 ml-auto transition-transform group-open/details:rotate-90" />
+                <RLAIcon name="i-rl-chevronRight" class="size-3 ml-auto transition-transform group-open/details:rotate-90" />
               </summary>
               <div class={`mt-0.5 ${indentClass} flex flex-col gap-0.5`}>
                 <Astro.self items={item.children} t={t} _depth={_depth + 1} />

package/src/components/slideover/RLASlideover.astro

@@ -49,7 +49,7 @@ const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
       data-dialog-close={dialogId}
       aria-label="Close slideover"
     >
-      <RLAIcon name="close" class="size-4" aria-hidden="true" />
+      <RLAIcon name="i-rl-close" class="size-4" aria-hidden="true" />
     </button>
 
     <div class={classes.header} data-slot="header">

package/src/components/slider/RLASlider.astro

@@ -9,6 +9,7 @@ const {
   max = 100,
   step = 1,
   name,
+  theme,
   ...rest
 } = Astro.props as SliderProps
 
@@ -16,7 +17,7 @@ const classes = sliderTheme(Astro.props)
 
 const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
 ---
-<div class={classes.root} data-slot="slider-root" {...rest}>
+<div class={classes.root} data-slot="slider-root" data-theme={theme} {...rest}>
   <div class={classes.track} data-slot="track">
     <svg class="h-full w-full overflow-visible pointer-events-none">
       <rect class:list={[classes.range, "h-full"]} width={`${percentage}%`} fill="currentColor" rx="2" />

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

@@ -10,11 +10,7 @@ export const sliderTheme = defineTheme("slider", {
       "block size-4.5 rounded-full border border-default bg-default shadow transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]/50 hover:border-[var(--rl-border)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
   },
   variants: {
-    color: "auto",
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
-    }
+    color: "auto"
   },
   defaultVariants: {
     color: "primary"

package/src/components/spinner/RLASpinner.astro

@@ -4,9 +4,10 @@ import { spinnerTheme } from "./spinner.theme"
 
 
 const {
+  theme,
   ...rest
 } = Astro.props as SpinnerProps
 
 const classes = spinnerTheme(Astro.props)
 ---
-<div class={classes.root} data-slot="root" {...rest} />
+<div class={classes.root} data-slot="root" data-theme={theme} {...rest} />

package/src/components/spinner/spinner.theme.ts

@@ -13,11 +13,7 @@ export const spinnerTheme = defineTheme("spinner", {
       lg: { root: "size-8" },
       xl: { root: "size-10" }
     },
-    color: "auto",
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
-    }
+    color: "auto"
   },
   compoundVariants: [
     {

package/src/components/splitter/splitter.theme.ts

@@ -6,7 +6,7 @@ export const splitterTheme = defineTheme("splitter", {
     root: "flex w-full h-full",
     panel: "overflow-auto transition-all",
     handle:
-      "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
+      "flex items-center justify-center bg-neutral-200 hover:bg-primary/50 transition-colors cursor-col-resize select-none"
   },
   variants: {
     direction: {

package/src/components/stepper/RLAStepper.astro

@@ -75,7 +75,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
                           size="sm"
                           class:list={[
                             classes.icon,
-                            (isActive || isCompleted) ? "!text-white" : "text-neutral-400 dark:text-neutral-500"
+                            (isActive || isCompleted) ? "!text-white" : "text-neutral-400"
                           ]}
                           data-slot="icon"
                         />
@@ -110,7 +110,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
                 class:list={[
                   classes.separator,
                   "flex-1 h-0.5 mx-2 self-start mt-4 transition-colors",
-                  index < currentIndex ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-800"
+                  index < currentIndex ? "bg-primary-600" : "bg-neutral-200"
                 ]}
                 data-slot="separator"
                 data-separator-index={index}
@@ -251,10 +251,10 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
           if (icon) {
             if (isActive || isCompleted) {
               icon.classList.add('!text-white')
-              icon.classList.remove('text-neutral-400', 'dark:text-neutral-500')
+              icon.classList.remove('text-neutral-400')
             } else {
               icon.classList.remove('!text-white')
-              icon.classList.add('text-neutral-400', 'dark:text-neutral-500')
+              icon.classList.add('text-neutral-400')
             }
           }
 
@@ -263,11 +263,11 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
             const sep = sepNode as HTMLElement
             const sepIdx = Number(sep.dataset.separatorIndex)
             if (sepIdx < this.currentIndex) {
-              sep.classList.add('!bg-primary-600', 'dark:!bg-primary-500')
-              sep.classList.remove('bg-neutral-200', 'dark:bg-neutral-800')
+              sep.classList.add('!bg-primary-600')
+              sep.classList.remove('bg-neutral-200')
             } else {
-              sep.classList.remove('!bg-primary-600', 'dark:!bg-primary-500')
-              sep.classList.add('bg-neutral-200', 'dark:bg-neutral-800')
+              sep.classList.remove('!bg-primary-600')
+              sep.classList.add('bg-neutral-200')
             }
           })
         })

package/src/components/stepper/stepper.theme.ts

@@ -21,14 +21,14 @@ export const stepperTheme = defineTheme("stepper", {
     item: "group flex-1 flex flex-col items-center text-center relative",
     container: "flex items-center justify-center relative w-full",
     trigger:
-      "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:bg-primary-600 group-data-[state=completed]:border-primary-600 group-data-[state=completed]:!text-white group-data-[state=active]:bg-primary-600 group-data-[state=active]:border-primary-600 group-data-[state=active]:!text-white text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 transition-all cursor-pointer z-10",
+      "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:bg-primary-600 group-data-[state=completed]:border-primary-600 group-data-[state=completed]:!text-white group-data-[state=active]:bg-primary-600 group-data-[state=active]:border-primary-600 group-data-[state=active]:!text-white text-neutral-400 bg-neutral-100 border border-neutral-300 transition-all cursor-pointer z-10",
     indicator: "flex items-center justify-center size-full text-current",
     icon: "shrink-0 size-4 text-current transition-colors",
     separator: "flex-1 h-0.5 mx-2 self-start mt-4 transition-colors rounded-full",
     wrapper: "mt-2 text-center",
     title:
-      "text-xs font-semibold group-data-[state=active]:font-bold group-data-[state=active]:text-primary-600 dark:group-data-[state=active]:text-primary-400 group-data-[state=completed]:text-primary-600 dark:group-data-[state=completed]:text-primary-400 text-neutral-400 dark:text-neutral-500 transition-colors",
-    description: "text-neutral-500 dark:text-neutral-400 text-wrap text-xs",
+      "text-xs font-semibold group-data-[state=active]:font-bold group-data-[state=active]:text-primary-600 group-data-[state=completed]:text-primary-600 text-neutral-400 transition-colors",
+    description: "text-neutral-500 text-wrap text-xs",
     content: "size-full"
   },
   variants: {
@@ -123,10 +123,9 @@ export const stepperTheme = defineTheme("stepper", {
       },
       neutral: {
         trigger:
-          "group-data-[state=completed]:bg-neutral-900 dark:group-data-[state=completed]:bg-neutral-100 group-data-[state=completed]:border-neutral-900 dark:group-data-[state=completed]:border-neutral-100 group-data-[state=completed]:text-neutral-100 dark:group-data-[state=completed]:text-neutral-900 group-data-[state=active]:bg-neutral-900 dark:group-data-[state=active]:bg-neutral-100 group-data-[state=active]:border-neutral-900 dark:group-data-[state=active]:border-neutral-100 group-data-[state=active]:text-neutral-100 dark:group-data-[state=active]:text-neutral-900",
-        icon: "group-data-[state=completed]:text-neutral-100 dark:group-data-[state=completed]:text-neutral-900 group-data-[state=active]:text-neutral-100 dark:group-data-[state=active]:text-neutral-900",
-        separator:
-          "group-data-[state=completed]:bg-neutral-900 dark:group-data-[state=completed]:bg-neutral-100"
+          "group-data-[state=completed]:bg-neutral-950 group-data-[state=completed]:border-neutral-950 group-data-[state=active]:bg-neutral-950 group-data-[state=active]:border-neutral-950",
+        icon: "group-data-[state=completed]:text-neutral-50 group-data-[state=active]:text-neutral-50",
+        separator: "group-data-[state=completed]:bg-neutral-950"
       }
     }
   },

package/src/components/steps/RLASteps.astro

@@ -54,8 +54,8 @@ const classes = stepsTheme(Astro.props)
     font-size: 0.75rem;
     font-weight: 700;
     line-height: 1;
-    color: var(--color-primary-foreground, #fff);
-    background-color: var(--color-primary, #3b82f6);
+    color: var(--rl-neutral-50);
+    background-color: var(--primary, #3b82f6);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     z-index: 1;
   }
@@ -67,7 +67,7 @@ const classes = stepsTheme(Astro.props)
     top: calc(1.75rem + 0.375rem);
     bottom: 0;
     width: 2px;
-    background-color: var(--color-border, #e5e7eb);
+    background-color: var(--rl-neutral-200);
   }
 
   .rl-steps-list > li:last-child::after {

package/src/components/switch/RLASwitch.astro

@@ -9,12 +9,13 @@ const {
   disabled = false,
   name,
   label,
+  theme,
   ...rest
 } = Astro.props as SwitchProps
 
 const classes = switchTheme(Astro.props);
 ---
-<label class={classes.root} data-slot="root">
+<label class={classes.root} data-slot="root" data-theme={theme}>
   <input
     type="checkbox"
     class={classes.input}

package/src/components/switch/switch.theme.ts

@@ -24,10 +24,6 @@ export const switchTheme = defineTheme("switch", {
     checked: {
       true: { thumb: "translate-x-full" },
       false: { thumb: "translate-x-0" }
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   compoundVariants: [

package/src/components/table/table.theme.ts

@@ -27,7 +27,7 @@ export const tableTheme = defineTheme("table", {
     tr: "transition-colors data-[selected=true]:bg-primary/10 data-[expanded=true]:bg-muted/40 hover:bg-muted/30",
     th: "px-4 py-3.5 text-xs font-semibold text-muted text-left uppercase tracking-wider [&:has([role=checkbox])]:pe-0",
     td: "p-4 text-sm text-highlighted align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    separator: "absolute z-10 start-0 w-full h-px bg-border",
+    separator: "absolute z-10 start-0 w-full h-px bg-neutral-200",
     empty: "py-8 text-center text-sm text-muted",
     loading: "py-8 text-center text-sm text-muted"
   },