@rimelight/cms 0.0.1 → 0.0.3

package/src/astro/blocks/ImageBlock.astro

@@ -12,6 +12,6 @@ const imageSrc = src || url
 ---
 
 <figure class="cms-image mx-auto my-6 flex flex-col items-center max-w-full" data-block-id={block.id}>
-  <img src={imageSrc} alt={alt || "Image"} class="h-auto max-w-full rounded-xl object-cover border border-neutral-200 dark:border-neutral-800 shadow-sm" />
-  {caption && <figcaption class="mt-2 text-center text-xs text-neutral-500 dark:text-neutral-400 italic">{caption}</figcaption>}
+  <img src={imageSrc} alt={alt || "Image"} class="h-auto max-w-full rounded-xl object-cover border border-neutral-200 shadow-sm" />
+  {caption && <figcaption class="mt-2 text-center text-xs text-neutral-500 italic">{caption}</figcaption>}
 </figure>

package/src/astro/blocks/OrderedListBlock.astro

@@ -40,7 +40,7 @@ function renderNodesToHtml(nodes: InlineNode[]): string {
         const inner = node.children ? renderNodesToHtml(node.children) : escapeHtml((node as any).text || "")
         const target = node.openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : ""
         const href = escapeHtml(node.url || "#")
-        return `<a href="${href}"${target} class="text-blue-500 hover:text-blue-400 underline underline-offset-2">${inner}</a>`
+        return `<a href="${href}"${target} class="text-info-500 hover:text-info-400 underline underline-offset-2">${inner}</a>`
       }
       return ""
     })
@@ -48,7 +48,7 @@ function renderNodesToHtml(nodes: InlineNode[]): string {
 }
 ---
 
-<ol class="cms-ordered-list list-decimal list-inside space-y-2 my-4 text-base text-neutral-800 dark:text-neutral-200" data-block-id={block.id}>
+<ol class="cms-ordered-list list-decimal list-inside space-y-2 my-4 text-base text-neutral-800" data-block-id={block.id}>
   {items.map((item: BaseBlock) => (
     <li set:html={renderNodesToHtml(item.props?.content || [])} />
   ))}

package/src/astro/blocks/ParagraphBlock.astro

@@ -40,12 +40,12 @@ function renderNodesToHtml(nodes: InlineNode[]): string {
         const inner = node.children ? renderNodesToHtml(node.children) : escapeHtml((node as any).text || "")
         const target = node.openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : ""
         const href = escapeHtml(node.url || "#")
-        return `<a href="${href}"${target} class="text-blue-500 hover:text-blue-400 underline underline-offset-2">${inner}</a>`
+        return `<a href="${href}"${target} class="text-info-500 hover:text-info-400 underline underline-offset-2">${inner}</a>`
       }
       if (node.type === "page_mention") {
         const title = escapeHtml(node.displayTitle || node.pageSlug || node.pageId || "Page")
         const href = `/${escapeHtml(node.pageSlug || node.pageId)}`
-        return `<a href="${href}" class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 text-sm font-medium no-underline"><span class="i-lucide-file-text size-3.5"></span>${title}</a>`
+        return `<a href="${href}" class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-info-500/10 text-info-400 hover:bg-info-500/20 text-sm font-medium no-underline"><span class="i-lucide-file-text size-3.5"></span>${title}</a>`
       }
       return ""
     })
@@ -62,4 +62,4 @@ if (Array.isArray(rawText)) {
 }
 ---
 
-<p class="cms-paragraph text-base leading-relaxed text-neutral-800 dark:text-neutral-200 my-4 whitespace-pre-wrap break-words" data-block-id={block.id} set:html={htmlContent} />
+<p class="cms-paragraph text-base leading-relaxed text-neutral-800 my-4 whitespace-pre-wrap break-words" data-block-id={block.id} set:html={htmlContent} />

package/src/astro/blocks/SectionBlock.astro

@@ -27,11 +27,11 @@ const safeLevel = calculateHeadingLevel(sectionDepth)
 const headingId = title ? slugify(title) : undefined
 
 const headingClasses: Record<HeadingLevel, string> = {
-  2: "text-3xl font-bold text-neutral-900 dark:text-white mt-6 mb-3 border-b border-gray-200 dark:border-gray-800 pb-2",
-  3: "text-2xl font-semibold text-neutral-900 dark:text-white mt-5 mb-2.5",
-  4: "text-xl font-medium text-neutral-900 dark:text-white mt-4 mb-2",
-  5: "text-lg font-medium text-neutral-800 dark:text-neutral-200 mt-3 mb-1.5",
-  6: "text-base font-normal text-neutral-700 dark:text-neutral-300 mt-2 mb-1"
+  2: "text-3xl font-bold text-neutral-900 mt-6 mb-3 border-b border-neutral-200 pb-2",
+  3: "text-2xl font-semibold text-neutral-900 mt-5 mb-2.5",
+  4: "text-xl font-medium text-neutral-900 mt-4 mb-2",
+  5: "text-lg font-medium text-neutral-800 mt-3 mb-1.5",
+  6: "text-base font-normal text-neutral-700 mt-2 mb-1"
 }
 
 const Tag = `h${safeLevel}` as any
@@ -39,7 +39,7 @@ const Tag = `h${safeLevel}` as any
 
 <section id={headingId} class="cms-section my-6 scroll-mt-20" data-block-id={block.id}>
   {title && <Tag class={headingClasses[safeLevel] || headingClasses[2]}>{title}</Tag>}
-  {description && <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 mb-4 italic">{description}</p>}
+  {description && <p class="text-sm text-neutral-500 mt-1 mb-4 italic">{description}</p>}
   <div class="mt-4">
     <slot />
   </div>

package/src/astro/blocks/StepItemBlock.astro

@@ -12,12 +12,12 @@ const { title = "", description = "" } = block.props || {}
 ---
 
 <div class="cms-step-item relative" data-block-id={block.id}>
-  <div class="absolute -left-[35px] top-0 flex size-6 items-center justify-center rounded-full bg-neutral-900 text-white dark:bg-white dark:text-neutral-900 text-xs font-bold ring-4 ring-white dark:ring-neutral-950">
+  <div class="absolute -left-[35px] top-0 flex size-6 items-center justify-center rounded-full bg-inverted text-xs font-bold ring-4 ring-neutral-50">
     {index + 1}
   </div>
   <div class="space-y-2">
-    {title && <h3 class="text-base font-semibold text-neutral-900 dark:text-white mt-0">{title}</h3>}
-    {description && <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">{description}</p>}
+    {title && <h3 class="text-base font-semibold text-neutral-900 mt-0">{title}</h3>}
+    {description && <p class="text-sm text-neutral-600 mt-1">{description}</p>}
     <div class="mt-3">
       <slot />
     </div>

package/src/astro/blocks/StepsBlock.astro

@@ -9,6 +9,6 @@ interface Props {
 const { block } = Astro.props
 ---
 
-<div class="cms-steps my-6 relative border-l-2 border-neutral-200 dark:border-neutral-800 ml-4 pl-6 space-y-6" data-block-id={block.id}>
+<div class="cms-steps my-6 relative border-l-2 border-neutral-200 ml-4 pl-6 space-y-6" data-block-id={block.id}>
   <slot />
 </div>

package/src/astro/blocks/TableBlock.astro

@@ -10,15 +10,15 @@ const { block } = Astro.props
 const { columns = [], rows = [], caption } = block.props || {}
 ---
 
-<div class="cms-table my-6 overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-800" data-block-id={block.id}>
+<div class="cms-table my-6 overflow-x-auto rounded-lg border border-neutral-200" data-block-id={block.id}>
   <table class="w-full text-left text-sm border-collapse">
     {caption && (
-      <caption class="p-2 text-xs text-neutral-500 dark:text-neutral-400 italic text-left">
+      <caption class="p-2 text-xs text-neutral-500 italic text-left">
         {caption}
       </caption>
     )}
     {columns.length > 0 && (
-      <thead class="bg-neutral-50 dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 font-medium text-neutral-700 dark:text-neutral-200">
+      <thead class="bg-neutral-50 border-b border-neutral-200 font-medium text-neutral-700">
         <tr>
           {columns.map((col: any) => (
             <th
@@ -31,12 +31,12 @@ const { columns = [], rows = [], caption } = block.props || {}
         </tr>
       </thead>
     )}
-    <tbody class="divide-y divide-neutral-200 dark:divide-neutral-800 bg-white dark:bg-neutral-950">
+    <tbody class="divide-y divide-neutral-200 bg-default">
       {rows.map((row: any) => (
-        <tr class="hover:bg-neutral-50/50 dark:hover:bg-neutral-900/50 transition-colors">
+        <tr class="hover:bg-neutral-50/50 transition-colors">
           {columns.map((col: any) => (
             <td
-              class="px-4 py-3 text-neutral-800 dark:text-neutral-200"
+              class="px-4 py-3 text-neutral-800"
               style={col.align ? `text-align: ${col.align};` : undefined}
             >
               {row[col.key] ?? ""}

package/src/astro/blocks/TabsBlock.astro

@@ -12,8 +12,8 @@ const defaultValue = block.props?.defaultValue || (children[0]?.props?.value ||
 const tabsId = `tabs-${block.id}`
 ---
 
-<div class="cms-tabs my-6 border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden" data-block-id={block.id} id={tabsId}>
-  <div class="flex items-center gap-1 border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 px-3 pt-2">
+<div class="cms-tabs my-6 border border-neutral-200 rounded-xl overflow-hidden" data-block-id={block.id} id={tabsId}>
+  <div class="flex items-center gap-1 border-b border-neutral-200 bg-neutral-50 px-3 pt-2">
     {children.map((child, index) => {
       const val = child.props?.value || child.props?.label || `tab-${index}`
       const isDefault = val === defaultValue || (!defaultValue && index === 0)
@@ -22,8 +22,8 @@ const tabsId = `tabs-${block.id}`
           type="button"
           class={`cms-tab-btn px-3 py-1.5 text-xs font-medium rounded-t-md transition-all border-b-2 -mb-px ${
             isDefault
-              ? "text-primary-600 dark:text-primary-400 border-primary-500 bg-white dark:bg-neutral-950 font-semibold"
-              : "text-neutral-600 dark:text-neutral-400 border-transparent hover:text-neutral-900 dark:hover:text-neutral-200"
+                ? "text-primary-600 border-primary-500 bg-white font-semibold"
+                : "text-neutral-600 border-transparent hover:text-neutral-900"
           }`}
           data-tab-target={`${tabsId}-panel-${index}`}
         >
@@ -33,7 +33,7 @@ const tabsId = `tabs-${block.id}`
       )
     })}
   </div>
-  <div class="cms-tabs-content p-4 bg-white dark:bg-neutral-950">
+  <div class="cms-tabs-content p-4 bg-white">
     <slot />
   </div>
 </div>
@@ -48,11 +48,11 @@ const tabsId = `tabs-${block.id}`
     btns.forEach((btn, idx) => {
       btn.addEventListener('click', () => {
         btns.forEach((b) => {
-          b.classList.remove('text-primary-600', 'dark:text-primary-400', 'border-primary-500', 'bg-white', 'dark:bg-neutral-950', 'font-semibold');
-          b.classList.add('text-neutral-600', 'dark:text-neutral-400', 'border-transparent');
+          b.classList.remove('text-primary-600', 'border-primary-500', 'bg-white', 'font-semibold');
+          b.classList.add('text-neutral-600', 'border-transparent');
         });
-        btn.classList.add('text-primary-600', 'dark:text-primary-400', 'border-primary-500', 'bg-white', 'dark:bg-neutral-950', 'font-semibold');
-        btn.classList.remove('text-neutral-600', 'dark:text-neutral-400', 'border-transparent');
+        btn.classList.add('text-primary-600', 'border-primary-500', 'bg-white', 'font-semibold');
+        btn.classList.remove('text-neutral-600', 'border-transparent');
 
         panels.forEach((p, pIdx) => {
           if (pIdx === idx) {

package/src/astro/blocks/UnorderedListBlock.astro

@@ -40,7 +40,7 @@ function renderNodesToHtml(nodes: InlineNode[]): string {
         const inner = node.children ? renderNodesToHtml(node.children) : escapeHtml((node as any).text || "")
         const target = node.openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : ""
         const href = escapeHtml(node.url || "#")
-        return `<a href="${href}"${target} class="text-blue-500 hover:text-blue-400 underline underline-offset-2">${inner}</a>`
+        return `<a href="${href}"${target} class="text-info-500 hover:text-info-400 underline underline-offset-2">${inner}</a>`
       }
       return ""
     })
@@ -48,7 +48,7 @@ function renderNodesToHtml(nodes: InlineNode[]): string {
 }
 ---
 
-<ul class="cms-unordered-list list-disc list-inside space-y-2 my-4 text-base text-neutral-800 dark:text-neutral-200" data-block-id={block.id}>
+<ul class="cms-unordered-list list-disc list-inside space-y-2 my-4 text-base text-neutral-800" data-block-id={block.id}>
   {items.map((item: BaseBlock) => (
     <li set:html={renderNodesToHtml(item.props?.content || [])} />
   ))}

package/src/astro/blocks/index.ts

@@ -0,0 +1,35 @@
+import ParagraphBlock from "./ParagraphBlock.astro"
+import SectionBlock from "./SectionBlock.astro"
+import CalloutBlock from "./CalloutBlock.astro"
+import ImageBlock from "./ImageBlock.astro"
+import CodeBlock from "./CodeBlock.astro"
+import TableBlock from "./TableBlock.astro"
+import TabsBlock from "./TabsBlock.astro"
+import TabItemBlock from "./TabItemBlock.astro"
+import StepsBlock from "./StepsBlock.astro"
+import StepItemBlock from "./StepItemBlock.astro"
+import CardsBlock from "./CardsBlock.astro"
+import CardBlock from "./CardBlock.astro"
+import FileTreeBlock from "./FileTreeBlock.astro"
+import UnorderedListBlock from "./UnorderedListBlock.astro"
+import OrderedListBlock from "./OrderedListBlock.astro"
+
+export const defaultBlockComponents: Record<string, any> = {
+  ParagraphBlock,
+  SectionBlock,
+  CalloutBlock,
+  ImageBlock,
+  CodeBlock,
+  TableBlock,
+  TabsBlock,
+  TabItemBlock,
+  StepsBlock,
+  StepItemBlock,
+  CardsBlock,
+  CardBlock,
+  FileTreeBlock,
+  UnorderedListBlock,
+  OrderedListBlock
+}
+
+export default defaultBlockComponents

package/src/client/components/RimelightBlock.tsx

@@ -265,7 +265,7 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
             setMenuOpen(!menuOpen())
           }}
           aria-label="Drag handle and options menu"
-          class="cms-drag-handle !p-1 text-muted-foreground hover:text-foreground cursor-grab active:cursor-grabbing"
+          class="cms-drag-handle !p-1 text-muted hover:text-highlighted cursor-grab active:cursor-grabbing"
           title="Drag to reorder / Click for options"
           leading={<RLSIcon name="gripVertical" size="sm" />}
         />
@@ -274,7 +274,7 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
         <Show when={menuOpen()}>
           <div class="absolute left-0 top-7 z-50 w-48 bg-elevated border border-default rounded-xl shadow-xl py-1 text-xs">
             {isLocked() ? (
-              <div class="px-3 py-2 text-muted-foreground italic">Locked — templated block</div>
+              <div class="px-3 py-2 text-muted italic">Locked — templated block</div>
             ) : (
               <>
                 <button
@@ -283,9 +283,9 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
                     props.onMove(props.block.id, -1)
                     setMenuOpen(false)
                   }}
-                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 cursor-pointer text-foreground transition-colors bg-transparent border-0 text-left"
+                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 cursor-pointer text-highlighted transition-colors bg-transparent border-0 text-left"
                 >
-                  <RLSIcon name="arrowUp" size="xs" class="text-muted-foreground" />
+                  <RLSIcon name="arrowUp" size="xs" class="text-muted" />
                   <span>Move Up</span>
                 </button>
                 <button
@@ -294,9 +294,9 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
                     props.onMove(props.block.id, 1)
                     setMenuOpen(false)
                   }}
-                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 cursor-pointer text-foreground transition-colors bg-transparent border-0 text-left"
+                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 cursor-pointer text-highlighted transition-colors bg-transparent border-0 text-left"
                 >
-                  <RLSIcon name="arrowDown" size="xs" class="text-muted-foreground" />
+                  <RLSIcon name="arrowDown" size="xs" class="text-muted" />
                   <span>Move Down</span>
                 </button>
                 <div class="my-1 border-t border-default" />
@@ -306,9 +306,9 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
                     props.onAddAdjacent(props.block.id, "before")
                     setMenuOpen(false)
                   }}
-                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 cursor-pointer text-foreground transition-colors bg-transparent border-0 text-left"
+                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 cursor-pointer text-highlighted transition-colors bg-transparent border-0 text-left"
                 >
-                  <RLSIcon name="arrowUpFromLine" size="xs" class="text-muted-foreground" />
+                  <RLSIcon name="arrowUpFromLine" size="xs" class="text-muted" />
                   <span>Add Block Above</span>
                 </button>
                 <button
@@ -317,9 +317,9 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
                     props.onAddAdjacent(props.block.id, "after")
                     setMenuOpen(false)
                   }}
-                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 cursor-pointer text-foreground transition-colors bg-transparent border-0 text-left"
+                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 cursor-pointer text-highlighted transition-colors bg-transparent border-0 text-left"
                 >
-                  <RLSIcon name="arrowDownToLine" size="xs" class="text-muted-foreground" />
+                  <RLSIcon name="arrowDownToLine" size="xs" class="text-muted" />
                   <span>Add Block Below</span>
                 </button>
                 <div class="my-1 border-t border-default" />
@@ -329,9 +329,9 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
                     props.onDuplicate(props.block.id)
                     setMenuOpen(false)
                   }}
-                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 cursor-pointer text-foreground transition-colors bg-transparent border-0 text-left"
+                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-100 cursor-pointer text-highlighted transition-colors bg-transparent border-0 text-left"
                 >
-                  <RLSIcon name="copy" size="xs" class="text-muted-foreground" />
+                  <RLSIcon name="copy" size="xs" class="text-muted" />
                   <span>Duplicate Block</span>
                 </button>
                 <button
@@ -340,9 +340,9 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
                     setMenuOpen(false)
                     setIsDeleteModalOpen(true)
                   }}
-                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-red-50 dark:hover:bg-red-950/40 text-red-500 hover:text-red-600 cursor-pointer transition-colors bg-transparent border-0 text-left"
+                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-error-50 text-error-500 hover:text-error-600 cursor-pointer transition-colors bg-transparent border-0 text-left"
                 >
-                  <RLSIcon name="trash" size="xs" class="text-red-500" />
+                  <RLSIcon name="trash" size="xs" class="text-error-500" />
                   <span>Delete Block...</span>
                 </button>
               </>
@@ -428,9 +428,9 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
                     setToolbarMenuOpen(false)
                     setIsDeleteModalOpen(true)
                   }}
-                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-red-50 dark:hover:bg-red-950/40 text-red-500 hover:text-red-600 cursor-pointer transition-colors bg-transparent border-0 text-left"
+                  class="flex items-center gap-2 w-full px-3 py-2 hover:bg-error-50 text-error-500 hover:text-error-600 cursor-pointer transition-colors bg-transparent border-0 text-left"
                 >
-                  <RLSIcon name="trash" size="xs" class="text-red-500" />
+                  <RLSIcon name="trash" size="xs" class="text-error-500" />
                   <span>Delete Block...</span>
                 </button>
               </div>
@@ -441,7 +441,7 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
         {/* Block Editor Body (No border, no bg) */}
         <div class="w-full relative">
           {isLocked() && (
-            <div class="inline-flex items-center gap-1 px-2 py-0.5 bg-neutral-200/50 dark:bg-neutral-800/50 text-neutral-600 dark:text-neutral-300 rounded text-xs mb-2 select-none border border-default">
+            <div class="inline-flex items-center gap-1 px-2 py-0.5 bg-neutral-200/50 text-neutral-600 rounded text-xs mb-2 select-none border border-default">
               🔒 Templated Block (Locked)
             </div>
           )}
@@ -478,8 +478,8 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
           </>
         }
       >
-        <p class="text-xs text-muted-foreground mt-1">
-          Block type: <span class="font-semibold text-foreground">{props.block.type}</span>
+        <p class="text-xs text-muted mt-1">
+          Block type: <span class="font-semibold text-highlighted">{props.block.type}</span>
         </p>
       </RLSModal>
     </div>

package/src/client/components/RimelightBlockPicker.tsx

@@ -207,7 +207,7 @@ export const RimelightBlockPicker: Component<RimelightBlockPickerProps> = (props
       >
         <div class="bg-elevated border border-default rounded-2xl w-full max-w-md shadow-2xl flex flex-col overflow-hidden">
           <div class="flex items-center justify-between px-4 py-3 border-b border-default">
-            <div class="text-sm font-semibold text-foreground">
+            <div class="text-sm font-semibold text-highlighted">
               Add Block{" "}
               {props.containerType ? `to ${props.containerType.replace("Block", "")}` : ""}
             </div>
@@ -242,9 +242,7 @@ export const RimelightBlockPicker: Component<RimelightBlockPickerProps> = (props
 
           <div class="overflow-y-auto max-h-[50vh] pb-2">
             {filteredBlocks().length === 0 ? (
-              <div class="text-center py-4 text-muted-foreground text-sm">
-                No compatible blocks found
-              </div>
+              <div class="text-center py-4 text-muted text-sm">No compatible blocks found</div>
             ) : (
               (() => {
                 let currentGroup = ""
@@ -258,7 +256,7 @@ export const RimelightBlockPicker: Component<RimelightBlockPickerProps> = (props
                       return (
                         <>
                           {showHeader && (
-                            <div class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest px-4 py-1.5 mt-2">
+                            <div class="text-[10px] font-bold text-muted uppercase tracking-widest px-4 py-1.5 mt-2">
                               {block.group}
                             </div>
                           )}
@@ -270,24 +268,22 @@ export const RimelightBlockPicker: Component<RimelightBlockPickerProps> = (props
                               handleSelectBlock(block.type)
                             }}
                             onMouseEnter={() => setSelectedIndex(index())}
-                            class="cms-picker-item flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800/80 w-full text-left bg-transparent border-none"
-                            classList={{ "bg-neutral-100 dark:bg-neutral-800/80": isSelected }}
+                            class="cms-picker-item flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors hover:bg-neutral-100 w-full text-left bg-transparent border-none"
+                            classList={{ "bg-neutral-100": isSelected }}
                           >
-                            <div class="text-base w-8 h-8 flex items-center justify-center shrink-0 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-foreground border border-default">
+                            <div class="text-base w-8 h-8 flex items-center justify-center shrink-0 rounded-lg bg-neutral-100 text-highlighted border border-default">
                               <RLSIcon name={block.icon} size="sm" />
                             </div>
                             <div class="flex flex-col flex-1 min-w-0">
                               <div class="flex items-center justify-between">
-                                <span class="text-sm font-medium text-foreground">
+                                <span class="text-sm font-medium text-highlighted">
                                   {block.label}
                                 </span>
-                                <span class="text-[10px] font-mono text-muted-foreground bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded border border-default/50">
+                                <span class="text-[10px] font-mono text-muted bg-neutral-100 px-1.5 py-0.5 rounded border border-default/50">
                                   {block.type}
                                 </span>
                               </div>
-                              <span class="text-xs text-muted-foreground mt-0.5 truncate">
-                                {block.desc}
-                              </span>
+                              <span class="text-xs text-muted mt-0.5 truncate">{block.desc}</span>
                             </div>
                           </button>
                         </>