themes lol

2026-08-23 17:17:04 -07:00
parent 0a7b5fa00f
commit 6f575d6a23
79 changed files with 13108 additions and 278 deletions
@@ -0,0 +1,17 @@
+import { msg } from "@lingui/core/macro";
+import type { ThemeManifest } from "../types";
+
+const manifest: ThemeManifest = {
+  id: "bauhaus",
+  label: msg`Bauhaus`,
+  colorSchemes: "both",
+  fontLinks: [
+    "https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap",
+  ],
+  chromeColors: {
+    light: { base: "#f4f1ea", dimmed: "#93918a" },
+    dark: { base: "#0d0d0d", dimmed: "#000000" },
+  },
+};
+
+export default manifest;
@@ -0,0 +1,725 @@
+/* Bauhaus — 1925 Dessau. Flat planes, 2px black rules, zero radius.
+   Fixed decoration keeps the canonical triad (red #d42220 / blue #0050b3 /
+   yellow #f4cc00); everything interactive follows the user's accent via the
+   primary aliases, with all eight ramps retuned to poster-flat print hues. */
+
+/* ---------- 1. Scheme-independent tokens ---------- */
+
+[data-theme="bauhaus"][data-theme] {
+  --bh-red: #d42220;
+  --bh-blue: #0050b3;
+  --bh-yellow: #f4cc00;
+
+  --mantine-font-family: "Jost", "Inter", sans-serif;
+  --mantine-font-family-headings: "Jost", "Inter", sans-serif;
+  --mantine-heading-font-weight: 700;
+  --mantine-h1-font-weight: 800;
+  --mantine-h2-font-weight: 800;
+  --mantine-h3-font-weight: 700;
+
+  --mantine-radius-default: 0;
+  --mantine-radius-xs: 0;
+  --mantine-radius-sm: 0;
+  --mantine-radius-md: 0;
+  --mantine-radius-lg: 0;
+  --mantine-radius-xl: 0;
+
+  --mantine-shadow-xs: none;
+  --mantine-shadow-sm: none;
+  --mantine-shadow-md: none;
+  --mantine-shadow-lg: none;
+  --mantine-shadow-xl: none;
+
+  --flxn-avatar-radius: 0;
+  --flxn-avatar-border: 2px solid var(--bh-line);
+  --flxn-badge-radius: 0;
+
+  /* poster-flat accent ramps (all eight) */
+  --mantine-color-red-0: #fbe9e8;
+  --mantine-color-red-1: #f6d0cf;
+  --mantine-color-red-2: #efaba9;
+  --mantine-color-red-3: #e77f7c;
+  --mantine-color-red-4: #dd534f;
+  --mantine-color-red-5: #d42220;
+  --mantine-color-red-6: #c01e1c;
+  --mantine-color-red-7: #a51a18;
+  --mantine-color-red-8: #871512;
+  --mantine-color-red-9: #66100e;
+
+  --mantine-color-blue-0: #e7f0fa;
+  --mantine-color-blue-1: #c9dcf4;
+  --mantine-color-blue-2: #9dc0ea;
+  --mantine-color-blue-3: #6b9edd;
+  --mantine-color-blue-4: #3675c9;
+  --mantine-color-blue-5: #0050b3;
+  --mantine-color-blue-6: #00479f;
+  --mantine-color-blue-7: #003d88;
+  --mantine-color-blue-8: #00316d;
+  --mantine-color-blue-9: #002550;
+
+  --mantine-color-yellow-0: #fdf9e2;
+  --mantine-color-yellow-1: #fbf1bb;
+  --mantine-color-yellow-2: #f8e587;
+  --mantine-color-yellow-3: #f6d94d;
+  --mantine-color-yellow-4: #f5d121;
+  --mantine-color-yellow-5: #f4cc00;
+  --mantine-color-yellow-6: #dcb800;
+  --mantine-color-yellow-7: #c0a000;
+  --mantine-color-yellow-8: #a08600;
+  --mantine-color-yellow-9: #7d6900;
+
+  --mantine-color-green-0: #e6f3ea;
+  --mantine-color-green-1: #c5e3cf;
+  --mantine-color-green-2: #97cca9;
+  --mantine-color-green-3: #64b17e;
+  --mantine-color-green-4: #349756;
+  --mantine-color-green-5: #0f7f36;
+  --mantine-color-green-6: #0d7230;
+  --mantine-color-green-7: #0b6229;
+  --mantine-color-green-8: #095021;
+  --mantine-color-green-9: #063d19;
+
+  --mantine-color-grape-0: #f2eaf7;
+  --mantine-color-grape-1: #e0cfec;
+  --mantine-color-grape-2: #c6a8da;
+  --mantine-color-grape-3: #a87cc4;
+  --mantine-color-grape-4: #8952aa;
+  --mantine-color-grape-5: #6a2c91;
+  --mantine-color-grape-6: #5f2782;
+  --mantine-color-grape-7: #522170;
+  --mantine-color-grape-8: #431b5c;
+  --mantine-color-grape-9: #331546;
+
+  --mantine-color-orange-0: #fdefe2;
+  --mantine-color-orange-1: #fadcbd;
+  --mantine-color-orange-2: #f6c28d;
+  --mantine-color-orange-3: #f1a355;
+  --mantine-color-orange-4: #ec8524;
+  --mantine-color-orange-5: #e86a00;
+  --mantine-color-orange-6: #d05f00;
+  --mantine-color-orange-7: #b25100;
+  --mantine-color-orange-8: #924300;
+  --mantine-color-orange-9: #703300;
+
+  --mantine-color-pink-0: #fbe9f1;
+  --mantine-color-pink-1: #f6cede;
+  --mantine-color-pink-2: #efa5c3;
+  --mantine-color-pink-3: #e675a2;
+  --mantine-color-pink-4: #dd4784;
+  --mantine-color-pink-5: #d6246e;
+  --mantine-color-pink-6: #c02063;
+  --mantine-color-pink-7: #a51b55;
+  --mantine-color-pink-8: #871646;
+  --mantine-color-pink-9: #661134;
+
+  --mantine-color-lime-0: #f4f7e3;
+  --mantine-color-lime-1: #e6edbe;
+  --mantine-color-lime-2: #d2df8d;
+  --mantine-color-lime-3: #bccd55;
+  --mantine-color-lime-4: #a5bd24;
+  --mantine-color-lime-5: #8fae00;
+  --mantine-color-lime-6: #819c00;
+  --mantine-color-lime-7: #6f8700;
+  --mantine-color-lime-8: #5c7000;
+  --mantine-color-lime-9: #475600;
+}
+
+/* ---------- 2. Per-scheme tokens ---------- */
+
+[data-theme="bauhaus"][data-theme][data-mantine-color-scheme="light"] {
+  --bh-line: #000000;
+  --bh-plane: #f4f1ea;
+  --bh-ink: #000000;
+  --bh-ink-contrast: #f4f1ea;
+  --bh-focus: var(--mantine-primary-color-filled);
+  --bh-tray: #eae6db;
+
+  --mantine-color-body: #f4f1ea;
+  --mantine-color-text: #000000;
+  --mantine-color-bright: #000000;
+  --mantine-color-dimmed: #52504a;
+  --mantine-color-placeholder: #6f6c64;
+  --mantine-color-anchor: #0050b3;
+  --mantine-color-error: #c01e1c;
+  --mantine-color-default: #f4f1ea;
+  --mantine-color-default-hover: #eae6db;
+  --mantine-color-default-color: #000000;
+  --mantine-color-default-border: #000000;
+
+  --mantine-color-red-filled: #d42220;
+  --mantine-color-red-filled-hover: #b81d1b;
+  --mantine-color-red-contrast: #ffffff;
+  --mantine-color-red-light: rgba(212, 34, 32, 0.1);
+  --mantine-color-red-light-hover: rgba(212, 34, 32, 0.16);
+  --mantine-color-red-light-color: #b81d1b;
+  --mantine-color-red-outline: #c01e1c;
+  --mantine-color-red-outline-hover: rgba(212, 34, 32, 0.1);
+  --mantine-color-red-text: #c01e1c;
+
+  --mantine-color-blue-filled: #0050b3;
+  --mantine-color-blue-filled-hover: #00479f;
+  --mantine-color-blue-contrast: #ffffff;
+  --mantine-color-blue-light: rgba(0, 80, 179, 0.1);
+  --mantine-color-blue-light-hover: rgba(0, 80, 179, 0.16);
+  --mantine-color-blue-light-color: #0050b3;
+  --mantine-color-blue-outline: #0050b3;
+  --mantine-color-blue-outline-hover: rgba(0, 80, 179, 0.1);
+  --mantine-color-blue-text: #0050b3;
+
+  --mantine-color-yellow-filled: #f4cc00;
+  --mantine-color-yellow-filled-hover: #dcb800;
+  --mantine-color-yellow-contrast: #000000;
+  --mantine-color-yellow-light: rgba(244, 204, 0, 0.16);
+  --mantine-color-yellow-light-hover: rgba(244, 204, 0, 0.26);
+  --mantine-color-yellow-light-color: #8a7300;
+  --mantine-color-yellow-outline: #8a7300;
+  --mantine-color-yellow-outline-hover: rgba(244, 204, 0, 0.16);
+  --mantine-color-yellow-text: #8a7300;
+
+  --mantine-color-green-filled: #0f7f36;
+  --mantine-color-green-filled-hover: #0d7230;
+  --mantine-color-green-contrast: #ffffff;
+  --mantine-color-green-light: rgba(15, 127, 54, 0.1);
+  --mantine-color-green-light-hover: rgba(15, 127, 54, 0.16);
+  --mantine-color-green-light-color: #0b6229;
+  --mantine-color-green-outline: #0d7230;
+  --mantine-color-green-outline-hover: rgba(15, 127, 54, 0.1);
+  --mantine-color-green-text: #0d7230;
+
+  --mantine-color-grape-filled: #6a2c91;
+  --mantine-color-grape-filled-hover: #5f2782;
+  --mantine-color-grape-contrast: #ffffff;
+  --mantine-color-grape-light: rgba(106, 44, 145, 0.1);
+  --mantine-color-grape-light-hover: rgba(106, 44, 145, 0.16);
+  --mantine-color-grape-light-color: #5f2782;
+  --mantine-color-grape-outline: #5f2782;
+  --mantine-color-grape-outline-hover: rgba(106, 44, 145, 0.1);
+  --mantine-color-grape-text: #5f2782;
+
+  --mantine-color-orange-filled: #e86a00;
+  --mantine-color-orange-filled-hover: #d05f00;
+  --mantine-color-orange-contrast: #000000;
+  --mantine-color-orange-light: rgba(232, 106, 0, 0.12);
+  --mantine-color-orange-light-hover: rgba(232, 106, 0, 0.18);
+  --mantine-color-orange-light-color: #b25100;
+  --mantine-color-orange-outline: #b25100;
+  --mantine-color-orange-outline-hover: rgba(232, 106, 0, 0.12);
+  --mantine-color-orange-text: #b25100;
+
+  --mantine-color-pink-filled: #d6246e;
+  --mantine-color-pink-filled-hover: #c02063;
+  --mantine-color-pink-contrast: #ffffff;
+  --mantine-color-pink-light: rgba(214, 36, 110, 0.1);
+  --mantine-color-pink-light-hover: rgba(214, 36, 110, 0.16);
+  --mantine-color-pink-light-color: #c02063;
+  --mantine-color-pink-outline: #c02063;
+  --mantine-color-pink-outline-hover: rgba(214, 36, 110, 0.1);
+  --mantine-color-pink-text: #c02063;
+
+  --mantine-color-lime-filled: #8fae00;
+  --mantine-color-lime-filled-hover: #819c00;
+  --mantine-color-lime-contrast: #000000;
+  --mantine-color-lime-light: rgba(143, 174, 0, 0.14);
+  --mantine-color-lime-light-hover: rgba(143, 174, 0, 0.22);
+  --mantine-color-lime-light-color: #5c7000;
+  --mantine-color-lime-outline: #5c7000;
+  --mantine-color-lime-outline-hover: rgba(143, 174, 0, 0.14);
+  --mantine-color-lime-text: #5c7000;
+
+  /* app tokens */
+  --flxn-gold: #d9b500;
+  --flxn-silver: #8d8a80;
+  --flxn-bronze: #a05a2c;
+  --flxn-toast-success: #2b8a3e;
+  --flxn-toast-error: #c01e1c;
+  --flxn-podium-1-bg: #f4cc00;
+  --flxn-podium-1-border: #000000;
+  --flxn-podium-1-label: #000000;
+  --flxn-podium-2-bg: #c9dcf4;
+  --flxn-podium-2-border: #000000;
+  --flxn-podium-2-label: #003d88;
+  --flxn-podium-3-bg: #f6d0cf;
+  --flxn-podium-3-border: #000000;
+  --flxn-podium-3-label: #a51a18;
+  --flxn-showcase-bg: #faf8f2;
+  --flxn-overlay: rgba(0, 0, 0, 0.5);
+  --flxn-dotgrid-color: rgba(0, 0, 0, 0.18);
+  --flxn-pop-shadow: rgba(0, 0, 0, 0);
+}
+
+[data-theme="bauhaus"][data-theme][data-mantine-color-scheme="dark"] {
+  --bh-line: #f4f1ea;
+  --bh-plane: #0d0d0d;
+  --bh-ink: #f4f1ea;
+  --bh-ink-contrast: #000000;
+  --bh-focus: var(--mantine-primary-color-4);
+  --bh-tray: #1d1c19;
+
+  --mantine-color-body: #0d0d0d;
+  --mantine-color-text: #f4f1ea;
+  --mantine-color-bright: #ffffff;
+  --mantine-color-dimmed: #a5a196;
+  --mantine-color-placeholder: #8b877c;
+  --mantine-color-anchor: #7fb0e8;
+  --mantine-color-error: #ef6b64;
+  --mantine-color-default: #0d0d0d;
+  --mantine-color-default-hover: #1d1c19;
+  --mantine-color-default-color: #f4f1ea;
+  --mantine-color-default-border: #f4f1ea;
+
+  --mantine-color-red-filled: #d42220;
+  --mantine-color-red-filled-hover: #b81d1b;
+  --mantine-color-red-contrast: #ffffff;
+  --mantine-color-red-light: rgba(229, 83, 79, 0.16);
+  --mantine-color-red-light-hover: rgba(229, 83, 79, 0.24);
+  --mantine-color-red-light-color: #f08984;
+  --mantine-color-red-outline: #ef6b64;
+  --mantine-color-red-outline-hover: rgba(229, 83, 79, 0.16);
+  --mantine-color-red-text: #ef6b64;
+
+  --mantine-color-blue-filled: #0050b3;
+  --mantine-color-blue-filled-hover: #00479f;
+  --mantine-color-blue-contrast: #ffffff;
+  --mantine-color-blue-light: rgba(107, 158, 221, 0.16);
+  --mantine-color-blue-light-hover: rgba(107, 158, 221, 0.24);
+  --mantine-color-blue-light-color: #9dc0ea;
+  --mantine-color-blue-outline: #7fb0e8;
+  --mantine-color-blue-outline-hover: rgba(107, 158, 221, 0.16);
+  --mantine-color-blue-text: #7fb0e8;
+
+  --mantine-color-yellow-filled: #f4cc00;
+  --mantine-color-yellow-filled-hover: #dcb800;
+  --mantine-color-yellow-contrast: #000000;
+  --mantine-color-yellow-light: rgba(244, 204, 0, 0.14);
+  --mantine-color-yellow-light-hover: rgba(244, 204, 0, 0.22);
+  --mantine-color-yellow-light-color: #f4cc00;
+  --mantine-color-yellow-outline: #f4cc00;
+  --mantine-color-yellow-outline-hover: rgba(244, 204, 0, 0.14);
+  --mantine-color-yellow-text: #f4cc00;
+
+  --mantine-color-green-filled: #0f7f36;
+  --mantine-color-green-filled-hover: #0d7230;
+  --mantine-color-green-contrast: #ffffff;
+  --mantine-color-green-light: rgba(100, 177, 126, 0.16);
+  --mantine-color-green-light-hover: rgba(100, 177, 126, 0.24);
+  --mantine-color-green-light-color: #97cca9;
+  --mantine-color-green-outline: #64b17e;
+  --mantine-color-green-outline-hover: rgba(100, 177, 126, 0.16);
+  --mantine-color-green-text: #64b17e;
+
+  --mantine-color-grape-filled: #6a2c91;
+  --mantine-color-grape-filled-hover: #5f2782;
+  --mantine-color-grape-contrast: #ffffff;
+  --mantine-color-grape-light: rgba(168, 124, 196, 0.16);
+  --mantine-color-grape-light-hover: rgba(168, 124, 196, 0.24);
+  --mantine-color-grape-light-color: #c6a8da;
+  --mantine-color-grape-outline: #a87cc4;
+  --mantine-color-grape-outline-hover: rgba(168, 124, 196, 0.16);
+  --mantine-color-grape-text: #a87cc4;
+
+  --mantine-color-orange-filled: #e86a00;
+  --mantine-color-orange-filled-hover: #d05f00;
+  --mantine-color-orange-contrast: #000000;
+  --mantine-color-orange-light: rgba(241, 163, 85, 0.16);
+  --mantine-color-orange-light-hover: rgba(241, 163, 85, 0.24);
+  --mantine-color-orange-light-color: #f6c28d;
+  --mantine-color-orange-outline: #f1a355;
+  --mantine-color-orange-outline-hover: rgba(241, 163, 85, 0.16);
+  --mantine-color-orange-text: #f1a355;
+
+  --mantine-color-pink-filled: #d6246e;
+  --mantine-color-pink-filled-hover: #c02063;
+  --mantine-color-pink-contrast: #ffffff;
+  --mantine-color-pink-light: rgba(230, 117, 162, 0.16);
+  --mantine-color-pink-light-hover: rgba(230, 117, 162, 0.24);
+  --mantine-color-pink-light-color: #efa5c3;
+  --mantine-color-pink-outline: #e675a2;
+  --mantine-color-pink-outline-hover: rgba(230, 117, 162, 0.16);
+  --mantine-color-pink-text: #e675a2;
+
+  --mantine-color-lime-filled: #8fae00;
+  --mantine-color-lime-filled-hover: #819c00;
+  --mantine-color-lime-contrast: #000000;
+  --mantine-color-lime-light: rgba(165, 189, 36, 0.16);
+  --mantine-color-lime-light-hover: rgba(165, 189, 36, 0.24);
+  --mantine-color-lime-light-color: #bccd55;
+  --mantine-color-lime-outline: #a5bd24;
+  --mantine-color-lime-outline-hover: rgba(165, 189, 36, 0.16);
+  --mantine-color-lime-text: #a5bd24;
+
+  /* app tokens */
+  --flxn-gold: #f4cc00;
+  --flxn-silver: #a5a196;
+  --flxn-bronze: #d08048;
+  --flxn-toast-success: #51cf66;
+  --flxn-toast-error: #ef6b64;
+  --flxn-podium-1-bg: #332b00;
+  --flxn-podium-1-border: #f4cc00;
+  --flxn-podium-1-label: #f4cc00;
+  --flxn-podium-2-bg: #001a38;
+  --flxn-podium-2-border: #6b9edd;
+  --flxn-podium-2-label: #9dc0ea;
+  --flxn-podium-3-bg: #380b0a;
+  --flxn-podium-3-border: #e5534f;
+  --flxn-podium-3-label: #f08984;
+  --flxn-showcase-bg: #000000;
+  --flxn-overlay: rgba(0, 0, 0, 0.65);
+  --flxn-dotgrid-color: rgba(244, 241, 234, 0.18);
+  --flxn-pop-shadow: rgba(0, 0, 0, 0);
+}
+
+/* Without JS autoContrast, Mantine pins --mantine-primary-color-contrast to
+   white, which is unreadable on the light fills (yellow/orange/lime).
+   Recompute it from the accent fill's own lightness: below 0.62 OKLCH-L
+   gets white text, above gets black — matches the per-color -contrast
+   values declared above for all eight accents. */
+@supports (color: oklch(from red calc((0.5 - l) * infinity) 0 h)) {
+  [data-theme="bauhaus"][data-theme][data-mantine-color-scheme] {
+    --mantine-primary-color-contrast: oklch(
+      from var(--mantine-primary-color-filled) calc((0.62 - l) * infinity) 0 h
+    );
+  }
+}
+
+/* ---------- 3. Structure: planes bounded by rules, never shadows ---------- */
+
+[data-theme="bauhaus"] .mantine-Paper-root {
+  background-color: var(--bh-plane);
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+[data-theme="bauhaus"] .mantine-AppShell-root {
+  --app-shell-border-color: var(--bh-line);
+}
+[data-theme="bauhaus"] .mantine-AppShell-header {
+  background-color: var(--mantine-color-body);
+  border-bottom: 2px solid var(--bh-line);
+}
+[data-theme="bauhaus"] .mantine-AppShell-navbar {
+  background-color: var(--mantine-color-body);
+  border-inline-end: 2px solid var(--bh-line);
+}
+
+[data-theme="bauhaus"] .mantine-Divider-root {
+  --divider-color: var(--bh-line);
+  --divider-size: 3px;
+}
+
+/* ---------- 4. Type: uppercase, widely-tracked functional labels ---------- */
+
+[data-theme="bauhaus"] .mantine-Button-root {
+  border-radius: 0;
+  box-shadow: none;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+[data-theme="bauhaus"]
+  .mantine-Button-root:where(
+    [data-variant="filled"],
+    [data-variant="default"],
+    [data-variant="outline"],
+    [data-variant="light"],
+    [data-variant="white"]
+  ) {
+  border: 2px solid var(--bh-line);
+}
+
+[data-theme="bauhaus"] .mantine-ActionIcon-root {
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-theme="bauhaus"]
+  .mantine-ActionIcon-root:where(
+    [data-variant="filled"],
+    [data-variant="default"],
+    [data-variant="outline"],
+    [data-variant="light"],
+    [data-variant="white"]
+  ) {
+  border: 2px solid var(--bh-line);
+}
+
+[data-theme="bauhaus"] .mantine-InputWrapper-label {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+[data-theme="bauhaus"] .mantine-Badge-root {
+  border-radius: 0;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+/* ---------- 5. Inputs ---------- */
+
+[data-theme="bauhaus"] .mantine-Input-input {
+  background-color: var(--bh-plane);
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+}
+[data-theme="bauhaus"] .mantine-Input-input:focus,
+[data-theme="bauhaus"] .mantine-Input-input:focus-within {
+  border-color: var(--bh-focus);
+  outline: none;
+}
+
+[data-theme="bauhaus"] .mantine-Checkbox-input {
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+}
+[data-theme="bauhaus"] .mantine-Radio-radio {
+  border: 2px solid var(--bh-line);
+}
+[data-theme="bauhaus"] .mantine-Switch-track {
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+}
+[data-theme="bauhaus"] .mantine-Switch-thumb {
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+}
+
+/* ---------- 6. Tabs & SegmentedControl: black-line constructions ---------- */
+
+[data-theme="bauhaus"] .mantine-Tabs-list::before {
+  border-color: var(--bh-line);
+  border-bottom-width: 2px;
+}
+[data-theme="bauhaus"] .mantine-Tabs-tab {
+  border-radius: 0;
+  border-width: 2px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+[data-theme="bauhaus"] .mantine-Tabs-tab[data-active] {
+  background-color: var(--mantine-primary-color-filled);
+  border-color: var(--bh-line);
+  color: var(--mantine-primary-color-contrast);
+}
+
+[data-theme="bauhaus"] .mantine-SegmentedControl-root {
+  background-color: transparent;
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+  padding: 0;
+}
+[data-theme="bauhaus"] .mantine-SegmentedControl-indicator {
+  background-color: var(--mantine-primary-color-filled);
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-theme="bauhaus"] .mantine-SegmentedControl-label {
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+[data-theme="bauhaus"] .mantine-SegmentedControl-label[data-active],
+[data-theme="bauhaus"]
+  .mantine-SegmentedControl-control[data-active]
+  .mantine-SegmentedControl-label {
+  color: var(--mantine-primary-color-contrast);
+}
+
+/* Accent-fill on-colors: Mantine hardcodes white text on filled variants,
+   selected combobox options and check glyphs; pair them with the accent's
+   contrast color so yellow/orange/lime accents stay legible. */
+[data-theme="bauhaus"] .mantine-Button-root[data-variant="filled"],
+[data-theme="bauhaus"] .mantine-Button-root:not([data-variant]),
+[data-theme="bauhaus"] .mantine-ActionIcon-root[data-variant="filled"],
+[data-theme="bauhaus"] .mantine-ActionIcon-root:not([data-variant]),
+[data-theme="bauhaus"] .mantine-Badge-root[data-variant="filled"],
+[data-theme="bauhaus"] .mantine-Badge-root:not([data-variant]),
+[data-theme="bauhaus"] .mantine-ThemeIcon-root[data-variant="filled"],
+[data-theme="bauhaus"] .mantine-ThemeIcon-root:not([data-variant]) {
+  color: var(--mantine-primary-color-contrast);
+}
+[data-theme="bauhaus"] [data-combobox-selected] {
+  color: var(--mantine-primary-color-contrast);
+}
+[data-theme="bauhaus"] .mantine-Checkbox-root {
+  --checkbox-icon-color: var(--mantine-primary-color-contrast);
+}
+[data-theme="bauhaus"] .mantine-Radio-root {
+  --radio-icon-color: var(--mantine-primary-color-contrast);
+}
+
+/* ---------- 7. Overlays & feedback surfaces ---------- */
+
+[data-theme="bauhaus"] .mantine-Modal-content {
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-theme="bauhaus"] .mantine-Modal-header {
+  border-bottom: 2px solid var(--bh-line);
+}
+[data-theme="bauhaus"] .mantine-Popover-dropdown {
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-theme="bauhaus"] .mantine-Tooltip-tooltip {
+  background-color: var(--bh-ink);
+  border-radius: 0;
+  color: var(--bh-ink-contrast);
+}
+[data-theme="bauhaus"] .mantine-Notification-root {
+  background-color: var(--bh-plane);
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-theme="bauhaus"] .mantine-Alert-root {
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+}
+
+[data-theme="bauhaus"] .mantine-Progress-root {
+  background-color: transparent;
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+}
+[data-theme="bauhaus"] .mantine-Progress-section {
+  border-radius: 0;
+}
+[data-theme="bauhaus"] .mantine-Indicator-indicator {
+  border-radius: 0;
+}
+[data-theme="bauhaus"] .mantine-ThemeIcon-root {
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+}
+
+/* strict square avatars: frame and content square together */
+[data-theme="bauhaus"] .mantine-Avatar-root {
+  border-radius: 0;
+}
+[data-theme="bauhaus"] .mantine-Avatar-image,
+[data-theme="bauhaus"] .mantine-Avatar-placeholder {
+  border-radius: 0;
+}
+
+/* ---------- 8. App component hooks ---------- */
+
+/* Tab strip: flat while resting (2px transparent rule keeps height stable);
+   docked gets the black under-rule. Active tab is a solid accent block. */
+[data-theme="bauhaus"] .flxn-tabs {
+  border-bottom-width: 2px;
+}
+[data-theme="bauhaus"] .flxn-tabs[data-stuck] {
+  background-color: var(--mantine-color-body);
+  border-bottom-color: var(--bh-line);
+}
+[data-theme="bauhaus"] .flxn-tab {
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  border-radius: 0;
+}
+[data-theme="bauhaus"] .flxn-tab[data-active] {
+  background-color: var(--mantine-primary-color-filled);
+  color: var(--flxn-on-accent);
+  font-weight: 700;
+}
+[data-theme="bauhaus"] .flxn-tabs-indicator {
+  border-bottom: none;
+}
+
+/* Nav grid tiles: 2px-ruled flat planes */
+[data-theme="bauhaus"] .flxn-tile {
+  background-color: var(--bh-plane);
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-theme="bauhaus"] .flxn-tile-icon {
+  color: var(--mantine-primary-color-filled);
+}
+
+/* "See all" chip: flat, bordered, uppercase tracked */
+[data-theme="bauhaus"] .flxn-see-all {
+  background-color: var(--bh-plane);
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+  color: var(--bh-ink);
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+@media (hover: hover) {
+  [data-theme="bauhaus"] .flxn-see-all:hover {
+    background-color: var(--mantine-primary-color-light);
+    color: var(--bh-ink);
+  }
+}
+
+/* Match card + reaction tray: one construction, same 2px rules, flat fill */
+[data-theme="bauhaus"] .flxn-match-card {
+  background-color: var(--bh-plane);
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-theme="bauhaus"] .flxn-reaction-row {
+  background-color: var(--bh-tray);
+  border: 2px solid var(--bh-line);
+  border-radius: 0;
+}
+
+/* ---------- 9. Geometric heading marks: circle / square / triangle ---------- */
+
+[data-theme="bauhaus"] h1.mantine-Title-root::before,
+[data-theme="bauhaus"] h2.mantine-Title-root::before,
+[data-theme="bauhaus"] h3.mantine-Title-root::before,
+[data-theme="bauhaus"] h4.mantine-Title-root::before,
+[data-theme="bauhaus"] h5.mantine-Title-root::before,
+[data-theme="bauhaus"] h6.mantine-Title-root::before {
+  content: "";
+  display: inline-block;
+  width: 0.5em;
+  height: 0.5em;
+  margin-inline-end: 0.45em;
+  vertical-align: 0.06em;
+}
+[data-theme="bauhaus"] h1.mantine-Title-root::before {
+  background-color: var(--bh-blue);
+  border-radius: 50%;
+}
+[data-theme="bauhaus"] h2.mantine-Title-root::before {
+  background-color: var(--bh-red);
+}
+[data-theme="bauhaus"] h3.mantine-Title-root::before {
+  background-color: var(--bh-yellow);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+[data-theme="bauhaus"] h4.mantine-Title-root::before {
+  background-color: var(--bh-red);
+  border-radius: 50%;
+}
+[data-theme="bauhaus"] h5.mantine-Title-root::before {
+  background-color: var(--bh-yellow);
+}
+[data-theme="bauhaus"] h6.mantine-Title-root::before {
+  background-color: var(--bh-blue);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+/* ---------- 10. Press feedback: mechanical, not springy ---------- */
+
+[data-theme="bauhaus"]
+  .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
+  transform: translateY(2px);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-theme="bauhaus"]
+    .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
+    transform: none;
+  }
+}