@rimelight/ui 0.0.32 → 0.0.34

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)
 
@@ -21,8 +25,15 @@ const Tag = as;
 ---
 
 <Tag
-        class:list={[classes.root]}
+        class:list={[classes.root, "rla-main-container"]}
+        data-slot="main"
         {...rest}
->
+    >
     <slot />
-</Tag>
+</Tag>
+
+<style>
+  .rla-main-container {
+    padding-top: var(--rl-total-header-height, 4rem);
+  }
+</style>

package/src/components/astro/RLAMarquee.astro

@@ -1,32 +1,43 @@
----
-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`
+const id = `marquee-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="marquee-root" {...rest}>
+  <div class:list={[classes.track, id]} data-slot="track">
+    <slot />
+  </div>
+  <div class:list={[classes.track, id]} data-slot="track" aria-hidden="true">
+    <slot />
+  </div>
+</div>
+
+<style is:inline set:html={`
+  .${id} {
+    animation-duration: ${duration} !important;
+  }
+`} />

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>

package/src/components/astro/RLAMeter.astro

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

package/src/components/astro/RLAModal.astro

@@ -1,95 +1,99 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ModalProps } from "../../types"
-import modalTheme from "../../themes/modal.theme"
-
-const modal = scv(modalTheme)
-
-const {
-  open = false,
-  triggerLabel,
-  closeOnClickOutside = true,
-  closeOnEscape = true,
-  lockScroll = true,
-  title,
-  description,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ModalProps
-
-const classes = resolveClasses(modal, {
-  size
-}, useUi("modal", uiProp), className)
-
-const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="modal-container">
-  {triggerLabel ? (
-    <button
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      onclick={`document.getElementById('${modalId}').showmodal()`}
-    >
-      {triggerLabel}
-    </button>
-  ) : (
-    <span onclick={`document.getElementById('${modalId}').showmodal()`}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={modalId}
-    class={classes.content}
-    data-slot="content"
-    data-lock-scroll={lockScroll ? "true" : "false"}
-    data-close-on-escape={closeOnEscape ? "true" : "false"}
-    data-close-on-click-outside={closeOnClickOutside ? "true" : "false"}
-    {...rest}
-  >
-    <button
-      class={classes.closeButton}
-      data-slot="close-button"
-      type="button"
-      onclick={`document.getElementById('${modalId}').close()`}
-      aria-label="Close modal"
-    >
-      <span class="i-lucide-x size-4" aria-hidden="true" />
-    </button>
-
-    <div class={classes.header} data-slot="header">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      <slot name="title" />
-      
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot name="description" />
-    </div>
-
-    <slot />
-
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" />
-    </div>
-  </dialog>
-</div>
-
-<script is:inline>
-  document.addEventListener('click', (e) => {
-    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
-      const rect = e.target.getBoundingClientRect();
-      const isInModal = (
-        rect.top <= e.clientY &&
-        e.clientY <= rect.top + rect.height &&
-        rect.left <= e.clientX &&
-        e.clientX <= rect.left + rect.width
-      );
-      if (!isInModal) {
-        e.target.close();
-      }
-    }
-  });
-</script>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ModalProps } from "../../types"
+import modalThemeDefault, { createModalTheme } from "../../themes/modal.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const modalTheme = uiConfig.colors ? createModalTheme() : modalThemeDefault
+
+const modal = scv(modalTheme)
+
+const {
+  open = false,
+  triggerLabel,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  lockScroll = true,
+  title,
+  description,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ModalProps
+
+const classes = resolveClasses(modal, {
+  size
+}, useUi("modal", uiProp), className)
+
+const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="modal-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${modalId}').showmodal()`}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span onclick={`document.getElementById('${modalId}').showmodal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={modalId}
+    class={classes.content}
+    data-slot="content"
+    data-lock-scroll={lockScroll ? "true" : "false"}
+    data-close-on-escape={closeOnEscape ? "true" : "false"}
+    data-close-on-click-outside={closeOnClickOutside ? "true" : "false"}
+    {...rest}
+  >
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      onclick={`document.getElementById('${modalId}').close()`}
+      aria-label="Close modal"
+    >
+      <span class="i-lucide-x size-4" aria-hidden="true" />
+    </button>
+
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</div>
+
+<script is:inline>
+  document.addEventListener('click', (e) => {
+    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
+      const rect = e.target.getBoundingClientRect();
+      const isInModal = (
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width
+      );
+      if (!isInModal) {
+        e.target.close();
+      }
+    }
+  });
+</script>