feat(auth-ui): UI foundation for rebuilt auth flows — layouts, theming, favicons, login UX

- layouts: split.layout + blank.layout; useSystemTheme hook
- misc: dynamic-favicon + client-hints, wired into root.tsx
- styling: type-scale + a11y tweaks in root.css
- login: identifier screen with IdP buttons + progressive email reveal
- assets: favicons (light/dark), IdP logos, illustrations under public/
- config: vite.config + package.json/bun.lock supporting deps

Author: yahyafakhroji

app/components/auth-form/auth-form.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@datum-cloud/datum-ui/button';
+import { cn } from '@datum-cloud/datum-ui/utils';
 import type { ReactNode } from 'react';
 import { useNavigation } from 'react-router';
 
@@ -24,7 +25,7 @@ export function SubmitButton({ children, loading, className }: SubmitButtonProps
       block
       htmlType="submit"
       loading={isSubmitting}
-      className={className}>
+      className={cn('h-9', className)}>
       {children}
     </Button>
   );

app/components/misc/client-hints.tsx

@@ -0,0 +1,42 @@
+/**
+ * This file contains utilities for using client hints for user preference which
+ * are needed by the server, but are only known by the browser.
+ */
+import { getHintUtils } from '@epic-web/client-hints';
+import {
+  clientHint as colorSchemeHint,
+  subscribeToSchemeChange,
+} from '@epic-web/client-hints/color-scheme';
+import { clientHint as timeZoneHint } from '@epic-web/client-hints/time-zone';
+import * as React from 'react';
+import { useRevalidator } from 'react-router';
+
+const hintsUtils = getHintUtils({
+  theme: colorSchemeHint,
+  timeZone: timeZoneHint,
+  // add other hints here
+});
+
+export const { getHints } = hintsUtils;
+
+/**
+ * @returns inline script element that checks for client hints and sets cookies
+ * if they are not set then reloads the page if any cookie was set to an
+ * inaccurate value.
+ */
+export function ClientHintCheck({ nonce }: { nonce: string }) {
+  const { revalidate } = useRevalidator();
+  React.useEffect(() => subscribeToSchemeChange(() => revalidate()), [revalidate]);
+
+  // Ensure nonce is always a string to match server rendering
+  const nonceValue = nonce || '';
+
+  return (
+    <script
+      nonce={nonceValue}
+      dangerouslySetInnerHTML={{
+        __html: hintsUtils.getClientHintCheckScript(),
+      }}
+    />
+  );
+}

app/components/misc/dynamic-favicon.tsx

@@ -0,0 +1,172 @@
+import { useSystemTheme } from '@/hooks/useSystemTheme';
+import * as React from 'react';
+
+// Favicon configuration for responsive theme support
+const FAVICON_CONFIGS = [
+  // Standard favicons - all sizes
+  {
+    rel: 'icon' as const,
+    type: 'image/png',
+    sizes: '16x16',
+    filename: 'favicon-16x16.png',
+  },
+  {
+    rel: 'icon' as const,
+    type: 'image/png',
+    sizes: '32x32',
+    filename: 'favicon-32x32.png',
+  },
+  {
+    rel: 'icon' as const,
+    type: 'image/png',
+    sizes: '96x96',
+    filename: 'favicon-96x96.png',
+  },
+  {
+    rel: 'icon' as const,
+    type: 'image/png',
+    sizes: '128x128',
+    filename: 'favicon-128x128.png',
+  },
+  {
+    rel: 'icon' as const,
+    type: 'image/png',
+    sizes: '196x196',
+    filename: 'favicon-196x196.png',
+  },
+  {
+    rel: 'icon' as const,
+    sizes: 'any',
+    filename: 'favicon.ico',
+  },
+  // Apple touch icons - all sizes
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '57x57',
+    filename: 'apple-touch-icons/apple-touch-icon-57x57.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '60x60',
+    filename: 'apple-touch-icons/apple-touch-icon-60x60.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '72x72',
+    filename: 'apple-touch-icons/apple-touch-icon-72x72.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '76x76',
+    filename: 'apple-touch-icons/apple-touch-icon-76x76.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '114x114',
+    filename: 'apple-touch-icons/apple-touch-icon-114x114.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '120x120',
+    filename: 'apple-touch-icons/apple-touch-icon-120x120.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '144x144',
+    filename: 'apple-touch-icons/apple-touch-icon-144x144.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '152x152',
+    filename: 'apple-touch-icons/apple-touch-icon-152x152.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '167x167',
+    filename: 'apple-touch-icons/apple-touch-icon-167x167.png',
+  },
+  {
+    rel: 'apple-touch-icon' as const,
+    sizes: '180x180',
+    filename: 'apple-touch-icons/apple-touch-icon-180x180.png',
+  },
+] as const;
+
+// Microsoft tile configuration (uses meta tags, not link tags)
+const MSTILE_CONFIGS = [
+  {
+    name: 'msapplication-TileImage',
+    filename: 'mstile/mstile-144x144.png',
+  },
+  {
+    name: 'msapplication-square70x70logo',
+    filename: 'mstile/mstile-70x70.png',
+  },
+  {
+    name: 'msapplication-square150x150logo',
+    filename: 'mstile/mstile-150x150.png',
+  },
+  {
+    name: 'msapplication-wide310x150logo',
+    filename: 'mstile/mstile-310x150.png',
+  },
+  {
+    name: 'msapplication-square310x310logo',
+    filename: 'mstile/mstile-310x310.png',
+  },
+] as const;
+
+/**
+ * Dynamically updates favicon based on system theme changes
+ * Uses matchMedia to detect system theme preferences and automatically
+ * switches between light and dark favicons accordingly.
+ */
+export const DynamicFaviconLinks = () => {
+  const isDarkMode = useSystemTheme();
+
+  React.useEffect(() => {
+    // Only run in browser environment
+    if (typeof document === 'undefined') return;
+
+    // Remove existing favicon links to avoid duplicates
+    const existingLinks = document.querySelectorAll('link[rel*="icon"]');
+    existingLinks.forEach((link) => link.remove());
+
+    // Remove existing Microsoft tile meta tags
+    const existingMetaTiles = document.querySelectorAll('meta[name*="msapplication"]');
+    existingMetaTiles.forEach((meta) => meta.remove());
+
+    // Choose favicon based on system theme
+    // Dark favicon for light theme, light favicon for dark theme
+    const themeFolder = isDarkMode ? 'light' : 'dark';
+
+    // Add new favicon links based on current theme
+    FAVICON_CONFIGS.forEach((config) => {
+      const link = document.createElement('link');
+      link.rel = config.rel;
+
+      if ('type' in config) {
+        link.type = config.type;
+      }
+      if ('sizes' in config) {
+        link.setAttribute('sizes', config.sizes);
+      }
+
+      link.href = `/favicons/${themeFolder}/${config.filename}`;
+
+      // Add the link to the document head
+      document.head.appendChild(link);
+    });
+
+    // Add Microsoft tile meta tags
+    MSTILE_CONFIGS.forEach((config) => {
+      const meta = document.createElement('meta');
+      meta.name = config.name;
+      meta.content = `/favicons/${themeFolder}/${config.filename}`;
+      document.head.appendChild(meta);
+    });
+  }, [isDarkMode]);
+
+  // Return static links for SSR (will be replaced by useEffect on client)
+  return <></>;
+};

app/hooks/useSystemTheme.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook to detect system theme changes using matchMedia
+ *
+ * @returns {boolean} isDarkMode - Whether the system is currently in dark mode
+ *
+ * @example
+ * ```tsx
+ * const isDarkMode = useSystemTheme();
+ *
+ * return (
+ *   <div className={isDarkMode ? 'dark-theme' : 'light-theme'}>
+ *     Current theme: {isDarkMode ? 'Dark' : 'Light'}
+ *   </div>
+ * );
+ * ```
+ */
+export function useSystemTheme(): boolean {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    // Check if we're in the browser environment
+    if (typeof window === 'undefined') return;
+
+    // Create media query matcher for dark mode
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Set initial state
+    setIsDarkMode(mediaQuery.matches);
+
+    // Create event handler for theme changes
+    const handleThemeChange = (event: MediaQueryListEvent) => {
+      setIsDarkMode(event.matches);
+    };
+
+    // Add listener for theme changes
+    mediaQuery.addEventListener('change', handleThemeChange);
+
+    // Cleanup listener on unmount
+    return () => {
+      mediaQuery.removeEventListener('change', handleThemeChange);
+    };
+  }, []);
+
+  return isDarkMode;
+}

app/layouts/blank.layout.tsx

@@ -0,0 +1,23 @@
+import { Logo } from '@datum-cloud/datum-ui/logo';
+import { cn } from '@datum-cloud/datum-ui/utils';
+
+export default function BlankLayout({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'bg-background relative flex min-h-screen w-full flex-col p-3 sm:p-4 md:px-[41px] md:py-8',
+        className
+      )}>
+      <div className="justify-flex-start mb-6 flex items-center">
+        <Logo.Flat aria-label="Datum" className="h-6 w-auto" tone="brand" />
+      </div>
+      {children}
+    </div>
+  );
+}