@nxgt/material 3.7.5 → 3.8.0

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

@@ -0,0 +1,29 @@
+/* ThemePicker, `layout="list"`: one column of rows (see theme-picker.css). */
+@layer components {
+	/* List: the preview is a small chip at the start, the label fills the row. */
+	[data-layout="list"] [data-slot="theme-tile"] {
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		min-height: 3.25rem;
+	}
+	[data-layout="list"] [data-slot="theme-tile-background"] {
+		grid-column: 1;
+		grid-row: 1;
+		inline-size: 3rem;
+		block-size: 2.25rem;
+	}
+	[data-layout="list"] [data-slot="theme-tile-label"] {
+		grid-column: 2;
+		grid-row: 1;
+	}
+	[data-layout="list"] [data-slot="theme-tile-swatches"] {
+		grid-column: 3;
+		grid-row: 1;
+	}
+	[data-layout="list"] [data-slot="theme-tile-check"] {
+		position: static;
+		grid-column: 4;
+		grid-row: 1;
+		box-shadow: none;
+		background: transparent;
+	}
+}

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

@@ -0,0 +1,192 @@
+/* ThemePicker: a radiogroup of tiles, each one a zone of its own theme.
+ *
+ * The tile reads its colours from the theme it previews (`NxgtTheme` puts
+ * `data-nxgt-theme` on the tile), so the swatches and the mini background are
+ * that theme's `--primary`, `--secondary` and `--tertiary` in the page's mode.
+ * The selected style is the library's "A Refined": a `--primary-text` tint (12 %,
+ * hover 8 %, both 18 %), a 3px start bar and the label in primary text. No
+ * inline style: every value here is a token or a data attribute.
+ * Reduced motion: reduced-motion.css stops `[data-slot]` transitions.
+ *
+ * Opt-in: `@import "@nxgt/material/theme-picker.css"` (after styles.css), for the
+ * apps that use `@nxgt/material/theme-picker`. Not part of styles.css. This file
+ * pulls in the mini background (wash, tones, textures) and the list layout. */
+@import "./theme-tile-background.css";
+@import "./theme-tile-textures.css";
+@import "./theme-tile-textures-night.css";
+@import "./theme-picker-list.css";
+@layer components {
+	[data-slot="theme-picker"] {
+		container-type: inline-size;
+		min-width: 0;
+	}
+
+	[data-slot="theme-picker-group"] {
+		display: grid;
+		gap: 0.5rem;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		/* Room for the 2px focus ring and its 2px offset. */
+		padding: 4px;
+		outline: none;
+	}
+	@container (min-width: 28rem) {
+		[data-layout="grid"] > [data-slot="theme-picker-group"] {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+	}
+	@container (min-width: 44rem) {
+		[data-layout="grid"] > [data-slot="theme-picker-group"] {
+			grid-template-columns: repeat(4, minmax(0, 1fr));
+		}
+	}
+	/* A narrow column (a phone sheet): the swatches drop under the label, so a name is never cut. */
+	@container (max-width: 20rem) {
+		[data-layout="grid"]
+			[data-slot="theme-tile"]:has([data-slot="theme-tile-background"])
+			[data-slot="theme-tile-label"] {
+			grid-column: 1 / -1;
+		}
+		[data-layout="grid"]
+			[data-slot="theme-tile"]:has([data-slot="theme-tile-background"])
+			[data-slot="theme-tile-swatches"] {
+			grid-column: 1 / -1;
+			grid-row: 3;
+		}
+	}
+	[data-layout="list"] > [data-slot="theme-picker-group"] {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	[data-slot="theme-tile"] {
+		--tile-surface: var(--card);
+		--tile-hover: color-mix(
+			in oklab,
+			var(--primary-text) 8%,
+			var(--tile-surface)
+		);
+		--tile-selected: color-mix(
+			in oklab,
+			var(--primary-text) 12%,
+			var(--tile-surface)
+		);
+		--tile-selected-hover: color-mix(
+			in oklab,
+			var(--primary-text) 18%,
+			var(--tile-surface)
+		);
+		position: relative;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+		align-content: start;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+		/* A touch target on a phone: the tile is taller than 44px with its preview, and
+		 * without one it still reaches it. */
+		min-height: 2.75rem;
+		padding: 0.5rem 0.625rem;
+		border: 1px solid var(--border);
+		border-radius: var(--nxgt-item-radius, 0.75rem);
+		background: var(--tile-surface);
+		color: var(--card-foreground);
+		font: inherit;
+		text-align: start;
+		cursor: pointer;
+		transition: background-color var(--nxgt-motion-effects-fast-duration, 150ms)
+			var(--nxgt-motion-effects-fast, ease);
+	}
+	[data-slot="theme-tile"]:hover {
+		background: var(--tile-hover);
+	}
+	[data-slot="theme-tile"][data-state="checked"] {
+		background: var(--tile-selected);
+	}
+	[data-slot="theme-tile"][data-state="checked"]:hover {
+		background: var(--tile-selected-hover);
+	}
+	/* The start bar of the selected tile, inside its rounded corners. */
+	[data-slot="theme-tile"][data-state="checked"]::before {
+		content: "";
+		position: absolute;
+		inset-block: 0.5rem;
+		inset-inline-start: 0;
+		inline-size: 3px;
+		border-radius: 0 3px 3px 0;
+		background: var(--primary-text);
+	}
+	[data-slot="theme-tile"]:dir(rtl)[data-state="checked"]::before {
+		border-radius: 3px 0 0 3px;
+	}
+	[data-slot="theme-tile"][data-state="checked"]
+		[data-slot="theme-tile-label"] {
+		color: var(--primary-text);
+	}
+	[data-slot="theme-tile"]:focus-visible {
+		outline: 2px solid var(--primary-text);
+		outline-offset: 2px;
+	}
+
+	/* The check sits where the swatches would run into it: the swatches stay in the
+	 * label row, the check is the row's last cell (or the corner of the preview). */
+	[data-slot="theme-tile-swatches"] {
+		display: inline-flex;
+		grid-column: 2;
+		grid-row: 2;
+		gap: 0.25rem;
+	}
+	[data-slot="theme-tile-swatches"] > i {
+		inline-size: 0.875rem;
+		block-size: 0.875rem;
+		border-radius: 9999px;
+		/* The ring keeps a swatch the colour of the surface visible. */
+		box-shadow: 0 0 0 1px
+			color-mix(in oklab, var(--foreground) 22%, transparent);
+	}
+	[data-slot="theme-tile-swatches"] > [data-swatch="primary"] {
+		background: var(--primary);
+	}
+	[data-slot="theme-tile-swatches"] > [data-swatch="secondary"] {
+		background: var(--secondary);
+	}
+	[data-slot="theme-tile-swatches"] > [data-swatch="tertiary"] {
+		background: var(--tertiary);
+	}
+
+	[data-slot="theme-tile-label"] {
+		grid-column: 1;
+		grid-row: 2;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.25rem;
+	}
+	[data-slot="theme-tile-check"] {
+		position: absolute;
+		inset-block-start: 0.875rem;
+		inset-inline-end: 0.875rem;
+		padding: 0.125rem;
+		color: var(--primary-text);
+		inline-size: 1.25rem;
+		block-size: 1.25rem;
+		border-radius: 9999px;
+		background: var(--tile-surface);
+		box-shadow: 0 0 0 1px var(--border);
+	}
+
+	/* Without a preview, the label row is the first row. */
+	[data-slot="theme-tile"]:not(:has([data-slot="theme-tile-background"]))
+	[data-slot="theme-tile-label"],
+	[data-slot="theme-tile"]:not(:has([data-slot="theme-tile-background"]))
+		[data-slot="theme-tile-swatches"] {
+		grid-row: 1;
+	}
+	[data-slot="theme-tile"]:not(:has([data-slot="theme-tile-background"]))
+		[data-slot="theme-tile-check"] {
+		inset-block-start: 50%;
+		translate: 0 -50%;
+		inset-inline-end: 0.5rem;
+	}
+}

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

@@ -0,0 +1,77 @@
+/* ThemePicker's mini background: the theme's wash, its tones and intensities,
+ * from the tile's own zone tokens. The texture of each preset is in
+ * theme-tile-textures.css. */
+@layer components {
+	/* The mini background: the theme's wash and the texture of its preset. */
+	[data-slot="theme-tile-background"] {
+		--mini-a: var(--primary);
+		--mini-b: var(--primary);
+		--mini-c: var(--primary);
+		--mini-k: 28%;
+		grid-column: 1 / -1;
+		grid-row: 1;
+		display: block;
+		block-size: 3.5rem;
+		overflow: hidden;
+		border-radius: calc(var(--nxgt-item-radius, 0.75rem) - 0.25rem);
+		background-color: var(--background);
+		background-image:
+			var(--mini-pattern, linear-gradient(transparent, transparent)),
+			radial-gradient(
+				circle at 18% 20%,
+				color-mix(in oklab, var(--mini-a) var(--mini-k), transparent),
+				transparent 62%
+			),
+			radial-gradient(
+				circle at 88% 85%,
+				color-mix(in oklab, var(--mini-b) var(--mini-k), transparent),
+				transparent 60%
+			),
+			radial-gradient(
+				circle at 78% 15%,
+				color-mix(
+					in oklab,
+					var(--mini-c) calc(var(--mini-k) * 0.7),
+					transparent
+				),
+				transparent 50%
+			);
+		background-size: var(--mini-size, auto), auto, auto, auto;
+		background-position:
+			var(--mini-pos, 0 0),
+			0 0,
+			0 0,
+			0 0;
+		box-shadow: inset 0 0 0 1px
+			color-mix(in oklab, var(--foreground) 8%, transparent);
+	}
+	[data-slot="theme-tile-background"][data-tone="secondary"] {
+		--mini-a: var(--secondary);
+		--mini-b: var(--secondary);
+		--mini-c: var(--secondary);
+	}
+	[data-slot="theme-tile-background"][data-tone="tertiary"] {
+		--mini-a: var(--tertiary);
+		--mini-b: var(--tertiary);
+		--mini-c: var(--tertiary);
+	}
+	[data-slot="theme-tile-background"][data-tone="mixed"] {
+		--mini-a: var(--primary);
+		--mini-b: var(--secondary);
+		--mini-c: var(--tertiary);
+	}
+	[data-slot="theme-tile-background"][data-tone="neutral"] {
+		--mini-a: var(--muted-foreground);
+		--mini-b: var(--muted-foreground);
+		--mini-c: var(--muted-foreground);
+	}
+	[data-slot="theme-tile-background"][data-tone="none"] {
+		--mini-k: 0%;
+	}
+	[data-slot="theme-tile-background"][data-intensity="subtle"] {
+		--mini-k: 18%;
+	}
+	[data-slot="theme-tile-background"][data-intensity="vivid"] {
+		--mini-k: 42%;
+	}
+}

package/lib/theme-picker/theme-tile-textures-night.css

@@ -0,0 +1,63 @@
+/* ThemePicker's mini background, the night textures: the stars of `night-sky`
+ * and the moon, a disc over the stars (see theme-tile-textures.css). */
+@layer components {
+	[data-slot="theme-tile-background"][data-preset="night-sky"] {
+		--mini-pattern:
+			radial-gradient(
+				1px 1px at 12% 30%,
+				color-mix(in oklab, var(--mini-c) 45%, transparent) 98%,
+				transparent
+			),
+			radial-gradient(
+				1.5px 1.5px at 38% 68%,
+				color-mix(in oklab, var(--mini-c) 45%, transparent) 98%,
+				transparent
+			),
+			radial-gradient(
+				1px 1px at 62% 24%,
+				color-mix(in oklab, var(--mini-c) 45%, transparent) 98%,
+				transparent
+			),
+			radial-gradient(
+				1.5px 1.5px at 84% 58%,
+				color-mix(in oklab, var(--mini-c) 45%, transparent) 98%,
+				transparent
+			),
+			radial-gradient(
+				1px 1px at 92% 20%,
+				color-mix(in oklab, var(--mini-c) 45%, transparent) 98%,
+				transparent
+			);
+		--mini-size: 100% 100%;
+	}
+	[data-slot="theme-tile-background"][data-preset="moon"] {
+		--mini-pattern:
+			radial-gradient(
+				circle at 80% 38%,
+				color-mix(in oklab, var(--mini-a) var(--mini-k), var(--background))
+					0.7rem,
+				transparent 0.72rem
+			),
+			radial-gradient(
+				circle at 74% 44%,
+				color-mix(in oklab, var(--mini-c) 80%, var(--foreground)) 0.85rem,
+				transparent 0.87rem
+			),
+			radial-gradient(
+				1px 1px at 18% 28%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			),
+			radial-gradient(
+				1.5px 1.5px at 40% 66%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			),
+			radial-gradient(
+				1px 1px at 55% 22%,
+				color-mix(in oklab, var(--mini-b) 34%, transparent) 98%,
+				transparent
+			);
+		--mini-size: 100% 100%;
+	}
+}

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

@@ -0,0 +1,153 @@
+/* ThemePicker's mini background, the textures: one per preset the shipped
+ * themes use, hinting at it and nothing else. Other presets show the wash alone
+ * (the wash, tones and intensities are in theme-tile-background.css). */
+@layer components {
+	[data-slot="theme-tile-background"][data-preset="waves"] {
+		--mini-pattern: radial-gradient(
+			circle at 50% 100%,
+			transparent 0.5rem,
+			color-mix(in oklab, var(--mini-a) 40%, transparent) 0.52rem 0.6rem,
+			transparent 0.62rem
+		);
+		--mini-size: 1.2rem 0.7rem;
+	}
+	[data-slot="theme-tile-background"][data-preset="topography"] {
+		--mini-pattern: repeating-radial-gradient(
+			circle at 75% 130%,
+			transparent 0 0.4rem,
+			color-mix(in oklab, var(--mini-a) 30%, transparent) 0.4rem 0.45rem
+		);
+	}
+	[data-slot="theme-tile-background"][data-preset="graph-paper"] {
+		--mini-pattern:
+			linear-gradient(
+				color-mix(in oklab, var(--mini-a) 30%, transparent) 1px,
+				transparent 1px
+			),
+			linear-gradient(
+				90deg,
+				color-mix(in oklab, var(--mini-a) 30%, transparent) 1px,
+				transparent 1px
+			);
+		--mini-size: 0.75rem 0.75rem, 0.75rem 0.75rem;
+	}
+	[data-slot="theme-tile-background"][data-preset="linen"] {
+		--mini-pattern:
+			repeating-linear-gradient(
+				0deg,
+				color-mix(in oklab, var(--mini-a) 30%, transparent) 0 1px,
+				transparent 1px 3px
+			),
+			repeating-linear-gradient(
+				90deg,
+				color-mix(in oklab, var(--mini-a) 30%, transparent) 0 1px,
+				transparent 1px 3px
+			);
+	}
+	[data-slot="theme-tile-background"][data-preset="chevrons"] {
+		--mini-pattern:
+			linear-gradient(
+				135deg,
+				color-mix(in oklab, var(--mini-a) 22%, transparent) 25%,
+				transparent 25%
+			),
+			linear-gradient(
+				225deg,
+				color-mix(in oklab, var(--mini-a) 22%, transparent) 25%,
+				transparent 25%
+			),
+			linear-gradient(
+				315deg,
+				color-mix(in oklab, var(--mini-a) 22%, transparent) 25%,
+				transparent 25%
+			),
+			linear-gradient(
+				45deg,
+				color-mix(in oklab, var(--mini-a) 22%, transparent) 25%,
+				transparent 25%
+			);
+		--mini-size: 1.1rem 1.1rem, 1.1rem 1.1rem, 1.1rem 1.1rem, 1.1rem 1.1rem;
+		--mini-pos: -0.55rem 0, -0.55rem 0, 0 0, 0 0;
+	}
+	[data-slot="theme-tile-background"][data-preset="leaves"] {
+		--mini-pattern: radial-gradient(
+			ellipse 0.2rem 0.55rem at 50% 50%,
+			color-mix(in oklab, var(--mini-a) 30%, transparent) 98%,
+			transparent
+		);
+		--mini-size: 1rem 1.3rem;
+	}
+	[data-slot="theme-tile-background"][data-preset="shapes"] {
+		--mini-pattern:
+			radial-gradient(
+				circle at 30% 50%,
+				color-mix(in oklab, var(--mini-a) 30%, transparent) 0.28rem,
+				transparent 0.3rem
+			),
+			linear-gradient(
+				color-mix(in oklab, var(--mini-b) 40%, transparent),
+				color-mix(in oklab, var(--mini-b) 40%, transparent)
+			);
+		--mini-size: 1.8rem 1.8rem, 0.5rem 0.5rem;
+		--mini-pos: 0 0, 1.1rem 0.6rem;
+	}
+	[data-slot="theme-tile-background"][data-preset="confetti-grid"] {
+		--mini-pattern:
+			radial-gradient(
+				circle,
+				color-mix(in oklab, var(--mini-a) 30%, transparent) 0.12rem,
+				transparent 0.14rem
+			),
+			radial-gradient(
+				circle,
+				color-mix(in oklab, var(--mini-b) 40%, transparent) 0.12rem,
+				transparent 0.14rem
+			),
+			radial-gradient(
+				circle,
+				color-mix(in oklab, var(--mini-c) 45%, transparent) 0.12rem,
+				transparent 0.14rem
+			);
+		--mini-size: 1.2rem 1.2rem, 1.2rem 1.2rem, 1.2rem 1.2rem;
+		--mini-pos: 0 0, 0.4rem 0.4rem, 0.8rem 0.8rem;
+	}
+	[data-slot="theme-tile-background"][data-preset="bubbles"] {
+		--mini-pattern:
+			radial-gradient(
+				circle at 30% 40%,
+				transparent 0.26rem,
+				color-mix(in oklab, var(--mini-a) 30%, transparent) 0.28rem 0.34rem,
+				transparent 0.36rem
+			),
+			radial-gradient(
+				circle at 75% 70%,
+				transparent 0.14rem,
+				color-mix(in oklab, var(--mini-b) 40%, transparent) 0.16rem 0.2rem,
+				transparent 0.22rem
+			);
+		--mini-size: 2.2rem 2.2rem, 2.2rem 2.2rem;
+	}
+	/* Hexagons: two cells of a honeycomb, from clip-path, no pattern layer. */
+	[data-slot="theme-tile-background"][data-preset="hexagons"] {
+		--mini-pattern: none;
+		position: relative;
+	}
+	[data-slot="theme-tile-background"][data-preset="hexagons"]::before,
+	[data-slot="theme-tile-background"][data-preset="hexagons"]::after {
+		content: "";
+		position: absolute;
+		inline-size: 1.7rem;
+		block-size: 1.96rem;
+		clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+		background: color-mix(in oklab, var(--mini-a) 34%, transparent);
+	}
+	[data-slot="theme-tile-background"][data-preset="hexagons"]::before {
+		inset-block-start: -0.3rem;
+		inset-inline-start: 38%;
+	}
+	[data-slot="theme-tile-background"][data-preset="hexagons"]::after {
+		inset-block-start: 0.9rem;
+		inset-inline-start: calc(38% + 1.45rem);
+		background: color-mix(in oklab, var(--mini-a) 20%, transparent);
+	}
+}

package/lib/themes/ambre.css

@@ -0,0 +1,134 @@
+/* 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: 61 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"] {
+	--radius: 0.875rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.227 0.0145 65);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.227 0.0145 65);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.227 0.0145 65);
+	--primary: oklch(0.52 0.13 48);
+	--primary-foreground: oklch(0.984 0.003 65);
+	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	--primary-indicator: var(--primary);
+	--secondary: oklch(0.5 0.09 95);
+	--secondary-foreground: oklch(0.984 0.003 65);
+	--tertiary: var(--strix);
+	--tertiary-foreground: oklch(0.984 0.003 65);
+	--strix: oklch(0.5 0.14 350);
+	--muted: oklch(0.955 0.0102 65);
+	--muted-foreground: oklch(0.478 0.0272 65);
+	--track: oklch(0.955 0.0102 65);
+	--track-fill: var(--primary);
+	--tooltip: oklch(0.446 0.0366 65);
+	--tooltip-foreground: oklch(1 0 0);
+	--accent: oklch(0.91 0.0136 65);
+	--accent-foreground: oklch(0.227 0.0145 65);
+	--error: oklch(0.56 0.245 27.33);
+	--error-foreground: oklch(0.984 0.003 65);
+	--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);
+	--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);
+	--destructive: var(--error);
+	--border: oklch(0.912 0.0136 65);
+	--input: oklch(0.912 0.0136 65);
+	--ring: oklch(0.62 0.034 65);
+	--sidebar: oklch(0.985 0.0051 65);
+	--sidebar-foreground: oklch(0.227 0.0145 65);
+	--sidebar-primary: oklch(0.227 0.0145 65);
+	--sidebar-primary-foreground: oklch(0.984 0.003 65);
+	--sidebar-accent: oklch(0.955 0.0102 65);
+	--sidebar-accent-foreground: oklch(0.227 0.0145 65);
+	--sidebar-border: oklch(0.912 0.0136 65);
+	--sidebar-ring: oklch(0.62 0.034 65);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.6 0.2 300);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--chart-soft-1: oklch(0.9 0.045 255);
+	--chart-soft-1-ink: oklch(0.52 0.14 255);
+	--chart-soft-2: oklch(0.91 0.05 180);
+	--chart-soft-2-ink: oklch(0.53 0.09 180);
+	--chart-soft-3: oklch(0.93 0.06 80);
+	--chart-soft-3-ink: oklch(0.56 0.11 80);
+	--chart-soft-4: oklch(0.9 0.06 310);
+	--chart-soft-4-ink: oklch(0.52 0.16 310);
+	--chart-soft-5: oklch(0.9 0.05 25);
+	--chart-soft-5-ink: oklch(0.56 0.15 25);
+	--font-sans: ui-rounded, "SF Pro Rounded", ui-sans-serif, system-ui, sans-serif;
+	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+	font-family: var(--font-sans);
+}
+
+[data-nxgt-theme="ambre"]:is(.dark, [data-theme="dark"]),
+:is(.dark, [data-theme="dark"]) [data-nxgt-theme="ambre"],
+[data-nxgt-theme="ambre"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="ambre"] [data-nxgt-theme]:not([data-nxgt-theme="ambre"]), [data-nxgt-theme="ambre"] [data-nxgt-theme]:not([data-nxgt-theme="ambre"]) *) {
+	--background: oklch(0.15 0.026 273);
+	--foreground: oklch(0.943 0.0102 65);
+	--card: oklch(0.19 0.0161 65);
+	--card-foreground: oklch(0.943 0.0102 65);
+	--popover: oklch(0.19 0.0161 65);
+	--popover-foreground: oklch(0.943 0.0102 65);
+	--primary: oklch(0.52 0.13 48);
+	--primary-foreground: oklch(0.995 0.002 65);
+	--primary-text: color-mix(in oklab, var(--primary) 40%, white);
+	--primary-indicator: color-mix(in oklab, var(--primary) 75%, white);
+	--secondary: oklch(0.675 0.09 95);
+	--secondary-foreground: oklch(0.995 0.002 65);
+	--tertiary: oklch(0.7 0.14 350);
+	--tertiary-foreground: oklch(0.15 0.026 273);
+	--strix: oklch(0.5 0.14 350);
+	--muted: oklch(0.228 0.0187 65);
+	--muted-foreground: oklch(0.725 0.0255 65);
+	--track: oklch(0.53 0.0255 65);
+	--track-fill: oklch(0.85 0.09 48);
+	--tooltip: oklch(0.925 0.0102 65);
+	--tooltip-foreground: oklch(0.446 0.0366 65);
+	--accent: oklch(0.25 0.0187 65);
+	--accent-foreground: oklch(0.943 0.0102 65);
+	--error: oklch(0.577 0.245 27.33);
+	--error-foreground: oklch(0.995 0.002 65);
+	--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);
+	--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);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(0.259 0.0213 65);
+	--input: oklch(0.298 0.0229 65);
+	--ring: oklch(0.551 0.0255 65);
+	--sidebar: oklch(0.19 0.0161 65);
+	--sidebar-foreground: oklch(0.943 0.0102 65);
+	--sidebar-primary: var(--primary);
+	--sidebar-primary-foreground: oklch(0.995 0.002 65);
+	--sidebar-accent: oklch(0.228 0.0187 65);
+	--sidebar-accent-foreground: oklch(0.943 0.0102 65);
+	--sidebar-border: oklch(0.259 0.0213 65);
+	--sidebar-ring: oklch(0.551 0.0255 65);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--chart-soft-1: oklch(0.49 0.08 255);
+	--chart-soft-1-ink: oklch(0.78 0.1 255);
+	--chart-soft-2: oklch(0.49 0.07 180);
+	--chart-soft-2-ink: oklch(0.8 0.11 180);
+	--chart-soft-3: oklch(0.5 0.1 75);
+	--chart-soft-3-ink: oklch(0.84 0.12 78);
+	--chart-soft-4: oklch(0.49 0.09 310);
+	--chart-soft-4-ink: oklch(0.78 0.13 310);
+	--chart-soft-5: oklch(0.49 0.09 25);
+	--chart-soft-5-ink: oklch(0.78 0.11 25);
+}