layerchart 2.0.0-next.38 → 2.0.0-next.39

package/dist/components/MonthPath.svelte

@@ -30,10 +30,9 @@
 </script>
 
 <script lang="ts">
-  import { timeWeek, timeMonth, timeYear } from 'd3-time';
+  import { timeWeek, timeYear } from 'd3-time';
   import { cls } from '@layerstack/tailwind';
   import { endOfInterval } from '@layerstack/utils';
-  import { layerClass } from '../utils/attributes.js';
   import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
 
   let {
@@ -75,6 +74,18 @@
   bind:pathRef
   {pathData}
   fill="none"
-  class={cls(layerClass('month-path'), 'stroke-surface-content/20', className)}
+  class={cls('lc-month-path', className)}
   {...restProps}
 />
+
+<style>
+  @layer components {
+    :global(:where(.lc-month-path)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+    }
+  }
+</style>

package/dist/components/MotionPath.svelte

@@ -100,7 +100,7 @@
     {fill}
     {rotate}
     bind:this={ref}
-    {...extractLayerProps(restProps, 'motion-path')}
+    {...extractLayerProps(restProps, 'lc-motion-path')}
   >
     <mpath href="#{pathId}" />
   </animateMotion>

package/dist/components/Pattern.svelte

@@ -154,7 +154,7 @@
     const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
     for (const line of lineDefs) {
       // const spacing = Math.abs(line.spacing);
-      const stroke = line.color ?? 'var(--color-surface-content)';
+      const stroke = line.color ?? 'var(--color-surface-content, currentColor)';
       const strokeWidth = line.width ?? 1;
       const opacity = line.opacity ?? 1;
 
@@ -217,7 +217,7 @@
             cx: size / 4,
             cy: size / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           },
           {
@@ -225,7 +225,7 @@
             cx: (size * 3) / 4,
             cy: (size * 3) / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           }
         );
@@ -235,7 +235,7 @@
           cx: size / 2,
           cy: size / 2,
           r: circle.radius ?? 1,
-          fill: circle.color ?? 'var(--color-surface-content)',
+          fill: circle.color ?? 'var(--color-surface-content, currentColor)',
           opacity: circle.opacity ?? 1,
         });
       }
@@ -265,7 +265,7 @@
       {width}
       {height}
       patternUnits="userSpaceOnUse"
-      {...extractLayerProps(restProps, 'pattern')}
+      {...extractLayerProps(restProps, 'lc-pattern')}
     >
       {#if patternContent}
         {@render patternContent?.()}

package/dist/components/Pie.svelte

@@ -81,7 +81,6 @@
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   /*
     TODO:
@@ -140,7 +139,7 @@
 {:else}
   {#each arcs as arc}
     <Arc
-      class={layerClass('pie-arc')}
+      class="lc-pie-arc"
       startAngle={arc.startAngle}
       endAngle={arc.endAngle}
       padAngle={arc.padAngle}

package/dist/components/Points.svelte

@@ -141,7 +141,7 @@
       {stroke}
       {strokeWidth}
       {opacity}
-      {...extractLayerProps(restProps, 'point')}
+      {...extractLayerProps(restProps, 'lc-point')}
     />
   {/each}
 {/if}

package/dist/components/Polygon.svelte

@@ -144,7 +144,6 @@
   import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
   import { polygon } from '../utils/shape.js';
   import { roundedPolygonPath } from '../utils/path.js';
 
@@ -234,7 +233,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: cls(layerClass('polygon'), fill == null && 'fill-surface-content', className),
+            classes: cls('lc-polygon', className),
           }
     );
   }
@@ -278,8 +277,33 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(layerClass('polygon'), fill == null && 'fill-surface-content', className)}
+    class={cls('lc-polygon', className)}
     {...restProps}
     bind:this={ref}
   />
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-polygon)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-polygon):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-polygon):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/RadialGradient.svelte

@@ -89,7 +89,7 @@
   import { parsePercent } from '../utils/math.js';
   import { getChartContext } from './Chart.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
 
   const uid = $props.id();
@@ -167,12 +167,12 @@
       {spreadMethod}
       gradientTransform={transform}
       gradientUnits={units}
-      {...extractLayerProps({ ...restProps, class: className }, 'radial-gradient')}
+      {...extractLayerProps({ ...restProps, class: className }, 'lc-radial-gradient')}
     >
       {#if stopsContent}
         {@render stopsContent()}
       {:else if stops}
-        {@const stopClass = cls(layerClass('radial-gradient-stop'), className)}
+        {@const stopClass = cls('lc-radial-gradient-stop', className)}
         {#each stops as stop, i}
           {#if Array.isArray(stop)}
             <stop offset={stop[0]} stop-color={stop[1]} class={stopClass} />

package/dist/components/Rect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createMotion, parseMotionProp, type MotionProp } from '../utils/motion.svelte.js';
   import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
@@ -39,7 +39,8 @@
   } & CommonStyleProps;
 
   export type RectProps = RectPropsWithoutHTML &
-    Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+    Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -49,7 +50,6 @@
   import { getRenderContext } from './Chart.svelte';
   import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
 
   let {
     height,
@@ -107,7 +107,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-rect', className),
           }
     );
   }
@@ -155,7 +155,7 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(layerClass('rect'), fill == null && 'fill-surface-content', className)}
+    class={cls('lc-rect', className)}
     {...restProps}
     {onclick}
     {ondblclick}
@@ -166,4 +166,54 @@
     {onpointerout}
     bind:this={ref}
   />
+{:else if renderCtx === 'html'}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    style:position="absolute"
+    style:left="{motionX.current}px"
+    style:top="{motionY.current}px"
+    style:width="{motionWidth.current}px"
+    style:height="{motionHeight.current}px"
+    style:background={fill}
+    style:background-opacity={opacity}
+    style:border-width="{strokeWidth}px"
+    style:border-style="solid"
+    style:border-color={stroke}
+    style:border-radius="{restProps.rx}px"
+    class={cls('lc-rect', className)}
+    {...restProps as any}
+    {onclick}
+    {ondblclick}
+    {onpointerenter}
+    {onpointermove}
+    {onpointerleave}
+    {onpointerover}
+    {onpointerout}
+  ></div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-rect)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-rect, svg.lc-rect):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-rect, svg.lc-rect):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-rect):not([background])) {
+      background: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-rect):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/Rect.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 import { type MotionProp } from '../utils/motion.svelte.js';
 export type RectPropsWithoutHTML = {
@@ -30,7 +30,7 @@ export type RectPropsWithoutHTML = {
     ref?: SVGRectElement;
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 } & CommonStyleProps;
-export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> & CommonEvents;
 declare const Rect: import("svelte").Component<RectProps, {}, "ref">;
 type Rect = ReturnType<typeof Rect>;
 export default Rect;

package/dist/components/RectClipPath.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
-  import type { Without } from '../utils/types.js';
+  import type { CommonEvents, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
 
@@ -58,7 +58,8 @@
     Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
 
   export type RectClipPathProps = RectClipPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -81,7 +82,7 @@
 
 <ClipPath {id} {disabled}>
   {#snippet clip()}
-    <Rect {x} {y} {...extractLayerProps(restProps, 'clip-path-rect')} />
+    <Rect {x} {y} {...extractLayerProps(restProps, 'lc-clip-path-rect')} />
   {/snippet}
   {#snippet children({ url })}
     {@render childrenProp?.({ id, url })}

package/dist/components/RectClipPath.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type RectPropsWithoutHTML } from './Rect.svelte';
-import type { Without } from '../utils/types.js';
+import type { CommonEvents, Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 export type BaseRectClipPathPropsWithoutHTML = {
@@ -48,7 +48,7 @@ export type BaseRectClipPathPropsWithoutHTML = {
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 };
 export type RectClipPathPropsWithoutHTML = BaseRectClipPathPropsWithoutHTML & Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
-export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> & CommonEvents;
 import type { MotionProp } from '../utils/motion.svelte.js';
 declare const RectClipPath: import("svelte").Component<RectClipPathProps, {}, "">;
 type RectClipPath = ReturnType<typeof RectClipPath>;

package/dist/components/Rule.svelte

@@ -61,7 +61,6 @@
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
   import { accessor, chartDataArray, type Accessor } from '../utils/common.js';
-  import { layerClass } from '../utils/attributes.js';
   import { isScaleBand, isScaleNumeric } from '../utils/scales.svelte.js';
 
   let {
@@ -188,9 +187,9 @@
   // $inspect({ lines });
 </script>
 
-<Group class={layerClass('rule-g')}>
+<Group class="lc-rule-g">
   {#each lines as line}
-    {@const stroke = line.stroke}
+    {@const stroke = line.stroke ?? strokeProp}
 
     {#if ctx.radial}
       {#if line.axis === 'x'}
@@ -203,23 +202,10 @@
           {x2}
           {y2}
           {stroke}
-          class={cls(
-            layerClass('rule-x-radial-line'),
-            !stroke && 'stroke-surface-content/10',
-            className
-          )}
+          class={cls('lc-rule-x-radial-line', className)}
         />
       {:else if line.axis === 'y'}
-        <Circle
-          r={line.y1}
-          {stroke}
-          class={cls(
-            layerClass('rule-y-radial-circle'),
-            !stroke && 'stroke-surface-content/50',
-            'fill-none',
-            className
-          )}
-        />
+        <Circle r={line.y1} {stroke} class={cls('lc-rule-y-radial-circle', className)} />
       {/if}
     {:else}
       <Line
@@ -229,12 +215,33 @@
         x2={line.x2}
         y2={line.y2}
         {stroke}
-        class={cls(
-          layerClass(line.axis === 'x' ? 'rule-x-line' : 'rule-y-line'),
-          !stroke && 'stroke-surface-content/50',
-          className
-        )}
+        class={cls(line.axis === 'x' ? 'lc-rule-x-line' : 'lc-rule-y-line', className)}
       />
     {/if}
   {/each}
 </Group>
+
+<style>
+  @layer components {
+    /* TODO: better way to handle this without affecting other components? */
+    /* Could add a layer between "components" and "base" but would require more setup (and not alignw with TW layers) */
+    :global(
+      :where(
+        .lc-rule-x-line,
+        .lc-rule-y-line,
+        .lc-rule-x-radial-line,
+        .lc-rule-y-radial-circle
+      ):not([class*='lc-axis'], [class*='lc-grid'])
+    ) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-rule-y-radial-circle)) {
+      --fill-color: none;
+    }
+  }
+</style>

package/dist/components/Spline.svelte

@@ -132,7 +132,6 @@
   import { getChartContext } from './Chart.svelte';
   import { createKey } from '../utils/key.svelte.js';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const ctx = getChartContext();
 
@@ -274,7 +273,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-spline-path', className),
           }
     );
   }
@@ -362,12 +361,7 @@
     <path
       d={tweenedState.current}
       {...restProps}
-      class={cls(
-        layerClass('spline-path'),
-        !fill && 'fill-none',
-        !stroke && 'stroke-surface-content',
-        className
-      )}
+      class={cls('lc-spline-path', className)}
       {fill}
       fill-opacity={fillOpacity}
       {stroke}
@@ -384,7 +378,7 @@
     <MarkerWrapper id={markerEndId} marker={markerEnd} />
 
     {#if startContent && startPoint}
-      <Group x={startPoint.x} y={startPoint.y} class={layerClass('spline-g-start')}>
+      <Group x={startPoint.x} y={startPoint.y} class="lc-spline-g-start">
         {@render startContent({
           point: startPoint,
           value: {
@@ -396,7 +390,7 @@
     {/if}
 
     {#if endContent && endPoint.current}
-      <Group x={endPoint.current.x} y={endPoint.current.y} class={layerClass('spline-g-end')}>
+      <Group x={endPoint.current.x} y={endPoint.current.y} class="lc-spline-g-end">
         {@render endContent({
           point: endPoint.current,
           value: {
@@ -408,3 +402,28 @@
     {/if}
   {/key}
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-spline-path)) {
+      --fill-color: none;
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-spline-path, svg.lc-spline-path):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-spline-path, svg.lc-spline-path):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-spline-path):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-spline-path):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/Text.svelte

@@ -188,7 +188,6 @@
   import { getComputedStyles, renderText, type ComputedStylesOptions } from '../utils/canvas.js';
 
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
   import { degreesToRadians } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
 
@@ -411,7 +410,7 @@
             paintOrder: 'stroke',
             textAnchor,
           },
-          classes: cls(fill === undefined && 'fill-surface-content', className),
+          classes: cls('lc-text', className),
         };
 
     const computedStyles = getComputedStyles(ctx.canvas, styles);
@@ -473,13 +472,7 @@
 {#if renderCtx === 'svg'}
   <!-- `overflow: visible` allow contents to be shown outside element -->
   <!-- `paint-order: stroke` supports stroke outlining text  -->
-  <svg
-    x={dx}
-    y={dy}
-    {...svgProps}
-    class={cls(layerClass('text-svg'), 'overflow-visible [paint-order:stroke]', svgProps?.class)}
-    bind:this={svgRef}
-  >
+  <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', svgProps?.class]} bind:this={svgRef}>
     {#if path}
       <defs>
         {#key path}
@@ -496,14 +489,14 @@
         stroke-width={strokeWidth}
         {opacity}
         transform={transformProp}
-        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
+        class={['lc-text', className]}
       >
         <textPath
           style="text-anchor: {textAnchor};"
           dominant-baseline={dominantBaseline}
           href="#{pathId}"
           {startOffset}
-          class={cls(layerClass('text-path'))}
+          class="lc-text-path"
         >
           {wordsByLines.map((line) => line.words.join(' ')).join()}
         </textPath>
@@ -522,13 +515,13 @@
         {stroke}
         stroke-width={strokeWidth}
         {opacity}
-        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
+        class={['lc-text', className]}
       >
         {#each wordsByLines as line, index}
           <tspan
             x={motionX.current}
             dy={index === 0 ? startDy : getPixelValue(lineHeight)}
-            class={layerClass('text-tspan')}
+            class="lc-text-tspan"
           >
             {line.words.join(' ')}
           </tspan>
@@ -536,4 +529,57 @@
       </text>
     {/if}
   </svg>
+{:else if renderCtx === 'html'}
+  {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
+  {@const translateY =
+    verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
+  <!-- TODO: How best to handle dx/dy when adjusted for svg style issues? -->
+  <!-- style:line-height={lineHeight} -->
+  <!-- TODO: How to handle fill-/stroke- vs bg-/text-/border- colors? -->
+  <div
+    style:position="absolute"
+    style:left="{dx + motionX.current}px"
+    style:top="{dy + motionY.current}px"
+    style:transform="translate({translateX}, {translateY}) rotate({rotate ?? 0}deg)"
+    style:transform-origin="{verticalAnchor === 'middle'
+      ? 'center'
+      : verticalAnchor === 'end'
+        ? 'bottom'
+        : 'top'}
+    {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
+    class={['lc-text', className]}
+  >
+    {textValue}
+  </div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-text)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    :global(:where(.lc-text-svg)) {
+      overflow: visible;
+      paint-order: stroke;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-text, svg.lc-text):not([fill])) {
+      color: var(--fill-color);
+      fill: currentColor;
+    }
+    :global(:where(.lc-layout-svg .lc-text, svg.lc-text):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-text):not([background-color])) {
+      color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-text):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/TileImage.svelte

@@ -135,7 +135,7 @@
     y={(y + ty) * scale - 0.5}
     width={scale + 1}
     height={scale + 1}
-    {...extractLayerProps(restProps, 'tile-image-lower')}
+    {...extractLayerProps(restProps, 'lc-tile-image-lower')}
   />
   <image
     {href}
@@ -143,7 +143,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    {...extractLayerProps(restProps, 'tile-image')}
+    {...extractLayerProps(restProps, 'lc-tile-image')}
   />
 {/key}
 {#if debug}
@@ -152,7 +152,7 @@
     y={(y + ty) * scale}
     width={scale}
     height={scale}
-    class="stroke-danger/50 fill-none"
+    class="lc-tile-image-debug-rect"
   />
   <Text
     x={(x + tx) * scale}
@@ -161,6 +161,21 @@
     dx={2}
     dy={-2}
     value="{x}-{y}-{z}"
-    class="text-[8px] fill-black/50"
+    class="lc-tile-image-debug-text"
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-tile-image-debug-rect)) {
+      fill: none;
+      stroke: var(--color-danger, red);
+    }
+
+    :global(:where(.lc-tile-image-debug-text)) {
+      --fill-color: var(--color-danger, red);
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+</style>