Theme System Refactor (#6)

# Dashboard State Lift + Theme System Refactor

## Summary

Refactored dashboard state ownership, centralized theme semantics, and simplified component styling across the application.

## Changes

### Dashboard State Refactor

* Moved dashboard state management from `Dashboard.view` into `Dashboard.tsx`
* Added centralized `DashboardState` initialization in parent container
* Introduced memoized dashboard state setter callbacks:

  * `toggleFlow`
  * `setFlow`
  * `togglePeriodType`
  * `toggleComparison`
  * `setSelectedPeriodId`
  * `setSelectedGroupKey`
* Added `DashboardStateSetters` memoized object for prop-driven state management
* Removed `onFlowChange` callback pattern
* Converted dashboard component into stateless view layer
* Renamed component export flow:

  * `Dashboard.tsx` → removed
  * `Dashboard.view.tsx` → primary implementation

### Dashboard Models Cleanup

* Removed legacy palette configuration interfaces:

  * `ColorDefinition`
  * `ThemeAwarePalette`
* Removed config-level style palette support from `DashboardConfig`
* Renamed `DashboardProps` → `DashboardViewProps`
* Added reusable `ColorScheme` interface
* Simplified component color contract:

  * `primary`
  * `surface`
  * `text`

### Theme Architecture Refactor

* Moved `AppTheme.tsx` into `shared-theme`
* Added centralized semantic theme system
* Introduced `themeConfig.ts` with semantic tokens:

  * surface
  * border
  * text
* Added `semantic` extension to MUI theme typing
* Added `flows` palette extension:

  * outflows
  * inflows
* Centralized flow colors inside theme primitives
* Added CSS semantic variables:

  * `--bg-page`
  * `--bg-card`
  * `--bg-elevated`
  * `--border-default`
  * `--border-subtle`
  * `--text-primary`
  * `--text-secondary`
  * `--text-muted`

### Theme Mode Improvements

* Added explicit `ColorMode` type
* Expanded `ColorModeContext`:

  * `mode`
  * `setMode`
  * `toggleColorMode`
* Added `CssBaseline`
* Added configurable `defaultMode`
* Simplified dark theme palette handling
* Standardized dark surfaces and shadows
* Reduced excessive dark-mode glow/shadow intensity

### Dashboard UI Styling Improvements

* Replaced hardcoded dashboard palette config with theme palette usage
* Updated dashboard background gradients to use alpha-based semantic colors
* Replaced `colorScheme.light` usage with `colorScheme.surface`
* Standardized border usage with theme divider tokens
* Removed manual dark-mode conditional styling where redundant
* Simplified card and progress styling logic

### Shared Theme Customization Cleanup

Updated customization layers for improved consistency:

* `inputs`
* `navigation`
* `feedback`
* `surfaces`

Key improvements:

* Reduced dark-mode contrast harshness
* Unified divider usage
* Replaced hardcoded grayscale backgrounds with semantic surfaces
* Simplified hover and active state styling
* Reduced shadow intensity across components
* Improved dark-mode readability and layering

### Home Page Styling Cleanup

* Replaced manual RGBA handling with `alpha()` utility
* Improved dark-mode glassmorphism consistency
* Updated CTA hover shadow to use theme primary color

### Miscellaneous Cleanup

* Updated imports to new theme structure
* Removed unused legacy color mode components:

  * `ColorModeIconDropdown.tsx`
  * `ColorModeSelect.tsx`
* Removed dashboard config style palette definitions
* Simplified flow-based color derivation logic

## Result

* Cleaner separation of stateful vs presentational dashboard logic
* Centralized semantic theming system
* Consistent dark/light mode behavior
* Reduced styling duplication
* Improved maintainability and extensibility of theme architecture
* Simplified dashboard component contracts
* Better UI consistency across surfaces and controls

Reviewed-on: #6
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

src/shared-theme/customizations/feedback.tsx

@@ -14,8 +14,8 @@ export const feedbackCustomizations: Components<Theme> = {
           color: orange[500],
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
+          backgroundColor: alpha(orange[900], 0.35),
+          border: `1px solid ${alpha(orange[800], 0.3)}`,
         }),
       }),
     },

src/shared-theme/customizations/inputs.tsx

@@ -125,15 +125,15 @@ export const inputsCustomizations: Components<Theme> = {
                 backgroundColor: gray[200],
               },
               ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
+                backgroundColor: 'hsla(0, 0%, 100%, 0.06)',
+                borderColor: (theme.vars || theme).palette.divider,
 
                 '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
+                  backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
+                  borderColor: 'hsla(0, 0%, 100%, 0.15)',
                 },
                 '&:active': {
-                  backgroundColor: gray[900],
+                  backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
                 },
               }),
             },
@@ -183,12 +183,12 @@ export const inputsCustomizations: Components<Theme> = {
                 backgroundColor: gray[200],
               },
               ...theme.applyStyles('dark', {
-                color: gray[50],
+                color: 'hsl(0, 0%, 92%)',
                 '&:hover': {
-                  backgroundColor: gray[700],
+                  backgroundColor: 'hsla(0, 0%, 100%, 0.08)',
                 },
                 '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
+                  backgroundColor: 'hsla(0, 0%, 100%, 0.12)',
                 },
               }),
             },
@@ -241,14 +241,14 @@ export const inputsCustomizations: Components<Theme> = {
           backgroundColor: gray[200],
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
+          backgroundColor: 'hsla(0, 0%, 100%, 0.06)',
+          borderColor: (theme.vars || theme).palette.divider,
           '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
+            backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
+            borderColor: 'hsla(0, 0%, 100%, 0.15)',
           },
           '&:active': {
-            backgroundColor: gray[900],
+            backgroundColor: 'hsla(0, 0%, 100%, 0.1)',
           },
         }),
         variants: [
@@ -288,7 +288,7 @@ export const inputsCustomizations: Components<Theme> = {
           [`& .${toggleButtonGroupClasses.selected}`]: {
             color: '#fff',
           },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
+          boxShadow: `0 2px 8px ${alpha(brand[700], 0.3)}`,
         }),
       }),
     },
@@ -302,7 +302,7 @@ export const inputsCustomizations: Components<Theme> = {
         fontWeight: 500,
         ...theme.applyStyles('dark', {
           color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)',
           [`&.${toggleButtonClasses.selected}`]: {
             color: brand[300],
           },

src/shared-theme/customizations/navigation.tsx

@@ -49,9 +49,8 @@ export const navigationCustomizations: Components<Theme> = {
           },
         },
         ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+          background: (theme.vars || theme).palette.background.paper,
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)',
         }),
       }),
     },
@@ -84,17 +83,17 @@ export const navigationCustomizations: Components<Theme> = {
 
         ...theme.applyStyles('dark', {
           borderRadius: (theme.vars || theme).shape.borderRadius,
-          borderColor: gray[700],
+          borderColor: (theme.vars || theme).palette.divider,
           backgroundColor: (theme.vars || theme).palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
+          boxShadow: 'inset 0 1px 0 hsla(0, 0%, 100%, 0.05)',
           '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
+            borderColor: 'hsla(0, 0%, 100%, 0.15)',
             backgroundColor: (theme.vars || theme).palette.background.paper,
             boxShadow: 'none',
           },
           [`&.${selectClasses.focused}`]: {
             outlineOffset: 0,
-            borderColor: gray[900],
+            borderColor: 'hsl(210, 55%, 55%)',
           },
           '&:before, &:after': {
             display: 'none',
@@ -108,7 +107,7 @@ export const navigationCustomizations: Components<Theme> = {
           display: 'flex',
           alignItems: 'center',
           '&:focus-visible': {
-            backgroundColor: gray[900],
+            backgroundColor: (theme.vars || theme).palette.background.default,
           },
         }),
       }),
@@ -151,6 +150,7 @@ export const navigationCustomizations: Components<Theme> = {
     styleOverrides: {
       paper: ({ theme }) => ({
         backgroundColor: (theme.vars || theme).palette.background.default,
+        borderRight: `1px solid ${(theme.vars || theme).palette.divider}`,
       }),
     },
   },
@@ -204,8 +204,8 @@ export const navigationCustomizations: Components<Theme> = {
         ...theme.applyStyles('dark', {
           ':hover': {
             color: (theme.vars || theme).palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
+            backgroundColor: alpha((theme.vars || theme).palette.common.white, 0.08),
+            borderColor: (theme.vars || theme).palette.divider,
           },
           [`&.${tabClasses.selected}`]: {
             color: '#fff',

src/shared-theme/customizations/surfaces.ts

@@ -40,7 +40,7 @@ export const surfacesCustomizations: Components<Theme> = {
         '&:hover': { backgroundColor: gray[50] },
         '&:focus-visible': { backgroundColor: 'transparent' },
         ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
+          '&:hover': { backgroundColor: alpha(theme.palette.common.white, 0.06) },
         }),
       }),
     },
@@ -67,7 +67,7 @@ export const surfacesCustomizations: Components<Theme> = {
           border: `1px solid ${(theme.vars || theme).palette.divider}`,
           boxShadow: 'none',
           ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
+            backgroundColor: (theme.vars || theme).palette.background.paper,
           }),
           variants: [
             {
@@ -79,7 +79,7 @@ export const surfacesCustomizations: Components<Theme> = {
                 boxShadow: 'none',
                 background: 'hsl(0, 0%, 100%)',
                 ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
+                  background: alpha((theme.vars || theme).palette.background.paper, 0.6),
                 }),
               },
             },