Skip to content

Commit 1e0dcf7

Browse files
neozhuneozhu
committed
Modernize theme and UI styles for improved clarity
Updated Theme.cs to use modern palette and typography, aligning with shadcn/ui and Tailwind standards. Refined layout properties and removed shadows. Revised app.css for consistent font sizing, improved chip/input/table styles, and removed error boundary styling for a cleaner look. Enhances accessibility, consistency, and overall visual professionalism.
1 parent 622354c commit 1e0dcf7

2 files changed

Lines changed: 163 additions & 171 deletions

File tree

‎src/Server.UI/Themes/Theme.cs‎

Lines changed: 137 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -8,209 +8,212 @@ public static MudTheme ApplicationTheme()
88
{
99
PaletteLight = new PaletteLight
1010
{
11-
Primary = "#5052ba",
12-
Secondary = "#7D7D7D",
13-
Success = "#0CAD39",
14-
Info = "#4099f3",
15-
Warning = "#f0c42b",
16-
Error = "rgba(244,67,54,1)",
11+
Primary = "#0f172a", // Modern blue, professional and trustworthy
12+
PrimaryContrastText = "#ffffff",
13+
PrimaryDarken = "#020617",
14+
PrimaryLighten = "#1e293b",
15+
Secondary = "#64748b", // Neutral gray, clean and professional
16+
SecondaryContrastText = "#ffffff",
17+
SecondaryLighten = "#475569",
18+
SecondaryDarken = "#94a3b8",
19+
Success = "#10b981", // Fresh green, success
20+
Info = "#0ea5e9", // Info blue, clear
21+
Tertiary = "#8b5cf6", // Purple 500
22+
TertiaryContrastText = "#ffffff",
23+
TertiaryDarken = "#7c3aed", // Purple 600
24+
TertiaryLighten = "#a78bfa", // Purple 400
25+
26+
Warning = "#f59e0b", // Amber 500
27+
WarningContrastText = "#92400e", // Amber 800
28+
WarningDarken = "#d97706", // Amber 600
29+
WarningLighten = "#fbbf24", // Amber 400
30+
31+
Error = "#dc2626", // Clear red, error
1732
ErrorContrastText = "#ffffff",
18-
ErrorDarken = "rgb(242,28,13)",
19-
ErrorLighten = "rgb(246,96,85)",
20-
Tertiary = "#20c997",
21-
Black = "#111",
22-
White = "#ffffff",
23-
AppbarBackground = "rgba(245, 245, 245, 0.8)",
24-
AppbarText = "#424242",
25-
Background = "#f5f5f5",
26-
Surface = "#ffffff",
33+
ErrorDarken = "#b91c1c",
34+
ErrorLighten = "#ef4444",
35+
36+
Black = "#020617", // Deep blue-black, more texture
37+
White = "#ffffff",
38+
AppbarBackground = "#f8fafc", // Very light blue-gray, modern
39+
AppbarText = "#0a0a0a",
40+
Background = "#f8fafc", // Very light blue-gray, modern
41+
Surface = "#ffffff",
2742
DrawerBackground = "#ffffff",
28-
TextPrimary = "#2E2E2E",
29-
TextSecondary = "#6c757d",
30-
SecondaryContrastText = "#F5F5F5",
31-
TextDisabled = "#B0B0B0",
32-
ActionDefault = "#80838b",
33-
ActionDisabled = "rgba(128, 131, 139, 0.3)",
34-
ActionDisabledBackground = "rgba(128, 131, 139, 0.12)",
35-
Divider = "#e2e5e8",
36-
DividerLight = "rgba(128, 131, 139, 0.15)",
37-
TableLines = "#eff0f2",
38-
LinesDefault = "#e2e5e8",
39-
LinesInputs = "#e2e5e8",
40-
43+
TextPrimary = "#0f172a", // Deep blue-gray, modern professional
44+
TextSecondary = "#64748b", // Neutral gray, hierarchy
4145

46+
TextDisabled = "#94a3b8", // Soft gray
47+
ActionDefault = "#262626",
48+
ActionDisabled = "rgba(100, 116, 139, 0.4)",
49+
ActionDisabledBackground = "rgba(100, 116, 139, 0.1)",
50+
Divider = "#e2e8f0", // Elegant divider
51+
DividerLight = "#f1f5f9",
52+
TableLines = "#e2e8f0", // Table lines, elegant
53+
LinesDefault = "#e2e8f0",
54+
LinesInputs = "#cbd5e1",
4255
},
4356
PaletteDark = new PaletteDark
4457
{
45-
Primary = "#5052ba",
46-
Secondary = "#A5A5A5",
47-
Success = "#0CAD39",
48-
Info = "#4099f3",
49-
Warning = "#f0c42b",
50-
Error = "#e02d48",
51-
ErrorContrastText = "#ffffff",
52-
ErrorDarken = "#e02d48",
53-
ErrorLighten = "#ff3333",
54-
Tertiary = "#20c997",
55-
Black = "#000000",
56-
White = "#ffffff",
57-
Background = "#202124",
58-
Surface = "#303134",
59-
AppbarBackground = "rgba(32, 33, 36, 0.8)",
60-
AppbarText = "rgba(255, 255, 255, 0.7)",
61-
DrawerBackground = "#303134",
62-
TextPrimary = "#DADADA",
63-
TextSecondary = "#A8A8A8",
64-
TextDisabled = "rgba(255, 255, 255, 0.3)",
65-
SecondaryContrastText = "#D5D5D5",
66-
ActionDefault = "#e8eaed",
67-
ActionDisabled = "rgba(255, 255, 255, 0.26)",
68-
ActionDisabledBackground = "rgba(255, 255, 255, 0.12)",
69-
Divider = "#3F4452",
70-
DividerLight = "rgba(255, 255, 255, 0.06)",
71-
TableLines = "rgba(63, 68, 82, 0.6)",
72-
LinesDefault = "#3F4452",
73-
LinesInputs = "rgba(255, 255, 255, 0.3)",
58+
Primary = "#fafafa", // shadcn/ui white primary
59+
PrimaryContrastText = "#020817",
60+
PrimaryDarken = "#e4e4e7",
61+
PrimaryLighten = "#ffffff",
62+
Secondary = "#78716c", // Neutral gray
63+
Success = "#22c55e", // Green for success
64+
Info = "#0ea5e9", // Sky blue for info (shadcn sky-500)
65+
InfoDarken = "#0284c7", // Darker sky blue (shadcn sky-600)
66+
InfoLighten = "#38bdf8", // Lighter sky blue (shadcn sky-400)
67+
68+
Tertiary = "#6366f1",
69+
TertiaryContrastText = "#fafafa",
70+
TertiaryDarken = "#4f46e5",
71+
TertiaryLighten = "#818cf8",
72+
73+
Warning = "#f59e0b", // Orange for warning
74+
WarningContrastText = "#fafafa",
75+
WarningDarken = "#d97706",
76+
WarningLighten = "#fbbf24",
77+
78+
Error = "#dc2626", // Red for error
79+
ErrorContrastText = "#fafafa",
80+
ErrorDarken = "#b91c1c",
81+
ErrorLighten = "#ef4444",
82+
83+
Black = "#020817",
84+
White = "#fafafa",
85+
Background = "#0c0a09", // shadcn/ui dark background
86+
Surface = "#171717", // Deeper surface color
87+
AppbarBackground = "#0c0a09",
88+
AppbarText = "#fafafa",
89+
DrawerText = "#fafafa",
90+
DrawerBackground = "#0c0a09",
91+
TextPrimary = "#fafafa", // shadcn/ui white text
92+
TextSecondary = "#a1a1aa", // Neutral gray secondary text
93+
TextDisabled = "rgba(161, 161, 170, 0.5)",
94+
ActionDefault = "#e5e5e5",
95+
ActionDisabled = "rgba(161, 161, 170, 0.3)",
96+
ActionDisabledBackground = "rgba(161, 161, 170, 0.1)",
97+
Divider = "rgba(255, 255, 255, 0.1)", // shadcn/ui divider color
98+
DividerLight = "rgba(161, 161, 170, 0.1)",
99+
TableLines = "rgba(255, 255, 255, 0.1)",
100+
LinesDefault = "rgba(255, 255, 255, 0.1)",
101+
LinesInputs = "rgba(161, 161, 170, 0.2)",
102+
DarkContrastText = "#020817",
103+
SecondaryContrastText = "#fafafa",
104+
SecondaryDarken = "#57534e",
105+
SecondaryLighten = "#a8a29e"
106+
74107
},
75108
LayoutProperties = new LayoutProperties
76109
{
77-
AppbarHeight = "80px",
78-
DefaultBorderRadius = "6px"
110+
AppbarHeight = "64px", // More modern height
111+
DefaultBorderRadius = "8px", // More modern border radius
112+
DrawerWidthLeft = "280px", // Wider sidebar
113+
DrawerMiniWidthRight = "260px"
79114
},
80115
Typography = new Typography
81116
{
82117
Default = new DefaultTypography
83118
{
84-
FontSize = ".8125rem",
119+
FontSize = ".875rem",
85120
FontWeight = "400",
86-
LineHeight = "1.4",
121+
LineHeight = "1.43",
87122
LetterSpacing = "normal",
88-
FontFamily = ["Public Sans", "Roboto", "Arial", "sans-serif"]
123+
FontFamily = ["Inter var", "Inter", "ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji"]
89124
},
90125
H1 = new H1Typography
91126
{
92-
FontSize = "2.2rem",
93-
FontWeight = "700",
94-
LineHeight = "2.8",
95-
LetterSpacing = "-.01562em"
127+
FontSize = "2.25rem",
128+
FontWeight = "800",
129+
LineHeight = "2.5rem",
130+
LetterSpacing = "-0.025em"
96131
},
97132
H2 = new H2Typography
98133
{
99-
FontSize = "2rem",
134+
FontSize = "1.875rem",
100135
FontWeight = "600",
101-
LineHeight = "2.5",
102-
LetterSpacing = "-.00833em"
136+
LineHeight = "2.25rem",
137+
LetterSpacing = "-0.025em"
103138
},
104139
H3 = new H3Typography
105140
{
106-
FontSize = "1.75rem",
141+
FontSize = "1.5rem",
107142
FontWeight = "600",
108-
LineHeight = "2.23",
109-
LetterSpacing = "0"
143+
LineHeight = "2rem",
144+
LetterSpacing = "-0.025em"
110145
},
111146
H4 = new H4Typography
112147
{
113-
FontSize = "1.5rem",
114-
FontWeight = "500",
115-
LineHeight = "2",
116-
LetterSpacing = ".00735em"
148+
FontSize = "1.25rem",
149+
FontWeight = "600",
150+
LineHeight = "1.75rem",
151+
LetterSpacing = "-0.025em"
117152
},
118153
H5 = new H5Typography
119154
{
120-
FontSize = "1.25rem",
121-
FontWeight = "500",
122-
LineHeight = "1.8",
123-
LetterSpacing = "0"
155+
FontSize = "1.125rem",
156+
FontWeight = "600",
157+
LineHeight = "1.75rem",
158+
LetterSpacing = "-0.025em"
124159
},
125160
H6 = new H6Typography
126161
{
127162
FontSize = "1rem",
128-
FontWeight = "400",
129-
LineHeight = "1.6",
130-
LetterSpacing = ".0075em"
163+
FontWeight = "600",
164+
LineHeight = "1.25rem",
165+
LetterSpacing = "-0.025em"
131166
},
132167
Button = new ButtonTypography
133168
{
134-
FontSize = ".8125rem",
169+
FontSize = ".875rem",
135170
FontWeight = "500",
136-
LineHeight = "1.75",
137-
LetterSpacing = ".02857em",
138-
TextTransform = "uppercase"
171+
LineHeight = "1.75rem",
172+
LetterSpacing = "normal",
173+
TextTransform = "none"
139174
},
140175
Subtitle1 = new Subtitle1Typography
141176
{
142177
FontSize = ".875rem",
143178
FontWeight = "400",
144-
LineHeight = "1.5",
145-
LetterSpacing = "normal",
146-
FontFamily = ["Public Sans", "Roboto", "Arial", "sans-serif"]
179+
LineHeight = "1.5rem",
180+
LetterSpacing = ".00938em",
147181
},
148182
Subtitle2 = new Subtitle2Typography
149183
{
150-
FontSize = ".8125rem",
184+
FontSize = "1rem",
151185
FontWeight = "500",
152-
LineHeight = "1.57",
186+
LineHeight = "1.75rem",
153187
LetterSpacing = ".00714em"
154188
},
155189
Body1 = new Body1Typography
156190
{
157-
FontSize = "0.8125rem",
191+
FontSize = ".875rem",
158192
FontWeight = "400",
159-
LineHeight = "1.5",
193+
LineHeight = "1.5rem",
160194
LetterSpacing = ".00938em"
161195
},
162196
Body2 = new Body2Typography
163197
{
164198
FontSize = ".75rem",
165-
FontWeight = "300",
166-
LineHeight = "1.43",
199+
FontWeight = "400",
200+
LineHeight = "1.25rem",
167201
LetterSpacing = ".01071em"
168202
},
169203
Caption = new CaptionTypography
170204
{
171-
FontSize = "0.625rem",
205+
FontSize = "0.75rem",
172206
FontWeight = "400",
173-
LineHeight = "1.5",
207+
LineHeight = "1.5rem",
174208
LetterSpacing = ".03333em"
175209
},
176210
Overline = new OverlineTypography
177211
{
178-
FontSize = "0.625rem",
179-
FontWeight = "300",
180-
LineHeight = "2",
181-
LetterSpacing = ".08333em"
182-
}
183-
},
184-
Shadows = new Shadow
185-
{
186-
Elevation = new[]
187-
{
188-
"none",
189-
"0 2px 4px -1px rgba(6, 24, 44, 0.2)",
190-
"0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
191-
"0 30px 60px rgba(0,0,0,0.12)",
192-
"0 6px 12px -2px rgba(50,50,93,0.25),0 3px 7px -3px rgba(0,0,0,0.3)",
193-
"0 50px 100px -20px rgba(50,50,93,0.25),0 30px 60px -30px rgba(0,0,0,0.3)",
194-
"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
195-
"0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
196-
"0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
197-
"0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
198-
"0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
199-
"0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
200-
"0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
201-
"0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
202-
"0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
203-
"0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
204-
"0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
205-
"0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
206-
"0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
207-
"0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
208-
"0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
209-
"0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
210-
"0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
211-
"0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.30)",
212-
"2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),12.5px 12.5px 10px rgba(0, 0, 0, 0.035),22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),100px 100px 80px rgba(0, 0, 0, 0.07)",
213-
"0px 0px 20px 0px rgba(0, 0, 0, 0.05)"
212+
FontSize = "0.75rem",
213+
FontWeight = "400",
214+
LineHeight = "1.75rem",
215+
LetterSpacing = ".03333em",
216+
TextTransform = "none"
214217
}
215218
}
216219
};

0 commit comments

Comments
 (0)