@nxgt/material 3.23.0 → 3.24.1

package/dist/styles.css

@@ -52,6 +52,7 @@
 	--color-paper: --alpha(var(--primary) / 0.5%);
 	--color-strix: var(--strix);
 	--color-background: var(--background);
+	--color-ground: var(--ground);
 	--color-background-paper: --alpha(var(--primary) / 5%);
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);

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

@@ -31,7 +31,7 @@ documentation-site shell. Everything is imported from
 
 ![ActivityLayout](../previews/navigation-layout-appshell.webp)
 
-App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page. See the [app shell guide](../guides/app-shell.md).
+App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page. It paints the tinted page ground (`bg-ground`) under the content, with the sidebar and the app bar flat on `--background` and the cards on `bg-card`. See the [app shell guide](../guides/app-shell.md).
 
 ```tsx
 import { Outlet } from 'react-router';
@@ -414,7 +414,7 @@ open the pane (`ListDetailsTrigger` takes the `view` to show), and their `childr
 layout state. A server, which has no screen width, renders the wide layout,
 as does a hydrating client; a phone switches right after hydrating. A page
 rendered only in the browser starts on the real layout. `ThreadLayout` is a centred column over the app
-[background](#background) for focused flows (sign-in, onboarding), with no
+[background](#background) on the page ground (`bg-ground`, so a `bg-card` card stands apart) for focused flows (sign-in, onboarding), with no
 app bar.
 
 | Prop | Type | Default | Effect |

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

@@ -97,7 +97,9 @@ phone, no portal). Parts: `NativeSelect`, `NativeSelectOption`,
 and every other attribute go to the `<select>`. It is 44px high like the
 other fields; `size="sm"` makes it 36px for a compact toolbar and
 `size="lg"` 52px, and a number
-is still the `<select>`'s own `size` (rows shown). It is tinted while the
+is still the `<select>`'s own `size` (rows shown). It fills its container
+like the other fields; a width class on it (`className="w-24"`, or `w-fit` for
+the width of its widest option) keeps it compact, and its chevron follows. It is tinted while the
 chosen option has a value, and an option with `value=""` reads as a
 placeholder.
 

package/docs/guides/app-shell.md

@@ -209,7 +209,7 @@ partitionMenu(items);                              // { content, footer }
 | `align` | `'start' \| 'center'` | `'start'` | Where the collapsed rail's entries sit: right under the brand, or centred in the height below it |
 | `menuOpen` | `boolean` | — | Controls the phone's menu sheet: open while `true`. Leave it out and the layout manages the sheet. Only a phone shows the sheet |
 | `onMenuOpenChange` | `(open: boolean) => void` | — | Called for every change of the sheet: the menu button, Escape, the close button, a followed link, a new location |
-| `backdrop` | `ReactNode \| false` | — | An exception to the theme's background, which the layout draws by default (Lavande's: the built-in gradient and blobs). A node replaces it for this screen: usually a `Background` preset from `@nxgt/material/backgrounds` (see [Use a background preset behind the shell](#use-a-background-preset-behind-the-shell)); `false` draws no background, a plain page |
+| `backdrop` | `ReactNode \| false` | — | An exception to the theme's background (the page ground, [`--ground`](#the-page-ground), is painted either way), which the layout draws by default (Lavande's: the built-in gradient and blobs). A node replaces it for this screen: usually a `Background` preset from `@nxgt/material/backgrounds` (see [Use a background preset behind the shell](#use-a-background-preset-behind-the-shell)); `false` draws no background, a plain page |
 
 On a page with `viewport-fit=cover` (an installed PWA drawing under a
 notch and the home indicator), the shell pads clear of
@@ -502,6 +502,22 @@ while the sheet is open, so leave ids out of it. A link in `brand` (a home
 link around the logo) is the sheet's first focusable element, so it takes
 the focus when the sheet opens.
 
+## The page ground
+
+The layout paints `bg-ground` (the `--ground` token, see [Page ground](./theming.md#page-ground))
+on its root, so the content, the gutters and the space between the chrome and
+the content are tinted, with or without a `backdrop`, in light and dark. The
+sidebar and the app bar stay on `--background`: flat rectangles with no radius
+and no shadow (translucent over a backdrop, about 90 % without one), so the edge
+between chrome and content is the change of colour. The cards, and the
+`ActivityContent` header card (`bg-card`), stand on the ground with their
+hairline and soft shadow. With `scroll="container"` the same ground stays behind
+the scrolling region.
+
+`--ground: var(--background)` on the layout or an ancestor opts out. An app
+sets no page colour of its own under the layout, and no colour on a backdrop;
+`--ground` is the one place to tune it.
+
 ## The theme's background
 
 `ActivityLayout` draws the background of the nearest theme (`NxgtThemeProvider`

package/docs/guides/theming.md

@@ -72,6 +72,7 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--primary-indicator` | `bg-primary-indicator`, `border-primary-indicator`, `ring-primary-indicator`, `stroke-primary-indicator` | primary drawn as a non-text mark that carries a state (WCAG 1.4.11, 3:1): an active bar or dot, a selected or focused border, a ring, a spinner arc. Equal to `--primary` in light; in dark, `--primary` mixed 25 % with white (`color-mix(in oklab, var(--primary) 75%, white)`), 4.8:1 on `--background`, 4.5:1 on `--card`, 4.2:1 on `--muted` (`--primary` itself gives 2.7, 2.5 and 2.3:1) |
 | `--error-text` | `text-error-text` | error drawn as text: field messages, `HelperText` in its error state, form and dialog errors, `variant="error"` menu items |
 | `--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 |
 | `--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) |
@@ -95,6 +96,45 @@ container is the accent colour itself, the same as `bg-accent`.
 
 Put `text-foreground` on a container; it stays well above 4.5:1 in both themes.
 
+## Page ground
+
+`--ground` (`bg-ground`) is the colour of the page under the content: the page,
+the gutters and what the app bar and the sidebar float on. `ActivityLayout`
+paints it by default, with or without a `backdrop` (so does `ThreadLayout`), so a card (`bg-card`) stands
+apart from the page in every screen and an app sets no page colour.
+
+| Mode | Value | What it does |
+| --- | --- | --- |
+| light | `color-mix(in oklab, var(--primary) 7%, var(--background))` | the primary at 7 % over the page: a quiet tint, 0.03 to 0.04 ΔEOK from a white card |
+| dark | `color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black))` | darker than `--background` (lightness about 0.105 against 0.150) and than `--card`, so the cards lift off it: 0.08 to 0.09 ΔEOK |
+
+The mixes are in `oklab`, never `oklch`: `oklch` skews the hue when a colour is
+mixed with white. Every built-in theme and every `defineTheme` output carries
+the token (light block and dark block), written from the theme's own
+`--primary` and `--background`, so a zone gets its own ground. Text on it keeps
+AA: foreground, muted foreground and primary text are measured on the ground in
+both modes.
+
+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
+hairline border and their soft shadow.
+
+```css
+/* A custom tint, anywhere above the layout (or on a zone): */
+:root { --ground: color-mix(in oklab, var(--primary) 10%, var(--background)); }
+
+/* Opt out: the page is flat again, as before 3.24. */
+[data-slot="activity-layout"] { --ground: var(--background); }
+```
+
+A theme overrides it like any token: `defineTheme({ …, tokens: { light: { ground:
+'var(--background)' } } })`, and `checkThemeContrast` measures the override.
+
+Do not paint your own page background under the layout (`bg-background`,
+`bg-muted`, a gradient) or add a shadow to every card: both fight the ground.
+A backdrop's colours come from the theme; set none on it.
+
 ## The neutral palette
 
 The default theme's page is plain: pure white in light and the one dark night

package/docs/troubleshooting.md

@@ -25,6 +25,7 @@ words in your error.
 
 **Styles & assets**
 
+- [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)
 - [The light and dark neutrals turned violet after upgrading to 3.6](#the-light-and-dark-neutrals-turned-violet-after-upgrading-to-36)
@@ -319,6 +320,7 @@ words in your error.
 - [My inputs look rounder or tinted, or lost the hover ring, after upgrading](#my-inputs-look-rounder-or-tinted-or-lost-the-hover-ring-after-upgrading)
 - [An input inside an `InputGroup` lost a class or a style of `Input`](#an-input-inside-an-inputgroup-lost-a-class-or-a-style-of-input)
 - [A `NativeSelect` is taller, or a `Select` trigger or list measures differently](#a-nativeselect-is-taller-or-a-select-trigger-or-list-measures-differently)
+- [A `NativeSelect` is now as wide as its container, where it was as wide as its selected option](#a-nativeselect-is-now-as-wide-as-its-container-where-it-was-as-wide-as-its-selected-option)
 - [A `Combobox` clear button is not found, its list sits 3px from the field, or `ComboboxInput` rejects `size={n}`](#a-combobox-clear-button-is-not-found-its-list-sits-3px-from-the-field-or-comboboxinput-rejects-sizen)
 - [An `Autocomplete` list covers its helper text, or a chip test no longer finds its markup](#an-autocomplete-list-covers-its-helper-text-or-a-chip-test-no-longer-finds-its-markup)
 - [A `CountryField` lost its chip, or its `renderOption` or `filter` does nothing](#a-countryfield-lost-its-chip-or-its-renderoption-or-filter-does-nothing)
@@ -710,6 +712,33 @@ Vite and React Router apps use:
 
 ## Styles & assets
 
+### The page and the cards look the same
+
+**When:** a screen under `ActivityLayout`, after the 3.24 upgrade or on an older
+setup. The cards, tiles and the header card have no visible edge against the
+page.
+**Why:** the page ground (`--ground`, `bg-ground`) is flat again, equal to
+`--background`: an app's CSS paints its own page colour under the layout (a
+`bg-background` or `bg-white` on a wrapper, `body`, a route), sets
+`--ground: var(--background)`, a stylesheet loaded without `theme-tokens.css`
+(no `--ground`, so `bg-ground` paints nothing), or a theme whose `tokens`
+override made `ground` equal to `card`.
+**Fix:** remove the page background under the layout, import
+`@nxgt/material/styles.css` (it carries the token), and read the value on the
+layout:
+
+```css
+/* a custom tint is fine; a flat page is the opt-out */
+:root { --ground: color-mix(in oklab, var(--primary) 7%, var(--background)); }
+```
+
+```ts
+getComputedStyle(document.querySelector('[data-slot="activity-layout"]')!).backgroundColor;
+```
+
+Also drop app-level card shadows: the cards already carry a hairline and a soft
+shadow.
+
 ### Components render unstyled, with no error
 
 **When:** on the first page load. Components have their structure but no
@@ -5807,11 +5836,30 @@ tint with `data-placeholder` (absent once a value is chosen) and the open
 state with `data-open`:
 
 ```tsx
-<NativeSelect size="sm" aria-label="Rows per page">…</NativeSelect>
+<NativeSelect size="sm" aria-label="Rows per page" className="w-fit">…</NativeSelect>
 
 expect(screen.getByRole('combobox', { name: 'Fruit' })).not.toHaveAttribute('data-placeholder');
 ```
 
+### A `NativeSelect` is now as wide as its container, where it was as wide as its selected option
+
+**When:** after upgrading, a `NativeSelect` in a toolbar, a filter bar or a
+row of buttons stretches across the row, where it used to be as wide as its
+widest option.
+**Why:** it shrank to its content while `SelectField`, `TextField` and the
+other fields fill their column, so in a form it sat narrower than the
+fields around it. It fills its container now, like them.
+**Fix:** give it the width you want. A width class on the `<select>` keeps the
+whole control, chevron included, at that width:
+
+```tsx
+<NativeSelect size="sm" aria-label="Rows per page" className="w-fit">…</NativeSelect>
+<NativeSelect aria-label="Sort" className="w-40">…</NativeSelect>
+```
+
+`SelectField`, `Select` and the other fields never shrank to the selected option; a long
+selected label ends in an ellipsis and does not widen its column.
+
 ### A `Combobox` clear button is not found, its list sits 3px from the field, or `ComboboxInput` rejects `size={n}`
 
 **When:** after upgrading, `[data-slot="combobox-clear"]` finds nothing, a

package/lib/backgrounds/css/motifs.css

@@ -7,7 +7,10 @@
 @import "./scene.css";
 
 @layer components {
-	/* The wash: two soft colour pools under the scene. */
+	/* The wash: one even, soft gradient over the whole layer, top to bottom, no
+	 * pool in a corner. It sits in the backdrop layer under the content column, so
+	 * it never repaints the sidebar or the app bar, and the page ground
+	 * (--ground) shows through it. */
 	:is(
 		[data-background="shapes"],
 		[data-background="confetti-grid"],
@@ -18,17 +21,15 @@
 	) > [data-layer="wash"] {
 		position: absolute;
 		inset: 0;
-		background:
-			radial-gradient(
-				ellipse 75% 65% at 30% 20%,
-				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
-				transparent 72%
+		background: linear-gradient(
+			180deg in oklab,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) calc(var(--nxgt-bg-a1) * 1.75),
+				transparent
 			),
-			radial-gradient(
-				ellipse 60% 60% at 85% 90%,
-				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
-				transparent 70%
-			);
+			color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent)
+		);
 	}
 
 	/* The scene clips the float, which scales it past the frame. */

package/lib/backgrounds/css-react/icons.css

@@ -23,20 +23,19 @@
 @import "./icons-tint.css";
 
 @layer components {
+	/* The wash: one even, soft gradient over the layer (see css/motifs.css). */
 	[data-background="icons"] > [data-layer="wash"] {
 		position: absolute;
 		inset: 0;
-		background:
-			radial-gradient(
-				ellipse 75% 65% at 22% 18%,
-				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
-				transparent 72%
+		background: linear-gradient(
+			180deg in oklab,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) calc(var(--nxgt-bg-a1) * 1.75),
+				transparent
 			),
-			radial-gradient(
-				ellipse 60% 60% at 86% 90%,
-				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
-				transparent 70%
-			);
+			color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent)
+		);
 	}
 
 	:is([data-background="icons"], [data-background="shapes"]) > [data-scene] {

package/lib/components/theme-tokens.css

@@ -5,6 +5,11 @@
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 290);
+	/* The page ground under ActivityLayout (`bg-ground`): the primary at 7 % over the
+	   page, so the cards (--card, white) stand apart from it. Set here, not on
+	   `body`, so a zone that sets --primary or --background gets its own. A page
+	   keeps the flat look with `--ground: var(--background)`. */
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.017 290);
 	--strix: oklch(45.91% 0.1864 310.75);
@@ -99,6 +104,13 @@
 [data-theme="dark"] {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 291.3);
+	/* Darker than --background so the cards (--card) stand apart: the page 55 %
+	   toward black, the primary at 6 % over it. */
+	--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-foreground: oklch(0.943 0.012 291.3);
 	--popover: oklch(0.19 0.019 289.4);

package/lib/components/ui/layout/app-shell/activity-backdrop.css

@@ -6,8 +6,8 @@
  * Plain CSS, no inline `style`, in `@layer components` like the rest: an app's
  * utilities still win. The layer itself (`data-slot="activity-layout-backdrop"`)
  * is in the content column, positioned by classes in activity-layout.tsx: the
- * frame's padding and gaps take the chrome fill, so the shapes show nowhere
- * else.
+ * frame's padding and gaps show the page ground (--ground), so the shapes show
+ * nowhere else.
  *
  * The chrome is lightly translucent and frosted: about 80% of the background
  * colour (--nxgt-backdrop-chrome-alpha, the app bar) or 87% (--nxgt-backdrop-nav-alpha,
@@ -34,7 +34,7 @@
 		display: none;
 	}
 
-	/* The gutter mask without a backdrop (activity-layout.tsx) has the app bar's
+	/* The gutter mask without a backdrop (activity-layout.tsx) has the page ground's
 	 * translucent fill, which the page's top gutter never had: it fades in over
 	 * the first 8px of scroll, so at scroll top nothing changed. A browser
 	 * without scroll-driven animations shows it from the start. */
@@ -60,19 +60,6 @@
 		background-image: none;
 	}
 
-	/* scroll="document": the frame's chrome fill leaves its top gutter to the
-	 * gutter mask (activity-layout.tsx), a fixed strip with the same fill that
-	 * hides the scrolled page above the sticky app bar. Painting both would
-	 * stack two translucent fills there. */
-	[data-slot="activity-layout"][data-backdrop][data-scroll="document"]
-	[data-slot="activity-layout-frame"] {
-		background:
-			linear-gradient(
-				var(--nxgt-backdrop-fill-chrome),
-				var(--nxgt-backdrop-fill-chrome)
-			)
-			bottom / 100% calc(100% - var(--nxgt-backdrop-top)) no-repeat;
-	}
 	[data-slot="activity-layout"][data-backdrop] > [data-layer] {
 		display: none;
 	}

package/lib/styles.css

@@ -52,6 +52,7 @@
 	--color-paper: --alpha(var(--primary) / 0.5%);
 	--color-strix: var(--strix);
 	--color-background: var(--background);
+	--color-ground: var(--ground);
 	--color-background-paper: --alpha(var(--primary) / 5%);
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);

package/lib/themes/ambre.css

@@ -1,12 +1,13 @@
 /* Theme "ambre", generated.
  * Seeds: primary oklch(0.52 0.13 48), secondary oklch(0.5 0.09 95), tertiary oklch(0.5 0.14 350), neutral hue 65, tint 0.85.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * hue-near-status: The primary's hue 48 is 14° from warning (62): they may read alike. Keep an icon and a word with every status.
  */
 [data-nxgt-theme="ambre"] {
 	--radius: 0.875rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0145 65);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0145 65);
 	--popover: oklch(1 0 0);
@@ -74,6 +75,7 @@
 [data-nxgt-theme="ambre"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="ambre"] [data-nxgt-theme]:not([data-nxgt-theme="ambre"]), [data-nxgt-theme="ambre"] [data-nxgt-theme]:not([data-nxgt-theme="ambre"]) *) {
 	--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-foreground: oklch(0.943 0.0102 65);
 	--popover: oklch(0.19 0.0161 65);

package/lib/themes/ardoise.css

@@ -1,11 +1,12 @@
 /* Theme "ardoise", generated.
  * Seeds: primary oklch(0.45 0.065 252), secondary oklch(0.48 0.05 215), tertiary oklch(0.48 0.1 290), neutral hue 250, tint 0.7.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  */
 [data-nxgt-theme="ardoise"] {
 	--radius: 0.375rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0119 250);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0119 250);
 	--popover: oklch(1 0 0);
@@ -73,6 +74,7 @@
 [data-nxgt-theme="ardoise"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="ardoise"] [data-nxgt-theme]:not([data-nxgt-theme="ardoise"]), [data-nxgt-theme="ardoise"] [data-nxgt-theme]:not([data-nxgt-theme="ardoise"]) *) {
 	--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-foreground: oklch(0.943 0.0084 250);
 	--popover: oklch(0.19 0.0133 250);

package/lib/themes/bleumono.css

@@ -1,6 +1,6 @@
 /* Theme "bleumono", generated.
  * Seeds: primary oklch(0.46 0.13 255), secondary oklch(0.55 0.06 255), tertiary oklch(0.38 0.17 255), neutral hue 255, tint 1.1.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * chroma-lowered: tertiary: chroma 0.170 to 0.125 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 255 is 0° from info (254.624): they may read alike. Keep an icon and a word with every status.
@@ -9,6 +9,7 @@
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0187 255);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0187 255);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="bleumono"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="bleumono"] [data-nxgt-theme]:not([data-nxgt-theme="bleumono"]), [data-nxgt-theme="bleumono"] [data-nxgt-theme]:not([data-nxgt-theme="bleumono"]) *) {
 	--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-foreground: oklch(0.943 0.0132 255);
 	--popover: oklch(0.19 0.0209 255);

package/lib/themes/bluemoon.css

@@ -1,6 +1,6 @@
 /* Theme "bluemoon", generated.
  * Seeds: primary oklch(0.45 0.12 265), secondary oklch(0.55 0.02 250), tertiary oklch(0.62 0.08 290), neutral hue 265, tint 1.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * lightness-moved: tertiary: lightness 0.620 to 0.563 for AA.
  * hue-near-status: The primary's hue 265 is 10° from info (254.624): they may read alike. Keep an icon and a word with every status.
@@ -9,6 +9,7 @@
 	--radius: 0.75rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 265);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.017 265);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="bluemoon"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="bluemoon"] [data-nxgt-theme]:not([data-nxgt-theme="bluemoon"]), [data-nxgt-theme="bluemoon"] [data-nxgt-theme]:not([data-nxgt-theme="bluemoon"]) *) {
 	--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-foreground: oklch(0.943 0.012 265);
 	--popover: oklch(0.19 0.019 265);

package/lib/themes/corail.css

@@ -1,6 +1,6 @@
 /* Theme "corail", generated.
  * Seeds: primary oklch(0.58 0.17 35), secondary oklch(0.52 0.1 70), tertiary oklch(0.5 0.1 200), neutral hue 30, tint 0.8.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * lightness-moved: primary: lightness 0.580 to 0.575 for AA.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 35 is 8° from error (27.325): they may read alike. Keep an icon and a word with every status.
@@ -9,6 +9,7 @@
 	--radius: 1rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 30);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0136 30);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="corail"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="corail"] [data-nxgt-theme]:not([data-nxgt-theme="corail"]), [data-nxgt-theme="corail"] [data-nxgt-theme]:not([data-nxgt-theme="corail"]) *) {
 	--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-foreground: oklch(0.943 0.0096 30);
 	--popover: oklch(0.19 0.0152 30);

package/lib/themes/foret.css

@@ -1,11 +1,12 @@
 /* Theme "foret", generated.
  * Seeds: primary oklch(0.48 0.1 152), secondary oklch(0.5 0.08 118), tertiary oklch(0.5 0.1 55), neutral hue 140, tint 0.8.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  */
 [data-nxgt-theme="foret"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 140);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0136 140);
 	--popover: oklch(1 0 0);
@@ -73,6 +74,7 @@
 [data-nxgt-theme="foret"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="foret"] [data-nxgt-theme]:not([data-nxgt-theme="foret"]), [data-nxgt-theme="foret"] [data-nxgt-theme]:not([data-nxgt-theme="foret"]) *) {
 	--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-foreground: oklch(0.943 0.0096 140);
 	--popover: oklch(0.19 0.0152 140);

package/lib/themes/lavande.css

@@ -1,11 +1,12 @@
 /* Theme "lavande", generated.
  * Seeds: primary oklch(46% 0.1135 276.35), secondary oklch(48% 0.1135 245.65), tertiary oklch(45.91% 0.1864 310.75), neutral hue 292, tint 1.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  */
 [data-nxgt-theme="lavande"] {
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 290);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.017 290);
 	--popover: oklch(1 0 0);
@@ -73,6 +74,7 @@
 [data-nxgt-theme="lavande"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="lavande"] [data-nxgt-theme]:not([data-nxgt-theme="lavande"]), [data-nxgt-theme="lavande"] [data-nxgt-theme]:not([data-nxgt-theme="lavande"]) *) {
 	--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-foreground: oklch(0.943 0.012 291.3);
 	--popover: oklch(0.19 0.019 289.4);

package/lib/themes/menthe.css

@@ -1,6 +1,6 @@
 /* Theme "menthe", generated.
  * Seeds: primary oklch(0.5 0.105 168), secondary oklch(0.5 0.09 205), tertiary oklch(0.52 0.11 120), neutral hue 170, tint 0.8.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.101 (lowered to fit sRGB or AA).
  * chroma-lowered: secondary: chroma 0.090 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 168 is 17° from success (184.704): they may read alike. Keep an icon and a word with every status.
@@ -9,6 +9,7 @@
 	--radius: 1rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 170);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0136 170);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="menthe"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="menthe"] [data-nxgt-theme]:not([data-nxgt-theme="menthe"]), [data-nxgt-theme="menthe"] [data-nxgt-theme]:not([data-nxgt-theme="menthe"]) *) {
 	--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-foreground: oklch(0.943 0.0096 170);
 	--popover: oklch(0.19 0.0152 170);

package/lib/themes/ocean.css

@@ -1,6 +1,6 @@
 /* Theme "ocean", generated.
  * Seeds: primary oklch(0.5 0.12 228), secondary oklch(0.52 0.09 192), tertiary oklch(0.5 0.13 268), neutral hue 230, tint 0.9.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.120 to 0.098 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.505 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).
@@ -9,6 +9,7 @@
 	--radius: 0.75rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0153 230);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0153 230);
 	--popover: oklch(1 0 0);
@@ -76,6 +77,7 @@
 [data-nxgt-theme="ocean"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="ocean"] [data-nxgt-theme]:not([data-nxgt-theme="ocean"]), [data-nxgt-theme="ocean"] [data-nxgt-theme]:not([data-nxgt-theme="ocean"]) *) {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0108 230);
+	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
 	--card: oklch(0.19 0.0171 230);
 	--card-foreground: oklch(0.943 0.0108 230);
 	--popover: oklch(0.19 0.0171 230);

package/lib/themes/pink.css

@@ -1,12 +1,13 @@
 /* Theme "pink", generated.
  * Seeds: primary oklch(0.55 0.2 345), secondary oklch(0.5 0.14 320), tertiary oklch(0.5 0.1 200), neutral hue 345, tint 0.7.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  */
 [data-nxgt-theme="pink"] {
 	--radius: 1.25rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0119 345);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0119 345);
 	--popover: oklch(1 0 0);
@@ -74,6 +75,7 @@
 [data-nxgt-theme="pink"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="pink"] [data-nxgt-theme]:not([data-nxgt-theme="pink"]), [data-nxgt-theme="pink"] [data-nxgt-theme]:not([data-nxgt-theme="pink"]) *) {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0084 345);
+	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
 	--card: oklch(0.19 0.0133 345);
 	--card-foreground: oklch(0.943 0.0084 345);
 	--popover: oklch(0.19 0.0133 345);

package/lib/themes/prune.css

@@ -1,11 +1,12 @@
 /* Theme "prune", generated.
  * Seeds: primary oklch(0.42 0.15 330), secondary oklch(0.5 0.1 355), tertiary oklch(0.55 0.1 85), neutral hue 330, tint 1.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  */
 [data-nxgt-theme="prune"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 330);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.017 330);
 	--popover: oklch(1 0 0);
@@ -73,6 +74,7 @@
 [data-nxgt-theme="prune"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="prune"] [data-nxgt-theme]:not([data-nxgt-theme="prune"]), [data-nxgt-theme="prune"] [data-nxgt-theme]:not([data-nxgt-theme="prune"]) *) {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 330);
+	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
 	--card: oklch(0.19 0.019 330);
 	--card-foreground: oklch(0.943 0.012 330);
 	--popover: oklch(0.19 0.019 330);

package/lib/themes/sable.css

@@ -1,11 +1,12 @@
 /* Theme "sable", generated.
  * Seeds: primary oklch(0.5 0.06 70), secondary oklch(0.5 0.05 45), tertiary oklch(0.5 0.07 150), neutral hue 75, tint 0.5.
- * Contrast: 61 pairs, 0 failing.
+ * Contrast: 65 pairs, 0 failing.
  */
 [data-nxgt-theme="sable"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0085 75);
+	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.227 0.0085 75);
 	--popover: oklch(1 0 0);
@@ -73,6 +74,7 @@
 [data-nxgt-theme="sable"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="sable"] [data-nxgt-theme]:not([data-nxgt-theme="sable"]), [data-nxgt-theme="sable"] [data-nxgt-theme]:not([data-nxgt-theme="sable"]) *) {
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.006 75);
+	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
 	--card: oklch(0.19 0.0095 75);
 	--card-foreground: oklch(0.943 0.006 75);
 	--popover: oklch(0.19 0.0095 75);