wehub-resource-sync
495 lines
15 KiB
JavaScript
495 lines
15 KiB
JavaScript
/**
|
|
* Build script: generates docs theme-presets.css from the frontend's preset definitions.
|
|
*
|
|
* Usage: node apps/docs/scripts/build-theme-presets.mjs
|
|
* Output: apps/docs/src/styles/theme-presets.css
|
|
*/
|
|
|
|
import {writeFileSync} from "fs";
|
|
import {dirname, resolve} from "path";
|
|
import {fileURLToPath} from "url";
|
|
|
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
const OUTPUT = resolve(__dirname, "../src/styles/theme-presets.css");
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Color math
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function hexToOklch(hex) {
|
|
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
|
|
|
const toLinear = (v) => (v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
|
|
|
|
const lr = toLinear(r),
|
|
lg = toLinear(g),
|
|
lb = toLinear(b);
|
|
|
|
const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
|
|
const y = 0.2126729 * lr + 0.7151522 * lg + 0.072175 * lb;
|
|
const z = 0.0193339 * lr + 0.119192 * lg + 0.9503041 * lb;
|
|
|
|
const l_ = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z;
|
|
const m_ = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z;
|
|
const s_ = 0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z;
|
|
|
|
const l3 = Math.cbrt(l_),
|
|
m3 = Math.cbrt(m_),
|
|
s3 = Math.cbrt(s_);
|
|
|
|
const okL = 0.2104542553 * l3 + 0.793617785 * m3 - 0.0040720468 * s3;
|
|
const okA = 1.9779984951 * l3 - 2.428592205 * m3 + 0.4505937099 * s3;
|
|
const okB = 0.0259040371 * l3 + 0.7827717662 * m3 - 0.808675766 * s3;
|
|
|
|
const c = Math.sqrt(okA * okA + okB * okB);
|
|
let h = (Math.atan2(okB, okA) * 180) / Math.PI;
|
|
|
|
if (h < 0) h += 360;
|
|
|
|
return {c, h, l: Math.max(0, Math.min(1, okL))};
|
|
}
|
|
|
|
function fmt(color) {
|
|
return `oklch(${(color.l * 100).toFixed(2)}% ${color.c.toFixed(4)} ${color.h.toFixed(2)})`;
|
|
}
|
|
|
|
function adjustHue(color, newHue) {
|
|
return {...color, h: newHue};
|
|
}
|
|
|
|
function adjustChroma(color, newChroma) {
|
|
return {...color, c: Math.max(0, newChroma)};
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Default baseline neutral values (from generate-css-variables.ts)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const DEFAULTS = {
|
|
dark: {
|
|
background: {c: 0.005, h: 285.823, l: 0.12},
|
|
border: {c: 0.006, h: 286.033, l: 0.28},
|
|
default: {c: 0.006, h: 286.033, l: 0.274},
|
|
foreground: {c: 0, h: 0, l: 0.9911},
|
|
muted: {c: 0.015, h: 286.067, l: 0.705},
|
|
overlay: {c: 0.0059, h: 285.89, l: 0.2103},
|
|
scrollbar: {c: 0.015, h: 286.067, l: 0.705},
|
|
segment: {c: 0.01, h: 285.93, l: 0.3964},
|
|
separator: {c: 0.006, h: 286.033, l: 0.25},
|
|
surface: {c: 0.0059, h: 285.89, l: 0.2103},
|
|
surfaceSecondary: {c: 0.0037, h: 286.14, l: 0.257},
|
|
surfaceTertiary: {c: 0.0024, h: 247.91, l: 0.2721},
|
|
},
|
|
light: {
|
|
background: {c: 0, h: 0, l: 0.9702},
|
|
border: {c: 0.004, h: 286.32, l: 0.9},
|
|
default: {c: 0.001, h: 286.375, l: 0.94},
|
|
foreground: {c: 0.0059, h: 285.89, l: 0.2103},
|
|
muted: {c: 0.0138, h: 285.94, l: 0.5517},
|
|
overlay: {c: 0, h: 0, l: 1},
|
|
scrollbar: {c: 0.006, h: 286.286, l: 0.871},
|
|
segment: {c: 0, h: 0, l: 1},
|
|
separator: {c: 0.004, h: 286.32, l: 0.92},
|
|
surface: {c: 0, h: 0, l: 1},
|
|
surfaceSecondary: {c: 0.0013, h: 286.37, l: 0.9524},
|
|
surfaceTertiary: {c: 0.0013, h: 286.37, l: 0.9373},
|
|
},
|
|
};
|
|
|
|
const SEMANTIC_HUE_BLEND = 0.12;
|
|
const DEFAULT_ACCENT_HUE = 253.83;
|
|
|
|
function semanticHue(semanticDefault, baseHue) {
|
|
let h = semanticDefault + (baseHue - DEFAULT_ACCENT_HUE) * SEMANTIC_HUE_BLEND;
|
|
|
|
while (h < 0) h += 360;
|
|
while (h >= 360) h -= 360;
|
|
|
|
return h;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Variable generators
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function accentForeground(l, c, h) {
|
|
if (l > 0.65) {
|
|
return `oklch(15% ${Math.min(c * 0.2, 0.03).toFixed(4)} ${h.toFixed(2)})`;
|
|
}
|
|
|
|
return "oklch(99.11% 0 0)";
|
|
}
|
|
|
|
function genAccent(l, c, h, fgOverride) {
|
|
const accent = fmt({c, h, l});
|
|
const fg = fgOverride ?? accentForeground(l, c, h);
|
|
|
|
return {
|
|
"--accent": accent,
|
|
"--accent-foreground": fg,
|
|
"--focus": accent,
|
|
};
|
|
}
|
|
|
|
function genNeutrals(hue, grayChroma, mode) {
|
|
const defs = DEFAULTS[mode];
|
|
const f = (color, chromaMul) => fmt(adjustChroma(adjustHue(color, hue), grayChroma * chromaMul));
|
|
|
|
const bg = f(defs.background, 1);
|
|
const fg = f(defs.foreground, 1);
|
|
const muted = f(defs.muted, 2);
|
|
const surface = f(defs.surface, mode === "dark" ? 2 : 0.5);
|
|
const surfaceSec = f(defs.surfaceSecondary, 1.5);
|
|
const surfaceTer = f(defs.surfaceTertiary, 1.5);
|
|
const defaultBg = f(defs.default, 1);
|
|
const border = f(defs.border, 1);
|
|
const separator = f(defs.separator, 1);
|
|
const overlay = f(defs.overlay, mode === "dark" ? 2 : 0.3);
|
|
const scrollbar = f(defs.scrollbar, 1);
|
|
const segment = f(defs.segment, 1);
|
|
const fieldBg = surface;
|
|
const fieldFg = fg;
|
|
|
|
const defaultFg = mode === "dark" ? "oklch(99.11% 0 0)" : fmt({c: 0.0059, h: hue, l: 0.2103});
|
|
|
|
return {
|
|
"--background": bg,
|
|
"--border": border,
|
|
"--default": defaultBg,
|
|
"--default-foreground": defaultFg,
|
|
"--field-background": fieldBg,
|
|
"--field-border": border,
|
|
"--field-foreground": fieldFg,
|
|
"--field-placeholder": muted,
|
|
"--foreground": fg,
|
|
"--link": fg,
|
|
"--muted": muted,
|
|
"--overlay": overlay,
|
|
"--overlay-foreground": fg,
|
|
"--scrollbar": scrollbar,
|
|
"--segment": segment,
|
|
"--segment-foreground": fg,
|
|
"--separator": separator,
|
|
"--surface": surface,
|
|
"--surface-foreground": fg,
|
|
"--surface-secondary": surfaceSec,
|
|
"--surface-secondary-foreground": fg,
|
|
"--surface-tertiary": surfaceTer,
|
|
"--surface-tertiary-foreground": fg,
|
|
};
|
|
}
|
|
|
|
function genSemanticFromHex(name, hex, baseHue, grayChroma) {
|
|
const oklch = hexToOklch(hex);
|
|
const h = semanticHue(oklch.h, baseHue);
|
|
const boost = 1 + grayChroma * 2;
|
|
const c = Math.min(oklch.c * boost, 0.35);
|
|
const color = fmt({c, h, l: oklch.l});
|
|
const fg = oklch.l > 0.67 ? fmt({c: 0.0059, h, l: 0.2103}) : "oklch(99.11% 0 0)";
|
|
|
|
return {
|
|
[`--${name}`]: color,
|
|
[`--${name}-foreground`]: fg,
|
|
};
|
|
}
|
|
|
|
function genSemanticFromOklch(name, oklchStr, fgOverride) {
|
|
const lMatch = oklchStr.match(/oklch\(([\d.]+)/);
|
|
const l = lMatch?.[1] ? parseFloat(lMatch[1]) : 0.5;
|
|
let autoFg;
|
|
|
|
if (l > 0.65) {
|
|
const hMatch = oklchStr.match(/oklch\([\d.]+\s+[\d.]+\s+([\d.]+)/);
|
|
const h = hMatch?.[1] ? parseFloat(hMatch[1]) : 0;
|
|
const cMatch = oklchStr.match(/oklch\([\d.]+\s+([\d.]+)/);
|
|
const c = cMatch?.[1] ? parseFloat(cMatch[1]) : 0;
|
|
|
|
autoFg = `oklch(15% ${Math.min(c * 0.3, 0.05).toFixed(4)} ${h.toFixed(2)})`;
|
|
} else {
|
|
autoFg = "oklch(99.11% 0 0)";
|
|
}
|
|
const fg = fgOverride ?? autoFg;
|
|
|
|
return {
|
|
[`--${name}`]: oklchStr,
|
|
[`--${name}-foreground`]: fg,
|
|
};
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Radius map
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const RADIUS_MAP = {
|
|
"extra-large": "1rem",
|
|
"extra-small": "0.125rem",
|
|
large: "0.75rem",
|
|
medium: "0.5rem",
|
|
none: "0",
|
|
small: "0.25rem",
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Preset definitions
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const DEFAULT_SEMANTIC = {
|
|
dangerHex: "#FF383C",
|
|
successHex: "#17C964",
|
|
warningHex: "#F5A524",
|
|
};
|
|
|
|
const PRESETS = [
|
|
{
|
|
accentHex: "#7DD3FC",
|
|
base: 0.015,
|
|
formRadius: "large",
|
|
id: "sky",
|
|
radius: "medium",
|
|
},
|
|
{
|
|
accentHex: "#C084FC",
|
|
base: 0.015,
|
|
formRadius: "large",
|
|
id: "lavender",
|
|
radius: "medium",
|
|
},
|
|
{
|
|
accentHex: "#86EFAC",
|
|
base: 0.015,
|
|
formRadius: "large",
|
|
id: "mint",
|
|
radius: "medium",
|
|
},
|
|
{
|
|
accentHex: "#E50914",
|
|
base: 0.008,
|
|
formRadius: "extra-small",
|
|
id: "netflix",
|
|
radius: "extra-small",
|
|
semanticOverrides: {
|
|
dark: {
|
|
danger: {color: "oklch(0.4964 0.1994 28.56)"},
|
|
success: {color: "oklch(0.7677 0.1899 148.1)"},
|
|
warning: {color: "oklch(0.8239 0.153 74.6)"},
|
|
},
|
|
light: {
|
|
danger: {color: "oklch(0.4823 0.1938 27.64)"},
|
|
success: {color: "oklch(0.5148 0.1337 146.82)"},
|
|
warning: {color: "oklch(0.561 0.116571 78.9352)"},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
accentHex: "#000000",
|
|
base: 0.005,
|
|
darkAccent: {c: 0, h: 0, l: 0.9848},
|
|
darkAccentHex: "#FBFBFB",
|
|
formRadius: "small",
|
|
id: "uber",
|
|
radius: "small",
|
|
semanticOverrides: {
|
|
dark: {
|
|
danger: {color: "oklch(0.7044 0.1872 23.19)"},
|
|
success: {color: "oklch(0.6514 0.1321 156.22)"},
|
|
warning: {color: "oklch(0.8803 0.1348 86.06)"},
|
|
},
|
|
light: {
|
|
danger: {color: "oklch(0.573 0.2249 21.97)"},
|
|
success: {color: "oklch(0.6277 0.1604 153.06)"},
|
|
warning: {color: "oklch(0.8446 0.1525 80.6)"},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
accentHex: "#1ED760",
|
|
base: 0.002,
|
|
formRadius: "extra-small",
|
|
id: "spotify",
|
|
radius: "medium",
|
|
semanticOverrides: {
|
|
dark: {
|
|
danger: {color: "oklch(0.5931 0.2338 25.42)"},
|
|
success: {color: "oklch(0.7697 0.2124 148.67)"},
|
|
warning: {color: "oklch(0.7921 0.1626 67.42)"},
|
|
},
|
|
light: {
|
|
danger: {color: "oklch(0.5509 0.2166 25.29)"},
|
|
success: {color: "oklch(0.6072 0.1647 149.02)"},
|
|
warning: {color: "oklch(0.6972 0.1687 54.22)"},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
accentHex: "#4F44E0",
|
|
base: 0.002,
|
|
formRadius: "extra-small",
|
|
id: "coinbase",
|
|
radius: "medium",
|
|
semanticOverrides: {
|
|
dark: {
|
|
danger: {color: "oklch(0.6545 0.2145 22.31)"},
|
|
success: {color: "oklch(0.7574 0.180554 156.931)"},
|
|
warning: {color: "oklch(0.8095 0.1119 61.69)"},
|
|
},
|
|
light: {
|
|
danger: {color: "oklch(0.5507 0.2062 24)"},
|
|
success: {color: "oklch(0.5438 0.1268 157.17)"},
|
|
warning: {color: "oklch(0.8095 0.1119 61.69)"},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
accentHex: "#FF5A5F",
|
|
base: 0,
|
|
formRadius: "large",
|
|
id: "airbnb",
|
|
radius: "medium",
|
|
semanticOverrides: {
|
|
dark: {
|
|
accentForeground: "oklch(0.9911 0 0)",
|
|
danger: {color: "oklch(0.5392 0.1816 33.72)", foreground: "oklch(0.9911 0 0)"},
|
|
success: {color: "oklch(0.652 0.114864 185.0749)", foreground: "oklch(0.9911 0 0)"},
|
|
warning: {color: "oklch(0.8197 0.170602 78.4658)"},
|
|
},
|
|
light: {
|
|
accentForeground: "oklch(0.9911 0 0)",
|
|
danger: {color: "oklch(0.5392 0.1816 33.72)", foreground: "oklch(0.9911 0 0)"},
|
|
success: {color: "oklch(0.5573 0.0947 199.48)", foreground: "oklch(0.9911 0 0)"},
|
|
warning: {color: "oklch(0.6904 0.1972 38.75)", foreground: "oklch(0.9911 0 0)"},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
accentHex: "#5865F2",
|
|
base: 0.01,
|
|
formRadius: "large",
|
|
id: "discord",
|
|
radius: "small",
|
|
semanticOverrides: {
|
|
dark: {
|
|
danger: {color: "oklch(0.6318 0.2075 24.57)"},
|
|
success: {color: "oklch(0.8548 0.1967 150.16)"},
|
|
warning: {color: "oklch(0.9218 0.1571 99.87)"},
|
|
},
|
|
light: {
|
|
danger: {color: "oklch(0.5884 0.1993 24.39)"},
|
|
success: {color: "oklch(0.532 0.1238 151.57)"},
|
|
warning: {color: "oklch(0.9218 0.1571 99.87)"},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
accentHex: "#FF6600",
|
|
base: 0.01,
|
|
formRadius: "extra-large",
|
|
id: "rabbit",
|
|
radius: "medium",
|
|
semanticOverrides: {
|
|
dark: {
|
|
danger: {color: "oklch(0.6291 0.2565 29.09)"},
|
|
success: {color: "oklch(0.7113 0.2043 140.81)"},
|
|
},
|
|
light: {
|
|
danger: {color: "oklch(0.6291 0.2565 29.09)"},
|
|
success: {color: "oklch(0.7113 0.2043 140.81)"},
|
|
},
|
|
},
|
|
},
|
|
];
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Generate CSS for a single preset
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function generatePresetCss(preset) {
|
|
const lightAccent = hexToOklch(preset.accentHex);
|
|
const darkAccent = preset.darkAccentHex ? hexToOklch(preset.darkAccentHex) : lightAccent;
|
|
const hue = lightAccent.h;
|
|
const grayChroma = preset.base;
|
|
const so = preset.semanticOverrides;
|
|
|
|
function modeVars(mode) {
|
|
const accent = mode === "dark" ? darkAccent : lightAccent;
|
|
const modeAccent = preset[`${mode}Accent`] ?? accent;
|
|
const accentVars = genAccent(
|
|
modeAccent.l,
|
|
modeAccent.c,
|
|
modeAccent.h,
|
|
so?.[mode]?.accentForeground,
|
|
);
|
|
const neutrals = genNeutrals(hue, grayChroma, mode);
|
|
|
|
let semantics = {};
|
|
|
|
for (const name of ["success", "warning", "danger"]) {
|
|
if (so?.[mode]?.[name]) {
|
|
semantics = {
|
|
...semantics,
|
|
...genSemanticFromOklch(name, so[mode][name].color, so[mode][name].foreground),
|
|
};
|
|
} else {
|
|
semantics = {
|
|
...semantics,
|
|
...genSemanticFromHex(name, DEFAULT_SEMANTIC[`${name}Hex`], hue, grayChroma),
|
|
};
|
|
}
|
|
}
|
|
|
|
const radius = {};
|
|
|
|
if (preset.radius !== "medium") {
|
|
radius["--radius"] = RADIUS_MAP[preset.radius];
|
|
}
|
|
if (preset.formRadius !== "large") {
|
|
radius["--field-radius"] = RADIUS_MAP[preset.formRadius];
|
|
}
|
|
|
|
const charts = {
|
|
"--chart-1": "oklch(from var(--accent) calc(l - 0.24) c h)",
|
|
"--chart-2": "oklch(from var(--accent) calc(l - 0.12) c h)",
|
|
"--chart-3": "var(--accent)",
|
|
"--chart-4": "oklch(from var(--accent) calc(l + 0.12) c h)",
|
|
"--chart-5": "oklch(from var(--accent) calc(l + 0.24) c h)",
|
|
};
|
|
|
|
return {...neutrals, ...accentVars, ...semantics, ...radius, ...charts};
|
|
}
|
|
|
|
const light = modeVars("light");
|
|
const dark = modeVars("dark");
|
|
|
|
const renderVars = (vars) =>
|
|
Object.entries(vars)
|
|
.map(([k, v]) => ` ${k}: ${v};`)
|
|
.join("\n");
|
|
|
|
return `/* ${preset.id.charAt(0).toUpperCase() + preset.id.slice(1)} theme */
|
|
[data-design-theme="${preset.id}"]:not(.dark):not([data-theme="dark"]) {
|
|
${renderVars(light)}
|
|
}
|
|
|
|
[data-design-theme="${preset.id}"].dark,
|
|
[data-design-theme="${preset.id}"][data-theme="dark"] {
|
|
color-scheme: dark;
|
|
${renderVars(dark)}
|
|
}`;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const banner = `/* ============================================================================
|
|
Auto-generated theme presets for docs.
|
|
Run: node apps/docs/scripts/build-theme-presets.mjs
|
|
============================================================================ */\n`;
|
|
|
|
const body = PRESETS.map(generatePresetCss).join("\n\n");
|
|
const css = `${banner}@layer base {\n${body}\n}\n`;
|
|
|
|
writeFileSync(OUTPUT, css);
|
|
console.log(`✓ Generated ${PRESETS.length} theme presets → ${OUTPUT}`);
|