@nxgt/material 3.5.0 → 3.6.0

package/docs/components/data-display.md

@@ -60,7 +60,7 @@ Parts: `Avatar` (the composed one), `AvatarBase`, `AvatarImage`,
 | `shape` | `ShapeName` | — | clips the photo to one of the expressive shapes instead of a circle; the fallback is framed by it when there is no `src` or it fails to load. `alt` names it. Unset: the round avatar, unchanged |
 | `tone` | the eight named tones, or a tone of your own declared in `AppTones` | neutral | the fallback fills with the tone's container, draws its initials or icon in the tone's text colour (`--nxgt-tone-text`, also when there is no `tone`) and a hairline in it (3:1 against the page or card). A loaded photo is not tinted |
 
-The hairline's strength is `--avatar-ring-share`, the share of the tone's text colour mixed into the surface (default `65%`, from `--nxgt-tone-ring-share`; 3:1 or more at that value). Override it in your CSS:
+The hairline's strength is `--avatar-ring-share`, the share of the tone's text colour mixed into the surface (default `68%`, from `--nxgt-tone-ring-share`; 3:1 or more at that value). Override it in your CSS:
 
 ```css
 :root { --avatar-ring-share: 80%; }
@@ -435,7 +435,7 @@ import { StatCard } from '@nxgt/material/components';
 
 Parts: the root carries `data-slot="stat-card"`, `data-variant` and, when a tone applies, `data-tone` (the tone, or `neutral` on a `tonal` or `filled` card without one); the icon wrapper carries `data-slot="stat-card-icon"`. The types `StatCardProps`, `StatCardVariant` and `StatCardValueSize` are exported.
 
-In `filled`, the delta and its trend arrow take the on-colour too (the arrow and the sign still say up or down). The outline's share is `--stat-card-ring-share` (`65%`, or `--nxgt-tone-ring-share` for every ring); it draws the tonal card's border, the filled card's edge in a calm zone and the hairline round the icon chip. Known limit: the dark theme's primary `filled` card has an edge of about 2.4:1 on a `Card` and 2.7:1 on the page (its text is 7:1); a `tonal` card avoids it. See [App tones](../guides/theming.md#app-tones-on-shape-fab-avatar-statcard-and-the-metric-cards).
+In `filled`, the delta and its trend arrow take the on-colour too (the arrow and the sign still say up or down). The outline's share is `--stat-card-ring-share` (`68%`, or `--nxgt-tone-ring-share` for every ring); it draws the tonal card's border, the filled card's edge in a calm zone and the hairline round the icon chip. Known limit: the dark theme's primary `filled` card has an edge of about 2.3:1 on a `Card` and 2.5:1 on the page (its text is 7:1); a `tonal` card avoids it. See [App tones](../guides/theming.md#app-tones-on-shape-fab-avatar-statcard-and-the-metric-cards).
 
 **Storybook:** `Data display/StatCard`, `Data display/StatCard/Tones` · **Vue:** `StatCard`
 

package/docs/guides/theming.md

@@ -90,6 +90,48 @@ 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.
 
+## The neutral palette
+
+The neutrals of both themes are softly tinted toward violet (hue 290, low
+chroma), to sit with the primary indigo instead of fighting it. The values:
+
+| Token | Light | Dark |
+| --- | --- | --- |
+| `--background` | `oklch(0.973 0.008 293.9)` | `oklch(0.192 0.016 290.5)` |
+| `--card`, `--popover` / `--sidebar` | white / `oklch(0.985 0.006 293.9)` | `oklch(0.232 0.019 289.4)` |
+| `--foreground` | `oklch(0.227 0.017 290)` | `oklch(0.943 0.012 291.3)` |
+| `--muted`, `--accent` | `oklch(0.955 0.012 292)`, `oklch(0.91 0.016 293)` | `oklch(0.27 0.022 290)` |
+| `--muted-foreground` | `oklch(0.478 0.032 292)` | `oklch(0.725 0.03 292.2)` |
+| `--border`, `--input` | `oklch(0.912 0.016 293.7)` | `oklch(0.301 0.025 291.4)`, `oklch(0.34 0.027 291.4)` |
+
+Earlier versions used a blue-slate neutral (hue 247 to 266; the dark
+background `oklch(0.14 0.036 258.53)` was a deep navy). To bring it back,
+redefine the tokens after the stylesheet import, under the same selectors;
+the main ones are below and the changelog of `@nxgt/material` 3.6.0 lists
+every old value (accent, ring, sidebar, tooltip, secondary and the others):
+
+```css
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.14 0.036 258.53);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.52 0.046 257.417);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+}
+.dark,
+[data-theme="dark"] {
+  --background: oklch(0.14 0.036 258.53);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --popover: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.66 0.046 257.417);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+}
+```
+
 ## Motion and shape tokens
 
 `styles.css` also carries Material 3 expressive motion and corner tokens, as
@@ -227,12 +269,12 @@ any tone, yours included:
 | `--nxgt-tone-on` | `text-tone-on` | what is drawn on it |
 | `--nxgt-tone-container` | `bg-tone-container` | a tint of it over the surface it sits on |
 | `--nxgt-tone-text` | `text-tone-text` | it as text on the page or its container |
-| `--nxgt-tone-ring-share` | — | the share of the text colour in the ring below (`65%`, set on `:root`) |
+| `--nxgt-tone-ring-share` | — | the share of the text colour in the ring below (`68%`, set on `:root`) |
 | `--nxgt-tone-ring` | `border-(--nxgt-tone-ring)` | a hairline: its text colour mixed into the surface at that share, 3:1 against it |
 
 The ring is drawn by: the `Avatar` fallback (the inset hairline, or the stroke of a shaped one); the tonal `StatCard` outline, the edges of its filled card and the ring round its icon chip; the outline and rank badge of a toned metric card; and, in a [calm zone](#calm-zone), the edge of a tonal `Shape`, an `Avatar`, a `StatCard` and a rank badge once their container steps back.
 
-Which knob changes which ring: `--nxgt-tone-ring-share` is the shared one, and being inherited it works on `:root` (`:root { --nxgt-tone-ring-share: 80%; }` makes every ring stronger) or on a wrapper (only the rings inside it). A component with a knob of its own, `--avatar-ring-share` or `--stat-card-ring-share`, takes it over for that component only: it applies to the component's own element, it is not inherited by a tone nested inside it, and `--stat-card-ring-share` draws every edge of the `StatCard`. Keep a ring at 3:1 or more against its surface (65 % does in light and dark) when you change the share.
+Which knob changes which ring: `--nxgt-tone-ring-share` is the shared one, and being inherited it works on `:root` (`:root { --nxgt-tone-ring-share: 80%; }` makes every ring stronger) or on a wrapper (only the rings inside it). A component with a knob of its own, `--avatar-ring-share` or `--stat-card-ring-share`, takes it over for that component only: it applies to the component's own element, it is not inherited by a tone nested inside it, and `--stat-card-ring-share` draws every edge of the `StatCard`. Keep a ring at 3:1 or more against its surface (68 % does in light and dark) when you change the share.
 
 ```tsx
 <span data-tone="success" className="bg-tone-container text-tone-text">
@@ -742,22 +784,22 @@ the rest yourself. Without the class the anchor keeps the prose style.
 ## Contrast and reduced motion
 
 **Contrast.** The shipped light palette keeps the text of every filled status
-colour at 4.5:1 or more (WCAG 1.4.3): `--secondary` 5.7:1, `--success` 5.6:1,
-`--info` 5.8:1 and `--warning` 5.5:1 against their `-foreground`, and
+colour at 4.5:1 or more (WCAG 1.4.3): `--secondary` 6.2:1, `--success` 6.1:1,
+`--info` 6.3:1 and `--warning` 5.5:1 against their `-foreground`, and
 `--secondary` as text (a `tonal`, `outlined` or `link` `Button`) 6.0:1 on
 `--background`, 4.8:1 on its own 15 % `tonal` tint.
 
 The dark theme keeps brighter values, read as text on the dark surfaces: the
-dark `--tertiary` (`oklch(0.7 0.15 310.75)`) is 7.0:1 on `--background` and
-6.3:1 on `--card`, with a dark `--tertiary-foreground` that keeps 7.0:1 on
+dark `--tertiary` (`oklch(0.7 0.15 310.75)`) is 6.5:1 on `--background` and
+5.9:1 on `--card`, with a dark `--tertiary-foreground` that keeps 6.5:1 on
 a filled tertiary surface (light: 7.6:1 under near-white). The dark
-`--secondary` (`oklch(0.66 0.1135 245.65)`) is 6.5:1 on `--background`
-and 5.8:1 on `--card` (a `tonal` secondary `Button` 5.4:1 and 4.6:1). Under
+`--secondary` (`oklch(0.675 0.1135 245.65)`) is 6.3:1 on `--background`
+and 5.8:1 on `--card` (a `tonal` secondary `Button` 5.1:1 and 4.6:1). Under
 near-white text those brights are too light, so every filled surface built on
 them is tinted in the dark theme: a filled `secondary` `Button`, `IconButton`
-or `Badge` at 70 % (5.2:1 on `--background`, 4.9:1 on `--card`), a filled
-`success`, `info` or `warning` one at 60 % (7.3:1, 5.7:1 and 6.0:1 on
-`--background`; 6.7:1, 5.3:1 and 5.6:1 on `--card`; the `warning` `Button` 6.5:1). Their hover, focus and
+or `Badge` at 70 % (4.9 to 5.2:1 on `--background`, 4.7 to 4.9:1 on `--card`), a filled
+`success`, `info` or `warning` one at 60 % (7.1:1, 5.6:1 and 5.8:1 on
+`--background`; 6.8:1, 5.3:1 and 5.5:1 on `--card`; the `warning` `Button` 5.9:1). Their hover, focus and
 pressed states are tinted further down, so they only gain contrast.
 
 In the light theme the filled `primary`, `secondary`, `success`, `info`,
@@ -773,11 +815,11 @@ The `tonal`, `outlined` and `link` variants of `Button` and `IconButton` draw
 their text and icon in one tone per colour, read on `--background`, on
 `--card` and on the variant's own tint (15 % at most, at rest or focused). In
 the light theme `primary`, `secondary`, `info` and `success` use the token
-itself (5.8, 4.8, 4.9 and 4.7:1 at their lowest) and `warning` and `error` the
-token mixed with 15 % black (6.4 and 5.4:1). In the dark theme `primary` is
-mixed with 60 % white, the `--primary-text` token (8.1:1 on `--card`: the token itself is a dark indigo,
-2.2:1), `success` and `warning` with 15 % white (5.0 and 6.3:1), `error` with
-30 % white (5.9:1), and `secondary` and `info` use the token (4.6 and 5.3:1).
+itself (5.4, 4.8, 4.9 and 4.7:1 at their lowest) and `warning` and `error` the
+token mixed with 15 % black (6.0 and 5.0:1). In the dark theme `primary` is
+mixed with 60 % white, the `--primary-text` token (7.7:1 at its lowest: the token itself is a dark indigo,
+2.2:1), `success` and `warning` with 15 % white (4.8 and 5.8:1), `error` with
+30 % white (5.5:1), and `secondary` and `info` use the token (4.6 and 5.0:1).
 The tones are mixed from the tokens (`color-mix(in oklab, var(--color-error)
 85%, black)`), so an override of a token moves its tone with it; a text colour
 of your own on one of those buttons (`className="text-primary-text"`) replaces the tone
@@ -796,32 +838,32 @@ the filled surface's near-white text below 4.5:1 (`0.62` gives 3.85:1).
 the light theme, 70 in the dark one), so a warning `Alert`, `Banner`, `Badge`
 or toast does not read as a failure. Light `oklch(0.52 0.13 62)` is 5.5:1
 under its near-white `-foreground`; dark `oklch(0.7 0.15 70)` reads as text at
-7.3:1 on `--background` and 6.5:1 on `--card` (6.6 and 5.8:1 on its 10 % tint). An app that overrides `--warning` keeps its own
+6.7:1 on `--background` and 6.1:1 on `--card` (5.9 and 5.3:1 on its 10 % tint). An app that overrides `--warning` keeps its own
 value; one that keeps the shipped value sees its `bg-warning` and
 `text-warning` surfaces change hue, and re-checks its custom pairs.
 
 **A selected `DataTable` row** (`TableRow`, `data-state="selected"`) is a 15 %
 primary tint with `foreground` text, a bar on the inline-start edge of its
 first cell (`before:`, primary in the light theme, primary mixed with 60 %
-white in the dark one: 5.9:1 in light and 8.2:1 or more in dark against the
-row), and the checkbox, drawn in the same dark colour (8.2:1 or more). The
-tint is too light to be told from its neighbour alone (1.2:1 in light, 1.06 to
+white in the dark one: 5.4:1 in light and 7.7:1 or more in dark against the
+row), and the checkbox, drawn in the same dark colour (7.7:1 or more). The
+tint is too light to be told from its neighbour alone (1.25:1 in light, 1.10 to
 1.11:1 in dark), which is what keeps the text at 4.5:1 or more on a page and on
-a `Card`: 15.9:1 in light, and in dark 17.5:1 on a page, 17.1:1 in a `DataTable`
-on a `Card` and 15.4:1 for a bare `TableRow` on a `Card`. Links and
-`text-muted-foreground` texts (drawn as `foreground` at 70 %) are 7.0:1 in
-light and 8.15:1 in dark for a bare row on a `Card`. A `text-error-text` text
+a `Card`: 12.6:1 in light, and in dark 14.1:1 on a page, 12.9:1 in a `DataTable`
+on a `Card` and for a bare `TableRow` on a `Card`. Links and
+`text-muted-foreground` texts (drawn as `foreground` at 70 %) are 5.6:1 in
+light and 7.0:1 in dark for a bare row on a `Card`. A `text-error-text` text
 keeps its colour. Do not
 put `text-primary-foreground` in a cell for a selected row: it is near-white
 on that tint.
 
 **Error text has a token of its own**, `--error-text` (`text-error-text`), so
 the fill can stay dark while the text is light enough to read. The light value
-is `color-mix(in oklab, var(--error) 94%, black)` (5.7:1 on `--background`
-and `--card`, 4.8:1 on the `bg-error/10` tint of a focused menu item, where
+is `color-mix(in oklab, var(--error) 92%, black)` (5.6:1 on `--background`,
+6.0:1 on `--card`, 5.0:1 on the `bg-error/10` tint of a focused menu item, where
 `--error` gives 5.0 and 4.2:1); the dark one is
-`color-mix(in oklab, var(--error) 80%, white)`, 5.9:1 on `--background` and
-5.3:1 on `--card`, where `--error` itself gives 4.2 and 3.8:1. Field messages,
+`color-mix(in oklab, var(--error) 80%, white)`, 5.4:1 on `--background` and
+5.0:1 on `--card`, where `--error` itself gives 3.9 and 3.5:1. Field messages,
 `HelperText` in its error state, form, dialog and upload errors, a textarea's
 counter over its limit, the error lines of `Terminal`, a
 `variant="error"` menu item and the falling values of the metric cards use it.
@@ -846,7 +888,8 @@ the override on the root.
 **Primary text has a token of its own**, `--primary-text` (`text-primary-text`),
 for the same reason: the brand colour is a dark fill (it keeps near-white text
 readable on a button) and reads at only about 2:1 as text on the dark surfaces.
-The light value is `var(--primary)`; the dark one is
+The light value is `color-mix(in oklab, var(--primary) 96%, black)` (primary
+4 % toward black, 7.3:1 on the violet page); the dark one is
 `color-mix(in oklab, var(--primary) 40%, white)` (primary mixed 60 % with
 white, the recipe of the tonal `Button` labels). `Typography tone="primary"`,
 the `Alert` primary icon, links, selected labels and the other primary text of
@@ -871,33 +914,33 @@ at rest, hovered, focused and pressed, the tracks and the tabs;
 tokens after an override.
 
 **Tabs.** An `underline` tab's active label is `--primary` in the light
-theme (7.3:1 on `--background` and `--card`, 6.7:1 on `--muted`) and
-`--primary` mixed with 60 % white in the dark one (10.0:1, 9.0:1 and 7.4:1);
+theme (6.8:1 on `--background`, 7.3:1 on `--card`, 6.4:1 on `--muted`) and
+`--primary` mixed with 60 % white in the dark one (9.3:1, 8.5:1 and 7.6:1);
 its bar and every tab's focus outline are `--primary` in the light theme and
-`--track-fill` in the dark one (at least 6.7:1 and 9.0:1 on those surfaces).
+`--track-fill` in the dark one (at least 6.7:1 and 9.4:1 on those surfaces).
 An inactive label is `--muted-foreground`, and turns to `--foreground` when
 hovered. A `segmented` tab's active label is `--foreground` on the raised
-surface (19.9:1 light, 17.0:1 dark); that surface is only 1.1:1 to 1.2:1 on
-the track, so it has a `--muted-foreground` border (5.0:1 light, 4.7:1 dark
+surface (17.1:1 light, 14.2:1 dark); that surface is only 1.1:1 to 1.2:1 on
+the track, so it has a `--muted-foreground` border (5.8:1 light, 6.2:1 dark
 on the track), and the label also changes colour and weight. Storybook's
 `Guides/Theming/Contrast` story `Tabs` measures each label at rest, hovered
 and focused, the outline, the bar and the border, on the three surfaces, in
 both themes.
 
-`--muted-foreground` is 5.5:1 on `--background` and `--card`, 5.1:1 on the
-"paper" tint (`bg-background-paper`, 5 % primary) and 5.0:1 on `--muted` in
-the light theme; in the dark theme it is 6.4:1 on `--background`, 5.7:1 on
-`--card`, 6.3:1 on the paper tint and 4.7:1 on `--muted`. The dark `--muted`
-is a dark surface (`oklch(0.279 0.041 260.031)`, it was the light value, a
-near-white block on a dark page) and `--foreground` on it reaches 14.0:1.
+`--muted-foreground` is 6.2:1 on `--background`, 6.7:1 on `--card`, 5.7:1 on the
+"paper" tint (`bg-background-paper`, 5 % primary) and 5.8:1 on `--muted` in
+the light theme; in the dark theme it is 7.5:1 on `--background`, 6.9:1 on
+`--card`, 7.3:1 on the paper tint and 6.2:1 on `--muted`. The dark `--muted`
+is a dark surface (`oklch(0.27 0.022 290)`, it was the light value, a
+near-white block on a dark page) and `--foreground` on it reaches 12.8:1.
 
 **Tracks.** The empty part of a `Slider`, of the password strength meter and
 the `Drawer` handle use `--track` (`bg-track`), and the `Slider`'s range and
 thumb border `--track-fill` (`bg-track-fill`, `border-track-fill`). In the
-dark theme the track reaches 3.6:1 on `--background` and 3.2:1 on `--card`
+dark theme the track reaches 3.5:1 on `--background` and 3.2:1 on `--card`
 (WCAG 1.4.11; `bg-muted`, a dark surface now, gave 1.4:1 and 1.2:1), and the
-fill 3.4:1 on the track. The light theme keeps a pale track (`--track` is the
-light `--muted`) and `--track-fill` is `--primary`: the thumb, 7.3:1 on the
+fill 3.3:1 on the track. The light theme keeps a pale track (`--track` is the
+light `--muted`) and `--track-fill` is `--primary`: the thumb, 6.8:1 on the
 page, shows the value. A track, bar, handle or divider of your own drawn with
 `bg-muted` is near invisible in the dark theme now that `--muted` is a dark
 surface: draw it with `bg-track`.

package/docs/troubleshooting.md

@@ -27,6 +27,7 @@ words in your error.
 
 - [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)
 - [Math renders in the system fonts](#math-renders-in-the-system-fonts)
 - [`<Icon>` renders nothing](#icon-renders-nothing)
 - [An accessibility audit reports low contrast on a badge, a button, a toast or a menu entry](#an-accessibility-audit-reports-low-contrast-on-a-badge-a-button-a-toast-or-a-menu-entry)
@@ -740,6 +741,34 @@ public/assets/icons/sprites/sharp-solid.svg ← <Icon name="atom" family="sharp"
 
 Serve one sheet per style you use, from your own Font Awesome Pro kit.
 
+### The light and dark neutrals turned violet after upgrading to 3.6
+
+**When:** after `@nxgt/material` 3.6, the page, cards, borders and muted text
+are softly violet-tinted (the dark background was a deep navy), and a
+screenshot test, or a brand that sat on the old slate, no longer matches.
+**Why:** the neutral tokens moved to hue 290 with low chroma in both themes
+(the palette is listed in the [theming guide](guides/theming.md#the-neutral-palette)).
+Primary and the status colours did not change, except that the light
+`--secondary`, `--success` and `--info` and the dark `--secondary` moved
+0.02 in lightness, so their tonal tints keep 4.5:1 on the new page colour.
+**Fix:** update the screenshots, or redefine the old neutrals after the
+stylesheet import, under `:root` and `.dark, [data-theme="dark"]`:
+
+```css
+.dark,
+[data-theme="dark"] {
+  --background: oklch(0.14 0.036 258.53);
+  --card: oklch(0.208 0.042 265.755);
+  --popover: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.279 0.041 260.031);
+  --border: oklch(1 0 0 / 10%);
+}
+```
+
+The [theming guide](guides/theming.md#the-neutral-palette) has the main old
+values for both themes (the `:root` block too); the changelog of 3.6.0 lists
+every one.
+
 ### An accessibility audit reports low contrast on a badge, a button, a toast or a menu entry
 
 **When:** axe (or Lighthouse) reports `color-contrast` on a `Badge` with
@@ -795,7 +824,7 @@ yours still fail, you override them.
 In the dark theme, a filled `secondary` `Button` gave its near-white text
 4.3:1, a `tonal` secondary one 3.9:1 (3.4:1 on `--card`), and a filled
 `success`, `info` or `warning` one 3.5:1, 2.5:1 and 3.4:1. The dark
-`--secondary` is brighter (`oklch(0.66 ...)`, 6.5:1 as text on
+`--secondary` is brighter (`oklch(0.675 ...)`, 6.3:1 as text on
 `--background`), and the filled `secondary`, `success`, `info` and `warning`
 `Button`s and `IconButton`s are filled in the dark theme with an opaque mix
 toward `--background` (about 70 %), so their text keeps 4.5:1 over any backdrop.
@@ -872,12 +901,12 @@ subtitle colour of your own on a selected `ListTile` must reach 4.5:1 on
 ### An accessibility audit reports low contrast on error text in the dark theme
 
 **When:** an error message, a validation hint or a red value of your own, in
-the dark theme, fails 4.5:1 (about 4.2:1 on the page, 3.8:1 on a card); the
+the dark theme, fails 4.5:1 (about 3.9:1 on the page, 3.5:1 on a card); the
 catalogue's own field messages pass.
 **Why:** it is drawn with `text-error`, the fill colour. The dark `--error` is
 kept dark enough for near-white text on a filled error surface, which makes it
 too dark to read as text on the dark surfaces. Error text has its own token,
-`--error-text`, lightened in the dark theme (5.9:1 on `--background`, 5.3:1 on
+`--error-text`, lightened in the dark theme (5.4:1 on `--background`, 5.0:1 on
 `--card`).
 **Fix:** draw text with `text-error-text`; keep `text-error` for fills,
 borders and icons that stand alone. On a `Button` or `IconButton` drop the

package/lib/components/theme-tokens.css

@@ -3,52 +3,57 @@
  * after importing the stylesheet, under the same selectors. */
 :root {
 	--radius: 0.625rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.14 0.036 258.53);
+	--background: oklch(0.973 0.008 293.9);
+	--foreground: oklch(0.227 0.017 290);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.129 0.042 264.695);
+	--card-foreground: oklch(0.227 0.017 290);
 	--strix: oklch(45.91% 0.1864 310.75);
 	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.129 0.042 264.695);
+	--popover-foreground: oklch(0.227 0.017 290);
 	--primary: oklch(46% 0.1135 276.35);
 	--primary-foreground: oklch(0.984 0.003 247.858);
 	/* Primary drawn as text or an icon on a normal surface (`text-primary-text`):
-	   the colour itself in light; the dark theme lifts it. */
-	--primary-text: var(--primary);
-	--secondary: oklch(50% 0.1135 245.65);
+	   the colour mixed 4 % toward black in light, which keeps it 7.3:1 or more on
+	   the violet page (7.9:1 on a Card; the colour itself gives 6.8:1 on the
+	   page); the dark theme lifts it. */
+	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	/* --secondary, --success and --info are 0.02 darker than before: on the
+	   violet page tint (--background, 97.3 %) their own 15 % tonal tint gave the
+	   text 4.3 to 4.5:1; now 4.7:1 or more on the page and on a Card. */
+	--secondary: oklch(48% 0.1135 245.65);
 	--secondary-foreground: oklch(0.984 0.003 247.858);
-	--muted: oklch(0.968 0.007 247.896);
-	--muted-foreground: oklch(0.52 0.046 257.417);
+	--muted: oklch(0.955 0.012 292);
+	--muted-foreground: oklch(0.478 0.032 292);
 	/* Non-text (WCAG 1.4.11): the empty part of a slider, a meter, a drawer
 	   handle. Light keeps the pale track; the value reads from the thumb. */
-	--track: oklch(0.968 0.007 247.896);
+	--track: oklch(0.955 0.012 292);
 	--track-fill: var(--primary);
-	--tooltip: oklch(0.446 0.043 257.281);
+	--tooltip: oklch(0.446 0.043 291);
 	--tooltip-foreground: oklch(1 0 0);
-	--accent: oklch(0.9182 0.0077 228.86);
-	--accent-foreground: oklch(0.216 0.006 56.043);
+	--accent: oklch(0.91 0.016 293);
+	--accent-foreground: oklch(0.227 0.017 290);
 	/* Darker than the dark theme's: near-white text on a filled error surface
 	   reaches 4.8:1 (4.6 at 0.577), and the colour as text 5.0:1 on white. */
 	--error: oklch(0.56 0.245 27.325);
 	--error-foreground: oklch(0.984 0.003 247.858);
 	/* Error drawn as text (a field's message, HelperText, a focused error menu
-	   item): 5.7:1 on white and 4.8:1 on the menu's bg-error/10 tint, where
-	   --error itself gives 5.0 and 4.2:1. */
-	--error-text: color-mix(in oklab, var(--error) 94%, black);
+	   item): 6.0:1 on white and 5.0:1 on the menu's bg-error/10 tint (4.7:1 on that
+	   tint over the violet page), where --error itself gives 5.0 and 4.2:1. */
+	--error-text: color-mix(in oklab, var(--error) 92%, black);
 	/* The foregrounds are near-white: these three are dark enough for WCAG AA
 	   text (4.5:1) on them, and for the same colours used as text on white. */
-	--success: oklch(0.48 0.118 184.704);
+	--success: oklch(0.46 0.118 184.704);
 	--success-foreground: oklch(0.984 0.003 247.858);
-	--info: oklch(0.5 0.165 254.624);
+	--info: oklch(0.48 0.165 254.624);
 	--info-foreground: oklch(0.984 0.003 247.858);
 	/* Amber, a hue apart from --error (27): a warning must not read as a
 	   failure. 5.7:1 as text on white, 5.0:1 on its 10% tint, 5.5:1 under near-white text. */
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 247.858);
 	--destructive: var(--error);
-	--border: oklch(0.929 0.013 255.508);
-	--input: oklch(0.929 0.013 255.508);
-	--ring: oklch(0.704 0.04 256.788);
+	--border: oklch(0.912 0.016 293.7);
+	--input: oklch(0.912 0.016 293.7);
+	--ring: oklch(0.704 0.04 291);
 	--chart-1: oklch(0.646 0.222 41.116);
 	--chart-2: oklch(0.6 0.118 184.704);
 	--chart-3: oklch(0.398 0.07 227.392);
@@ -74,63 +79,65 @@
 	--chart-soft-4-ink: oklch(0.52 0.16 310);
 	--chart-soft-5: oklch(0.9 0.05 25);
 	--chart-soft-5-ink: oklch(0.56 0.15 25);
-	--sidebar: oklch(0.984 0.003 247.858);
-	--sidebar-foreground: oklch(0.129 0.042 264.695);
-	--sidebar-primary: oklch(0.208 0.042 265.755);
+	--sidebar: oklch(0.985 0.006 293.9);
+	--sidebar-foreground: oklch(0.227 0.017 290);
+	--sidebar-primary: oklch(0.227 0.017 290);
 	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-accent: oklch(0.968 0.007 247.896);
-	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-	--sidebar-border: oklch(0.929 0.013 255.508);
-	--sidebar-ring: oklch(0.704 0.04 256.788);
+	--sidebar-accent: oklch(0.955 0.012 292);
+	--sidebar-accent-foreground: oklch(0.227 0.017 290);
+	--sidebar-border: oklch(0.912 0.016 293.7);
+	--sidebar-ring: oklch(0.704 0.04 291);
 }
 
 .dark,
 [data-theme="dark"] {
-	--background: oklch(0.14 0.036 258.53);
-	--foreground: oklch(0.984 0.003 247.858);
-	--card: oklch(0.208 0.042 265.755);
-	--card-foreground: oklch(0.984 0.003 247.858);
-	--popover: oklch(0.208 0.042 265.755);
-	--popover-foreground: oklch(0.984 0.003 247.858);
+	--background: oklch(0.192 0.016 290.5);
+	--foreground: oklch(0.943 0.012 291.3);
+	--card: oklch(0.232 0.019 289.4);
+	--card-foreground: oklch(0.943 0.012 291.3);
+	--popover: oklch(0.232 0.019 289.4);
+	--popover-foreground: oklch(0.943 0.012 291.3);
 	--primary: oklch(46% 0.1135 276.35);
-	--primary-foreground: oklch(0.984 0.003 247.858);
+	--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);
-	/* Brighter than the light one: it is read as text on the dark surfaces (6.5:1
-	   on --background, 5.8:1 on --card); a filled secondary surface mixes it toward --background
-	   (the opaque 70 % mix) to keep 5.2:1 under its near-white text. */
-	--secondary: oklch(0.66 0.1135 245.65);
-	--secondary-foreground: oklch(0.984 0.003 247.858);
-	--muted: oklch(0.279 0.041 260.031);
-	--muted-foreground: oklch(0.66 0.046 257.417);
-	/* 3.6:1 on --background, 3.2:1 on --card; the fill 3.4:1 on the track. */
-	--track: oklch(0.52 0.03 257.417);
+	/* Brighter than the light one: it is read as text on the dark surfaces (6.3:1
+	   on --background, 5.8:1 on --card; 4.6: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.2: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.27 0.022 290);
+	--muted-foreground: oklch(0.725 0.03 292.2);
+	/* 3.5:1 on --background, 3.2: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.929 0.013 255.508);
-	--tooltip-foreground: oklch(0.446 0.043 257.281);
-	--accent: oklch(0.268 0.007 34.298);
-	--accent-foreground: oklch(0.985 0.001 106.423);
+	--tooltip: oklch(0.925 0.012 291.3);
+	--tooltip-foreground: oklch(0.446 0.043 291);
+	--accent: oklch(0.27 0.022 290);
+	--accent-foreground: oklch(0.943 0.012 291.3);
 	--error: oklch(0.577 0.245 27.325);
-	--error-foreground: oklch(0.984 0.003 247.858);
+	--error-foreground: oklch(0.995 0.002 291.3);
 	/* --error stays the fill under near-white text; as text it would give only
-	   4.2:1 on --background and 3.8:1 on --card. Lightened, 5.9 and 5.3:1. */
+	   3.9:1 on --background and 3.5:1 on --card. Lightened, 5.4 and 5.0:1. */
 	--error-text: color-mix(in oklab, var(--error) 80%, white);
 	/* The light brights: on the dark surfaces they read as text and as the
-	   badge's 60% tint, which keeps its contrast (7.3, 5.7 and 7.5:1). */
+	   badge's 60% tint, which keeps its contrast under near-white text (success
+	   7.1:1, info 5.6:1, error 9.1:1). */
 	--success: oklch(0.6 0.118 184.704);
-	--success-foreground: oklch(0.984 0.003 247.858);
+	--success-foreground: oklch(0.995 0.002 291.3);
 	--info: oklch(0.707 0.165 254.624);
-	--info-foreground: oklch(0.984 0.003 247.858);
-	/* Amber too, as text: 7.3:1 on --background and 6.5:1 on --card, 6.6:1 and
-	   5.8:1 on its 10% tint; the badge's 60% fill under near-white text is
-	   6.0:1 on a page and 5.6:1 on a Card. */
+	--info-foreground: oklch(0.995 0.002 291.3);
+	/* Amber too, as text: 6.7:1 on --background and 6.1:1 on --card, 5.9:1 and
+	   5.3:1 on its 10% tint; the badge's 60% fill under near-white text is
+	   5.8:1 on a page and 5.5:1 on a Card. */
 	--warning: oklch(0.7 0.15 70);
-	--warning-foreground: oklch(0.984 0.003 247.858);
+	--warning-foreground: oklch(0.995 0.002 291.3);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.551 0.027 264.364);
+	--border: oklch(0.301 0.025 291.4);
+	--input: oklch(0.34 0.027 291.4);
+	--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);
 	--chart-3: oklch(0.769 0.188 70.08);
@@ -138,7 +145,7 @@
 	--chart-5: oklch(0.645 0.246 16.439);
 	/* The soft palette on the dark card: mid-tone fills (L 0.49, the sand a
 	   warmer 0.5 0.1 75), light inks of the same hues. Ink on the card:
-	   1 8.90:1, 2 10.01, 3 10.80, 4 8.48, 5 8.52; at the 0.85 dim 6.44:1 or
+	   1 8.44:1, 2 9.46, 3 10.17, 4 8.03, 5 8.06; at the 0.85 dim 6.17:1 or
 	   more. Ink on its own fill (the outline): 1 3.13:1, 2 3.40, 3 3.69,
 	   4 3.11, 5 3.13. Every pair at least 54 degrees and ΔEOK 0.109 apart. */
 	--chart-soft-1: oklch(0.49 0.08 255);
@@ -151,14 +158,14 @@
 	--chart-soft-4-ink: oklch(0.78 0.13 310);
 	--chart-soft-5: oklch(0.49 0.09 25);
 	--chart-soft-5-ink: oklch(0.78 0.11 25);
-	--sidebar: oklch(0.208 0.042 265.755);
-	--sidebar-foreground: oklch(0.984 0.003 247.858);
+	--sidebar: oklch(0.232 0.019 289.4);
+	--sidebar-foreground: oklch(0.943 0.012 291.3);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-accent: oklch(0.279 0.041 260.031);
-	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.551 0.027 264.364);
+	--sidebar-primary-foreground: oklch(0.995 0.002 291.3);
+	--sidebar-accent: oklch(0.27 0.022 290);
+	--sidebar-accent-foreground: oklch(0.943 0.012 291.3);
+	--sidebar-border: oklch(0.301 0.025 291.4);
+	--sidebar-ring: oklch(0.551 0.03 290);
 }
 
 /* The tertiary colour (the strix violet), for accents and backgrounds beside
@@ -168,10 +175,10 @@
 	--tertiary-foreground: oklch(0.984 0.003 247.858);
 }
 
-/* Dark: lifted like --secondary, as it is read as text (7.0:1 on --background,
-   6.3:1 on --card); its foreground is the dark surface, 7.0:1 on the fill. */
+/* Dark: lifted like --secondary, as it is read as text (6.5:1 on --background,
+   5.9:1 on --card); its foreground is the dark surface, 6.5:1 on the fill. */
 .dark,
 [data-theme="dark"] {
 	--tertiary: oklch(0.7 0.15 310.75);
-	--tertiary-foreground: oklch(0.14 0.036 258.53);
+	--tertiary-foreground: oklch(0.192 0.016 290.5);
 }

package/lib/components/tones/tokens.css

@@ -23,14 +23,14 @@
 	 * one, which the zone never touches. */
 	--nxgt-tint-status: 20%;
 	/* The share of the tone's text colour in a hairline (--nxgt-tone-ring): 3:1
-	 * or more against the surface in light and dark at 65 %. */
-	--nxgt-tone-ring-share: 65%;
+	 * or more against the surface in light and dark at 68 %. */
+	--nxgt-tone-ring-share: 68%;
 
 	/* Neutral, the grey tone: the muted foreground, on the page colour. */
 	--neutral: var(--muted-foreground);
 	--neutral-foreground: var(--background);
 
-	/* Text: the tone darkened (80 % tone, 20 % black), 6.6:1 or more on
+	/* Text: the tone darkened (80 % tone, 20 % black), 6.1:1 or more on
 	 * --background and --card and on its own container (over either). Primary and error keep
 	 * the tokens theme-tokens.css defines. */
 	--secondary-text: color-mix(in oklab, var(--secondary) 80%, black);
@@ -88,8 +88,8 @@
 	--neutral-text: color-mix(in oklab, var(--neutral) 75%, white);
 
 	/* On the fill: the dark theme lifts these tones, and near-white on them
-	 * would give 2.5 to 3.5:1. The page colour is 5.4:1 or more on each.
-	 * Primary, tertiary and error keep their foreground (7.0, 7.0, 4.6:1). */
+	 * would give 2.5 to 3.5:1. The page colour is 5.0:1 or more on each.
+	 * Primary, tertiary and error keep their foreground (7.2, 6.5, 4.7:1). */
 	--primary-on: var(--primary-foreground);
 	--tertiary-on: var(--tertiary-foreground);
 	--error-on: var(--error-foreground);

package/lib/components/ui/display/chip/chip-hairline.css

@@ -27,7 +27,7 @@
 		--chip-face: var(--background);
 		border-color: var(--chip-line);
 		background: var(--chip-face);
-		box-shadow: 0 1px 1px oklch(0.2 0.03 265 / 0.05);
+		box-shadow: 0 1px 1px oklch(0.2 0.03 290 / 0.05);
 	}
 	.nxgt-chip[data-look="hairline"][data-size="sm"] {
 		--chip-r: 0.4375rem;

package/lib/components/ui/layout/sidebar/sidebar-tokens.css

@@ -20,7 +20,7 @@
 .dark,
 [data-theme="dark"] {
 	/* The dark theme's primary is too dark to read on its surfaces (2.5:1), so
-	 * the rail's label is a saturated lavender of its hue (6.3:1: lightness
+	 * the rail's label is a saturated lavender of its hue (5.3:1: lightness
 	 * 0.72, chroma 0.15) on a denser pill (30 %, 35 % hovered). Light keeps the
 	 * lightness and chroma of primary (the `l` and `c` fallbacks). */
 	--nxgt-sidebar-active-share: 30%;

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

@@ -10,10 +10,10 @@
  * motion: reduced-motion.css ends every animation at once. */
 @layer components {
 	.nxgt-scrim {
-		background-color: oklch(0.2 0.035 265 / 0.42);
+		background-color: oklch(0.2 0.035 290 / 0.42);
 	}
 	:where(.dark, [data-theme="dark"]) .nxgt-scrim {
-		background-color: oklch(0.04 0.01 265 / 0.62);
+		background-color: oklch(0.04 0.01 290 / 0.62);
 	}
 	.nxgt-scrim[data-scrim="blur"] {
 		-webkit-backdrop-filter: blur(6px) saturate(1.15);

package/lib/components/ui/primitives/field-box/field-box-tokens.css

@@ -26,7 +26,7 @@
 		var(--error) 5%,
 		var(--background)
 	);
-	--nxgt-field-border: color-mix(in oklab, var(--foreground) 13%, transparent);
+	--nxgt-field-border: color-mix(in oklab, var(--foreground) 14%, transparent);
 	--nxgt-field-border-hover: color-mix(
 		in oklab,
 		var(--foreground) 24%,

package/lib/components/ui/primitives/toggle-group/toggle-group-segmented.css

@@ -13,8 +13,8 @@
 		--tg-pill: color-mix(in oklab, var(--primary) 10%, var(--background));
 		--tg-ring: color-mix(in oklab, var(--primary-text) 82%, var(--background));
 		--tg-lift:
-			0 1px 2px oklch(0.2 0.04 265 / 0.1),
-			0 2px 6px -2px oklch(0.2 0.04 265 / 0.12);
+			0 1px 2px oklch(0.2 0.04 290 / 0.1),
+			0 2px 6px -2px oklch(0.2 0.04 290 / 0.12);
 		--tg-i: 0;
 		--tg-n: 1;
 		position: relative;