@rimelight/ui 0.0.43 → 0.0.44

package/src/components/dashboard-sidebar/RLADashboardSidebar.astro

@@ -7,6 +7,7 @@ const {
   side = "left",
   collapsible = false,
   collapsed = false,
+  class: className,
   ...rest
 } = Astro.props as DashboardSidebarProps
 
@@ -27,9 +28,9 @@ const defaultWidth = "16rem";
   data-slot="root"
   class={classes.root}
   {...rest}
-  style={`--width: ${defaultWidth}; --collapsed-width: ${collapsedWidth}`}
+  style={`width: ${collapsible && collapsed ? collapsedWidth : defaultWidth}; min-width: ${collapsible && collapsed ? collapsedWidth : defaultWidth}; flex-shrink: 0; --width: ${defaultWidth}; --collapsed-width: ${collapsedWidth}`}
 >
-  <div data-slot="header" class={classes.header}>
+  <div data-slot="header" class={classes.header} style="height: 4rem; min-height: 4rem; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; box-sizing: border-box;">
     <slot name="header" />
   </div>
 
@@ -79,8 +80,10 @@ const defaultWidth = "16rem";
     const collapseSidebar = (val?: boolean) => {
       if (!collapsible) return;
       const isCollapsed = val !== undefined ? val : sidebar.dataset.collapsed !== 'true';
-      sidebar.dataset.collapsed = isCollapsed ? 'true' : 'false';
-      sidebar.style.setProperty('--width', isCollapsed ? '4rem' : '16rem');
+      const w = isCollapsed ? '4rem' : '16rem';
+      sidebar.style.width = w;
+      sidebar.style.minWidth = w;
+      sidebar.style.setProperty('--width', w);
 
       document.querySelectorAll('[data-dashboard-toggle="collapse"]').forEach(btn => {
         btn.querySelectorAll('[data-dashboard-collapse-icon]').forEach(el => {

package/src/components/dashboard-sidebar/dashboard-sidebar.theme.ts

@@ -3,11 +3,12 @@ import { defineTheme } from "../../resolver"
 export const dashboardSidebarTheme = defineTheme("dashboard-sidebar", {
   slots: ["root", "header", "body", "footer", "toggle", "handle", "content", "overlay"],
   base: {
-    root: "group relative hidden lg:flex flex-col h-full min-h-0 min-w-16 w-(--width) shrink-0 transition-[width] duration-300",
+    root: "group relative flex flex-col h-full min-h-0 min-w-16 w-64 shrink-0 transition-[width] duration-300",
     header:
-      "h-(--rl-header-height) shrink-0 flex items-center gap-1.5 px-3 group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:gap-0 group-data-[collapsed=true]:px-0",
-    body: "flex flex-col gap-1 flex-1 overflow-y-auto px-3 py-2",
-    footer: "shrink-0 flex items-center gap-1.5 px-3 py-2 group-data-[collapsed=true]:px-0",
+      "h-16 min-h-16 shrink-0 flex items-center gap-3 px-6 py-4 border-b border-default group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:gap-0 group-data-[collapsed=true]:px-0",
+    body: "flex flex-col gap-1 flex-1 overflow-y-auto px-3 py-3",
+    footer:
+      "shrink-0 flex items-center gap-1.5 px-3 py-3 group-data-[collapsed=true]:px-0 border-t border-default/40",
     toggle: "",
     handle: "",
     content: "lg:hidden",
@@ -31,7 +32,7 @@ export const dashboardSidebarTheme = defineTheme("dashboard-sidebar", {
     },
     collapsed: {
       true: {
-        root: "w-(--collapsed-width) overflow-hidden",
+        root: "w-16 w-[var(--collapsed-width,4rem)] overflow-hidden",
         body: "overflow-hidden"
       }
     }

package/src/components/dashboard-sidebar-collapse/RLADashboardSidebarCollapse.astro

@@ -6,6 +6,7 @@ import RLAIcon from "../icon/RLAIcon.astro"
 
 const {
   icon = "i-lucide-panel-left",
+  class: className,
   ...rest
 } = Astro.props as DashboardSidebarCollapseProps
 

package/src/components/drawer/RLADrawer.astro

@@ -48,7 +48,7 @@ const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
       data-dialog-close={dialogId}
       aria-label="Close drawer"
     >
-      <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/dropdown-menu/dropdown-menu.theme.ts

@@ -26,7 +26,7 @@ export const dropdownMenuTheme = defineTheme("dropdown-menu", {
       "absolute z-50 mt-1 min-w-32 rounded-md border border-default bg-elevated p-1 text-highlighted shadow-md ring-1 ring-black/5 focus:outline-none flex flex-col gap-0.5",
     viewport: "flex flex-col gap-0.5",
     group: "p-0.5 isolate flex flex-col gap-0.5",
-    item: "group relative flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50 select-none transition-colors",
+    item: "group relative flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accented hover:text-highlighted cursor-pointer disabled:pointer-events-none disabled:opacity-50 select-none transition-colors",
     itemLeadingIcon: "shrink-0 size-4 text-muted group-hover:text-highlighted",
     itemLeadingAvatar: "shrink-0 size-4 rounded-full object-cover",
     itemLabel: "truncate flex-1 text-left",
@@ -34,7 +34,7 @@ export const dropdownMenuTheme = defineTheme("dropdown-menu", {
     itemTrailingKbds:
       "hidden lg:inline-flex items-center gap-0.5 text-[10px] font-mono opacity-70 bg-muted px-1 rounded border border-default",
     shortcut: "ml-auto text-xs tracking-widest text-muted",
-    separator: "-mx-1 my-1 h-px bg-border",
+    separator: "-mx-1 my-1 h-px bg-neutral-200",
     label: "px-2 py-1.5 text-xs font-semibold tracking-wider text-muted uppercase",
     arrow: "absolute -top-1.5 left-4 size-3 rotate-45 border-l border-t border-default bg-elevated"
   },

package/src/components/footer/RLAFooter.astro

@@ -6,6 +6,7 @@ import { footerTheme } from "./footer.theme"
 
 const {
   contain = false,
+  theme,
   ...rest
 } = Astro.props as FooterProps
 
@@ -16,6 +17,7 @@ const classes = footerTheme(Astro.props)
   class:list={[classes.root]}
   data-slot="root"
   data-contain={contain ? "true" : "false"}
+  data-theme={theme}
   {...rest}
 >
   <div class:list={[classes.container]} data-slot="container">

package/src/components/footer/footer.theme.ts

@@ -19,14 +19,6 @@ export const footerTheme = defineTheme("footer", {
       false: {
         container: "w-full"
       }
-    },
-    theme: {
-      dark: {
-        root: "rl-dark"
-      },
-      light: {
-        root: "rl-light"
-      }
     }
   },
   defaultVariants: {

package/src/components/gamepad/RLAGamepad.astro

@@ -15,7 +15,7 @@ interface Props {
 const {
   highlightedButtons = [],
   groups = [],
-  highlightColor = 'var(--color-primary-500, #00c16a)',
+  highlightColor = 'var(--rl-primary-500)',
   backgroundColor = 'transparent'
 } = Astro.props
 

package/src/components/head/UIHead.astro

@@ -22,8 +22,7 @@ const {
 
     function applyTheme(doc: any) {
       var pref = getThemePreference();
-      doc.documentElement.classList.toggle('dark',  pref === 'dark');
-      doc.documentElement.classList.toggle('light', pref === 'light');
+      doc.documentElement.setAttribute('data-theme', pref);
     }
 
     applyTheme(document);

package/src/components/header/header.theme.ts

@@ -6,7 +6,7 @@ export const headerTheme = defineTheme("header", {
     root: "w-full",
     content: "w-full",
     container:
-      "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-xs sm:px-md md:px-xl lg:px-xl",
+      "flex flex-row items-center justify-between gap-xs h-16 md:h-18 px-xs sm:px-md md:px-xl lg:px-xl",
     left: "flex-1 min-w-0 flex items-center justify-start",
     center: "flex-none flex items-center justify-center mx-4",
     right: "flex-1 min-w-0 flex items-center justify-end"

package/src/components/icon/RLAIcon.astro

@@ -1,10 +1,8 @@
 ---
-import { resolveIcon } from "./resolver"
+import { resolveIcon } from "../../icons"
 import type { IconProps } from "./icon"
 import { iconTheme } from "./icon.theme"
 
-
-
 const {
   name,
   ...rest
@@ -21,8 +19,7 @@ const resolved = resolveIcon(name)
   {...rest}
 >
   {resolved.isClass ? (
-    <span class={resolved.content} />
-  ) : (
+    <span class:list={[resolved.content, "block size-full"]} />  ) : (
     <Fragment set:html={resolved.content} />
   )}
 </span>

package/src/components/icon/RLSIcon.tsx

@@ -1,5 +1,5 @@
 import { createMemo, splitProps, type Component } from "solid-js"
-import { resolveIcon } from "./resolver"
+import { resolveIcon } from "../../icons"
 import type { IconProps } from "./icon"
 import { iconTheme } from "./icon.theme"
 
@@ -16,7 +16,7 @@ const RLSIcon: Component<IconProps> = (allProps) => {
   return (
     <span class={classes().root} data-slot="icon" aria-hidden="true" {...rest}>
       {resolved().isClass ? (
-        <span class={resolved().content} />
+        <span class={`${resolved().content} size-full`} />
       ) : (
         <span innerHTML={resolved().content} />
       )}

package/src/components/icon/RLVIcon.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue"
-import { resolveIcon } from "./resolver"
+import { resolveIcon } from "../../icons"
 import type { IconProps } from "./icon"
 import { iconTheme } from "./icon.theme"
 
-defineOptions({ name: "RLVIcon" })
+defineOptions({ name: "RLVIcon", inheritAttrs: false })
 
 const attrs = useAttrs()
 
@@ -23,8 +23,20 @@ const resolved = computed(() => resolveIcon(props.name))
 </script>
 
 <template>
-  <span v-bind="attrs" :class="resolvedClasses.root" data-slot="icon" aria-hidden="true">
-    <span v-if="resolved.isClass" :class="resolved.content" />
-    <span v-else v-html="resolved.content" />
-  </span>
+  <span
+    v-if="resolved.isClass"
+    v-bind="attrs"
+    :class="resolvedClasses.root"
+    data-slot="icon"
+    aria-hidden="true"
+    ><span :class="[resolved.content, 'size-full']"
+  /></span>
+  <span
+    v-else
+    v-bind="attrs"
+    :class="resolvedClasses.root"
+    data-slot="icon"
+    aria-hidden="true"
+    v-html="resolved.content"
+  />
 </template>

package/src/components/icon/icon.theme.ts

@@ -3,7 +3,7 @@ import { defineTheme } from "../../resolver"
 export const iconTheme = defineTheme("icon", {
   slots: ["root"],
   base: {
-    root: "shrink-0 inline-flex items-center justify-center align-middle leading-none"
+    root: "shrink-0 inline-block align-middle leading-none"
   },
   variants: {
     size: {

package/src/components/image/image.theme.ts

@@ -23,7 +23,7 @@ export const imageTheme = defineTheme("image", {
     download:
       "inline-flex items-center justify-center rounded-md font-medium transition-colors outline-none h-9 px-4 py-2 text-sm gap-2 text-primary-500 hover:bg-primary-500/10 active:bg-primary-500/10",
     closeButton:
-      "inline-flex items-center justify-center size-8 rounded-full bg-default/80 hover:bg-accent text-muted hover:text-highlighted transition-colors"
+      "inline-flex items-center justify-center size-8 rounded-full bg-default/80 hover:bg-accented text-muted hover:text-highlighted transition-colors"
   },
   variants: {},
   defaultVariants: {}

package/src/components/input/RLAInput.astro

@@ -15,6 +15,7 @@ const {
   error = false,
   leadingIcon,
   trailingIcon,
+  theme,
   ...rest
 } = Astro.props as InputProps
 
@@ -25,7 +26,7 @@ const classes = inputTheme({
   error: !!error
 });
 ---
-<div class={classes.root} data-slot="root">
+<div class={classes.root} data-slot="root" data-theme={theme}>
   {(leadingIcon || Astro.slots.has("leading")) && (
     <span class={classes.leading} data-slot="leading">
       {leadingIcon ? <span class={leadingIcon} /> : <slot name="leading" />}

package/src/components/input/input.theme.ts

@@ -29,10 +29,6 @@ export const inputTheme = defineTheme("input", {
     },
     error: {
       true: { root: "border-error-500 focus-within:ring-error-500/50" }
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   defaultVariants: {

package/src/components/input-menu/RLAInputMenu.astro

@@ -40,7 +40,7 @@ const initialLabel = selectedItem ? selectedItem.label : ""
         data-inputMenu-trigger
       >
         <span data-inputMenu-value>{initialLabel || placeholder}</span>
-        <RLAIcon name="chevronsUpDown" class="opacity-50" />
+        <RLAIcon name="i-rl-chevronsUpDown" class="opacity-50" />
       </button>
 
       <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
@@ -60,7 +60,7 @@ const initialLabel = selectedItem ? selectedItem.label : ""
               data-inputMenu-item
             >
               <span class={classes.itemText}>{item.label}</span>
-              <RLAIcon name="check" class={classes.itemIcon + " hidden"} data-check-icon />
+              <RLAIcon name="i-rl-check" class={classes.itemIcon + " hidden"} data-check-icon />
             </div>
           ))}
         </div>

package/src/components/input-menu/input-menu.theme.ts

@@ -11,7 +11,7 @@ export const inputMenuTheme = defineTheme("input-menu", {
       "flex h-9 w-full rounded-md border border-default bg-transparent px-3 py-1 text-sm shadow-sm transition-all placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
     content:
       "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-elevated p-1 text-highlighted shadow-md transition-all w-full mt-1 max-h-60 overflow-y-auto",
-    item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accented hover:text-highlighted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
     itemText: "truncate",
     itemIcon: "ml-auto size-4"
   },

package/src/components/input-rating/input-rating.theme.ts

@@ -5,7 +5,7 @@ export const inputRatingTheme = defineTheme("input-rating", {
   base: {
     root: "inline-flex select-none",
     item: [
-      "relative inline-block cursor-pointer select-none rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]",
+      "relative inline-block cursor-pointer select-none rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--rl-ring)]",
       "transition-all duration-150"
     ],
     indicator:
@@ -58,7 +58,7 @@ export const inputRatingTheme = defineTheme("input-rating", {
       color: "neutral",
       classNames: {
         indicator: "text-highlighted",
-        item: "focus-visible:outline-inverted"
+        item: "focus-visible:ring-inverted"
       }
     },
     {

package/src/components/kbd/RLAKbd.astro

@@ -5,6 +5,7 @@ import { kbdTheme } from "./kbd.theme"
 
 
 const {
+  theme,
   ...rest
 } = Astro.props as KbdProps
 
@@ -12,6 +13,6 @@ const {
 
 const classes = kbdTheme(Astro.props)
 ---
-<kbd class={classes.root} data-slot="root" {...rest}>
+<kbd class={classes.root} data-slot="root" data-theme={theme} {...rest}>
   <slot />
 </kbd>

package/src/components/kbd/kbd.theme.ts

@@ -19,10 +19,6 @@ export const kbdTheme = defineTheme("kbd", {
       sm: { root: "h-4 min-w-[16px] text-[10px]" },
       md: { root: "h-5 min-w-[20px] text-[11px]" },
       lg: { root: "h-6 min-w-[24px] text-[12px]" }
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   compoundVariants: [

package/src/components/keyboard/RLAKeyboard.astro

@@ -25,7 +25,7 @@ const {
   keySize = 40,
   variant = 'full',
   os = 'windows',
-  highlightColor = 'var(--color-primary-500, #00c16a)',
+  highlightColor = 'var(--rl-primary-500)',
   backgroundColor = 'transparent'
 } = Astro.props
 

package/src/components/link/RLALink.astro

@@ -43,6 +43,7 @@ const classes = raw
   aria-current={attrs.ariaCurrent}
   aria-disabled={attrs.ariaDisabled}
   data-astro-prefetch={attrs.prefetchAttr}
+  data-theme={theme}
   {...rest}
 >
   <slot name="leading">

package/src/components/link/link.theme.ts

@@ -16,10 +16,6 @@ export const linkTheme = defineTheme("link", {
     disabled: {
       true: { root: "cursor-not-allowed opacity-75" },
       false: {}
-    },
-    theme: {
-      light: { root: "rl-light" },
-      dark: { root: "rl-dark" }
     }
   },
   compoundVariants: [

package/src/components/link-group/RLALinkGroup.astro

@@ -23,7 +23,7 @@ const classes = linkGroupTheme(Astro.props);
 
 const normalizedLinks = Array.isArray(links) ? links : [links];
 ---
-<div class={classes.root} data-slot="root" {...rest}>
+<div class={classes.root} data-slot="root" data-theme={theme} {...rest}>
   {headingLabel && (
     <h4 class={classes.title} data-slot="title">
       {headingHref ? (

package/src/components/link-group/link-group.theme.ts

@@ -9,15 +9,6 @@ export const linkGroupTheme = defineTheme("link-group", {
     item: "",
     link: "text-sm text-muted hover:text-highlighted transition-colors"
   },
-  variants: {
-    theme: {
-      dark: {
-        root: "rl-dark"
-      },
-      light: {
-        root: "rl-light"
-      }
-    }
-  },
+  variants: {},
   defaultVariants: {}
 })

package/src/components/locale-selector/RLALocaleSelector.astro

@@ -4,8 +4,6 @@ import { localeSelectorTheme } from "./locale-selector.theme"
 import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n"
 import RLASelect from "../select/RLASelect.astro"
 
-
-
 const {
   locales,
   currentLocale: currentLocaleProp,
@@ -61,38 +59,9 @@ const items = processedLocales.map((item) => {
 });
 
 const currentLocaleUrl = items.find(item => item.code === currentLocale)?.value || "";
-
-// Prefix utility classes in classes.select with `!` to cleanly override conflicting styles in RLASelect's base trigger
-// Also remove `pr-` classes which were meant for absolute positioned native select icons
-const overrideTriggerClass = classes.select
-    ? classes.select
-        .split(" ")
-        .map(cls => {
-            if (!cls) return "";
-            if (cls.startsWith("pr-") || cls.startsWith("!pr-")) return ""; // Strip padding-right
-            if (cls.includes(":")) {
-                const parts = cls.split(":");
-                const state = parts.slice(0, -1).join(":");
-                const baseCls = parts[parts.length - 1];
-                return `${state}:!${baseCls}`;
-            }
-            return `!${cls}`;
-        })
-        .filter(Boolean)
-        .join(" ")
-    : "";
-
-const gapClass = size === "sm" ? "gap-1.5" : size === "lg" ? "gap-3" : "gap-2";
-
-const selectUi = {
-  root: "!w-fit !inline-flex",
-  trigger: `flex items-center justify-between !w-fit ${gapClass} ${overrideTriggerClass}`,
-  content: "!min-w-0 !w-full !bg-default !border-default !text-default",
-  item: "!text-default hover:!bg-muted hover:!text-highlighted"
-}
 ---
 
-<rla-locale-selector {...rest}>
+<rla-locale-selector data-theme={theme} {...rest}>
     <div class:list={[classes.root]} data-locale-selector>
         {Astro.slots.has("label") && (
                 <label class:list={[classes.label]}>
@@ -106,7 +75,6 @@ const selectUi = {
                 value={currentLocaleUrl}
                 size={size}
                 theme={theme}
-                ui={selectUi}
             />
         </div>
     </div>
@@ -117,8 +85,8 @@ const selectUi = {
         connectedCallback() {
             this.style.display = 'contents';
             this.addEventListener('change', (event) => {
-                const target = event.target as HTMLInputElement;
-                if (target && target.hasAttribute('data-select-hidden-input')) {
+                const target = event.target as HTMLSelectElement;
+                if (target && target.tagName === 'SELECT') {
                     const targetUrl = target.value;
                     if (targetUrl) {
                         window.location.href = targetUrl;
@@ -131,4 +99,4 @@ const selectUi = {
     if (!customElements.get('rla-locale-selector')) {
         customElements.define('rla-locale-selector', RLALocaleSelector);
     }
-</script>
+</script>

package/src/components/locale-selector/locale-selector.theme.ts

@@ -13,23 +13,15 @@ export const localeSelectorTheme = defineTheme("locale-selector", {
       "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-current group-hover:text-default"
   },
   variants: {
-    theme: {
-      dark: {
-        root: "rl-dark"
-      },
-      light: {
-        root: "rl-light"
-      }
-    },
     variant: {
       default: {
-        select: "bg-default text-default hover:bg-accent/50 border border-default"
+        select: "bg-default text-default hover:bg-accented/50 border border-default"
       },
       outline: {
-        select: "bg-transparent border border-default text-default hover:bg-accent/50"
+        select: "bg-transparent border border-default text-default hover:bg-accented/50"
       },
       ghost: {
-        select: "bg-transparent border border-transparent text-default hover:bg-accent/50"
+        select: "bg-transparent border border-transparent text-default hover:bg-accented/50"
       }
     },
     size: {

package/src/components/logo/RLALogo.astro

@@ -1,8 +1,7 @@
 ---
 import type { LogoProps } from "./logo"
 import { logoTheme } from "./logo.theme"
-import { uiConfig } from "../../resolver"
-
+import uiConfig from "virtual:rimelight/ui"
 
 const {
   variant = "logomark",

package/src/components/modal/RLAModal.astro

@@ -56,7 +56,7 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
       data-dialog-close={modalId}
       aria-label="Close modal"
     >
-      <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/modal/RLSModal.tsx

@@ -94,7 +94,7 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
     <Show when={props.open || !props.unmountOnHide}>
       <dialog
         ref={(el) => (dialogRef = el)}
-        class={`w-full rounded-xl border border-default bg-default p-6 shadow-xl outline-none flex flex-col max-h-[90vh] overflow-y-auto text-foreground backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
+        class={`w-full rounded-xl border border-default bg-default p-6 shadow-xl outline-none flex flex-col max-h-[90vh] overflow-y-auto text-highlighted backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
           resolvedClasses().content || ""
         }  ${props.class || ""}`}
         data-slot="content"
@@ -102,7 +102,7 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
       >
         <button
           type="button"
-          class="absolute right-4 top-4 rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-neutral-100 dark:hover:bg-neutral-800 transition cursor-pointer border-none bg-transparent"
+          class="absolute right-4 top-4 rounded-md p-1 text-muted hover:text-highlighted hover:bg-neutral-100 dark:hover:bg-neutral-800 transition cursor-pointer border-none bg-transparent"
           data-slot="close-button"
           aria-label="Close modal"
           onClick={handleClose}