Skip to content

Commit 94b8958

Browse files
MohsinHashmi-DataInnDeveloperclaude
authored
Complete corporate theme migration (#469)
* feat(ui): complete migration from neumorphic to corporate theme ## Summary - Migrate entire frontend from neumorphic (soft UI) to minimal corporate theme - Update SCSS variables, mixins, and component styles - Update Tailwind CSS custom properties - Clean up unused migration wrapper components ## Changes ### Core Style Files - `_variables.scss`: Complete rewrite with corporate colors (#ffffff, #f8f9fa), borders (#e5e7eb), and subtle shadows - `_mixins.scss`: Update mixins to corporate styling with legacy aliases - `_neumorphic-components.scss`: Update component classes (dual naming for compatibility) - `style.scss`: Update all Bootstrap overrides (cards, buttons, forms, tables, modals) - `tailwind.css`: Update CSS custom properties with corporate values ### Component Updates - `dropdown-menu.jsx`: Remove inline neumorphic styles - `neumorphic-pagination.jsx`: Update to corporate theme - `social-login-buttons.jsx`: Replace shadow classes with borders - `step-wizard.jsx`: Update step circles and connectors ### Screen Updates - Chart of accounts, contacts, employees, products, currency screens - Dashboard sections (bank_account, cash_flow) - Theme reference page with updated examples ### Cleanup - Remove unused Neu* wrapper components (NeuButton, NeuCard, etc.) - Simplify migration/index.js to re-export reactstrap components ## Theme Changes | Element | Old | New | |---------|-----|-----| | Background | #e8eef5 | #ffffff / #f8f9fa | | Borders | None (shadows) | 1px solid #e5e7eb | | Shadows | Multi-directional | Subtle bottom shadows | | Text Primary | #1e3a5f | #111827 | 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: restore migration neu components The migration folder contains custom shadcn/ui-based components that provide reactstrap-compatible APIs. These were incorrectly removed - reactstrap is not installed in this project. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Developer <developer@simpleaccounts.io> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent a968e19 commit 94b8958

31 files changed

Lines changed: 1628 additions & 2260 deletions

File tree

‎apps/frontend/src/assets/css/tailwind.css‎

Lines changed: 90 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,75 +2,108 @@
22

33
/* Tailwind v4 Theme Configuration */
44
@theme {
5-
/* Neumorphic Colors */
6-
--color-neu-bg: #e8eef5;
7-
--color-neu-bg-alt: #e0e5ec;
8-
--color-neu-bg-dark: #2b2d33;
9-
--color-neu-bg-dark-alt: #31343b;
10-
--color-neu-border: #d1d9e6;
11-
--color-neu-border-dark: #3d4049;
12-
--color-neu-shadow-dark: #c4c9cf;
5+
/* Corporate Colors - Primary Theme */
6+
--color-corp-bg-primary: #ffffff;
7+
--color-corp-bg-secondary: #f8f9fa;
8+
--color-corp-bg-tertiary: #f3f4f6;
9+
--color-corp-border-light: #e5e7eb;
10+
--color-corp-border-dark: #d1d5db;
11+
--color-corp-primary: #2064d8;
12+
--color-corp-primary-dark: #1a56b8;
13+
--color-corp-secondary: #10b981;
14+
--color-corp-success: #10b981;
15+
--color-corp-warning: #f59e0b;
16+
--color-corp-danger: #ef4444;
17+
--color-corp-info: #3b82f6;
18+
19+
/* Corporate Text Colors */
20+
--color-corp-text-primary: #111827;
21+
--color-corp-text-secondary: #4b5563;
22+
--color-corp-text-muted: #9ca3af;
23+
24+
/* Corporate Shadows - Clean and minimal */
25+
--shadow-corp-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
26+
--shadow-corp-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
27+
--shadow-corp-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
28+
--shadow-corp-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
29+
--shadow-corp-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
30+
31+
/* Legacy Aliases - Map neu- to corporate values for backwards compatibility */
32+
--color-neu-bg: #f8f9fa;
33+
--color-neu-bg-alt: #f3f4f6;
34+
--color-neu-bg-dark: #1f2937;
35+
--color-neu-bg-dark-alt: #374151;
36+
--color-neu-border: #e5e7eb;
37+
--color-neu-border-dark: #374151;
38+
--color-neu-shadow-dark: #e5e7eb;
1339
--color-neu-shadow-light: #ffffff;
14-
--color-neu-shadow-dark-dm: #1e1f23;
15-
--color-neu-shadow-light-dm: #383b43;
16-
--color-neu-primary: #1e6eff;
17-
--color-neu-primary-dark: #0052cc;
18-
--color-neu-secondary: #00c896;
40+
--color-neu-shadow-dark-dm: #111827;
41+
--color-neu-shadow-light-dm: #4b5563;
42+
--color-neu-primary: #2064d8;
43+
--color-neu-primary-dark: #1a56b8;
44+
--color-neu-secondary: #10b981;
1945
--color-neu-warning: #f59e0b;
20-
--color-neu-danger: #ff4d6a;
46+
--color-neu-danger: #ef4444;
2147

22-
/* Neumorphic Text Colors */
23-
--color-neu-text-primary: #1e3a5f;
24-
--color-neu-text-secondary: #3d5a80;
25-
--color-neu-text-muted: #98afc2;
26-
--color-neu-text-dark: #1e3a5f;
27-
--color-neu-text-light: #98afc2;
48+
/* Legacy Text Colors */
49+
--color-neu-text-primary: #111827;
50+
--color-neu-text-secondary: #4b5563;
51+
--color-neu-text-muted: #9ca3af;
52+
--color-neu-text-dark: #111827;
53+
--color-neu-text-light: #9ca3af;
2854

29-
/* Neumorphic Shadows - Light Mode */
30-
--shadow-neu-flat: 2px 2px 4px #c4c9cf, -2px -2px 4px #ffffff;
31-
--shadow-neu-raised-xs: 2px 2px 4px #c4c9cf, -2px -2px 4px #ffffff;
32-
--shadow-neu-raised-sm: 3px 3px 6px #c4c9cf, -3px -3px 6px #ffffff;
33-
--shadow-neu-raised: 6px 6px 12px #c4c9cf, -6px -6px 12px #ffffff;
34-
--shadow-neu-raised-md: 8px 8px 16px #c4c9cf, -8px -8px 16px #ffffff;
35-
--shadow-neu-raised-lg: 10px 10px 20px #c4c9cf, -10px -10px 20px #ffffff;
36-
--shadow-neu-raised-xl: 15px 15px 30px #c4c9cf, -15px -15px 30px #ffffff;
55+
/* Legacy Shadows - Now map to corporate shadows */
56+
--shadow-neu-flat: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
57+
--shadow-neu-raised-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
58+
--shadow-neu-raised-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
59+
--shadow-neu-raised: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
60+
--shadow-neu-raised-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
61+
--shadow-neu-raised-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
62+
--shadow-neu-raised-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
3763

38-
/* Neumorphic Inset Shadows - Light Mode */
39-
--shadow-neu-pressed-xs: inset 1px 1px 2px #c4c9cf, inset -1px -1px 2px #ffffff;
40-
--shadow-neu-pressed-sm: inset 2px 2px 4px #c4c9cf, inset -2px -2px 4px #ffffff;
41-
--shadow-neu-pressed: inset 3px 3px 6px #c4c9cf, inset -3px -3px 6px #ffffff;
42-
--shadow-neu-pressed-md: inset 4px 4px 8px #c4c9cf, inset -4px -4px 8px #ffffff;
43-
--shadow-neu-pressed-lg: inset 6px 6px 12px #c4c9cf, inset -6px -6px 12px #ffffff;
64+
/* Legacy Inset Shadows - Now none or minimal */
65+
--shadow-neu-pressed-xs: none;
66+
--shadow-neu-pressed-sm: none;
67+
--shadow-neu-pressed: none;
68+
--shadow-neu-pressed-md: none;
69+
--shadow-neu-pressed-lg: none;
4470

45-
/* Neumorphic Shadows - Dark Mode */
46-
--shadow-neu-raised-dark: 6px 6px 12px #1e1f23, -6px -6px 12px #383b43;
47-
--shadow-neu-raised-sm-dark: 3px 3px 6px #1e1f23, -3px -3px 6px #383b43;
48-
--shadow-neu-pressed-dark: inset 3px 3px 6px #1e1f23, inset -3px -3px 6px #383b43;
49-
--shadow-neu-pressed-sm-dark: inset 2px 2px 4px #1e1f23, inset -2px -2px 4px #383b43;
71+
/* Legacy Dark Mode Shadows */
72+
--shadow-neu-raised-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
73+
--shadow-neu-raised-sm-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
74+
--shadow-neu-pressed-dark: none;
75+
--shadow-neu-pressed-sm-dark: none;
5076

51-
/* Legacy Aliases for Compatibility */
52-
--shadow-neu-out: 6px 6px 12px #c4c9cf, -6px -6px 12px #ffffff;
53-
--shadow-neu-in: inset 3px 3px 6px #c4c9cf, inset -3px -3px 6px #ffffff;
54-
--shadow-neu-out-dark: 6px 6px 12px #1e1f23, -6px -6px 12px #383b43;
55-
--shadow-neu-in-dark: inset 3px 3px 6px #1e1f23, inset -3px -3px 6px #383b43;
77+
/* Legacy Aliases */
78+
--shadow-neu-out: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
79+
--shadow-neu-in: none;
80+
--shadow-neu-out-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
81+
--shadow-neu-in-dark: none;
5682

57-
/* Button Shadows */
58-
--shadow-neu-btn: 3px 3px 6px #c4c9cf, -3px -3px 6px #ffffff;
59-
--shadow-neu-btn-hover: 5px 5px 10px #c4c9cf, -5px -5px 10px #ffffff;
60-
--shadow-neu-btn-active: inset 2px 2px 5px #c4c9cf, inset -2px -2px 5px #ffffff;
83+
/* Legacy Button Shadows */
84+
--shadow-neu-btn: none;
85+
--shadow-neu-btn-hover: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
86+
--shadow-neu-btn-active: none;
6187

62-
/* Input Shadows */
63-
--shadow-neu-input: inset 2px 2px 4px #c4c9cf, inset -2px -2px 4px #ffffff;
64-
--shadow-neu-input-focus: inset 3px 3px 6px #c4c9cf, inset -3px -3px 6px #ffffff;
88+
/* Legacy Input Shadows */
89+
--shadow-neu-input: none;
90+
--shadow-neu-input-focus: 0 0 0 3px rgba(32, 100, 216, 0.1);
6591

6692
/* Border Radius */
93+
--radius-corp-xs: 0.25rem;
94+
--radius-corp-sm: 0.375rem;
95+
--radius-corp-md: 0.5rem;
96+
--radius-corp-lg: 0.75rem;
97+
--radius-corp-xl: 1rem;
98+
99+
/* Legacy Border Radius */
67100
--radius-neu-xs: 0.25rem;
68-
--radius-neu-sm: 0.5rem;
69-
--radius-neu: 0.75rem;
70-
--radius-neu-md: 1rem;
71-
--radius-neu-lg: 1.25rem;
72-
--radius-neu-xl: 1.5rem;
73-
--radius-neu-2xl: 2rem;
101+
--radius-neu-sm: 0.375rem;
102+
--radius-neu: 0.5rem;
103+
--radius-neu-md: 0.5rem;
104+
--radius-neu-lg: 0.75rem;
105+
--radius-neu-xl: 1rem;
106+
--radius-neu-2xl: 1.5rem;
74107
}
75108

76109
@layer base {

0 commit comments

Comments
 (0)