@rimelight/ui 0.0.34 → 0.0.36

package/src/presets/index.ts

@@ -15,7 +15,7 @@ export const uiSrcGlob = join(pathDirname, "../**/*.{js,ts,jsx,tsx,vue,svelte,as
 export const uiFilesystemGlob = join(pathDirname, "../**/*")
 
 type ColorShades = Record<string, string>
-type ColorModeShades = { light?: ColorShades; dark?: ColorShades; flat?: ColorShades }
+type ColorModeShades = { light?: ColorShades; dark?: ColorShades }
 export type ColorConfigValue = ColorShades | ColorModeShades
 
 function generateLightShade(shade: string, value: string): string {
@@ -35,7 +35,7 @@ function generateDarkShade(shade: string, value: string): string {
 function resolveColorModes(
   entry: ColorConfigValue,
   autogenerate?: boolean
-): { light: Record<string, string>; dark: Record<string, string>; flat: Record<string, string> } {
+): { light: Record<string, string>; dark: Record<string, string> } {
   const raw = entry as Record<string, unknown>
 
   const modeLight =
@@ -46,12 +46,8 @@ function resolveColorModes(
     typeof raw.dark === "object" && raw.dark !== null
       ? ({ ...raw.dark } as ColorShades)
       : ({} as ColorShades)
-  const modeFlat =
-    typeof raw.flat === "object" && raw.flat !== null
-      ? ({ ...raw.flat } as ColorShades)
-      : ({} as ColorShades)
 
-  const modeKeys = new Set(["light", "dark", "flat"])
+  const modeKeys = new Set(["light", "dark"])
   const flatShades: ColorShades = {}
   for (const [k, v] of Object.entries(raw)) {
     if (!modeKeys.has(k) && typeof v === "string") {
@@ -60,24 +56,19 @@ function resolveColorModes(
   }
 
   const allShades = [
-    ...new Set([
-      ...Object.keys(modeLight),
-      ...Object.keys(modeDark),
-      ...Object.keys(modeFlat),
-      ...Object.keys(flatShades)
-    ])
+    ...new Set([...Object.keys(modeLight), ...Object.keys(modeDark), ...Object.keys(flatShades)])
   ]
 
   if (autogenerate) {
     if (Object.keys(modeLight).length === 0) {
       for (const shade of allShades) {
-        const value = flatShades[shade] ?? modeFlat[shade] ?? modeDark[shade]
+        const value = flatShades[shade] ?? modeDark[shade]
         if (value) modeLight[shade] = generateLightShade(shade, value)
       }
     }
     if (Object.keys(modeDark).length === 0) {
       for (const shade of allShades) {
-        const value = flatShades[shade] ?? modeFlat[shade] ?? modeLight[shade]
+        const value = flatShades[shade] ?? modeLight[shade]
         if (value) modeDark[shade] = generateDarkShade(shade, value)
       }
     }
@@ -85,34 +76,23 @@ function resolveColorModes(
 
   const light: ColorShades = {}
   const dark: ColorShades = {}
-  const flat: ColorShades = {}
 
   for (const shade of allShades) {
-    const lv = modeLight[shade] ?? flatShades[shade] ?? modeFlat[shade] ?? modeDark[shade]
+    const lv = modeLight[shade] ?? flatShades[shade] ?? modeDark[shade]
     if (lv !== undefined) light[shade] = lv
 
-    const dv = modeDark[shade] ?? flatShades[shade] ?? modeFlat[shade] ?? modeLight[shade]
+    const dv = modeDark[shade] ?? flatShades[shade] ?? modeLight[shade]
     if (dv !== undefined) dark[shade] = dv
-
-    const fv = modeFlat[shade] ?? flatShades[shade] ?? modeLight[shade] ?? modeDark[shade]
-    if (fv !== undefined) flat[shade] = fv
   }
 
-  return { light, dark, flat }
+  return { light, dark }
 }
 
 const createScale = (colorName: string, shadeKeys: string[]) => ({
   DEFAULT: `var(--${colorName})`,
   foreground: `var(--${colorName}-foreground)`,
   accent: `var(--${colorName}-accent)`,
-  ...Object.fromEntries(
-    shadeKeys.flatMap((shade) => [
-      [shade, `var(--color-${colorName}-${shade})`],
-      [`${shade}-f`, `var(--color-${colorName}-${shade}-f)`],
-      [`${shade}-l`, `var(--color-${colorName}-${shade}-l)`],
-      [`${shade}-d`, `var(--color-${colorName}-${shade}-d)`]
-    ])
-  )
+  ...Object.fromEntries(shadeKeys.map((shade) => [shade, `var(--color-${colorName}-${shade})`]))
 })
 
 export interface RimelightPresetOptions {
@@ -184,7 +164,7 @@ export default definePreset((options?: RimelightPresetOptions) => {
     },
 
     shortcuts: {
-      "container": "mx-auto w-full max-w-90rem px-md",
+      "container": "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl",
       "sr-only":
         "absolute w-px h-px p-0 m-0 overflow-hidden clip-rect-1-1-1-1 whitespace-nowrap border-0"
     },
@@ -200,63 +180,27 @@ export default definePreset((options?: RimelightPresetOptions) => {
           "--rl-bg-hover": `var(--color-${color}-600)`,
           "--rl-text": `var(--color-${color}-600)`,
           "--rl-ring": `var(--color-${color}-500)`,
-          "--rl-border": `var(--color-${color}-500)`,
-          "--rl-bg-f": `var(--color-${color}-500-f)`,
-          "--rl-bg-hover-f": `var(--color-${color}-600-f)`,
-          "--rl-text-f": `var(--color-${color}-600-f)`,
-          "--rl-ring-f": `var(--color-${color}-500-f)`,
-          "--rl-border-f": `var(--color-${color}-500-f)`,
-          "--rl-bg-l": `var(--color-${color}-500-l)`,
-          "--rl-bg-hover-l": `var(--color-${color}-600-l)`,
-          "--rl-text-l": `var(--color-${color}-600-l)`,
-          "--rl-ring-l": `var(--color-${color}-500-l)`,
-          "--rl-border-l": `var(--color-${color}-500-l)`,
-          "--rl-bg-d": `var(--color-${color}-500-d)`,
-          "--rl-bg-hover-d": `var(--color-${color}-600-d)`,
-          "--rl-text-d": `var(--color-${color}-600-d)`,
-          "--rl-ring-d": `var(--color-${color}-500-d)`,
-          "--rl-border-d": `var(--color-${color}-500-d)`
+          "--rl-border": `var(--color-${color}-500)`
         })
       ],
+      // Pins the element's color-scheme to light — light-dark() resolves to light values.
+      // Also sets color so plain text children inherit the correct foreground without needing
+      // an explicit utility class on every element.
+      ["rl-light", { "color-scheme": "light", "color": "var(--foreground)" }],
+      // Pins the element's color-scheme to dark — light-dark() resolves to dark values.
+      ["rl-dark", { "color-scheme": "dark", "color": "var(--foreground)" }],
+      // Resets color-scheme back to reactive — follows the page-level preference
+      // (i.e. whatever is set on <html>). Use inside a pinned wrapper to opt a subtree back out.
+      ["rl-auto", { "color-scheme": "light dark", "color": "var(--foreground)" }],
       [
-        "rl-flat",
-        {
-          "--rl-bg": "var(--rl-bg-f)",
-          "--rl-bg-hover": "var(--rl-bg-hover-f)",
-          "--rl-text": "var(--rl-text-f)",
-          "--rl-ring": "var(--rl-ring-f)",
-          "--rl-border": "var(--rl-border-f)"
-        }
-      ],
-      [
-        "rl-light",
-        {
-          "--rl-bg": "var(--rl-bg-l, var(--rl-bg-f))",
-          "--rl-bg-hover": "var(--rl-bg-hover-l, var(--rl-bg-hover-f))",
-          "--rl-text": "var(--rl-text-l, var(--rl-text-f))",
-          "--rl-ring": "var(--rl-ring-l, var(--rl-ring-f))",
-          "--rl-border": "var(--rl-border-l, var(--rl-border-f))"
-        }
-      ],
-      [
-        "rl-dark",
-        {
-          "--rl-bg": "var(--rl-bg-d, var(--rl-bg-f))",
-          "--rl-bg-hover": "var(--rl-bg-hover-d, var(--rl-bg-hover-f))",
-          "--rl-text": "var(--rl-text-d, var(--rl-text-f))",
-          "--rl-ring": "var(--rl-ring-d, var(--rl-ring-f))",
-          "--rl-border": "var(--rl-border-d, var(--rl-border-f))"
-        }
-      ],
-      [
-        /^(text)-(default|inverted)(?:\/(\d+))?$/,
+        /^(text)-(default|inverted|muted|dimmed|toned|highlighted)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
           opacity
             ? { color: `color-mix(in srgb, var(--text-color-${name}) ${opacity}%, transparent)` }
             : { color: `var(--text-color-${name})` }
       ],
       [
-        /^(bg)-(default|inverted)(?:\/(\d+))?$/,
+        /^(bg)-(default|inverted|muted|elevated|accented)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
           opacity
             ? {
@@ -265,7 +209,7 @@ export default definePreset((options?: RimelightPresetOptions) => {
             : { "background-color": `var(--background-color-${name})` }
       ],
       [
-        /^(ring)-(default|inverted)(?:\/(\d+))?$/,
+        /^(ring)-(default|inverted|muted|accented)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
           opacity
             ? {
@@ -274,16 +218,7 @@ export default definePreset((options?: RimelightPresetOptions) => {
             : { "--un-ring-color": `var(--ring-color-${name})` }
       ],
       [
-        /^(divide)-(default)(?:\/(\d+))?$/,
-        ([, , name, opacity]) =>
-          opacity
-            ? {
-                "border-color": `color-mix(in srgb, var(--divide-color-${name}) ${opacity}%, transparent)`
-              }
-            : { "border-color": `var(--divide-color-${name})` }
-      ],
-      [
-        /^(border)-(default)(?:\/(\d+))?$/,
+        /^(border)-(default|inverted|muted|accented)(?:\/(\d+))?$/,
         ([, , name, opacity]) =>
           opacity
             ? {
@@ -334,9 +269,7 @@ export default definePreset((options?: RimelightPresetOptions) => {
         ...Object.fromEntries(
           allColors.map((color) => {
             const m = resolvedColors[color]!
-            const shadeKeys = [
-              ...new Set([...Object.keys(m.light), ...Object.keys(m.dark), ...Object.keys(m.flat)])
-            ]
+            const shadeKeys = [...new Set([...Object.keys(m.light), ...Object.keys(m.dark)])]
             return [color, createScale(color, shadeKeys)]
           })
         ),
@@ -425,144 +358,121 @@ export default definePreset((options?: RimelightPresetOptions) => {
     preflights: [
       {
         getCSS: () => {
-          const lightLines = Object.entries(resolvedColors)
-            .flatMap(([color, modes]) =>
-              Object.entries(modes.light).map(
-                ([shade, value]) => `            --color-${color}-${shade}: ${value};`
-              )
-            )
-            .join("\n")
-
-          const flatLines = Object.entries(resolvedColors)
-            .flatMap(([color, modes]) => {
-              const u = modes.flat
-              return Object.entries(u).map(
-                ([shade, value]) => `            --color-${color}-${shade}-f: ${value};`
-              )
-            })
-            .join("\n")
-
-          const lightPinnedLines = Object.entries(resolvedColors)
-            .flatMap(([color, modes]) =>
-              Object.entries(modes.light)
-                .filter(([shade, value]) => value !== modes.flat[shade])
-                .map(([shade, value]) => `            --color-${color}-${shade}-l: ${value};`)
-            )
-            .join("\n")
-
-          const darkPinnedLines = Object.entries(resolvedColors)
+          // Single pass: emit light-dark() for every color shade.
+          // The browser resolves each call based on the element's inherited color-scheme.
+          const lightDarkLines = Object.entries(resolvedColors)
             .flatMap(([color, modes]) =>
-              Object.entries(modes.dark)
-                .filter(([shade, value]) => value !== modes.flat[shade])
-                .map(([shade, value]) => `            --color-${color}-${shade}-d: ${value};`)
-            )
-            .join("\n")
-
-          const darkLines = Object.entries(resolvedColors)
-            .flatMap(([color, modes]) =>
-              Object.entries(modes.dark)
-                .filter(([shade, value]) => modes.light[shade] !== value)
-                .map(([shade, value]) => `            --color-${color}-${shade}: ${value};`)
+              Object.keys(modes.light).map((shade) => {
+                const l = modes.light[shade]
+                const d = modes.dark[shade] ?? modes.light[shade]
+                return `            --color-${color}-${shade}: light-dark(${l}, ${d});`
+              })
             )
             .join("\n")
 
           return `
         :root {
-          --background: #ffffff;
-          --foreground: #030712;
-          --card: #ffffff;
-          --card-foreground: #030712;
-          --popover: #ffffff;
-          --popover-foreground: #030712;
-          --primary: #0064d7;
+          color-scheme: light dark;
+
+          /* Semantic tokens — each resolves to its light or dark value based on color-scheme */
+          --background: light-dark(#ffffff, #030712);
+          --foreground: light-dark(#030712, #f9fafb);
+          --card: light-dark(#ffffff, #111827);
+          --card-foreground: light-dark(#030712, #f9fafb);
+          --popover: light-dark(#ffffff, #1f2937);
+          --popover-foreground: light-dark(#030712, #f9fafb);
+          --primary: light-dark(#0064d7, #3b82f6);
           --primary-foreground: #ffffff;
-          --primary-accent: #0050ac;
+          --primary-accent: light-dark(#0050ac, #60a5fa);
           --secondary: #8b5cf6;
           --secondary-foreground: #f9fafb;
-          --secondary-accent: #7c3aed;
-          --muted: #f3f4f6;
-          --muted-foreground: #4b5563;
-          --accent: #f3f4f6;
-          --accent-foreground: #111827;
+          --secondary-accent: light-dark(#7c3aed, #a78bfa);
+          --muted: light-dark(#f3f4f6, #1f2937);
+          --muted-foreground: light-dark(#4b5563, #9ca3af);
+          --accent: light-dark(#f3f4f6, #374151);
+          --accent-foreground: light-dark(#111827, #f3f4f6);
           --info: #3b82f6;
           --info-foreground: #ffffff;
-          --info-accent: #2563eb;
+          --info-accent: light-dark(#2563eb, #60a5fa);
           --success: #22c55e;
           --success-foreground: #ffffff;
-          --success-accent: #16a34a;
+          --success-accent: light-dark(#16a34a, #4ade80);
           --warning: #f59e0b;
           --warning-foreground: #000000;
-          --warning-accent: #d97706;
+          --warning-accent: light-dark(#d97706, #fbbf24);
           --error: #ef4444;
           --error-foreground: #f9fafb;
-          --error-accent: #dc2626;
-          --commentary: #ec4899;
-          --commentary-foreground: #f9fafb;
-          --commentary-accent: #db2777;
-          --ideation: #8b5cf6;
-          --ideation-foreground: #f9fafb;
-          --ideation-accent: #7c3aed;
-          --source: #38bdf8;
+          --error-accent: light-dark(#dc2626, #f87171);
+          --commentary: light-dark(#ec4899, #f472b6);
+          --commentary-foreground: light-dark(#f9fafb, #0f172a);
+          --commentary-accent: light-dark(#db2777, #f9a8d4);
+          --ideation: light-dark(#8b5cf6, #a78bfa);
+          --ideation-foreground: light-dark(#f9fafb, #0f172a);
+          --ideation-accent: light-dark(#7c3aed, #c4b5fd);
+          --source: light-dark(#38bdf8, #7dd3fc);
           --source-foreground: #0f172a;
-          --source-accent: #0284c7;
-          --border: #e5e7eb;
-          --input: #e5e7eb;
-          --outline: #9ca3af;
-          --ring: #9ca3af;
+          --source-accent: light-dark(#0284c7, #bae6fd);
+          --border: light-dark(#e5e7eb, rgba(249, 250, 251, 0.1));
+          --input: light-dark(#e5e7eb, rgba(249, 250, 251, 0.15));
+          --outline: light-dark(#9ca3af, #6b7280);
+          --ring: light-dark(#9ca3af, #6b7280);
           --radius: 0.625rem;
-          --sidebar: #f9fafb;
-          --sidebar-foreground: #030712;
+          --sidebar: light-dark(#f9fafb, #111827);
+          --sidebar-foreground: light-dark(#030712, #f9fafb);
           --sidebar-primary: #1d4ed8;
           --sidebar-primary-foreground: #f9fafb;
-          --sidebar-accent: #f3f4f6;
-          --sidebar-accent-foreground: #111827;
-          --sidebar-border: #e5e7eb;
-          --sidebar-ring: #9ca3af;
-          --chart-1: #3b82f6;
-          --chart-2: #6366f1;
-          --chart-3: #8b5cf6;
-          --chart-4: #a855f7;
-          --chart-5: #ec4899;
-          --destructive: #ef4444;
-          --color-surface: #ffffff;
-          --color-muted-strong: #e5e7eb;
-          --color-foreground-secondary: #4b5563;
-          --color-foreground-tertiary: #6b7280;
-          --color-placeholder: #9ca3af;
-          --color-input-border: #d1d5db;
-          --color-hover: #f3f4f6;
-          --color-destructive-subtle: #fef2f2;
-          --color-accent-subtle: #eff6ff;
+          --sidebar-accent: light-dark(#f3f4f6, #1f2937);
+          --sidebar-accent-foreground: light-dark(#111827, #f3f4f6);
+          --sidebar-border: light-dark(#e5e7eb, #1f2937);
+          --sidebar-ring: light-dark(#9ca3af, #6b7280);
+          --chart-1: light-dark(#3b82f6, #60a5fa);
+          --chart-2: light-dark(#6366f1, #818cf8);
+          --chart-3: light-dark(#8b5cf6, #a78bfa);
+          --chart-4: light-dark(#a855f7, #c084fc);
+          --chart-5: light-dark(#ec4899, #f472b6);
+          --destructive: light-dark(#ef4444, #f87171);
+          --color-surface: light-dark(#ffffff, #1f2937);
+          --color-muted-strong: light-dark(#e5e7eb, #374151);
+          --color-foreground-secondary: light-dark(#4b5563, #d1d5db);
+          --color-foreground-tertiary: light-dark(#6b7280, #9ca3af);
+          --color-placeholder: light-dark(#9ca3af, #6b7280);
+          --color-input-border: light-dark(#d1d5db, #4b5563);
+          --color-hover: light-dark(#f3f4f6, #374151);
+          --color-destructive-subtle: light-dark(#fef2f2, #451a1a);
+          --color-accent-subtle: light-dark(#eff6ff, #1e293b);
           --font-sans: "Noto Sans", sans-serif;
           --font-serif: "Noto Serif", serif;
           --font-mono: "Noto Sans Mono", monospace;
 
           --ui-header-height: 4rem;
           --ui-container: 80rem;
+          --rl-container: 1440px;
+
+          /* Text / background / border / ring semantic tokens using responsive neutral variables */
           --text-color-default: var(--color-neutral-700);
           --text-color-muted: var(--color-neutral-500);
           --text-color-dimmed: var(--color-neutral-400);
           --text-color-toned: var(--color-neutral-600);
-          --text-color-highlighted: var(--color-neutral-900);
-          --text-color-inverted: #ffffff;
-          --background-color-default: #ffffff;
-          --background-color-muted: var(--color-neutral-50);
-          --background-color-elevated: var(--color-neutral-100);
-          --background-color-accented: var(--color-neutral-200);
-          --background-color-inverted: var(--color-neutral-900);
+          --text-color-highlighted: var(--color-neutral-950);
+          --text-color-inverted: light-dark(#ffffff, var(--color-neutral-50));
+          --background-color-default: light-dark(#ffffff, var(--color-neutral-50));
+          --background-color-muted: var(--color-neutral-100);
+          --background-color-elevated: var(--color-neutral-200);
+          --background-color-accented: var(--color-neutral-300);
+          --background-color-inverted: var(--color-neutral-950);
           --border-color-default: var(--color-neutral-200);
-          --border-color-muted: var(--color-neutral-200);
+          --border-color-muted: var(--color-neutral-100);
           --border-color-accented: var(--color-neutral-300);
-          --border-color-inverted: var(--color-neutral-900);
+          --border-color-inverted: var(--color-neutral-950);
           --ring-color-default: var(--color-neutral-200);
-          --ring-color-muted: var(--color-neutral-200);
+          --ring-color-muted: var(--color-neutral-100);
           --ring-color-accented: var(--color-neutral-300);
-          --ring-color-inverted: var(--color-neutral-900);
+          --ring-color-inverted: var(--color-neutral-950);
           --divide-color-default: var(--color-neutral-200);
-${lightLines}
-${flatLines}
-${lightPinnedLines}
-${darkPinnedLines}
+          --divide-color-inverted: var(--color-neutral-950);
+
+          /* Color scales — light-dark() resolves based on inherited color-scheme */
+${lightDarkLines}
 
           /* Shiki / Expressive Code */
           --shiki-foreground: #e1e4e8;
@@ -575,105 +485,20 @@ ${darkPinnedLines}
           --shiki-token-parameter: #ffab70;
           --shiki-token-punctuation: #e1e4e8;
         }
-
+        /* Re-declare color on semantic text elements so light-dark() re-evaluates
+           against each element's own inherited color-scheme. Without this, plain
+           text inherits a pre-computed color from body and ignores rl-dark/rl-light
+           wrappers. All rules are overridable by any utility class. */
+        p, h1, h2, h3, h4, h5, h6,
+        li, blockquote, figcaption, caption,
+        label, legend, dt, dd {
+          color: var(--foreground);
+        }
         .dark {
-          --background: #030712;
-          --foreground: #f9fafb;
-          --card: #111827;
-          --card-foreground: #f9fafb;
-          --popover: #1f2937;
-          --popover-foreground: #f9fafb;
-          --primary: #3b82f6;
-          --primary-foreground: #ffffff;
-          --primary-accent: #60a5fa;
-          --secondary: #8b5cf6;
-          --secondary-foreground: #f9fafb;
-          --secondary-accent: #a78bfa;
-          --muted: #1f2937;
-          --muted-foreground: #9ca3af;
-          --accent: #374151;
-          --accent-foreground: #f3f4f6;
-          --info: #3b82f6;
-          --info-foreground: #ffffff;
-          --info-accent: #60a5fa;
-          --success: #22c55e;
-          --success-foreground: #ffffff;
-          --success-accent: #4ade80;
-          --warning: #f59e0b;
-          --warning-foreground: #000000;
-          --warning-accent: #fbbf24;
-          --error: #ef4444;
-          --error-foreground: #f9fafb;
-          --error-accent: #f87171;
-          --commentary: #f472b6;
-          --commentary-foreground: #0f172a;
-          --commentary-accent: #f9a8d4;
-          --ideation: #a78bfa;
-          --ideation-foreground: #0f172a;
-          --ideation-accent: #c4b5fd;
-          --source: #7dd3fc;
-          --source-foreground: #0f172a;
-          --source-accent: #bae6fd;
-          --border: rgba(249, 250, 251, 0.1);
-          --input: rgba(249, 250, 251, 0.15);
-          --outline: #6b7280;
-          --ring: #6b7280;
-          --sidebar: #111827;
-          --sidebar-foreground: #f9fafb;
-          --sidebar-primary: #1d4ed8;
-          --sidebar-primary-foreground: #f9fafb;
-          --sidebar-accent: #1f2937;
-          --sidebar-accent-foreground: #f3f4f6;
-          --sidebar-border: #1f2937;
-          --sidebar-ring: #6b7280;
-          --chart-1: #60a5fa;
-          --chart-2: #818cf8;
-          --chart-3: #a78bfa;
-          --chart-4: #c084fc;
-          --chart-5: #f472b6;
-          --destructive: #f87171;
-          --color-surface: #1f2937;
-          --color-muted-strong: #374151;
-          --color-foreground-secondary: #d1d5db;
-          --color-foreground-tertiary: #9ca3af;
-          --color-placeholder: #6b7280;
-          --color-input-border: #4b5563;
-          --color-hover: #374151;
-          --color-destructive-subtle: #451a1a;
-          --color-accent-subtle: #1e293b;
-
-          --text-color-default: var(--color-neutral-200);
-          --text-color-muted: var(--color-neutral-400);
-          --text-color-dimmed: var(--color-neutral-500);
-          --text-color-toned: var(--color-neutral-300);
-          --text-color-highlighted: #ffffff;
-          --text-color-inverted: #030712;
-          --background-color-default: var(--color-neutral-900);
-          --background-color-muted: var(--color-neutral-800);
-          --background-color-elevated: var(--color-neutral-800);
-          --background-color-accented: var(--color-neutral-700);
-          --background-color-inverted: #ffffff;
-          --border-color-default: var(--color-neutral-800);
-          --border-color-muted: var(--color-neutral-700);
-          --border-color-accented: var(--color-neutral-700);
-          --border-color-inverted: #ffffff;
-          --ring-color-default: var(--color-neutral-800);
-          --ring-color-muted: var(--color-neutral-700);
-          --ring-color-accented: var(--color-neutral-700);
-          --ring-color-inverted: #ffffff;
-          --divide-color-default: var(--color-neutral-800);
-${darkLines}
-
-          /* Shiki / Expressive Code */
-          --shiki-foreground: #e1e4e8;
-          --shiki-background: #1f2428;
-          --shiki-token-keyword: #f97583;
-          --shiki-token-string: #9ecbff;
-          --shiki-token-comment: #6a737d;
-          --shiki-token-function: #b392f0;
-          --shiki-token-constant: #79b8ff;
-          --shiki-token-parameter: #ffab70;
-          --shiki-token-punctuation: #e1e4e8;
+          color-scheme: dark;
+        }
+        .light {
+          color-scheme: light;
         }
         `
         }

package/src/styles/index.css

@@ -1,5 +1,3 @@
-@import "./prism.css";
-
 body {
   background-color: var(--background);
   color: var(--foreground);

package/src/themes/accordion.theme.ts

@@ -2,11 +2,37 @@ import { defineTheme } from "../utils/defineTheme"
 
 export const createAccordionTheme = () =>
   defineTheme({
-    slots: ["root"],
+    slots: [
+      "root",
+      "item",
+      "header",
+      "trigger",
+      "content",
+      "body",
+      "leadingIcon",
+      "trailingIcon",
+      "label"
+    ],
     base: {
-      root: ""
+      root: "w-full",
+      item: "border-b border-default last:border-b-0",
+      header: "flex",
+      trigger:
+        "group flex w-full flex-1 items-center gap-1.5 font-medium text-sm py-3.5 px-4 focus-visible:outline-primary min-w-0 cursor-pointer list-none [&::-webkit-details-marker]:hidden",
+      content: "overflow-hidden focus:outline-none pt-1 px-4",
+      body: "text-sm pb-3.5 text-astro-gray-200",
+      leadingIcon: "shrink-0 size-5 text-astro-gray-300",
+      trailingIcon:
+        "shrink-0 size-5 ms-auto rotate-0 transition-transform duration-200 group-open:rotate-180 text-astro-gray-300",
+      label: "text-start break-words text-astro-gray-100"
+    },
+    variants: {
+      disabled: {
+        true: {
+          trigger: "cursor-not-allowed opacity-50 select-none"
+        }
+      }
     },
-    variants: {},
     defaultVariants: {}
   })
 

package/src/themes/aspect-ratio.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createAspectRatioTheme = (colors: string[] = defaultColors) =>
+export const createAspectRatioTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "content"],
     base: {

package/src/themes/avatar-group.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createAvatarGroupTheme = (colors: string[] = defaultColors) =>
+export const createAvatarGroupTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root"],
     base: {

package/src/themes/avatar.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createAvatarTheme = (colors: string[] = defaultColors) =>
+export const createAvatarTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "image", "fallback", "icon", "badge"],
     base: {
@@ -25,7 +25,7 @@ export const createAvatarTheme = (colors: string[] = defaultColors) =>
         ),
         neutral: {
           root: "bg-elevated",
-          fallback: "text-muted",
+          fallback: "text-foreground",
           icon: "text-muted"
         }
       },