@ganjingworld/theme 0.0.1

package/build-tokens.js

@@ -0,0 +1,249 @@
+import StyleDictionary from "style-dictionary";
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const tokensDir = resolve(__dirname, "src/tokens");
+
+// ─── Helpers ──────────────────────────────────────────────
+
+/**
+ * Convert a hex colour to HSL channel string: "H S% L%"
+ * This matches the shadcn convention used in globals.css
+ */
+function hexToHSL(hex) {
+	hex = hex.replace("#", "");
+	const r = Number.parseInt(hex.substring(0, 2), 16) / 255;
+	const g = Number.parseInt(hex.substring(2, 4), 16) / 255;
+	const b = Number.parseInt(hex.substring(4, 6), 16) / 255;
+
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	let h = 0;
+	let s = 0;
+
+	if (max !== min) {
+		const d = max - min;
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+		switch (max) {
+			case r:
+				h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+				break;
+			case g:
+				h = ((b - r) / d + 2) / 6;
+				break;
+			case b:
+				h = ((r - g) / d + 4) / 6;
+				break;
+		}
+	}
+
+	return `${Math.round(h * 360 * 10) / 10} ${Math.round(s * 1000) / 10}% ${Math.round(l * 1000) / 10}%`;
+}
+
+// ─── Load token files ─────────────────────────────────────
+
+const coreTokens = JSON.parse(readFileSync(resolve(tokensDir, "core.json"), "utf-8"));
+const lightTokens = JSON.parse(readFileSync(resolve(tokensDir, "semantic/light.json"), "utf-8"));
+const darkTokens = JSON.parse(readFileSync(resolve(tokensDir, "semantic/dark.json"), "utf-8"));
+
+// ─── Resolve references ───────────────────────────────────
+
+/**
+ * Walk through core tokens and build a flat lookup of { path: value }
+ * e.g. "color.blue.600" → "#2563eb"
+ */
+function flattenCore(obj, prefix = "") {
+	const result = {};
+	for (const [key, val] of Object.entries(obj)) {
+		if (key.startsWith("$")) continue;
+		const path = prefix ? `${prefix}.${key}` : key;
+		if (val && typeof val === "object" && "$value" in val) {
+			result[path] = val.$value;
+		} else if (val && typeof val === "object") {
+			Object.assign(result, flattenCore(val, path));
+		}
+	}
+	return result;
+}
+
+const coreLookup = flattenCore(coreTokens);
+
+/**
+ * Resolve a reference like "{color.blue.600}" against the core lookup
+ */
+function resolveRef(value) {
+	if (typeof value !== "string") return value;
+	const match = value.match(/^\{(.+)\}$/);
+	if (match) {
+		const resolved = coreLookup[match[1]];
+		if (resolved === undefined) {
+			console.warn(`  Warning: unresolved reference "${value}"`);
+			return value;
+		}
+		return resolved;
+	}
+	return value;
+}
+
+// ─── Build CSS output ─────────────────────────────────────
+
+/**
+ * Flatten semantic tokens into CSS variable declarations
+ */
+function buildCSSVars(tokens, prefix = "") {
+	const lines = [];
+	for (const [key, val] of Object.entries(tokens)) {
+		if (key.startsWith("$")) continue;
+		const varName = prefix ? `${prefix}-${key}` : key;
+		if (val && typeof val === "object" && "$value" in val) {
+			const resolved = resolveRef(val.$value);
+			const type = val.$type;
+			if (type === "color" && typeof resolved === "string" && resolved.startsWith("#")) {
+				lines.push(`\t\t--${varName}: ${hexToHSL(resolved)};`);
+			} else {
+				lines.push(`\t\t--${varName}: ${resolved};`);
+			}
+		} else if (val && typeof val === "object") {
+			lines.push(...buildCSSVars(val, varName));
+		}
+	}
+	return lines;
+}
+
+const lightVars = buildCSSVars(lightTokens);
+const darkVars = buildCSSVars(darkTokens);
+
+const css = `/* Auto-generated by build-tokens.js — DO NOT EDIT */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+\t:root {
+${lightVars.join("\n")}
+\t}
+
+\t.dark {
+${darkVars.join("\n")}
+\t}
+}
+
+@layer base {
+\t* {
+\t\t@apply border-border;
+\t}
+\tbody {
+\t\t@apply bg-background text-foreground;
+\t}
+}
+`;
+
+// ─── Build Tailwind preset ────────────────────────────────
+
+/**
+ * Collect all top-level semantic token names that are colors,
+ * grouping nested tokens (e.g. sidebar.background → sidebar: { ... })
+ */
+function buildTailwindColors(tokens, prefix = "") {
+	const result = {};
+	for (const [key, val] of Object.entries(tokens)) {
+		if (key.startsWith("$")) continue;
+		if (val && typeof val === "object" && "$value" in val) {
+			if (val.$type === "color") {
+				const varName = prefix ? `${prefix}-${key}` : key;
+				result[key] = `hsl(var(--${varName}))`;
+			}
+		} else if (val && typeof val === "object") {
+			// nested group (e.g. sidebar)
+			const nested = buildTailwindColors(val, prefix ? `${prefix}-${key}` : key);
+			if (Object.keys(nested).length > 0) {
+				result[key] = nested;
+			}
+		}
+	}
+	return result;
+}
+
+const tailwindColors = buildTailwindColors(lightTokens);
+
+// For colors that have a "foreground" sibling, structure as { DEFAULT, foreground }
+const structuredColors = {};
+for (const [key, val] of Object.entries(tailwindColors)) {
+	if (typeof val === "object" && !("DEFAULT" in val) && !key.endsWith("-foreground")) {
+		// Already a nested object (e.g. sidebar)
+		structuredColors[key] = val;
+	} else if (key.endsWith("-foreground")) {
+		// handled by the non-foreground key below
+		continue;
+	} else if (typeof val === "string") {
+		const fgKey = `${key}-foreground`;
+		if (tailwindColors[fgKey]) {
+			structuredColors[key] = {
+				DEFAULT: val,
+				foreground: tailwindColors[fgKey],
+			};
+		} else {
+			structuredColors[key] = val;
+		}
+	}
+}
+
+// Read fontFamily from core tokens
+const fontFamilySans = coreTokens.fontFamily?.sans?.$value || ["Inter", "ui-sans-serif", "system-ui", "sans-serif"];
+const fontFamilyMono = coreTokens.fontFamily?.mono?.$value || ["Fira Code", "ui-monospace", "monospace"];
+
+/**
+ * Serialize a JS object to properly-indented source code.
+ * Keys with hyphens get quoted, simple keys don't.
+ */
+function serializeObj(obj, indent = "\t\t\t") {
+	const lines = ["{"];
+	const entries = Object.entries(obj);
+	for (const [key, val] of entries) {
+		const safeKey = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : `"${key}"`;
+		if (typeof val === "string") {
+			lines.push(`${indent}\t${safeKey}: "${val}",`);
+		} else if (typeof val === "object" && !Array.isArray(val)) {
+			lines.push(`${indent}\t${safeKey}: ${serializeObj(val, `${indent}\t`)},`);
+		}
+	}
+	lines.push(`${indent}}`);
+	return lines.join("\n");
+}
+
+const tailwindPreset = `/** Auto-generated by build-tokens.js — DO NOT EDIT */
+/** @type {import('tailwindcss').Config} */
+export default {
+\tdarkMode: "class",
+\ttheme: {
+\t\textend: {
+\t\t\tcolors: ${serializeObj(structuredColors)},
+\t\t\tborderRadius: {
+\t\t\t\tlg: "var(--radius)",
+\t\t\t\tmd: "calc(var(--radius) - 2px)",
+\t\t\t\tsm: "calc(var(--radius) - 4px)",
+\t\t\t},
+\t\t\tfontFamily: {
+\t\t\t\tsans: ${JSON.stringify(fontFamilySans)},
+\t\t\t\tmono: ${JSON.stringify(fontFamilyMono)},
+\t\t\t},
+\t\t},
+\t},
+\tplugins: [],
+};
+`;
+
+// ─── Write output ─────────────────────────────────────────
+
+import { writeFileSync } from "node:fs";
+
+writeFileSync(resolve(__dirname, "src/globals.css"), css, "utf-8");
+console.log("  ✓ src/globals.css");
+
+writeFileSync(resolve(__dirname, "tailwind-preset.js"), tailwindPreset, "utf-8");
+console.log("  ✓ tailwind-preset.js");
+
+console.log("\nToken build complete.");

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@ganjingworld/theme",
+  "version": "0.0.1",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./globals.css": "./src/globals.css",
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./tokens/*": "./src/tokens/*"
+  },
+  "files": [
+    "src",
+    "tailwind-preset.js",
+    "build-tokens.js"
+  ],
+  "scripts": {
+    "build": "node build-tokens.js",
+    "clean": "rm -rf .turbo"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "style-dictionary": "^4.4.0"
+  }
+}

package/src/globals.css

@@ -0,0 +1,81 @@
+/* Auto-generated by build-tokens.js — DO NOT EDIT */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 220.9 39.3% 11%;
+		--card: 0 0% 100%;
+		--card-foreground: 220.9 39.3% 11%;
+		--primary: 221.2 83.2% 53.3%;
+		--primary-foreground: 213.8 100% 96.9%;
+		--secondary: 220 14.3% 95.9%;
+		--secondary-foreground: 220.9 39.3% 11%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 100%;
+		--success: 142.1 76.2% 36.3%;
+		--success-foreground: 0 0% 100%;
+		--warning: 37.7 92.1% 50.2%;
+		--warning-foreground: 0 0% 100%;
+		--muted: 220 14.3% 95.9%;
+		--muted-foreground: 220 8.9% 46.1%;
+		--accent: 220 14.3% 95.9%;
+		--accent-foreground: 220.9 39.3% 11%;
+		--border: 220 13% 91%;
+		--input: 220 13% 91%;
+		--ring: 221.2 83.2% 53.3%;
+		--radius: 8px;
+		--sidebar-background: 210 20% 98%;
+		--sidebar-foreground: 216.9 19.1% 26.7%;
+		--sidebar-primary: 220.9 39.3% 11%;
+		--sidebar-primary-foreground: 210 20% 98%;
+		--sidebar-accent: 220 14.3% 95.9%;
+		--sidebar-accent-foreground: 220.9 39.3% 11%;
+		--sidebar-border: 220 13% 91%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
+	}
+
+	.dark {
+		--background: 224 71.4% 4.1%;
+		--foreground: 210 20% 98%;
+		--card: 224 71.4% 4.1%;
+		--card-foreground: 210 20% 98%;
+		--primary: 217.2 91.2% 59.8%;
+		--primary-foreground: 220.9 39.3% 11%;
+		--secondary: 215 27.9% 16.9%;
+		--secondary-foreground: 210 20% 98%;
+		--destructive: 0 73.7% 41.8%;
+		--destructive-foreground: 210 20% 98%;
+		--success: 142.1 70.6% 45.3%;
+		--success-foreground: 220.9 39.3% 11%;
+		--warning: 37.7 92.1% 50.2%;
+		--warning-foreground: 220.9 39.3% 11%;
+		--muted: 215 27.9% 16.9%;
+		--muted-foreground: 217.9 10.6% 64.9%;
+		--accent: 215 27.9% 16.9%;
+		--accent-foreground: 210 20% 98%;
+		--border: 215 27.9% 16.9%;
+		--input: 215 27.9% 16.9%;
+		--ring: 224.3 76.3% 48%;
+		--radius: 8px;
+		--sidebar-background: 220.9 39.3% 11%;
+		--sidebar-foreground: 220 14.3% 95.9%;
+		--sidebar-primary: 224.3 76.3% 48%;
+		--sidebar-primary-foreground: 0 0% 100%;
+		--sidebar-accent: 215 27.9% 16.9%;
+		--sidebar-accent-foreground: 220 14.3% 95.9%;
+		--sidebar-border: 215 27.9% 16.9%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/src/tokens/$metadata.json

@@ -0,0 +1,3 @@
+{
+	"tokenSetOrder": ["core", "semantic/light", "semantic/dark"]
+}

package/src/tokens/$themes.json

@@ -0,0 +1,18 @@
+[
+	{
+		"id": "light",
+		"name": "Light",
+		"selectedTokenSets": {
+			"core": "source",
+			"semantic/light": "enabled"
+		}
+	},
+	{
+		"id": "dark",
+		"name": "Dark",
+		"selectedTokenSets": {
+			"core": "source",
+			"semantic/dark": "enabled"
+		}
+	}
+]

package/src/tokens/core.json

@@ -0,0 +1,99 @@
+{
+	"color": {
+		"$type": "color",
+		"black": { "$value": "#000000" },
+		"white": { "$value": "#ffffff" },
+		"gray": {
+			"50": { "$value": "#f9fafb" },
+			"100": { "$value": "#f3f4f6" },
+			"200": { "$value": "#e5e7eb" },
+			"300": { "$value": "#d1d5db" },
+			"400": { "$value": "#9ca3af" },
+			"500": { "$value": "#6b7280" },
+			"600": { "$value": "#4b5563" },
+			"700": { "$value": "#374151" },
+			"800": { "$value": "#1f2937" },
+			"900": { "$value": "#111827" },
+			"950": { "$value": "#030712" }
+		},
+		"blue": {
+			"50": { "$value": "#eff6ff" },
+			"100": { "$value": "#dbeafe" },
+			"200": { "$value": "#bfdbfe" },
+			"300": { "$value": "#93c5fd" },
+			"400": { "$value": "#60a5fa" },
+			"500": { "$value": "#3b82f6" },
+			"600": { "$value": "#2563eb" },
+			"700": { "$value": "#1d4ed8" },
+			"800": { "$value": "#1e40af" },
+			"900": { "$value": "#1e3a8a" }
+		},
+		"red": {
+			"50": { "$value": "#fef2f2" },
+			"500": { "$value": "#ef4444" },
+			"600": { "$value": "#dc2626" },
+			"700": { "$value": "#b91c1c" }
+		},
+		"green": {
+			"50": { "$value": "#f0fdf4" },
+			"500": { "$value": "#22c55e" },
+			"600": { "$value": "#16a34a" },
+			"700": { "$value": "#15803d" }
+		},
+		"amber": {
+			"50": { "$value": "#fffbeb" },
+			"500": { "$value": "#f59e0b" },
+			"600": { "$value": "#d97706" }
+		}
+	},
+	"spacing": {
+		"$type": "dimension",
+		"0": { "$value": "0px" },
+		"1": { "$value": "4px" },
+		"2": { "$value": "8px" },
+		"3": { "$value": "12px" },
+		"4": { "$value": "16px" },
+		"5": { "$value": "20px" },
+		"6": { "$value": "24px" },
+		"8": { "$value": "32px" },
+		"10": { "$value": "40px" },
+		"12": { "$value": "48px" },
+		"16": { "$value": "64px" },
+		"20": { "$value": "80px" },
+		"24": { "$value": "96px" }
+	},
+	"borderRadius": {
+		"$type": "dimension",
+		"none": { "$value": "0px" },
+		"sm": { "$value": "2px" },
+		"md": { "$value": "6px" },
+		"lg": { "$value": "8px" },
+		"xl": { "$value": "12px" },
+		"2xl": { "$value": "16px" },
+		"full": { "$value": "9999px" }
+	},
+	"fontSize": {
+		"$type": "dimension",
+		"xs": { "$value": "12px" },
+		"sm": { "$value": "14px" },
+		"base": { "$value": "16px" },
+		"lg": { "$value": "18px" },
+		"xl": { "$value": "20px" },
+		"2xl": { "$value": "24px" },
+		"3xl": { "$value": "30px" },
+		"4xl": { "$value": "36px" },
+		"5xl": { "$value": "48px" }
+	},
+	"fontWeight": {
+		"$type": "fontWeight",
+		"normal": { "$value": 400 },
+		"medium": { "$value": 500 },
+		"semibold": { "$value": 600 },
+		"bold": { "$value": 700 }
+	},
+	"fontFamily": {
+		"$type": "fontFamily",
+		"sans": { "$value": ["Inter", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"] },
+		"mono": { "$value": ["Fira Code", "ui-monospace", "SFMono-Regular", "monospace"] }
+	}
+}

package/src/tokens/semantic/dark.json

@@ -0,0 +1,34 @@
+{
+	"background": { "$type": "color", "$value": "{color.gray.950}" },
+	"foreground": { "$type": "color", "$value": "{color.gray.50}" },
+	"card": { "$type": "color", "$value": "{color.gray.950}" },
+	"card-foreground": { "$type": "color", "$value": "{color.gray.50}" },
+	"primary": { "$type": "color", "$value": "{color.blue.500}" },
+	"primary-foreground": { "$type": "color", "$value": "{color.gray.900}" },
+	"secondary": { "$type": "color", "$value": "{color.gray.800}" },
+	"secondary-foreground": { "$type": "color", "$value": "{color.gray.50}" },
+	"destructive": { "$type": "color", "$value": "{color.red.700}" },
+	"destructive-foreground": { "$type": "color", "$value": "{color.gray.50}" },
+	"success": { "$type": "color", "$value": "{color.green.500}" },
+	"success-foreground": { "$type": "color", "$value": "{color.gray.900}" },
+	"warning": { "$type": "color", "$value": "{color.amber.500}" },
+	"warning-foreground": { "$type": "color", "$value": "{color.gray.900}" },
+	"muted": { "$type": "color", "$value": "{color.gray.800}" },
+	"muted-foreground": { "$type": "color", "$value": "{color.gray.400}" },
+	"accent": { "$type": "color", "$value": "{color.gray.800}" },
+	"accent-foreground": { "$type": "color", "$value": "{color.gray.50}" },
+	"border": { "$type": "color", "$value": "{color.gray.800}" },
+	"input": { "$type": "color", "$value": "{color.gray.800}" },
+	"ring": { "$type": "color", "$value": "{color.blue.700}" },
+	"radius": { "$type": "dimension", "$value": "{borderRadius.lg}" },
+	"sidebar": {
+		"background": { "$type": "color", "$value": "{color.gray.900}" },
+		"foreground": { "$type": "color", "$value": "{color.gray.100}" },
+		"primary": { "$type": "color", "$value": "{color.blue.700}" },
+		"primary-foreground": { "$type": "color", "$value": "{color.white}" },
+		"accent": { "$type": "color", "$value": "{color.gray.800}" },
+		"accent-foreground": { "$type": "color", "$value": "{color.gray.100}" },
+		"border": { "$type": "color", "$value": "{color.gray.800}" },
+		"ring": { "$type": "color", "$value": "{color.blue.500}" }
+	}
+}

package/src/tokens/semantic/light.json

@@ -0,0 +1,34 @@
+{
+	"background": { "$type": "color", "$value": "{color.white}" },
+	"foreground": { "$type": "color", "$value": "{color.gray.900}" },
+	"card": { "$type": "color", "$value": "{color.white}" },
+	"card-foreground": { "$type": "color", "$value": "{color.gray.900}" },
+	"primary": { "$type": "color", "$value": "{color.blue.600}" },
+	"primary-foreground": { "$type": "color", "$value": "{color.blue.50}" },
+	"secondary": { "$type": "color", "$value": "{color.gray.100}" },
+	"secondary-foreground": { "$type": "color", "$value": "{color.gray.900}" },
+	"destructive": { "$type": "color", "$value": "{color.red.500}" },
+	"destructive-foreground": { "$type": "color", "$value": "{color.white}" },
+	"success": { "$type": "color", "$value": "{color.green.600}" },
+	"success-foreground": { "$type": "color", "$value": "{color.white}" },
+	"warning": { "$type": "color", "$value": "{color.amber.500}" },
+	"warning-foreground": { "$type": "color", "$value": "{color.white}" },
+	"muted": { "$type": "color", "$value": "{color.gray.100}" },
+	"muted-foreground": { "$type": "color", "$value": "{color.gray.500}" },
+	"accent": { "$type": "color", "$value": "{color.gray.100}" },
+	"accent-foreground": { "$type": "color", "$value": "{color.gray.900}" },
+	"border": { "$type": "color", "$value": "{color.gray.200}" },
+	"input": { "$type": "color", "$value": "{color.gray.200}" },
+	"ring": { "$type": "color", "$value": "{color.blue.600}" },
+	"radius": { "$type": "dimension", "$value": "{borderRadius.lg}" },
+	"sidebar": {
+		"background": { "$type": "color", "$value": "{color.gray.50}" },
+		"foreground": { "$type": "color", "$value": "{color.gray.700}" },
+		"primary": { "$type": "color", "$value": "{color.gray.900}" },
+		"primary-foreground": { "$type": "color", "$value": "{color.gray.50}" },
+		"accent": { "$type": "color", "$value": "{color.gray.100}" },
+		"accent-foreground": { "$type": "color", "$value": "{color.gray.900}" },
+		"border": { "$type": "color", "$value": "{color.gray.200}" },
+		"ring": { "$type": "color", "$value": "{color.blue.500}" }
+	}
+}

package/tailwind-preset.js

@@ -0,0 +1,68 @@
+/** Auto-generated by build-tokens.js — DO NOT EDIT */
+/** @type {import('tailwindcss').Config} */
+export default {
+	darkMode: "class",
+	theme: {
+		extend: {
+			colors: {
+				background: "hsl(var(--background))",
+				foreground: "hsl(var(--foreground))",
+				card: {
+					DEFAULT: "hsl(var(--card))",
+					foreground: "hsl(var(--card-foreground))",
+				},
+				primary: {
+					DEFAULT: "hsl(var(--primary))",
+					foreground: "hsl(var(--primary-foreground))",
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary))",
+					foreground: "hsl(var(--secondary-foreground))",
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive))",
+					foreground: "hsl(var(--destructive-foreground))",
+				},
+				success: {
+					DEFAULT: "hsl(var(--success))",
+					foreground: "hsl(var(--success-foreground))",
+				},
+				warning: {
+					DEFAULT: "hsl(var(--warning))",
+					foreground: "hsl(var(--warning-foreground))",
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted))",
+					foreground: "hsl(var(--muted-foreground))",
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent))",
+					foreground: "hsl(var(--accent-foreground))",
+				},
+				border: "hsl(var(--border))",
+				input: "hsl(var(--input))",
+				ring: "hsl(var(--ring))",
+				sidebar: {
+					background: "hsl(var(--sidebar-background))",
+					foreground: "hsl(var(--sidebar-foreground))",
+					primary: "hsl(var(--sidebar-primary))",
+					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+					accent: "hsl(var(--sidebar-accent))",
+					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+					border: "hsl(var(--sidebar-border))",
+					ring: "hsl(var(--sidebar-ring))",
+				},
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)",
+			},
+			fontFamily: {
+				sans: ["Inter","ui-sans-serif","system-ui","-apple-system","sans-serif"],
+				mono: ["Fira Code","ui-monospace","SFMono-Regular","monospace"],
+			},
+		},
+	},
+	plugins: [],
+};