Theme System Refactor #6

Merged

aetos merged 5 commits from shared-theme-fixes into main 2026-05-23 11:41:58 +00:00

Conversation 0 Commits 5 Files Changed 22 +559 -573

aetos commented 2026-05-23 11:41:47 +00:00

Owner

Copy Link

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

# 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

aetos added 5 commits 2026-05-23 11:41:47 +00:00

AppTheme.tsx fixes de59ef1f7d

default light 86bb9ab222

remove unused 7dd685ae49

Dashboard.view.tsx to handle rendering and Dashboard.tsx to handle state 2a12e33e22

common themeConfig.ts 5fb810bd5a

aetos merged commit a1ff2c692c into main 2026-05-23 11:41:58 +00:00

aetos deleted branch shared-theme-fixes 2026-05-23 11:41:58 +00:00

aetos referenced this issue from a commit 2026-05-23 11:41:59 +00:00

Theme System Refactor (#6)

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

aetos

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: apps/khata-ui#6

No description provided.