style upgrades

src/lib/mantine/color-scheme-provider.tsx

@@ -1,27 +1,38 @@
 import { useAuth } from "@/contexts/auth-context";
-import { useMantineTheme } from "@mantine/core";
 import { useMantineColorScheme } from "@mantine/core";
 import { useEffect } from "react";
+import { CHROME_COLORS, setThemeColorMeta } from "./theme-colors";
 
 const ColorSchemeProvider = ({ children }: { children: React.ReactNode }) => {
   const {
     metadata: { colorScheme },
   } = useAuth();
   const { setColorScheme } = useMantineColorScheme();
-  const theme = useMantineTheme();
 
   useEffect(() => {
     if (!colorScheme) return;
 
     setColorScheme(colorScheme);
-    const themeColorMeta = document.querySelector('meta[name="theme-color"]');
-    if (themeColorMeta) {
-      themeColorMeta.setAttribute(
-        "content",
-        colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0]
-      );
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const applyThemeColor = () => {
+      const resolved =
+        colorScheme === "auto"
+          ? media.matches
+            ? "dark"
+            : "light"
+          : colorScheme;
+      setThemeColorMeta(CHROME_COLORS[resolved].base);
+    };
+
+    applyThemeColor();
+
+    if (colorScheme === "auto") {
+      media.addEventListener("change", applyThemeColor);
+      return () => media.removeEventListener("change", applyThemeColor);
     }
-  }, [colorScheme]);
+  }, [colorScheme, setColorScheme]);
+
   return children;
 };
 

src/lib/mantine/mantine-provider.tsx

@@ -15,10 +15,28 @@ const commonInputStyles = {
   },
 };
 
+const pressFeedbackCss = `
+.flxn-press {
+  transition: transform 120ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
+  transform: scale(0.97);
+}
+@media (prefers-reduced-motion: reduce) {
+  .flxn-press,
+  .flxn-press:active {
+    transition: none;
+    transform: none;
+  }
+}
+`;
+
 const theme = createTheme({
   defaultRadius: "sm",
+  respectReducedMotion: true,
   fontFamily: '"Inter", sans-serif',
   headings: { fontFamily: '"League Spartan", sans-serif' },
+  activeClassName: "flxn-press",
   components: {
     TextInput: {
       styles: commonInputStyles,
@@ -35,14 +53,15 @@ const theme = createTheme({
     Autocomplete: {
       styles: commonInputStyles,
     },
-    DateTiemPicker: {
+    Card: {
+      defaultProps: {
+        shadow: "xs",
+      },
+    },
+    Title: {
       styles: {
         root: {
-          zIndex: 1000,
-        },
-        input: {
-          zIndex: 1000,
-          backgroundColor: "red",
+          letterSpacing: "-0.01em",
         },
       },
     },
@@ -65,6 +84,9 @@ const MantineProvider = ({ children }: { children: React.ReactNode }) => {
       defaultColorScheme={colorScheme}
       theme={{ ...theme, primaryColor }}
     >
+      <style href="flxn-press-feedback" precedence="medium">
+        {pressFeedbackCss}
+      </style>
       <ColorSchemeProvider>{children}</ColorSchemeProvider>
     </MantineProviderCore>
   );

src/lib/mantine/theme-colors.ts

@@ -0,0 +1,27 @@
+export type ChromeColorScheme = "light" | "dark";
+
+export const CHROME_COLORS: Record<
+  ChromeColorScheme,
+  { base: string; dimmed: string }
+> = {
+  light: { base: "#ffffff", dimmed: "#999999" },
+  dark: { base: "#242424", dimmed: "#161616" },
+};
+
+export function setThemeColorMeta(color: string): void {
+  if (typeof document === "undefined") return;
+
+  const metas = document.querySelectorAll<HTMLMetaElement>(
+    'meta[name="theme-color"]'
+  );
+
+  if (metas.length === 0) {
+    const meta = document.createElement("meta");
+    meta.name = "theme-color";
+    meta.content = color;
+    document.head.appendChild(meta);
+    return;
+  }
+
+  metas.forEach((meta) => meta.setAttribute("content", color));
+}