cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): establish semantic colors and focus foundation

Browse Source
This commit is contained in:
cesnimda
2026-09-11 09:04:55 +02:00
parent f696f23fc5
commit 115441a409
26 changed files with 1689 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/layout/AppShell.tsx
+10 -11
View File
@@ -66,15 +66,14 @@ export function activeNavTo(pathname: string, tos: string[]): string | null {
return best;
}
// The nav rail stays a fixed dark navy regardless of the app's light/dark theme toggle --
// a deliberate signature element, not derived from theme tokens.
const SIDEBAR_BG = "#0f172a";
const SIDEBAR_BORDER = "rgba(255,255,255,0.08)";
const SIDEBAR_TEXT_MUTED = "#94a3b8";
const SIDEBAR_TEXT = "#e2e8f0";
const SIDEBAR_SELECTED_BG = "rgba(99,102,241,0.18)";
const SIDEBAR_SELECTED_TEXT = "#ffffff";
const SIDEBAR_SELECTED_ICON = "#a5b4fc";
// Preserve the existing inverse navigation surface in both themes.
const SIDEBAR_BG = "var(--palette-navigation-background)";
const SIDEBAR_BORDER = "var(--palette-navigation-border)";
const SIDEBAR_TEXT_MUTED = "var(--palette-navigation-muted)";
const SIDEBAR_TEXT = "var(--palette-navigation-text)";
const SIDEBAR_SELECTED_BG = "var(--palette-navigation-selected)";
const SIDEBAR_SELECTED_TEXT = "var(--palette-navigation-selectedText)";
const SIDEBAR_SELECTED_ICON = "var(--palette-navigation-selectedIcon)";
export default function AppShell({
pageTitle,
@@ -181,7 +180,7 @@ export default function AppShell({
justifyContent: desktopNavCollapsed ? "center" : "flex-start",
border: "1px solid transparent",
color: SIDEBAR_TEXT_MUTED,
"&:hover": { backgroundColor: "rgba(255,255,255,0.06)", color: SIDEBAR_TEXT },
"&:hover": { backgroundColor: "var(--palette-navigation-hover)", color: SIDEBAR_TEXT },
"&.Mui-selected": {
backgroundColor: SIDEBAR_SELECTED_BG,
color: SIDEBAR_SELECTED_TEXT,
@@ -210,7 +209,7 @@ export default function AppShell({
);
const drawerContent = (
<Box sx={{ height: "100%", display: "flex", flexDirection: "column", backgroundColor: SIDEBAR_BG }}>
<Box sx={{ "--app-focus-color": "var(--palette-focus-inverse)", height: "100%", display: "flex", flexDirection: "column", backgroundColor: SIDEBAR_BG }}>
<Box sx={{ px: desktopNavCollapsed ? 1.5 : 2.25, py: desktopNavCollapsed ? 2 : 2.5, display: "flex", justifyContent: desktopNavCollapsed ? "center" : "flex-start" }}>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, justifyContent: desktopNavCollapsed ? "center" : "flex-start" }}>
<JobbjaktMark style={{ width: 30, height: 30, flexShrink: 0 }} />