@ngrok/mantle 0.82.1 → 0.83.1

package/dist/mantle-dark.css

@@ -1,9 +1,26 @@
 /**
 MARK: DARK DEFS
+
+The last selector applies this entire block to `.invert-theme` subtrees on
+light pages (any page with no other theme active): an inverted island is the
+opposite theme's own definitions re-declared on the island element. See
+MARK: INVERT THEME in mantle.css for the full strategy.
 */
 :root.dark,
-:root[data-theme="dark"],
-:root[data-applied-theme="dark"] {
+:root[data-theme="dark"]:not([data-applied-theme]),
+:root[data-applied-theme="dark"],
+:root:not(
+		.dark,
+		[data-theme="dark"]:not([data-applied-theme]),
+		[data-applied-theme="dark"],
+		.light-high-contrast,
+		[data-theme="light-high-contrast"]:not([data-applied-theme]),
+		[data-applied-theme="light-high-contrast"],
+		.dark-high-contrast,
+		[data-theme="dark-high-contrast"]:not([data-applied-theme]),
+		[data-applied-theme="dark-high-contrast"]
+	)
+	.invert-theme {
 	color-scheme: dark;
 
 	/* Semantic colors: white becomes black and black becomes white in dark mode */
@@ -313,17 +330,22 @@ MARK: DARK DEFS
 	--color-card-border-muted: var(--color-neutral-200);
 	--color-separator: --alpha(var(--color-gray-600) / 0.2);
 
-	/* Chart series tokens — dark picks validated against the dark card surface
-	   (neutral-100). Dark ramps mirror light (step N = light step 1000−N), so each
-	   slot resolves to the same color as its light twin while staying on-token. */
-	--color-chart-1: var(--color-blue-500);
-	--color-chart-2: var(--color-green-300);
-	--color-chart-3: var(--color-pink-500);
-	--color-chart-4: var(--color-red-400);
-	--color-chart-5: var(--color-teal-400);
-	--color-chart-6: var(--color-orange-400);
-	--color-chart-7: var(--color-violet-500);
-	--color-chart-8: var(--color-yellow-300);
+	/* Chart series tokens — dark's eight marks, in slot order: blue, green, pink,
+	   red-orange, teal, magenta, violet, amber. A slot keeps its family across the
+	   themes. Nothing else carries over: this theme re-tunes lightness, chroma, and
+	   hue together against the dark card surface (neutral-100), so every slot is its
+	   own literal. Chroma moves the most — chart-6 gains 25% over light's — and
+	   chart-4's hue drifts 9.4 degrees. Measured on that surface: worst pair ΔE
+	   15.07 for full-color vision, 9.55 under simulated protanopia or deuteranopia,
+	   3.65:1 lowest contrast. */
+	--color-chart-1: oklch(0.668 0.168 260.3); /* #5492fa */
+	--color-chart-2: oklch(0.537 0.121 160.1); /* #018355 */
+	--color-chart-3: oklch(0.627 0.242 6.7); /* #f41a70 */
+	--color-chart-4: oklch(0.565 0.169 41.2); /* #c3490a */
+	--color-chart-5: oklch(0.668 0.112 198.8); /* #0da9ae */
+	--color-chart-6: oklch(0.584 0.261 332.9); /* #cc04bb */
+	--color-chart-7: oklch(0.573 0.244 285.4); /* #744ffe */
+	--color-chart-8: oklch(0.668 0.137 83.5); /* #bd8c01 */
 	--color-chart-other: var(--color-neutral-500);
 
 	--text-color-strong: #fff;
@@ -345,6 +367,19 @@ MARK: DARK DEFS
 	--background-color-filled-warning-hover: var(--color-warning-700);
 	--background-color-filled-success-hover: var(--color-success-700);
 
+	/* Focus tokens — same expressions as the light base (the mid-ramp stops they
+	   reference are theme-symmetric), declared here so `.invert-theme` islands
+	   re-resolve them against this block's ramps. */
+	--ring-color-focus-neutral: --alpha(var(--color-neutral-500) / 0.3);
+	--ring-color-focus-accent: --alpha(var(--color-accent-500) / 0.3);
+	--ring-color-focus-danger: --alpha(var(--color-danger-500) / 0.3);
+	--ring-color-focus-warning: --alpha(var(--color-warning-500) / 0.3);
+	--ring-color-focus-success: --alpha(var(--color-success-500) / 0.3);
+
+	--color-active-menu-item: --alpha(var(--color-neutral-500) / 0.05);
+	--color-selected-menu-item: --alpha(var(--color-accent-500) / 0.1);
+	--color-active-selected-menu-item: --alpha(var(--color-accent-500) / 0.15);
+
 	--shadow-color: #000;
 	--shadow-first-opacity: 15%;
 	--shadow-second-opacity: 30%;

package/dist/mantle-light-high-contrast.css

@@ -1,9 +1,20 @@
 /**
 MARK: LIGHT HICON DEFS
+
+The last selector applies this entire block to `.invert-theme` subtrees on
+dark-high-contrast pages: an inverted island is the opposite theme's own
+definitions re-declared on the island element. See MARK: INVERT THEME in
+mantle.css for the full strategy.
 */
 :root.light-high-contrast,
-:root[data-theme="light-high-contrast"],
-:root[data-applied-theme="light-high-contrast"] {
+:root[data-theme="light-high-contrast"]:not([data-applied-theme]),
+:root[data-applied-theme="light-high-contrast"],
+:root:is(
+		.dark-high-contrast,
+		[data-theme="dark-high-contrast"]:not([data-applied-theme]),
+		[data-applied-theme="dark-high-contrast"]
+	)
+	.invert-theme {
 	color-scheme: light;
 
 	--color-white: oklch(100% 0 0);
@@ -283,19 +294,20 @@ MARK: LIGHT HICON DEFS
 	--color-selected-menu-item: var(--color-accent-50);
 	--color-active-selected-menu-item: var(--color-accent-100);
 
-	/* Chart series tokens — light-high-contrast picks validated against the white
-	   card surface: all gates pass (worst adjacent CVD ΔE 11.6, normal-vision
-	   floor 18.3, all slots ≥ 3.65:1). Pink and teal use the 300 step here (the
-	   only steps clearing the chroma floor and adjacency gates in this theme's
-	   compressed ramps); every other slot matches the base light picks. */
-	--color-chart-1: var(--color-blue-500);
-	--color-chart-2: var(--color-green-700);
-	--color-chart-3: var(--color-pink-300);
-	--color-chart-4: var(--color-red-600);
-	--color-chart-5: var(--color-teal-300);
-	--color-chart-6: var(--color-orange-600);
-	--color-chart-7: var(--color-violet-500);
-	--color-chart-8: var(--color-yellow-700);
+	/* Chart series tokens — light-high-contrast's eight marks, in slot order: blue,
+	   green, pink, red-orange, teal, magenta, violet, amber. The hue families match
+	   light, and every literal differs: this theme re-tunes lightness, chroma, and
+	   hue together to hold a higher contrast floor. Measured on the white card
+	   surface: worst pair ΔE 15.15 for full-color vision, 9.62 under simulated
+	   protanopia or deuteranopia, 3.70:1 lowest contrast. */
+	--color-chart-1: oklch(0.464 0.174 259.5); /* #0c52b8 */
+	--color-chart-2: oklch(0.468 0.102 160.5); /* #096b46 */
+	--color-chart-3: oklch(0.649 0.252 1.6); /* #fd1c84 */
+	--color-chart-4: oklch(0.512 0.196 31.5); /* #bd1c01 */
+	--color-chart-5: oklch(0.598 0.101 203.3); /* #06919b */
+	--color-chart-6: oklch(0.468 0.208 333.4); /* #97038a */
+	--color-chart-7: oklch(0.633 0.193 288.5); /* #896ff5 */
+	--color-chart-8: oklch(0.621 0.128 78); /* #b07b06 */
 	--color-chart-other: var(--color-neutral-500);
 
 	--text-color-strong: var(--color-black);
@@ -328,4 +340,10 @@ MARK: LIGHT HICON DEFS
 	--shadow-first-opacity: 15%;
 	--shadow-second-opacity: 20%;
 	--navigation-shadow: --alpha(var(--shadow-color) / 30%);
+
+	/* Same white glyphs as the light base (filled controls stay dark enough
+	   here), declared explicitly so `.invert-theme` islands on
+	   dark-high-contrast pages don't inherit that theme's black glyphs. */
+	--bg-checked-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M12.7071 4.29289c.3905.39053.3905 1.02369 0 1.41422L6.70711 11.7071c-.39053.3905-1.02369.3905-1.41422 0l-2-1.99999c-.39052-.39053-.39052-1.02369 0-1.41422.39053-.39052 1.02369-.39052 1.41422 0L6 9.58579l5.2929-5.2929c.3905-.39052 1.0237-.39052 1.4142 0Z'/%3e%3c/svg%3e");
+	--bg-indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M4 8c0-.55228.44772-1 1-1h6c.5523 0 1 .44772 1 1s-.4477 1-1 1H5c-.55228 0-1-.44772-1-1Z'/%3e%3c/svg%3e");
 }