@calliopelabs/ui 0.12.0 → 0.14.0

package/dist/theme/mappings/palette.js

@@ -0,0 +1,208 @@
+import { ACCENTS, ACCENT_KEYS, DEFAULT_ACCENT, GROUNDS, GROUND_KEYS, MODE_TOKENS, STATIC_TOKENS, SURFACES, } from "../tokens.js";
+/**
+ * The palette a page paints on one ground with one family accent, as
+ * concrete colours: what the preset's custom properties compute to on that
+ * page with no product brand set. Every token mapping (JupyterLab, VS Code,
+ * Python, React Native, plain CSS) is generated from this, and a test holds
+ * it to the preset's own cascade.
+ *
+ * Values are `#rrggbb` or `rgba(r, g, b, a)`. The preset's one colour
+ * function, `color-mix(in oklab, var(--primary) N%, transparent)`, is the
+ * primary at alpha N% (mixing with transparent only scales alpha), so it is
+ * written that way here.
+ */
+const STATUS_NAMES = ["success", "warning", "info", "danger"];
+export const COLOR_TOKENS = [
+    "background",
+    "foreground",
+    "card",
+    "card-foreground",
+    "popover",
+    "popover-foreground",
+    "primary",
+    "primary-foreground",
+    "secondary",
+    "secondary-foreground",
+    "muted",
+    "muted-foreground",
+    "accent",
+    "accent-foreground",
+    "destructive",
+    "border",
+    "input",
+    "ring",
+    "chart-1",
+    "chart-2",
+    "chart-3",
+    "chart-4",
+    "chart-5",
+    "sidebar",
+    "sidebar-foreground",
+    "sidebar-primary",
+    "sidebar-primary-foreground",
+    "sidebar-accent",
+    "sidebar-accent-foreground",
+    "sidebar-border",
+    "sidebar-ring",
+    "sidebar-muted-foreground",
+    "surface-0",
+    "surface-1",
+    "surface-2",
+    ...STATUS_NAMES.flatMap((name) => [name, `${name}-fg`, `${name}-bg`, `${name}-border`]),
+];
+export { ACCENT_KEYS, DEFAULT_ACCENT, GROUNDS, GROUND_KEYS };
+/** The ground `:root` paints when nothing chooses one (the preset's default). */
+export const DEFAULT_GROUND = "black";
+/**
+ * The type stacks of the preset (`--font-sans`, `--font-mono`, `--font-head`
+ * in preset.css; a test holds them equal). Each names the app's loaded font
+ * variable first, then the family, then system fallbacks.
+ */
+export const FONTS = {
+    sans: 'var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif',
+    mono: 'var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace',
+    head: 'var(--font-dm-sans, "DM Sans"), system-ui, sans-serif',
+};
+/** The family a stack names, for targets that take one font name (React Native). */
+export function fontFamily(stack) {
+    const name = /"([^"]+)"/.exec(stack)?.[1];
+    if (!name)
+        throw new Error(`no family in ${stack}`);
+    return name;
+}
+/** `--radius` in px, and the motion durations in ms, as numbers. */
+export function staticNumbers() {
+    const n = (value, unit) => {
+        if (!value?.endsWith(unit))
+            throw new Error(`expected ${unit}: ${value}`);
+        return Number(value.slice(0, -unit.length));
+    };
+    return {
+        radius: n(STATIC_TOKENS.radius, "px"),
+        motion: {
+            fast: n(STATIC_TOKENS["motion-fast"], "ms"),
+            base: n(STATIC_TOKENS["motion-base"], "ms"),
+            slow: n(STATIC_TOKENS["motion-slow"], "ms"),
+        },
+    };
+}
+/** Parses `#rrggbb` or `rgba(r, g, b, a)`; anything else is a token this module does not know. */
+export function parseColor(value) {
+    const hex = /^#([0-9a-f]{6})$/i.exec(value);
+    if (hex) {
+        const n = parseInt(hex[1] ?? "", 16);
+        return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255, a: 1 };
+    }
+    const fn = /^rgba\((\d+), (\d+), (\d+), ([0-9.]+)\)$/.exec(value);
+    if (fn)
+        return { r: Number(fn[1]), g: Number(fn[2]), b: Number(fn[3]), a: Number(fn[4]) };
+    throw new Error(`unsupported colour ${value}`);
+}
+const rgbaString = ({ r, g, b, a }) => `rgba(${r}, ${g}, ${b}, ${a})`;
+/**
+ * A translucent token laid on its surface, for targets with no alpha
+ * (a terminal, Tk): `sidebar-*` tokens on the sidebar, the rest on the
+ * background. Opaque tokens come back as they are.
+ */
+export function flatten(palette, token) {
+    const top = parseColor(palette[token]);
+    if (top.a === 1)
+        return top;
+    const base = parseColor(palette[token.startsWith("sidebar-") ? "sidebar" : "background"]);
+    if (base.a !== 1)
+        throw new Error(`${token} sits on a translucent surface`);
+    const mix = (t, b) => Math.round(t * top.a + b * (1 - top.a));
+    return { r: mix(top.r, base.r), g: mix(top.g, base.g), b: mix(top.b, base.b), a: 1 };
+}
+const PRIMARY_TINT = /^color-mix\(in oklab, var\(--primary\) (\d+)%, transparent\)$/;
+/** A surface value: a colour as it is, or the preset's primary tint at its alpha. */
+function surface(value, primary) {
+    const tint = PRIMARY_TINT.exec(value);
+    if (tint)
+        return rgbaString({ ...parseColor(primary), a: Number(tint[1]) / 100 });
+    parseColor(value);
+    return value;
+}
+/** The concrete palette of one ground with one family accent, with no product brand. */
+export function resolvePalette(ground, accent = DEFAULT_ACCENT) {
+    const { mode } = GROUNDS[ground];
+    const s = SURFACES[ground];
+    const m = MODE_TOKENS[mode];
+    const spec = ACCENTS[accent];
+    const primary = mode === "dark" ? spec.dark : spec.light;
+    const onPrimary = mode === "dark" ? spec.onDark : spec.onLight;
+    const chart = { ...m.chart, ...spec.chart?.[mode] };
+    const status = Object.fromEntries(STATUS_NAMES.flatMap((name) => {
+        const t = m.status[name];
+        return [
+            [name, t.base],
+            [`${name}-fg`, t.fg],
+            [`${name}-bg`, t.bg],
+            [`${name}-border`, t.border],
+        ];
+    }));
+    const palette = {
+        background: s.background,
+        foreground: m.foreground,
+        card: s.card,
+        "card-foreground": m.foreground,
+        popover: s.popover,
+        "popover-foreground": m.foreground,
+        primary,
+        "primary-foreground": onPrimary,
+        secondary: s.secondary,
+        "secondary-foreground": m.foreground,
+        muted: s.muted,
+        "muted-foreground": s.mutedForeground,
+        accent: s.accent,
+        "accent-foreground": m.foreground,
+        destructive: m.destructive,
+        border: s.border,
+        input: s.input,
+        ring: primary,
+        "chart-1": primary,
+        ...chart,
+        // With no product brand, a brand sidebar falls back to the ground's card.
+        sidebar: s.sidebar === "brand" ? s.card : s.sidebar,
+        "sidebar-foreground": m.sidebarForeground,
+        "sidebar-primary": primary,
+        "sidebar-primary-foreground": onPrimary,
+        "sidebar-accent": s.sidebarAccent,
+        "sidebar-accent-foreground": m.foreground,
+        "sidebar-border": s.sidebarBorder,
+        "sidebar-ring": primary,
+        "sidebar-muted-foreground": s.mutedForeground,
+        "surface-0": s.background,
+        "surface-1": s.card,
+        "surface-2": s.popover,
+        ...status,
+    };
+    for (const token of COLOR_TOKENS)
+        palette[token] = surface(palette[token], primary);
+    return palette;
+}
+/** Every ground with every family accent. */
+export function allPalettes() {
+    return Object.fromEntries(GROUND_KEYS.map((ground) => [
+        ground,
+        Object.fromEntries(ACCENT_KEYS.map((accent) => [accent, resolvePalette(ground, accent)])),
+    ]));
+}
+/**
+ * A target's values split for compact output: per ground, the entries every
+ * accent agrees on, and per ground and accent, the entries that move with
+ * the accent.
+ */
+export function splitByAccent(values) {
+    const ground = {};
+    const accent = {};
+    for (const g of GROUND_KEYS) {
+        const each = ACCENT_KEYS.map((a) => [a, values(g, a)]);
+        const first = each[0][1];
+        const keys = Object.keys(first);
+        const moves = new Set(keys.filter((k) => each.some(([, v]) => JSON.stringify(v[k]) !== JSON.stringify(first[k]))));
+        ground[g] = Object.fromEntries(keys.filter((k) => !moves.has(k)).map((k) => [k, first[k]]));
+        accent[g] = Object.fromEntries(each.map(([a, v]) => [a, Object.fromEntries([...moves].map((k) => [k, v[k]]))]));
+    }
+    return { ground, accent };
+}

package/dist/theme/mappings/render.d.ts

@@ -0,0 +1,9 @@
+export declare function renderJupyterLabCss(): string;
+export declare function renderVsCodeCss(): string;
+export declare function renderPlainCss(): string;
+export declare function renderPython(): string;
+export declare function renderNativeJs(): string;
+export declare function renderNativeDts(): string;
+export declare function renderReadmes(): Record<string, string>;
+/** Every generated file under src/tokens/, by file name. */
+export declare function renderTokenFiles(): Record<string, string>;