@rimelight/ui 0.0.56 → 0.0.58

package/src/components/chart/RLAChart.astro

@@ -1,219 +1,211 @@
----
-import type { ChartProps, ChartDataPoint } from "./chart"
-import { chartTheme } from "./chart.theme"
-
-
-
-const {
-  type = "bar",
-  data = [],
-  title,
-  height = 280,
-  color = "primary",
-  ...rest
-} = Astro.props as ChartProps
-
-const classes = chartTheme(Astro.props)
-
-// Compute derived values on the server so we don't do heavy JS on the client
-const max = data.length > 0 ? Math.max(...data.map(d => d.value)) : 1
-const total = data.reduce((sum, d) => sum + d.value, 0)
-
-// Palette for chart segments/bars when no per-item color given
-const palette = [
-  "hsl(221 83% 53%)", // blue
-  "hsl(262 83% 58%)", // violet
-  "hsl(142 76% 36%)", // green
-  "hsl(32 95% 44%)",  // amber
-  "hsl(0 84% 60%)",   // red
-  "hsl(187 85% 43%)", // cyan
-]
-
-const getColor = (item: ChartDataPoint, index: number) =>
-  item.color ?? palette[index % palette.length]
-
-// Build pie/donut SVG path segments
-const PIE_R = 80
-const PIE_CX = 100
-const PIE_CY = 100
-const DONUT_INNER_R = 45
-
-const polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {
-  const rad = (angleDeg - 90) * (Math.PI / 180)
-  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
-}
-
-const describeArc = (cx: number, cy: number, r: number, start: number, end: number) => {
-  const s = polarToCartesian(cx, cy, r, start)
-  const e = polarToCartesian(cx, cy, r, end)
-  const largeArc = end - start > 180 ? 1 : 0
-  return `M ${s.x} ${s.y} A ${r} ${r} 0 ${largeArc} 1 ${e.x} ${e.y}`
-}
-
-let pieCursor = 0
-const pieSlices = data.map((item, i) => {
-  const angle = (item.value / (total || 1)) * 360
-  const start = pieCursor
-  const end = pieCursor + angle
-  pieCursor = end
-  return { item, i, start, end }
-})
-
-// Build line chart SVG points
-const LINE_W = 400
-const LINE_H = 160
-const LINE_PAD = 32
-const linePoints = data.map((d, i) => {
-  const x = data.length < 2
-    ? LINE_PAD
-    : LINE_PAD + (i / (data.length - 1)) * (LINE_W - LINE_PAD * 2)
-  const y = LINE_H - LINE_PAD - ((d.value / (max || 1)) * (LINE_H - LINE_PAD * 2))
-  return { x, y, d, i }
-})
-const linePath = linePoints.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ")
-const areaPath = linePoints.length > 0
-  ? linePath +
-    ` L ${linePoints[linePoints.length - 1]!.x} ${LINE_H - LINE_PAD}` +
-    ` L ${linePoints[0]!.x} ${LINE_H - LINE_PAD} Z`
-  : ""
-const id = `chart-${Math.random().toString(36).substring(2, 9)}`
----
-
-<style is:inline set:html={`
-  .${id} { min-height: ${height}px; }
-  .${id} [data-slot="container"] { height: ${height - 60}px; gap: 6px; align-items: flex-end; }
-  .${id} .rla-chart-line-wrap { height: ${height - 60}px; }
-  .${id} .rla-chart-pie-wrap { height: ${height - 60}px; }
-`} />
-
-<div class:list={[classes.root, id]} data-slot="root" {...rest}>
-  {title && <div class={classes.title} data-slot="title">{title}</div>}
-
-  {/* Bar Chart */}
-  {type === "bar" && (
-    <div class={classes.container} data-slot="container">
-      {data.map((item, i) => {
-        const pct = max > 0 ? (item.value / max) * 100 : 0
-        return (
-          <div class="flex flex-col items-center gap-1 flex-1 group">
-            <span class="text-[10px] text-muted font-mono opacity-0 group-hover:opacity-100 transition-opacity">
-              {item.value}
-            </span>
-            <div class:list={[classes.bar, "h-full w-full overflow-hidden !bg-transparent"]} title={`${item.label}: ${item.value}`}>
-              <svg class="h-full w-full overflow-visible" viewBox="0 0 20 100" preserveAspectRatio="none">
-                <rect x="0" y={100 - pct} width="20" height={pct} fill={getColor(item, i)} rx="2" />
-              </svg>
-            </div>
-            <span class={classes.axis}>{item.label}</span>
-          </div>
-        )
-      })}
-    </div>
-  )}
-
-  {/* Line / Area Chart */}
-  {(type === "line" || type === "area") && (
-    <div class="relative w-full rla-chart-line-wrap">
-      <svg
-        class={classes.svg}
-        viewBox={`0 0 ${LINE_W} ${LINE_H}`}
-        preserveAspectRatio="none"
-        aria-label={title ?? "Line chart"}
-      >
-        {/* Grid lines */}
-        {[0, 0.25, 0.5, 0.75, 1].map(t => {
-          const y = LINE_PAD + t * (LINE_H - LINE_PAD * 2)
-          return <line x1={LINE_PAD} y1={y} x2={LINE_W - LINE_PAD} y2={y} stroke="currentColor" stroke-opacity="0.08" />
-        })}
-
-        {/* Area fill */}
-        {type === "area" && (
-          <path d={areaPath} fill={palette[0]!} fill-opacity="0.15" />
-        )}
-
-        {/* Line */}
-        <path d={linePath} class={classes.line} stroke={palette[0]!} stroke-width="2.5" />
-
-        {/* Dots */}
-        {linePoints.map(p => (
-          <circle
-            cx={p.x}
-            cy={p.y}
-            r="4"
-            fill={getColor(p.d, p.i)}
-            stroke="white"
-            stroke-width="1.5"
-          >
-            <title>{p.d.label}: {p.d.value}</title>
-          </circle>
-        ))}
-
-        {/* X axis labels */}
-        {linePoints.map(p => (
-          <text x={p.x} y={LINE_H - 4} text-anchor="middle" class={classes.axis}>{p.d.label}</text>
-        ))}
-      </svg>
-    </div>
-  )}
-
-  {/* Pie / Donut Chart */}
-  {(type === "pie" || type === "donut") && (
-    <div class="flex items-center gap-6 justify-center rla-chart-pie-wrap">
-      <svg
-        viewBox="0 0 200 200"
-        class="h-full w-auto max-h-48"
-        aria-label={title ?? "Pie chart"}
-      >
-        {pieSlices.map(({ item, i, start, end }) => {
-          const isFullCircle = Math.abs(end - start - 360) < 0.01
-          const d = isFullCircle
-            ? `M ${PIE_CX} ${PIE_CY - PIE_R} A ${PIE_R} ${PIE_R} 0 1 1 ${PIE_CX - 0.001} ${PIE_CY - PIE_R} Z`
-            : describeArc(PIE_CX, PIE_CY, PIE_R, start, end) +
-              ` L ${PIE_CX} ${PIE_CY} Z`
-          return (
-            <path
-              d={d}
-              fill={getColor(item, i)}
-              class="transition-opacity hover:opacity-85 cursor-pointer"
-            >
-              <title>{item.label}: {item.value}</title>
-            </path>
-          )
-        })}
-        {type === "donut" && (
-          <circle cx={PIE_CX} cy={PIE_CY} r={DONUT_INNER_R} fill="var(--rl-neutral-50)" />
-        )}
-      </svg>
-
-      {/* Legend */}
-      <div class="flex flex-col gap-1.5">
-        {data.map((item, i) => (
-          <div class="flex items-center gap-2 text-xs text-muted">
-            <svg class="size-3 shrink-0" viewBox="0 0 10 10">
-              <rect width="10" height="10" rx="2" fill={getColor(item, i)} />
-            </svg>
-            <span>{item.label}</span>
-            <span class="ml-1 font-mono text-highlighted">{item.value}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )}
-
-  {/* Custom slot for fully custom chart content */}
-  <slot />
-
-  {/* Legend row for bar/line */}
-  {(type === "bar" || type === "line" || type === "area") && data.length > 0 && (
-    <div class={classes.legend} data-slot="legend">
-      {data.map((item, i) => (
-        <div class="flex items-center gap-1.5">
-          <svg class="size-2.5 shrink-0" viewBox="0 0 10 10">
-            <circle cx="5" cy="5" r="5" fill={getColor(item, i)} />
-          </svg>
-          <span>{item.label}</span>
-        </div>
-      ))}
-    </div>
-  )}
-</div>
+---
+import type { ChartProps, ChartDataPoint } from "./chart"
+import { chartTheme } from "./chart.theme"
+
+
+
+const {
+  type = "bar",
+  data = [],
+  title,
+  height = 280,
+  color = "primary",
+  ...rest
+} = Astro.props as ChartProps
+
+const classes = chartTheme(Astro.props)
+
+// Compute derived values on the server so we don't do heavy JS on the client
+const max = data.length > 0 ? Math.max(...data.map(d => d.value)) : 1
+const total = data.reduce((sum, d) => sum + d.value, 0)
+
+// Palette for chart segments/bars when no per-item color given
+const palette = [
+  "hsl(221 83% 53%)", // blue
+  "hsl(262 83% 58%)", // violet
+  "hsl(142 76% 36%)", // green
+  "hsl(32 95% 44%)",  // amber
+  "hsl(0 84% 60%)",   // red
+  "hsl(187 85% 43%)", // cyan
+]
+
+const getColor = (item: ChartDataPoint, index: number) =>
+  item.color ?? palette[index % palette.length]
+
+// Build pie/donut SVG path segments
+const PIE_R = 80
+const PIE_CX = 100
+const PIE_CY = 100
+const DONUT_INNER_R = 45
+
+const polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {
+  const rad = (angleDeg - 90) * (Math.PI / 180)
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
+}
+
+const describeArc = (cx: number, cy: number, r: number, start: number, end: number) => {
+  const s = polarToCartesian(cx, cy, r, start)
+  const e = polarToCartesian(cx, cy, r, end)
+  const largeArc = end - start > 180 ? 1 : 0
+  return `M ${s.x} ${s.y} A ${r} ${r} 0 ${largeArc} 1 ${e.x} ${e.y}`
+}
+
+let pieCursor = 0
+const pieSlices = data.map((item, i) => {
+  const angle = (item.value / (total || 1)) * 360
+  const start = pieCursor
+  const end = pieCursor + angle
+  pieCursor = end
+  return { item, i, start, end }
+})
+
+// Build line chart SVG points
+const LINE_W = 400
+const LINE_H = 160
+const LINE_PAD = 32
+const linePoints = data.map((d, i) => {
+  const x = data.length < 2
+    ? LINE_PAD
+    : LINE_PAD + (i / (data.length - 1)) * (LINE_W - LINE_PAD * 2)
+  const y = LINE_H - LINE_PAD - ((d.value / (max || 1)) * (LINE_H - LINE_PAD * 2))
+  return { x, y, d, i }
+})
+const linePath = linePoints.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ")
+const areaPath = linePoints.length > 0
+  ? linePath +
+    ` L ${linePoints[linePoints.length - 1]!.x} ${LINE_H - LINE_PAD}` +
+    ` L ${linePoints[0]!.x} ${LINE_H - LINE_PAD} Z`
+  : ""
+---
+
+<div class:list={[classes.root, `min-h-[${height}px]`]} data-slot="root" {...rest}>
+  {title && <div class={classes.title} data-slot="title">{title}</div>}
+
+  {/* Bar Chart */}
+  {type === "bar" && (
+    <div class:list={[classes.container, `h-[${height - 60}px] gap-1.5 items-end`]} data-slot="container">
+      {data.map((item, i) => {
+        const pct = max > 0 ? (item.value / max) * 100 : 0
+        return (
+          <div class="flex flex-col items-center gap-1 flex-1 group">
+            <span class="text-[10px] text-muted font-mono opacity-0 group-hover:opacity-100 transition-opacity">
+              {item.value}
+            </span>
+            <div class:list={[classes.bar, "h-full w-full overflow-hidden !bg-transparent"]} title={`${item.label}: ${item.value}`}>
+              <svg class="h-full w-full overflow-visible" viewBox="0 0 20 100" preserveAspectRatio="none">
+                <rect x="0" y={100 - pct} width="20" height={pct} fill={getColor(item, i)} rx="2" />
+              </svg>
+            </div>
+            <span class={classes.axis}>{item.label}</span>
+          </div>
+        )
+      })}
+    </div>
+  )}
+
+  {/* Line / Area Chart */}
+  {(type === "line" || type === "area") && (
+    <div class:list={["relative w-full rla-chart-line-wrap", `h-[${height - 60}px]`]}>
+      <svg
+        class={classes.svg}
+        viewBox={`0 0 ${LINE_W} ${LINE_H}`}
+        preserveAspectRatio="none"
+        aria-label={title ?? "Line chart"}
+      >
+        {/* Grid lines */}
+        {[0, 0.25, 0.5, 0.75, 1].map(t => {
+          const y = LINE_PAD + t * (LINE_H - LINE_PAD * 2)
+          return <line x1={LINE_PAD} y1={y} x2={LINE_W - LINE_PAD} y2={y} stroke="currentColor" stroke-opacity="0.08" />
+        })}
+
+        {/* Area fill */}
+        {type === "area" && (
+          <path d={areaPath} fill={palette[0]!} fill-opacity="0.15" />
+        )}
+
+        {/* Line */}
+        <path d={linePath} class={classes.line} stroke={palette[0]!} stroke-width="2.5" />
+
+        {/* Dots */}
+        {linePoints.map(p => (
+          <circle
+            cx={p.x}
+            cy={p.y}
+            r="4"
+            fill={getColor(p.d, p.i)}
+            stroke="white"
+            stroke-width="1.5"
+          >
+            <title>{p.d.label}: {p.d.value}</title>
+          </circle>
+        ))}
+
+        {/* X axis labels */}
+        {linePoints.map(p => (
+          <text x={p.x} y={LINE_H - 4} text-anchor="middle" class={classes.axis}>{p.d.label}</text>
+        ))}
+      </svg>
+    </div>
+  )}
+
+  {/* Pie / Donut Chart */}
+  {(type === "pie" || type === "donut") && (
+    <div class:list={["flex items-center gap-6 justify-center rla-chart-pie-wrap", `h-[${height - 60}px]`]}>
+      <svg
+        viewBox="0 0 200 200"
+        class="h-full w-auto max-h-48"
+        aria-label={title ?? "Pie chart"}
+      >
+        {pieSlices.map(({ item, i, start, end }) => {
+          const isFullCircle = Math.abs(end - start - 360) < 0.01
+          const d = isFullCircle
+            ? `M ${PIE_CX} ${PIE_CY - PIE_R} A ${PIE_R} ${PIE_R} 0 1 1 ${PIE_CX - 0.001} ${PIE_CY - PIE_R} Z`
+            : describeArc(PIE_CX, PIE_CY, PIE_R, start, end) +
+              ` L ${PIE_CX} ${PIE_CY} Z`
+          return (
+            <path
+              d={d}
+              fill={getColor(item, i)}
+              class="transition-opacity hover:opacity-85 cursor-pointer"
+            >
+              <title>{item.label}: {item.value}</title>
+            </path>
+          )
+        })}
+        {type === "donut" && (
+          <circle cx={PIE_CX} cy={PIE_CY} r={DONUT_INNER_R} fill="var(--rl-neutral-50)" />
+        )}
+      </svg>
+
+      {/* Legend */}
+      <div class="flex flex-col gap-1.5">
+        {data.map((item, i) => (
+          <div class="flex items-center gap-2 text-xs text-muted">
+            <svg class="size-3 shrink-0" viewBox="0 0 10 10">
+              <rect width="10" height="10" rx="2" fill={getColor(item, i)} />
+            </svg>
+            <span>{item.label}</span>
+            <span class="ml-1 font-mono text-highlighted">{item.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )}
+
+  {/* Custom slot for fully custom chart content */}
+  <slot />
+
+  {/* Legend row for bar/line */}
+  {(type === "bar" || type === "line" || type === "area") && data.length > 0 && (
+    <div class={classes.legend} data-slot="legend">
+      {data.map((item, i) => (
+        <div class="flex items-center gap-1.5">
+          <svg class="size-2.5 shrink-0" viewBox="0 0 10 10">
+            <circle cx="5" cy="5" r="5" fill={getColor(item, i)} />
+          </svg>
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </div>
+  )}
+</div>

package/src/components/dashboard-navbar/RLADashboardNavbar.astro

@@ -18,7 +18,7 @@ const Tag = as;
 const classes = dashboardNavbarTheme(Astro.props);
 ---
 
-<Tag class:list={[classes.root]} data-slot="root" style="height: 4rem; min-height: 4rem; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;" {...rest}>
+<Tag class:list={[classes.root]} data-slot="root" {...rest}>
   <div data-slot="left" class={classes.left}>
     {toggle && toggleSide === "left" && (
       <button type="button" data-dashboard-toggle="mobile" class={classes.toggle + " lg:hidden"} data-slot="toggle" aria-label="Toggle sidebar">

package/src/components/dashboard-navbar/RLSDashboardNavbar.tsx

@@ -45,21 +45,7 @@ const RLSDashboardNavbar: Component<RLSDashboardNavbarProps> = (allProps) => {
   )
 
   return (
-    <Dynamic
-      component={Tag()}
-      class={resolvedClasses().root}
-      data-slot="root"
-      style={{
-        "height": "4rem",
-        "min-height": "4rem",
-        "padding": "1rem 1.5rem",
-        "display": "flex",
-        "align-items": "center",
-        "justify-content": "space-between",
-        "box-sizing": "border-box"
-      }}
-      {...rest}
-    >
+    <Dynamic component={Tag()} class={resolvedClasses().root} data-slot="root" {...rest}>
       <div data-slot="left" class={resolvedClasses().left}>
         <Show when={showToggle() && toggleSide() === "left"}>
           <button

package/src/components/dashboard-panel/RLADashboardPanel.astro

@@ -14,7 +14,7 @@ const classes = dashboardPanelTheme({
   size: false
 });
 ---
-<div class={classes.root} data-slot="root" style="flex: 1 1 0%; min-width: 0;" {...rest}>
+<div class:list={[classes.root, "flex-1 min-w-0"]} data-slot="root" {...rest}>
   <slot name="header" />
 
   <div data-slot="body" class={classes.body}>

package/src/components/dashboard-panel/RLSDashboardPanel.tsx

@@ -52,12 +52,7 @@ const RLSDashboardPanel: Component<RLSDashboardPanelProps> = (allProps) => {
 
   return (
     <>
-      <div
-        class={resolvedClasses().root}
-        data-slot="root"
-        style={{ "flex": "1 1 0%", "min-width": "0" }}
-        {...rest}
-      >
+      <div class={`${resolvedClasses().root} flex-1 min-w-0`} data-slot="root" {...rest}>
         {headerContent()}
 
         <div data-slot="body" class={resolvedClasses().body}>

package/src/components/dashboard-search/RLADashboardSearch.astro

@@ -15,7 +15,7 @@ const classes = dashboardSearchTheme({
 ---
 
 <template id="dashboard-search-template">
-  <div data-dashboard-search data-slot="modal" class={classes.modal + " fixed inset-0 z-50 flex items-start justify-center sm:pt-16"} style="display:none">
+  <div data-dashboard-search data-slot="modal" class:list={[classes.modal, "fixed inset-0 z-50 flex items-start justify-center sm:pt-16"]}>
     <div class="fixed inset-0 bg-default/80 backdrop-blur-sm" data-dashboard-search-close></div>
     <div class:list={["relative w-full bg-default border border-default sm:rounded-xl shadow-2xl overflow-hidden", classes.modal]}>
       <div class="flex items-center gap-2 border-b border-default px-4">

package/src/components/head/UIHead.astro

@@ -206,17 +206,6 @@ const {
         el.rlScrollListener = scrollListener;
         window.addEventListener('scroll', scrollListener, { passive: true });
       }
-
-      (function retry() {
-        if (!el.isConnected) return;
-        const h = getHeight(contentEl);
-        if (h !== naturalHeight) {
-          naturalHeight = h;
-          RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
-        }
-        if (h > 0 && h !== 64 && contentEl && contentEl.offsetHeight > 0) return;
-        requestAnimationFrame(retry);
-      })();
     }
 
     function startObserver() {

package/src/components/image/RLAImage.astro

@@ -136,7 +136,7 @@ const baseImageProps: Record<string, any> = {
 ---
 
 <rla-image {...rest}>
-  <div class={classes.root} data-slot="root" data-theme={theme} style={theme ? `color-scheme: ${theme};` : undefined}>
+  <div class={classes.root} data-slot="root" data-theme={theme}>
     {isFigure ? (
       <figure class={classes.figure} data-slot="figure">
         <slot name="trigger">
@@ -154,18 +154,17 @@ const baseImageProps: Record<string, any> = {
                 </picture>
               ) : hasColorMode ? (
                 <div
-                  class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-lg flex items-center justify-center"
-                  style={`--rla-img-light: url('${lightUrl}'); --rla-img-dark: url('${darkUrl}');`}
+                  class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-[inherit] flex items-center justify-center"
                 >
                   <Image
                     {...(baseImageProps as any)}
                     src={effectiveLight as any}
-                    class:list={[classes.triggerImage, "rla-img-light w-full h-full object-cover rounded-lg"]}
+                    class:list={[classes.triggerImage, "rla-img-light w-full h-full object-cover rounded-[inherit]"]}
                   />
                   <Image
                     {...(baseImageProps as any)}
                     src={effectiveDark as any}
-                    class:list={[classes.triggerImage, "rla-img-dark w-full h-full object-cover rounded-lg hidden"]}
+                    class:list={[classes.triggerImage, "rla-img-dark w-full h-full object-cover rounded-[inherit] hidden"]}
                   />
                 </div>
               ) : isFormatFallback ? (
@@ -182,7 +181,7 @@ const baseImageProps: Record<string, any> = {
               )}
             </button>
           ) : (
-            <div class="overflow-hidden rounded-lg block">
+            <div class="overflow-hidden rounded-[inherit] block">
               {isResponsive && mobileImg && desktopImg ? (
                 <picture>
                   <source media={`(max-width: ${breakpointVal - 1}px)`} srcset={mobileImg.src} />
@@ -191,18 +190,17 @@ const baseImageProps: Record<string, any> = {
                 </picture>
               ) : hasColorMode ? (
                 <div
-                  class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-lg flex items-center justify-center"
-                  style={`--rla-img-light: url('${lightUrl}'); --rla-img-dark: url('${darkUrl}');`}
+                  class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-[inherit] flex items-center justify-center"
                 >
                   <Image
                     {...(baseImageProps as any)}
                     src={effectiveLight as any}
-                    class:list={[classes.triggerImage, "rla-img-light w-full h-full object-cover rounded-lg"]}
+                    class:list={[classes.triggerImage, "rla-img-light w-full h-full object-cover rounded-[inherit]"]}
                   />
                   <Image
                     {...(baseImageProps as any)}
                     src={effectiveDark as any}
-                    class:list={[classes.triggerImage, "rla-img-dark w-full h-full object-cover rounded-lg hidden"]}
+                    class:list={[classes.triggerImage, "rla-img-dark w-full h-full object-cover rounded-[inherit] hidden"]}
                   />
                 </div>
               ) : isFormatFallback ? (
@@ -240,18 +238,17 @@ const baseImageProps: Record<string, any> = {
                 </picture>
               ) : hasColorMode ? (
                 <div
-                  class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-lg flex items-center justify-center"
-                  style={`--rla-img-light: url('${lightUrl}'); --rla-img-dark: url('${darkUrl}');`}
+                  class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-[inherit] flex items-center justify-center"
                 >
                   <Image
                     {...(baseImageProps as any)}
                     src={effectiveLight as any}
-                    class:list={[classes.triggerImage, "rla-img-light w-full h-full object-cover rounded-lg"]}
+                    class:list={[classes.triggerImage, "rla-img-light w-full h-full object-cover rounded-[inherit]"]}
                   />
                   <Image
                     {...(baseImageProps as any)}
                     src={effectiveDark as any}
-                    class:list={[classes.triggerImage, "rla-img-dark w-full h-full object-cover rounded-lg hidden"]}
+                    class:list={[classes.triggerImage, "rla-img-dark w-full h-full object-cover rounded-[inherit] hidden"]}
                   />
                 </div>
               ) : isFormatFallback ? (
@@ -268,7 +265,7 @@ const baseImageProps: Record<string, any> = {
               )}
             </button>
           ) : (
-            <div class="overflow-hidden rounded-lg block">
+            <div class="overflow-hidden rounded-[inherit] block">
               {isResponsive && mobileImg && desktopImg ? (
                 <picture>
                   <source media={`(max-width: ${breakpointVal - 1}px)`} srcset={mobileImg.src} />
@@ -277,18 +274,17 @@ const baseImageProps: Record<string, any> = {
                 </picture>
               ) : hasColorMode ? (
                 <div
-                  class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-lg flex items-center justify-center"
-                  style={`--rla-img-light: url('${lightUrl}'); --rla-img-dark: url('${darkUrl}');`}
+                  class="rla-image-color-mode w-full h-full relative overflow-hidden rounded-[inherit] flex items-center justify-center"
                 >
                   <Image
                     {...(baseImageProps as any)}
                     src={effectiveLight as any}
-                    class:list={[classes.triggerImage, "rla-img-light w-full h-full object-cover rounded-lg"]}
+                    class:list={[classes.triggerImage, "rla-img-light w-full h-full object-cover rounded-[inherit]"]}
                   />
                   <Image
                     {...(baseImageProps as any)}
                     src={effectiveDark as any}
-                    class:list={[classes.triggerImage, "rla-img-dark w-full h-full object-cover rounded-lg hidden"]}
+                    class:list={[classes.triggerImage, "rla-img-dark w-full h-full object-cover rounded-[inherit] hidden"]}
                   />
                 </div>
               ) : isFormatFallback ? (
@@ -327,7 +323,6 @@ const baseImageProps: Record<string, any> = {
             ) : hasColorMode ? (
               <div
                 class="rla-image-color-mode max-w-full max-h-[65vh] relative flex items-center justify-center overflow-hidden"
-                style={`--rla-img-light: url('${lightUrl}'); --rla-img-dark: url('${darkUrl}');`}
               >
                 <img
                   src={lightUrl}