@acronis-platform/ui-react 3.0.0 → 4.0.0

package/dist/llms/treemap.md

@@ -0,0 +1,254 @@
+# Treemap
+
+> A typed treemap composition over the shared `Chart` primitives. Tiles a flat set of leaves into nested rectangles sized by `dataKey` and colored per `nameKey`, inside a `ChartContainer`, with one- or two-line on-cell labels, a tooltip and an opt-in legend. No axes or grid — and no variant axes; `aspectRatio` is a plain prop. Themed through a custom cell renderer (recharts' default has no token hooks). Ported from the apps/demo `TreemapChartPlayground`.
+
+**Status:** draft · **Category:** data-display · **Since:** v0.58.0
+
+## Import
+
+```tsx
+import { Treemap } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<Treemap
+  config={config}
+  data={data}
+  dataKey="size"
+  nameKey="name"
+  className="h-[320px] w-[520px]"
+/>
+```
+
+A typed treemap built on the shared `Chart` primitives. Give it `data`, a
+per-leaf `config`, the size field (`dataKey`), and the label field (`nameKey`);
+it renders a themed recharts `Treemap` — cells sized by value, colored + labelled
+per name, with a tooltip — so you don't hand-compose recharts children.
+
+Cell colors come from the `palette` prop — a dataviz palette resolving to the
+`--ui-dataviz-*` tokens, `categorical` by default — not from `config`.
+
+> **Design-pending v1.** Ported from the apps/demo `TreemapChartPlayground`.
+> On-cell labels still use `--ui-text-on-status-strong-neutral` — a generic
+> "text on a colored surface" color — over the palette's cell fills, so the
+> palette owes matched per-stop label colors. The chrome is reconciled with Figma
+> later; Code Connect is deferred.
+
+## When to use
+
+- Showing part-to-whole across many items where the **relative size** matters
+  more than precise values (disk usage, portfolio weight, category volume).
+- A compact, space-filling overview of a flat set of categories.
+
+## When not to use
+
+- Precise value comparison — area is hard to judge; a bar chart reads better.
+- Few categories — a bar or pie chart is clearer.
+- Hierarchical drill-down — this v1 renders a **flat** set of leaves only.
+
+## Variants
+
+None. Treemap has no CVA variant axes — `aspectRatio` (the tiling ratio) is a
+plain prop, and nesting is out of scope for v1.
+
+## Example
+
+```tsx
+import { Treemap } from '@acronis-platform/ui-react';
+import type { ChartConfig } from '@acronis-platform/ui-react';
+
+const data = [
+  { name: 'React', size: 2400 },
+  { name: 'Vue', size: 1600 },
+  { name: 'Angular', size: 1200 },
+  { name: 'Svelte', size: 800 },
+];
+
+const config = {
+  React: { label: 'React', color: 'var(--ui-background-brand-secondary)' },
+  Vue: { label: 'Vue', color: 'var(--ui-background-status-strong-success)' },
+  Angular: {
+    label: 'Angular',
+    color: 'var(--ui-background-status-strong-danger)',
+  },
+  Svelte: {
+    label: 'Svelte',
+    color: 'var(--ui-background-status-strong-warning)',
+  },
+} satisfies ChartConfig;
+
+<Treemap
+  config={config}
+  data={data}
+  dataKey="size"
+  nameKey="name"
+  className="h-[320px] w-[520px]"
+/>;
+```
+
+Cell colors reference existing semantic `--ui-*` tokens, keyed by each leaf's
+`nameKey` value. `--ui-background-status-strong-*` is chromatic in every brand;
+`--ui-background-brand-secondary` is brand-dependent (blue in `default`, neutral
+in some white-label brands), so it is not color-stable across brands until the
+real data-viz palette lands.
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `data` | `ReadonlyArray<Record<string, string | number>>` | — | yes | Row-per-leaf data — each row holds a `nameKey` label and a `dataKey` numeric size. |
+| `config` | `ChartConfig` | — | yes | Leaves take their colour from the container's `palette`; each entry, keyed by the leaf's `nameKey` value, maps that leaf to a `label` and an optional `tone`. Resolved into the `--color-<name>` custom properties the cells fill from. |
+| `dataKey` | `string` | — | yes | The numeric field that sizes each leaf's rectangle. |
+| `nameKey` | `string` | — | yes | The field that keys each leaf (drives the legend, tooltip, and `--color-<name>` lookup). Values should be unique and CSS-safe (they become part of a custom-property name) — the human name shown on the tile is the leaf's config label. |
+| `aspectRatio` | `number` | `1.3333` | no | Width-to-height ratio the tiling targets (default 4 / 3). |
+| `showLabels` | `boolean` | `true` | no | Render each leaf's label inside its cell (when it fits). |
+| `labelAlign` | `'bottom-start' | 'top-start' | 'center'` | `'bottom-start'` | no | Where a cell's label block sits — anchored at the tile's bottom start corner (the design's placement), at its top start corner, or centered in the tile. Named for the start edge, not a physical one: the corner variants mirror under dir="rtl". |
+| `secondaryKeys` | `ReadonlyArray<string>` | — | no | Fields whose values make up a second label line under the leaf's name (e.g. a value and a count). Dropped on cells too short to hold it. |
+| `secondaryFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each secondary value. Receives the field's index in secondaryKeys, so one formatter can cover fields of different kinds. |
+| `secondarySeparator` | `string` | `' · '` | no | Separator drawn between multiple secondary values. |
+| `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
+| `showLegend` | `boolean` | `false` | no | Render the legend — one entry per distinct leaf name. Off by default: a treemap labels its own cells. |
+| `legendPos` | `'top' | 'bottom'` | `'bottom'` | no | Which edge the legend sits on. |
+| `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
+| `animate` | `boolean` | `false` | no | Enable entrance animation. Off by default so output/baselines are unchanged. |
+| `animationDuration` | `number` | — | no | Animation duration in ms. |
+| `animationBegin` | `number` | — | no | Delay before the animation starts, in ms. |
+| `animationEasing` | `'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'` | — | no | Easing curve. |
+
+## Behavior
+
+`Treemap` is a typed [recharts](https://recharts.org) composition over the shared
+`Chart` primitives. It tiles a flat set of leaves into rectangles sized by
+`dataKey` and colored per `nameKey`, inside a `ChartContainer`.
+
+```gherkin
+Scenario: Render cells from data and config
+  Given data rows and a config mapping each leaf name to a label and color
+  And dataKey "size" and nameKey "name"
+  Then one rectangle renders per row, its area proportional to the dataKey value
+  And each cell fills from its injected --color-<name> custom property
+```
+
+```gherkin
+Scenario: On-cell labels
+  Given showLabels is true
+  Then each cell large enough shows its name at the tile's bottom start corner
+  And the name shown is the leaf's config label, falling back to its nameKey value
+  But small cells omit the label to avoid overflow
+  And when showLabels is false no labels render
+```
+
+```gherkin
+Scenario: Tiles are separated by the surface, not a stroke
+  Given any data
+  Then each tile is inset inside its node's rectangle and its corners are rounded
+  And the gap between neighbouring tiles is the chart's surface showing through
+```
+
+```gherkin
+Scenario: Label alignment
+  Given labelAlign is "top-start" or "center"
+  Then the label block is anchored at the tile's top start corner, or centered in it
+  And what the alignment aligns is the block, not its first line
+  And a corner-anchored block hugs the tile's start edge, so it mirrors under dir="rtl"
+  And every alignment leaves each line as wide as the tile, so it can still ellipsize
+```
+
+```gherkin
+Scenario: A second label line
+  Given secondaryKeys naming other fields on the row
+  Then a second line renders under the leaf's name, one entry per field
+  And the entries are joined by secondarySeparator
+  And each entry is formatted by secondaryFormatter, which receives the field's index
+  But a field that is missing or empty on a row is skipped rather than left as a gap
+  And a field the formatter returns empty for is skipped the same way
+```
+
+```gherkin
+Scenario: Labels degrade with the tile
+  Given a cell too short to hold two lines
+  Then only the leaf's name renders
+  And the height a line needs is its rendered line box, not its font size, so a
+    label is never drawn into a tile that would clip it
+  And given a line wider than its cell
+  Then that line is truncated with an ellipsis
+  And given a cell below the size a label needs at all
+  Then the cell renders no label
+```
+
+```gherkin
+Scenario: Legend is opt-in
+  Given showLegend is true
+  Then one legend entry renders per distinct leaf name, labelled and colored from config
+  And legendPos places it on the top or the bottom edge
+  And it is laid out as a row beside the tiled surface, which gives up that height,
+    so the legend never covers the tiles
+  And it wraps onto further rows when its entries outgrow the chart's width
+  But when showLegend is false no legend renders and no row is added
+```
+
+```gherkin
+Scenario: Aspect ratio
+  Given an aspectRatio
+  Then the tiling targets that width-to-height ratio per cell
+```
+
+```gherkin
+Scenario: Tooltip on hover
+  Given showTooltip is true
+  When the user hovers a cell
+  Then a card shows that leaf's name and value
+```
+
+```gherkin
+Scenario: Empty data
+  Given data is an empty array
+  Then the chart renders no cells and does not throw
+```
+
+```gherkin
+Scenario: Entrance animation is opt-in
+  Given animate is unset
+  Then the series render at their final geometry with no entrance animation
+  And the committed visual baselines are unaffected
+```
+
+```gherkin
+Scenario: Reduced motion
+  Given animate is true
+  And a user with prefers-reduced-motion
+  Then the entrance animation does not play and the series render at their final geometry
+  And the same applies when rendering on the server
+```
+
+## Accessibility
+
+- recharts' `accessibilityLayer` is **on by default** (recharts v3), giving the
+  chart keyboard focus and an accessible description of the plotted cells.
+- A treemap is inherently visual (area is a weak quantitative encoding, small
+  cells lose their labels). **Pair it with a text alternative** — a caption, a
+  summary, or an adjacent data table carrying the same numbers — and give the
+  chart an accessible name (`aria-label` / `aria-labelledby` referencing a visible
+  heading). The wrapper forwards native `div` attributes, so `aria-*` pass
+  through.
+- Do **not** rely on color alone to distinguish cells. The on-cell labels name
+  the larger cells; keep `showTooltip` on so small (unlabelled) cells are still
+  identifiable on hover.
+- On-cell labels use the `--ui-text-on-status-strong-neutral` token ("text on a
+  strong colored surface", constant white in both themes) to read over the
+  saturated series colors. This is legible on the chromatic brand/status tokens
+  used here but is **not** guaranteed for arbitrary caller colors — pick cell
+  colors dark enough for the light label text (matched per-cell label colors are a
+  design-pending item for the `--ui-chart-*` palette). The tooltip chrome and cell
+  separators resolve to semantic `--ui-*` tokens that meet contrast in both themes.
+- Watch recharts issue [#4809](https://github.com/recharts/recharts/issues/4809)
+  on the a11y layer for heavily-customized charts.
+
+## Contrast
+
+Tooltip chrome and the surface-colored cell separators meet contrast in both
+themes via the semantic tokens. Cell fills come from `config` and are the
+caller's responsibility — keep them dark enough for the white on-cell labels, and
+adjacent cells distinguishable from each other.

package/dist/llms/trend-indicator.md

@@ -0,0 +1,132 @@
+# TrendIndicator
+
+> A small presentational trend/delta indicator — a direction glyph, an already-formatted change value, and an optional comparison label. It separates `direction` (what happened mathematically) from `sentiment` (whether that is good or bad), so the kit never assumes up = good. Inline or compact badge, two sizes. Design-pending v1 (no Figma node yet).
+
+**Status:** draft · **Category:** data-display
+
+## Import
+
+```tsx
+import { TrendIndicator } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<TrendIndicator
+  direction="up"
+  sentiment="positive"
+  value="12%"
+  ariaLabel="Revenue up 12% vs previous quarter"
+/>
+```
+
+A small presentational primitive that shows **how a metric changed** versus a
+reference — a direction glyph, an already-formatted change value, and an optional
+comparison label.
+
+## When to use
+
+- Next to a [Metric](../metric/README.md) value ("↑ 12% vs last quarter").
+- In a Data Table cell to show per-row movement.
+- In compact headers/summaries as a tinted `badge`.
+
+## When not to use
+
+- To plot a trend over time — use a Line / Area / Composed chart or
+  ConfidenceCone.
+- To compute a delta — the consumer computes `direction`, `sentiment`, and the
+  formatted `value`; this component only renders them.
+
+## Key idea: direction ≠ sentiment
+
+`direction` is the maths (up / down / flat); `sentiment` is whether that's good
+(positive / negative / neutral). The kit can't assume up = good — revenue ↑ is
+positive, threats ↑ is negative, MTTR ↓ is positive. Always pass both.
+
+```tsx
+<TrendIndicator direction="up" sentiment="positive" value="8%" comparisonLabel="revenue QoQ" />
+<TrendIndicator direction="up" sentiment="negative" value="35%" comparisonLabel="threats" />
+<TrendIndicator direction="down" sentiment="positive" value="1.4 h" comparisonLabel="MTTR" />
+```
+
+## Notes
+
+- **Design-pending v1** — no Figma node yet; sentiment colors reuse the semantic
+  status tokens.
+- Value may be numeric or qualitative (`"Improving"`, `"4.2 h → 2.8 h"`).
+- Pass `ariaLabel` for a full accessible sentence; the glyph is decorative.
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `direction` | `'up' | 'down' | 'flat'` | — | yes | What changed mathematically — selects the direction glyph (up/down trend arrows, or a horizontal arrow for flat). |
+| `sentiment` | `'positive' | 'negative' | 'neutral'` | `neutral` | no | Whether the change is good, bad, or neutral — drives the color. Separate from `direction`, because up/down is not inherently good/bad. |
+| `value` | `ReactNode` | — | no | Already-formatted change to display — numeric (`12%`, `3.5 h`) or qualitative (`Improving`, `4.2 h → 2.8 h`). Never computed by the kit. |
+| `tooltip` | `ReactNode` | — | no | Contextual hint shown on hover/focus (Base UI Tooltip). |
+| `showIcon` | `boolean` | `true` | no | Show the leading direction glyph (color alone isn't enough). |
+| `ariaLabel` | `string` | — | no | Full accessible sentence describing the trend, applied via `role="img"`. Without it, assistive tech reads the visible value text and the glyph stays decorative. |
+
+## Behavior
+
+### Renders a direction + change
+
+- **Given** `direction="up"`, `value="12%"`
+  **When** rendered
+  **Then** an up trend arrow precedes `12%`.
+
+- **Given** `direction="flat"`
+  **Then** a horizontal arrow glyph is shown (the "no meaningful change" mark).
+
+### Direction is not sentiment
+
+- **Given** `direction="up"`, `sentiment="negative"` (e.g. threats rose)
+  **Then** the arrow points up but the color is the negative/danger family — the
+  kit does **not** infer good/bad from the arrow.
+
+- **Given** `direction="down"`, `sentiment="positive"` (e.g. MTTR fell)
+  **Then** the arrow points down but the color is the positive/success family.
+
+### Value is caller-formatted
+
+- **Given** `value="4.2 h → 2.8 h"` (or `"Improving"`)
+  **Then** the text is rendered verbatim — the kit never diffs numbers, rounds,
+  adds a sign, or converts units.
+
+### Icon visibility
+
+- **Given** `showIcon={false}`
+  **Then** no glyph renders (use sparingly — color alone should not carry
+  meaning).
+
+### Tooltip
+
+- **Given** a `tooltip`
+  **When** the indicator is hovered or focused
+  **Then** the hint appears; the trigger is keyboard-focusable.
+
+## Accessibility
+
+- The direction glyph is **decorative** (`aria-hidden`) — meaning must exist in
+  text, never in the icon or color alone.
+- **Color is not the only differentiator.** The direction glyph and the visible
+  value carry the meaning; sentiment color is reinforcement.
+- **`ariaLabel`** sets a full, caller-authored sentence as the element's label
+  via `role="img"` (e.g. "Revenue increased 12% compared with the previous
+  quarter, a positive trend"). The kit can't build a correct localized sentence
+  from `direction` + `value` alone, so it never synthesizes one.
+- **Without `ariaLabel`**, assistive tech reads the visible `value` and
+  `comparisonLabel` (both caller-supplied). Pass `ariaLabel` when the direction
+  itself must be announced, since the glyph is hidden.
+- A `flat` direction should be paired with a value/label like "Stable" or "No
+  change" — a lone horizontal arrow is ambiguous to assistive tech.
+- When a `tooltip` is set the trigger is focusable (`tabIndex={0}`), so the hint
+  is reachable by keyboard, not hover only. The tooltip must not be the sole
+  source of essential information.
+
+## Contrast
+
+Sentiment text/glyph colors resolve `--ui-text-on-status-*` tokens that meet text
+contrast on the base surface in both themes; the badge tint pairs each with its
+`--ui-background-status-*` background.

package/dist/llms/widget-placeholder.md

@@ -0,0 +1,169 @@
+# WidgetPlaceholder
+
+> An empty-state placeholder for a dashboard widget — a bordered card with a header (icon + title), a centered illustration / message / action, and an optional footer. Ported from the legacy shadcn-uikit `WidgetPlaceholder`; composable parts, optionally interactive.
+
+**Status:** draft · **Category:** data-display · **Since:** v0.41.0
+
+## Import
+
+```tsx
+import { WidgetPlaceholder } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<WidgetPlaceholder>
+  <WidgetPlaceholderHeader>
+    <WidgetPlaceholderIcon><ChartBarVerticalIcon /></WidgetPlaceholderIcon>
+    <WidgetPlaceholderTitle>Backup statistics</WidgetPlaceholderTitle>
+  </WidgetPlaceholderHeader>
+  <WidgetPlaceholderContent>
+    <WidgetPlaceholderImage><ChartBarVerticalIcon /></WidgetPlaceholderImage>
+    <WidgetPlaceholderText>No data available yet</WidgetPlaceholderText>
+    <WidgetPlaceholderAction>Set up backup plan</WidgetPlaceholderAction>
+  </WidgetPlaceholderContent>
+</WidgetPlaceholder>
+```
+
+An empty-state placeholder for a dashboard widget — a bordered card with a
+header, a centered illustration / message / action, and an optional footer.
+
+> **Status: draft (design-pending v1).** Ported from the legacy
+> `@acronis-platform/shadcn-uikit` `WidgetPlaceholder`. No
+> `--ui-widget-placeholder-*` tier; it maps onto semantic tokens (the muted
+> illustration tone is a stand-in for the legacy soft-brand tint). Reconcile with
+> `/figma-component WidgetPlaceholder <url> --update` once a mockup lands.
+
+## When to use
+
+- A dashboard widget that has no data yet (and a way to get started).
+- A widget tile that is configurable / clickable as a whole (`interactive`).
+
+## When not to use
+
+- A full-page or in-table empty state — use `Empty`.
+- A loading state — use `Loading` (busy) or `Progress` (determinate).
+
+## Parts
+
+| Part                       | Element | Purpose                                      |
+| -------------------------- | ------- | -------------------------------------------- |
+| `WidgetPlaceholder`        | div     | Root card; `interactive` makes it focusable. |
+| `WidgetPlaceholderHeader`  | div     | Icon + title row.                            |
+| `WidgetPlaceholderIcon`    | div     | Leading 16px header glyph.                   |
+| `WidgetPlaceholderTitle`   | div     | Widget name (truncates).                     |
+| `WidgetPlaceholderContent` | div     | Centered column for the body.                |
+| `WidgetPlaceholderImage`   | div     | Large 72px decorative illustration.          |
+| `WidgetPlaceholderText`    | div     | Short supporting message.                    |
+| `WidgetPlaceholderAction`  | div     | Inline call-to-action.                       |
+| `WidgetPlaceholderFooter`  | div     | Optional metadata line.                      |
+
+## Example
+
+```tsx
+import {
+  WidgetPlaceholder,
+  WidgetPlaceholderHeader,
+  WidgetPlaceholderIcon,
+  WidgetPlaceholderTitle,
+  WidgetPlaceholderContent,
+  WidgetPlaceholderImage,
+  WidgetPlaceholderText,
+  WidgetPlaceholderAction,
+} from '@acronis-platform/ui-react';
+import { ChartBarVerticalIcon } from '@acronis-platform/icons-react/stroke-mono';
+
+<WidgetPlaceholder className="h-[220px] w-[320px]">
+  <WidgetPlaceholderHeader>
+    <WidgetPlaceholderIcon>
+      <ChartBarVerticalIcon />
+    </WidgetPlaceholderIcon>
+    <WidgetPlaceholderTitle>Backup statistics</WidgetPlaceholderTitle>
+  </WidgetPlaceholderHeader>
+  <WidgetPlaceholderContent>
+    <WidgetPlaceholderImage>
+      <ChartBarVerticalIcon />
+    </WidgetPlaceholderImage>
+    <WidgetPlaceholderText>No data available yet</WidgetPlaceholderText>
+    <WidgetPlaceholderAction>Set up backup plan</WidgetPlaceholderAction>
+  </WidgetPlaceholderContent>
+</WidgetPlaceholder>;
+```
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `interactive` | `boolean` | `false` | no | Make the whole widget focusable (`tabindex=0`) and clickable — adds hover/active surface tints and a focus ring. Wire the behavior with `onClick`. |
+
+## Content slots
+
+| Slot | Description |
+|------|-------------|
+| `children` | The composed parts — WidgetPlaceholderHeader / Title / Icon, Content / Image / Text / Action, and an optional Footer. |
+
+## Behavior
+
+WidgetPlaceholder is a composable empty-state for a dashboard widget. It has no
+internal state; the only behavioral switch is the `interactive` prop on the root.
+
+```gherkin
+Scenario: Static placeholder
+  Given a WidgetPlaceholder without interactive
+  Then the root is not focusable (no tabindex) and shows no hover affordance
+```
+
+```gherkin
+Scenario: Interactive placeholder
+  Given a WidgetPlaceholder with interactive
+  Then the root is focusable (tabindex=0)
+  And it shows a hover surface tint on pointer-over
+  And a pressed surface tint while active
+  And a focus ring when focused via keyboard
+  And clicking it invokes the supplied onClick
+```
+
+```gherkin
+Scenario: Truncating title
+  Given a WidgetPlaceholderTitle whose text overflows the header
+  Then the title truncates with an ellipsis rather than wrapping
+```
+
+```gherkin
+Scenario: Optional footer
+  Given a WidgetPlaceholder with a WidgetPlaceholderFooter
+  Then a muted metadata line renders below the content
+```
+
+### Not `ChartState`
+
+`ChartState` is the placeholder that goes _inside_ a chart's slot: it fills the
+slot, renders `loading` / `empty` / `error`, and for `empty` draws the silhouette
+the design defines for that chart type. `WidgetPlaceholder` is the composable
+skeleton for a whole tile — its own header, footer and action parts, and an
+`interactive` affordance — for a widget that isn't a chart, or one still being
+set up.
+
+Reach for `ChartState` when a chart has no data; for this when the widget itself
+isn't there yet.
+
+## Accessibility
+
+- The static placeholder is presentational — its parts are plain elements with no
+  imposed roles, so its text content is read in document order.
+- When `interactive`, the root is focusable (`tabindex=0`) and paints a visible
+  focus ring (`--ui-focus-primary`). The whole-card click is a convenience target;
+  for a primary action prefer the `WidgetPlaceholderAction` element (or a real
+  `Button`/`Link` inside it) so the action has an accessible name and keyboard
+  semantics. If you make the whole card the only control, give it an
+  `aria-label`/`role="button"` and handle Enter/Space.
+- The illustration is decorative; keep meaning in `WidgetPlaceholderText`, not the
+  icon alone.
+
+## Contrast
+
+Text uses `--ui-text-on-surface-primary` and the muted image/footer use
+`--ui-text-on-surface-secondary`, both over `--ui-background-surface-primary` —
+meeting text contrast in light and dark. The icon/action use the brand action
+color (`--ui-background-brand-secondary`), which meets contrast against the card.