@ciridae/ui 1.0.4 → 1.0.9

package/dist/theme/color.d.ts

@@ -2,4 +2,3 @@ export declare function alpha(color: string, opacity: number): string;
 /** A gradient's two ends: top and bottom for a face, start and end for a bar. */
 export type GradientEnds = readonly [from: string, to: string];
 export declare function linearGradient(direction: "to bottom" | "to right", [from, to]: GradientEnds, opacity: number): string;
-export declare function lean(grey: string, hue: string, amount: number): string;

package/dist/theme/color.js

@@ -5,28 +5,12 @@ function parseHex(color) {
     const channel = (start) => parseInt(digits.slice(start, start + 2), 16);
     return [channel(0), channel(2), channel(4)];
 }
-function formatHex([red, green, blue]) {
-    return `#${[red, green, blue].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`.toUpperCase();
-}
 /* Panda's own alpha spelling, `.12` rather than `0.12`, so the output matches hand-written values. */
 export function alpha(color, opacity) {
     const [red, green, blue] = parseHex(color);
     return `rgba(${red},${green},${blue},${String(opacity).replace(/^0\./, ".")})`;
 }
-/* A linear gradient between two #RRGGBB ends, both at `opacity`. */
 export function linearGradient(direction, [from, to], opacity) {
     const paint = (color) => (opacity === 1 ? color : alpha(color, opacity));
     return `linear-gradient(${direction}, ${paint(from)}, ${paint(to)})`;
 }
-/*
- * A grey leaned toward a hue: the hue less its own grey is added to it at `amount`, so every grey
- * in a ramp leans the same way and keeps its lightness. Channels clip at the ends, so white and
- * black stay put.
- */
-export function lean(grey, hue, amount) {
-    const [hueRed, hueGreen, hueBlue] = parseHex(hue);
-    const hueGrey = 0.299 * hueRed + 0.587 * hueGreen + 0.114 * hueBlue;
-    const [red, green, blue] = parseHex(grey);
-    const channel = (value, hueValue) => Math.min(255, Math.max(0, Math.round(value + amount * (hueValue - hueGrey))));
-    return formatHex([channel(red, hueRed), channel(green, hueGreen), channel(blue, hueBlue)]);
-}

package/dist/theme/derive.d.ts

@@ -1,4 +1,4 @@
-import { type Palette, type ThemedColor, type ThemedGradient } from "./palettes.js";
+import type { Palette, ThemedColor, ThemedGradient } from "./palette.js";
 export declare function themedGradient(direction: "to bottom" | "to right", ends: ThemedGradient, opacity: {
     base: number;
     _light: number;
@@ -6,7 +6,7 @@ export declare function themedGradient(direction: "to bottom" | "to right", ends
 /** An edge a theme does not draw, as a gradient so it fits wherever its drawn siblings go. */
 export declare const noEdge = "linear-gradient(transparent, transparent)";
 export type PaletteTokens = {
-    colors: Record<"accent.brand" | "accent.green" | "accent.greenDark" | "accent.red" | "accent.redDark" | "accent.yellow" | "accent.yellowIcon" | "accent.blue" | "accent.bronze" | "border.bronze" | "bg.successSubtle" | "bg.errorSubtle" | "bg.warningSubtle" | "bg.infoSubtle" | "bg.selected" | "bg.selectedHover" | "border.selected" | "bg.primary" | "bg.primaryHover" | "bg.tinted" | "chart.bar" | "chart.trend" | "chart.category1" | "chart.category2" | "chart.category3" | "chart.category4" | "chart.barTrack" | "chart.progressTrack" | "chart.atRiskTrack", ThemedColor>;
-    gradients: Record<"primary" | "tinted" | "border.tinted" | "chart.area" | "chart.progress" | "chart.atRisk", ThemedColor>;
+    colors: Record<"accent.brand" | "accent.green" | "accent.red" | "accent.redDark" | "accent.yellow" | "accent.yellowIcon" | "accent.blue" | "accent.bronze" | "border.bronze" | "bg.successSubtle" | "bg.errorSubtle" | "bg.warningSubtle" | "bg.infoSubtle" | "bg.selected" | "bg.selectedHover" | "border.selected" | "bg.primary" | "bg.primaryHover" | "chart.bar" | "chart.trend" | "chart.category1" | "chart.category2" | "chart.category3" | "chart.category4" | "chart.barTrack" | "chart.progressTrack" | "chart.atRiskTrack", ThemedColor>;
+    gradients: Record<"primary" | "primaryHover" | "tinted" | "border.tinted" | "chart.area" | "chart.progress" | "chart.atRisk", ThemedColor>;
 };
 export declare function derivePaletteTokens(palette: Palette): PaletteTokens;

package/dist/theme/derive.js

@@ -1,46 +1,28 @@
 import { alpha, linearGradient } from "./color.js";
-import { chartIndigo, } from "./palettes.js";
 function themed(color, map) {
     return { base: map(color.base, "base"), _light: map(color._light, "_light") };
 }
-/* A gradient token from its ends, with each color theme at its own opacity. */
 export function themedGradient(direction, ends, opacity) {
     return {
         base: linearGradient(direction, ends.base, opacity.base),
         _light: linearGradient(direction, ends._light, opacity._light),
     };
 }
-/* A flat color as a gradient, so a face with no gradient still fits where a gradient goes. */
-function flatGradient(color) {
-    return { base: [color.base, color.base], _light: [color._light, color._light] };
-}
 /** An edge a theme does not draw, as a gradient so it fits wherever its drawn siblings go. */
 export const noEdge = "linear-gradient(transparent, transparent)";
-/* A palette with no chart of its own draws its marks in its status hues, flat. */
-function chartFromStatusHues(status) {
-    return {
-        bar: status.blue.text,
-        trend: status.blue.text,
-        area: flatGradient(status.blue.text),
-        categories: [status.yellow.text, status.green.text, chartIndigo, status.red.text],
-        progress: flatGradient(status.blue.text),
-        atRisk: flatGradient(status.yellow.text),
-    };
-}
 /*
  * The subtle status backgrounds are the hue at a tenth in both themes, but for blue: .15 in dark
  * and .08 in light. A selected row, tab or card is washed with a neutral ink a little under that,
  * so it reads apart from a grey hover; its edge is the ink at a fifth or so. The bronze hairline is
  * the dark bronze in both themes, at a third and a bit under; the light bronze is too grey for
- * it. Light has no hover on the primary face; dark lets a little of the surface through. The
+ * it. The primary face's hover lets a little of the surface through in both themes. The
  * tinted face is warm glass: faint over the dark surface, nearly solid in light; its edge is
  * stronger in dark. A progress bar's track is its hue at .15 in dark and a fifth in light.
  */
 /** The ink a selection wash is mixed from: white over the dark theme, near-black over light. */
 const selectionInk = { base: "#FFFFFF", _light: "#37373A" };
 export function derivePaletteTokens(palette) {
-    const { accent, primary, status, bronze, tint } = palette;
-    const chart = palette.chart ?? chartFromStatusHues(status);
+    const { accent, primary, primaryGradient, status, bronze, tint, chart } = palette;
     const wash = (name, opacity) => themed(status[name].wash ?? status[name].text, (color, theme) => alpha(color, opacity[theme]));
     const track = (hue) => themed(hue, (color, theme) => alpha(color, theme === "base" ? 0.15 : 0.2));
     const [category1, category2, category3, category4] = chart.categories;
@@ -48,13 +30,11 @@ export function derivePaletteTokens(palette) {
         colors: {
             "accent.brand": accent,
             "accent.green": status.green.text,
-            // The deeper green and red of a label on the hue's tint, such as a tinted button's.
-            "accent.greenDark": status.green.dark ?? status.green.text,
             "accent.red": status.red.text,
-            "accent.redDark": status.red.dark ?? status.red.text,
+            "accent.redDark": status.red.dark,
             // Yellow text, and the brighter yellow of its icons, dots and rings.
             "accent.yellow": status.yellow.text,
-            "accent.yellowIcon": status.yellow.icon ?? status.yellow.text,
+            "accent.yellowIcon": status.yellow.icon,
             "accent.blue": status.blue.text,
             "accent.bronze": bronze,
             "border.bronze": {
@@ -65,36 +45,33 @@ export function derivePaletteTokens(palette) {
             "bg.errorSubtle": wash("red", { base: 0.1, _light: 0.1 }),
             "bg.warningSubtle": wash("yellow", { base: 0.1, _light: 0.1 }),
             "bg.infoSubtle": wash("blue", { base: 0.15, _light: 0.08 }),
-            // A neutral grey wash, whatever the accent: selection reads as state, not as brand color.
+            // A neutral grey wash, so selection reads as state, not as brand color.
             "bg.selected": themed(selectionInk, (color, theme) => alpha(color, theme === "base" ? 0.08 : 0.07)),
             "bg.selectedHover": themed(selectionInk, (color, theme) => alpha(color, theme === "base" ? 0.12 : 0.1)),
             "border.selected": themed(selectionInk, (color, theme) => alpha(color, theme === "base" ? 0.24 : 0.2)),
             "bg.primary": primary,
             "bg.primaryHover": { base: alpha(primary.base, 0.88), _light: primary._light },
-            "bg.tinted": { base: alpha(tint.face.base, 0.1), _light: alpha(tint.face._light, 0.66) },
             "chart.bar": chart.bar,
             "chart.trend": chart.trend,
             "chart.category1": category1,
             "chart.category2": category2,
             "chart.category3": category3,
             "chart.category4": category4,
-            // A past column under the current one: the bar's hue on its track.
             "chart.barTrack": track(chart.bar),
             "chart.progressTrack": track(chart.trend),
             "chart.atRiskTrack": track(category1),
         },
         gradients: {
-            primary: themedGradient("to bottom", palette.primaryGradient ?? flatGradient(primary), {
+            primary: themedGradient("to bottom", primaryGradient, {
                 base: 1,
                 _light: 1,
             }),
-            tinted: themedGradient("to bottom", tint.faceGradient ?? flatGradient(tint.face), {
+            primaryHover: themedGradient("to bottom", primaryGradient, { base: 0.88, _light: 0.88 }),
+            tinted: themedGradient("to bottom", tint.faceGradient, {
                 base: 0.1,
                 _light: 0.66,
             }),
-            "border.tinted": tint.edge
-                ? themedGradient("to bottom", tint.edge, { base: 0.6, _light: 0.33 })
-                : { base: noEdge, _light: noEdge },
+            "border.tinted": themedGradient("to bottom", tint.edge, { base: 0.6, _light: 0.33 }),
             "chart.area": themedGradient("to bottom", chart.area, { base: 0.1, _light: 0.2 }),
             "chart.progress": themedGradient("to right", chart.progress, { base: 1, _light: 1 }),
             "chart.atRisk": themedGradient("to right", chart.atRisk, { base: 1, _light: 1 }),

package/dist/theme/index.d.ts

@@ -1,4 +1,3 @@
 export { breakpointQuery, breakpoints, type Breakpoint } from "./breakpoints.js";
 export { defaultTheme, type Brand, type CiridaeTheme, type ColorTheme } from "./options.js";
-export { PALETTE_NAMES, type PaletteName } from "./palettes.js";
-export { deriveThemeTokens, themeStylesheet, themeVariables, type ThemeTokens } from "./tokens.js";
+export { deriveThemeTokens, type ThemeTokens } from "./tokens.js";

package/dist/theme/index.js

@@ -1,9 +1,7 @@
 /*
- * The theme at runtime: the palettes, the token values a theme derives, and the stylesheet that
- * shows a theme over a stylesheet built with another, with no rebuild. `ThemeProvider` takes a
- * `palette` and `fonts` and writes this stylesheet itself; use these directly to preview themes.
+ * The theme at runtime: the breakpoints, the brand and theme options, and the token values the
+ * preset is built from.
  */
 export { breakpointQuery, breakpoints } from "./breakpoints.js";
 export { defaultTheme } from "./options.js";
-export { PALETTE_NAMES } from "./palettes.js";
-export { deriveThemeTokens, themeStylesheet, themeVariables } from "./tokens.js";
+export { deriveThemeTokens } from "./tokens.js";

package/dist/theme/options.d.ts

@@ -1,4 +1,3 @@
-import type { PaletteName } from "./palettes.js";
 export type ColorTheme = "dark" | "light";
 /**
  * What a product calls itself (a short name for tight spots like a rail) and its public asset
@@ -14,11 +13,10 @@ export type Brand = {
     card?: string;
 };
 /**
- * The few choices a product makes once. The first two shape the tokens through
- * `createCiridaePreset`; the last two are runtime settings `ThemeProvider` takes.
+ * The few choices a product makes once. The fonts shape the tokens through `createCiridaePreset`;
+ * the last two are runtime settings `ThemeProvider` takes.
  */
 export type CiridaeTheme = {
-    palette: PaletteName;
     fonts: {
         display?: string;
         sans?: string;

package/dist/theme/options.js

@@ -1,5 +1,4 @@
 export const defaultTheme = {
-    palette: "ciridae",
     fonts: {
         display: '"Inter Variable", Inter, sans-serif',
         sans: '"Inter Variable", Inter, sans-serif',

package/dist/theme/{palettes.d.ts → palette.d.ts}

@@ -1,5 +1,4 @@
-import { type GradientEnds } from "./color.js";
-/** A color per color theme, in the shape Panda's semantic tokens take. */
+import type { GradientEnds } from "./color.js";
 export type ThemedColor = {
     base: string;
     _light: string;
@@ -9,12 +8,7 @@ export type ThemedGradient = {
     base: GradientEnds;
     _light: GradientEnds;
 };
-export declare const PALETTE_NAMES: readonly ["ciridae", "ocean", "moss", "violet", "ember"];
-export type PaletteName = (typeof PALETTE_NAMES)[number];
-/**
- * The greys under one color theme: every neutral token is one of these, flat, at an alpha or as a
- * gradient's end. Dark draws its glass as pale greys over the surface; light draws solids.
- */
+/** Dark draws its glass as pale greys over the surface; light draws solids. */
 export type Greys = {
     canvas: string;
     panel: string;
@@ -24,7 +18,6 @@ export type Greys = {
     primary: string;
     secondary: string;
     muted: string;
-    subtle: string;
     archived: string;
     line: string;
     border: string;
@@ -61,35 +54,33 @@ export type GreyRamp = {
 export type Palette = {
     greys: GreyRamp;
     accent: ThemedColor;
-    focusRing?: ThemedColor;
+    focusRing: ThemedColor;
     primary: ThemedColor;
-    primaryGradient?: ThemedGradient;
+    primaryGradient: ThemedGradient;
     status: {
         green: StatusHue & {
-            dark?: ThemedColor;
+            dark: ThemedColor;
         };
         red: StatusHue & {
-            dark?: ThemedColor;
+            dark: ThemedColor;
         };
         yellow: StatusHue & {
-            icon?: ThemedColor;
+            icon: ThemedColor;
         };
         blue: StatusHue;
     };
     bronze: ThemedColor;
     tint: {
-        face: ThemedColor;
-        faceGradient?: ThemedGradient;
-        edge?: ThemedGradient;
+        faceGradient: ThemedGradient;
+        edge: ThemedGradient;
     };
-    chart?: ChartHues;
+    chart: ChartHues;
 };
 type StatusHue = {
     text: ThemedColor;
     wash?: ThemedColor;
 };
-/** Data marks, never UI. */
-export type ChartHues = {
+type ChartHues = {
     bar: ThemedColor;
     trend: ThemedColor;
     area: ThemedGradient;
@@ -97,7 +88,5 @@ export type ChartHues = {
     progress: ThemedGradient;
     atRisk: ThemedGradient;
 };
-/** The third chart category: no status hue is indigo, so every palette shares this one. */
-export declare const chartIndigo: ThemedColor;
-export declare const palettes: Record<PaletteName, Palette>;
+export declare const ciridaePalette: Palette;
 export {};

package/dist/theme/palette.js

@@ -0,0 +1,127 @@
+/** The third chart category: no status hue is indigo. */
+const chartIndigo = { base: "#8A86FF", _light: "#5B56EE" };
+/*
+ * The kit's own greys, from the Ciridae OS Figma: each face it paints as a gradient is kept as its
+ * two ends and flattened to its middle. A dark card is white glass, washed in at 5%.
+ */
+const ciridaeGreys = {
+    dark: {
+        canvas: "#141416",
+        panel: "#27272A",
+        card: "#FFFFFF",
+        well: "#1D1D20",
+        avatar: "#36363C",
+        primary: "#FFFFFF",
+        secondary: "#B4B1AC",
+        muted: "#827F7A",
+        archived: "#827F7A",
+        line: "#36363C",
+        border: "#3C3C3C",
+        cardBorder: "#3C3C3C",
+        mark: "#898887",
+        hairline: "#3B342B",
+        menuHoverBorder: "#3C3C3C",
+        wash: "#FFFFFF",
+        shade: "#141416",
+        focus: "#827F7A",
+        surface: "#27272B",
+        control: "#1A1A1C",
+        pill: "#1B1B1D",
+        glass: "#C1BFBD",
+        raised: "#C1BFBD",
+        hover: "#C1BFBD",
+        knob: "#FFFFFF",
+        scrim: "#141416",
+        popover: "#141416",
+        modalShell: "#FFFFFF",
+        modalSheet: "#FFFFFF",
+        drawerShell: "#27272A",
+        drawerSheet: "#2B2B2D",
+        gradients: {
+            canvas: ["#141416", "#141416"],
+            panel: ["#27272A", "#27272A"],
+            raised: ["#FFFFFF", "#827F7A"],
+            selected: ["#FFFFFF", "#827F7A"],
+        },
+    },
+    light: {
+        canvas: "#E1E1E1",
+        panel: "#F8F8F8",
+        card: "#FBFBFB",
+        well: "#EEEEEE",
+        avatar: "#D8D8DE",
+        primary: "#2A2A2D",
+        secondary: "#7B7B7E",
+        muted: "#98989E",
+        archived: "#5A5854",
+        line: "#CDCDCD",
+        border: "#CDCDCD",
+        cardBorder: "#CDCDCD",
+        mark: "#A7A7A7",
+        hairline: "#E0DAD0",
+        menuHoverBorder: "#D8D8D8",
+        wash: "#2A2A2D",
+        shade: "#141416",
+        focus: "#6B6A68",
+        surface: "#FBFBFC",
+        control: "#F2F2F6",
+        pill: "#FAFAFB",
+        glass: "#F2F2F2",
+        raised: "#F3F3F4",
+        hover: "#4B4A48",
+        knob: "#FBFBFB",
+        scrim: "#2A2A2D",
+        popover: "#F0F0F0",
+        modalShell: "#EEEEEE",
+        modalSheet: "#FBFBFB",
+        drawerShell: "#F0F0F0",
+        drawerSheet: "#FBFBFB",
+        gradients: {
+            canvas: ["#D8D8D8", "#EBEBEB"],
+            panel: ["#F0F0F0", "#FFFFFF"],
+            raised: ["#FDFDFD", "#E8E9EA"],
+            selected: ["#F8F8F8", "#ECECEC"],
+        },
+    },
+};
+export const ciridaePalette = {
+    greys: ciridaeGreys,
+    accent: { base: "#D1B778", _light: "#8A6D33" },
+    focusRing: { base: "#66B7F1", _light: "#4186B8" },
+    primary: { base: "#FFFFFF", _light: "#37373A" },
+    primaryGradient: { base: ["#FFFFFF", "#FFFFFF"], _light: ["#57575B", "#171719"] },
+    status: {
+        green: {
+            text: { base: "#45A999", _light: "#488F83" },
+            wash: { base: "#45A999", _light: "#3D8B7D" },
+            dark: { base: "#45A999", _light: "#698984" },
+        },
+        red: {
+            text: { base: "#F7644F", _light: "#EB442C" },
+            dark: { base: "#F7644F", _light: "#986159" },
+        },
+        yellow: {
+            text: { base: "#DFBB65", _light: "#B27D00" },
+            icon: { base: "#DFBB65", _light: "#DB972A" },
+        },
+        blue: { text: { base: "#66B7F1", _light: "#4186B8" } },
+    },
+    bronze: { base: "#725D42", _light: "#6D6554" },
+    tint: {
+        faceGradient: { base: ["#FFFFFF", "#FFCD7B"], _light: ["#FDFDFD", "#E8E2D9"] },
+        edge: { base: ["#FFF1C9", "#A47D28"], _light: ["#B5AF87", "#BF8931"] },
+    },
+    chart: {
+        bar: { base: "#66B7F1", _light: "#72BFF6" },
+        trend: { base: "#66B7F1", _light: "#4186B8" },
+        area: { base: ["#FFFFFF", "#A4D5F8"], _light: ["#60BCFF", "#FFFFFF"] },
+        categories: [
+            { base: "#DFBB65", _light: "#F8B853" },
+            { base: "#45A999", _light: "#488F83" },
+            chartIndigo,
+            { base: "#F7644F", _light: "#EB442C" },
+        ],
+        progress: { base: ["#A6D6FA", "#4D9CD9"], _light: ["#7AC1F4", "#4186B8"] },
+        atRisk: { base: ["#F2D995", "#C99E3E"], _light: ["#F8B853", "#DB972A"] },
+    },
+};

package/dist/theme/tokens.d.ts

@@ -1,8 +1,8 @@
 import { type PaletteTokens } from "./derive.js";
-import { type CiridaeTheme, type ColorTheme } from "./options.js";
-import { type ThemedColor } from "./palettes.js";
+import { type CiridaeTheme } from "./options.js";
+import { type ThemedColor } from "./palette.js";
 export type ThemeTokens = {
-    colors: Record<keyof PaletteTokens["colors"] | "border.focus" | "border.error" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.surface" | "bg.avatar" | "bg.backdrop" | "bg.popover" | "bg.modalShell" | "bg.modalSheet" | "bg.drawerShell" | "bg.drawerSheet" | "bg.field" | "bg.formField" | "bg.openTrigger" | "bg.fieldDisabled" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.controlHover" | "bg.pressed" | "bg.fill" | "bg.rowHover" | "bg.track" | "bg.knob" | "fg.primary" | "fg.secondary" | "fg.muted" | "fg.subtle" | "fg.quietGlyph" | "fg.label" | "fg.archived" | "border.subtle" | "border.control" | "border.panel" | "border.card" | "border.canvas" | "border.divider" | "border.menuHover" | "border.mark" | "border.glass" | "border.hairline" | "chart.neutral" | "chart.notStarted", ThemedColor>;
+    colors: Record<keyof PaletteTokens["colors"] | "border.focus" | "border.error" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.surface" | "bg.avatar" | "bg.backdrop" | "bg.popover" | "bg.modalShell" | "bg.modalSheet" | "bg.drawerShell" | "bg.drawerSheet" | "bg.field" | "bg.formField" | "bg.openTrigger" | "bg.fieldDisabled" | "bg.control" | "bg.pill" | "bg.glass" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.controlHover" | "bg.fill" | "bg.rowHover" | "bg.track" | "bg.knob" | "fg.primary" | "fg.secondary" | "fg.muted" | "fg.subtle" | "fg.label" | "fg.archived" | "border.subtle" | "border.control" | "border.panel" | "border.card" | "border.canvas" | "border.divider" | "border.popover" | "border.menuHover" | "border.mark" | "border.glass" | "border.hairline" | "chart.neutral" | "chart.notStarted", ThemedColor>;
     gradients: Record<keyof PaletteTokens["gradients"] | "skeletonFill" | "canvas" | "panel" | "card" | "raised" | "raisedHover" | "selected" | "rowHover", ThemedColor>;
     shadows: Record<"search" | "inset" | "card" | "soft" | "focus" | "glow" | "toast" | "control.raised" | "control.raisedHover" | "control.pressed", ThemedColor>;
     fonts: {
@@ -13,17 +13,12 @@ export type ThemeTokens = {
 };
 /**
  * Every token value a theme decides. `createCiridaePreset` bakes these into the stylesheet;
- * `themeVariables` writes the same values over it at runtime, so the two never drift.
+ * `fontStylesheet` writes the same faces over it at runtime, so the two never drift.
  */
 export declare function deriveThemeTokens(theme?: Partial<CiridaeTheme>): ThemeTokens;
 /**
- * The CSS variables a theme sets under one color theme, named as Panda names them. Written onto
- * the document, they show a theme over a stylesheet built with another, with no rebuild. Names
- * are as `style.setProperty` takes them; in stylesheet text their dots need escaping.
+ * The faces in `fonts` as a stylesheet of the variables Panda names them by. Unlayered, it wins
+ * over the built stylesheet's `@layer tokens` blocks, so the page shows the faces with no rebuild.
+ * A face left out keeps the built one.
  */
-export declare function themeVariables(theme: Partial<CiridaeTheme>, colorTheme: ColorTheme): Record<string, string>;
-/**
- * The theme's variables for both color themes, as a stylesheet. Unlayered, it wins over the
- * built stylesheet's `@layer tokens` blocks, so the page shows the theme with no rebuild.
- */
-export declare function themeStylesheet(theme: Partial<CiridaeTheme>): string;
+export declare function fontStylesheet(fonts: CiridaeTheme["fonts"]): string;