@rimelight/ui 0.0.32 → 0.0.33

package/src/components/astro/RLAInputTime.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { InputTimeProps } from "../../types"
-import inputTimeThemeDefault from "../../themes/input-time.theme"
-
-const inputTime = scv(inputTimeThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as InputTimeProps
-
-const classes = resolveClasses(inputTime, {}, useUi("inputTime", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputTimeProps } from "../../types"
+import inputTimeThemeDefault, { createInputTimeTheme } from "../../themes/input-time.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const inputTimeTheme = uiConfig.colors ? createInputTimeTheme() : inputTimeThemeDefault
+
+const inputTime = scv(inputTimeTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputTimeProps
+
+const classes = resolveClasses(inputTime, {}, useUi("inputTime", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAKbd.astro

@@ -1,22 +1,32 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { KbdProps } from "../../types"
-import kbdTheme from "../../themes/kbd.theme"
-
-const kbd = scv(kbdTheme)
-
-const {
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as KbdProps
-
-const classes = resolveClasses(kbd, {
-  size
-}, useUi("kbd", uiProp), className)
----
-<kbd class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</kbd>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { KbdProps } from "../../types"
+import kbdThemeDefault, { createKbdTheme } from "../../themes/kbd.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const kbdTheme = uiConfig.colors ? createKbdTheme() : kbdThemeDefault
+
+const kbd = scv(kbdTheme)
+
+const {
+  size = "md",
+  color = "neutral",
+  variant = "outline",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as KbdProps
+
+const classes = resolveClasses(kbd, {
+  size,
+  color,
+  variant,
+  theme
+}, useUi("kbd", uiProp), className)
+---
+<kbd class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</kbd>

package/src/components/astro/RLAKnob.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { KnobProps } from "../../types"
-import knobThemeDefault from "../../themes/knob.theme"
-
-const knob = scv(knobThemeDefault)
-
-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 { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { KnobProps } from "../../types"
+import knobThemeDefault, { createKnobTheme } from "../../themes/knob.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const knobTheme = uiConfig.colors ? createKnobTheme() : knobThemeDefault
+
+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 />
 </div>

package/src/components/astro/RLALabel.astro

@@ -1,23 +1,27 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LabelProps } from "../../types"
-import labelTheme from "../../themes/label.theme"
-
-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 { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LabelProps } from "../../types"
+import labelThemeDefault, { createLabelTheme } from "../../themes/label.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const labelTheme = uiConfig.colors ? createLabelTheme() : labelThemeDefault
+
+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>

package/src/components/astro/RLALink.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LinkProps } from "../../types"
-import linkThemeDefault from "../../themes/link.theme"
-
-const link = scv(linkThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LinkProps
-
-const classes = resolveClasses(link, {}, useUi("link", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LinkProps } from "../../types"
+import linkThemeDefault, { createLinkTheme } from "../../themes/link.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const linkTheme = uiConfig.colors ? createLinkTheme() : linkThemeDefault
+
+const link = scv(linkTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LinkProps
+
+const classes = resolveClasses(link, {}, useUi("link", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLALinkGroup.astro

@@ -1,19 +1,38 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LinkGroupProps } from "../../types"
-import linkGroupThemeDefault from "../../themes/link-group.theme"
-
-const linkGroup = scv(linkGroupThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LinkGroupProps
-
-const classes = resolveClasses(linkGroup, {}, useUi("linkGroup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LinkGroupProps } from "../../types"
+import linkGroupThemeDefault, { createLinkGroupTheme } from "../../themes/link-group.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const linkGroupTheme = uiConfig.colors ? createLinkGroupTheme() : linkGroupThemeDefault
+
+const linkGroup = scv(linkGroupTheme)
+
+const {
+  title,
+  links = [],
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LinkGroupProps
+
+const classes = resolveClasses(linkGroup, { theme }, useUi("linkGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  {title && <h4 class={classes.title} data-slot="title">{title}</h4>}
+  
+  <ul class={classes.list} data-slot="list">
+    <slot>
+      {links.map((link) => (
+        <li class={classes.item} data-slot="item">
+          <a href={link.href} class={classes.link} data-slot="link" {...link}>
+            {link.label}
+          </a>
+        </li>
+      ))}
+    </slot>
+  </ul>
 </div>

package/src/components/astro/RLAListbox.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ListboxProps } from "../../types"
-import listboxThemeDefault from "../../themes/listbox.theme"
-
-const listbox = scv(listboxThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ListboxProps
-
-const classes = resolveClasses(listbox, {}, useUi("listbox", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ListboxProps } from "../../types"
+import listboxThemeDefault, { createListboxTheme } from "../../themes/listbox.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const listboxTheme = uiConfig.colors ? createListboxTheme() : listboxThemeDefault
+
+const listbox = scv(listboxTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ListboxProps
+
+const classes = resolveClasses(listbox, {}, useUi("listbox", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLALocaleSelector.astro

@@ -2,9 +2,13 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { LocaleSelectorProps } from "../../types"
-import localeSelectorTheme from "../../themes/locale-selector.theme"
+import localeSelectorThemeDefault, { createLocaleSelectorTheme } from "../../themes/locale-selector.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
 import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n";
 
+const uiConfig = getUIConfig()
+const localeSelectorTheme = uiConfig.colors ? createLocaleSelectorTheme() : localeSelectorThemeDefault
+
 const localeSelector = scv(localeSelectorTheme)
 
 const {

package/src/components/astro/RLALogo.astro

@@ -1,56 +1,90 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LogoProps } from "../../types"
-import logoTheme from "../../themes/logo.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const logo = scv(logoTheme)
-
-const {
-  variant = "logomark",
-  mode,
-  href = "/",
-  alt,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LogoProps;
-
-const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
-
-const globalConfig = getUIConfig();
-const rcLogos = globalConfig.logos as Record<string, any>;
-
-let logoSrc: string | null = null;
-
-if (rcLogos && typeof rcLogos === "object") {
-  let src = rcLogos[variant];
-  if (src && typeof src === "object") {
-    logoSrc = src[mode || "color"] || src.black || src.color;
-  } else if (typeof src === "string") {
-    logoSrc = src;
-  }
-}
-
-// Support for UnoCSS icons (e.g. `i-heroicons-home`)
-const isIcon = logoSrc && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
----
-
-<a
-  class={classes.root}
-  href={href}
-  aria-label={alt || variant}
-  data-slot="root"
-  {...rest}
->
-  {logoSrc ? (
-    isIcon ? (
-      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
-    ) : (
-      <img src={logoSrc} alt={alt || ""} class="size-full block object-contain shrink-0" />
-    )
-  ) : (
-    <slot />
-  )}
-</a>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LogoProps } from "../../types"
+import logoThemeDefault, { createLogoTheme } from "../../themes/logo.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const logoTheme = uiConfig.colors ? createLogoTheme() : logoThemeDefault
+
+const logo = scv(logoTheme)
+
+const {
+  variant = "logomark",
+  mode,
+  theme,
+  href = "/",
+  alt,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LogoProps;
+
+const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
+
+const globalConfig = getUIConfig();
+const rcLogos = globalConfig.logos as Record<string, any>;
+
+let logoSrc: string | null = null;
+let darkSrc: string | null = null;
+let lightSrc: string | null = null;
+
+if (rcLogos && typeof rcLogos === "object") {
+  let src = rcLogos[variant];
+  if (src && typeof src === "object") {
+    if (theme === "flat" && src.flat) {
+      logoSrc = src.flat;
+    } else if (mode) {
+      logoSrc = src[mode] || src.color;
+    } else {
+      // No mode, no flat — auto-detect, use color as default
+      logoSrc = src.color || src.black || src.white;
+      darkSrc = src.white || src.color;
+      lightSrc = src.black || src.color;
+    }
+  } else if (typeof src === "string") {
+    logoSrc = src;
+  }
+}
+
+const startsWithUrlPrefix = logoSrc && (logoSrc.startsWith("http") || logoSrc.startsWith("/") || logoSrc.startsWith("."));
+const isIcon = logoSrc && !startsWithUrlPrefix && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
+const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode && theme !== "flat";
+const autoId = hasAutoMode ? `rla-logo-${Math.random().toString(36).slice(2, 8)}` : undefined;
+---
+
+<a
+  class={classes.root}
+  href={href}
+  aria-label={alt || variant}
+  data-slot="root"
+  {...rest}
+>
+  {logoSrc ? (
+    isIcon ? (
+      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
+    ) : hasAutoMode ? (
+      <>
+        <img
+          src={lightSrc}
+          alt={alt || ""}
+          class="size-full block object-contain shrink-0 dark:hidden"
+        />
+        <img
+          src={darkSrc}
+          alt={alt || ""}
+          class="size-full hidden object-contain shrink-0 dark:block"
+        />
+      </>
+    ) : (
+      <img
+        src={logoSrc}
+        alt={alt || ""}
+        class="size-full block object-contain shrink-0"
+      />
+    )
+  ) : (
+    <slot />
+  )}
+</a>

package/src/components/astro/RLAMain.astro

@@ -2,7 +2,11 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { MainProps } from "../../types"
-import mainTheme from "../../themes/main.theme"
+import mainThemeDefault, { createMainTheme } from "../../themes/main.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const mainTheme = uiConfig.colors ? createMainTheme() : mainThemeDefault
 
 const main = scv(mainTheme)
 
@@ -22,7 +26,9 @@ const Tag = as;
 
 <Tag
         class:list={[classes.root]}
+        data-slot="main"
+        style="padding-top: var(--rl-total-header-height, 4rem)"
         {...rest}
->
+    >
     <slot />
 </Tag>

package/src/components/astro/RLAMarquee.astro

@@ -1,32 +1,36 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { MarqueeProps } from "../../types"
-import marqueeTheme from "../../themes/marquee.theme"
-
-const marquee = scv(marqueeTheme)
-
-const {
-  direction = "left",
-  speed = 40,
-  pauseOnHover = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as MarqueeProps
-
-const classes = resolveClasses(marquee, {
-  direction,
-  pauseOnHover
-}, useUi("marquee", uiProp), className)
-
-const duration = `${speed}s`
----
-<div class={classes.root} data-slot="marquee-root" {...rest}>
-  <div class={classes.track} data-slot="track" style={{ animationDuration: duration }}>
-    <slot />
-  </div>
-  <div class={classes.track} data-slot="track" aria-hidden="true" style={{ animationDuration: duration }}>
-    <slot />
-  </div>
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { MarqueeProps } from "../../types"
+import marqueeThemeDefault, { createMarqueeTheme } from "../../themes/marquee.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const marqueeTheme = uiConfig.colors ? createMarqueeTheme() : marqueeThemeDefault
+
+const marquee = scv(marqueeTheme)
+
+const {
+  direction = "left",
+  speed = 40,
+  pauseOnHover = true,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as MarqueeProps
+
+const classes = resolveClasses(marquee, {
+  direction,
+  pauseOnHover
+}, useUi("marquee", uiProp), className)
+
+const duration = `${speed}s`
+---
+<div class={classes.root} data-slot="marquee-root" {...rest}>
+  <div class={classes.track} data-slot="track" style={{ animationDuration: duration }}>
+    <slot />
+  </div>
+  <div class={classes.track} data-slot="track" aria-hidden="true" style={{ animationDuration: duration }}>
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAMegamenu.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { MegamenuProps } from "../../types"
-import megamenuThemeDefault from "../../themes/megamenu.theme"
-
-const megamenu = scv(megamenuThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as MegamenuProps
-
-const classes = resolveClasses(megamenu, {}, useUi("megamenu", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { MegamenuProps } from "../../types"
+import megamenuThemeDefault, { createMegamenuTheme } from "../../themes/megamenu.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const megamenuTheme = uiConfig.colors ? createMegamenuTheme() : megamenuThemeDefault
+
+const megamenu = scv(megamenuTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as MegamenuProps
+
+const classes = resolveClasses(megamenu, {}, useUi("megamenu", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>