@nxgt/material 3.8.1 → 3.9.0

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

@@ -0,0 +1,200 @@
+/* The celestial presets (`eclipse`, `meteor-shower`, `ringed-planet`,
+ * `northern-lights`) and the `sky` overlay, which draws the moon or one of
+ * them over any preset. Core's `/backgrounds/celestial` builds the scenes: the
+ * root is `mn cl-<preset>`, the colours are the `k1..k3` and `s1..s3` classes
+ * of scene.css, and a scene holds no inline style. Both kinds of scene sit in
+ * a `[data-scene][data-celestial]` div, which is what this file styles, so the
+ * look is the same alone and as a sky. Discreet like `moon.css`: a faint
+ * watermark in light (multiplied into the page), silver light in dark.
+ *
+ * Motion (opt-in, `animated`): stars twinkle, meteors glide, ribbons drift;
+ * never under `prefers-reduced-motion`. React only. */
+@import "../css/scene.css";
+
+@layer components {
+	/* The wash behind a celestial preset, as the moon's: two faint pools of
+	 * the tone, the strength each intensity sets. */
+	:is(
+		[data-background="eclipse"],
+		[data-background="meteor-shower"],
+		[data-background="ringed-planet"]
+	) > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 70% 60% at 80% 16%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 72%
+			),
+			radial-gradient(
+				ellipse 60% 55% at 12% 92%,
+				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	/* The lights hang from the top edge: a pool across it, one at the foot. */
+	[data-background="northern-lights"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 90% 45% at 50% 0%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 75%
+			),
+			radial-gradient(
+				ellipse 60% 50% at 14% 96%,
+				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	[data-background] > [data-scene][data-celestial] {
+		overflow: hidden;
+		container: nxgt-sky / inline-size;
+		/* In light the scene is multiplied into the page: a faint watermark. */
+		mix-blend-mode: multiply;
+	}
+
+	/* The scene is written for 0.8 at the default strength: subtle 0.47,
+	 * vivid the full 1. */
+	[data-background] > [data-scene][data-celestial] > .mn :is(.mo, .mh) {
+		opacity: calc(var(--nxgt-bg-op) / 0.9);
+	}
+
+	/* The scene has no viewBox (lengths are pixels, positions shares of the
+	 * container): its bodies, halos and stars draw past their own origin. */
+	[data-background] > [data-scene][data-celestial] .pt {
+		overflow: visible;
+	}
+
+	/* The lit part of the body is lighter still. */
+	[data-background] > [data-scene][data-celestial] .md {
+		opacity: 0.55;
+	}
+
+	/* A narrow container: the moon and the eclipse at half size and the
+	 * planet and its ring at two thirds, so they stay whole in their corner
+	 * (the cut-out of an eclipse or a planet is in its halo too). */
+	@container nxgt-sky (max-width: 640px) {
+		[data-background]
+			> [data-scene][data-celestial]
+			.mn:not(.cl-ringed-planet)
+			.mg
+			> .mo,
+		[data-background] > [data-scene][data-celestial] .cl-eclipse .mh > circle {
+			transform: scale(0.5);
+		}
+		[data-background]
+			> [data-scene][data-celestial]
+			.cl-ringed-planet
+			:is(.mg > .mo, .mh > circle) {
+			transform: scale(0.65);
+		}
+	}
+
+	/* In dark it adds nothing but light, and the body is silver, lighter than the lifted tone. */
+	:is(.dark, [data-theme="dark"])
+		[data-background]
+		> [data-scene][data-celestial],
+	[data-background]:is(.dark, [data-theme="dark"])
+		> [data-scene][data-celestial] {
+		mix-blend-mode: normal;
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background]
+		> [data-scene][data-celestial]
+		.md,
+	[data-background]:is(.dark, [data-theme="dark"])
+		> [data-scene][data-celestial]
+		.md {
+		color: color-mix(in oklab, var(--nxgt-bg-c2) 30%, white);
+		opacity: 0.78;
+	}
+
+	/* The delay classes (`l1..l4`) only set a number, which the animations
+	 * above read: one rule each, whatever an animation's own specificity. */
+	[data-background] > [data-scene][data-celestial] .l1 {
+		--nxgt-sky-delay: 0s;
+	}
+	[data-background] > [data-scene][data-celestial] .l2 {
+		--nxgt-sky-delay: -2.5s;
+	}
+	[data-background] > [data-scene][data-celestial] .l3 {
+		--nxgt-sky-delay: -5s;
+	}
+	[data-background] > [data-scene][data-celestial] .l4 {
+		--nxgt-sky-delay: -7.5s;
+	}
+
+	/* The ribbons and the meteors move from their own box. */
+	[data-background] > [data-scene][data-celestial] .cl-northern-lights .au {
+		transform-box: fill-box;
+		transform-origin: 50% 0;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-sky-twinkle {
+		to {
+			opacity: 0.3;
+		}
+	}
+	@keyframes nxgt-bg-sky-meteor-fade {
+		0%,
+		100% {
+			opacity: 0;
+		}
+		6% {
+			opacity: 1;
+		}
+		30% {
+			opacity: 0;
+		}
+	}
+	@keyframes nxgt-bg-sky-meteor-glide {
+		0%,
+		100% {
+			transform: translate(0, 0);
+		}
+		30% {
+			transform: translate(-72px, 48px);
+		}
+	}
+	@keyframes nxgt-bg-sky-drift {
+		to {
+			transform: translate(3px, 1px) scaleY(1.1);
+		}
+	}
+
+	@layer components {
+		[data-background][data-animated] > [data-scene][data-celestial] .tw {
+			animation: nxgt-bg-sky-twinkle 8s ease-in-out var(--nxgt-sky-delay, 0s)
+				infinite alternate var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-meteor-shower
+			.mt {
+			animation: nxgt-bg-sky-meteor-fade 10s linear var(--nxgt-sky-delay, 0s)
+				infinite var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-meteor-shower
+			.mt
+			> .mo {
+			animation: nxgt-bg-sky-meteor-glide 10s ease-out var(--nxgt-sky-delay, 0s)
+				infinite var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-northern-lights
+			.au {
+			animation: nxgt-bg-sky-drift 14s ease-in-out var(--nxgt-sky-delay, 0s)
+				infinite alternate var(--nxgt-bg-play, running);
+		}
+	}
+}

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

@@ -0,0 +1,175 @@
+/* The `icons` preset: Font Awesome icons, each a `<use>` of a sprite file the
+ * app serves, over a faint wash. The scene is core's `buildIconScene`
+ * (`@nxgt/material-core/backgrounds/icons`); this file gives it its colours,
+ * its constellation threads and its motion. A scene holds no `style`: an icon
+ * carries a tone class (`k1..k3`, colours in scene.css) and the root carries
+ * `ic-so0..ic-so10` and `ic-so85` (a duotone icon's second layer, in tenths, or 0.85) and, for
+ * `duotone: 'tones'`, `ic-tones`.
+ *
+ * The sprites read `--fa-primary-color`, `--fa-secondary-color` and
+ * `--fa-secondary-opacity`; custom properties inherit into the `<use>` copy.
+ * By default the second layer is the same tone, faded (`opacity`); `ic-tones`
+ * takes the next tone for it, nearly opaque. A flat (non-duotone) style reads
+ * the tone through `currentColor`. Motion (opt-in, `animated`): each icon
+ * drifts a few pixels along one of four vectors (`iv1..4`) at one of four
+ * paces (`ia`, delay `id1..4`), on `translate`, because `transform` carries
+ * its place. React only: nothing in the shared `css/` folder. */
+@import "../css/motifs.css";
+
+@layer components {
+	[data-background="icons"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 75% 65% at 22% 18%,
+				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+				transparent 72%
+			),
+			radial-gradient(
+				ellipse 60% 60% at 86% 90%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	[data-background="icons"] > [data-scene] {
+		overflow: hidden;
+	}
+
+	/* Primary layer: the icon's tone. Second layer: the same tone, faded. */
+	[data-background="icons"] > [data-scene] .ic.k1 {
+		--fa-primary-color: var(--nxgt-bg-c1);
+		--fa-secondary-color: var(--nxgt-bg-c1);
+	}
+	[data-background="icons"] > [data-scene] .ic.k2 {
+		--fa-primary-color: var(--nxgt-bg-c2);
+		--fa-secondary-color: var(--nxgt-bg-c2);
+	}
+	[data-background="icons"] > [data-scene] .ic.k3 {
+		--fa-primary-color: var(--nxgt-bg-c3);
+		--fa-secondary-color: var(--nxgt-bg-c3);
+	}
+
+	/* Two tones: the second layer takes the next tone. */
+	[data-background="icons"] > [data-scene] > .ic-tones .ic.k1 {
+		--fa-secondary-color: var(--nxgt-bg-c2);
+	}
+	[data-background="icons"] > [data-scene] > .ic-tones .ic.k2 {
+		--fa-secondary-color: var(--nxgt-bg-c3);
+	}
+	[data-background="icons"] > [data-scene] > .ic-tones .ic.k3 {
+		--fa-secondary-color: var(--nxgt-bg-c1);
+	}
+
+	/* The second layer's opacity, in tenths (`secondaryOpacity`). */
+	[data-background="icons"] > [data-scene] > .ic-so0 .ic {
+		--fa-secondary-opacity: 0;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so1 .ic {
+		--fa-secondary-opacity: 0.1;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so2 .ic {
+		--fa-secondary-opacity: 0.2;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so3 .ic {
+		--fa-secondary-opacity: 0.3;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so4 .ic {
+		--fa-secondary-opacity: 0.4;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so5 .ic {
+		--fa-secondary-opacity: 0.5;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so6 .ic {
+		--fa-secondary-opacity: 0.6;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so7 .ic {
+		--fa-secondary-opacity: 0.7;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so8 .ic {
+		--fa-secondary-opacity: 0.8;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so9 .ic {
+		--fa-secondary-opacity: 0.9;
+	}
+	[data-background="icons"] > [data-scene] > .ic-so10 .ic {
+		--fa-secondary-opacity: 1;
+	}
+	/* 0.85: the default of two tones, or a `secondaryOpacity` of 0.85. */
+	[data-background="icons"] > [data-scene] > .ic-so85 .ic {
+		--fa-secondary-opacity: 0.85;
+	}
+
+	/* The constellation's threads and dots. */
+	[data-background="icons"] > [data-scene] .ic-ln {
+		stroke: var(--nxgt-bg-c1);
+		stroke-width: 0.7;
+		stroke-linecap: round;
+		opacity: 0.4;
+	}
+	[data-background="icons"] > [data-scene] .ic-dt {
+		fill: var(--nxgt-bg-c1);
+		opacity: 0.5;
+	}
+	[data-background="icons"] > [data-scene] .ic-ln.k2 {
+		stroke: var(--nxgt-bg-c2);
+	}
+	[data-background="icons"] > [data-scene] .ic-ln.k3 {
+		stroke: var(--nxgt-bg-c3);
+	}
+	[data-background="icons"] > [data-scene] .ic-dt.k2 {
+		fill: var(--nxgt-bg-c2);
+	}
+	[data-background="icons"] > [data-scene] .ic-dt.k3 {
+		fill: var(--nxgt-bg-c3);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-ic-1 {
+		to {
+			translate: 14px 10px;
+		}
+	}
+	@keyframes nxgt-bg-ic-2 {
+		to {
+			translate: -12px 12px;
+		}
+	}
+	@keyframes nxgt-bg-ic-3 {
+		to {
+			translate: 12px -12px;
+		}
+	}
+	@keyframes nxgt-bg-ic-4 {
+		to {
+			translate: -14px -9px;
+		}
+	}
+
+	@layer components {
+		[data-background="icons"][data-animated] > [data-scene] .ia {
+			animation: nxgt-bg-ic-1 18s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="icons"][data-animated] > [data-scene] .iv2 {
+			animation-name: nxgt-bg-ic-2;
+		}
+		[data-background="icons"][data-animated] > [data-scene] .iv3 {
+			animation-name: nxgt-bg-ic-3;
+		}
+		[data-background="icons"][data-animated] > [data-scene] .iv4 {
+			animation-name: nxgt-bg-ic-4;
+		}
+		[data-background="icons"][data-animated] > [data-scene] .id2 {
+			animation-delay: -4s;
+		}
+		[data-background="icons"][data-animated] > [data-scene] .id3 {
+			animation-delay: -9s;
+		}
+		[data-background="icons"][data-animated] > [data-scene] .id4 {
+			animation-delay: -13s;
+		}
+	}
+}

package/lib/components/components.css

@@ -21,13 +21,10 @@
 @import "./ui/overlays/drawer/vaul-drawer.css";
 @import "./ui/overlays/drawer/vaul-keyframes.css";
 @import "./ui/fields/otp-field/input-otp.css";
-@import "./ui/feedback/spinner/spinner.css";
-@import "./ui/feedback/progress/progress.css";
+/* Feedback: spinner, state scenes, progress, loading and typing indicators. */
+@import "./ui/feedback/feedback.css";
 /* Quiz: the confetti behind a great score. */
 @import "./ui/widgets/education/quizzes/quiz-celebration.css";
-@import "./ui/feedback/loading-indicator/loading-indicator.css";
-/* TypingIndicator's wave (ChatTypingIndicator, ChatMessageList). */
-@import "./ui/feedback/typing-indicator/typing-indicator.css";
 @import "./ui/media/carousel/carousel.css";
 @import "./ui/media/carousel/carousel-first-frame.css";
 @import "./ui/media/media-player/nxgt-media-player.css";

package/lib/components/ui/feedback/feedback.css

@@ -0,0 +1,7 @@
+@import "./spinner/spinner.css";
+/* Illustration: the classes of the state scenes (EmptyState, ErrorState, @nxgt/material/illustrations). */
+@import "./state-frame/illustration.css";
+@import "./progress/progress.css";
+@import "./loading-indicator/loading-indicator.css";
+/* TypingIndicator's wave (ChatTypingIndicator, ChatMessageList). */
+@import "./typing-indicator/typing-indicator.css";

package/lib/components/ui/feedback/state-frame/illustration.css

@@ -0,0 +1,171 @@
+/* Illustration (`@nxgt/material/illustrations`) and the scenes EmptyState and
+ * ErrorState draw with it. The scene is core's `buildIllustration`: it names
+ * classes and sets no colour, so everything below is a rule on theme tokens
+ * (`--<tone>-text` follow the light and the dark theme). No inline style.
+ *
+ * A Font Awesome duotone sprite reads `--fa-primary-color`,
+ * `--fa-secondary-color` and `--fa-secondary-opacity`: the second layer is the
+ * same tone, fainter (`ill-duo-opacity`), or another tone (`ill-duo-tones`). */
+@layer components {
+	[data-slot="illustration"] {
+		display: block;
+		flex-shrink: 0;
+		max-width: 100%;
+		aspect-ratio: 4 / 3;
+	}
+
+	[data-slot="illustration"][data-size="sm"] {
+		width: 7.5rem;
+	}
+
+	[data-slot="illustration"][data-size="md"] {
+		width: 11.875rem;
+	}
+
+	[data-slot="illustration"][data-size="lg"] {
+		width: 17.5rem;
+	}
+
+	[data-slot="illustration"] > svg {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	/* The tone: its colour, and the one the second layer takes in `tones`. */
+	.ill-primary {
+		--ill: var(--primary-text);
+		--ill-d: var(--tertiary-text);
+	}
+
+	.ill-secondary {
+		--ill: var(--secondary-text);
+		--ill-d: var(--primary-text);
+	}
+
+	.ill-tertiary {
+		--ill: var(--tertiary-text);
+		--ill-d: var(--secondary-text);
+	}
+
+	.ill-error {
+		--ill: var(--error-text);
+		--ill-d: var(--warning-text);
+	}
+
+	.ill-warning {
+		--ill: var(--warning-text);
+		--ill-d: var(--error-text);
+	}
+
+	.ill-success {
+		--ill: var(--success-text);
+		--ill-d: var(--primary-text);
+	}
+
+	/* Who takes which colour: the hero and the first and fourth satellites the
+	 * tone, the second and third the secondary and tertiary text. */
+	.ill-hero,
+	.ill-s0,
+	.ill-s3 {
+		--c: var(--ill);
+	}
+
+	.ill-s1 {
+		--c: var(--secondary-text);
+	}
+
+	.ill-s2 {
+		--c: var(--tertiary-text);
+	}
+
+	.ill-hero,
+	.ill-sat {
+		color: var(--c);
+		--fa-primary-color: var(--c);
+		--fa-secondary-color: var(--c);
+		--fa-primary-opacity: 1;
+		--fa-secondary-opacity: 0.4;
+	}
+
+	.ill-duo-tones :is(.ill-hero, .ill-sat) {
+		--fa-secondary-color: var(--ill-d);
+		--fa-secondary-opacity: 0.85;
+	}
+
+	.ill-plate {
+		fill: color-mix(in oklab, var(--ill) 17%, transparent);
+	}
+
+	/* The error plate (a gem) is rounded by a stroke of its own colour. */
+	.ill-error .ill-plate {
+		stroke: color-mix(in oklab, var(--ill) 17%, transparent);
+		stroke-width: 12;
+		stroke-linejoin: round;
+	}
+
+	.ill-ring {
+		stroke: color-mix(in oklab, var(--ill) 30%, transparent);
+		stroke-width: 1;
+	}
+
+	.ill-satbg {
+		fill: var(--card);
+		stroke: color-mix(in oklab, var(--c) 35%, transparent);
+		stroke-width: 1;
+	}
+
+	.ill-k0 {
+		fill: var(--tertiary-text);
+	}
+
+	.ill-k1 {
+		fill: var(--ill);
+	}
+
+	/* Opt-in motion (`animated`): the satellites drift, the sparkles twinkle. */
+	@media (prefers-reduced-motion: no-preference) {
+		[data-slot="illustration"][data-animated] :is(.ill-satbg, .ill-sat) {
+			animation: nxgt-ill-drift 6s ease-in-out infinite alternate;
+		}
+
+		[data-slot="illustration"][data-animated] .ill-s1 {
+			animation-delay: -1.5s;
+		}
+
+		[data-slot="illustration"][data-animated] .ill-s2 {
+			animation-delay: -3s;
+		}
+
+		[data-slot="illustration"][data-animated] .ill-s3 {
+			animation-delay: -4.5s;
+		}
+
+		[data-slot="illustration"][data-animated] .ill-spark {
+			transform-box: fill-box;
+			transform-origin: center;
+			animation: nxgt-ill-twinkle 3.2s ease-in-out infinite alternate;
+		}
+
+		[data-slot="illustration"][data-animated] .ill-spark.ill-k1 {
+			animation-delay: -1.6s;
+		}
+	}
+}
+
+@keyframes nxgt-ill-drift {
+	to {
+		transform: translateY(-3px);
+	}
+}
+
+@keyframes nxgt-ill-twinkle {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0.45;
+		transform: scale(0.75);
+	}
+}

package/lib/theme-picker/theme-picker.css

@@ -14,6 +14,7 @@
 @import "./theme-tile-background.css";
 @import "./theme-tile-textures.css";
 @import "./theme-tile-textures-night.css";
+@import "./theme-tile-icons.css";
 @import "./theme-picker-list.css";
 @layer components {
 	[data-slot="theme-picker"] {

package/lib/theme-picker/theme-tile-icons.css

@@ -0,0 +1,50 @@
+/* ThemePicker's mini background, the `icons` preset: the first four icons the
+ * theme names, each a `<use>` of the app's sprite, in the tile's own tones. A
+ * sprite that is missing draws nothing and the wash stays. A duotone icon's
+ * second layer is the same tone, faded (the sprite's `--fa-secondary-opacity`). */
+@layer components {
+	[data-slot="theme-tile-background"][data-preset="icons"] {
+		position: relative;
+		--mini-pattern: none;
+	}
+	[data-slot="theme-tile-icon"] {
+		position: absolute;
+		inline-size: 1.15rem;
+		block-size: 1.15rem;
+		color: var(--mini-a);
+		--fa-primary-color: var(--mini-a);
+		--fa-secondary-color: var(--mini-a);
+		--fa-secondary-opacity: 0.4;
+		opacity: 0.8;
+	}
+	[data-slot="theme-tile-icon"][data-n="1"] {
+		inset-inline-start: 10%;
+		inset-block-start: 14%;
+		rotate: -10deg;
+	}
+	[data-slot="theme-tile-icon"][data-n="2"] {
+		inset-inline-start: 68%;
+		inset-block-start: 10%;
+		inline-size: 1.4rem;
+		block-size: 1.4rem;
+		--fa-primary-color: var(--mini-b);
+		--fa-secondary-color: var(--mini-b);
+		color: var(--mini-b);
+		rotate: 8deg;
+	}
+	[data-slot="theme-tile-icon"][data-n="3"] {
+		inset-inline-start: 36%;
+		inset-block-start: 52%;
+		--fa-primary-color: var(--mini-c);
+		--fa-secondary-color: var(--mini-c);
+		color: var(--mini-c);
+		rotate: 6deg;
+	}
+	[data-slot="theme-tile-icon"][data-n="4"] {
+		inset-inline-start: 82%;
+		inset-block-start: 56%;
+		inline-size: 1rem;
+		block-size: 1rem;
+		rotate: -14deg;
+	}
+}