@ciridae/ui 1.0.2 → 1.0.4

package/dist/preset.js

@@ -1,5 +1,7 @@
 import { definePreset } from "@pandacss/dev";
 import { breakpointQuery } from "./theme/breakpoints.js";
+import { linearGradient } from "./theme/color.js";
+import { noEdge, themedGradient } from "./theme/derive.js";
 import { deriveThemeTokens } from "./theme/tokens.js";
 export { breakpointQuery, breakpoints } from "./theme/breakpoints.js";
 export { PALETTE_NAMES } from "./theme/palettes.js";
@@ -16,6 +18,12 @@ const appBaseCss = {
     ":where(a)": { color: "inherit", textDecoration: "none" },
     "*": { scrollbarWidth: "thin", scrollbarColor: "token(colors.border.control) transparent" },
 };
+/* The grey glass edge dark draws round a raised face, and round most of the hue glass. */
+const darkGlassEdge = "linear-gradient(to bottom, rgba(137,136,135,.33), rgba(101,96,92,.33) 10%, rgba(43,41,39,.33) 90%, rgba(64,63,63,.33))";
+/* An edge drawn as the grey glass in dark, and as a two-color gradient at .33 in light. */
+function glassEdgeWithLightGradient(top, bottom) {
+    return { base: darkGlassEdge, _light: linearGradient("to bottom", [top, bottom], 0.33) };
+}
 /** 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);
@@ -87,10 +95,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                     },
                 },
                 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: {
@@ -125,12 +129,16 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "control.largeInline": { value: "20px" },
                         // Inline padding on the side of a trigger that ends in its caret.
                         "control.iconInline": { value: "10px" },
+                        // The assistant launcher's padding at its end, round the shortcut keycap.
+                        "control.launcherInlineEnd": { value: "7px" },
                         // 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.groupGap": { value: "16px" },
+                        // The least room between the sidebar's navigation and its footer.
+                        "sidebar.footerGap": { value: "18px" },
                         "sidebar.inline": { value: "10px" },
                         "sidebar.block": { value: "14px" },
                         // A pill tab's inline padding, a little wider than a compact control's.
@@ -138,22 +146,47 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "layout.controlGap": { value: "8px" },
                         "layout.contentGap": { value: "12px" },
                         "layout.clusterGap": { value: "16px" },
-                        "layout.pageGap": { value: "20px" },
+                        "layout.pageGap": { value: "12px" },
                         "layout.projectListOffset": { value: "28px" },
-                        "layout.sectionGap": { value: "24px" },
+                        "layout.sectionGap": { value: "12px" },
+                        // Between a centered card's title, body and actions, such as a sign-in card's. The design
+                        // draws no centered card; one card alone on an empty page keeps more room than the
+                        // sections of an app page.
+                        "layout.centeredCardGap": { value: "24px" },
                         "log.columnGap": { value: "10px" },
                         "log.detailIndent": { value: "34px" },
                         "log.detailIndentCompact": { value: "32px" },
                         "log.rowBlock": { value: "3px" },
+                        // A log entry's padding: in a feed, a compact feed, and a side panel.
+                        "log.entryBlock": { value: "14px" },
+                        "log.entryInline": { value: "20px" },
+                        "log.entryCompactBlock": { value: "8px" },
+                        "log.entryPanelBlock": { value: "10px" },
+                        "log.entryPanelInline": { value: "12px" },
                         "menu.inset": { value: "4px" },
                         "menu.itemInline": { value: "8px" },
                         // Between a sidebar row's avatar or mark and its label.
-                        "sidebar.markGap": { value: "10px" },
+                        "sidebar.markGap": { value: "8px" },
                         "panel.hairline": { value: "4px" },
                         "panel.compact": { value: "8px" },
                         "panel.default": { value: "12px" },
                         "panel.comfortable": { value: "16px" },
                         "panel.roomy": { value: "24px" },
+                        // A card's padding, and a stat tile's.
+                        "panel.card": { value: "20px" },
+                        "tile.block": { value: "18px" },
+                        "tile.inline": { value: "20px" },
+                        // Between the bars of a stat tile's placeholder.
+                        "skeleton.tileGap": { value: "10px" },
+                        // An empty state's block padding on a page, and bare or in a compact spot.
+                        "emptyState.pageBlock": { value: "56px" },
+                        "emptyState.compactBlock": { value: "32px" },
+                        // Between the stages on a stage strip.
+                        "stage.connectorGap": { value: "10px" },
+                        // Between a numbered list's number and its text, the kit's Numbered item.
+                        "list.numberGap": { value: "10px" },
+                        // Between a budget row's name and its meter, the kit's Budget row.
+                        "meter.rowGap": { value: "36px" },
                         "panel.sidebarBlock": { value: "14px" },
                         "page.inline": { value: "12px" },
                         "shell.leading": { value: "28px" },
@@ -170,6 +203,8 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "indicator.count": { value: "16px" },
                         "log.caretColumn": { value: "12px" },
                         "log.minimum": { value: "320px" },
+                        // A log entry's time column.
+                        "log.timeColumn": { value: "64px" },
                         "log.rawMaximum": { value: "200px" },
                         "assistant.orb": { value: "28px" },
                         "widget.header": { value: "40px" },
@@ -177,11 +212,14 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "avatar.micro": { value: "12px" },
                         "avatar.small": { value: "20px" },
                         "avatar.menu": { value: "24px" },
-                        "avatar.row": { value: "26px" },
+                        "avatar.agent": { value: "26px" },
+                        "avatar.row": { value: "32px" },
+                        // A record's owner, and the stand-in when there is none.
+                        "avatar.owner": { value: "28px" },
                         "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}" },
+                        "mark.inline": { value: "{fontSizes.icon.small}" },
                         "progress.track": { value: "6px" },
                         "progress.segment": { value: "3px" },
                         "indicator.swatch": { value: "8px" },
@@ -193,7 +231,20 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "brand.logo": { value: "40px" },
                         "indicator.radio": { value: "6px" },
                         "skeleton.line": { value: "16px" },
+                        // A skeleton's bar or pill, its small pill, and a caption line.
+                        "skeleton.bar": { value: "20px" },
+                        "skeleton.badge": { value: "16px" },
+                        "skeleton.caption": { value: "8px" },
                         "skeleton.short": { value: "64px" },
+                        // A status chip's placeholder, and the design's fixed text bar; the small one is
+                        // `skeleton.caption`.
+                        "skeleton.pill": { value: "84px" },
+                        "skeleton.textLine": { value: "10px" },
+                        // A stat tile's height, which its placeholder and its empty stand-in hold; a card's
+                        // placeholder, and the band its bars sit centred in.
+                        "tile.minimum": { value: "96px" },
+                        "skeleton.card": { value: "300px" },
+                        "skeleton.cardBody": { value: "150px" },
                         "skeleton.medium": { value: "120px" },
                         "skeleton.long": { value: "200px" },
                         // A chart's height, which its loading placeholder holds.
@@ -210,30 +261,61 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "control.clear": { value: "20px" },
                         // A step chip or small badge in a row of text.
                         "control.chip": { value: "22px" },
+                        // A keycap that holds a word such as Esc rather than one glyph.
+                        "control.wordKeycap": { value: "35px" },
+                        // The composer's send button.
+                        "control.send": { value: "26px" },
                         "control.small": { value: "30px" },
+                        // A tab at rest: 2px under the open one, which fills its 30px track.
+                        "control.restingTab": { value: "28px" },
                         "control.row": { value: "34px" },
+                        // A round icon button in the top bar or a pager, and the smaller one that closes a sheet.
+                        "control.round": { value: "34px" },
+                        "control.roundSmall": { value: "28px" },
+                        "control.sidebarSearch": { value: "36px" },
+                        // The square tile an icon sits on beside a row's title.
+                        // The disc a numbered list's number sits in.
+                        "list.number": { value: "20px" },
+                        "tile.icon": { value: "32px" },
+                        // The parts rollup's line, in place of the stage strip.
+                        "partsRollup.height": { value: "26px" },
+                        // A stat tile's chart slot, and the line's plot at its foot, under the end point's room.
+                        "sparkline.width": { value: "88px" },
+                        "sparkline.height": { value: "32px" },
+                        "sparkline.plotWidth": { value: "84px" },
+                        "sparkline.plotHeight": { value: "25px" },
                         "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.mark": { value: "26px" },
                         "workspace.avatar": { value: "34px" },
                         "control.field": { value: "46px" },
                         "sidebar.projectAction": { value: "48px" },
+                        // The rule between the icon rail's sections.
+                        "sidebar.railRule": { value: "24px" },
+                        // A sidebar row shorter than a page's, such as the settings sidebar's Back to app.
+                        "sidebar.shortRow": { value: "28px" },
                         "toast.minimum": { value: "56px" },
                         "chat.footer": { value: "60px" },
                         "shell.header": { value: "54px" },
-                        "shell.collapsed": { value: "71px" },
+                        "shell.collapsed": { value: "64px" },
                         "table.scroll": { value: "min(70vh, 720px)" },
-                        "field.textarea": { value: "96px" },
+                        "table.headRow": { value: "44px" },
+                        // A textarea at rest: two lines of body text in its well; it grows as it is dragged.
+                        "field.textarea": { value: "64px" },
+                        // An input set inline in a row.
+                        "field.inline": { value: "28px" },
                         "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" },
+                        // A stuck step's "Not sure?" menu of ways forward.
+                        "overlay.helpMenu": { value: "360px" },
                         // 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)" },
@@ -246,9 +328,14 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "emptyState.minimum": { value: "200px" },
                         "search.regularPreview": { value: "250px" },
                         "search.sidebarPreview": { value: "264px" },
-                        "calendar.width": { value: "268px" },
                         "shell.sidebar": { value: "248px" },
-                        "overlay.dialog": { value: "500px" },
+                        // A dialog's sheet, and the command palette's; the glass shell round each adds its padding.
+                        "overlay.dialog": { value: "440px" },
+                        "overlay.palette": { value: "640px" },
+                        // The command palette's query row, a result row and its footer of key hints.
+                        "commandPalette.query": { value: "56px" },
+                        "commandPalette.row": { value: "40px" },
+                        "commandPalette.footer": { value: "44px" },
                         "overlay.dialogWide": { value: "720px" },
                         // The floating drawer's sheet, inside its 8px shell.
                         "overlay.sheet": { value: "480px" },
@@ -257,6 +344,9 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "overlay.sheetNarrow": { value: "400px" },
                         "overlay.sheetDocked": { value: "clamp(400px, 29.7vw, 488px)" },
                         "toast.width": { value: "440px" },
+                        // A toast's progress track.
+                        "toast.progressWidth": { value: "72px" },
+                        "toast.progressHeight": { value: "4px" },
                         "chat.thread": { value: "640px" },
                         "chat.composer": { value: "640px" },
                         // A user bubble in the agent sheet leaves room on its left, as a reply would.
@@ -272,13 +362,26 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "checklist.maximum": { value: "280px" },
                         "page.maximum": { value: "1440px" },
                     },
-                    opacity: { disabled: { value: ".5" } },
+                    opacity: {
+                        disabled: { value: ".5" },
+                        // A locked step's dot, and a locked requirement's row, which keeps a little more.
+                        "locked.step": { value: ".5" },
+                        "locked.requirement": { value: ".55" },
+                        // A round icon button fades further.
+                        disabledRound: { value: ".25" },
+                        // A ticked mark under the pointer, in dark: the face and its glyph fade a little.
+                        checkedHover: { value: ".88" },
+                    },
                     fontWeights: {
                         regular: { value: "400" },
                         medium: { value: "500" },
                         semibold: { value: "600" },
                     },
-                    letterSpacings: { compact: { value: "-.01em" }, label: { value: ".04em" } },
+                    letterSpacings: {
+                        compact: { value: "-.01em" },
+                        label: { value: ".04em" },
+                        display: { value: "-.02em" },
+                    },
                     fonts: {
                         display: { value: fonts.display },
                         sans: { value: fonts.sans },
@@ -286,12 +389,15 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         mono: { value: fonts.mono },
                     },
                     lineHeights: {
+                        // A single line, its box the type's own height. Text that can wrap takes another.
                         tight: { value: "1" },
                         compact: { value: "1.25" },
                         log: { value: "1.4" },
-                        body: { value: "1.5" },
+                        body: { value: "1.4" },
                     },
                     fontSizes: {
+                        // The largest figure on a page, set with `letterSpacings.display`.
+                        display: { value: "36px" },
                         body: { value: "14px" },
                         caption: { value: "13px" },
                         code: { value: "12px" },
@@ -333,12 +439,16 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                     },
                     radii: {
                         round: { value: "999px" },
+                        // A sidebar nav item.
+                        nav: { value: "3px" },
                         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" },
+                        // The glass shell round a modal or drawer, the active nav pill, and a parallel chip.
+                        shell: { value: "16px" },
                         card: { value: "24px" },
                         pill: { value: "36px" },
                     },
@@ -350,9 +460,13 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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 modal scrim, and the overlays' glass; see `deriveThemeTokens`.
+                        "bg.backdrop": { value: colors["bg.backdrop"] },
+                        "bg.popover": { value: colors["bg.popover"] },
+                        "bg.modalShell": { value: colors["bg.modalShell"] },
+                        "bg.modalSheet": { value: colors["bg.modalSheet"] },
+                        "bg.drawerShell": { value: colors["bg.drawerShell"] },
+                        "bg.drawerSheet": { value: colors["bg.drawerSheet"] },
                         // The status hues as washes, drawn from the palette.
                         "bg.infoSubtle": { value: colors["bg.infoSubtle"] },
                         "bg.successSubtle": { value: colors["bg.successSubtle"] },
@@ -360,20 +474,27 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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.
+                        // Focus is the palette's focus ring: Accent Blue in ciridae, the accent in the others.
                         "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"] },
+                        "fg.quietGlyph": { value: colors["fg.quietGlyph"] },
+                        "fg.label": { value: colors["fg.label"] },
                         "border.control": { value: colors["border.control"] },
+                        "border.canvas": { value: colors["border.canvas"] },
+                        "border.divider": { value: colors["border.divider"] },
+                        "border.menuHover": { value: colors["border.menuHover"] },
                         "bg.field": { value: colors["bg.field"] },
+                        "bg.formField": { value: colors["bg.formField"] },
+                        "bg.openTrigger": { value: colors["bg.openTrigger"] },
                         "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.
+                        // A field's edge once invalid: the palette's red, at full strength in both themes.
                         "border.error": { value: colors["border.error"] },
-                        // A hovered row is a grey wash; a selected row, tab, segment or card is the accent's.
+                        // A hovered row is a grey wash; a selected row, tab, segment or card is a neutral wash too.
                         "bg.rowHover": { value: colors["bg.rowHover"] },
                         "bg.selected": { value: colors["bg.selected"] },
                         "bg.selectedHover": { value: colors["bg.selectedHover"] },
@@ -383,13 +504,13 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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.
+                         * The flat faces; 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.pressed` are
+                         * the state layers and `bg.fill` the firmer grey fill. A face the design paints as a
+                         * gradient has one under `gradients` too.
                          */
                         "bg.surface": { value: colors["bg.surface"] },
                         "bg.control": { value: colors["bg.control"] },
@@ -400,6 +521,8 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "bg.raisedHover": { value: colors["bg.raisedHover"] },
                         "bg.check": { value: colors["bg.check"] },
                         "bg.hover": { value: colors["bg.hover"] },
+                        "bg.controlHover": { value: colors["bg.controlHover"] },
+                        "bg.pressed": { value: colors["bg.pressed"] },
                         "bg.fill": { value: colors["bg.fill"] },
                         /*
                          * `primary` inverts: white on a dark panel, near-black on a light one. Light has no
@@ -411,14 +534,38 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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.
+                        /*
+                         * The solid tint of an attention block or a highlighted field, the same in every
+                         * palette as the destructive red is; `border.*Tint` under `gradients` edges a block.
+                         * Yellow is the design's 5% wash in dark. Dark draws a green or red block as its hue's
+                         * glass, which these flatten to its middle.
+                         */
+                        "bg.warningTint": { value: { base: "rgba(255,205,123,.05)", _light: "#F6F3ED" } },
+                        "bg.successTint": { value: { base: "rgba(189,251,255,.1)", _light: "#DFEFEC" } },
+                        "bg.errorTint": { value: { base: "rgba(249,211,205,.1)", _light: "#FFF2F2" } },
+                        // Links 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.greenDark": { value: colors["accent.greenDark"] },
                         "accent.red": { value: colors["accent.red"] },
+                        "accent.redDark": { value: colors["accent.redDark"] },
                         "accent.yellow": { value: colors["accent.yellow"] },
+                        "accent.yellowIcon": { value: colors["accent.yellowIcon"] },
                         "accent.blue": { value: colors["accent.blue"] },
                         "accent.bronze": { value: colors["accent.bronze"] },
                         "border.bronze": { value: colors["border.bronze"] },
+                        // Data marks, never UI; see `derivePaletteTokens`.
+                        "chart.bar": { value: colors["chart.bar"] },
+                        "chart.trend": { value: colors["chart.trend"] },
+                        "chart.category1": { value: colors["chart.category1"] },
+                        "chart.category2": { value: colors["chart.category2"] },
+                        "chart.category3": { value: colors["chart.category3"] },
+                        "chart.category4": { value: colors["chart.category4"] },
+                        "chart.barTrack": { value: colors["chart.barTrack"] },
+                        "chart.progressTrack": { value: colors["chart.progressTrack"] },
+                        "chart.atRiskTrack": { value: colors["chart.atRiskTrack"] },
+                        "chart.neutral": { value: colors["chart.neutral"] },
+                        "chart.notStarted": { value: colors["chart.notStarted"] },
                         /*
                          * 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
@@ -433,10 +580,16 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                                 _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`.
+                        // The shadows `deriveThemeTokens` sets, most cast in the palette's greys.
                         search: { value: shadows.search },
                         inset: { value: shadows.inset },
+                        // A card's elevation, and the softer one of a sheet, toast or chip, or the segment that is on.
                         card: { value: shadows.card },
+                        soft: { value: shadows.soft },
+                        // The faint glow round a drawer's glass shell; light only.
+                        drawerShell: {
+                            value: { base: "none", _light: "0 0 12px rgba(136,136,140,.08)" },
+                        },
                         focus: { value: shadows.focus },
                         panel: {
                             value: { base: "0 4px 124px rgba(0,0,0,.25)", _light: "0 4px 124px rgba(0,0,0,.12)" },
@@ -454,11 +607,114 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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 },
+                        // A loading placeholder's flat fill.
+                        skeletonFill: { value: gradients.skeletonFill },
                         orb: {
                             value: "radial-gradient(circle at 70% 24%, rgba(232,224,195,.9) 0 9%, transparent 11%), linear-gradient(180deg, #E8E0C3, #46361D)",
                         },
+                        /*
+                         * The faces the design paints as gradients, most with a flat `bg.*` sibling near its
+                         * middle; see `deriveThemeTokens`. The destructive face is the same red in every palette,
+                         * as `bg.danger` is.
+                         */
+                        canvas: { value: gradients.canvas },
+                        panel: { value: gradients.panel },
+                        card: { value: gradients.card },
+                        raised: { value: gradients.raised },
+                        raisedHover: { value: gradients.raisedHover },
+                        selected: { value: gradients.selected },
+                        rowHover: { value: gradients.rowHover },
+                        primary: { value: gradients.primary },
+                        tinted: { value: gradients.tinted },
+                        danger: {
+                            value: {
+                                base: "linear-gradient(to bottom, #F69385, #F7644F)",
+                                _light: "linear-gradient(to bottom, #F48272, #F2533C)",
+                            },
+                        },
+                        /*
+                         * The 1px edges a face draws as a gradient, through `[data-edge]`. Dark draws no edge
+                         * on the primary or destructive face.
+                         */
+                        "border.raised": { value: glassEdgeWithLightGradient("#BCB6B6", "#9C9A9A") },
+                        "border.primary": {
+                            value: {
+                                base: noEdge,
+                                _light: "linear-gradient(to bottom, rgba(51,51,55,.33), rgba(74,70,66,.33) 10%, rgba(55,52,48,.33) 90%, rgba(51,51,55,.33))",
+                            },
+                        },
+                        "border.danger": {
+                            value: {
+                                base: noEdge,
+                                _light: "linear-gradient(to bottom, rgba(195,81,81,.33), rgba(142,61,61,.33))",
+                            },
+                        },
+                        "border.tinted": { value: gradients["border.tinted"] },
+                        // The edge of a workspace mark other than the current one: flat in dark.
+                        "border.otherWorkspaceMark": {
+                            value: {
+                                base: linearGradient("to bottom", ["#3C3C3C", "#3C3C3C"], 0.66),
+                                _light: linearGradient("to bottom", ["#D8D8D8", "#CCCBCB"], 0.66),
+                            },
+                        },
+                        // The selected face's edge, round a user's chat bubble.
+                        "border.selected": {
+                            value: {
+                                base: darkGlassEdge,
+                                _light: linearGradient("to bottom", ["#D8D8D8", "#CCCBCB"], 0.66),
+                            },
+                        },
+                        // A chart's area under its trend line, and a progress bar on track and at risk.
+                        "chart.area": { value: gradients["chart.area"] },
+                        "chart.progress": { value: gradients["chart.progress"] },
+                        "chart.atRisk": { value: gradients["chart.atRisk"] },
+                        /*
+                         * The hue glass a badge, a step or the current stage wears, each with its edge: .66 in
+                         * light and .10 in dark, the done step stronger in dark. Yellow's is `tinted`. The same
+                         * in every palette, as the destructive red is.
+                         */
+                        infoGlass: {
+                            value: themedGradient("to bottom", { base: ["#FFFFFF", "#A4D5F8"], _light: ["#F4F5F5", "#E2F2FF"] }, { base: 0.1, _light: 0.66 }),
+                        },
+                        successGlass: {
+                            value: themedGradient("to bottom", { base: ["#FFFFFF", "#7BF6FF"], _light: ["#ECECEC", "#DFEFEC"] }, { base: 0.1, _light: 0.66 }),
+                        },
+                        dangerGlass: {
+                            value: themedGradient("to bottom", { base: ["#FFFFFF", "#F3A69B"], _light: ["#FDFDFD", "#E8DAD9"] }, { base: 0.1, _light: 0.66 }),
+                        },
+                        stepDoneGlass: {
+                            value: themedGradient("to bottom", { base: ["#BEE1DB", "#327A6E"], _light: ["#ECECEC", "#DFEFEC"] }, { base: 0.6, _light: 0.66 }),
+                        },
+                        currentStageGlass: {
+                            value: themedGradient("to bottom", { base: ["#FFFFFF", "#FFCD7B"], _light: ["#F3F3F3", "#FDF4DF"] }, { base: 0.1, _light: 0.66 }),
+                        },
+                        "border.infoGlass": { value: glassEdgeWithLightGradient("#B9E4FF", "#88AFCC") },
+                        "border.successGlass": { value: glassEdgeWithLightGradient("#AEF3E5", "#96BFB9") },
+                        "border.dangerGlass": { value: glassEdgeWithLightGradient("#DABBBB", "#A68181") },
+                        "border.stepDoneGlass": {
+                            value: themedGradient("to bottom", { base: ["#BEE1DB", "#327A6E"], _light: ["#9FCCC3", "#589D92"] }, { base: 0.6, _light: 0.33 }),
+                        },
+                        "border.currentStageGlass": { value: glassEdgeWithLightGradient("#EEDFBA", "#E8C674") },
+                        // The edge of an attention block on its `bg.*Tint`: your move, ready and stuck.
+                        "border.warningTint": {
+                            value: themedGradient("to bottom", { base: ["#FFF1C9", "#A47D28"], _light: ["#DBCAA9", "#987C38"] }, { base: 0.15, _light: 0.33 }),
+                        },
+                        "border.successTint": {
+                            value: themedGradient("to bottom", { base: ["#BEE1DB", "#327A6E"], _light: ["#9FCCC3", "#589D92"] }, { base: 0.15, _light: 0.33 }),
+                        },
+                        "border.errorTint": {
+                            value: themedGradient("to bottom", { base: ["#FCC9C1", "#B24839"], _light: ["#C35151", "#8E3D3D"] }, { base: 0.15, _light: 0.33 }),
+                        },
+                    },
+                    /*
+                     * The overlays' backdrop blur, by role: a popover or menu, a modal's glass shell and its
+                     * sheet, a drawer's shell. Dark blurs a modal's shell; light blurs its sheet.
+                     */
+                    blurs: {
+                        popover: { value: { base: "64px", _light: "128px" } },
+                        modalShell: { value: { base: "64px", _light: "8px" } },
+                        modalSheet: { value: { base: "0px", _light: "128px" } },
+                        drawerShell: { value: "16px" },
                     },
                 },
             },