@nxgt/material 3.2.0 → 3.4.0

package/lib/backgrounds/css-react/illustrated.css

@@ -0,0 +1,164 @@
+/* The illustrated scenes' shared parts (`school`, `night-sky`, `bubbles`,
+ * `leaves`, `science`, `music`, `travel`, `sport`): a faint colour wash under
+ * the scene, and the scene itself, fine line drawings (`il` is the root; every
+ * path is stroked in `currentColor`, which a `k1..k3` class sets) kept calm in
+ * the middle of the frame by a mask, where the content sits. The scene is the
+ * one drawn by core's `buildBackgroundScene`. React only: nothing in the shared
+ * `css/` folder. Intensity never goes above the default (`vivid` draws as the default). Each preset's file imports this one. */
+@import "../css/scene.css";
+
+@layer components {
+	/* `vivid` is capped at the default strength: drawings under body text
+	 * never get stronger (the wash and the strokes read these variables).
+	 * Three attributes (0,3,0) beat tones.css's (0,2,0) in any import order. */
+	:is(
+		[data-background="school"],
+		[data-background="night-sky"],
+		[data-background="bubbles"],
+		[data-background="leaves"],
+		[data-background="science"],
+		[data-background="music"],
+		[data-background="travel"],
+		[data-background="sport"]
+	)[data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-a2: 16%;
+		--nxgt-bg-a3: 28%;
+		--nxgt-bg-op: 0.72;
+	}
+
+	/* The wash: two soft colour pools under the scene. */
+	:is(
+		[data-background="school"],
+		[data-background="night-sky"],
+		[data-background="bubbles"],
+		[data-background="leaves"],
+		[data-background="science"],
+		[data-background="music"],
+		[data-background="travel"],
+		[data-background="sport"]
+	) > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 70% 60% at 22% 18%,
+				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+				transparent 72%
+			),
+			radial-gradient(
+				ellipse 60% 55% at 85% 92%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	:is(
+			[data-background="school"],
+			[data-background="night-sky"],
+			[data-background="bubbles"],
+			[data-background="leaves"],
+			[data-background="science"],
+			[data-background="music"],
+			[data-background="travel"],
+			[data-background="sport"]
+		)
+		> [data-scene] {
+		overflow: hidden;
+	}
+
+	/* The middle stays calm: the mask is in pixels, not in percent of the
+	 * frame, so the quiet zone always covers a card of content (a percentage
+	 * would shrink it on a phone). It passes 7 to 9% of the drawings, which
+	 * keeps 14 px muted text at 4.5:1 or better over the worst stroke pixel. */
+	:is(
+			[data-background="school"],
+			[data-background="night-sky"],
+			[data-background="bubbles"],
+			[data-background="leaves"],
+			[data-background="science"],
+			[data-background="music"],
+			[data-background="travel"],
+			[data-background="sport"]
+		)
+		> [data-scene]
+		.mo {
+		opacity: calc(var(--nxgt-bg-op) + 0.2);
+	}
+	:is(
+			[data-background="school"],
+			[data-background="night-sky"],
+			[data-background="bubbles"],
+			[data-background="leaves"],
+			[data-background="science"],
+			[data-background="music"],
+			[data-background="travel"],
+			[data-background="sport"]
+		)
+		> [data-scene]
+		> .il {
+		-webkit-mask-image: radial-gradient(
+			ellipse 380px 290px at 50% 50%,
+			rgb(0 0 0 / 0.07) 0%,
+			rgb(0 0 0 / 0.09) 55%,
+			rgb(0 0 0 / 0.5) 80%,
+			black 100%
+		);
+		mask-image: radial-gradient(
+			ellipse 380px 290px at 50% 50%,
+			rgb(0 0 0 / 0.07) 0%,
+			rgb(0 0 0 / 0.09) 55%,
+			rgb(0 0 0 / 0.5) 80%,
+			black 100%
+		);
+	}
+	/* A phone: the card fills the width, so the zone is a band across it. */
+	@media (max-width: 640px) {
+		:is(
+				[data-background="school"],
+				[data-background="night-sky"],
+				[data-background="bubbles"],
+				[data-background="leaves"],
+				[data-background="science"],
+				[data-background="music"],
+				[data-background="travel"],
+				[data-background="sport"]
+			)
+			> [data-scene]
+			> .il {
+			-webkit-mask-image: radial-gradient(
+				ellipse 420px 170px at 50% 50%,
+				rgb(0 0 0 / 0.07) 0%,
+				rgb(0 0 0 / 0.09) 55%,
+				rgb(0 0 0 / 0.5) 80%,
+				black 100%
+			);
+			mask-image: radial-gradient(
+				ellipse 420px 170px at 50% 50%,
+				rgb(0 0 0 / 0.07) 0%,
+				rgb(0 0 0 / 0.09) 55%,
+				rgb(0 0 0 / 0.5) 80%,
+				black 100%
+			);
+		}
+	}
+
+	:is(
+			[data-background="school"],
+			[data-background="night-sky"],
+			[data-background="bubbles"],
+			[data-background="leaves"],
+			[data-background="science"],
+			[data-background="music"],
+			[data-background="travel"],
+			[data-background="sport"]
+		)
+		> [data-scene]
+		> .il
+		path {
+		fill: none;
+		stroke: currentColor;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+}

package/lib/backgrounds/css-react/leaves.css

@@ -0,0 +1,41 @@
+/* The `leaves` preset: line drawings of one theme (see illustrated.css).
+ * Motion (opt-in, `animated`): a leaf sways, 14 to 24 s a leg. The builder sets
+ * the pace (`p1..p3`) and the delay (`l1..l4`) as classes, so the markup holds
+ * no inline style. */
+@import "./illustrated.css";
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-leaves-sw {
+		to {
+			translate: 16px 8px;
+		}
+	}
+
+	@layer components {
+		[data-background="leaves"][data-animated] > [data-scene] .sw {
+			animation: nxgt-bg-leaves-sw 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p1 {
+			animation-duration: 14s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p2 {
+			animation-duration: 19s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p3 {
+			animation-duration: 24s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l1 {
+			animation-delay: 0s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l2 {
+			animation-delay: -3s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l3 {
+			animation-delay: -7s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l4 {
+			animation-delay: -11s;
+		}
+	}
+}

package/lib/backgrounds/css-react/linen.css

@@ -0,0 +1,44 @@
+/* The `linen` preset: a plain weave. A cross-hatch of 1 px threads every 4 px
+ * (whole pixels, so crisp at 1x) with faint seeded slubs (a 960 px tile), on a tint of the
+ * tone (`wash`). The threads are black in light and white in dark, like the
+ * grain overlay. Intensity never goes above the default (`vivid` draws as the default). Static: `animated` does nothing. React only: nothing in the
+ * shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	/* `vivid` is capped at the default strength: a texture under body text
+	 * never gets stronger (the tint and the specks read these two). */
+	[data-background="linen"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="linen"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			180deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c2) calc(var(--nxgt-bg-a1) * 0.6),
+				transparent
+			)
+		);
+	}
+	[data-background="linen"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+	}
+	[data-background="linen"] > [data-scene] .lw-v,
+	[data-background="linen"] > [data-scene] .lw-h {
+		fill: black;
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.1);
+		shape-rendering: crispEdges;
+	}
+	[data-background="linen"] > [data-scene] .lw-b {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.05);
+	}
+	[data-background="linen"] > [data-scene] .tx1,
+	[data-background="linen"] > [data-scene] .tx2 {
+		opacity: calc(var(--nxgt-bg-op) * 0.07);
+	}
+}

package/lib/backgrounds/css-react/marble.css

@@ -0,0 +1,55 @@
+/* The `marble` preset: polished marble. A seeded cloudy body and soft veins
+ * (an SVG: a cloud of `feTurbulence` on a seamless 960 px tile, and curves
+ * blurred soft; black in light, white in dark), very low in contrast, over a pale tint of the tone
+ * (`wash`). Intensity never goes above the default (`vivid` draws as the default). Static: `animated` does nothing. React only: nothing in the
+ * shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	/* `vivid` is capped at the default strength: a texture under body text
+	 * never gets stronger (the tint and the specks read these two). */
+	[data-background="marble"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="marble"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			135deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c2) calc(var(--nxgt-bg-a1) * 0.5),
+				transparent
+			)
+		);
+	}
+	[data-background="marble"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+	}
+	[data-background="marble"] > [data-scene] .tx1 {
+		opacity: calc(var(--nxgt-bg-op) * 0.08);
+	}
+	[data-background="marble"] > [data-scene] .mv-p,
+	[data-background="marble"] > [data-scene] .mh-p {
+		fill: none;
+		stroke: black;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+	[data-background="marble"] > [data-scene] .mv {
+		opacity: calc(
+			var(--nxgt-bg-op) *
+			0.2 *
+			(1 - var(--nxgt-bg-grain-invert) * 0.5)
+		);
+	}
+	[data-background="marble"] > [data-scene] .mh {
+		opacity: calc(
+			var(--nxgt-bg-op) *
+			0.07 *
+			(1 - var(--nxgt-bg-grain-invert) * 0.5)
+		);
+	}
+}

package/lib/backgrounds/css-react/music.css

@@ -0,0 +1,2 @@
+/* The `music` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/lib/backgrounds/css-react/night-sky.css

@@ -0,0 +1,41 @@
+/* The `night-sky` preset: line drawings of one theme (see illustrated.css).
+ * Motion (opt-in, `animated`): a star twinkles, 14 to 24 s a leg. The builder sets
+ * the pace (`p1..p3`) and the delay (`l1..l4`) as classes, so the markup holds
+ * no inline style. */
+@import "./illustrated.css";
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-night-sky-tw {
+		to {
+			opacity: 0.2;
+		}
+	}
+
+	@layer components {
+		[data-background="night-sky"][data-animated] > [data-scene] .tw {
+			animation: nxgt-bg-night-sky-tw 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p1 {
+			animation-duration: 14s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p2 {
+			animation-duration: 19s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p3 {
+			animation-duration: 24s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l1 {
+			animation-delay: 0s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l2 {
+			animation-delay: -3s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l3 {
+			animation-delay: -7s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l4 {
+			animation-delay: -11s;
+		}
+	}
+}

package/lib/backgrounds/css-react/paper.css

@@ -0,0 +1,49 @@
+/* The `paper` preset: a sheet of paper. A seeded fibre grain (an SVG of
+ * `feTurbulence` specks on a seamless 400 px tile: black in light, white in
+ * dark, like the grain overlay) over a warm tint that the tone cools or warms
+ * (`wash`: cream in light, the tone's colour mixed in). Intensity never goes above the default (`vivid` draws as the default). Static: `animated`
+ * does nothing. React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	/* `vivid` is capped at the default strength: a texture under body text
+	 * never gets stronger (the tint and the specks read these two). */
+	[data-background="paper"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="paper"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			180deg,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) calc(var(--nxgt-bg-a1) * 1.6),
+				color-mix(
+					in oklab,
+					rgb(250 233 196) calc(70% * (1 - var(--nxgt-bg-grain-invert))),
+					transparent
+				)
+			),
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c2) var(--nxgt-bg-a1),
+				color-mix(
+					in oklab,
+					rgb(250 233 196) calc(42% * (1 - var(--nxgt-bg-grain-invert))),
+					transparent
+				)
+			)
+		);
+	}
+	[data-background="paper"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+	}
+	[data-background="paper"] > [data-scene] .tx1 {
+		opacity: calc(var(--nxgt-bg-op) * 0.12);
+	}
+	[data-background="paper"] > [data-scene] .tx2 {
+		opacity: calc(var(--nxgt-bg-op) * 0.09);
+	}
+}

package/lib/backgrounds/css-react/plasma.css

@@ -0,0 +1,53 @@
+/* The `plasma` preset: a soft colour field. A seeded SVG of soft discs in
+ * radial gradients in the tone's three colours, three strengths each (`pm-l1..3`),
+ * over a tint (`wash`). Blended with the page: it adds light in dark. Motion
+ * (opt-in, `animated`): the field drifts. React only: nothing in the shared
+ * `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="plasma"] {
+		isolation: isolate;
+	}
+	[data-background="plasma"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			160deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent)
+		);
+	}
+	[data-background="plasma"] > [data-scene] > svg {
+		mix-blend-mode: var(--nxgt-bg-glow-blend);
+	}
+	[data-background="plasma"] > [data-scene] .pm-l1 {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.16);
+	}
+	[data-background="plasma"] > [data-scene] .pm-l2 {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.26);
+	}
+	[data-background="plasma"] > [data-scene] .pm-l3 {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.38);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-plasma-drift {
+		from {
+			transform: translate(-3%, -2%) scale(1);
+		}
+		to {
+			transform: translate(3%, 2%) scale(1.06);
+		}
+	}
+
+	@layer components {
+		[data-background="plasma"][data-animated] > [data-scene] .pm-field {
+			animation: nxgt-bg-plasma-drift 28s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+			transform-box: view-box;
+			transform-origin: 50% 50%;
+		}
+	}
+}

package/lib/backgrounds/css-react/rays.css

@@ -0,0 +1,67 @@
+/* The `rays` preset: a sunburst. A conic gradient of alternating rays from
+ * the top centre of the frame (`rays`, a layer twice the frame's size and
+ * centred on that point, faded with distance) over a tint (`wash`). CSS only.
+ * Blended with the page: it adds light in dark. Motion (opt-in, `animated`):
+ * the burst turns slowly. React only: nothing in the shared `css/` folder. */
+@layer components {
+	[data-background="rays"] {
+		overflow: clip;
+		isolation: isolate;
+	}
+	[data-background="rays"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: radial-gradient(
+			ellipse 70% 60% at 50% 0%,
+			color-mix(in oklab, var(--nxgt-bg-c2) var(--nxgt-bg-a2), transparent),
+			transparent 75%
+		);
+	}
+	[data-background="rays"] > [data-layer="rays"] {
+		position: absolute;
+		top: -100%;
+		right: -50%;
+		bottom: 0;
+		left: -50%;
+		opacity: var(--nxgt-bg-op);
+		mix-blend-mode: var(--nxgt-bg-glow-blend);
+		background-image: repeating-conic-gradient(
+			from 0deg at 50% 50%,
+			color-mix(in oklab, var(--nxgt-bg-c1) 34%, transparent) 0deg 6deg,
+			transparent 6deg 9deg,
+			color-mix(in oklab, var(--nxgt-bg-c2) 24%, transparent) 9deg 12deg,
+			transparent 12deg 18deg,
+			color-mix(in oklab, var(--nxgt-bg-c3) 28%, transparent) 18deg 21deg,
+			transparent 21deg 30deg
+		);
+		-webkit-mask-image: radial-gradient(
+			closest-side,
+			rgb(0 0 0 / 0.5) 0,
+			black 14%,
+			rgb(0 0 0 / 0.35) 55%,
+			transparent
+		);
+		mask-image: radial-gradient(
+			closest-side,
+			rgb(0 0 0 / 0.5) 0,
+			black 14%,
+			rgb(0 0 0 / 0.35) 55%,
+			transparent
+		);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-rays-turn {
+		to {
+			transform: rotate(30deg);
+		}
+	}
+
+	@layer components {
+		[data-background="rays"][data-animated] > [data-layer="rays"] {
+			animation: nxgt-bg-rays-turn 90s linear infinite
+				var(--nxgt-bg-play, running);
+		}
+	}
+}

package/lib/backgrounds/css-react/ripples.css

@@ -0,0 +1,68 @@
+/* The `ripples` preset: rings spreading from three seeded centres, one tone
+ * colour each (`rp-c1..3`), fading outward, over a tint (`wash`). Blended
+ * with the page: it adds light in dark. Motion (opt-in, `animated`): each set
+ * of rings breathes at its own pace (`rp-d1..3`). React only: nothing in the
+ * shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="ripples"] {
+		isolation: isolate;
+	}
+	[data-background="ripples"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: radial-gradient(
+			ellipse 90% 80% at 50% 50%,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			transparent 80%
+		);
+	}
+	[data-background="ripples"] > [data-scene] > svg {
+		mix-blend-mode: var(--nxgt-bg-glow-blend);
+	}
+	[data-background="ripples"] > [data-scene] circle {
+		fill: none;
+		stroke-width: 2;
+		opacity: var(--nxgt-bg-op);
+	}
+	[data-background="ripples"] > [data-scene] .rp-c1 {
+		stroke: var(--nxgt-bg-c1);
+	}
+	[data-background="ripples"] > [data-scene] .rp-c2 {
+		stroke: var(--nxgt-bg-c2);
+	}
+	[data-background="ripples"] > [data-scene] .rp-c3 {
+		stroke: var(--nxgt-bg-c3);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-ripples-breathe {
+		from {
+			transform: scale(0.94);
+		}
+		to {
+			transform: scale(1.06);
+		}
+	}
+
+	@layer components {
+		[data-background="ripples"][data-animated] > [data-scene] [class^="rp-c"] {
+			animation: nxgt-bg-ripples-breathe 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+			transform-box: fill-box;
+			transform-origin: 50% 50%;
+		}
+		[data-background="ripples"][data-animated] > [data-scene] .rp-d1 {
+			animation-direction: alternate;
+		}
+		[data-background="ripples"][data-animated] > [data-scene] .rp-d2 {
+			animation-duration: 19s;
+			animation-direction: alternate-reverse;
+		}
+		[data-background="ripples"][data-animated] > [data-scene] .rp-d3 {
+			animation-duration: 24s;
+		}
+	}
+}

package/lib/backgrounds/css-react/school.css

@@ -0,0 +1,2 @@
+/* The `school` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/lib/backgrounds/css-react/science.css

@@ -0,0 +1,2 @@
+/* The `science` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/lib/backgrounds/css-react/sport.css

@@ -0,0 +1,2 @@
+/* The `sport` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/lib/backgrounds/css-react/travel.css

@@ -0,0 +1,2 @@
+/* The `travel` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";