@shiinasaku/github-card 2.0.0 → 4.2.0

package/src/types.ts

@@ -37,4 +37,5 @@ export interface CardOptions {
   hide_border?: boolean;
   compact?: boolean;
   hide?: string[];
+  animate?: boolean;
 }

package/src/utils/colors.ts

@@ -0,0 +1,85 @@
+export const twColors: Record<string, string> = {
+  transparent: "transparent",
+  current: "currentColor",
+  white: "#ffffff",
+  black: "#000000",
+  "slate-50": "#f8fafc",
+  "slate-100": "#f1f5f9",
+  "slate-200": "#e2e8f0",
+  "slate-300": "#cbd5e1",
+  "slate-400": "#94a3b8",
+  "slate-500": "#64748b",
+  "slate-600": "#475569",
+  "slate-700": "#334155",
+  "slate-800": "#1e293b",
+  "slate-900": "#0f172a",
+  "slate-950": "#020617",
+  "neutral-800": "#262626",
+  "neutral-950": "#0a0a0a",
+  "zinc-100": "#f4f4f5",
+  "zinc-400": "#a1a1aa",
+  "zinc-800": "#27272a",
+  "zinc-900": "#18181b",
+  "stone-300": "#d6d3d1",
+  "stone-700": "#44403c",
+  "stone-800": "#292524",
+  "rose-200": "#fecdd3",
+  "rose-300": "#fda4af",
+  "rose-400": "#fb7185",
+  "rose-900": "#881337",
+  "rose-950": "#4c0519",
+  "pink-400": "#f472b6",
+  "pink-500": "#ec4899",
+  "fuchsia-400": "#e879f9",
+  "purple-400": "#c084fc",
+  "purple-900": "#581c87",
+  "purple-950": "#3b0764",
+  "indigo-300": "#a5b4fc",
+  "indigo-400": "#818cf8",
+  "indigo-500": "#6366f1",
+  "indigo-900": "#312e81",
+  "violet-300": "#c4b5fd",
+  "violet-400": "#a78bfa",
+  "blue-300": "#93c5fd",
+  "blue-400": "#60a5fa",
+  "blue-500": "#3b82f6",
+  "blue-600": "#2563eb",
+  "sky-400": "#38bdf8",
+  "sky-900": "#0c4a6e",
+  "sky-950": "#082f49",
+  "cyan-300": "#67e8f9",
+  "cyan-400": "#22d3ee",
+  "teal-400": "#2dd4bf",
+  "emerald-200": "#a7f3d0",
+  "emerald-300": "#6ee7b7",
+  "emerald-400": "#34d399",
+  "emerald-500": "#10b981",
+  "emerald-900": "#064e3b",
+  "emerald-950": "#022c22",
+  "green-400": "#4ade80",
+  "lime-300": "#bef264",
+  "lime-400": "#a3e635",
+  "yellow-300": "#fde047",
+  "yellow-400": "#facc15",
+  "amber-300": "#fcd34d",
+  "amber-400": "#fbbf24",
+  "amber-600": "#d97706",
+  "amber-700": "#b45309",
+  "amber-900": "#78350f",
+  "orange-50": "#fff7ed",
+  "orange-200": "#fed7aa",
+  "orange-400": "#fb923c",
+  "orange-500": "#f97316",
+};
+
+export function resolveTw(token: string, property: "fill" | "stroke"): string {
+  const value = token.trim();
+  // Raw hex, with or without "#": only valid SVG lengths (3/4/6/8)
+  const hex = value.startsWith("#") ? value.slice(1) : value;
+  if (/^(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(hex)) {
+    return `${property}="#${hex}"`;
+  }
+  // Tailwind-style token: fill-rose-400 / stroke-slate-200 / rose-400
+  const colorName = value.replace(/^fill-/, "").replace(/^stroke-/, "");
+  return `${property}="${twColors[colorName] ?? value}"`;
+}

package/src/utils/font.ts

@@ -1,19 +1,5 @@
-/**
- * Roboto variable font embedded as base64 WOFF2 for SVG @font-face.
- *
- * The subset (~47KB / ~63KB base64) covers:
- *   - ASCII printable (U+0020-007E)
- *   - Latin-1 Supplement (U+00A0-00FF)
- *   - Common typographic chars (dashes, quotes, ellipsis, bullets)
- *   - Variable weight axis (400-700)
- *
- * Loaded once at startup via Bun.file — zero per-request cost.
- */
-
-const fontPath = new URL("../../fonts/Roboto-subset.woff2", import.meta.url).pathname;
-const fontBytes = await Bun.file(fontPath).arrayBuffer();
-const fontBase64 = Buffer.from(fontBytes).toString("base64");
-
-export const FONT_FAMILY = "'Roboto', sans-serif";
-
-export const FONT_FACE = `@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(data:font/woff2;base64,${fontBase64}) format('woff2')}`;
+/** System font stack — no shipped font, respects the user's OS. */
+export const FONT_FAMILY =
+  'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+/** @deprecated No shipped font — kept for API backwards compatibility. */
+export const FONT_FACE = "";

package/src/utils/format.ts

@@ -1,7 +1,46 @@
 export function kFormat(num: number): string {
-  if (num >= 1000000) return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
-  if (num >= 1000) return (num / 1000).toFixed(1).replace(/\.0$/, "") + "k";
-  return String(num);
+  const sign = num < 0 ? "-" : "";
+  const abs = Math.abs(num);
+  const trim = (v: number) => v.toFixed(1).replace(/\.0$/, "");
+  if (abs >= 999_950_000) return sign + trim(abs / 1_000_000_000) + "B";
+  if (abs >= 999_950) return sign + trim(abs / 1_000_000) + "M";
+  if (abs >= 999.95) return sign + trim(abs / 1_000) + "k";
+  return sign + String(Math.round(abs));
+}
+
+/**
+ * Approximate rendered width of a string in SVG user units for the default
+ * sans-serif stack. Widths are per-character averages tuned to the card's
+ * font sizes and weights, so layout can reserve enough space without relying
+ * on browser text measurement (which is unavailable server-side).
+ */
+export function measureText(text: string, size: number, weight = 400): number {
+  if (!text) return 0;
+  const factor = size / 16;
+  const weightFactor = weight >= 700 ? 1.08 : weight >= 600 ? 1.04 : 1;
+  let width = 0;
+  for (const ch of text) {
+    const code = ch.codePointAt(0)!;
+    let w: number;
+    if (ch === " ") w = 0.28;
+    else if (ch === "." || ch === "," || ch === ":" || ch === ";") w = 0.3;
+    else if (ch === "i" || ch === "l" || ch === "I" || ch === "t" || ch === "j" || ch === "|")
+      w = 0.3;
+    else if (ch === "m" || ch === "w" || ch === "W" || ch === "M" || ch === "@") w = 0.95;
+    else if (code >= 0x1100 && code <= 0x11ff)
+      w = 1.0; // Hangul
+    else if (code >= 0x4e00 && code <= 0x9fff)
+      w = 1.0; // CJK
+    else if (code >= 0x3040 && code <= 0x30ff)
+      w = 1.0; // Kana
+    else if (code >= 0xac00 && code <= 0xd7af)
+      w = 1.0; // Hangul syllables
+    else if (code > 0x7f)
+      w = 0.72; // other non-ASCII (emoji, accents)
+    else w = 0.58; // default latin
+    width += w;
+  }
+  return width * factor * weightFactor;
 }
 
 export function escapeXml(str: string): string {
@@ -17,26 +56,25 @@ export function wrapText(input: string, maxLen: number, maxLines: number): strin
   const words = input.split(/\s+/).filter(Boolean);
   const lines: string[] = [];
   let current = "";
-  for (const w of words) {
-    const next = current ? `${current} ${w}` : w;
+
+  for (const word of words) {
+    const next = current ? `${current} ${word}` : word;
     if (next.length <= maxLen) {
       current = next;
       continue;
     }
     if (current) lines.push(current);
-    current = w;
-    if (lines.length >= maxLines - 1) break;
+    if (lines.length === maxLines) break;
+    current = word.length > maxLen ? word.slice(0, maxLen) : word;
   }
   if (current && lines.length < maxLines) lines.push(current);
-  if (lines.length === 0 && input) lines.push(input.slice(0, maxLen));
-  if (lines.length === maxLines && words.length > 0) {
-    const last = lines[lines.length - 1];
-    if (!last) return lines;
-    if (last.length > maxLen) {
-      lines[lines.length - 1] = last.slice(0, Math.max(0, maxLen - 1)) + "…";
-    } else if (words.join(" ").length > lines.join(" ").length) {
-      lines[lines.length - 1] = last.slice(0, Math.max(0, maxLen - 1)) + "…";
-    }
+
+  // Truncated? Mark the last line with an ellipsis.
+  const consumed = lines.join(" ").length;
+  if (lines.length > 0 && consumed < input.trim().length) {
+    const last = lines[lines.length - 1]!;
+    lines[lines.length - 1] =
+      (last.length >= maxLen ? last.slice(0, Math.max(0, maxLen - 1)) : last) + "…";
   }
   return lines;
 }

package/src/utils/github-client.ts

@@ -0,0 +1,198 @@
+export class GitHubError extends Error {
+  constructor(
+    message: string,
+    public httpStatus?: number,
+    public errorCode?: string,
+  ) {
+    super(message);
+    this.name = "GitHubError";
+  }
+}
+
+export class NotFoundError extends GitHubError {
+  constructor(message = "Resource not found") {
+    super(message, 404, "NOT_FOUND");
+    this.name = "NotFoundError";
+  }
+}
+
+export class RateLimitError extends GitHubError {
+  constructor(
+    message = "GitHub API rate limit exceeded",
+    public resetAt?: Date,
+  ) {
+    super(message, 429, "RATE_LIMITED");
+    this.name = "RateLimitError";
+  }
+}
+
+export class AuthError extends GitHubError {
+  constructor(message = "GitHub authentication failed") {
+    super(message, 401, "UNAUTHENTICATED");
+    this.name = "AuthError";
+  }
+}
+
+export class TimeoutError extends GitHubError {
+  constructor(message = "GitHub API request timed out") {
+    super(message, 408, "TIMEOUT");
+    this.name = "TimeoutError";
+  }
+}
+
+export interface GitHubClientOptions {
+  token?: string;
+  userAgent?: string;
+  timeoutMs?: number;
+  baseUrl?: string;
+}
+
+export interface RequestOptions extends Omit<RequestInit, "body"> {
+  variables?: Record<string, unknown>;
+  timeoutMs?: number;
+}
+
+/**
+ * A next-generation, generic GitHub GraphQL client.
+ * Designed to be robust, strongly typed, and publishable.
+ */
+export class GitHubClient {
+  private readonly token: string;
+  private readonly userAgent: string;
+  private readonly timeoutMs: number;
+  private readonly baseUrl: string;
+
+  constructor(options: GitHubClientOptions = {}) {
+    const token =
+      options.token || (typeof process !== "undefined" ? process.env?.GITHUB_TOKEN : "") || "";
+    if (!token) {
+      console.warn(
+        "GitHubClient initialized without a token. Requests requiring authentication will fail.",
+      );
+    }
+
+    this.token = token;
+    this.userAgent = options.userAgent || "nextgen-github-client/1.0";
+    this.timeoutMs = options.timeoutMs || 10000;
+    this.baseUrl = options.baseUrl || "https://api.github.com/graphql";
+  }
+
+  /**
+   * Classifies fetch or API errors into distinct custom error classes.
+   */
+  private classifyError(message: string, status: number, headers?: Headers): never {
+    const lower = message.toLowerCase();
+
+    if (status === 404 || lower.includes("not resolve to a user") || lower.includes("not found")) {
+      throw new NotFoundError(message);
+    }
+
+    if (
+      status === 429 ||
+      status === 403 ||
+      lower.includes("rate limit") ||
+      lower.includes("abuse")
+    ) {
+      const resetHeader = headers?.get("x-ratelimit-reset");
+      const resetAt = resetHeader ? new Date(parseInt(resetHeader, 10) * 1000) : undefined;
+      throw new RateLimitError(message, resetAt);
+    }
+
+    if (
+      status === 401 ||
+      lower.includes("bad credentials") ||
+      lower.includes("requires authentication")
+    ) {
+      throw new AuthError(message);
+    }
+
+    throw new GitHubError(message || `GitHub API error (${status})`, status);
+  }
+
+  /**
+   * Executes a GraphQL query against the GitHub API.
+   *
+   * @param query The GraphQL query string.
+   * @param options Request options including variables and fetch options.
+   * @returns Strongly typed response data.
+   */
+  public async request<T = unknown>(query: string, options: RequestOptions = {}): Promise<T> {
+    const { variables, timeoutMs = this.timeoutMs, signal: userSignal, ...fetchOptions } = options;
+
+    const headers = new Headers(fetchOptions.headers);
+    if (this.token && !headers.has("Authorization")) {
+      headers.set("Authorization", `bearer ${this.token}`);
+    }
+    if (!headers.has("Content-Type")) {
+      headers.set("Content-Type", "application/json");
+    }
+    if (!headers.has("User-Agent")) {
+      headers.set("User-Agent", this.userAgent);
+    }
+
+    const abortController = new AbortController();
+    const timeoutId =
+      timeoutMs > 0
+        ? setTimeout(() => abortController.abort(new TimeoutError()), timeoutMs)
+        : undefined;
+
+    // Link user-provided signal if present
+    const onAbort = userSignal ? () => abortController.abort(userSignal.reason) : undefined;
+    if (userSignal) {
+      userSignal.addEventListener("abort", onAbort!);
+      if (userSignal.aborted) abortController.abort(userSignal.reason);
+    }
+
+    let response: Response;
+
+    try {
+      response = await fetch(this.baseUrl, {
+        ...fetchOptions,
+        method: "POST",
+        headers,
+        body: JSON.stringify({ query, variables }),
+        signal: abortController.signal,
+      });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      const name = error instanceof Error ? error.name : "";
+      if (name === "AbortError" || error instanceof TimeoutError) {
+        throw new TimeoutError(message || "Request timed out");
+      }
+      throw new GitHubError(`Network error: ${message || "Unknown error"}`);
+    } finally {
+      if (timeoutId) clearTimeout(timeoutId);
+      if (userSignal) {
+        userSignal.removeEventListener("abort", onAbort!);
+      }
+    }
+
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => "");
+      this.classifyError(errorText || response.statusText, response.status, response.headers);
+    }
+
+    const body = (await response.json().catch(() => ({}))) as {
+      data?: T;
+      errors?: { message: string }[];
+    };
+
+    if (body.errors && body.errors.length > 0) {
+      const firstError = body.errors[0];
+      const message = firstError?.message ?? "GraphQL error";
+      this.classifyError(message, response.status, response.headers);
+    }
+
+    if (!body.data) {
+      throw new GitHubError(
+        "Invalid response: No data returned from GraphQL endpoint",
+        response.status,
+      );
+    }
+
+    return body.data as T;
+  }
+}
+
+// Export a default singleton instance for convenience
+export const githubClient = new GitHubClient();

package/src/utils/icons.ts

@@ -1,17 +1,35 @@
 export const icons = {
-  star: `<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>`,
+  star: `<path d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"/>`,
   commit: `<path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"/>`,
-  pr: `<path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/>`,
-  issue: `<path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/>`,
-  repo: `<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
+  pr: `<path d="M4 18a2 2 0 1 0 4 0a2 2 0 1 0-4 0M4 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m12 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0M6 8v8"/><path d="M11 6h5a2 2 0 0 1 2 2v8"/><path d="m14 9l-3-3l3-3"/>`,
+  issue: `<path d="M15.314 2a2 2 0 0 1 1.414.586l4.686 4.686A2 2 0 0 1 22 8.686v6.628a2 2 0 0 1-.586 1.414l-4.686 4.686a2 2 0 0 1-1.414.586H8.686a2 2 0 0 1-1.414-.586l-4.686-4.686A2 2 0 0 1 2 15.314V8.686a2 2 0 0 1 .586-1.414l4.686-4.686A2 2 0 0 1 8.686 2zm0 2H8.686L4 8.686v6.628L8.686 20h6.628L20 15.314V8.686zM12 15a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-9a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1"/>`,
+  repo: `<path d="M6 19.623c-.69-.195-1.232-.491-1.682-.941C3 17.364 3 15.242 3 11s0-6.364 1.318-7.682S7.758 2 12 2s6.364 0 7.682 1.318S21 6.758 21 11s0 6.364-1.318 7.682c-.45.45-.993.746-1.682.941"/><path d="M12 20.193c-.414 0-.748.32-1.414.958c-.647.619-.97.929-1.242.831a.5.5 0 0 1-.096-.046C9 21.779 9 21.31 9 20.376v-3.125c0-1.532 0-2.299.44-2.775C9.878 14 10.585 14 12 14s2.121 0 2.56.476s.44 1.243.44 2.775v3.125c0 .935 0 1.403-.248 1.56a.5.5 0 0 1-.096.046c-.272.098-.595-.212-1.242-.831c-.666-.639-1-.958-1.414-.958M8 10h8M8 6h4"/>`,
   x: `<path d="M4 4l11.733 16h4.267l-11.733 -16l-4.267 0" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />`,
 };
 
-export function icon(name: keyof typeof icons, color: string, size = 16): string {
+type IconName = keyof typeof icons;
+
+const iconMeta: Record<
+  IconName,
+  { viewBox: string; kind: "fill" | "stroke"; strokeWidth?: string }
+> = {
+  star: { viewBox: "0 0 24 24", kind: "fill" },
+  commit: { viewBox: "0 0 16 16", kind: "fill" },
+  pr: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "2" },
+  issue: { viewBox: "0 0 24 24", kind: "fill" },
+  repo: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "1.5" },
+  x: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "2" },
+};
+
+export function icon(name: IconName, color: string, size = 16): string {
   const path = icons[name];
   if (!path) return "";
-  const viewBox = name === "x" ? "0 0 24 24" : "0 0 16 16";
-  const fill =
-    name === "x" ? `stroke="#${color}" stroke-width="2" fill="none"` : `fill="#${color}"`;
-  return `<svg width="${size}" height="${size}" viewBox="${viewBox}" ${fill} role="img">${path}</svg>`;
+  const meta = iconMeta[name];
+  const viewBox = meta?.viewBox ?? "0 0 16 16";
+  const colorStr = color.startsWith("#") ? color : `#${color}`;
+  const attrs =
+    meta?.kind === "stroke"
+      ? `fill="none" stroke="${colorStr}" stroke-width="${meta.strokeWidth ?? "1.8"}" stroke-linecap="round" stroke-linejoin="round"`
+      : `fill="${colorStr}"`;
+  return `<svg width="${size}" height="${size}" viewBox="${viewBox}" ${attrs} role="img">${path}</svg>`;
 }

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 export { resolveColors, themes, type Theme } from "./themes";
-export { kFormat, escapeXml, wrapText } from "./format";
+export { kFormat, escapeXml, wrapText, measureText } from "./format";
 export { getLangColor } from "./languages";
 export { icons, icon } from "./icons";
 export { FONT_FACE, FONT_FAMILY } from "./font";
+export * from "./colors";

package/src/utils/themes.ts

@@ -7,25 +7,160 @@ export type Theme = {
 };
 
 export const themes: Record<string, Theme> = {
-  default: { bg: "fffefe", title: "2f80ed", text: "434d58", icon: "4c71f2", border: "e4e2e2" },
-  dark: { bg: "151515", title: "fff", text: "9f9f9f", icon: "79ff97", border: "2a2a2a" },
-  radical: { bg: "141321", title: "fe428e", text: "a9fef7", icon: "f8d847", border: "2a2a40" },
-  merko: { bg: "0a0f0b", title: "abd200", text: "68b587", icon: "b7d364", border: "1a2f1a" },
-  gruvbox: { bg: "282828", title: "fabd2f", text: "ebdbb2", icon: "fe8019", border: "3c3836" },
-  tokyonight: { bg: "1a1b27", title: "70a5fd", text: "38bdae", icon: "bf91f3", border: "2a2b3d" },
-  onedark: { bg: "282c34", title: "e4bf7a", text: "abb2bf", icon: "8eb573", border: "3e4451" },
-  cobalt: { bg: "193549", title: "e683d9", text: "75eeb2", icon: "0480ef", border: "2a4a6a" },
-  synthwave: { bg: "2b213a", title: "e2e9ec", text: "e5289e", icon: "ef8539", border: "3e2f5a" },
-  highcontrast: { bg: "000", title: "e7f216", text: "fff", icon: "00ffff", border: "333" },
-  dracula: { bg: "282a36", title: "ff6e96", text: "f8f8f2", icon: "bd93f9", border: "44475a" },
-  monokai: { bg: "272822", title: "f92672", text: "f8f8f2", icon: "a6e22e", border: "3e3d32" },
-  nord: { bg: "2e3440", title: "88c0d0", text: "d8dee9", icon: "81a1c1", border: "3b4252" },
-  github_dark: { bg: "0d1117", title: "58a6ff", text: "c9d1d9", icon: "1f6feb", border: "21262d" },
-  pearl: { bg: "f7f7f5", title: "1f2328", text: "3d444d", icon: "0969da", border: "e6e8eb" },
-  slate: { bg: "0b1220", title: "e2e8f0", text: "94a3b8", icon: "38bdf8", border: "1f2937" },
-  forest: { bg: "0f1b17", title: "b7f7d9", text: "86a995", icon: "34d399", border: "17332a" },
-  rose: { bg: "1a0f14", title: "ffd0dd", text: "e6b0c0", icon: "fb7185", border: "2b1a22" },
-  sand: { bg: "fbf7f0", title: "6b4e2e", text: "7a6754", icon: "d97706", border: "eadfce" },
+  default: {
+    bg: "fill-white",
+    title: "fill-blue-600",
+    text: "fill-slate-700",
+    icon: "fill-blue-500",
+    border: "stroke-slate-200",
+  },
+  dark: {
+    bg: "fill-zinc-900",
+    title: "fill-white",
+    text: "fill-zinc-400",
+    icon: "fill-emerald-400",
+    border: "stroke-zinc-800",
+  },
+  radical: {
+    bg: "fill-slate-900",
+    title: "fill-pink-500",
+    text: "fill-cyan-300",
+    icon: "fill-yellow-400",
+    border: "stroke-slate-800",
+  },
+  merko: {
+    bg: "fill-neutral-950",
+    title: "fill-lime-400",
+    text: "fill-emerald-400",
+    icon: "fill-lime-300",
+    border: "stroke-neutral-800",
+  },
+  gruvbox: {
+    bg: "fill-stone-800",
+    title: "fill-amber-400",
+    text: "fill-stone-300",
+    icon: "fill-orange-500",
+    border: "stroke-stone-700",
+  },
+  tokyonight: {
+    bg: "fill-slate-900",
+    title: "fill-blue-400",
+    text: "fill-teal-400",
+    icon: "fill-fuchsia-400",
+    border: "stroke-slate-800",
+  },
+  onedark: {
+    bg: "fill-slate-800",
+    title: "fill-amber-300",
+    text: "fill-slate-400",
+    icon: "fill-green-400",
+    border: "stroke-slate-700",
+  },
+  cobalt: {
+    bg: "fill-sky-950",
+    title: "fill-fuchsia-400",
+    text: "fill-emerald-300",
+    icon: "fill-blue-500",
+    border: "stroke-sky-900",
+  },
+  synthwave: {
+    bg: "fill-purple-950",
+    title: "fill-slate-200",
+    text: "fill-pink-500",
+    icon: "fill-orange-400",
+    border: "stroke-purple-900",
+  },
+  highcontrast: {
+    bg: "fill-black",
+    title: "fill-yellow-300",
+    text: "fill-white",
+    icon: "fill-cyan-400",
+    border: "stroke-zinc-800",
+  },
+  dracula: {
+    bg: "fill-slate-900",
+    title: "fill-pink-400",
+    text: "fill-slate-100",
+    icon: "fill-purple-400",
+    border: "stroke-slate-700",
+  },
+  monokai: {
+    bg: "fill-zinc-900",
+    title: "fill-pink-500",
+    text: "fill-zinc-100",
+    icon: "fill-lime-400",
+    border: "stroke-zinc-800",
+  },
+  nord: {
+    bg: "fill-slate-800",
+    title: "fill-cyan-400",
+    text: "fill-slate-300",
+    icon: "fill-blue-400",
+    border: "stroke-slate-700",
+  },
+  github_dark: {
+    bg: "fill-slate-900",
+    title: "fill-blue-400",
+    text: "fill-slate-300",
+    icon: "fill-blue-500",
+    border: "stroke-slate-800",
+  },
+  pearl: {
+    bg: "fill-slate-50",
+    title: "fill-slate-900",
+    text: "fill-slate-600",
+    icon: "fill-blue-600",
+    border: "stroke-slate-200",
+  },
+  slate: {
+    bg: "fill-slate-950",
+    title: "fill-slate-200",
+    text: "fill-slate-400",
+    icon: "fill-sky-400",
+    border: "stroke-slate-800",
+  },
+  forest: {
+    bg: "fill-emerald-950",
+    title: "fill-emerald-200",
+    text: "fill-emerald-400",
+    icon: "fill-emerald-500",
+    border: "stroke-emerald-900",
+  },
+  rose: {
+    bg: "fill-rose-950",
+    title: "fill-rose-200",
+    text: "fill-rose-300",
+    icon: "fill-rose-400",
+    border: "stroke-rose-900",
+  },
+  sand: {
+    bg: "fill-orange-50",
+    title: "fill-amber-900",
+    text: "fill-amber-700",
+    icon: "fill-amber-600",
+    border: "stroke-orange-200",
+  },
+  shiina: {
+    title: "fill-pink-400",
+    text: "fill-slate-100",
+    icon: "fill-sky-400",
+    bg: "#0B0C10",
+    border: "stroke-slate-800",
+  },
+  aurora: {
+    title: "fill-emerald-300",
+    text: "fill-slate-100",
+    icon: "fill-teal-400",
+    bg: "#020617",
+    border: "stroke-emerald-900",
+  },
+  oled: {
+    title: "fill-rose-400",
+    text: "fill-zinc-400",
+    icon: "fill-indigo-400",
+    bg: "#000000",
+    border: "stroke-zinc-900",
+  },
 };
 
 export function resolveColors(opts: {