apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme System Refactor (#6)

Browse Source 
# 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>
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-05-23 11:41:57 +00:00
committed by aetos
parent 16d164b92a
commit a1ff2c692c
22 changed files with 559 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/shared-theme/themePrimitives.ts
View File

@@ -23,6 +23,10 @@ declare module '@mui/material/styles' {
interface Palette {
baseShadow: string;
flows: {
outflows: { primary: string; surface: string; text: string };
inflows: { primary: string; surface: string; text: string };
};
}
}
@@ -52,7 +56,9 @@ export const gray = {
500: 'hsl(220, 20%, 42%)',
600: 'hsl(220, 20%, 35%)',
700: 'hsl(220, 20%, 25%)',
750: 'hsl(220, 20%, 18%)',
800: 'hsl(220, 30%, 6%)',
850: 'hsl(220, 22%, 11%)',
900: 'hsl(220, 35%, 3%)',
};
@@ -95,10 +101,14 @@ export const red = {
900: 'hsl(0, 93%, 6%)',
};
const darkBg = 'hsl(0, 0%, 9%)';
const darkPaper = 'hsl(0, 0%, 14%)';
const darkElevated = 'hsl(0, 0%, 19%)';
export const getDesignTokens = (mode: PaletteMode) => {
customShadows[1] =
mode === 'dark'
? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
? '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)'
: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
return {
@@ -111,9 +121,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
contrastText: brand[50],
...(mode === 'dark' && {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
light: 'hsl(210, 50%, 65%)',
main: 'hsl(210, 55%, 55%)',
dark: 'hsl(210, 50%, 35%)',
}),
},
info: {
@@ -122,10 +132,10 @@ export const getDesignTokens = (mode: PaletteMode) => {
dark: brand[600],
contrastText: gray[50],
...(mode === 'dark' && {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
contrastText: 'hsl(210, 30%, 80%)',
light: 'hsl(210, 40%, 50%)',
main: 'hsl(210, 35%, 40%)',
dark: 'hsl(210, 30%, 25%)',
}),
},
warning: {
@@ -133,9 +143,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
main: orange[400],
dark: orange[800],
...(mode === 'dark' && {
light: orange[400],
main: orange[500],
dark: orange[700],
light: 'hsl(45, 60%, 55%)',
main: 'hsl(45, 55%, 45%)',
dark: 'hsl(45, 50%, 30%)',
}),
},
error: {
@@ -143,9 +153,9 @@ export const getDesignTokens = (mode: PaletteMode) => {
main: red[400],
dark: red[800],
...(mode === 'dark' && {
light: red[400],
main: red[500],
dark: red[700],
light: 'hsl(0, 55%, 60%)',
main: 'hsl(0, 55%, 50%)',
dark: 'hsl(0, 50%, 35%)',
}),
},
success: {
@@ -153,34 +163,46 @@ export const getDesignTokens = (mode: PaletteMode) => {
main: green[400],
dark: green[800],
...(mode === 'dark' && {
light: green[400],
main: green[500],
dark: green[700],
light: 'hsl(120, 40%, 55%)',
main: 'hsl(120, 40%, 45%)',
dark: 'hsl(120, 35%, 30%)',
}),
},
grey: {
...gray,
},
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
divider: mode === 'dark' ? 'hsla(0, 0%, 100%, 0.08)' : alpha(gray[300], 0.4),
background: {
default: 'hsl(0, 0%, 99%)',
paper: 'hsl(220, 35%, 97%)',
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
...(mode === 'dark' && { default: darkBg, paper: darkPaper }),
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
...(mode === 'dark' && { primary: 'hsl(0, 0%, 92%)', secondary: 'hsl(0, 0%, 60%)' }),
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
...(mode === 'dark' && {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
hover: 'hsla(0, 0%, 100%, 0.06)',
selected: 'hsla(0, 0%, 100%, 0.1)',
}),
},
flows: {
outflows: {
primary: mode === 'dark' ? 'hsl(0, 55%, 60%)' : '#d32f2f',
surface: mode === 'dark' ? 'hsla(0, 35%, 25%, 0.6)' : '#fdecea',
text: mode === 'dark' ? 'hsl(0, 60%, 80%)' : '#b71c1c',
},
inflows: {
primary: mode === 'dark' ? 'hsl(120, 40%, 55%)' : '#2e7d32',
surface: mode === 'dark' ? 'hsla(120, 25%, 22%, 0.6)' : '#e8f5e9',
text: mode === 'dark' ? 'hsl(120, 40%, 78%)' : '#1b5e20',
},
},
},
typography: {
fontFamily: 'Inter, sans-serif',
@@ -285,6 +307,18 @@ export const colorSchemes = {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
},
flows: {
outflows: {
primary: '#d32f2f',
surface: '#fdecea',
text: '#b71c1c',
},
inflows: {
primary: '#2e7d32',
surface: '#e8f5e9',
text: '#1b5e20',
},
},
baseShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
},
@@ -293,49 +327,60 @@ export const colorSchemes = {
palette: {
primary: {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
light: 'hsl(210, 50%, 65%)',
main: 'hsl(210, 55%, 55%)',
dark: 'hsl(210, 50%, 35%)',
},
info: {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
contrastText: 'hsl(210, 30%, 80%)',
light: 'hsl(210, 40%, 50%)',
main: 'hsl(210, 35%, 40%)',
dark: 'hsl(210, 30%, 25%)',
},
warning: {
light: orange[400],
main: orange[500],
dark: orange[700],
light: 'hsl(45, 60%, 55%)',
main: 'hsl(45, 55%, 45%)',
dark: 'hsl(45, 50%, 30%)',
},
error: {
light: red[400],
main: red[500],
dark: red[700],
light: 'hsl(0, 55%, 60%)',
main: 'hsl(0, 55%, 50%)',
dark: 'hsl(0, 50%, 35%)',
},
success: {
light: green[400],
main: green[500],
dark: green[700],
light: 'hsl(120, 40%, 55%)',
main: 'hsl(120, 40%, 45%)',
dark: 'hsl(120, 35%, 30%)',
},
grey: {
...gray,
},
divider: alpha(gray[700], 0.6),
divider: 'hsla(0, 0%, 100%, 0.08)',
background: {
default: gray[900],
paper: 'hsl(220, 30%, 7%)',
default: darkBg,
paper: darkPaper,
},
text: {
primary: 'hsl(0, 0%, 100%)',
secondary: gray[400],
primary: 'hsl(0, 0%, 92%)',
secondary: 'hsl(0, 0%, 60%)',
},
action: {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
hover: 'hsla(0, 0%, 100%, 0.06)',
selected: 'hsla(0, 0%, 100%, 0.1)',
},
baseShadow:
'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
flows: {
outflows: {
primary: 'hsl(0, 55%, 60%)',
surface: 'hsla(0, 35%, 25%, 0.6)',
text: 'hsl(0, 60%, 80%)',
},
inflows: {
primary: 'hsl(120, 40%, 55%)',
surface: 'hsla(120, 25%, 22%, 0.6)',
text: 'hsl(120, 40%, 78%)',
},
},
baseShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)',
},
},
};