@ciridae/ui 0.16.1 → 1.0.1

package/dist/feedback/require-config.d.ts

@@ -0,0 +1,2 @@
+declare function requireConfig(value: string, name: string): string;
+export { requireConfig };

package/dist/feedback/require-config.js

@@ -0,0 +1,7 @@
+function requireConfig(value, name) {
+    const normalized = value.trim();
+    if (!normalized)
+        throw new Error(`Feedback ${name} is required.`);
+    return normalized;
+}
+export { requireConfig };

package/dist/feedback/submit-feedback-with-attachments.d.ts

@@ -0,0 +1,10 @@
+import { type FeedbackClient } from "./client.js";
+import type { FeedbackCreateInput } from "./contract.js";
+declare function submitFeedbackWithAttachments({ client, input, idempotencyKey, files, onStatus, }: {
+    client: FeedbackClient;
+    input: FeedbackCreateInput;
+    idempotencyKey: string;
+    files: File[];
+    onStatus: (status: string | undefined) => void;
+}): Promise<import("./contract.js").FeedbackItem>;
+export { submitFeedbackWithAttachments };

package/dist/feedback/submit-feedback-with-attachments.js

@@ -0,0 +1,10 @@
+async function submitFeedbackWithAttachments({ client, input, idempotencyKey, files, onStatus, }) {
+    onStatus(files.length ? "Saving feedback and attachments…" : "Saving feedback…");
+    try {
+        return await client.create(input, { idempotencyKey, files });
+    }
+    finally {
+        onStatus(undefined);
+    }
+}
+export { submitFeedbackWithAttachments };

package/dist/format/compact-number.d.ts

@@ -0,0 +1,2 @@
+/** Readable K/M/B counts and measurements, rounded to three significant digits. */
+export declare function formatCompactNumber(value: number): string;

package/dist/format/compact-number.js

@@ -0,0 +1,8 @@
+const compact = new Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumSignificantDigits: 3,
+});
+/** Readable K/M/B counts and measurements, rounded to three significant digits. */
+export function formatCompactNumber(value) {
+    return compact.format(value);
+}

package/dist/format/money.d.ts

@@ -0,0 +1,13 @@
+type MoneyFormatOptions = {
+    /** An ISO 4217 code: "USD", "EUR", "GBP", "JPY", ... Defaults to USD. */
+    currency?: string;
+    /** Abbreviate to K, M and B: "$1.2M", "€48K". */
+    compact?: boolean;
+    /** Show minor units ("$3,940.00"). Defaults to true unless compact; zero-decimal currencies such as JPY never show them. */
+    cents?: boolean;
+    /** Defaults to en-US. */
+    locale?: string;
+};
+/** Money in any currency, in full ("$48,200.00") or compact ("$48.2K"). */
+export declare function formatMoney(amount: number, options?: MoneyFormatOptions): string;
+export {};

package/dist/format/money.js

@@ -0,0 +1,21 @@
+const formatters = new Map();
+/** Money in any currency, in full ("$48,200.00") or compact ("$48.2K"). */
+export function formatMoney(amount, options = {}) {
+    const { currency = "USD", compact = false, locale = "en-US" } = options;
+    const cents = options.cents ?? !compact;
+    const key = `${locale}|${currency}|${compact}|${cents}`;
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat(locale, {
+            style: "currency",
+            currency,
+            ...(compact
+                ? { notation: "compact", compactDisplay: "short", maximumFractionDigits: 1 }
+                : cents
+                    ? {}
+                    : { maximumFractionDigits: 0 }),
+        });
+        formatters.set(key, formatter);
+    }
+    return formatter.format(amount);
+}

package/dist/format/usd.d.ts

@@ -0,0 +1,2 @@
+/** USD with cents normally, sub-cent precision below $1, and no false zero for tiny costs. */
+export declare function formatUsd(value: number): string;

package/dist/format/usd.js

@@ -0,0 +1,16 @@
+const dollars = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+const smallDollars = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 4,
+});
+/** USD with cents normally, sub-cent precision below $1, and no false zero for tiny costs. */
+export function formatUsd(value) {
+    const magnitude = Math.abs(value);
+    if (magnitude === 0)
+        return dollars.format(0);
+    if (magnitude < 0.0001)
+        return value < 0 ? ">-$0.0001" : "<$0.0001";
+    return (magnitude < 1 ? smallDollars : dollars).format(value);
+}

package/dist/preset.d.ts

@@ -0,0 +1,18 @@
+import type { CiridaeTheme } from "./theme/options.js";
+export type { Brand, CiridaeTheme, ColorTheme } from "./theme/options.js";
+export { breakpointQuery, breakpoints, type Breakpoint } from "./theme/breakpoints.js";
+export { PALETTE_NAMES, type PaletteName } from "./theme/palettes.js";
+export { deriveThemeTokens, themeVariables, type ThemeTokens } from "./theme/tokens.js";
+export type CiridaePresetOptions = Partial<CiridaeTheme> & {
+    /**
+     * Element defaults for an app that owns the whole page: `html`, `body` and `#root` fill the
+     * window on the canvas color and sans face, links drop the browser's color and underline, and
+     * scrollbars go thin. They land in Panda's base layer, so utilities still win.
+     */
+    appBase?: boolean;
+};
+/** The kit's tokens under a theme. Anything left out takes the default, which is today's look. */
+export declare function createCiridaePreset({ appBase, ...theme }?: CiridaePresetOptions): import("@pandacss/dev").Preset;
+export declare const ciridaePreset: import("@pandacss/dev").Preset;
+/** `ciridaePreset` with `appBase`, for an app that owns the whole page. */
+export declare const ciridaeAppPreset: import("@pandacss/dev").Preset;

package/dist/preset.js

@@ -0,0 +1,470 @@
+import { definePreset } from "@pandacss/dev";
+import { breakpointQuery } from "./theme/breakpoints.js";
+import { deriveThemeTokens } from "./theme/tokens.js";
+export { breakpointQuery, breakpoints } from "./theme/breakpoints.js";
+export { PALETTE_NAMES } from "./theme/palettes.js";
+export { deriveThemeTokens, themeVariables } from "./theme/tokens.js";
+const appBaseCss = {
+    "html, body, #root": {
+        margin: "0",
+        height: "100%",
+        background: "token(colors.bg.canvas)",
+        color: "token(colors.fg.primary)",
+        fontFamily: "token(fonts.sans)",
+        WebkitFontSmoothing: "antialiased",
+    },
+    ":where(a)": { color: "inherit", textDecoration: "none" },
+    "*": { scrollbarWidth: "thin", scrollbarColor: "token(colors.border.control) transparent" },
+};
+/** The kit's tokens under a theme. Anything left out takes the default, which is today's look. */
+export function createCiridaePreset({ appBase = false, ...theme } = {}) {
+    const { colors, gradients, shadows, fonts } = deriveThemeTokens(theme);
+    return definePreset({
+        name: "ciridae",
+        ...(appBase ? { globalCss: appBaseCss } : {}),
+        utilities: {
+            extend: {
+                /*
+                 * The one focus ring, drawn under whatever state shows focus, usually
+                 * `_focusVisible: { focusRing: "outer" }`. Replaces Panda's own `focusRing`, which
+                 * nothing here used. `outer` sits just outside a standalone control and reaches
+                 * `focus.ringReach` past it; `inset` sits inside the element's edge, for an item that
+                 * fills a container that clips or scrolls, so nothing can cut it off.
+                 */
+                focusRing: {
+                    className: "focus-ring",
+                    values: { outer: "outer", inset: "inset" },
+                    transform(value, { token }) {
+                        const width = token("spacing.focus.ringWidth");
+                        return {
+                            outline: `${width} solid ${token("colors.border.focus")}`,
+                            outlineOffset: value === "inset" ? `calc(${width} * -1)` : token("spacing.focus.ringOffset"),
+                        };
+                    },
+                },
+                /*
+                 * For a container that clips or scrolls with no padding of its own: it reaches past its
+                 * edges by an outer ring and pads back in by the same, so its children sit where they
+                 * did and their rings stay whole. Not for a bordered box, whose border it would move.
+                 */
+                ringRoom: {
+                    className: "ring-room",
+                    values: { type: "boolean" },
+                    transform(value, { token }) {
+                        if (!value)
+                            return {};
+                        const reach = token("spacing.focus.ringReach");
+                        return { margin: `calc(${reach} * -1)`, padding: reach };
+                    },
+                },
+            },
+        },
+        conditions: {
+            extend: {
+                /* ThemeProvider writes `data-ciridae-theme` onto the document element. */
+                light: "[data-ciridae-theme=light] &",
+                /*
+                 * The viewport breakpoints. `wide` is where a page's wide rows stop sitting side by side;
+                 * `rail` folds the shell's sidebar to its icon rail; `phone` stacks what sat side by side
+                 * and hides the sidebar for its menu. `notWide` and `notPhone` are their exact
+                 * complements, for a layout that only spreads out once there is room.
+                 */
+                wide: `@media ${breakpointQuery("wide")}`,
+                notWide: `@media not all and ${breakpointQuery("wide")}`,
+                rail: `@media ${breakpointQuery("rail")}`,
+                phone: `@media ${breakpointQuery("phone")}`,
+                notPhone: `@media not all and ${breakpointQuery("phone")}`,
+            },
+        },
+        theme: {
+            extend: {
+                // The app's base type. AppShell sets it, and so does every surface that portals out of
+                // the shell (dialogs, popovers, menus, drawers, toasts), so their content never falls
+                // back to the browser's 16px.
+                textStyles: {
+                    body: {
+                        value: { fontSize: "body", lineHeight: "compact", letterSpacing: "compact" },
+                    },
+                },
+                keyframes: {
+                    skeletonShimmer: {
+                        from: { backgroundPosition: "150% 0" },
+                        to: { backgroundPosition: "-50% 0" },
+                    },
+                    spin: { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } },
+                    livePulse: { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.35" } },
+                    wizardEnterForward: {
+                        from: { opacity: "0", transform: "translateX(8px)" },
+                        to: { opacity: "1", transform: "translateX(0)" },
+                    },
+                    wizardEnterBack: {
+                        from: { opacity: "0", transform: "translateX(-8px)" },
+                        to: { opacity: "1", transform: "translateX(0)" },
+                    },
+                    wizardResultIn: {
+                        from: { opacity: "0", transform: "scale(0.98)" },
+                        to: { opacity: "1", transform: "scale(1)" },
+                    },
+                },
+                tokens: {
+                    spacing: {
+                        none: { value: "0" },
+                        "control.trackInset": { value: "2px" },
+                        "focus.ringWidth": { value: "2px" },
+                        // Round 2 draws the ring flush against the control, as a 2px spread with no gap.
+                        "focus.ringOffset": { value: "0px" },
+                        // How far an outer ring reaches past its control: the room a clipping container keeps.
+                        "focus.ringReach": {
+                            value: "calc({spacing.focus.ringWidth} + {spacing.focus.ringOffset})",
+                        },
+                        "control.iconGap": { value: "6px" },
+                        "control.block": { value: "8px" },
+                        "control.inline": { value: "16px" },
+                        "control.compactBlock": { value: "6px" },
+                        "control.compactInline": { value: "12px" },
+                        "control.largeInline": { value: "20px" },
+                        // Inline padding on the side of a trigger that ends in its caret.
+                        "control.iconInline": { value: "10px" },
+                        // The underline search field keeps its icon close to the text's left edge.
+                        "search.inline": { value: "4px" },
+                        "field.block": { value: "10px" },
+                        "layout.tightGap": { value: "4px" },
+                        // Between a sidebar's groups, and the sidebar's own inset from the window edge.
+                        "sidebar.groupGap": { value: "18px" },
+                        "sidebar.inline": { value: "10px" },
+                        "sidebar.block": { value: "14px" },
+                        // A pill tab's inline padding, a little wider than a compact control's.
+                        "control.tabInline": { value: "14px" },
+                        "layout.controlGap": { value: "8px" },
+                        "layout.contentGap": { value: "12px" },
+                        "layout.clusterGap": { value: "16px" },
+                        "layout.pageGap": { value: "20px" },
+                        "layout.projectListOffset": { value: "28px" },
+                        "layout.sectionGap": { value: "24px" },
+                        "log.columnGap": { value: "10px" },
+                        "log.detailIndent": { value: "34px" },
+                        "log.detailIndentCompact": { value: "32px" },
+                        "log.rowBlock": { value: "3px" },
+                        "menu.inset": { value: "4px" },
+                        "menu.itemInline": { value: "8px" },
+                        // Between a sidebar row's avatar or mark and its label.
+                        "sidebar.markGap": { value: "10px" },
+                        "panel.hairline": { value: "4px" },
+                        "panel.compact": { value: "8px" },
+                        "panel.default": { value: "12px" },
+                        "panel.comfortable": { value: "16px" },
+                        "panel.roomy": { value: "24px" },
+                        "panel.sidebarBlock": { value: "14px" },
+                        "page.inline": { value: "12px" },
+                        "shell.leading": { value: "28px" },
+                        "table.cell": { value: "12px" },
+                        "table.rowBlock": { value: "16px" },
+                        "table.compactRowBlock": { value: "8px" },
+                    },
+                    sizes: {
+                        "border.hairline": { value: "1px" },
+                        "indicator.dot": { value: "4px" },
+                        "indicator.live": { value: "6px" },
+                        "indicator.badge": { value: "10px" },
+                        // A count on a button's corner, such as the bell's unread notifications.
+                        "indicator.count": { value: "16px" },
+                        "log.caretColumn": { value: "12px" },
+                        "log.minimum": { value: "320px" },
+                        "log.rawMaximum": { value: "200px" },
+                        "assistant.orb": { value: "28px" },
+                        "widget.header": { value: "40px" },
+                        "avatar.welcome": { value: "50px" },
+                        "avatar.micro": { value: "12px" },
+                        "avatar.small": { value: "20px" },
+                        "avatar.menu": { value: "24px" },
+                        "avatar.row": { value: "26px" },
+                        "avatar.large": { value: "44px" },
+                        // A mark set inline beside a name -- an icon, a provider logo, a project tile -- so
+                        // every kind lines up in one column and indents can count on its width.
+                        "mark.inline": { value: "{fontSizes.icon.medium}" },
+                        "progress.track": { value: "6px" },
+                        "progress.segment": { value: "3px" },
+                        "indicator.swatch": { value: "8px" },
+                        // A row in a menu or a select's list; a compact trigger's list is tighter still.
+                        "menu.item": { value: "30px" },
+                        "select.compactItem": { value: "28px" },
+                        "code.maximum": { value: "320px" },
+                        // The Ciridae mark above a short card, as the sign-in pages show it.
+                        "brand.logo": { value: "40px" },
+                        "indicator.radio": { value: "6px" },
+                        "skeleton.line": { value: "16px" },
+                        "skeleton.short": { value: "64px" },
+                        "skeleton.medium": { value: "120px" },
+                        "skeleton.long": { value: "200px" },
+                        // A chart's height, which its loading placeholder holds.
+                        "chart.small": { value: "220px" },
+                        "chart.medium": { value: "270px" },
+                        "chart.large": { value: "360px" },
+                        "control.mark": { value: "20px" },
+                        // The longest a waiting file's name runs in its chip before it truncates.
+                        "file.chipName": { value: "160px" },
+                        "control.checkbox": { value: "16px" },
+                        "control.radio": { value: "16px" },
+                        "control.knob": { value: "14px" },
+                        "control.toggleTrack": { value: "18px" },
+                        "control.clear": { value: "20px" },
+                        // A step chip or small badge in a row of text.
+                        "control.chip": { value: "22px" },
+                        "control.small": { value: "30px" },
+                        "control.row": { value: "34px" },
+                        "control.shortcut": { value: "24px" },
+                        "control.compact": { value: "32px" },
+                        "control.default": { value: "38px" },
+                        "control.search": { value: "40px" },
+                        // The widest a page's search field grows beside its filters.
+                        "control.searchField": { value: "420px" },
+                        "workspace.mark": { value: "24px" },
+                        "workspace.avatar": { value: "34px" },
+                        "control.field": { value: "46px" },
+                        "sidebar.projectAction": { value: "48px" },
+                        "toast.minimum": { value: "56px" },
+                        "chat.footer": { value: "60px" },
+                        "shell.header": { value: "54px" },
+                        "shell.collapsed": { value: "71px" },
+                        "table.scroll": { value: "min(70vh, 720px)" },
+                        "field.textarea": { value: "96px" },
+                        "chat.input": { value: "87px" },
+                        "chat.inputMobile": { value: "72px" },
+                        "chat.composerMinimum": { value: "149px" },
+                        "overlay.menu": { value: "200px" },
+                        // The tallest a select's or combobox's list grows before it scrolls.
+                        "overlay.menuList": { value: "320px" },
+                        // The notification tray as a popover from the bell, and how much of its list shows.
+                        "overlay.tray": { value: "380px" },
+                        "overlay.trayList": { value: "min(60vh, 480px)" },
+                        "overlay.tooltip": { value: "320px" },
+                        // A popover holding a small form, such as a filter or an export.
+                        "overlay.popoverNarrow": { value: "260px" },
+                        "overlay.popover": { value: "300px" },
+                        "overlay.popoverWide": { value: "320px" },
+                        "search.dropdownPreview": { value: "200px" },
+                        "emptyState.minimum": { value: "200px" },
+                        "search.regularPreview": { value: "250px" },
+                        "search.sidebarPreview": { value: "264px" },
+                        "calendar.width": { value: "268px" },
+                        "shell.sidebar": { value: "248px" },
+                        "overlay.dialog": { value: "500px" },
+                        "overlay.dialogWide": { value: "720px" },
+                        // The floating drawer's sheet, inside its 8px shell.
+                        "overlay.sheet": { value: "480px" },
+                        // The agent sheet: narrower as a drawer, and docked beside the page it grows with the
+                        // window, 428px at 1440 and 488px from 1650 up.
+                        "overlay.sheetNarrow": { value: "400px" },
+                        "overlay.sheetDocked": { value: "clamp(400px, 29.7vw, 488px)" },
+                        "toast.width": { value: "440px" },
+                        "chat.thread": { value: "640px" },
+                        "chat.composer": { value: "640px" },
+                        // A user bubble in the agent sheet leaves room on its left, as a reply would.
+                        "chat.bubble": { value: "85%" },
+                        // A file sent with a message, as a square tile over its bubble.
+                        "chat.attachment": { value: "88px" },
+                        "settings.column": { value: "640px" },
+                        "card.centered": { value: "480px" },
+                        "scroll.bar": { value: "6px" },
+                        "card.centeredWide": { value: "720px" },
+                        "card.centeredForm": { value: "400px" },
+                        "steps.image": { value: "320px" },
+                        "checklist.maximum": { value: "280px" },
+                        "page.maximum": { value: "1440px" },
+                    },
+                    opacity: { disabled: { value: ".5" } },
+                    fontWeights: {
+                        regular: { value: "400" },
+                        medium: { value: "500" },
+                        semibold: { value: "600" },
+                    },
+                    letterSpacings: { compact: { value: "-.01em" }, label: { value: ".04em" } },
+                    fonts: {
+                        display: { value: fonts.display },
+                        sans: { value: fonts.sans },
+                        numeric: { value: '"Geist Mono Variable", "Geist Mono", ui-monospace, monospace' },
+                        mono: { value: fonts.mono },
+                    },
+                    lineHeights: {
+                        tight: { value: "1" },
+                        compact: { value: "1.25" },
+                        log: { value: "1.4" },
+                        body: { value: "1.5" },
+                    },
+                    fontSizes: {
+                        body: { value: "14px" },
+                        caption: { value: "13px" },
+                        code: { value: "12px" },
+                        heading: { value: "16px" },
+                        "heading.section": { value: "18px" },
+                        "heading.page": { value: "20px" },
+                        "log.body": { value: "12px" },
+                        "log.level": { value: "10px" },
+                        // Initials inside the small avatars, scaled with them.
+                        "avatar.micro": { value: "6px" },
+                        "avatar.mark": { value: "7px" },
+                        "avatar.small": { value: "9px" },
+                        "icon.tiny": { value: "8px" },
+                        "icon.check": { value: "10px" },
+                        "icon.compact": { value: "12px" },
+                        "icon.small": { value: "14px" },
+                        "icon.medium": { value: "16px" },
+                        "icon.large": { value: "24px" },
+                        // A rail button's icon: the rail has no labels, so its icons carry the meaning.
+                        "icon.rail": { value: "20px" },
+                        "icon.display": { value: "40px" },
+                        "icon.hero": { value: "60px" },
+                    },
+                    durations: { fast: { value: "150ms" }, default: { value: "200ms" } },
+                    /*
+                     * Each overlay kind has its own tier, rising in the order one opens from another: a
+                     * dialog from a drawer, a menu from a dialog, a tooltip over any of them. A backdrop
+                     * shares its popup's tier and is mounted first, so it falls under its popup but over
+                     * the tier below. `raised` and `scrollbar` stack within a page.
+                     */
+                    zIndex: {
+                        raised: { value: "1" },
+                        scrollbar: { value: "2" },
+                        drawer: { value: "50" },
+                        dialog: { value: "60" },
+                        popover: { value: "70" },
+                        tooltip: { value: "80" },
+                        toast: { value: "90" },
+                    },
+                    radii: {
+                        round: { value: "999px" },
+                        keycap: { value: "6px" },
+                        // Round 2 fields -- inputs, selects, checkboxes -- are nearly square-cornered.
+                        control: { value: "4px" },
+                        action: { value: "8px" },
+                        field: { value: "12px" },
+                        inset: { value: "12px" },
+                        card: { value: "24px" },
+                        pill: { value: "36px" },
+                    },
+                },
+                semanticTokens: {
+                    colors: {
+                        "bg.canvas": { value: colors["bg.canvas"] },
+                        // The app's main surface and its panels: a translucent lift off the canvas.
+                        "bg.panel": { value: colors["bg.panel"] },
+                        "bg.card": { value: colors["bg.card"] },
+                        "bg.avatar": { value: colors["bg.avatar"] },
+                        "bg.backdrop": {
+                            value: { base: "rgba(0,0,0,.66)", _light: "rgba(0,0,0,.4)" },
+                        },
+                        // The status hues as washes, drawn from the palette.
+                        "bg.infoSubtle": { value: colors["bg.infoSubtle"] },
+                        "bg.successSubtle": { value: colors["bg.successSubtle"] },
+                        "bg.warningSubtle": { value: colors["bg.warningSubtle"] },
+                        "bg.errorSubtle": { value: colors["bg.errorSubtle"] },
+                        "fg.archived": { value: colors["fg.archived"] },
+                        "border.subtle": { value: colors["border.subtle"] },
+                        // Round 2 focus is the brand accent in both themes.
+                        "border.focus": { value: colors["border.focus"] },
+                        // The greys, from the palette's ramp; see `deriveThemeTokens`.
+                        "fg.primary": { value: colors["fg.primary"] },
+                        "fg.muted": { value: colors["fg.muted"] },
+                        "fg.secondary": { value: colors["fg.secondary"] },
+                        "fg.subtle": { value: colors["fg.subtle"] },
+                        "border.control": { value: colors["border.control"] },
+                        "bg.field": { value: colors["bg.field"] },
+                        "bg.fieldDisabled": { value: colors["bg.fieldDisabled"] },
+                        "border.mark": { value: colors["border.mark"] },
+                        // A field's edge once invalid: the accent red in dark, a quieter dark red in light.
+                        "border.error": { value: colors["border.error"] },
+                        // A hovered row is a grey wash; a selected row, tab, segment or card is the accent's.
+                        "bg.rowHover": { value: colors["bg.rowHover"] },
+                        "bg.selected": { value: colors["bg.selected"] },
+                        "bg.selectedHover": { value: colors["bg.selectedHover"] },
+                        "border.selected": { value: colors["border.selected"] },
+                        "bg.track": { value: colors["bg.track"] },
+                        "bg.knob": { value: colors["bg.knob"] },
+                        "border.panel": { value: colors["border.panel"] },
+                        "border.card": { value: colors["border.card"] },
+                        "border.glass": { value: colors["border.glass"] },
+                        "border.toolbar": { value: colors["border.toolbar"] },
+                        "border.hairline": { value: colors["border.hairline"] },
+                        /*
+                         * The faces, all flat; see `deriveThemeTokens`. `bg.surface` lifts a dialog or drawer
+                         * off the card; `bg.control` is what a field or tab track wears; `bg.glass` and
+                         * `bg.raised` are the toolbar control and the button; `bg.hover` and `bg.fill` are
+                         * the grey washes.
+                         */
+                        "bg.surface": { value: colors["bg.surface"] },
+                        "bg.control": { value: colors["bg.control"] },
+                        "bg.pill": { value: colors["bg.pill"] },
+                        "bg.glass": { value: colors["bg.glass"] },
+                        "bg.glassHover": { value: colors["bg.glassHover"] },
+                        "bg.raised": { value: colors["bg.raised"] },
+                        "bg.raisedHover": { value: colors["bg.raisedHover"] },
+                        "bg.check": { value: colors["bg.check"] },
+                        "bg.hover": { value: colors["bg.hover"] },
+                        "bg.fill": { value: colors["bg.fill"] },
+                        /*
+                         * `primary` inverts: white on a dark panel, near-black on a light one. Light has no
+                         * hover on it; dark lets a little of the surface through. Filled faces draw no edge.
+                         */
+                        "bg.primary": { value: colors["bg.primary"] },
+                        "bg.primaryHover": { value: colors["bg.primaryHover"] },
+                        /* The warm glass of the tinted button. */
+                        "bg.tinted": { value: colors["bg.tinted"] },
+                        /* The destructive button's red. */
+                        "bg.danger": { value: { base: "#F67C6A", _light: "#F36B57" } },
+                        // Links and focus take the palette's accent; the four status hues keep their meaning.
+                        "accent.brand": { value: colors["accent.brand"] },
+                        "accent.green": { value: colors["accent.green"] },
+                        "accent.red": { value: colors["accent.red"] },
+                        "accent.yellow": { value: colors["accent.yellow"] },
+                        "accent.blue": { value: colors["accent.blue"] },
+                        "accent.bronze": { value: colors["accent.bronze"] },
+                        "border.bronze": { value: colors["border.bronze"] },
+                        /*
+                         * Text sitting on a filled accent. Deliberately the same in both themes:
+                         * the accent it sits on stays saturated, so a value that followed the
+                         * theme would put dark text on red in the light one.
+                         */
+                        "fg.onAccent": { value: "#FFFFFF" },
+                    },
+                    shadows: {
+                        "indicator.live": {
+                            value: {
+                                base: "inset 0 1px 1px rgba(255,255,255,.18), inset 0 -1px 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.2)",
+                                _light: "inset 0 1px 1px rgba(255,255,255,.18), inset 0 -1px 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08)",
+                            },
+                        },
+                        // The shadows cast in the palette's greys; see `deriveThemeTokens`.
+                        search: { value: shadows.search },
+                        inset: { value: shadows.inset },
+                        card: { value: shadows.card },
+                        focus: { value: shadows.focus },
+                        panel: {
+                            value: { base: "0 4px 124px rgba(0,0,0,.25)", _light: "0 4px 124px rgba(0,0,0,.12)" },
+                        },
+                        glow: { value: shadows.glow },
+                        badge: {
+                            value: {
+                                base: "0 0 8px rgba(255,132,80,.25)",
+                                _light: "0 0 8px rgba(255,132,80,.3)",
+                            },
+                        },
+                        toast: { value: shadows.toast },
+                        "control.raised": { value: shadows["control.raised"] },
+                        "control.raisedHover": { value: shadows["control.raisedHover"] },
+                        "control.pressed": { value: shadows["control.pressed"] },
+                    },
+                    gradients: {
+                        /* The only gradients: the skeleton's shimmer and the orb mark. Every face is flat. */
+                        skeleton: { value: gradients.skeleton },
+                        orb: {
+                            value: "radial-gradient(circle at 70% 24%, rgba(232,224,195,.9) 0 9%, transparent 11%), linear-gradient(180deg, #E8E0C3, #46361D)",
+                        },
+                    },
+                },
+            },
+        },
+    });
+}
+export const ciridaePreset = createCiridaePreset();
+/** `ciridaePreset` with `appBase`, for an app that owns the whole page. */
+export const ciridaeAppPreset = createCiridaePreset({ appBase: true });

package/dist/styled-system/css/conditions.mjs

@@ -1,6 +1,6 @@
 import { withoutSpace } from '../helpers.mjs';
 
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_wide,_notWide,_rail,_phone,_notPhone,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"
 const conditions = new Set(conditionsStr.split(','))
 
 const conditionRegex = /^@|&|&$/