@nxgt/material 3.53.0 → 3.55.0

package/lib/components/ui/display/seat-ring/seat-ring-index.css

@@ -0,0 +1,125 @@
+/* SeatRing: the seat count `--n` and the seat's index `--i`, from data
+ * attributes, for the circle's trigonometry (seat-ring-ring.css). Server
+ * markup carries no `style`. Up to 10 seats (RING_LIMIT); more is a grid. */
+@layer components {
+	.nxgt-seat-ring[data-count="1"] {
+		--n: 1;
+	}
+	.nxgt-seat-ring[data-count="2"] {
+		--n: 2;
+	}
+	.nxgt-seat-ring[data-count="3"] {
+		--n: 3;
+	}
+	.nxgt-seat-ring[data-count="4"] {
+		--n: 4;
+	}
+	.nxgt-seat-ring[data-count="5"] {
+		--n: 5;
+	}
+	.nxgt-seat-ring[data-count="6"] {
+		--n: 6;
+	}
+	.nxgt-seat-ring[data-count="7"] {
+		--n: 7;
+	}
+	.nxgt-seat-ring[data-count="8"] {
+		--n: 8;
+	}
+	.nxgt-seat-ring[data-count="9"] {
+		--n: 9;
+	}
+	.nxgt-seat-ring[data-count="10"] {
+		--n: 10;
+	}
+	.nxgt-seat-ring[data-count="11"] {
+		--n: 11;
+	}
+	.nxgt-seat-ring[data-count="12"] {
+		--n: 12;
+	}
+	.nxgt-seat-ring[data-count="13"] {
+		--n: 13;
+	}
+	.nxgt-seat-ring[data-count="14"] {
+		--n: 14;
+	}
+	.nxgt-seat-ring[data-count="15"] {
+		--n: 15;
+	}
+	.nxgt-seat-ring[data-count="16"] {
+		--n: 16;
+	}
+	.nxgt-seat-ring[data-count="17"] {
+		--n: 17;
+	}
+	.nxgt-seat-ring[data-count="18"] {
+		--n: 18;
+	}
+	.nxgt-seat-ring[data-count="19"] {
+		--n: 19;
+	}
+	.nxgt-seat-ring[data-count="20"] {
+		--n: 20;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="0"] {
+		--i: 0;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="1"] {
+		--i: 1;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="2"] {
+		--i: 2;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="3"] {
+		--i: 3;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="4"] {
+		--i: 4;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="5"] {
+		--i: 5;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="6"] {
+		--i: 6;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="7"] {
+		--i: 7;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="8"] {
+		--i: 8;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="9"] {
+		--i: 9;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="10"] {
+		--i: 10;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="11"] {
+		--i: 11;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="12"] {
+		--i: 12;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="13"] {
+		--i: 13;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="14"] {
+		--i: 14;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="15"] {
+		--i: 15;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="16"] {
+		--i: 16;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="17"] {
+		--i: 17;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="18"] {
+		--i: 18;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"][data-index="19"] {
+		--i: 19;
+	}
+}

package/lib/components/ui/display/seat-ring/seat-ring-ring.css

@@ -0,0 +1,87 @@
+/* SeatRing's circle: CSS trigonometry on `--i`, `--n` (seat-ring-index.css)
+ * and `--seat-dir` (-1 in a right-to-left box, so the ring is mirrored). The
+ * three container queries only switch `--ring-k` on the orbit once the box
+ * fits the seat size (32rem small, 38rem medium, 46rem large); every rule
+ * below reads it, as 0 (the grid of seat-ring.css) or 1 (the circle), so the
+ * circle's rules are written once. */
+@layer components {
+	@container seat-ring (min-width: 32rem) {
+		.nxgt-seat-ring[data-layout="ring"][data-size="sm"]
+			[data-slot="seat-ring-orbit"] {
+			--ring-k: 1;
+			--ring-abs: absolute;
+			--ring-block: block;
+			--ring-ratio: 1;
+			--ring-margin: auto;
+			--ring-size: min(
+				100%,
+				max(calc(var(--seat) * 3.2), calc(var(--seat) * (var(--n) * 0.6 + 1))),
+				56rem
+			);
+			--ring-w: var(--seat);
+		}
+	}
+	@container seat-ring (min-width: 38rem) {
+		.nxgt-seat-ring[data-layout="ring"][data-size="md"]
+			[data-slot="seat-ring-orbit"] {
+			--ring-k: 1;
+			--ring-abs: absolute;
+			--ring-block: block;
+			--ring-ratio: 1;
+			--ring-margin: auto;
+			--ring-size: min(
+				100%,
+				max(calc(var(--seat) * 3.2), calc(var(--seat) * (var(--n) * 0.6 + 1))),
+				56rem
+			);
+			--ring-w: var(--seat);
+		}
+	}
+	@container seat-ring (min-width: 46rem) {
+		.nxgt-seat-ring[data-layout="ring"][data-size="lg"]
+			[data-slot="seat-ring-orbit"] {
+			--ring-k: 1;
+			--ring-abs: absolute;
+			--ring-block: block;
+			--ring-ratio: 1;
+			--ring-margin: auto;
+			--ring-size: min(
+				100%,
+				max(calc(var(--seat) * 3.2), calc(var(--seat) * (var(--n) * 0.6 + 1))),
+				56rem
+			);
+			--ring-w: var(--seat);
+		}
+	}
+
+	.nxgt-seat-ring [data-slot="seat-ring-orbit"] {
+		position: relative;
+		display: var(--ring-block, flex);
+		inline-size: var(--ring-size, auto);
+		aspect-ratio: var(--ring-ratio, auto);
+		margin-inline: var(--ring-margin, 0);
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-list"] {
+		position: var(--ring-abs, static);
+		inset: 0;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-seat"] {
+		--a: calc(360deg * var(--i, 0) / var(--n, 1));
+		position: var(--ring-abs, relative);
+		inline-size: var(--ring-w, auto);
+		left: calc(
+			var(--ring-k, 0) *
+			(50% + (50% - var(--seat) / 2) * sin(var(--a)) * var(--seat-dir))
+		);
+		top: calc(
+			var(--ring-k, 0) *
+			(50% - (50% - var(--seat) / 2) * cos(var(--a)))
+		);
+		translate: calc(var(--ring-k, 0) * -50%) calc(var(--ring-k, 0) * -50%);
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-center"] {
+		position: var(--ring-abs, static);
+		/* The square inside the circle of seats: the orbit's radius less a seat and a half. */
+		inset: calc(50% - 0.5 * max(0px, 50% - 1.1 * var(--seat)));
+	}
+}

package/lib/components/ui/display/seat-ring/seat-ring.css

@@ -0,0 +1,139 @@
+/* SeatRing: seats as a grid of cards, or on a circle when the box is wide
+ * enough. The component is a size container, so the switch follows its own
+ * width (a column, a dialog, a phone), never the window. The ring is pure CSS
+ * (trigonometry on `--i`, the seat's index, and `--n`, their count, both set by
+ * the attribute rules below, so server markup carries no `style`). It holds up
+ * to 10 seats (RING_LIMIT); more is a grid. Selected: the primary tint, a
+ * border and a check mark, so colour is never the only cue. */
+@layer components {
+	.nxgt-seat-ring {
+		--seat: 6rem;
+		--seat-avatar: 2.5rem;
+		--seat-dir: 1;
+		container: seat-ring / inline-size;
+	}
+	.nxgt-seat-ring:dir(rtl) {
+		--seat-dir: -1;
+	}
+	.nxgt-seat-ring[data-size="sm"] {
+		--seat: 4.75rem;
+		--seat-avatar: 2rem;
+	}
+	.nxgt-seat-ring[data-size="lg"] {
+		--seat: 8rem;
+		--seat-avatar: 3.5rem;
+	}
+
+	.nxgt-seat-ring [data-slot="seat-ring-orbit"] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-center"] {
+		order: -1;
+		display: grid;
+		place-items: center;
+		text-align: center;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-list"] {
+		display: grid;
+		grid-template-columns: repeat(
+				auto-fill,
+				minmax(min(var(--seat), 100%), 1fr)
+			);
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	@container seat-ring (max-width: 30rem) {
+		.nxgt-seat-ring [data-slot="seat-ring-list"] {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+
+	.nxgt-seat-ring [data-slot="seat-ring-seat"] {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+		min-inline-size: 0;
+		min-block-size: 2.75rem;
+		padding: 0.5rem 0.375rem;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-lg, 0.75rem);
+		background: var(--card, var(--background));
+		color: var(--foreground);
+		text-align: center;
+		transition:
+			background-color 150ms,
+			border-color 150ms;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-label"] {
+		max-inline-size: 100%;
+		overflow-wrap: anywhere;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.25;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-badge"] {
+		position: absolute;
+		inset-block-start: -0.5rem;
+		inset-inline-end: 0.25rem;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-mark"] {
+		position: absolute;
+		inset-block-start: 0.25rem;
+		inset-inline-start: 0.25rem;
+		display: grid;
+		inline-size: 1rem;
+		block-size: 1rem;
+		color: var(--primary-text, var(--primary));
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-empty-circle"] {
+		inline-size: var(--seat-avatar);
+		block-size: var(--seat-avatar);
+		border: 2px dashed var(--border);
+		border-radius: 9999px;
+	}
+	.nxgt-seat-ring [data-empty] {
+		border-style: dashed;
+		background: transparent;
+	}
+	.nxgt-seat-ring [data-highlighted] {
+		border-color: var(--primary-indicator, var(--primary));
+		box-shadow: 0 0 0 2px var(--primary-indicator, var(--primary));
+	}
+	.nxgt-seat-ring [role="option"]:not([aria-disabled="true"]) {
+		cursor: pointer;
+	}
+	.nxgt-seat-ring [role="option"]:not([aria-disabled="true"]):hover {
+		background: color-mix(
+			in oklab,
+			var(--primary-text, var(--primary)) 8%,
+			var(--card, var(--background))
+		);
+	}
+	.nxgt-seat-ring [role="option"][aria-selected="true"] {
+		border-color: var(--primary-text, var(--primary));
+		background: color-mix(
+			in oklab,
+			var(--primary-text, var(--primary)) 12%,
+			var(--card, var(--background))
+		);
+	}
+	.nxgt-seat-ring [role="option"][aria-disabled="true"],
+	.nxgt-seat-ring [aria-disabled="true"] {
+		opacity: 0.6;
+	}
+	.nxgt-seat-ring [role="option"]:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.nxgt-seat-ring [data-slot="seat-ring-seat"] {
+			transition: none;
+		}
+	}
+}

package/lib/components/ui/overlays/dialog/dialog.css

@@ -39,7 +39,8 @@
 		--dialog-bg: color-mix(in oklab, var(--primary) 18%, var(--card));
 		box-shadow:
 			var(--nxgt-elevation-3),
-			inset 0 0 0 1px rgb(255 255 255 / 0.07);
+			inset 0 0 0 1px var(--card-edge),
+			inset 0 1px 0 rgb(255 255 255 / 0.03);
 	}
 	.nxgt-dialog[data-state="open"] {
 		animation:

package/lib/components/ui/overlays/popover/popover.css

@@ -30,13 +30,14 @@
 		--popover-bg: var(--popover);
 		--popover-lift:
 			0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-		border: 1px solid var(--border);
+		border: 1px solid var(--card-edge);
 		border-radius: var(--radius-md);
 	}
 	:where(.dark, [data-theme="dark"]) .nxgt-popover {
 		--popover-bg: color-mix(in oklab, var(--primary) 16%, var(--popover));
 		--popover-lift:
-			var(--nxgt-elevation-2), inset 0 0 0 1px rgb(255 255 255 / 0.07);
+			var(--nxgt-elevation-2), inset 0 0 0 1px var(--card-edge),
+			inset 0 1px 0 rgb(255 255 255 / 0.03);
 	}
 	:where(.dark, [data-theme="dark"]) .nxgt-popover[data-variant="tonal"] {
 		--popover-bg: color-mix(in oklab, var(--primary) 34%, var(--popover));

package/lib/styles.css

@@ -57,6 +57,7 @@
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
+	--color-card-edge: var(--card-edge);
 	--color-card-foreground: var(--card-foreground);
 	--color-popover: var(--popover);
 	--color-popover-foreground: var(--popover-foreground);

package/lib/themes/ambre.css

@@ -9,6 +9,7 @@
 	--foreground: oklch(0.227 0.0145 65);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0145 65);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0145 65);
@@ -76,9 +77,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0102 65);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0161 65);
+	--card: oklch(0.22 0.0161 65);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0102 65);
-	--popover: oklch(0.19 0.0161 65);
+	--popover: oklch(0.22 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);
@@ -89,13 +91,13 @@
 	--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: oklch(0.258 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: oklch(0.28 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);
@@ -107,8 +109,8 @@
 	--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);
+	--border: oklch(0.289 0.0213 65);
+	--input: oklch(0.328 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);

package/lib/themes/ardoise.css

@@ -8,6 +8,7 @@
 	--foreground: oklch(0.227 0.0119 250);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0119 250);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0119 250);
@@ -75,9 +76,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0084 250);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0133 250);
+	--card: oklch(0.22 0.0133 250);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0084 250);
-	--popover: oklch(0.19 0.0133 250);
+	--popover: oklch(0.22 0.0133 250);
 	--popover-foreground: oklch(0.943 0.0084 250);
 	--primary: oklch(0.45 0.065 252);
 	--primary-foreground: oklch(0.995 0.002 250);
@@ -88,13 +90,13 @@
 	--tertiary: oklch(0.7 0.1 290);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.48 0.1 290);
-	--muted: oklch(0.228 0.0154 250);
+	--muted: oklch(0.258 0.0154 250);
 	--muted-foreground: oklch(0.725 0.021 250);
 	--track: oklch(0.53 0.021 250);
 	--track-fill: oklch(0.85 0.09 252);
 	--tooltip: oklch(0.925 0.0084 250);
 	--tooltip-foreground: oklch(0.446 0.0301 250);
-	--accent: oklch(0.25 0.0154 250);
+	--accent: oklch(0.28 0.0154 250);
 	--accent-foreground: oklch(0.943 0.0084 250);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 250);
@@ -106,8 +108,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 250);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.0175 250);
-	--input: oklch(0.298 0.0189 250);
+	--border: oklch(0.289 0.0175 250);
+	--input: oklch(0.328 0.0189 250);
 	--ring: oklch(0.551 0.021 250);
 	--sidebar: oklch(0.19 0.0133 250);
 	--sidebar-foreground: oklch(0.943 0.0084 250);

package/lib/themes/bleumono.css

@@ -11,6 +11,7 @@
 	--foreground: oklch(0.227 0.0187 255);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0187 255);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0187 255);
@@ -78,9 +79,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0132 255);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0209 255);
+	--card: oklch(0.22 0.0209 255);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0132 255);
-	--popover: oklch(0.19 0.0209 255);
+	--popover: oklch(0.22 0.0209 255);
 	--popover-foreground: oklch(0.943 0.0132 255);
 	--primary: oklch(0.46 0.13 255);
 	--primary-foreground: oklch(0.995 0.002 255);
@@ -91,13 +93,13 @@
 	--tertiary: oklch(0.82 0.09 255);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.38 0.1254 255);
-	--muted: oklch(0.228 0.0242 255);
+	--muted: oklch(0.258 0.0242 255);
 	--muted-foreground: oklch(0.725 0.033 255);
 	--track: oklch(0.53 0.033 255);
 	--track-fill: oklch(0.85 0.09 255);
 	--tooltip: oklch(0.925 0.0132 255);
 	--tooltip-foreground: oklch(0.446 0.0473 255);
-	--accent: oklch(0.25 0.0242 255);
+	--accent: oklch(0.28 0.0242 255);
 	--accent-foreground: oklch(0.943 0.0132 255);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 255);
@@ -109,8 +111,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 255);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.0275 255);
-	--input: oklch(0.298 0.0297 255);
+	--border: oklch(0.289 0.0275 255);
+	--input: oklch(0.328 0.0297 255);
 	--ring: oklch(0.551 0.033 255);
 	--sidebar: oklch(0.19 0.0209 255);
 	--sidebar-foreground: oklch(0.943 0.0132 255);

package/lib/themes/bluemoon.css

@@ -11,6 +11,7 @@
 	--foreground: oklch(0.227 0.017 265);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 265);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.017 265);
@@ -78,9 +79,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 265);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.019 265);
+	--card: oklch(0.22 0.019 265);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 265);
-	--popover: oklch(0.19 0.019 265);
+	--popover: oklch(0.22 0.019 265);
 	--popover-foreground: oklch(0.943 0.012 265);
 	--primary: oklch(0.45 0.12 265);
 	--primary-foreground: oklch(0.995 0.002 265);
@@ -91,13 +93,13 @@
 	--tertiary: oklch(0.7 0.08 290);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.5625 0.08 290);
-	--muted: oklch(0.228 0.022 265);
+	--muted: oklch(0.258 0.022 265);
 	--muted-foreground: oklch(0.725 0.03 265);
 	--track: oklch(0.53 0.03 265);
 	--track-fill: oklch(0.85 0.09 265);
 	--tooltip: oklch(0.925 0.012 265);
 	--tooltip-foreground: oklch(0.446 0.043 265);
-	--accent: oklch(0.25 0.022 265);
+	--accent: oklch(0.28 0.022 265);
 	--accent-foreground: oklch(0.943 0.012 265);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 265);
@@ -109,8 +111,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 265);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.025 265);
-	--input: oklch(0.298 0.027 265);
+	--border: oklch(0.289 0.025 265);
+	--input: oklch(0.328 0.027 265);
 	--ring: oklch(0.551 0.03 265);
 	--sidebar: oklch(0.19 0.019 265);
 	--sidebar-foreground: oklch(0.943 0.012 265);

package/lib/themes/corail.css

@@ -11,6 +11,7 @@
 	--foreground: oklch(0.227 0.0136 30);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 30);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0136 30);
@@ -78,9 +79,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 30);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0152 30);
+	--card: oklch(0.22 0.0152 30);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 30);
-	--popover: oklch(0.19 0.0152 30);
+	--popover: oklch(0.22 0.0152 30);
 	--popover-foreground: oklch(0.943 0.0096 30);
 	--primary: oklch(0.575 0.17 35);
 	--primary-foreground: oklch(0.995 0.002 30);
@@ -91,13 +93,13 @@
 	--tertiary: oklch(0.7 0.1 200);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.5 0.085 200);
-	--muted: oklch(0.228 0.0176 30);
+	--muted: oklch(0.258 0.0176 30);
 	--muted-foreground: oklch(0.725 0.024 30);
 	--track: oklch(0.53 0.024 30);
 	--track-fill: oklch(0.85 0.09 35);
 	--tooltip: oklch(0.925 0.0096 30);
 	--tooltip-foreground: oklch(0.446 0.0344 30);
-	--accent: oklch(0.25 0.0176 30);
+	--accent: oklch(0.28 0.0176 30);
 	--accent-foreground: oklch(0.943 0.0096 30);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 30);
@@ -109,8 +111,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 30);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.02 30);
-	--input: oklch(0.298 0.0216 30);
+	--border: oklch(0.289 0.02 30);
+	--input: oklch(0.328 0.0216 30);
 	--ring: oklch(0.551 0.024 30);
 	--sidebar: oklch(0.19 0.0152 30);
 	--sidebar-foreground: oklch(0.943 0.0096 30);

package/lib/themes/foret.css

@@ -8,6 +8,7 @@
 	--foreground: oklch(0.227 0.0136 140);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
+	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 140);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.227 0.0136 140);
@@ -75,9 +76,10 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 140);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.19 0.0152 140);
+	--card: oklch(0.22 0.0152 140);
+	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 140);
-	--popover: oklch(0.19 0.0152 140);
+	--popover: oklch(0.22 0.0152 140);
 	--popover-foreground: oklch(0.943 0.0096 140);
 	--primary: oklch(0.48 0.1 152);
 	--primary-foreground: oklch(0.995 0.002 140);
@@ -88,13 +90,13 @@
 	--tertiary: oklch(0.7 0.1 55);
 	--tertiary-foreground: oklch(0.15 0.026 273);
 	--strix: oklch(0.5 0.1 55);
-	--muted: oklch(0.228 0.0176 140);
+	--muted: oklch(0.258 0.0176 140);
 	--muted-foreground: oklch(0.725 0.024 140);
 	--track: oklch(0.53 0.024 140);
 	--track-fill: oklch(0.85 0.09 152);
 	--tooltip: oklch(0.925 0.0096 140);
 	--tooltip-foreground: oklch(0.446 0.0344 140);
-	--accent: oklch(0.25 0.0176 140);
+	--accent: oklch(0.28 0.0176 140);
 	--accent-foreground: oklch(0.943 0.0096 140);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 140);
@@ -106,8 +108,8 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 140);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.259 0.02 140);
-	--input: oklch(0.298 0.0216 140);
+	--border: oklch(0.289 0.02 140);
+	--input: oklch(0.328 0.0216 140);
 	--ring: oklch(0.551 0.024 140);
 	--sidebar: oklch(0.19 0.0152 140);
 	--sidebar-foreground: oklch(0.943 0.0096 140);