@silvery/theme 0.3.0

package/src/cli.ts

@@ -0,0 +1,275 @@
+#!/usr/bin/env bun
+/**
+ * @silvery/theme CLI — browse and preview built-in themes.
+ *
+ * Usage:
+ *   bun theme              # Interactive theme browser
+ *   bun theme list         # List all themes
+ *   bun theme show <name>  # Show a specific theme
+ *   bun theme json <name>  # Output theme as JSON
+ */
+
+import { builtinPalettes, getThemeByName } from "./palettes"
+import { deriveTheme } from "./derive"
+import type { Theme, ColorPalette } from "./types"
+
+// ── ANSI helpers ─────────────────────────────────────────────────────
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace("#", "")
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
+}
+
+function fg(hex: string, text: string): string {
+  const [r, g, b] = hexToRgb(hex)
+  return `\x1b[38;2;${r};${g};${b}m${text}\x1b[0m`
+}
+
+function bg(hex: string, text: string): string {
+  const [r, g, b] = hexToRgb(hex)
+  return `\x1b[48;2;${r};${g};${b}m${text}\x1b[0m`
+}
+
+function swatch(hex: string): string {
+  return bg(hex, "  ")
+}
+
+// ── Commands ─────────────────────────────────────────────────────────
+
+function listThemes(): void {
+  const names = Object.keys(builtinPalettes).sort()
+  console.log(`\n  ${names.length} built-in palettes:\n`)
+
+  for (const name of names) {
+    const palette = builtinPalettes[name]!
+    const theme = deriveTheme(palette)
+    const swatches = [
+      swatch(palette.background),
+      swatch(palette.red),
+      swatch(palette.green),
+      swatch(palette.yellow),
+      swatch(palette.blue),
+      swatch(palette.magenta),
+      swatch(palette.cyan),
+      swatch(palette.foreground),
+    ].join("")
+    const mode = palette.dark !== false ? "dark" : "light"
+    console.log(`  ${swatches}  ${name.padEnd(24)} ${fg(palette.foreground, mode)}`)
+  }
+  console.log()
+}
+
+function showTheme(name: string): void {
+  const palette = builtinPalettes[name]
+  if (!palette) {
+    console.error(`Unknown theme: ${name}`)
+    console.error(`Available: ${Object.keys(builtinPalettes).sort().join(", ")}`)
+    process.exit(1)
+  }
+
+  const theme = deriveTheme(palette)
+  const line = "─".repeat(50)
+
+  console.log(`\n  ${fg(palette.foreground, name)}`)
+  console.log(`  ${fg(palette.brightBlack ?? palette.white, line)}\n`)
+
+  // 16-color ANSI palette
+  console.log("  ANSI palette:")
+  const ansiColors = [
+    palette.black,
+    palette.red,
+    palette.green,
+    palette.yellow,
+    palette.blue,
+    palette.magenta,
+    palette.cyan,
+    palette.white,
+  ]
+  const brightColors = [
+    palette.brightBlack,
+    palette.brightRed,
+    palette.brightGreen,
+    palette.brightYellow,
+    palette.brightBlue,
+    palette.brightMagenta,
+    palette.brightCyan,
+    palette.brightWhite,
+  ]
+  console.log("  " + ansiColors.map((c) => bg(c, "    ")).join(""))
+  console.log("  " + brightColors.map((c) => bg(c, "    ")).join(""))
+
+  // Special colors
+  console.log(`\n  Special:`)
+  console.log(`  ${swatch(palette.background)} background  ${swatch(palette.foreground)} foreground`)
+  console.log(`  ${swatch(palette.cursorColor)} cursor      ${swatch(palette.selectionBackground)} selection`)
+
+  // Semantic tokens
+  console.log(`\n  Semantic tokens:`)
+  const tokens: Array<[string, string]> = [
+    ["primary", theme.primary],
+    ["secondary", theme.secondary],
+    ["accent", theme.accent],
+    ["error", theme.error],
+    ["warning", theme.warning],
+    ["success", theme.success],
+    ["info", theme.info],
+    ["border", theme.border],
+    ["link", theme.link],
+    ["surface", theme.surface],
+  ]
+  for (const [label, color] of tokens) {
+    if (color.startsWith("#")) {
+      console.log(`  ${swatch(color)} ${label}`)
+    }
+  }
+
+  // Preview
+  console.log(`\n  Preview:`)
+  const previewBg = palette.background
+  const previewFg = palette.foreground
+  console.log(`  ${bg(previewBg, fg(previewFg, `  Hello from ${name}!  `))}`)
+  console.log(
+    `  ${bg(previewBg, fg(theme.primary.startsWith("#") ? theme.primary : palette.blue, `  Primary text          `))}`,
+  )
+  console.log(
+    `  ${bg(previewBg, fg(theme.success.startsWith("#") ? theme.success : palette.green, `  Success message       `))}`,
+  )
+  console.log(
+    `  ${bg(previewBg, fg(theme.error.startsWith("#") ? theme.error : palette.red, `  Error message         `))}`,
+  )
+  console.log()
+}
+
+function showJson(name: string): void {
+  const palette = builtinPalettes[name]
+  if (!palette) {
+    console.error(`Unknown theme: ${name}`)
+    process.exit(1)
+  }
+  const theme = deriveTheme(palette)
+  console.log(JSON.stringify(theme, null, 2))
+}
+
+async function interactiveBrowser(): Promise<void> {
+  const names = Object.keys(builtinPalettes).sort()
+  let cursor = 0
+
+  // Save screen, hide cursor
+  process.stdout.write("\x1b[?1049h\x1b[?25l")
+
+  function render(): void {
+    const { rows = 24, columns = 80 } = process.stdout
+    const visibleRows = rows - 4
+    const startIdx = Math.max(0, cursor - Math.floor(visibleRows / 2))
+    const endIdx = Math.min(names.length, startIdx + visibleRows)
+
+    // Clear and move to top
+    process.stdout.write("\x1b[2J\x1b[H")
+
+    // Header
+    process.stdout.write(
+      `  \x1b[1m@silvery/theme\x1b[0m — ${names.length} palettes  (j/k navigate, Enter show, q quit)\n\n`,
+    )
+
+    // List
+    for (let i = startIdx; i < endIdx; i++) {
+      const name = names[i]!
+      const palette = builtinPalettes[name]!
+      const swatches = [
+        swatch(palette.background),
+        swatch(palette.red),
+        swatch(palette.green),
+        swatch(palette.yellow),
+        swatch(palette.blue),
+        swatch(palette.magenta),
+        swatch(palette.cyan),
+        swatch(palette.foreground),
+      ].join("")
+
+      if (i === cursor) {
+        process.stdout.write(`  \x1b[7m ${swatches}  ${name.padEnd(28)}\x1b[0m\n`)
+      } else {
+        process.stdout.write(`   ${swatches}  ${name}\n`)
+      }
+    }
+
+    // Preview of selected theme
+    const selectedName = names[cursor]!
+    const palette = builtinPalettes[selectedName]!
+    const previewBg = palette.background
+    const previewFg = palette.foreground
+    process.stdout.write(`\n  ${bg(previewBg, fg(previewFg, `  ${selectedName}  `))}`)
+  }
+
+  render()
+
+  // Raw mode for key input
+  if (process.stdin.isTTY) {
+    process.stdin.setRawMode(true)
+  }
+  process.stdin.resume()
+
+  return new Promise<void>((resolve) => {
+    process.stdin.on("data", (data: Buffer) => {
+      const key = data.toString()
+
+      if (key === "q" || key === "\x1b" || key === "\x03") {
+        // Restore screen, show cursor
+        process.stdout.write("\x1b[?1049l\x1b[?25h")
+        if (process.stdin.isTTY) process.stdin.setRawMode(false)
+        process.stdin.pause()
+        resolve()
+        return
+      }
+
+      if (key === "j" || key === "\x1b[B") {
+        cursor = Math.min(cursor + 1, names.length - 1)
+      } else if (key === "k" || key === "\x1b[A") {
+        cursor = Math.max(cursor - 1, 0)
+      } else if (key === "g") {
+        cursor = 0
+      } else if (key === "G") {
+        cursor = names.length - 1
+      } else if (key === "\r" || key === "\n") {
+        // Show detailed view
+        process.stdout.write("\x1b[?1049l\x1b[?25h")
+        if (process.stdin.isTTY) process.stdin.setRawMode(false)
+        process.stdin.pause()
+        showTheme(names[cursor]!)
+        resolve()
+        return
+      }
+
+      render()
+    })
+  })
+}
+
+// ── Main ─────────────────────────────────────────────────────────────
+
+const [cmd, ...args] = process.argv.slice(2)
+
+switch (cmd) {
+  case "list":
+    listThemes()
+    break
+  case "show":
+    showTheme(args[0] ?? "")
+    break
+  case "json":
+    showJson(args[0] ?? "")
+    break
+  case undefined:
+  case "view":
+    await interactiveBrowser()
+    break
+  default:
+    // Treat as theme name: bun theme catppuccin-mocha
+    if (builtinPalettes[cmd]) {
+      showTheme(cmd)
+    } else {
+      console.error(`Unknown command: ${cmd}`)
+      console.error("Usage: bun theme [list|show <name>|json <name>|view]")
+      process.exit(1)
+    }
+}

package/src/color.ts

@@ -0,0 +1,142 @@
+/**
+ * Color manipulation utilities.
+ *
+ * Operates in OKLCH for perceptual uniformity — hue rotations look right,
+ * lightness changes feel linear, chroma is preserved.
+ *
+ * Currently uses simple RGB blending as a foundation. Full OKLCH conversion
+ * will be added when needed for advanced derivation (shade generation,
+ * palette generation from minimal input).
+ */
+
+// ============================================================================
+// Hex ↔ RGB Parsing
+// ============================================================================
+
+/** Parse a hex color string to [r, g, b] (0-255). Returns null for non-hex. */
+export function hexToRgb(hex: string): [number, number, number] | null {
+  const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex)
+  if (!match) return null
+  return [parseInt(match[1]!, 16), parseInt(match[2]!, 16), parseInt(match[3]!, 16)]
+}
+
+/** Convert [r, g, b] (0-255) to hex string. */
+export function rgbToHex(r: number, g: number, b: number): string {
+  const clamp = (n: number) => Math.max(0, Math.min(255, Math.round(n)))
+  return `#${clamp(r).toString(16).padStart(2, "0")}${clamp(g).toString(16).padStart(2, "0")}${clamp(b).toString(16).padStart(2, "0")}`.toUpperCase()
+}
+
+// ============================================================================
+// Color Manipulation
+// ============================================================================
+
+/**
+ * Blend two hex colors. t=0 returns a, t=1 returns b.
+ * For non-hex inputs (ANSI names), returns `a` unchanged.
+ */
+export function blend(a: string, b: string, t: number): string {
+  const rgbA = hexToRgb(a)
+  const rgbB = hexToRgb(b)
+  if (!rgbA || !rgbB) return a
+
+  return rgbToHex(
+    rgbA[0] + (rgbB[0] - rgbA[0]) * t,
+    rgbA[1] + (rgbB[1] - rgbA[1]) * t,
+    rgbA[2] + (rgbB[2] - rgbA[2]) * t,
+  )
+}
+
+/**
+ * Brighten a hex color. amount=0.1 adds 10% lightness toward white.
+ * For non-hex inputs (ANSI names), returns the color unchanged.
+ */
+export function brighten(color: string, amount: number): string {
+  return blend(color, "#FFFFFF", amount)
+}
+
+/**
+ * Darken a hex color. amount=0.1 adds 10% darkness toward black.
+ * For non-hex inputs (ANSI names), returns the color unchanged.
+ */
+export function darken(color: string, amount: number): string {
+  return blend(color, "#000000", amount)
+}
+
+/**
+ * Pick black or white text for readability on the given background.
+ * Uses relative luminance (WCAG formula).
+ */
+export function contrastFg(bg: string): "#000000" | "#FFFFFF" {
+  const rgb = hexToRgb(bg)
+  if (!rgb) return "#FFFFFF" // default to white for non-hex
+
+  // Relative luminance per WCAG 2.0
+  const [r, g, b] = rgb.map((c) => {
+    const s = c / 255
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
+  })
+  const luminance = 0.2126 * r! + 0.7152 * g! + 0.0722 * b!
+  return luminance > 0.179 ? "#000000" : "#FFFFFF"
+}
+
+// ============================================================================
+// HSL Utilities
+// ============================================================================
+
+export type HSL = [number, number, number] // [h: 0-360, s: 0-1, l: 0-1]
+
+export function rgbToHsl(r: number, g: number, b: number): HSL {
+  r /= 255
+  g /= 255
+  b /= 255
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b)
+  const l = (max + min) / 2
+  if (max === min) return [0, 0, l]
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+  let h = 0
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+  else if (max === g) h = ((b - r) / d + 2) / 6
+  else h = ((r - g) / d + 4) / 6
+  return [h * 360, s, l]
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  h = ((h % 360) + 360) % 360
+  const a = s * Math.min(l, 1 - l)
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12
+    return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+  }
+  return rgbToHex(f(0) * 255, f(8) * 255, f(4) * 255)
+}
+
+export function hexToHsl(hex: string): HSL | null {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return null
+  return rgbToHsl(rgb[0], rgb[1], rgb[2])
+}
+
+/**
+ * Desaturate a hex color by reducing saturation.
+ * amount=0.4 reduces saturation by 40%.
+ * For non-hex inputs, returns the color unchanged.
+ */
+export function desaturate(color: string, amount: number): string {
+  const hsl = hexToHsl(color)
+  if (!hsl) return color
+  const [h, s, l] = hsl
+  return hslToHex(h, s * (1 - amount), l)
+}
+
+/**
+ * Get the complementary color (180° hue rotation).
+ * For non-hex inputs, returns the color unchanged.
+ */
+export function complement(color: string): string {
+  const hsl = hexToHsl(color)
+  if (!hsl) return color
+  const [h, s, l] = hsl
+  return hslToHex(h + 180, s, l)
+}

package/src/contrast.ts

@@ -0,0 +1,75 @@
+/**
+ * WCAG 2.1 contrast checking — compute contrast ratios between colors.
+ *
+ * Uses the relative luminance formula from WCAG 2.1 to calculate
+ * contrast ratios and check AA/AAA compliance levels.
+ */
+
+import { hexToRgb } from "./color"
+
+/** Result of a contrast check between two colors. */
+export interface ContrastResult {
+  /** The contrast ratio (1:1 to 21:1), expressed as a single number (e.g. 4.5). */
+  ratio: number
+  /** Whether the ratio meets WCAG AA for normal text (>= 4.5:1). */
+  aa: boolean
+  /** Whether the ratio meets WCAG AAA for normal text (>= 7:1). */
+  aaa: boolean
+}
+
+/**
+ * Compute relative luminance of an sRGB color channel value (0-255).
+ * Per WCAG 2.1: linearize, then weight by standard coefficients.
+ */
+function channelLuminance(c: number): number {
+  const s = c / 255
+  return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
+}
+
+/**
+ * Compute relative luminance of a hex color.
+ * Returns a value between 0 (darkest) and 1 (lightest).
+ */
+function relativeLuminance(hex: string): number | null {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return null
+  return 0.2126 * channelLuminance(rgb[0]) + 0.7152 * channelLuminance(rgb[1]) + 0.0722 * channelLuminance(rgb[2])
+}
+
+/**
+ * Check contrast ratio between foreground and background colors.
+ *
+ * Uses the WCAG 2.1 relative luminance formula to compute the contrast
+ * ratio and check AA (>= 4.5:1) and AAA (>= 7:1) compliance for normal text.
+ *
+ * @param fg - Foreground hex color (e.g. "#FFFFFF")
+ * @param bg - Background hex color (e.g. "#000000")
+ * @returns Contrast ratio and AA/AAA pass/fail, or null if colors are not valid hex
+ *
+ * @example
+ * ```typescript
+ * const result = checkContrast("#FFFFFF", "#000000")
+ * // { ratio: 21, aa: true, aaa: true }
+ *
+ * const poor = checkContrast("#777777", "#888888")
+ * // { ratio: ~1.3, aa: false, aaa: false }
+ * ```
+ */
+export function checkContrast(fg: string, bg: string): ContrastResult | null {
+  const fgLum = relativeLuminance(fg)
+  const bgLum = relativeLuminance(bg)
+  if (fgLum === null || bgLum === null) return null
+
+  const lighter = Math.max(fgLum, bgLum)
+  const darker = Math.min(fgLum, bgLum)
+  const ratio = (lighter + 0.05) / (darker + 0.05)
+
+  // Round to 2 decimal places for practical use
+  const roundedRatio = Math.round(ratio * 100) / 100
+
+  return {
+    ratio: roundedRatio,
+    aa: roundedRatio >= 4.5,
+    aaa: roundedRatio >= 7,
+  }
+}

package/src/css.ts

@@ -0,0 +1,51 @@
+/**
+ * CSS variables export — convert theme tokens to CSS custom properties.
+ *
+ * Generates a flat map of CSS custom property names to color values,
+ * suitable for applying as inline styles or injecting into a stylesheet.
+ */
+
+import type { Theme } from "./types"
+import { THEME_TOKEN_KEYS } from "./validate-theme"
+
+/**
+ * Convert a Theme to CSS custom properties.
+ *
+ * Token names are kebab-cased with a `--` prefix:
+ *   - `bg` → `--bg`
+ *   - `surfacebg` → `--surfacebg`
+ *   - `disabledfg` → `--disabledfg`
+ *   - Palette entries: `--color0` through `--color15`
+ *
+ * @param theme - The theme to convert
+ * @returns A record mapping CSS custom property names to color values
+ *
+ * @example
+ * ```typescript
+ * const vars = themeToCSSVars(myTheme)
+ * // { "--bg": "#1E1E2E", "--fg": "#CDD6F4", "--primary": "#F9E2AF", ... }
+ *
+ * // Apply to an element:
+ * Object.assign(element.style, vars)
+ * ```
+ */
+export function themeToCSSVars(theme: Theme): Record<string, string> {
+  const vars: Record<string, string> = {}
+
+  // Semantic tokens
+  for (const key of THEME_TOKEN_KEYS) {
+    const value = theme[key as keyof Theme]
+    if (typeof value === "string") {
+      vars[`--${key}`] = value
+    }
+  }
+
+  // Palette colors
+  if (theme.palette) {
+    for (let i = 0; i < theme.palette.length; i++) {
+      vars[`--color${i}`] = theme.palette[i]!
+    }
+  }
+
+  return vars
+}

package/src/derive.ts

@@ -0,0 +1,167 @@
+/**
+ * Theme derivation — transforms a ColorPalette into a Theme.
+ *
+ * All inputs ultimately flow through deriveTheme():
+ *   ColorPalette (22) → deriveTheme() → Theme (33)
+ *
+ * Supports two modes:
+ *   - truecolor (default): rich derivation with blends, contrast pairing, OKLCH
+ *   - ansi16: direct aliases into the 22 palette colors (no blending)
+ */
+
+import { blend, contrastFg, desaturate, complement } from "./color"
+import type { ColorPalette, Theme } from "./types"
+
+/**
+ * Derive a complete Theme from a ColorPalette.
+ *
+ * The palette provides 22 terminal colors. This function maps them to
+ * 33 semantic tokens + a 16-color content palette.
+ *
+ * @param palette - The 22-color terminal palette
+ * @param mode - "truecolor" (default) for rich derivation, "ansi16" for direct aliases
+ */
+export function deriveTheme(palette: ColorPalette, mode: "ansi16" | "truecolor" = "truecolor"): Theme {
+  if (mode === "ansi16") return deriveAnsi16Theme(palette)
+  return deriveTruecolorTheme(palette)
+}
+
+function deriveTruecolorTheme(p: ColorPalette): Theme {
+  const dark = p.dark ?? true
+  const primaryColor = dark ? p.yellow : p.blue
+
+  return {
+    name: p.name ?? (dark ? "derived-dark" : "derived-light"),
+
+    // ── Root pair ─────────────────────────────────────────────────
+    bg: p.background,
+    fg: p.foreground,
+
+    // ── Surface pairs (base = text, *bg = background) ──────────
+    muted: blend(p.foreground, p.background, 0.4),
+    mutedbg: blend(p.background, p.foreground, 0.04),
+    surface: p.foreground,
+    surfacebg: blend(p.background, p.foreground, 0.05),
+    popover: p.foreground,
+    popoverbg: blend(p.background, p.foreground, 0.08),
+    inverse: contrastFg(blend(p.foreground, p.background, 0.1)),
+    inversebg: blend(p.foreground, p.background, 0.1),
+    cursor: p.cursorText,
+    cursorbg: p.cursorColor,
+    selection: p.selectionForeground,
+    selectionbg: p.selectionBackground,
+
+    // ── Accent pairs (base = area bg, *fg = text on area) ──────
+    primary: primaryColor,
+    primaryfg: contrastFg(primaryColor),
+    secondary: desaturate(primaryColor, 0.4),
+    secondaryfg: contrastFg(desaturate(primaryColor, 0.4)),
+    accent: complement(primaryColor),
+    accentfg: contrastFg(complement(primaryColor)),
+    error: p.red,
+    errorfg: contrastFg(p.red),
+    warning: p.yellow,
+    warningfg: contrastFg(p.yellow),
+    success: p.green,
+    successfg: contrastFg(p.green),
+    info: p.cyan,
+    infofg: contrastFg(p.cyan),
+
+    // ── Standalone ───────────────────────────────────────────────
+    border: blend(p.background, p.foreground, 0.15),
+    inputborder: blend(p.background, p.foreground, 0.25),
+    focusborder: dark ? p.brightBlue : p.blue,
+    link: p.blue,
+    disabledfg: blend(p.foreground, p.background, 0.5),
+
+    // ── 16 palette passthrough ───────────────────────────────────
+    palette: [
+      p.black,
+      p.red,
+      p.green,
+      p.yellow,
+      p.blue,
+      p.magenta,
+      p.cyan,
+      p.white,
+      p.brightBlack,
+      p.brightRed,
+      p.brightGreen,
+      p.brightYellow,
+      p.brightBlue,
+      p.brightMagenta,
+      p.brightCyan,
+      p.brightWhite,
+    ],
+  }
+}
+
+function deriveAnsi16Theme(p: ColorPalette): Theme {
+  const dark = p.dark ?? true
+  const primaryColor = dark ? p.yellow : p.blue
+
+  return {
+    name: p.name ?? (dark ? "derived-ansi16-dark" : "derived-ansi16-light"),
+
+    // ── Root pair ─────────────────────────────────────────────────
+    bg: p.background,
+    fg: p.foreground,
+
+    // ── Surface pairs (base = text, *bg = background) ──────────
+    muted: p.white,
+    mutedbg: p.black,
+    surface: p.foreground,
+    surfacebg: p.black,
+    popover: p.foreground,
+    popoverbg: p.black,
+    inverse: p.black,
+    inversebg: p.brightWhite,
+    cursor: p.cursorText,
+    cursorbg: p.cursorColor,
+    selection: p.selectionForeground,
+    selectionbg: p.selectionBackground,
+
+    // ── Accent pairs (base = area bg, *fg = text on area) ──────
+    primary: primaryColor,
+    primaryfg: p.black,
+    secondary: p.magenta,
+    secondaryfg: p.black,
+    accent: p.cyan,
+    accentfg: p.black,
+    error: dark ? p.brightRed : p.red,
+    errorfg: p.black,
+    warning: p.yellow,
+    warningfg: p.black,
+    success: dark ? p.brightGreen : p.green,
+    successfg: p.black,
+    info: p.cyan,
+    infofg: p.black,
+
+    // ── Standalone ───────────────────────────────────────────────
+    border: p.brightBlack,
+    inputborder: p.brightBlack,
+    focusborder: dark ? p.brightBlue : p.blue,
+    link: dark ? p.brightBlue : p.blue,
+    disabledfg: p.brightBlack,
+
+    // ── 16 palette passthrough ───────────────────────────────────
+    palette: [
+      p.black,
+      p.red,
+      p.green,
+      p.yellow,
+      p.blue,
+      p.magenta,
+      p.cyan,
+      p.white,
+      p.brightBlack,
+      p.brightRed,
+      p.brightGreen,
+      p.brightYellow,
+      p.brightBlue,
+      p.brightMagenta,
+      p.brightCyan,
+      p.brightWhite,
+    ],
+  }
+}