@ciridae/ui 1.0.4 → 1.0.9

package/dist/theme/tokens.js

@@ -1,27 +1,26 @@
 import { alpha, linearGradient } from "./color.js";
 import { derivePaletteTokens, themedGradient } from "./derive.js";
 import { defaultTheme } from "./options.js";
-import { palettes } from "./palettes.js";
+import { ciridaePalette } from "./palette.js";
 /* The two elevations, the same in both themes: a card's, and the softer one a sheet or toast casts. */
 const cardElevation = "0 1px 4px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.03)";
 const softElevation = "0 1px 2px rgba(0,0,0,.04), 0 6px 20px -4px rgba(0,0,0,.05)";
 /**
  * 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 function deriveThemeTokens(theme = {}) {
-    const source = palettes[theme.palette ?? defaultTheme.palette];
-    const palette = derivePaletteTokens(source);
-    const { dark, light } = source.greys;
+    const palette = derivePaletteTokens(ciridaePalette);
+    const { dark, light } = ciridaePalette.greys;
+    const mutedTextColor = { base: dark.muted, _light: light.muted };
     const face = (name, opacity) => themedGradient("to bottom", { base: dark.gradients[name], _light: light.gradients[name] }, opacity);
     return {
         colors: {
             ...palette.colors,
-            // Focus is the palette's focus ring, its accent unless it names another. Set from the
-            // palette, not by reference: Panda renders a reference to a dotted semantic token as an
-            // undefined variable.
-            "border.focus": source.focusRing ?? source.accent,
-            // A field's edge once invalid: the palette's red, at full strength in both themes.
+            // Focus is the palette's focus ring. Set from the palette, not by reference: Panda renders a
+            // reference to a dotted semantic token as an undefined variable.
+            "border.focus": ciridaePalette.focusRing,
+            // The palette's red at full strength in both themes.
             "border.error": palette.colors["accent.red"],
             "bg.canvas": { base: dark.canvas, _light: light.canvas },
             // The app's main surface and its panels: a translucent lift off the canvas.
@@ -33,10 +32,7 @@ export function deriveThemeTokens(theme = {}) {
             "bg.avatar": { base: dark.avatar, _light: light.avatar },
             // Behind a modal, full screen; the design gives a drawer none.
             "bg.backdrop": { base: alpha(dark.scrim, 0.6), _light: alpha(light.scrim, 0.24) },
-            /*
-             * The overlays' glass, blurred by the `blurs.*` token of the same name. A popover or menu
-             * is one glass face; a modal and a drawer are a glass shell holding a sheet.
-             */
+            // A popover or menu is one glass face; a modal and a drawer are a glass shell holding a sheet.
             "bg.popover": { base: alpha(dark.popover, 0.6), _light: alpha(light.popover, 0.33) },
             "bg.modalShell": {
                 base: alpha(dark.modalShell, 0.01),
@@ -51,15 +47,11 @@ export function deriveThemeTokens(theme = {}) {
                 _light: alpha(light.drawerShell, 0.33),
             },
             "bg.drawerSheet": { base: dark.drawerSheet, _light: alpha(light.drawerSheet, 0.88) },
-            // A flat well on the canvas or a sheet -- a tab or saved-view track, the nav pill: white at
-            // 5% in dark, where the raised faces are glass.
+            // A flat well on the canvas or a sheet: white at 5% in dark, where the raised faces are glass.
             "bg.field": { base: alpha(dark.wash, 0.05), _light: alpha(light.well, 0.66) },
-            // The well of a form field you type into or pick from -- input, textarea, select field,
-            // combobox, the sidebar search: the darker well grey in dark, the same grey well as
-            // `bg.field` in light.
+            // A form field's well: the darker well grey in dark, the same grey well as `bg.field` in light.
             "bg.formField": { base: alpha(dark.well, 0.33), _light: alpha(light.well, 0.66) },
-            // A menu's trigger while its menu is open, such as the workspace switcher: the canvas
-            // edge's grey as a fill in dark, the field's well in light.
+            // A menu's trigger while its menu is open: the canvas edge's grey as a fill in dark, the field's well in light.
             "bg.openTrigger": { base: alpha(dark.border, 0.5), _light: alpha(light.well, 0.66) },
             // A disabled field loses its grey in light and reads as a blank well.
             "bg.fieldDisabled": { base: alpha(dark.well, 0.33), _light: light.knob },
@@ -71,13 +63,9 @@ export function deriveThemeTokens(theme = {}) {
              */
             "bg.control": { base: alpha(dark.control, 0.5), _light: alpha(light.control, 0.95) },
             "bg.pill": { base: dark.pill, _light: light.pill },
-            /*
-             * The glass face of a toolbar control -- a select, a slicer, a hovered card -- flat at the
-             * middle of `gradients.selected`. Dark is the button's glass; light is a translucent wash,
-             * where the button's `bg.raised` is solid. Hover is the button face.
-             */
+            // Flat at the middle of `gradients.selected`. Dark is the button's glass; light is a
+            // translucent wash, where the button's `bg.raised` is solid.
             "bg.glass": { base: alpha(dark.glass, 0.1), _light: alpha(light.glass, 0.66) },
-            "bg.glassHover": { base: alpha(dark.glass, 0.05), _light: light.raised },
             /*
              * The button face -- secondary, round, destructive's grey siblings: glass over the dark
              * surface, a pale solid in light. Light has no hover; dark lets more surface through.
@@ -91,11 +79,9 @@ export function deriveThemeTokens(theme = {}) {
             // The quieter layer over a hovered field, mark, tab or segment: the ink at 4% in light. Dark
             // draws none there, and lifts the text or the edge instead.
             "bg.controlHover": { base: alpha(dark.wash, 0), _light: alpha(light.wash, 0.04) },
-            "bg.pressed": { base: alpha(dark.wash, 0.08), _light: alpha(light.wash, 0.08) },
-            // The firmer grey fill a chip or a subtle button wears.
             "bg.fill": { base: alpha(dark.hover, 0.1), _light: alpha(light.hover, 0.08) },
             // A hovered table or list row: a flat wash, so a column of rows reads as one surface rather
-            // than a stack of separately lit bands. A selected row takes the accent's `bg.selected`.
+            // than a stack of separately lit bands. A selected row takes `bg.selected`.
             "bg.rowHover": { base: alpha(dark.wash, 0.05), _light: alpha(light.wash, 0.04) },
             // A switch's track while off; checked, it takes the green.
             "bg.track": { base: dark.muted, _light: light.secondary },
@@ -103,25 +89,22 @@ export function deriveThemeTokens(theme = {}) {
             "fg.primary": { base: dark.primary, _light: light.primary },
             // Supporting text that still reads: a record's meta line, a part's next step.
             "fg.secondary": { base: dark.secondary, _light: light.secondary },
-            "fg.muted": { base: dark.muted, _light: light.muted },
-            // Placeholder and meta text: the muted grey, lifted a step further in light.
-            "fg.subtle": { base: dark.subtle, _light: light.subtle },
-            // A muted glyph, such as a separator, or the ring of a step not reached yet.
-            "fg.quietGlyph": { base: alpha(dark.border, 0.66), _light: alpha(light.subtle, 0.33) },
-            // A label beside its value -- a description list's term, a neutral badge, a stage's meta, a
-            // log row's detail: the muted grey in dark, the secondary in light.
+            "fg.muted": mutedTextColor,
+            // Placeholder and meta text: the same grey as `fg.muted`.
+            "fg.subtle": mutedTextColor,
+            // Meta, and a fact's label beside its value: the muted grey in dark, the secondary in light.
+            // Column heads and stat labels are `fg.primary`, Foundations' type rule.
             "fg.label": { base: dark.muted, _light: light.secondary },
             "fg.archived": { base: alpha(dark.archived, 0.66), _light: alpha(light.archived, 0.66) },
             "border.subtle": { base: dark.line, _light: alpha(light.line, 0.66) },
             "border.control": { base: alpha(dark.border, 0.5), _light: alpha(light.border, 0.66) },
             "border.panel": { base: alpha(dark.border, 1), _light: alpha(light.border, 0.66) },
-            "border.card": { base: dark.cardBorder, _light: alpha(light.cardBorder, 0.66) },
-            // The edge of what sits on the canvas -- the sidebar search, the active nav pill, the main
-            // surface's outline -- darker in light so it holds on the grey.
+            "border.card": { base: alpha(dark.cardBorder, 0.66), _light: alpha(light.cardBorder, 0.66) },
+            // The edge of what sits on the canvas, darker in light so it holds on the grey.
             "border.canvas": { base: alpha(dark.border, 0.5), _light: alpha(light.mark, 0.33) },
-            // A divider or row rule on a card, sheet or drawer, and the drawer shell's glass edge.
             "border.divider": { base: alpha(dark.border, 0.66), _light: alpha(light.border, 0.66) },
-            // The hairline round a hovered menu or select item.
+            // Gray 66 in both themes, as the Date picker and Help menu kits draw it.
+            "border.popover": { base: alpha(dark.border, 0.66), _light: alpha(light.border, 0.66) },
             "border.menuHover": {
                 base: alpha(dark.menuHoverBorder, 0.5),
                 _light: alpha(light.menuHoverBorder, 0.33),
@@ -134,7 +117,6 @@ export function deriveThemeTokens(theme = {}) {
             "border.glass": { base: alpha(dark.mark, 0.2), _light: alpha(dark.mark, 0.28) },
             // The sidebar's divider.
             "border.hairline": { base: dark.hairline, _light: light.hairline },
-            // The grey data marks: a grey series and its swatch, and a part not started yet.
             "chart.neutral": { base: alpha(dark.wash, 0.2), _light: light.secondary },
             "chart.notStarted": { base: alpha(dark.wash, 0.2), _light: alpha(light.mark, 0.33) },
         },
@@ -147,9 +129,8 @@ export function deriveThemeTokens(theme = {}) {
                 _light: linearGradient("to bottom", light.gradients.canvas, 1),
             },
             /*
-             * The faces the design paints as gradients, top to bottom; each flat `bg.*` face sits near
-             * its middle. Dark draws the canvas and panel flat, and the raised, selected and card faces
-             * as white glass falling to the muted grey.
+             * Each flat `bg.*` face sits near the middle of its gradient. Dark draws the canvas and panel flat,
+             * and the raised, selected and card faces as white glass falling to the muted grey.
              */
             canvas: face("canvas", { base: 1, _light: 1 }),
             panel: face("panel", { base: 0.66, _light: 0.66 }),
@@ -160,7 +141,6 @@ export function deriveThemeTokens(theme = {}) {
             raised: face("raised", { base: 0.1, _light: 1 }),
             // A hovered toolbar control or round button: the raised face, thinner in dark.
             raisedHover: face("raised", { base: 0.05, _light: 1 }),
-            // The toolbar control's tint -- a select, slicer, filter chip, an unticked mark in dark.
             selected: face("selected", { base: 0.1, _light: 0.66 }),
             // A hovered log row: the flat wash in light, and in dark the raised glass at half its
             // strength, as `bg.rowHover` flattens it.
@@ -222,51 +202,18 @@ export function deriveThemeTokens(theme = {}) {
         },
     };
 }
-/* Panda's variable for a token: `colors` + `bg.infoSubtle` -> `--colors-bg.info-subtle`. */
-function tokenVariable(category, name) {
-    return `--${category}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`;
-}
-/**
- * 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.
- */
-export function themeVariables(theme, colorTheme) {
-    const tokens = deriveThemeTokens(theme);
-    const themed = (value) => (colorTheme === "light" ? value._light : value.base);
-    const variables = {};
-    // Only what the theme sets, so a palette alone keeps the built faces and fonts alone keep the
-    // built colors.
-    if (theme.palette !== undefined) {
-        for (const [name, value] of Object.entries(tokens.colors))
-            variables[tokenVariable("colors", name)] = themed(value);
-        for (const [name, value] of Object.entries(tokens.gradients))
-            variables[tokenVariable("gradients", name)] = themed(value);
-        for (const [name, value] of Object.entries(tokens.shadows))
-            variables[tokenVariable("shadows", name)] = themed(value);
-    }
-    // Display falls back to sans, so setting sans sets both.
-    if (theme.fonts?.display ?? theme.fonts?.sans)
-        variables[tokenVariable("fonts", "display")] = tokens.fonts.display;
-    if (theme.fonts?.sans)
-        variables[tokenVariable("fonts", "sans")] = tokens.fonts.sans;
-    if (theme.fonts?.mono)
-        variables[tokenVariable("fonts", "mono")] = tokens.fonts.mono;
-    return variables;
-}
-/* A dot in a variable name is escaped in stylesheet text, as Panda writes `--colors-bg\.canvas`. */
-function declarations(variables) {
-    return Object.entries(variables)
-        .map(([variable, value]) => `${variable.replace(/\./g, "\\.")}: ${value};`)
-        .join("\n");
-}
 /**
- * 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.
+ * 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 function themeStylesheet(theme) {
-    return [
-        `:root {\n${declarations(themeVariables(theme, "dark"))}\n}`,
-        `:root[data-ciridae-theme=light] {\n${declarations(themeVariables(theme, "light"))}\n}`,
-    ].join("\n");
+export function fontStylesheet(fonts) {
+    const faces = deriveThemeTokens({ fonts }).fonts;
+    const declarations = [
+        // Display follows sans, so setting sans sets both.
+        ...((fonts.display ?? fonts.sans) ? [`--fonts-display: ${faces.display};`] : []),
+        ...(fonts.sans ? [`--fonts-sans: ${faces.sans};`] : []),
+        ...(fonts.mono ? [`--fonts-mono: ${faces.mono};`] : []),
+    ];
+    return `:root {\n${declarations.join("\n")}\n}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "1.0.4",
+	"version": "1.0.9",
 	"type": "module",
 	"repository": {
 		"type": "git",

package/dist/theme/palettes.js

@@ -1,254 +0,0 @@
-import { lean } from "./color.js";
-export const PALETTE_NAMES = ["ciridae", "ocean", "moss", "violet", "ember"];
-/** The third chart category: no status hue is indigo, so every palette shares this one. */
-export 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",
-        subtle: "#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",
-        subtle: "#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"],
-        },
-    },
-};
-/*
- * The kit's greys leaned toward a hue per theme; see `lean`. The hue is a mid grey a step or two
- * off neutral: only its lean counts, so the chroma it carries is the chroma the surfaces take on.
- * Text and lines take half of it, so they read near-neutral and the accent carries the palette.
- */
-function leanedGreys(hue) {
-    const leanAll = (greys, toward) => {
-        const surface = (grey) => lean(grey, toward, 1);
-        const ink = (grey) => lean(grey, toward, 0.5);
-        const surfaceGradient = ([from, to]) => [surface(from), surface(to)];
-        return {
-            canvas: surface(greys.canvas),
-            panel: surface(greys.panel),
-            card: surface(greys.card),
-            well: surface(greys.well),
-            avatar: surface(greys.avatar),
-            primary: ink(greys.primary),
-            secondary: ink(greys.secondary),
-            muted: ink(greys.muted),
-            subtle: ink(greys.subtle),
-            archived: ink(greys.archived),
-            line: ink(greys.line),
-            border: ink(greys.border),
-            cardBorder: ink(greys.cardBorder),
-            mark: ink(greys.mark),
-            hairline: ink(greys.hairline),
-            menuHoverBorder: ink(greys.menuHoverBorder),
-            wash: surface(greys.wash),
-            shade: surface(greys.shade),
-            focus: ink(greys.focus),
-            surface: surface(greys.surface),
-            control: surface(greys.control),
-            pill: surface(greys.pill),
-            glass: surface(greys.glass),
-            raised: surface(greys.raised),
-            hover: surface(greys.hover),
-            knob: surface(greys.knob),
-            scrim: surface(greys.scrim),
-            popover: surface(greys.popover),
-            modalShell: surface(greys.modalShell),
-            modalSheet: surface(greys.modalSheet),
-            drawerShell: surface(greys.drawerShell),
-            drawerSheet: surface(greys.drawerSheet),
-            gradients: {
-                canvas: surfaceGradient(greys.gradients.canvas),
-                panel: surfaceGradient(greys.gradients.panel),
-                raised: surfaceGradient(greys.gradients.raised),
-                selected: surfaceGradient(greys.gradients.selected),
-            },
-        };
-    };
-    return {
-        dark: leanAll(ciridaeGreys.dark, hue.base),
-        light: leanAll(ciridaeGreys.light, hue._light),
-    };
-}
-/* The kit's own warm glass, which every palette but ember keeps. The flat face is its middle. */
-const amberTint = {
-    face: { base: "#FFE6BD", _light: "#F2EFEB" },
-    faceGradient: { base: ["#FFFFFF", "#FFCD7B"], _light: ["#FDFDFD", "#E8E2D9"] },
-    edge: { base: ["#FFF1C9", "#A47D28"], _light: ["#B5AF87", "#BF8931"] },
-};
-export const palettes = {
-    /*
-     * The Ciridae OS look: a monochrome primary that inverts with the theme, the kit's warm gold,
-     * and a blue focus ring apart from it.
-     */
-    ciridae: {
-        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: amberTint,
-        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"] },
-        },
-    },
-    /* A cool blue, where the primary takes the accent. */
-    ocean: {
-        greys: leanedGreys({ base: "#7E8084", _light: "#7E8083" }),
-        accent: { base: "#7CBCF2", _light: "#295F8C" },
-        primary: { base: "#8BC5F4", _light: "#2E6BA2" },
-        status: {
-            green: { text: { base: "#4EB59D", _light: "#306555" } },
-            red: { text: { base: "#F36E5B", _light: "#94423C" } },
-            yellow: { text: { base: "#DFBB65", _light: "#695829" } },
-            blue: { text: { base: "#7CBCF2", _light: "#295F8C" } },
-        },
-        bronze: { base: "#6E5F4A", _light: "#6A6356" },
-        tint: amberTint,
-    },
-    /* A quiet green; success stays its own, brighter green. */
-    moss: {
-        greys: leanedGreys({ base: "#7F827F", _light: "#7F827F" }),
-        accent: { base: "#7CC7A8", _light: "#296E56" },
-        primary: { base: "#8ACEB2", _light: "#2D775C" },
-        status: {
-            green: { text: { base: "#5FBF9A", _light: "#2D634F" } },
-            red: { text: { base: "#F3705C", _light: "#94423C" } },
-            yellow: { text: { base: "#DEB85F", _light: "#695829" } },
-            blue: { text: { base: "#6AB4EE", _light: "#315D81" } },
-        },
-        bronze: { base: "#6E6246", _light: "#6A6354" },
-        tint: amberTint,
-    },
-    /* A soft violet. */
-    violet: {
-        greys: leanedGreys({ base: "#817F84", _light: "#817F83" }),
-        accent: { base: "#B4A8FF", _light: "#5B4BC9" },
-        primary: { base: "#BDB2FF", _light: "#5A4BC3" },
-        status: {
-            green: { text: { base: "#4FB89C", _light: "#316554" } },
-            red: { text: { base: "#F76B5A", _light: "#8E433A" } },
-            yellow: { text: { base: "#DDB868", _light: "#69582A" } },
-            blue: { text: { base: "#6DB5F1", _light: "#325F87" } },
-        },
-        bronze: { base: "#716046", _light: "#6C6454" },
-        tint: amberTint,
-    },
-    /* A warm terracotta; error keeps to a cooler crimson so the two stay apart. */
-    ember: {
-        greys: leanedGreys({ base: "#82807D", _light: "#82817E" }),
-        accent: { base: "#F3A07A", _light: "#A0492A" },
-        primary: { base: "#F5AB88", _light: "#A84E2C" },
-        status: {
-            green: { text: { base: "#4DB398", _light: "#2F6352" } },
-            red: { text: { base: "#F5675F", _light: "#9B3A3F" } },
-            yellow: { text: { base: "#E2BD66", _light: "#69582A" } },
-            blue: { text: { base: "#6DB5F1", _light: "#325F87" } },
-        },
-        bronze: { base: "#7A5E3E", _light: "#70624F" },
-        tint: {
-            face: { base: "#FFE0C5", _light: "#F3EEE9" },
-        },
-    },
-};