@nxgt/material 3.93.0 → 3.95.0

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

@@ -3,39 +3,48 @@
  * only, so not in the shared theme-tokens.css. Declared again under .dark so
  * a dark wrapper computes them from its own colours. Unlayered, like the
  * theme tokens: an app's own `:root` / `.dark` rule after the import wins.
- * The filled tint is translucent, as `bg-primary/10` (the tint fields had
- * before, which light keeps exactly). Dark: the filled tint is stronger,
- * so a filled field still reads apart from an empty one on the near-black
- * page (≥ 1.10:1 between the two, ≥ 1.15:1 against the page;
- * Guides/Accessibility/Field contrast measures both). */
+ * The Refined look: the surface is the card, the rest border keeps 3:1
+ * against it (1.4.11; Guides/Accessibility/Field contrast measures both
+ * themes), the focus ring is 4px. There is no filled tint any more: the
+ * `-filled` tokens stay, as aliases of the rest values, so a read resolves;
+ * an override no longer paints: style on `data-filled` instead. */
 :root,
 [data-nxgt-theme] {
-	--nxgt-field-bg: color-mix(in oklab, var(--foreground) 2%, var(--background));
+	--nxgt-field-bg: var(--card);
 	--nxgt-field-bg-hover: color-mix(
 		in oklab,
-		var(--foreground) 6.5%,
-		var(--background)
+		var(--foreground) 2.5%,
+		var(--card)
 	);
-	--nxgt-field-bg-filled: color-mix(in oklab, var(--primary) 10%, transparent);
-	--nxgt-field-bg-filled-hover: color-mix(
+	/* Aliases: a filled field looks like an empty one. */
+	--nxgt-field-bg-filled: var(--nxgt-field-bg);
+	--nxgt-field-bg-filled-hover: var(--nxgt-field-bg-hover);
+	--nxgt-field-bg-invalid: var(--nxgt-field-bg);
+	--nxgt-field-bg-disabled: color-mix(
 		in oklab,
-		var(--primary) 14%,
-		transparent
+		var(--foreground) 5%,
+		var(--card)
 	);
-	--nxgt-field-bg-invalid: color-mix(
+	--nxgt-field-border: color-mix(in oklab, var(--foreground) 52%, var(--card));
+	--nxgt-field-border-hover: color-mix(
 		in oklab,
-		var(--error) 5%,
-		var(--background)
+		var(--foreground) 74%,
+		var(--card)
 	);
-	--nxgt-field-border: color-mix(in oklab, var(--foreground) 14%, transparent);
-	--nxgt-field-border-hover: color-mix(
+	--nxgt-field-border-readonly: color-mix(
+		in oklab,
+		var(--foreground) 50%,
+		var(--card)
+	);
+	--nxgt-field-border-disabled: color-mix(
 		in oklab,
 		var(--foreground) 24%,
-		transparent
+		var(--card)
 	);
 	--nxgt-field-focus: var(--primary-text);
-	--nxgt-field-halo: color-mix(in oklab, var(--primary-text) 22%, transparent);
-	--nxgt-field-halo-invalid: color-mix(in oklab, var(--error) 22%, transparent);
+	--nxgt-field-error: var(--error-text);
+	--nxgt-field-halo: color-mix(in oklab, var(--primary-text) 24%, transparent);
+	--nxgt-field-halo-invalid: color-mix(in oklab, var(--error) 26%, transparent);
 	--nxgt-field-well: color-mix(in oklab, var(--foreground) 6%, transparent);
 	--nxgt-field-radius: 0.5rem;
 	--nxgt-field-inner-radius: 0.25rem;
@@ -70,32 +79,41 @@
 		var(--muted-foreground) 78%,
 		var(--foreground)
 	);
-	--nxgt-field-bg: color-mix(in oklab, var(--foreground) 5%, var(--background));
+	--nxgt-field-bg: var(--card);
 	--nxgt-field-bg-hover: color-mix(
 		in oklab,
-		var(--foreground) 9%,
-		var(--background)
+		var(--foreground) 2.5%,
+		var(--card)
 	);
-	--nxgt-field-bg-filled: color-mix(in oklab, var(--primary) 26%, transparent);
-	--nxgt-field-bg-filled-hover: color-mix(
+	/* Aliases: a filled field looks like an empty one. */
+	--nxgt-field-bg-filled: var(--nxgt-field-bg);
+	--nxgt-field-bg-filled-hover: var(--nxgt-field-bg-hover);
+	--nxgt-field-bg-invalid: var(--nxgt-field-bg);
+	--nxgt-field-bg-disabled: color-mix(
 		in oklab,
-		var(--primary) 32%,
-		transparent
+		var(--foreground) 5%,
+		var(--card)
 	);
-	--nxgt-field-bg-invalid: color-mix(
+	--nxgt-field-border: color-mix(in oklab, var(--foreground) 52%, var(--card));
+	--nxgt-field-border-hover: color-mix(
 		in oklab,
-		var(--error) 10%,
-		var(--background)
+		var(--foreground) 74%,
+		var(--card)
 	);
-	--nxgt-field-border: color-mix(in oklab, var(--foreground) 16%, transparent);
-	--nxgt-field-border-hover: color-mix(
+	--nxgt-field-border-readonly: color-mix(
+		in oklab,
+		var(--foreground) 50%,
+		var(--card)
+	);
+	--nxgt-field-border-disabled: color-mix(
 		in oklab,
-		var(--foreground) 32%,
-		transparent
+		var(--foreground) 24%,
+		var(--card)
 	);
 	--nxgt-field-focus: var(--primary-text);
-	--nxgt-field-halo: color-mix(in oklab, var(--primary-text) 35%, transparent);
-	--nxgt-field-halo-invalid: color-mix(in oklab, var(--error) 40%, transparent);
+	--nxgt-field-error: var(--error-text);
+	--nxgt-field-halo: color-mix(in oklab, var(--primary-text) 24%, transparent);
+	--nxgt-field-halo-invalid: color-mix(in oklab, var(--error) 26%, transparent);
 	--nxgt-field-well: color-mix(in oklab, var(--foreground) 10%, transparent);
 	--nxgt-field-list-shadow:
 		0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent),

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

@@ -1,18 +1,14 @@
 /* The field box: the look of every text field and picker trigger (Input,
- * Textarea, InputGroup, then Select, Combobox, the date fields). A soft
- * neutral surface, the primary tint once it holds a value, a hairline that
- * firms on hover, the border in primary with a 3px halo on focus.
+ * Textarea, InputGroup, then Select, Combobox, the date fields). The
+ * Refined look: the card as surface, a 1px border that keeps 3:1 and firms
+ * on hover, the primary border with a 4px ring on focus. A filled field
+ * looks like an empty one.
  * Look only: height and padding stay with each component, and a utility
  * class still wins (this is @layer components).
  *
- * Filled: `:placeholder-shown` for an <input> or <textarea> (CSS alone, no
- * state: the same markup on the server); `data-filled` on any other box,
- * which never matches the pseudo-class (#324), and on a file, date, time,
- * month, week, colour or range input, which never shows a placeholder; a
- * box holding an input-group control reads the control's; a <select> is
- * filled while its chosen option has a value, a Select trigger while
- * Radix does not mark it `data-placeholder`, and a chips box while it
- * holds a chip.
+ * Filled: `data-filled` stays on a box that holds a value (components set
+ * it, apps may style on it), but it paints nothing: the `-filled` tokens
+ * alias the rest ones.
  * Focus: the box itself, or an input or a combobox button directly in it
  * (TreeSelectField's box beside its chips), or the input among a chips
  * box's values.
@@ -23,7 +19,7 @@
  * field-box-modes.css. */
 @layer components {
 	.nxgt-field-box {
-		/* The surface at rest and under the pointer; filled swaps both. */
+		/* The surface at rest and under the pointer. */
 		--_field-rest: var(--nxgt-field-bg);
 		--_field-hover: var(--nxgt-field-bg-hover);
 		border: 1px solid var(--nxgt-field-border);
@@ -41,53 +37,8 @@
 			var(--nxgt-spring-fast, ease-out);
 	}
 
-	/* Filled. A file, date, time, month, week, colour or range input never
-	 * shows its placeholder, so `:placeholder-shown` cannot tell it is
-	 * empty: such an input tints only with `data-filled`. */
-	.nxgt-field-box:where(
-		:is(
-			input:not(
-				:is(
-					[type="file"],
-					[type="date"],
-					[type="time"],
-					[type="datetime-local"],
-					[type="month"],
-					[type="week"],
-					[type="color"],
-					[type="range"]
-				)
-			),
-			textarea
-		):not(:placeholder-shown),
-		[data-filled]:not([data-filled="false"]),
-		select:has(option:checked:not([value=""])),
-		[data-slot="select-trigger"]:not([data-placeholder]),
-		[data-slot="combobox-chips"]:has(
-			[data-slot="combobox-chip"],
-			[data-slot="chip"]
-		),
-		:has(
-			[data-slot="input-group-control"]:not(
-					:is(
-						[type="file"],
-						[type="date"],
-						[type="time"],
-						[type="datetime-local"],
-						[type="month"],
-						[type="week"],
-						[type="color"],
-						[type="range"]
-					)
-				):not(:placeholder-shown)
-		)
-	) {
-		--_field-rest: var(--nxgt-field-bg-filled);
-		--_field-hover: var(--nxgt-field-bg-filled-hover);
-	}
-
 	/* Every state below is wrapped in :where(), so they all weigh one class
-	 * and their order decides: hover, focus, error, read-only, disabled. */
+	 * and their order decides: hover, read-only, disabled, focus, error. */
 
 	/* Hover: never on a disabled or read-only box. */
 	.nxgt-field-box:where(:hover):where(
@@ -103,7 +54,31 @@
 		background-color: var(--_field-hover);
 	}
 
-	/* Focus: the border in primary and a soft halo outside. */
+	/* Read-only: no surface, a dashed hairline. Before the focus rule, so a
+	 * focused read-only box still shows its ring. */
+	.nxgt-field-box:where(
+		:is([readonly], [data-readonly]):not(:disabled),
+		:has([data-slot="input-group-control"][readonly])
+	) {
+		border-style: dashed;
+		border-color: var(--nxgt-field-border-readonly);
+		background-color: transparent;
+	}
+
+	/* Disabled: a recessed surface and a light border, the box at 62 %. */
+	.nxgt-field-box:where(
+		:disabled,
+		[data-disabled],
+		:has([data-slot="input-group-control"]:disabled)
+	) {
+		cursor: not-allowed;
+		border-color: var(--nxgt-field-border-disabled);
+		background-color: var(--nxgt-field-bg-disabled);
+		opacity: 0.62;
+	}
+
+	/* Focus: the 1px border and a 1px line in primary, and a 4px ring
+	 * outside (it replaces the 3px halo). */
 	.nxgt-field-box:where(
 		:is(input, textarea, select, button, [role="combobox"]):focus-visible,
 		[data-focused],
@@ -112,17 +87,19 @@
 		:has([data-slot="input-group-control"]:focus-visible)
 	) {
 		border-color: var(--nxgt-field-focus);
-		box-shadow: 0 0 0 3px var(--nxgt-field-halo);
+		box-shadow:
+			0 0 0 1px var(--nxgt-field-focus),
+			0 0 0 4px var(--nxgt-field-halo);
 	}
 
-	/* Error: the border in the error colour and a faint error wash. */
+	/* Error: the border in the error text colour and a 1px line inside it. */
 	.nxgt-field-box:where(
 		[aria-invalid="true"],
 		[data-invalid]:not([data-invalid="false"]),
 		:has([data-slot][aria-invalid="true"])
 	) {
-		border-color: var(--error);
-		background-color: var(--nxgt-field-bg-invalid);
+		border-color: var(--nxgt-field-error);
+		box-shadow: inset 0 0 0 1px var(--nxgt-field-error);
 	}
 	.nxgt-field-box:where(
 		[aria-invalid="true"],
@@ -135,7 +112,9 @@
 		:has(> [data-slot="combobox-chips-values"] > input:focus-visible),
 		:has([data-slot="input-group-control"]:focus-visible)
 	) {
-		box-shadow: 0 0 0 3px var(--nxgt-field-halo-invalid);
+		box-shadow:
+			0 0 0 1px var(--nxgt-field-error),
+			0 0 0 4px var(--nxgt-field-halo-invalid);
 	}
 	/* Open in error: the error border stays (it outranks the open border,
 	 * field-box-parts.css), the error being still there. */
@@ -144,28 +123,7 @@
 		[data-invalid]:not([data-invalid="false"]),
 		:has([data-slot][aria-invalid="true"])
 	) {
-		border-color: var(--error);
-	}
-
-	/* Read-only: no surface, a dashed hairline. */
-	.nxgt-field-box:where(
-		:is([readonly], [data-readonly]):not(:disabled),
-		:has([data-slot="input-group-control"][readonly])
-	) {
-		border-style: dashed;
-		background-color: transparent;
-	}
-
-	/* Disabled: the whole box at half strength, on the neutral surface
-	 * (never the filled tint). */
-	.nxgt-field-box:where(
-		:disabled,
-		[data-disabled],
-		:has([data-slot="input-group-control"]:disabled)
-	) {
-		cursor: not-allowed;
-		background-color: var(--nxgt-field-bg);
-		opacity: 0.5;
+		border-color: var(--nxgt-field-error);
 	}
 
 	/* A Select trigger shows the chosen item's children (Radix clones them

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

@@ -0,0 +1,129 @@
+/* The −/+ pair at the end of a field's box: two tinted round buttons side by
+ * side, no divider. DurationField (`.nxgt-duration-step`, its box defines
+ * `--_dd-*`) and NumberField (`.nxgt-field-step` inside `.nxgt-field-steps`,
+ * which defines them) share these rules. Focus rings are drawn inside the
+ * button (an inset outline), never clipped. A coarse pointer gets a 44px
+ * target. */
+@layer components {
+	.nxgt-field-steps {
+		--_dd-btn: color-mix(in oklab, var(--primary) 14%, var(--background));
+		--_dd-btn-hover: color-mix(in oklab, var(--primary) 22%, var(--background));
+		--_dd-step: 2rem;
+		display: flex;
+		flex: none;
+		align-items: center;
+		align-self: stretch;
+		gap: 0.5rem;
+		padding-inline-end: 0.25rem;
+		cursor: default;
+	}
+	:is(.dark, [data-theme="dark"]) .nxgt-field-steps {
+		--_dd-btn: color-mix(in oklab, var(--primary) 34%, var(--background));
+		--_dd-btn-hover: color-mix(in oklab, var(--primary) 44%, var(--background));
+	}
+
+	/* The −/+ pair: round, 4px apart on a fine pointer (12px on a coarse one),
+	 * a ring inside each button. */
+	:is(.nxgt-duration-step, .nxgt-field-step) {
+		display: grid;
+		flex: none;
+		place-items: center;
+		inline-size: var(--_dd-step);
+		block-size: var(--_dd-step);
+		border-radius: var(--nxgt-shape-corner-full);
+		background: var(--_dd-btn);
+		color: var(--primary-text);
+		cursor: pointer;
+		transition: background-color var(--nxgt-motion-effects-default-duration)
+			var(--nxgt-motion-effects-default);
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step)
+		+ :is(.nxgt-duration-step, .nxgt-field-step) {
+		margin-inline-start: -0.25rem;
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step):hover:not(
+		:disabled,
+		[aria-disabled="true"]
+	) {
+		background: var(--_dd-btn-hover);
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step):focus-visible {
+		outline: 2px solid var(--_fx-line, var(--nxgt-field-focus));
+		outline-offset: -2px;
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step):is(
+		:disabled,
+		[aria-disabled="true"]
+	) {
+		cursor: not-allowed;
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step)[aria-disabled="true"]:not(
+		:disabled
+	),
+	.nxgt-field-step:disabled {
+		opacity: 0.38;
+	}
+	.nxgt-duration-box[data-disabled] .nxgt-duration-step,
+	.nxgt-field-steps[data-disabled] .nxgt-field-step {
+		background: transparent;
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step) svg {
+		inline-size: 1rem;
+		block-size: 1rem;
+	}
+
+	/* NumberField: the box is 44px tall on a coarse pointer, so the circle
+	 * stays 32px and a transparent 6px ring makes the 44px target. */
+	@media (pointer: coarse) {
+		.nxgt-field-step {
+			inline-size: 2.75rem;
+			block-size: 2.75rem;
+			border: 0.375rem solid transparent;
+			background-clip: padding-box;
+		}
+		.nxgt-field-step + .nxgt-field-step {
+			margin-inline-start: -0.5rem;
+		}
+		.nxgt-field-step:focus-visible {
+			outline-offset: -0.375rem;
+		}
+	}
+
+	@media (forced-colors: active) and (pointer: coarse) {
+		/* Keep the 44px target: the transparent ring stays, the 1px outline of
+		 * the circle is an inset ring. */
+		.nxgt-field-step {
+			border: 0.375rem solid transparent;
+			background-clip: padding-box;
+			box-shadow: inset 0 0 0 1px ButtonBorder;
+		}
+		.nxgt-field-step[aria-disabled="true"],
+		.nxgt-field-step:disabled {
+			box-shadow: inset 0 0 0 1px GrayText;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:is(.nxgt-duration-step, .nxgt-field-step) {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		:is(.nxgt-duration-step, .nxgt-field-step) {
+			forced-color-adjust: none;
+			border: 1px solid ButtonBorder;
+			background: ButtonFace;
+			color: ButtonText;
+		}
+		:is(.nxgt-duration-step, .nxgt-field-step)[aria-disabled="true"],
+		.nxgt-field-step:disabled,
+		.nxgt-duration-step:disabled {
+			border-color: GrayText;
+			color: GrayText;
+			opacity: 1;
+		}
+		:is(.nxgt-duration-step, .nxgt-field-step):focus-visible {
+			outline-color: Highlight;
+		}
+	}
+}

package/lib/styles.css

@@ -92,10 +92,12 @@
 	--color-error-text: var(--error-text);
 	--color-success: var(--success);
 	--color-success-foreground: var(--success-foreground);
+	--color-success-text: var(--success-text);
 	--color-info: var(--info);
 	--color-info-foreground: var(--info-foreground);
 	--color-warning: var(--warning);
 	--color-warning-foreground: var(--warning-foreground);
+	--color-warning-text: var(--warning-text);
 	--color-destructive: var(--destructive);
 	--color-border: var(--border);
 	--color-input: var(--input);

package/lib/themes/ambre.css

@@ -1,6 +1,6 @@
 /* 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: 81 pairs, 0 failing.
+ * Contrast: 89 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"] {
@@ -37,10 +37,12 @@
 	--error-text: color-mix(in oklab, var(--error) 92%, black);
 	--success: oklch(0.46 0.118 184.7);
 	--success-foreground: oklch(0.984 0.003 65);
+	--success-text: color-mix(in oklab, var(--success) 92%, black);
 	--info: oklch(0.48 0.165 254.62);
 	--info-foreground: oklch(0.984 0.003 65);
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 65);
+	--warning-text: color-mix(in oklab, var(--warning) 92%, black);
 	--destructive: var(--error);
 	--border: oklch(0.912 0.0136 65);
 	--input: oklch(0.912 0.0136 65);
@@ -108,10 +110,12 @@
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	--success: oklch(0.6 0.118 184.7);
 	--success-foreground: oklch(0.995 0.002 65);
+	--success-text: color-mix(in oklab, var(--success) 76%, white);
 	--info: oklch(0.707 0.165 254.62);
 	--info-foreground: oklch(0.995 0.002 65);
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 65);
+	--warning-text: color-mix(in oklab, var(--warning) 76%, white);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(0.289 0.0213 65);
 	--input: oklch(0.328 0.0229 65);

package/lib/themes/ardoise.css

@@ -1,6 +1,6 @@
 /* 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: 81 pairs, 0 failing.
+ * Contrast: 89 pairs, 0 failing.
  */
 [data-nxgt-theme="ardoise"] {
 	--radius: 0.375rem;
@@ -36,10 +36,12 @@
 	--error-text: color-mix(in oklab, var(--error) 92%, black);
 	--success: oklch(0.46 0.118 184.7);
 	--success-foreground: oklch(0.984 0.003 250);
+	--success-text: color-mix(in oklab, var(--success) 92%, black);
 	--info: oklch(0.48 0.165 254.62);
 	--info-foreground: oklch(0.984 0.003 250);
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 250);
+	--warning-text: color-mix(in oklab, var(--warning) 92%, black);
 	--destructive: var(--error);
 	--border: oklch(0.912 0.0112 250);
 	--input: oklch(0.912 0.0112 250);
@@ -107,10 +109,12 @@
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	--success: oklch(0.6 0.118 184.7);
 	--success-foreground: oklch(0.995 0.002 250);
+	--success-text: color-mix(in oklab, var(--success) 76%, white);
 	--info: oklch(0.707 0.165 254.62);
 	--info-foreground: oklch(0.995 0.002 250);
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 250);
+	--warning-text: color-mix(in oklab, var(--warning) 76%, white);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(0.289 0.0175 250);
 	--input: oklch(0.328 0.0189 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: 81 pairs, 0 failing.
+ * Contrast: 89 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.
@@ -39,10 +39,12 @@
 	--error-text: color-mix(in oklab, var(--error) 92%, black);
 	--success: oklch(0.46 0.118 184.7);
 	--success-foreground: oklch(0.984 0.003 255);
+	--success-text: color-mix(in oklab, var(--success) 92%, black);
 	--info: oklch(0.48 0.165 254.62);
 	--info-foreground: oklch(0.984 0.003 255);
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 255);
+	--warning-text: color-mix(in oklab, var(--warning) 92%, black);
 	--destructive: var(--error);
 	--border: oklch(0.912 0.0176 255);
 	--input: oklch(0.912 0.0176 255);
@@ -110,10 +112,12 @@
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	--success: oklch(0.6 0.118 184.7);
 	--success-foreground: oklch(0.995 0.002 255);
+	--success-text: color-mix(in oklab, var(--success) 76%, white);
 	--info: oklch(0.707 0.165 254.62);
 	--info-foreground: oklch(0.995 0.002 255);
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 255);
+	--warning-text: color-mix(in oklab, var(--warning) 76%, white);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(0.289 0.0275 255);
 	--input: oklch(0.328 0.0297 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: 81 pairs, 0 failing.
+ * Contrast: 89 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.
@@ -39,10 +39,12 @@
 	--error-text: color-mix(in oklab, var(--error) 92%, black);
 	--success: oklch(0.46 0.118 184.7);
 	--success-foreground: oklch(0.984 0.003 265);
+	--success-text: color-mix(in oklab, var(--success) 92%, black);
 	--info: oklch(0.48 0.165 254.62);
 	--info-foreground: oklch(0.984 0.003 265);
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 265);
+	--warning-text: color-mix(in oklab, var(--warning) 92%, black);
 	--destructive: var(--error);
 	--border: oklch(0.912 0.016 265);
 	--input: oklch(0.912 0.016 265);
@@ -110,10 +112,12 @@
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	--success: oklch(0.6 0.118 184.7);
 	--success-foreground: oklch(0.995 0.002 265);
+	--success-text: color-mix(in oklab, var(--success) 76%, white);
 	--info: oklch(0.707 0.165 254.62);
 	--info-foreground: oklch(0.995 0.002 265);
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 265);
+	--warning-text: color-mix(in oklab, var(--warning) 76%, white);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(0.289 0.025 265);
 	--input: oklch(0.328 0.027 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: 81 pairs, 0 failing.
+ * Contrast: 89 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.
@@ -39,10 +39,12 @@
 	--error-text: color-mix(in oklab, var(--error) 92%, black);
 	--success: oklch(0.46 0.118 184.7);
 	--success-foreground: oklch(0.984 0.003 30);
+	--success-text: color-mix(in oklab, var(--success) 92%, black);
 	--info: oklch(0.48 0.165 254.62);
 	--info-foreground: oklch(0.984 0.003 30);
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 30);
+	--warning-text: color-mix(in oklab, var(--warning) 92%, black);
 	--destructive: var(--error);
 	--border: oklch(0.912 0.0128 30);
 	--input: oklch(0.912 0.0128 30);
@@ -110,10 +112,12 @@
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	--success: oklch(0.6 0.118 184.7);
 	--success-foreground: oklch(0.995 0.002 30);
+	--success-text: color-mix(in oklab, var(--success) 76%, white);
 	--info: oklch(0.707 0.165 254.62);
 	--info-foreground: oklch(0.995 0.002 30);
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 30);
+	--warning-text: color-mix(in oklab, var(--warning) 76%, white);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(0.289 0.02 30);
 	--input: oklch(0.328 0.0216 30);

package/lib/themes/foret.css

@@ -1,6 +1,6 @@
 /* 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: 81 pairs, 0 failing.
+ * Contrast: 89 pairs, 0 failing.
  */
 [data-nxgt-theme="foret"] {
 	--radius: 0.5rem;
@@ -36,10 +36,12 @@
 	--error-text: color-mix(in oklab, var(--error) 92%, black);
 	--success: oklch(0.46 0.118 184.7);
 	--success-foreground: oklch(0.984 0.003 140);
+	--success-text: color-mix(in oklab, var(--success) 92%, black);
 	--info: oklch(0.48 0.165 254.62);
 	--info-foreground: oklch(0.984 0.003 140);
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 140);
+	--warning-text: color-mix(in oklab, var(--warning) 92%, black);
 	--destructive: var(--error);
 	--border: oklch(0.912 0.0128 140);
 	--input: oklch(0.912 0.0128 140);
@@ -107,10 +109,12 @@
 	--error-text: color-mix(in oklab, var(--error) 76%, white);
 	--success: oklch(0.6 0.118 184.7);
 	--success-foreground: oklch(0.995 0.002 140);
+	--success-text: color-mix(in oklab, var(--success) 76%, white);
 	--info: oklch(0.707 0.165 254.62);
 	--info-foreground: oklch(0.995 0.002 140);
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 140);
+	--warning-text: color-mix(in oklab, var(--warning) 76%, white);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(0.289 0.02 140);
 	--input: oklch(0.328 0.0216 140);