From d726248e656bcd5819c4de527b98e960d67c3e32 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 9 Feb 2026 07:25:41 +0000
Subject: [PATCH] Replace hardcoded values in bottom-tab-bar with theme
 constants

- Add `surfaceGlass` semantic token for frosted glass background color
- Add `breakpoints.mobile` constant (768px) for mobile/desktop media queries
- Use theme constants in bottom-tab-bar.tsx instead of hardcoded rgba and media query
- Add corresponding `--semantic-surface-glass` CSS variable
- Document why !important is needed on background-color in index.css
  (overrides MUI CssBaseline's Emotion-injected styles)

https://claude.ai/code/session_01XMnEqXu6R4M4sjuUdgmQsy
---
 .../web/app/components/bottom-tab-bar/bottom-tab-bar.tsx    | 4 ++--
 packages/web/app/components/index.css                       | 5 ++++-
 packages/web/app/theme/theme-config.ts                      | 6 ++++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/web/app/components/bottom-tab-bar/bottom-tab-bar.tsx b/packages/web/app/components/bottom-tab-bar/bottom-tab-bar.tsx
index 0e539d62..17d56a91 100644
--- a/packages/web/app/components/bottom-tab-bar/bottom-tab-bar.tsx
+++ b/packages/web/app/components/bottom-tab-bar/bottom-tab-bar.tsx
@@ -281,13 +281,13 @@ function BottomTabBar({ boardDetails, angle, boardConfigs }: BottomTabBarProps)
         onChange={handleTabChange}
         showLabels
         sx={{
-          background: 'rgba(255, 255, 255, 0.3)',
+          background: themeTokens.semantic.surfaceGlass,
           WebkitBackdropFilter: 'blur(5px)',
           backdropFilter: 'blur(5px)',
           borderRadius: `${themeTokens.borderRadius.xl}px`,
           py: `${themeTokens.spacing[2]}px`,
           height: 'auto',
-          '@media (min-width: 768px)': { display: 'none' },
+          [`@media (min-width: ${themeTokens.breakpoints.mobile}px)`]: { display: 'none' },
         }}
       >
         <BottomNavigationAction
diff --git a/packages/web/app/components/index.css b/packages/web/app/components/index.css
index 9d986503..736af349 100644
--- a/packages/web/app/components/index.css
+++ b/packages/web/app/components/index.css
@@ -22,6 +22,7 @@
   --semantic-background: #F9FAFB;
   --semantic-surface: #FFFFFF;
   --semantic-surface-overlay: rgba(255, 255, 255, 0.95);
+  --semantic-surface-glass: rgba(255, 255, 255, 0.3);
   --semantic-selected: #F7F2F3;
   --semantic-selected-hover: #EFE6E8;
   --semantic-selected-light: rgba(140, 74, 82, 0.06);
@@ -45,7 +46,9 @@
   --border-subtle: rgba(0, 0, 0, 0.06);
 }
 
-/* Base styles */
+/* Base styles
+   Note: !important on background-color is required to override MUI's CssBaseline,
+   which sets its own background-color with high specificity via Emotion styles. */
 html {
   touch-action: manipulation;
   background-color: var(--semantic-surface) !important;
diff --git a/packages/web/app/theme/theme-config.ts b/packages/web/app/theme/theme-config.ts
index 8b0aee87..6eee73a6 100644
--- a/packages/web/app/theme/theme-config.ts
+++ b/packages/web/app/theme/theme-config.ts
@@ -47,6 +47,7 @@ export const themeTokens = {
     surface: '#FFFFFF',
     surfaceElevated: '#FFFFFF',
     surfaceOverlay: 'rgba(255, 255, 255, 0.95)', // Semi-transparent overlay
+    surfaceGlass: 'rgba(255, 255, 255, 0.3)', // Frosted glass effect background
     overlayLight: 'rgba(0, 0, 0, 0.3)', // Light dark overlay for hover states
     overlayDark: 'rgba(0, 0, 0, 0.6)', // Dark overlay for text backgrounds
   },
@@ -129,6 +130,11 @@ export const themeTokens = {
     slow: '300ms ease',
   },
 
+  // Breakpoints - standardized across the app for mobile/desktop transitions
+  breakpoints: {
+    mobile: 768, // Below this is mobile, at/above is desktop
+  },
+
   // Z-index scale
   zIndex: {
     dropdown: 1000,