@ciridae/ui 1.0.4 → 1.0.9

package/dist/preset.js

@@ -4,8 +4,7 @@ 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";
-export { deriveThemeTokens, themeVariables } from "./theme/tokens.js";
+export { deriveThemeTokens } from "./theme/tokens.js";
 const appBaseCss = {
     "html, body, #root": {
         margin: "0",
@@ -18,12 +17,15 @@ 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) };
 }
+// Gradient ends that more than one face or edge is drawn in, so they change together.
+const darkSuccessGreenEnds = ["#BEE1DB", "#327A6E"];
+const lightSuccessGlassEnds = ["#ECECEC", "#DFEFEC"];
+const lightSuccessEdgeEnds = ["#9FCCC3", "#589D92"];
+const lightSelectedEdgeEnds = ["#D8D8D8", "#CCCBCB"];
 /** 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);
@@ -111,6 +113,11 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                     },
                 },
                 tokens: {
+                    // Colours that are CSS keywords rather than palette entries, so a strict style can name them.
+                    colors: {
+                        transparent: { value: "transparent" },
+                        currentColor: { value: "currentColor" },
+                    },
                     spacing: {
                         none: { value: "0" },
                         "control.trackInset": { value: "2px" },
@@ -129,15 +136,20 @@ 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" },
+                        "gap.4": { value: "4px" },
+                        "gap.6": { value: "6px" },
+                        "gap.8": { value: "8px" },
+                        "gap.12": { value: "12px" },
+                        "gap.16": { value: "16px" },
+                        "gap.20": { value: "20px" },
+                        "gap.24": { value: "24px" },
                         "layout.tightGap": { value: "4px" },
                         // Between a sidebar's groups, and the sidebar's own inset from the window edge.
                         "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" },
@@ -149,15 +161,12 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "layout.pageGap": { value: "12px" },
                         "layout.projectListOffset": { value: "28px" },
                         "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.
+                        // 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" },
@@ -172,29 +181,24 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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" },
                         "table.cell": { value: "12px" },
-                        "table.rowBlock": { value: "16px" },
                         "table.compactRowBlock": { value: "8px" },
                     },
                     sizes: {
+                        // A flex child that may shrink below its content (`minWidth: "0"`), and its parent's whole width or height.
+                        "0": { value: "0" },
+                        full: { value: "100%" },
                         "border.hairline": { value: "1px" },
                         "indicator.dot": { value: "4px" },
                         "indicator.live": { value: "6px" },
@@ -203,7 +207,6 @@ 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" },
@@ -214,7 +217,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "avatar.menu": { value: "24px" },
                         "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
@@ -223,25 +225,19 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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.
+                        // A row in a menu or a select's list.
                         "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" },
-                        // 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" },
@@ -261,25 +257,20 @@ 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" },
+                        // The collapsed sidebar's expand button, the kit's 32px round button.
+                        "control.roundRail": { value: "32px" },
                         "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" },
@@ -294,11 +285,8 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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: "64px" },
@@ -306,7 +294,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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" },
@@ -314,7 +301,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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" },
@@ -329,10 +315,9 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "search.regularPreview": { value: "250px" },
                         "search.sidebarPreview": { value: "264px" },
                         "shell.sidebar": { value: "248px" },
-                        // A dialog's sheet, and the command palette's; the glass shell round each adds its padding.
+                        // The glass shell round each dialog and palette 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" },
@@ -344,7 +329,6 @@ 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" },
@@ -367,7 +351,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         // 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" },
@@ -396,7 +379,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         body: { value: "1.4" },
                     },
                     fontSizes: {
-                        // The largest figure on a page, set with `letterSpacings.display`.
                         display: { value: "36px" },
                         body: { value: "14px" },
                         caption: { value: "13px" },
@@ -438,8 +420,8 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         toast: { value: "90" },
                     },
                     radii: {
+                        none: { value: "0" },
                         round: { value: "999px" },
-                        // A sidebar nav item.
                         nav: { value: "3px" },
                         keycap: { value: "6px" },
                         // Round 2 fields -- inputs, selects, checkboxes -- are nearly square-cornered.
@@ -460,7 +442,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "bg.panel": { value: colors["bg.panel"] },
                         "bg.card": { value: colors["bg.card"] },
                         "bg.avatar": { value: colors["bg.avatar"] },
-                        // 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"] },
@@ -474,18 +455,18 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "bg.errorSubtle": { value: colors["bg.errorSubtle"] },
                         "fg.archived": { value: colors["fg.archived"] },
                         "border.subtle": { value: colors["border.subtle"] },
-                        // Focus is the palette's focus ring: Accent Blue in ciridae, the accent in the others.
+                        // Focus is the palette's focus ring, Accent Blue.
                         "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.popover": { value: colors["border.popover"] },
                         "border.menuHover": { value: colors["border.menuHover"] },
                         "bg.field": { value: colors["bg.field"] },
                         "bg.formField": { value: colors["bg.formField"] },
@@ -505,24 +486,16 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "border.card": { value: colors["border.card"] },
                         "border.glass": { value: colors["border.glass"] },
                         "border.hairline": { value: colors["border.hairline"] },
-                        /*
-                         * 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.
-                         */
+                        // 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"] },
                         "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.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
@@ -530,13 +503,7 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                          */
                         "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" } },
                         /*
-                         * 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.
                          */
@@ -546,7 +513,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         // 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"] },
@@ -583,7 +549,6 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         // 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.
@@ -607,16 +572,10 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "control.pressed": { value: shadows["control.pressed"] },
                     },
                     gradients: {
-                        // 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 },
@@ -625,17 +584,16 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         selected: { value: gradients.selected },
                         rowHover: { value: gradients.rowHover },
                         primary: { value: gradients.primary },
+                        primaryHover: { value: gradients.primaryHover },
                         tinted: { value: gradients.tinted },
+                        // The destructive face is fixed here rather than drawn from the palette.
                         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.
-                         */
+                        // Dark draws no edge on the primary or destructive face.
                         "border.raised": { value: glassEdgeWithLightGradient("#BCB6B6", "#9C9A9A") },
                         "border.primary": {
                             value: {
@@ -654,36 +612,34 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "border.otherWorkspaceMark": {
                             value: {
                                 base: linearGradient("to bottom", ["#3C3C3C", "#3C3C3C"], 0.66),
-                                _light: linearGradient("to bottom", ["#D8D8D8", "#CCCBCB"], 0.66),
+                                _light: linearGradient("to bottom", lightSelectedEdgeEnds, 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),
+                                _light: linearGradient("to bottom", lightSelectedEdgeEnds, 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.
+                         * light and .10 in dark, the done step stronger in dark.
                          */
                         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 }),
+                            value: themedGradient("to bottom", { base: ["#FFFFFF", "#7BF6FF"], _light: lightSuccessGlassEnds }, { 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 }),
+                            value: themedGradient("to bottom", { base: darkSuccessGreenEnds, _light: lightSuccessGlassEnds }, { base: 0.6, _light: 0.66 }),
                         },
                         currentStageGlass: {
                             value: themedGradient("to bottom", { base: ["#FFFFFF", "#FFCD7B"], _light: ["#F3F3F3", "#FDF4DF"] }, { base: 0.1, _light: 0.66 }),
@@ -692,24 +648,20 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
                         "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 }),
+                            value: themedGradient("to bottom", { base: darkSuccessGreenEnds, _light: lightSuccessEdgeEnds }, { 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 }),
+                            value: themedGradient("to bottom", { base: darkSuccessGreenEnds, _light: lightSuccessEdgeEnds }, { 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.
-                     */
+                    // Dark blurs a modal's shell; light blurs its sheet.
                     blurs: {
                         popover: { value: { base: "64px", _light: "128px" } },
                         modalShell: { value: { base: "64px", _light: "8px" } },

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,_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 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,base"
 const conditions = new Set(conditionsStr.split(','))
 
 const conditionRegex = /^@|&|&$/

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

@@ -23,7 +23,7 @@ const context = {
   conditions: {
     shift: sortConditions,
     finalize: finalizeConditions,
-    breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] }
+    breakpoints: { keys: ["base"] }
   },
   utility: {