@nxgt/material 3.52.0 → 3.54.0

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)
@@ -273,6 +274,7 @@ words in your error.
 - [A `SwitchFormField` shows no validation message](#a-switchformfield-shows-no-validation-message)
 - [A `TimeFormField` shows its error on a desktop but not on a phone](#a-timeformfield-shows-its-error-on-a-desktop-but-not-on-a-phone)
 - [`setError(…, { shouldFocus: true })` or a failed submit does not focus the field](#seterror--shouldfocus-true--or-a-failed-submit-does-not-focus-the-field)
+- [`useFastForm` does not focus the first field](#usefastform-does-not-focus-the-first-field)
 - [`touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates](#touchedfields-stays-empty-after-leaving-a-field-or-mode-onblur-never-validates)
 - ["Required" shows as soon as the calendar opens, or while a date is being picked](#required-shows-as-soon-as-the-calendar-opens-or-while-a-date-is-being-picked)
 - [`TypeError: values.map is not a function` (a `SliderFormField`)](#typeerror-valuesmap-is-not-a-function)
@@ -744,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
@@ -4736,6 +4752,26 @@ open the section before calling `setError`.
 `PasswordFormField` or `OtpFormField` (Storybook: `Guides/Forms/Focus on
 error`, `Set Focus Password` and `Set Focus Otp`).
 
+### `useFastForm` does not focus the first field
+
+**When:** a form on `useFastForm(props, 'email')` opens and the focus stays
+where it was, or in a dialog it ends on the dialog instead of the field.
+**Why:** `useFastForm` calls `setFocus(first)`, which needs the field's `ref`:
+the field must be a `*FormField` of this form (or give `field.ref` to its
+control), and it must be mounted. The hook asks again each frame for about half
+a second, then gives up; it also stops at once when the focus moved, the
+user's own move included. A form whose hook stays mounted while its dialog is
+closed focuses only when `active` turns true.
+**Fix:** pass the dialog's `open` as the third argument, and make sure `first`
+names a mounted field:
+
+```tsx
+const form = useFastForm<Values>({ defaultValues }, 'email', open);
+```
+
+Storybook: `Guides/Forms/useFastForm`. See
+[forms](guides/forms.md#a-form-that-is-quick-to-fill).
+
 ### `touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates
 
 **When:** a `*FormField` keeps `formState.touchedFields` (and

package/lib/components/components.css

@@ -58,11 +58,7 @@
 @import "./ui/layout/app-shell/activity-backdrop-shapes.css";
 @import "./ui/layout/auth-card/auth-card-backdrop.css";
 /* DataTable cards and tiles: the item shell (hairline, tint, start bar, columns by the list's width). */
-@import "./ui/collections/data-table/data-table-items.css";
-@import "./ui/collections/data-table/data-table-items-compact.css";
-@import "./ui/collections/data-table/data-table-items-bar.css";
-@import "./ui/collections/data-table/data-table-items-forced.css";
-@import "./ui/collections/data-table/data-table-items-tiles.css";
+@import "./ui/collections/data-table/index.css";
 /* ServerTable's second header row on a phone: select-all, sort, Filters and the actions. */
 @import "./ui/collections/server-table/server-table-phone-row.css";
 /* Checkbox and Radio: the check that draws in, the dot that springs in, the state layer. */

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/actions/action-card/action-card-tile.css

@@ -76,7 +76,7 @@
 	 * wrapper dissolves so its children take the areas. */
 	.nxgt-action-card[data-size="tile"] {
 		grid-template-columns: minmax(0, 1fr) auto;
-		grid-template-areas: "title act" "status status" "desc desc" "meta meta";
+		grid-template-areas: "title act" "status status" "desc desc" "meta meta" "foot foot";
 		align-items: start;
 		/* A taller neighbour stretches the card: keep the rows at the top. */
 		align-content: start;
@@ -93,7 +93,8 @@
 			"icon title act"
 			". status status"
 			". desc desc"
-			". meta meta";
+			". meta meta"
+			". foot foot";
 	}
 	.nxgt-action-card[data-size="tile"] .nxgt-action-card-icon {
 		width: 36px;
@@ -119,6 +120,14 @@
 	.nxgt-action-card[data-size="tile"] .nxgt-action-card-meta {
 		grid-area: meta;
 	}
+	/* The footer: secondary links, above the stretched title link or button. */
+	.nxgt-action-card-footer {
+		grid-area: foot;
+		position: relative;
+		z-index: 1;
+		min-width: 0;
+		margin-top: 2px;
+	}
 	.nxgt-action-card[data-size="tile"][data-has-action]
 		.nxgt-action-card-action {
 		align-self: start;

package/lib/components/ui/collections/data-table/data-table-items-record.css

@@ -0,0 +1,27 @@
+/* The compact record row of a tile (`item.Row`, data-table-item-row.tsx): the
+ * dense row of ListTile inside the tile's shell. Direction "A Refined" for the
+ * shell; the row is 36px tall under a fine pointer and 44px under a coarse one
+ * (the link's `::after` covers the tile, so the whole tile is the target).
+ * The title is 13px medium like ListTile's `size="sm"`; a selected tile's
+ * title keeps the primary text of data-table-items.css. */
+@layer components {
+	[data-slot="data-table-tiles"]
+		> [data-slot="data-table-item"]:has([data-slot="data-table-record"]) {
+		min-height: 2.25rem;
+		padding-block: 0.375rem;
+	}
+	@media (pointer: coarse) {
+		[data-slot="data-table-tiles"]
+			> [data-slot="data-table-item"]:has([data-slot="data-table-record"]) {
+			min-height: 2.75rem;
+			/* The link's 44px box, centred on the title's first line, stays inside
+			 * the tile when the subtitle and the chips stack under it. */
+			padding-block: 0.75rem;
+		}
+	}
+	[data-slot="data-table-record"] [data-slot="data-table-item-title"] {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1.4;
+	}
+}

package/lib/components/ui/collections/data-table/index.css

@@ -0,0 +1,14 @@
+/* DataTable cards and tiles, one file per role, in cascade order:
+ *
+ *   data-table-items.css          the item shell (hairline, tint, start bar, columns)
+ *   data-table-items-compact.css  compact cards
+ *   data-table-items-bar.css      the list bar
+ *   data-table-items-forced.css   forced colours
+ *   data-table-items-tiles.css    tiles: one column, one surface
+ *   data-table-items-record.css   the compact record row of a tile (item.Row) */
+@import "./data-table-items.css";
+@import "./data-table-items-compact.css";
+@import "./data-table-items-bar.css";
+@import "./data-table-items-forced.css";
+@import "./data-table-items-tiles.css";
+@import "./data-table-items-record.css";

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);

package/lib/themes/menthe.css

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