@ciridae/ui 1.0.2 → 1.0.4

package/dist/styled-system/tokens/tokens.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 export type Token = `aspectRatios.${AspectRatioToken}` | `borders.${BorderToken}` | `easings.${EasingToken}` | `shadows.${ShadowToken}` | `colors.${ColorToken}` | `blurs.${BlurToken}` | `animations.${AnimationToken}` | `spacing.${SpacingToken}` | `sizes.${SizeToken}` | `opacity.${OpacityToken}` | `fontWeights.${FontWeightToken}` | `letterSpacings.${LetterSpacingToken}` | `fonts.${FontToken}` | `lineHeights.${LineHeightToken}` | `fontSizes.${FontSizeToken}` | `durations.${DurationToken}` | `zIndex.${ZIndexToken}` | `radii.${RadiusToken}` | `breakpoints.${BreakpointToken}` | `gradients.${GradientToken}`
 
-export type ColorPalette = "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.avatar" | "bg.backdrop" | "bg.infoSubtle" | "bg.successSubtle" | "bg.warningSubtle" | "bg.errorSubtle" | "fg.archived" | "border.subtle" | "border.focus" | "fg.primary" | "fg.muted" | "fg.secondary" | "fg.subtle" | "border.control" | "bg.field" | "bg.fieldDisabled" | "border.mark" | "border.error" | "bg.rowHover" | "bg.selected" | "bg.selectedHover" | "border.selected" | "bg.track" | "bg.knob" | "border.panel" | "border.card" | "border.glass" | "border.toolbar" | "border.hairline" | "bg.surface" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.fill" | "bg.primary" | "bg.primaryHover" | "bg.tinted" | "bg.danger" | "accent.brand" | "accent.green" | "accent.red" | "accent.yellow" | "accent.blue" | "accent.bronze" | "border.bronze" | "fg.onAccent"
+export type ColorPalette = "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.avatar" | "bg.backdrop" | "bg.popover" | "bg.modalShell" | "bg.modalSheet" | "bg.drawerShell" | "bg.drawerSheet" | "bg.infoSubtle" | "bg.successSubtle" | "bg.warningSubtle" | "bg.errorSubtle" | "fg.archived" | "border.subtle" | "border.focus" | "fg.primary" | "fg.muted" | "fg.secondary" | "fg.subtle" | "fg.quietGlyph" | "fg.label" | "border.control" | "border.canvas" | "border.divider" | "border.menuHover" | "bg.field" | "bg.formField" | "bg.openTrigger" | "bg.fieldDisabled" | "border.mark" | "border.error" | "bg.rowHover" | "bg.selected" | "bg.selectedHover" | "border.selected" | "bg.track" | "bg.knob" | "border.panel" | "border.card" | "border.glass" | "border.hairline" | "bg.surface" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.controlHover" | "bg.pressed" | "bg.fill" | "bg.primary" | "bg.primaryHover" | "bg.tinted" | "bg.danger" | "bg.warningTint" | "bg.successTint" | "bg.errorTint" | "accent.brand" | "accent.green" | "accent.greenDark" | "accent.red" | "accent.redDark" | "accent.yellow" | "accent.yellowIcon" | "accent.blue" | "accent.bronze" | "border.bronze" | "chart.bar" | "chart.trend" | "chart.category1" | "chart.category2" | "chart.category3" | "chart.category4" | "chart.barTrack" | "chart.progressTrack" | "chart.atRiskTrack" | "chart.neutral" | "chart.notStarted" | "fg.onAccent"
 
 export type AspectRatioToken = "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden"
 
@@ -9,39 +9,39 @@ export type BorderToken = "none"
 
 export type EasingToken = "default" | "linear" | "in" | "out" | "in-out"
 
-export type ShadowToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inset-2xs" | "inset-xs" | "inset-sm" | "indicator.live" | "search" | "inset" | "card" | "focus" | "panel" | "glow" | "badge" | "toast" | "control.raised" | "control.raisedHover" | "control.pressed"
+export type ShadowToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inset-2xs" | "inset-xs" | "inset-sm" | "indicator.live" | "search" | "inset" | "card" | "soft" | "drawerShell" | "focus" | "panel" | "glow" | "badge" | "toast" | "control.raised" | "control.raisedHover" | "control.pressed"
 
-export type ColorToken = "current" | "black" | "white" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.avatar" | "bg.backdrop" | "bg.infoSubtle" | "bg.successSubtle" | "bg.warningSubtle" | "bg.errorSubtle" | "fg.archived" | "border.subtle" | "border.focus" | "fg.primary" | "fg.muted" | "fg.secondary" | "fg.subtle" | "border.control" | "bg.field" | "bg.fieldDisabled" | "border.mark" | "border.error" | "bg.rowHover" | "bg.selected" | "bg.selectedHover" | "border.selected" | "bg.track" | "bg.knob" | "border.panel" | "border.card" | "border.glass" | "border.toolbar" | "border.hairline" | "bg.surface" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.fill" | "bg.primary" | "bg.primaryHover" | "bg.tinted" | "bg.danger" | "accent.brand" | "accent.green" | "accent.red" | "accent.yellow" | "accent.blue" | "accent.bronze" | "border.bronze" | "fg.onAccent" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950"
+export type ColorToken = "current" | "black" | "white" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.avatar" | "bg.backdrop" | "bg.popover" | "bg.modalShell" | "bg.modalSheet" | "bg.drawerShell" | "bg.drawerSheet" | "bg.infoSubtle" | "bg.successSubtle" | "bg.warningSubtle" | "bg.errorSubtle" | "fg.archived" | "border.subtle" | "border.focus" | "fg.primary" | "fg.muted" | "fg.secondary" | "fg.subtle" | "fg.quietGlyph" | "fg.label" | "border.control" | "border.canvas" | "border.divider" | "border.menuHover" | "bg.field" | "bg.formField" | "bg.openTrigger" | "bg.fieldDisabled" | "border.mark" | "border.error" | "bg.rowHover" | "bg.selected" | "bg.selectedHover" | "border.selected" | "bg.track" | "bg.knob" | "border.panel" | "border.card" | "border.glass" | "border.hairline" | "bg.surface" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.controlHover" | "bg.pressed" | "bg.fill" | "bg.primary" | "bg.primaryHover" | "bg.tinted" | "bg.danger" | "bg.warningTint" | "bg.successTint" | "bg.errorTint" | "accent.brand" | "accent.green" | "accent.greenDark" | "accent.red" | "accent.redDark" | "accent.yellow" | "accent.yellowIcon" | "accent.blue" | "accent.bronze" | "border.bronze" | "chart.bar" | "chart.trend" | "chart.category1" | "chart.category2" | "chart.category3" | "chart.category4" | "chart.barTrack" | "chart.progressTrack" | "chart.atRiskTrack" | "chart.neutral" | "chart.notStarted" | "fg.onAccent" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950"
 
-export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "popover" | "modalShell" | "modalSheet" | "drawerShell"
 
 export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
 
-export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "none" | "control.trackInset" | "focus.ringWidth" | "focus.ringOffset" | "focus.ringReach" | "control.iconGap" | "control.block" | "control.inline" | "control.compactBlock" | "control.compactInline" | "control.largeInline" | "control.iconInline" | "search.inline" | "field.block" | "layout.tightGap" | "sidebar.groupGap" | "sidebar.inline" | "sidebar.block" | "control.tabInline" | "layout.controlGap" | "layout.contentGap" | "layout.clusterGap" | "layout.pageGap" | "layout.projectListOffset" | "layout.sectionGap" | "log.columnGap" | "log.detailIndent" | "log.detailIndentCompact" | "log.rowBlock" | "menu.inset" | "menu.itemInline" | "sidebar.markGap" | "panel.hairline" | "panel.compact" | "panel.default" | "panel.comfortable" | "panel.roomy" | "panel.sidebarBlock" | "page.inline" | "shell.leading" | "table.cell" | "table.rowBlock" | "table.compactRowBlock" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-none" | "-control.trackInset" | "-focus.ringWidth" | "-focus.ringOffset" | "-focus.ringReach" | "-control.iconGap" | "-control.block" | "-control.inline" | "-control.compactBlock" | "-control.compactInline" | "-control.largeInline" | "-control.iconInline" | "-search.inline" | "-field.block" | "-layout.tightGap" | "-sidebar.groupGap" | "-sidebar.inline" | "-sidebar.block" | "-control.tabInline" | "-layout.controlGap" | "-layout.contentGap" | "-layout.clusterGap" | "-layout.pageGap" | "-layout.projectListOffset" | "-layout.sectionGap" | "-log.columnGap" | "-log.detailIndent" | "-log.detailIndentCompact" | "-log.rowBlock" | "-menu.inset" | "-menu.itemInline" | "-sidebar.markGap" | "-panel.hairline" | "-panel.compact" | "-panel.default" | "-panel.comfortable" | "-panel.roomy" | "-panel.sidebarBlock" | "-page.inline" | "-shell.leading" | "-table.cell" | "-table.rowBlock" | "-table.compactRowBlock"
+export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "none" | "control.trackInset" | "focus.ringWidth" | "focus.ringOffset" | "focus.ringReach" | "control.iconGap" | "control.block" | "control.inline" | "control.compactBlock" | "control.compactInline" | "control.largeInline" | "control.iconInline" | "control.launcherInlineEnd" | "search.inline" | "field.block" | "layout.tightGap" | "sidebar.groupGap" | "sidebar.footerGap" | "sidebar.inline" | "sidebar.block" | "control.tabInline" | "layout.controlGap" | "layout.contentGap" | "layout.clusterGap" | "layout.pageGap" | "layout.projectListOffset" | "layout.sectionGap" | "layout.centeredCardGap" | "log.columnGap" | "log.detailIndent" | "log.detailIndentCompact" | "log.rowBlock" | "log.entryBlock" | "log.entryInline" | "log.entryCompactBlock" | "log.entryPanelBlock" | "log.entryPanelInline" | "menu.inset" | "menu.itemInline" | "sidebar.markGap" | "panel.hairline" | "panel.compact" | "panel.default" | "panel.comfortable" | "panel.roomy" | "panel.card" | "tile.block" | "tile.inline" | "skeleton.tileGap" | "emptyState.pageBlock" | "emptyState.compactBlock" | "stage.connectorGap" | "list.numberGap" | "meter.rowGap" | "panel.sidebarBlock" | "page.inline" | "shell.leading" | "table.cell" | "table.rowBlock" | "table.compactRowBlock" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-none" | "-control.trackInset" | "-focus.ringWidth" | "-focus.ringOffset" | "-focus.ringReach" | "-control.iconGap" | "-control.block" | "-control.inline" | "-control.compactBlock" | "-control.compactInline" | "-control.largeInline" | "-control.iconInline" | "-control.launcherInlineEnd" | "-search.inline" | "-field.block" | "-layout.tightGap" | "-sidebar.groupGap" | "-sidebar.footerGap" | "-sidebar.inline" | "-sidebar.block" | "-control.tabInline" | "-layout.controlGap" | "-layout.contentGap" | "-layout.clusterGap" | "-layout.pageGap" | "-layout.projectListOffset" | "-layout.sectionGap" | "-layout.centeredCardGap" | "-log.columnGap" | "-log.detailIndent" | "-log.detailIndentCompact" | "-log.rowBlock" | "-log.entryBlock" | "-log.entryInline" | "-log.entryCompactBlock" | "-log.entryPanelBlock" | "-log.entryPanelInline" | "-menu.inset" | "-menu.itemInline" | "-sidebar.markGap" | "-panel.hairline" | "-panel.compact" | "-panel.default" | "-panel.comfortable" | "-panel.roomy" | "-panel.card" | "-tile.block" | "-tile.inline" | "-skeleton.tileGap" | "-emptyState.pageBlock" | "-emptyState.compactBlock" | "-stage.connectorGap" | "-list.numberGap" | "-meter.rowGap" | "-panel.sidebarBlock" | "-page.inline" | "-shell.leading" | "-table.cell" | "-table.rowBlock" | "-table.compactRowBlock"
 
-export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "border.hairline" | "indicator.dot" | "indicator.live" | "indicator.badge" | "indicator.count" | "log.caretColumn" | "log.minimum" | "log.rawMaximum" | "assistant.orb" | "widget.header" | "avatar.welcome" | "avatar.micro" | "avatar.small" | "avatar.menu" | "avatar.row" | "avatar.large" | "mark.inline" | "progress.track" | "progress.segment" | "indicator.swatch" | "menu.item" | "select.compactItem" | "code.maximum" | "brand.logo" | "indicator.radio" | "skeleton.line" | "skeleton.short" | "skeleton.medium" | "skeleton.long" | "chart.small" | "chart.medium" | "chart.large" | "control.mark" | "file.chipName" | "control.checkbox" | "control.radio" | "control.knob" | "control.toggleTrack" | "control.clear" | "control.chip" | "control.small" | "control.row" | "control.shortcut" | "control.compact" | "control.default" | "control.search" | "control.searchField" | "workspace.mark" | "workspace.avatar" | "control.field" | "sidebar.projectAction" | "toast.minimum" | "chat.footer" | "shell.header" | "shell.collapsed" | "table.scroll" | "field.textarea" | "chat.input" | "chat.inputMobile" | "chat.composerMinimum" | "overlay.menu" | "overlay.menuList" | "overlay.tray" | "overlay.trayList" | "overlay.tooltip" | "overlay.popoverNarrow" | "overlay.popover" | "overlay.popoverWide" | "search.dropdownPreview" | "emptyState.minimum" | "search.regularPreview" | "search.sidebarPreview" | "calendar.width" | "shell.sidebar" | "overlay.dialog" | "overlay.dialogWide" | "overlay.sheet" | "overlay.sheetNarrow" | "overlay.sheetDocked" | "toast.width" | "chat.thread" | "chat.composer" | "chat.bubble" | "chat.attachment" | "settings.column" | "card.centered" | "scroll.bar" | "card.centeredWide" | "card.centeredForm" | "steps.image" | "checklist.maximum" | "page.maximum" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
+export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "border.hairline" | "indicator.dot" | "indicator.live" | "indicator.badge" | "indicator.count" | "log.caretColumn" | "log.minimum" | "log.timeColumn" | "log.rawMaximum" | "assistant.orb" | "widget.header" | "avatar.welcome" | "avatar.micro" | "avatar.small" | "avatar.menu" | "avatar.agent" | "avatar.row" | "avatar.owner" | "avatar.large" | "mark.inline" | "progress.track" | "progress.segment" | "indicator.swatch" | "menu.item" | "select.compactItem" | "code.maximum" | "brand.logo" | "indicator.radio" | "skeleton.line" | "skeleton.bar" | "skeleton.badge" | "skeleton.caption" | "skeleton.short" | "skeleton.pill" | "skeleton.textLine" | "tile.minimum" | "skeleton.card" | "skeleton.cardBody" | "skeleton.medium" | "skeleton.long" | "chart.small" | "chart.medium" | "chart.large" | "control.mark" | "file.chipName" | "control.checkbox" | "control.radio" | "control.knob" | "control.toggleTrack" | "control.clear" | "control.chip" | "control.wordKeycap" | "control.send" | "control.small" | "control.restingTab" | "control.row" | "control.round" | "control.roundSmall" | "control.sidebarSearch" | "list.number" | "tile.icon" | "partsRollup.height" | "sparkline.width" | "sparkline.height" | "sparkline.plotWidth" | "sparkline.plotHeight" | "control.shortcut" | "control.compact" | "control.default" | "control.search" | "control.searchField" | "workspace.mark" | "workspace.avatar" | "control.field" | "sidebar.projectAction" | "sidebar.railRule" | "sidebar.shortRow" | "toast.minimum" | "chat.footer" | "shell.header" | "shell.collapsed" | "table.scroll" | "table.headRow" | "field.textarea" | "field.inline" | "chat.input" | "chat.inputMobile" | "chat.composerMinimum" | "overlay.menu" | "overlay.menuList" | "overlay.helpMenu" | "overlay.tray" | "overlay.trayList" | "overlay.tooltip" | "overlay.popoverNarrow" | "overlay.popover" | "overlay.popoverWide" | "search.dropdownPreview" | "emptyState.minimum" | "search.regularPreview" | "search.sidebarPreview" | "shell.sidebar" | "overlay.dialog" | "overlay.palette" | "commandPalette.query" | "commandPalette.row" | "commandPalette.footer" | "overlay.dialogWide" | "overlay.sheet" | "overlay.sheetNarrow" | "overlay.sheetDocked" | "toast.width" | "toast.progressWidth" | "toast.progressHeight" | "chat.thread" | "chat.composer" | "chat.bubble" | "chat.attachment" | "settings.column" | "card.centered" | "scroll.bar" | "card.centeredWide" | "card.centeredForm" | "steps.image" | "checklist.maximum" | "page.maximum" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
 
-export type OpacityToken = "disabled"
+export type OpacityToken = "disabled" | "locked.step" | "locked.requirement" | "disabledRound" | "checkedHover"
 
 export type FontWeightToken = "thin" | "extralight" | "light" | "normal" | "bold" | "extrabold" | "black" | "regular" | "medium" | "semibold"
 
-export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "compact" | "label"
+export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "compact" | "label" | "display"
 
 export type FontToken = "serif" | "display" | "sans" | "numeric" | "mono"
 
 export type LineHeightToken = "none" | "snug" | "normal" | "relaxed" | "loose" | "tight" | "compact" | "log" | "body"
 
-export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "body" | "caption" | "code" | "heading" | "heading.section" | "heading.page" | "log.body" | "log.level" | "avatar.micro" | "avatar.mark" | "avatar.small" | "icon.tiny" | "icon.check" | "icon.compact" | "icon.small" | "icon.medium" | "icon.large" | "icon.rail" | "icon.display" | "icon.hero"
+export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "display" | "body" | "caption" | "code" | "heading" | "heading.section" | "heading.page" | "log.body" | "log.level" | "avatar.micro" | "avatar.mark" | "avatar.small" | "icon.tiny" | "icon.check" | "icon.compact" | "icon.small" | "icon.medium" | "icon.large" | "icon.rail" | "icon.display" | "icon.hero"
 
 export type DurationToken = "fastest" | "faster" | "normal" | "slow" | "slower" | "slowest" | "fast" | "default"
 
 export type ZIndexToken = "raised" | "scrollbar" | "drawer" | "dialog" | "popover" | "tooltip" | "toast"
 
-export type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "round" | "keycap" | "control" | "action" | "field" | "inset" | "card" | "pill"
+export type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "round" | "nav" | "keycap" | "control" | "action" | "field" | "inset" | "shell" | "card" | "pill"
 
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
 
-export type GradientToken = "skeleton" | "orb"
+export type GradientToken = "skeletonFill" | "orb" | "canvas" | "panel" | "card" | "raised" | "raisedHover" | "selected" | "rowHover" | "primary" | "tinted" | "danger" | "border.raised" | "border.primary" | "border.danger" | "border.tinted" | "border.otherWorkspaceMark" | "border.selected" | "chart.area" | "chart.progress" | "chart.atRisk" | "infoGlass" | "successGlass" | "dangerGlass" | "stepDoneGlass" | "currentStageGlass" | "border.infoGlass" | "border.successGlass" | "border.dangerGlass" | "border.stepDoneGlass" | "border.currentStageGlass" | "border.warningTint" | "border.successTint" | "border.errorTint"
 
 export type Tokens = {
 		aspectRatios: AspectRatioToken

package/dist/styled-system/types/prop-type.d.ts

@@ -155,7 +155,7 @@ export interface UtilityValues {
 	transitionProperty: "common" | "colors" | "size" | "position" | "background";
 	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
-	animationName: "ping" | "pulse" | "bounce" | "skeletonShimmer" | "spin" | "livePulse" | "wizardEnterForward" | "wizardEnterBack" | "wizardResultIn";
+	animationName: "ping" | "pulse" | "bounce" | "spin" | "livePulse" | "wizardEnterForward" | "wizardEnterBack" | "wizardResultIn";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];
@@ -208,7 +208,7 @@ export interface UtilityValues {
 	debug: boolean;
 	containerName: CssProperties["containerName"];
 	ringRoom: boolean;
-	colorPalette: "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.avatar" | "bg.backdrop" | "bg.infoSubtle" | "bg.successSubtle" | "bg.warningSubtle" | "bg.errorSubtle" | "fg.archived" | "border.subtle" | "border.focus" | "fg.primary" | "fg.muted" | "fg.secondary" | "fg.subtle" | "border.control" | "bg.field" | "bg.fieldDisabled" | "border.mark" | "border.error" | "bg.rowHover" | "bg.selected" | "bg.selectedHover" | "border.selected" | "bg.track" | "bg.knob" | "border.panel" | "border.card" | "border.glass" | "border.toolbar" | "border.hairline" | "bg.surface" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.fill" | "bg.primary" | "bg.primaryHover" | "bg.tinted" | "bg.danger" | "accent.brand" | "accent.green" | "accent.red" | "accent.yellow" | "accent.blue" | "accent.bronze" | "border.bronze" | "fg.onAccent";
+	colorPalette: "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.avatar" | "bg.backdrop" | "bg.popover" | "bg.modalShell" | "bg.modalSheet" | "bg.drawerShell" | "bg.drawerSheet" | "bg.infoSubtle" | "bg.successSubtle" | "bg.warningSubtle" | "bg.errorSubtle" | "fg.archived" | "border.subtle" | "border.focus" | "fg.primary" | "fg.muted" | "fg.secondary" | "fg.subtle" | "fg.quietGlyph" | "fg.label" | "border.control" | "border.canvas" | "border.divider" | "border.menuHover" | "bg.field" | "bg.formField" | "bg.openTrigger" | "bg.fieldDisabled" | "border.mark" | "border.error" | "bg.rowHover" | "bg.selected" | "bg.selectedHover" | "border.selected" | "bg.track" | "bg.knob" | "border.panel" | "border.card" | "border.glass" | "border.hairline" | "bg.surface" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.controlHover" | "bg.pressed" | "bg.fill" | "bg.primary" | "bg.primaryHover" | "bg.tinted" | "bg.danger" | "bg.warningTint" | "bg.successTint" | "bg.errorTint" | "accent.brand" | "accent.green" | "accent.greenDark" | "accent.red" | "accent.redDark" | "accent.yellow" | "accent.yellowIcon" | "accent.blue" | "accent.bronze" | "border.bronze" | "chart.bar" | "chart.trend" | "chart.category1" | "chart.category2" | "chart.category3" | "chart.category4" | "chart.barTrack" | "chart.progressTrack" | "chart.atRiskTrack" | "chart.neutral" | "chart.notStarted" | "fg.onAccent";
 	textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "body";
 }
 

package/dist/styles.css

@@ -37,11 +37,18 @@
 	}
 }
 
-/* [data-edge] paints a hairline inside the element's own box, so bordered elements
-   keep a 1px transparent border for layout and borderless groups get an inset ring. */
+/* [data-edge] paints a hairline inside the element's own box. The design counts that stroke in
+   the layout, so an edged element keeps a 1px transparent border under the ring. A border the
+   element sets itself wins: a native button resetting the browser's sets `1px solid transparent`,
+   and a face the design lays its edge over, such as a text button, sets `border: 0`. */
 [data-ciridae-ui][data-edge] {
 	position: relative;
 }
+@layer base {
+	:where([data-ciridae-ui][data-edge]) {
+		border: 1px solid transparent;
+	}
+}
 [data-ciridae-ui][data-edge]::before {
 	content: "";
 	position: absolute;
@@ -64,8 +71,13 @@
 [data-ciridae-ui][data-edge="control"]::before {
 	background: var(--colors-border\.control);
 }
-[data-ciridae-ui][data-edge="toolbar"]::before {
-	background: var(--colors-border\.toolbar);
+/* data-edge="gradient" draws the gradient its element sets in --edge, such as
+   token(gradients.border.infoGlass). In the base layer, so a component's own
+   ::before background still wins. */
+@layer base {
+	:where([data-ciridae-ui][data-edge="gradient"])::before {
+		background: var(--edge, none);
+	}
 }
 /* An open trigger draws its own border in the text color, so the ring steps aside. */
 [data-ciridae-ui][data-edge][data-popup-open]::before {

package/dist/theme/color.d.ts

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

package/dist/theme/color.js

@@ -13,6 +13,11 @@ export function alpha(color, opacity) {
     const [red, green, blue] = parseHex(color);
     return `rgba(${red},${green},${blue},${String(opacity).replace(/^0\./, ".")})`;
 }
+/* A linear gradient between two #RRGGBB ends, both at `opacity`. */
+export function linearGradient(direction, [from, to], opacity) {
+    const paint = (color) => (opacity === 1 ? color : alpha(color, opacity));
+    return `linear-gradient(${direction}, ${paint(from)}, ${paint(to)})`;
+}
 /*
  * A grey leaned toward a hue: the hue less its own grey is added to it at `amount`, so every grey
  * in a ramp leans the same way and keeps its lightness. Channels clip at the ends, so white and

package/dist/theme/derive.d.ts

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

package/dist/theme/derive.js

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

package/dist/theme/palettes.d.ts

@@ -1,13 +1,19 @@
+import { type GradientEnds } from "./color.js";
 /** A color per color theme, in the shape Panda's semantic tokens take. */
 export type ThemedColor = {
     base: string;
     _light: string;
 };
+/** A gradient's two ends per color theme. A face flat under a theme has one color at both ends. */
+export type ThemedGradient = {
+    base: GradientEnds;
+    _light: GradientEnds;
+};
 export declare const PALETTE_NAMES: readonly ["ciridae", "ocean", "moss", "violet", "ember"];
 export type PaletteName = (typeof PALETTE_NAMES)[number];
 /**
- * The greys under one color theme: every neutral token is one of these, flat or at an alpha. Dark
- * draws its glass as pale greys over the surface; light draws solids.
+ * The greys under one color theme: every neutral token is one of these, flat, at an alpha or as a
+ * gradient's end. Dark draws its glass as pale greys over the surface; light draws solids.
  */
 export type Greys = {
     canvas: string;
@@ -25,6 +31,7 @@ export type Greys = {
     cardBorder: string;
     mark: string;
     hairline: string;
+    menuHoverBorder: string;
     wash: string;
     shade: string;
     focus: string;
@@ -35,6 +42,13 @@ export type Greys = {
     raised: string;
     hover: string;
     knob: string;
+    scrim: string;
+    popover: string;
+    modalShell: string;
+    modalSheet: string;
+    drawerShell: string;
+    drawerSheet: string;
+    gradients: Record<"canvas" | "panel" | "raised" | "selected", GradientEnds>;
 };
 export type GreyRamp = {
     dark: Greys;
@@ -47,14 +61,43 @@ export type GreyRamp = {
 export type Palette = {
     greys: GreyRamp;
     accent: ThemedColor;
+    focusRing?: ThemedColor;
     primary: ThemedColor;
-    status: Record<"green" | "red" | "yellow" | "blue", {
-        text: ThemedColor;
-        wash?: ThemedColor;
-    }>;
+    primaryGradient?: ThemedGradient;
+    status: {
+        green: StatusHue & {
+            dark?: ThemedColor;
+        };
+        red: StatusHue & {
+            dark?: ThemedColor;
+        };
+        yellow: StatusHue & {
+            icon?: ThemedColor;
+        };
+        blue: StatusHue;
+    };
     bronze: ThemedColor;
     tint: {
         face: ThemedColor;
+        faceGradient?: ThemedGradient;
+        edge?: ThemedGradient;
     };
+    chart?: ChartHues;
+};
+type StatusHue = {
+    text: ThemedColor;
+    wash?: ThemedColor;
+};
+/** Data marks, never UI. */
+export type ChartHues = {
+    bar: ThemedColor;
+    trend: ThemedColor;
+    area: ThemedGradient;
+    categories: readonly [ThemedColor, ThemedColor, ThemedColor, ThemedColor];
+    progress: ThemedGradient;
+    atRisk: ThemedGradient;
 };
+/** The third chart category: no status hue is indigo, so every palette shares this one. */
+export declare const chartIndigo: ThemedColor;
 export declare const palettes: Record<PaletteName, Palette>;
+export {};