@nxgt/material 3.10.1 → 3.11.0

package/dist/components/ui/actions/morph-fill.css

@@ -0,0 +1,62 @@
+/* The fill of a selected morph control, shared (#1106: it was copied into
+ * Toolbar, IconButton and RichChatComposer). A host with the class
+ * `nxgt-morph-fill` and `data-selected` is filled with `--morph-on` and reads
+ * `--morph-on-fg` on it; its colour sets both (`toneVars`, button-tones.ts).
+ * Button and IconButton use it; the toggle's shape change is the host's own
+ * (button.css, icon-button.css); Toolbar items keep the Toolbar's own fill.
+ * A ghost control without a `color` (no `data-color`) is neutral when selected
+ * too, for Button and IconButton alike: a 12 % tint of the text colour, label
+ * and icon in full text colour (primary only with a `color`).
+ * Doubled class: it must beat the colour
+ * utilities of the variant (`bg-primary`, `hover:bg-…`). */
+@layer utilities {
+	.nxgt-morph-fill[data-variant="ghost"]:not([data-color]) {
+		--morph-on: color-mix(in oklab, var(--color-foreground) 12%, transparent);
+		--morph-on-fg: var(--color-foreground);
+	}
+	.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+		.nxgt-toolbar-item,
+		[data-toolbar-item]
+	) {
+		background-color: var(--morph-on, var(--color-primary));
+		color: var(--morph-on-fg, var(--color-primary-foreground));
+		box-shadow: none;
+	}
+	.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+			.nxgt-toolbar-item,
+			[data-toolbar-item]
+		)
+		svg {
+		color: var(--morph-on-fg, var(--color-primary-foreground));
+	}
+	.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+		.nxgt-toolbar-item,
+		[data-toolbar-item]
+	):hover:not(:disabled) {
+		background-color: color-mix(
+			in oklab,
+			var(--morph-on-fg, var(--color-primary-foreground)) 10%,
+			var(--morph-on, var(--color-primary))
+		);
+	}
+
+	/* Forced colours: the selected control is the system's selected item. */
+	@media (forced-colors: active) {
+		.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+				.nxgt-toolbar-item,
+				[data-toolbar-item]
+			) {
+			background-color: SelectedItem;
+			color: SelectedItemText;
+			forced-color-adjust: none;
+		}
+		.nxgt-morph-fill.nxgt-morph-fill[data-selected]:not(
+				.nxgt-toolbar-item,
+				[data-toolbar-item]
+			)
+			svg {
+			color: SelectedItemText;
+			stroke: SelectedItemText;
+		}
+	}
+}