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,60 @@
+/* App-level semantic tokens; themes restyle them under [data-theme] scopes.
+   No light-dark() in html-level declarations — postcss-preset-mantine
+   rewrites it into a descendant selector that never matches <html>. Use
+   explicit [data-mantine-color-scheme] blocks. */
+
+:root {
+  /* accolades */
+  --flxn-gold: gold;
+  --flxn-silver: var(--mantine-color-gray-5);
+  --flxn-bronze: var(--mantine-color-orange-6);
+
+  /* toast icons */
+  --flxn-toast-success: lightgreen;
+  --flxn-toast-error: lightcoral;
+
+  /* surfaces & decoration */
+  --flxn-overlay: rgba(0, 0, 0, 0.4);
+  --flxn-dotgrid-color: var(--mantine-color-default-border);
+  --flxn-pop-shadow: rgba(0, 0, 0, 0.3);
+  --flxn-avatar-radius: 50%;
+  --flxn-avatar-border: 1px solid var(--mantine-color-default-border);
+  --flxn-badge-radius: 12px;
+
+  /* text on accent fills: black/white from the cascaded fill (oklch block
+     below overrides this fallback) */
+  --flxn-on-accent: var(--mantine-primary-color-contrast);
+
+  /* light-scheme values */
+  --flxn-podium-1-bg: color-mix(in srgb, var(--mantine-color-yellow-4) 10%, var(--mantine-color-white));
+  --flxn-podium-1-border: color-mix(in srgb, var(--mantine-color-yellow-6) 45%, var(--mantine-color-gray-3));
+  --flxn-podium-1-label: var(--mantine-color-yellow-8);
+  --flxn-podium-2-bg: color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-white));
+  --flxn-podium-2-border: var(--mantine-color-gray-4);
+  --flxn-podium-2-label: var(--mantine-color-gray-6);
+  --flxn-podium-3-bg: color-mix(in srgb, var(--mantine-color-orange-5) 8%, var(--mantine-color-white));
+  --flxn-podium-3-border: color-mix(in srgb, var(--mantine-color-orange-6) 35%, var(--mantine-color-gray-3));
+  --flxn-podium-3-label: var(--mantine-color-orange-8);
+  --flxn-showcase-bg: var(--mantine-color-white);
+}
+
+:root[data-mantine-color-scheme="dark"] {
+  --flxn-podium-1-bg: color-mix(in srgb, var(--mantine-color-yellow-8) 16%, var(--mantine-color-dark-6));
+  --flxn-podium-1-border: color-mix(in srgb, var(--mantine-color-yellow-6) 35%, var(--mantine-color-dark-4));
+  --flxn-podium-1-label: var(--mantine-color-yellow-4);
+  --flxn-podium-2-bg: color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-dark-6));
+  --flxn-podium-2-border: var(--mantine-color-dark-4);
+  --flxn-podium-2-label: var(--mantine-color-gray-4);
+  --flxn-podium-3-bg: color-mix(in srgb, var(--mantine-color-orange-9) 14%, var(--mantine-color-dark-6));
+  --flxn-podium-3-border: color-mix(in srgb, var(--mantine-color-orange-7) 30%, var(--mantine-color-dark-4));
+  --flxn-podium-3-label: var(--mantine-color-orange-4);
+  --flxn-showcase-bg: var(--mantine-color-dark-7);
+}
+
+@supports (color: oklch(from red calc(1 - 1) 0 h)) {
+  :root {
+    --flxn-on-accent: oklch(
+      from var(--mantine-primary-color-filled) calc((0.6 - l) * infinity) 0 h
+    );
+  }
+}