@nxgt/material 3.5.0 → 3.7.0

package/lib/components/theme-tokens.css

@@ -3,52 +3,59 @@
  * 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);
+	/* The focus indicator (WCAG 1.4.11, 3:1): 3.40:1 on --background, 3.69:1 on
+	   --card, 3.23:1 on --muted. */
+	--ring: oklch(0.62 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 +81,68 @@
 	--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.62 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. */
-	--error-text: color-mix(in oklab, var(--error) 80%, white);
+	   3.9:1 on --background and 3.5:1 on --card. Lightened (76 % --error), 5.85
+	   and 5.35:1, and 4.78:1 on a focused error menu item (bg-error/20 over the
+	   popover; 4.45:1 at the former 80 %, which 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
-	   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);
+	/* 3.78:1 on --background, 3.45:1 on --card, 3.09: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);
 	--chart-3: oklch(0.769 0.188 70.08);
@@ -138,7 +150,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 +163,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 +180,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;

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

@@ -23,7 +23,7 @@
 		--tg-lift:
 			0 1px 2px oklch(0.25 0.06 270 / 0.08),
 			0 3px 8px -3px oklch(0.35 0.1 276 / 0.22);
-		--tg-rest: 0 1px 1px oklch(0.2 0.03 265 / 0.04);
+		--tg-rest: 0 1px 1px oklch(0.2 0.03 290 / 0.04);
 		gap: 0.375rem;
 	}
 	.nxgt-toggle-group[data-variant="separate"][data-size="sm"] {

package/lib/components/ui/widgets/drawing/drawing-animate.css

@@ -0,0 +1,123 @@
+/* Entry animations (`drawOn` and `appear` of @nxgt/material/draw/animate).
+ * A node carries `nxgt-draw-on` or `nxgt-draw-appear`, a delay step
+ * `nxgt-draw-d-<0..19>` and a duration `nxgt-draw-t-<s|m|l>`: never an inline
+ * style. The delay is the step times `--nxgt-draw-stagger` (60ms), set on the
+ * drawing or an ancestor to speed it up or slow it down. The animations fill
+ * both ways, so a replay (`useDrawingControls`) can find them and the last
+ * frame is the drawing itself: a stroke is traced with a dash as long as its
+ * path (`pathLength` 1), a fill fades in, a node fades and grows in. */
+.nxgt-draw-t-s {
+	--nxgt-draw-dur: 300ms;
+}
+.nxgt-draw-t-m {
+	--nxgt-draw-dur: 600ms;
+}
+.nxgt-draw-t-l {
+	--nxgt-draw-dur: 1000ms;
+}
+.nxgt-draw-d-0 {
+	--nxgt-draw-i: 0;
+}
+.nxgt-draw-d-1 {
+	--nxgt-draw-i: 1;
+}
+.nxgt-draw-d-2 {
+	--nxgt-draw-i: 2;
+}
+.nxgt-draw-d-3 {
+	--nxgt-draw-i: 3;
+}
+.nxgt-draw-d-4 {
+	--nxgt-draw-i: 4;
+}
+.nxgt-draw-d-5 {
+	--nxgt-draw-i: 5;
+}
+.nxgt-draw-d-6 {
+	--nxgt-draw-i: 6;
+}
+.nxgt-draw-d-7 {
+	--nxgt-draw-i: 7;
+}
+.nxgt-draw-d-8 {
+	--nxgt-draw-i: 8;
+}
+.nxgt-draw-d-9 {
+	--nxgt-draw-i: 9;
+}
+.nxgt-draw-d-10 {
+	--nxgt-draw-i: 10;
+}
+.nxgt-draw-d-11 {
+	--nxgt-draw-i: 11;
+}
+.nxgt-draw-d-12 {
+	--nxgt-draw-i: 12;
+}
+.nxgt-draw-d-13 {
+	--nxgt-draw-i: 13;
+}
+.nxgt-draw-d-14 {
+	--nxgt-draw-i: 14;
+}
+.nxgt-draw-d-15 {
+	--nxgt-draw-i: 15;
+}
+.nxgt-draw-d-16 {
+	--nxgt-draw-i: 16;
+}
+.nxgt-draw-d-17 {
+	--nxgt-draw-i: 17;
+}
+.nxgt-draw-d-18 {
+	--nxgt-draw-i: 18;
+}
+.nxgt-draw-d-19 {
+	--nxgt-draw-i: 19;
+}
+.nxgt-draw-on,
+.nxgt-draw-appear {
+	animation-duration: var(--nxgt-draw-dur, 600ms);
+	animation-delay: calc(var(--nxgt-draw-i, 0) * var(--nxgt-draw-stagger, 60ms));
+	animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+	animation-fill-mode: both;
+}
+.nxgt-draw-on {
+	animation-name: nxgt-draw-trace, nxgt-draw-fill;
+}
+.nxgt-draw-appear {
+	animation-name: nxgt-draw-fade, nxgt-draw-grow;
+	transform-box: fill-box;
+	transform-origin: center;
+}
+@keyframes nxgt-draw-trace {
+	from {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 1;
+	}
+	to {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 0;
+	}
+}
+@keyframes nxgt-draw-fill {
+	from {
+		fill-opacity: 0;
+	}
+}
+@keyframes nxgt-draw-fade {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes nxgt-draw-grow {
+	from {
+		scale: 0.92;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.nxgt-draw-on,
+	.nxgt-draw-appear {
+		animation: none;
+	}
+}