refactor(colors): simplify command color representation and improve formatting

Author: NonSwag

src/lib/command-colors.ts

@@ -1,52 +1,30 @@
-export interface CommandColor {
-  hsl: string;
-}
-
 /**
  * Represents a color used by the command highlighter.
- * Currently only HSL is used by the transformer for inline styles.
  *
  * @example
  * ```command
  * <green>content</green>
  * ```
  */
-export const commandColors: Record<string, CommandColor> = {
-  green: {
-    hsl: "hsl(142, 76%, 36%)",
-  },
-  red: {
-    hsl: "hsl(0, 84%, 60%)",
-  },
-  blue: {
-    hsl: "hsl(221, 83%, 53%)",
-  },
-  yellow: {
-    hsl: "hsl(48, 96%, 53%)",
-  },
-  purple: {
-    hsl: "hsl(262, 83%, 58%)",
-  },
-  orange: {
-    hsl: "hsl(25, 95%, 53%)",
-  },
-  cyan: {
-    hsl: "hsl(187, 100%, 42%)",
-  },
-  pink: {
-    hsl: "hsl(330, 81%, 60%)",
-  },
-  gray: {
-    hsl: "hsl(215, 16%, 47%)",
-  },
-  white: {
-    hsl: "hsl(0, 0%, 100%)",
-  },
-  black: {
-    hsl: "hsl(0, 0%, 0%)",
-  }
-};
+export const commandColors: Record<string, string> = {
+  black: "#000000",
+  dark_blue: "#0000aa",
+  dark_green: "#00aa00",
+  dark_aqua: "#00aaaa",
+  dark_red: "#aa0000",
+  dark_purple: "#aa00aa",
+  gold: "#ffaa00",
+  gray: "#aaaaaa",
+  dark_gray: "#555555",
+  blue: "#5555ff",
+  green: "#55ff55",
+  aqua: "#55ffff",
+  red: "#ff5555",
+  light_purple: "#ff55ff",
+  yellow: "#ffff55",
+  white: "#ffffff",
+}
 
-export function getCommandColor(colorName: string): CommandColor | null {
-  return commandColors[colorName.toLowerCase()] || null;
+export function getCommandColor(colorName: string): string | null {
+  return commandColors[colorName.toLowerCase()] || null
 }

src/lib/command-transformer.ts

@@ -1,5 +1,5 @@
-import type { ShikiTransformer, ThemedToken } from '@shikijs/types'
-import { getCommandColor } from './command-colors'
+import type { ShikiTransformer, ThemedToken } from "@shikijs/types"
+import { getCommandColor } from "./command-colors"
 
 interface ColorContentRange {
   start: number
@@ -39,8 +39,11 @@ function detectRanges(code: string): MetaRanges {
 
 function splitTokenAtOffsets(token: ThemedToken, breakpoints: number[]): ThemedToken[] {
   if (!breakpoints.length) return [token]
-  const local = Array.from(new Set(breakpoints.filter(bp => bp > token.offset && bp < token.offset + token.content.length)))
-    .sort((a, b) => a - b)
+  const local = Array.from(
+    new Set(
+      breakpoints.filter((bp) => bp > token.offset && bp < token.offset + token.content.length),
+    ),
+  ).sort((a, b) => a - b)
 
   if (!local.length) return [token]
 
@@ -49,7 +52,11 @@ function splitTokenAtOffsets(token: ThemedToken, breakpoints: number[]): ThemedT
   for (const bp of local) {
     const idx = bp - token.offset
     if (idx > last) {
-      result.push({ ...token, content: token.content.slice(last, idx), offset: token.offset + last })
+      result.push({
+        ...token,
+        content: token.content.slice(last, idx),
+        offset: token.offset + last,
+      })
     }
     last = idx
   }
@@ -63,7 +70,7 @@ export function transformerCommandColor(): ShikiTransformer {
   const map = new WeakMap<object, MetaRanges>()
 
   return {
-    name: 'color-tags',
+    name: "color-tags",
     preprocess(code) {
       const ranges = detectRanges(code)
       const metaKey = (this as unknown as { meta?: object }).meta ?? {}
@@ -91,24 +98,28 @@ export function transformerCommandColor(): ShikiTransformer {
 
         if (!bps.length) return line
 
-        const splitted = line.flatMap(t => splitTokenAtOffsets(t, bps))
+        const splitted = line.flatMap((t) => splitTokenAtOffsets(t, bps))
 
-        const styled: ThemedToken[] = splitted.map(seg => {
-          const inHide = ranges.hides.some(r => r.start <= seg.offset && seg.offset + seg.content.length <= r.end)
+        const styled: ThemedToken[] = splitted.map((seg) => {
+          const inHide = ranges.hides.some(
+            (r) => r.start <= seg.offset && seg.offset + seg.content.length <= r.end,
+          )
           if (inHide) {
             return {
               ...seg,
-              htmlStyle: { ...(seg.htmlStyle || {}), display: 'none' },
+              htmlStyle: { ...(seg.htmlStyle || {}), display: "none" },
             }
           }
 
-          const contentRange = ranges.contents.find(r => r.start <= seg.offset && seg.offset + seg.content.length <= r.end)
+          const contentRange = ranges.contents.find(
+            (r) => r.start <= seg.offset && seg.offset + seg.content.length <= r.end,
+          )
           if (contentRange) {
             const cfg = getCommandColor(contentRange.color)
             if (cfg) {
               return {
                 ...seg,
-                htmlStyle: { ...(seg.htmlStyle || {}), color: cfg.hsl },
+                htmlStyle: { ...(seg.htmlStyle || {}), color: cfg },
               }
             }
           }