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/components/ProgressCard/ProgressCard.view.tsx

@@ -25,7 +25,6 @@ export default function ProgressCardView({
   onClick,
 }: ProgressCardViewProps) {
   const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
 
   const percentage = getPercentage(progressAmount, totalAmount);
   const formattedProgress = formatCurrency(progressAmount);
@@ -41,7 +40,7 @@ export default function ProgressCardView({
         borderRadius: settings.compact ? 3 : 4,
         transform: selected ? "scale(1.02)" : "scale(1)",
         transition: "transform 0.2s ease, box-shadow 0.2s ease",
-        bgcolor: colorScheme.light,
+        bgcolor: colorScheme.surface,
         color: colorScheme.text,
         display: "flex",
         flexDirection: "column",
@@ -51,9 +50,8 @@ export default function ProgressCardView({
         overflow: "hidden",
         border: selected
           ? `2px solid ${colorScheme.primary}`
-          : isDark
-          ? "1px solid rgba(255,255,255,0.1)"
-          : "1px solid rgba(0,0,0,0.06)",
+          : "1px solid",
+        borderColor: selected ? colorScheme.primary : "divider",
         boxShadow: "none",
         opacity: isFetching ? 0.6 : 1,
         pointerEvents: isFetching ? "none" : "auto",
@@ -70,7 +68,6 @@ export default function ProgressCardView({
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           letterSpacing: 0.5,
-          textShadow: isDark ? "0 1px 2px rgba(0,0,0,0.3)" : "none",
         }}
       >
         {title}
@@ -83,7 +80,6 @@ export default function ProgressCardView({
           sx={{
             mb: 0.5,
             lineHeight: 1.2,
-            textShadow: isDark ? "0 2px 4px rgba(0,0,0,0.3)" : "none",
           }}
         >
           {formattedProgress}
@@ -92,7 +88,7 @@ export default function ProgressCardView({
         <Divider
           sx={{
             my: 1,
-            borderColor: isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)",
+            borderColor: "divider",
             width: "100%",
           }}
         />
@@ -118,7 +114,7 @@ export default function ProgressCardView({
             height: settings.compact ? 6 : 10,
             borderRadius: 5,
             [`&.${linearProgressClasses.colorPrimary}`]: {
-              backgroundColor: isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.08)",
+              backgroundColor: alpha(theme.palette.divider, 0.5),
             },
             [`& .${linearProgressClasses.bar}`]: {
               borderRadius: 5,