@nxgt/material 3.63.0 → 3.65.0

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

@@ -1,6 +1,10 @@
 /* Chip `tonal` and `filled`, "soft": no outline at all. A low tonal fill that reads as a
  * chip on any surface; selected = the library's primary tint, a hairline
- * ring in primary-text and a check (the ≥3:1 cue), the label unchanged. */
+ * ring in primary-text and a check (the ≥3:1 cue), the label unchanged. In
+ * dark the tint is mixed from --primary-text, the light end of the primary,
+ * 56 % at rest and 58 % on hover, and the label is white: in all 14 themes
+ * the fill is ≥3:1 over the surface and the label ≥4.5:1 (#2044); the deep
+ * --primary gave 1.3:1. */
 @layer components {
 	.nxgt-chip[data-look="soft"] {
 		--chip-bg: color-mix(in oklab, var(--foreground) 6.5%, var(--background));
@@ -9,8 +13,8 @@
 			var(--foreground) 10%,
 			var(--background)
 		);
-		--chip-on: color-mix(in oklab, var(--primary) 12%, var(--background));
-		--chip-on-hover: color-mix(in oklab, var(--primary) 17%, var(--background));
+		--chip-on: color-mix(in oklab, var(--primary) 20%, var(--background));
+		--chip-on-hover: color-mix(in oklab, var(--primary) 25%, var(--background));
 		--chip-on-ring: color-mix(
 			in oklab,
 			var(--primary-text) 75%,
@@ -25,8 +29,13 @@
 			var(--foreground) 14%,
 			var(--background)
 		);
-		--chip-on: color-mix(in oklab, var(--primary) 42%, var(--background));
-		--chip-on-hover: color-mix(in oklab, var(--primary) 52%, var(--background));
+		--chip-on: color-mix(in oklab, var(--primary-text) 56%, var(--background));
+		--chip-on-hover: color-mix(
+			in oklab,
+			var(--primary-text) 58%,
+			var(--background)
+		);
+		--chip-on-text: white;
 		--chip-on-ring: color-mix(
 			in oklab,
 			var(--primary-text) 80%,
@@ -43,6 +52,11 @@
 		background: var(--chip-on);
 		box-shadow: inset 0 0 0 1px var(--chip-on-ring);
 	}
+	/* Dark: the label on the lighter fill is white (the foreground fell under
+	 * 4.5:1 on some themes' hover). Light keeps the foreground. */
+	.nxgt-chip[data-look="soft"][data-selected] {
+		color: var(--chip-on-text, var(--foreground));
+	}
 	.nxgt-chip[data-look="soft"][data-selected]:is(
 		button:hover,
 		:has(> button[data-slot="chip-body"]:hover)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.63.0",
+	"version": "3.65.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -372,7 +372,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.44.0",
+		"@nxgt/material-core": "^0.45.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",