@nxgt/material 3.53.0 → 3.54.0

package/dist/styles.css

@@ -57,6 +57,7 @@
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
+	--color-card-edge: var(--card-edge);
 	--color-card-foreground: var(--card-foreground);
 	--color-popover: var(--popover);
 	--color-popover-foreground: var(--popover-foreground);

package/docs/components/navigation-and-layout.md

@@ -7,7 +7,7 @@ documentation-site shell. Everything is imported from
 
 | | Component | What it does |
 | --- | --- | --- |
-| <img src="../previews/navigation-layout-appshell.webp" width="96" alt=""> | [ActivityLayout](#activitylayout) | App shell: sidebar, header, breadcrumbs, titled page; a route's `handle.title` is the page's `h1` in the app bar (it labels `main`; `usePageTitleFocus()` focuses it after a navigation), `handle.titleAfter` / `titleAfter` a node right after it, outside the `h1` (a record's `Switcher`), `headerContext` a small tenant line after it from md up, `breadcrumbRoot` a text root crumb or (`icon: true`) the home icon with its own target and name, `breadcrumb={false}` no trail, `context` the tenant line atop the phone's menu sheet; `menuOpen` / `onMenuOpenChange` control the phone's menu sheet, which closes itself on a followed link or any location change |
+| <img src="../previews/navigation-layout-appshell.webp" width="96" alt=""> | [ActivityLayout](#activitylayout) | App shell: sidebar, header, breadcrumbs, titled page; a route's `handle.title` is the page's `h1` in the app bar (it labels `main`; `usePageTitleFocus()` focuses it after a navigation), `handle.titleAfter` / `titleAfter` a node right after it, outside the `h1` (a record's `Switcher`, or `<Switcher size="compact">` for an icon-only one), `headerContext` a small tenant line after it from md up, `breadcrumbRoot` a text root crumb or (`icon: true`) the home icon with its own target and name, `breadcrumb={false}` no trail, `context` the tenant line atop the phone's menu sheet; `menuOpen` / `onMenuOpenChange` control the phone's menu sheet, which closes itself on a followed link or any location change |
 | <img src="../previews/navigation-layout-accountmenu.webp" width="96" alt=""> | [AccountMenu](#accountmenu) | The app bar's avatar menu: the account, the app's links, Sign out |
 | <img src="../previews/navigation-layout-authcard.webp" width="96" alt=""> | [AuthCard](#authcard) | Signed-out page frame: one `main`, a centred card, its title the `h1` |
 | <img src="../previews/navigation-layout-sidebar.webp" width="96" alt=""> | [Sidebar](#sidebar) | Collapsible navigation sidebar |

package/docs/components/selection-and-choice.md

@@ -28,7 +28,7 @@ value type each one writes. Everything is imported from
 | <img src="../previews/selection-choice-transferlist.webp" width="96" alt=""> | [TransferList](#transferlist) | Two-pane picker: search, counts, select-all, drag between panes |
 | <img src="../previews/selection-choice-sortablelist.webp" width="96" alt=""> | [SortableList](#sortablelist) | Reorderable list: drag or keyboard, announced |
 | <img src="../previews/selection-choice-treeselectfield.webp" width="96" alt=""> | [TreeSelectField](#treeselectfield) | Pick from a tree, single or multiple |
-| <img src="../previews/selection-choice-switcher.webp" width="96" alt=""> | [Switcher](#switcher) | Workspace, establishment or class switcher: menu, search, groups, links |
+| <img src="../previews/selection-choice-switcher.webp" width="96" alt=""> | [Switcher](#switcher) | Workspace, establishment or class switcher: menu, search, groups, links; `size="compact"` an icon-only round trigger for the app bar's `titleAfter` slot |
 
 ## Select
 

package/docs/guides/data-grid.md

@@ -44,12 +44,12 @@ Columns are DataTable's TanStack v9 column definitions. A column with no
 | `lockPosition` | `'start'` or `'end'`: the column keeps its edge when columns are reordered ([columns](#columns-resize-hide-and-reorder)) |
 | `editor` | `'text'`, `'number'`, `'select'`, `'date'`, `'checkbox'`, or your own component ([custom editor](#a-custom-editor)) |
 | `rowEditor(row)` | The built-in editor (`'text'`, `'number'`, `'select'`, `'date'`, `'checkbox'`) a row's cell has, for a column that mixes kinds ([one column, several kinds of row](#one-column-several-kinds-of-row)). It wins over `editor` |
-| `number` | `{ min, max, decimals }` for the number editor; `min`, `max` and `decimals` may be functions of the row. A value outside them, or with too many decimals, is an error: it is never rounded or clamped |
+| `number` | `{ min, max, decimals }` for the number editor; `min`, `max` and `decimals` may be functions of the row. A value outside them, or with too many decimals, is an error: it is never rounded or clamped. A `decimals` given as a function of the row is also what the cell shows: exactly that many fraction digits (`2,50`), where a plain number shows up to that many |
 | `codes` | Symbolic values the number editor also takes ("abs", "exempt"), with the label each language shows and the aliases it accepts |
 | `options` | The select editor's `{ value, label }` list, or a function of the row returning it. The cell shows and copies the label; a typed or pasted text matches a label or a value, in any case and without accents |
 | `date` | `{ min, max }` as ISO dates (`'2026-09-01'`). The value is an ISO date, shown and read in the page's locale |
 | `parse(text, ctx)` | Text to value, replacing the editor's own: `{ value }` or `{ error }`. `ctx` has `lang`, `locale` and `row`. `{ value: null }` clears the cell, whatever the column's value type |
-| `format(value, ctx)` | Value to text, shown in the cell and in the editor |
+| `format(value, ctx)` | Value to text, shown in the cell and in the editor. `ctx` has `lang`, `locale` and, for a cell, its `row`, optional because a total has none: guard it (`ctx.row?.scale ?? 0`) |
 | `validate(value, row)` | A message (a string) flags the cell in error; nothing means valid |
 | `schema` | Any Standard Schema (zod, valibot, ArkType), run after `validate`. An asynchronous one that has not answered after the grid's `checkTimeout` (10 s by default) flags the cell "Check timed out" ([below](#checks-that-never-answer)) |
 | `value(row, cell)` | A computed column: never editable, it follows the unsaved edits. `cell(columnId)` reads what any column's cell shows |
@@ -115,6 +115,43 @@ the same instant, and `null` with `undefined`. Any other object equals only
 itself, so a `parse` that builds a new object on every call reads as a change
 each time. Return primitives or `Date`s, or keep the object's identity.
 
+### A cell that renders a component
+
+A column's `cell` is the TanStack renderer and returns any node: a `Badge`, a
+chip, an icon with a word. It draws the cells of a **read-only column** (no
+`meta.editor`) and of a **computed column** (`meta.value`), where `getValue()`
+is the computed value and follows the unsaved edits. The cell stays read-only
+and is never an editor.
+
+```tsx
+import { Badge } from '@nxgt/material/components';
+
+type Result = { id: string; value: number; high: number };
+
+const helper = createColumnHelper<DataTableFeatures, Result>();
+
+// `meta.value` makes the column computed; `cell` draws what it returns.
+helper.accessor((row) => (row.value > row.high ? 'high' : 'normal'), {
+  id: 'interpretation',
+  header: 'Interpretation',
+  meta: { value: (row) => (row.value > row.high ? 'high' : 'normal') },
+  cell: ({ getValue }) => (
+    <Badge variant="soft" tone={getValue() === 'high' ? 'error' : 'success'}>
+      {getValue() === 'high' ? 'High' : 'Normal'}
+    </Badge>
+  ),
+});
+```
+
+Keep a word in the node: a tone alone never carries the meaning.
+
+**Some columns replace `cell` with text**: those with `meta.format` (computed
+ones included), `meta.codes`, or a built-in `editor` of `'number'`, `'select'`
+or `'date'`, whose value the grid writes itself, in the cell, the editor and the
+clipboard. A `'checkbox'` editor draws a checkbox, and a cell holding an invalid
+unsaved edit shows that text with its error icon. A column that must draw a component leaves both out; a column that
+is edited keeps its editor and its text.
+
 ### Checks that never answer
 
 `validate` and `schema` may return a Promise. A commit waits for it, and so

package/docs/guides/theming.md

@@ -74,6 +74,7 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--destructive` | `bg-destructive`, `text-destructive` | deprecated alias of `--error`: the light theme sets it to `var(--error)`, the dark theme keeps its own value; use `--error` |
 | `--ground` | `bg-ground` | the page's ground under `ActivityLayout`: the tinted colour the cards stand on (see [Page ground](#page-ground)) |
 | `--card`, `--popover`, `--tooltip` (+ `-foreground`) | `bg-card`, `bg-popover`, `bg-tooltip` | surfaces |
+| `--card-edge` | `border-card-edge` | the edge of a `Card`, a `Popover` and a `Dialog`: `var(--border)` in light, `color-mix(in oklab, white 8%, var(--card))` in dark, a hairline lighter than the surface so it lifts off `--ground` |
 | `--border`, `--input`, `--ring` | `border-border`, `border-input`, `ring-ring` | outlines |
 | `--chart-1` … `--chart-5` | `bg-chart-1`, … | chart series (the charts read them at runtime) |
 | `--chart-soft-1` … `--chart-soft-5`, `--chart-soft-1-ink` … `--chart-soft-5-ink` | (none) | the native charts' soft palette (`palette="soft"`, `data-chart-palette="soft"`): a pale fill per series and its ink, 3:1 or more on `--card`, for outlines, lines and points ([charts guide](charts.md#soft-palette)) |
@@ -115,6 +116,13 @@ the token (light block and dark block), written from the theme's own
 AA: foreground, muted foreground and primary text are measured on the ground in
 both modes.
 
+In dark, `--card`, `--popover`, `--muted`, `--accent`, `--border` and `--input`
+sit 0.03 of lightness above the former values (same hue and chroma; Lavande's
+card is `oklch(0.22 0.019 289.4)`, it was `0.19`; the sidebar and
+`--sidebar-border` keep their values), and a card, a popover and a dialog
+draw the `--card-edge` hairline plus a faint top highlight, so a card reads
+against the ground. Light is unchanged.
+
 The sidebar and the app bar do **not** take the tint: they stay on
 `--background` (near-white in light), flat, with no radius and no shadow, so
 only the content ground carries the colour. The cards keep `bg-card`, their

package/docs/roadmap.md

@@ -150,8 +150,6 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Next
 
-- **Dark cards that separate from the page ground** — in dark mode, cards
-  stand out from the page instead of blending into it ([#1676](https://github.com/softistx/nxgt-material/issues/1676)).
 - **FilterBar "Add a filter" stays on its row** — the button no longer wraps
   alone onto a second row on a desktop screen ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
 
@@ -350,6 +348,9 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Dark cards that separate from the page ground (3.54.0)** — in dark mode, cards,
+  popovers and dialogs lift off the page ground (lighter surfaces and a `--card-edge`
+  hairline), light unchanged ([#1676](https://github.com/softistx/nxgt-material/issues/1676)).
 - **Compact `ServerTable` tiles** — `renderTile` shows a compact `ListTile`
   record row (`size="sm"` with chips) through `item.Row` ([#1766](https://github.com/softistx/nxgt-material/issues/1766)).
 - **A compact `Switcher` trigger, `size="compact"`** — an icon-only round

package/docs/troubleshooting.md

@@ -25,6 +25,7 @@ words in your error.
 
 **Styles & assets**
 
+- [In dark, my cards are lighter, or my own card colour has no edge](#in-dark-my-cards-are-lighter-or-my-own-card-colour-has-no-edge)
 - [The page and the cards look the same](#the-page-and-the-cards-look-the-same)
 - [Components render unstyled, with no error](#components-render-unstyled-with-no-error)
 - [A link is blue and underlined on hover and focus](#a-link-of-mine-or-of-a-component-is-blue-and-underlined-on-hover-and-focus)
@@ -745,6 +746,20 @@ import { Background } from '@nxgt/material/backgrounds';
 </ActivityLayout>
 ```
 
+### In dark, my cards are lighter, or my own card colour has no edge
+
+Since 3.54 the dark `--card`, `--popover`, `--muted`, `--accent`, `--border` and
+`--input` are 0.03 of lightness higher, and `Card`, `Popover` and `Dialog` draw their edge with
+`--card-edge` (a hairline 8 % lighter than `--card`; in light it is
+`var(--border)`). An app that overrides `--card` under `.dark` keeps its
+colour; the edge follows it only when the override is on the same selector as
+the theme (`.dark` or the theme block). An override on a nested element sets
+`--card-edge` beside `--card`. An app that set its own dark card to
+lift it off the page can drop that override, and one that sets `--card-edge`
+(or `border-color` on a card) keeps it. A theme made with `defineTheme` and
+generated before 3.54 has the former values and no `--card-edge`: regenerate
+it (`nxgt-theme`, or the Vite plugin on the next build).
+
 ### The page and the cards look the same
 
 **When:** a screen under `ActivityLayout`, after the 3.24 upgrade or on an older

package/lib/components/theme-tokens.css

@@ -11,6 +11,9 @@
 	   keeps the flat look with `--ground: var(--background)`. */
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	/* The card's edge (Card, Popover, Dialog): the border in light; dark draws it a
+	   hairline lighter than the card. */
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 290);
 	--strix: oklch(45.91% 0.1864 310.75);
 	--popover: oklch(1 0 0);
@@ -111,38 +114,39 @@
 		var(--primary) 6%,
 		color-mix(in oklab, var(--background) 55%, black)
 	);
-	--card: oklch(0.19 0.019 289.4);
+	--card: oklch(0.22 0.019 289.4);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 291.3);
-	--popover: oklch(0.19 0.019 289.4);
+	--popover: oklch(0.22 0.019 289.4);
 	--popover-foreground: oklch(0.943 0.012 291.3);
 	--primary: oklch(46% 0.1135 276.35);
 	--primary-foreground: oklch(0.995 0.002 291.3);
 	/* Mixed 60 % toward white (the tonal Button labels' recipe): readable as text
 	   on --background and --card. */
 	--primary-text: color-mix(in oklab, var(--primary) 40%, white);
-	/* --primary itself is 2.7:1 on --background, 2.5:1 on --card and 2.3:1 on
-	   --muted. Mixed 25 % toward white: 4.8:1, 4.5:1 and 4.2:1. */
+	/* --primary itself is 2.7:1 on --background, 2.4:1 on --card and 2.1:1 on
+	   --muted. Mixed 25 % toward white: 4.8:1, 4.2:1 and 3.8:1. */
 	--primary-indicator: color-mix(in oklab, var(--primary) 75%, white);
 	/* Brighter than the light one: it is read as text on the dark surfaces (6.8:1
-	   on --background, 6.4:1 on --card; 5.1:1 on its own 15 % tonal tint over a
+	   on --background, 6.0:1 on --card; 4.8:1 on its own 15 % tonal tint over a
 	   Card). A filled secondary surface mixes it toward --background (the opaque
 	   70 % mix) to keep 5.4:1 under its near-white text (4.9:1 over a Card). */
 	--secondary: oklch(0.675 0.1135 245.65);
 	--secondary-foreground: oklch(0.995 0.002 291.3);
-	--muted: oklch(0.228 0.022 290);
+	--muted: oklch(0.258 0.022 290);
 	--muted-foreground: oklch(0.725 0.03 292.2);
-	/* 3.7:1 on --background, 3.5:1 on --card; the fill 3.3:1 on the track. */
+	/* 3.7:1 on --background, 3.3:1 on --card; the fill 3.3:1 on the track. */
 	--track: oklch(0.53 0.03 290);
 	--track-fill: oklch(0.85 0.09 276.35);
 	--tooltip: oklch(0.925 0.012 291.3);
 	--tooltip-foreground: oklch(0.446 0.043 291);
-	--accent: oklch(0.25 0.022 290);
+	--accent: oklch(0.28 0.022 290);
 	--accent-foreground: oklch(0.943 0.012 291.3);
 	--error: oklch(0.577 0.245 27.325);
 	--error-foreground: oklch(0.995 0.002 291.3);
 	/* --error stays the fill under near-white text; as text it would give only
 	   4.0:1 on --background and 3.8:1 on --card. Lightened (76 % --error), 6.25
-	   and 5.9:1, and 5.2:1 on a focused error menu item (bg-error/20 over the
+	   and 5.5:1, and 4.9:1 on a focused error menu item (bg-error/20 over the
 	   popover; the former 80 % missed 4.5:1 once rendered). */
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	/* The light brights: on the dark surfaces they read as text and as the
@@ -152,15 +156,15 @@
 	--success-foreground: oklch(0.995 0.002 291.3);
 	--info: oklch(0.707 0.165 254.624);
 	--info-foreground: oklch(0.995 0.002 291.3);
-	/* Amber too, as text: 7.2:1 on --background and 6.7:1 on --card, 6.4:1 and
-	   5.9:1 on its 10% tint; the badge's 60% fill under near-white text is
-	   6.1:1 on a page and 5.8:1 on a Card. */
+	/* Amber too, as text: 7.2:1 on --background and 6.3:1 on --card, 6.4:1 and
+	   5.5:1 on its 10% tint; the badge's 60% fill under near-white text is
+	   6.1:1 on a page and 5.6:1 on a Card. */
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 291.3);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.025 291.4);
-	--input: oklch(0.298 0.027 291.4);
-	/* 4.05:1 on --background, 3.80:1 on --card, 3.50:1 on --muted. */
+	--border: oklch(0.289 0.025 291.4);
+	--input: oklch(0.328 0.027 291.4);
+	/* 4.05:1 on --background, 3.57:1 on --card, 3.22:1 on --muted. */
 	--ring: oklch(0.551 0.03 290);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);

package/lib/components/ui/overlays/dialog/dialog.css

@@ -39,7 +39,8 @@
 		--dialog-bg: color-mix(in oklab, var(--primary) 18%, var(--card));
 		box-shadow:
 			var(--nxgt-elevation-3),
-			inset 0 0 0 1px rgb(255 255 255 / 0.07);
+			inset 0 0 0 1px var(--card-edge),
+			inset 0 1px 0 rgb(255 255 255 / 0.03);
 	}
 	.nxgt-dialog[data-state="open"] {
 		animation:

package/lib/components/ui/overlays/popover/popover.css

@@ -30,13 +30,14 @@
 		--popover-bg: var(--popover);
 		--popover-lift:
 			0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-		border: 1px solid var(--border);
+		border: 1px solid var(--card-edge);
 		border-radius: var(--radius-md);
 	}
 	:where(.dark, [data-theme="dark"]) .nxgt-popover {
 		--popover-bg: color-mix(in oklab, var(--primary) 16%, var(--popover));
 		--popover-lift:
-			var(--nxgt-elevation-2), inset 0 0 0 1px rgb(255 255 255 / 0.07);
+			var(--nxgt-elevation-2), inset 0 0 0 1px var(--card-edge),
+			inset 0 1px 0 rgb(255 255 255 / 0.03);
 	}
 	:where(.dark, [data-theme="dark"]) .nxgt-popover[data-variant="tonal"] {
 		--popover-bg: color-mix(in oklab, var(--primary) 34%, var(--popover));

package/lib/styles.css

@@ -57,6 +57,7 @@
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
+	--color-card-edge: var(--card-edge);
 	--color-card-foreground: var(--card-foreground);
 	--color-popover: var(--popover);
 	--color-popover-foreground: var(--popover-foreground);

package/lib/themes/ambre.css

@@ -9,6 +9,7 @@
 	--foreground: oklch(0.227 0.0145 65);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0145 65);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0145 65);
@@ -76,9 +77,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0102 65);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0161 65);
+	--card: oklch(0.22 0.0161 65);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0102 65);
-	--popover: oklch(0.19 0.0161 65);
+	--popover: oklch(0.22 0.0161 65);
 	--popover-foreground: oklch(0.943 0.0102 65);
 	--primary: oklch(0.52 0.13 48);
 	--primary-foreground: oklch(0.995 0.002 65);
@@ -89,13 +91,13 @@
 	--tertiary: oklch(0.7 0.14 350);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.5 0.14 350);
-	--muted: oklch(0.228 0.0187 65);
+	--muted: oklch(0.258 0.0187 65);
 	--muted-foreground: oklch(0.725 0.0255 65);
 	--track: oklch(0.53 0.0255 65);
 	--track-fill: oklch(0.85 0.09 48);
 	--tooltip: oklch(0.925 0.0102 65);
 	--tooltip-foreground: oklch(0.446 0.0366 65);
-	--accent: oklch(0.25 0.0187 65);
+	--accent: oklch(0.28 0.0187 65);
 	--accent-foreground: oklch(0.943 0.0102 65);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 65);
@@ -107,8 +109,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 65);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.0213 65);
-	--input: oklch(0.298 0.0229 65);
+	--border: oklch(0.289 0.0213 65);
+	--input: oklch(0.328 0.0229 65);
 	--ring: oklch(0.551 0.0255 65);
 	--sidebar: oklch(0.19 0.0161 65);
 	--sidebar-foreground: oklch(0.943 0.0102 65);

package/lib/themes/ardoise.css

@@ -8,6 +8,7 @@
 	--foreground: oklch(0.227 0.0119 250);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0119 250);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0119 250);
@@ -75,9 +76,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0084 250);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0133 250);
+	--card: oklch(0.22 0.0133 250);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0084 250);
-	--popover: oklch(0.19 0.0133 250);
+	--popover: oklch(0.22 0.0133 250);
 	--popover-foreground: oklch(0.943 0.0084 250);
 	--primary: oklch(0.45 0.065 252);
 	--primary-foreground: oklch(0.995 0.002 250);
@@ -88,13 +90,13 @@
 	--tertiary: oklch(0.7 0.1 290);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.48 0.1 290);
-	--muted: oklch(0.228 0.0154 250);
+	--muted: oklch(0.258 0.0154 250);
 	--muted-foreground: oklch(0.725 0.021 250);
 	--track: oklch(0.53 0.021 250);
 	--track-fill: oklch(0.85 0.09 252);
 	--tooltip: oklch(0.925 0.0084 250);
 	--tooltip-foreground: oklch(0.446 0.0301 250);
-	--accent: oklch(0.25 0.0154 250);
+	--accent: oklch(0.28 0.0154 250);
 	--accent-foreground: oklch(0.943 0.0084 250);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 250);
@@ -106,8 +108,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 250);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.0175 250);
-	--input: oklch(0.298 0.0189 250);
+	--border: oklch(0.289 0.0175 250);
+	--input: oklch(0.328 0.0189 250);
 	--ring: oklch(0.551 0.021 250);
 	--sidebar: oklch(0.19 0.0133 250);
 	--sidebar-foreground: oklch(0.943 0.0084 250);

package/lib/themes/bleumono.css

@@ -11,6 +11,7 @@
 	--foreground: oklch(0.227 0.0187 255);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0187 255);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0187 255);
@@ -78,9 +79,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0132 255);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0209 255);
+	--card: oklch(0.22 0.0209 255);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0132 255);
-	--popover: oklch(0.19 0.0209 255);
+	--popover: oklch(0.22 0.0209 255);
 	--popover-foreground: oklch(0.943 0.0132 255);
 	--primary: oklch(0.46 0.13 255);
 	--primary-foreground: oklch(0.995 0.002 255);
@@ -91,13 +93,13 @@
 	--tertiary: oklch(0.82 0.09 255);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.38 0.1254 255);
-	--muted: oklch(0.228 0.0242 255);
+	--muted: oklch(0.258 0.0242 255);
 	--muted-foreground: oklch(0.725 0.033 255);
 	--track: oklch(0.53 0.033 255);
 	--track-fill: oklch(0.85 0.09 255);
 	--tooltip: oklch(0.925 0.0132 255);
 	--tooltip-foreground: oklch(0.446 0.0473 255);
-	--accent: oklch(0.25 0.0242 255);
+	--accent: oklch(0.28 0.0242 255);
 	--accent-foreground: oklch(0.943 0.0132 255);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 255);
@@ -109,8 +111,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 255);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.0275 255);
-	--input: oklch(0.298 0.0297 255);
+	--border: oklch(0.289 0.0275 255);
+	--input: oklch(0.328 0.0297 255);
 	--ring: oklch(0.551 0.033 255);
 	--sidebar: oklch(0.19 0.0209 255);
 	--sidebar-foreground: oklch(0.943 0.0132 255);

package/lib/themes/bluemoon.css

@@ -11,6 +11,7 @@
 	--foreground: oklch(0.227 0.017 265);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 265);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.017 265);
@@ -78,9 +79,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 265);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.019 265);
+	--card: oklch(0.22 0.019 265);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 265);
-	--popover: oklch(0.19 0.019 265);
+	--popover: oklch(0.22 0.019 265);
 	--popover-foreground: oklch(0.943 0.012 265);
 	--primary: oklch(0.45 0.12 265);
 	--primary-foreground: oklch(0.995 0.002 265);
@@ -91,13 +93,13 @@
 	--tertiary: oklch(0.7 0.08 290);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.5625 0.08 290);
-	--muted: oklch(0.228 0.022 265);
+	--muted: oklch(0.258 0.022 265);
 	--muted-foreground: oklch(0.725 0.03 265);
 	--track: oklch(0.53 0.03 265);
 	--track-fill: oklch(0.85 0.09 265);
 	--tooltip: oklch(0.925 0.012 265);
 	--tooltip-foreground: oklch(0.446 0.043 265);
-	--accent: oklch(0.25 0.022 265);
+	--accent: oklch(0.28 0.022 265);
 	--accent-foreground: oklch(0.943 0.012 265);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 265);
@@ -109,8 +111,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 265);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.025 265);
-	--input: oklch(0.298 0.027 265);
+	--border: oklch(0.289 0.025 265);
+	--input: oklch(0.328 0.027 265);
 	--ring: oklch(0.551 0.03 265);
 	--sidebar: oklch(0.19 0.019 265);
 	--sidebar-foreground: oklch(0.943 0.012 265);

package/lib/themes/corail.css

@@ -11,6 +11,7 @@
 	--foreground: oklch(0.227 0.0136 30);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 30);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0136 30);
@@ -78,9 +79,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 30);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0152 30);
+	--card: oklch(0.22 0.0152 30);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 30);
-	--popover: oklch(0.19 0.0152 30);
+	--popover: oklch(0.22 0.0152 30);
 	--popover-foreground: oklch(0.943 0.0096 30);
 	--primary: oklch(0.575 0.17 35);
 	--primary-foreground: oklch(0.995 0.002 30);
@@ -91,13 +93,13 @@
 	--tertiary: oklch(0.7 0.1 200);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.5 0.085 200);
-	--muted: oklch(0.228 0.0176 30);
+	--muted: oklch(0.258 0.0176 30);
 	--muted-foreground: oklch(0.725 0.024 30);
 	--track: oklch(0.53 0.024 30);
 	--track-fill: oklch(0.85 0.09 35);
 	--tooltip: oklch(0.925 0.0096 30);
 	--tooltip-foreground: oklch(0.446 0.0344 30);
-	--accent: oklch(0.25 0.0176 30);
+	--accent: oklch(0.28 0.0176 30);
 	--accent-foreground: oklch(0.943 0.0096 30);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 30);
@@ -109,8 +111,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 30);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.02 30);
-	--input: oklch(0.298 0.0216 30);
+	--border: oklch(0.289 0.02 30);
+	--input: oklch(0.328 0.0216 30);
 	--ring: oklch(0.551 0.024 30);
 	--sidebar: oklch(0.19 0.0152 30);
 	--sidebar-foreground: oklch(0.943 0.0096 30);

package/lib/themes/foret.css

@@ -8,6 +8,7 @@
 	--foreground: oklch(0.227 0.0136 140);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 140);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0136 140);
@@ -75,9 +76,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 140);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0152 140);
+	--card: oklch(0.22 0.0152 140);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 140);
-	--popover: oklch(0.19 0.0152 140);
+	--popover: oklch(0.22 0.0152 140);
 	--popover-foreground: oklch(0.943 0.0096 140);
 	--primary: oklch(0.48 0.1 152);
 	--primary-foreground: oklch(0.995 0.002 140);
@@ -88,13 +90,13 @@
 	--tertiary: oklch(0.7 0.1 55);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.5 0.1 55);
-	--muted: oklch(0.228 0.0176 140);
+	--muted: oklch(0.258 0.0176 140);
 	--muted-foreground: oklch(0.725 0.024 140);
 	--track: oklch(0.53 0.024 140);
 	--track-fill: oklch(0.85 0.09 152);
 	--tooltip: oklch(0.925 0.0096 140);
 	--tooltip-foreground: oklch(0.446 0.0344 140);
-	--accent: oklch(0.25 0.0176 140);
+	--accent: oklch(0.28 0.0176 140);
 	--accent-foreground: oklch(0.943 0.0096 140);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 140);
@@ -106,8 +108,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 140);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.02 140);
-	--input: oklch(0.298 0.0216 140);
+	--border: oklch(0.289 0.02 140);
+	--input: oklch(0.328 0.0216 140);
 	--ring: oklch(0.551 0.024 140);
 	--sidebar: oklch(0.19 0.0152 140);
 	--sidebar-foreground: oklch(0.943 0.0096 140);

package/lib/themes/lavande.css

@@ -8,6 +8,7 @@
 	--foreground: oklch(0.227 0.017 290);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 290);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.017 290);
@@ -75,9 +76,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 291.3);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.019 289.4);
+	--card: oklch(0.22 0.019 289.4);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 291.3);
-	--popover: oklch(0.19 0.019 289.4);
+	--popover: oklch(0.22 0.019 289.4);
 	--popover-foreground: oklch(0.943 0.012 291.3);
 	--primary: oklch(0.46 0.1135 276.35);
 	--primary-foreground: oklch(0.995 0.002 291.3);
@@ -88,13 +90,13 @@
 	--tertiary: oklch(0.7 0.15 310.75);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.4591 0.1864 310.75);
-	--muted: oklch(0.228 0.022 290);
+	--muted: oklch(0.258 0.022 290);
 	--muted-foreground: oklch(0.725 0.03 292.2);
 	--track: oklch(0.53 0.03 290);
 	--track-fill: oklch(0.85 0.09 276.35);
 	--tooltip: oklch(0.925 0.012 291.3);
 	--tooltip-foreground: oklch(0.446 0.043 291);
-	--accent: oklch(0.25 0.022 290);
+	--accent: oklch(0.28 0.022 290);
 	--accent-foreground: oklch(0.943 0.012 291.3);
 	--error: oklch(0.577 0.245 27.325);
 	--error-foreground: oklch(0.995 0.002 291.3);
@@ -106,8 +108,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 291.3);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.025 291.4);
-	--input: oklch(0.298 0.027 291.4);
+	--border: oklch(0.289 0.025 291.4);
+	--input: oklch(0.328 0.027 291.4);
 	--ring: oklch(0.551 0.03 290);
 	--sidebar: oklch(0.19 0.019 289.4);
 	--sidebar-foreground: oklch(0.943 0.012 291.3);