diff --git a/ui/src/components/AboutMeDialog.module.css b/ui/src/components/AboutMeDialog.module.css index b46f5853..f9948d51 100644 --- a/ui/src/components/AboutMeDialog.module.css +++ b/ui/src/components/AboutMeDialog.module.css @@ -44,7 +44,7 @@ } .sourceNote { - font-size: 11px; + font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); } diff --git a/ui/src/components/DeploymentProgress.module.css b/ui/src/components/DeploymentProgress.module.css index 3e40b4f7..25dba66b 100644 --- a/ui/src/components/DeploymentProgress.module.css +++ b/ui/src/components/DeploymentProgress.module.css @@ -74,7 +74,7 @@ /* Labels */ .label { - font-size: 10px; + font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 6px; diff --git a/ui/src/index.css b/ui/src/index.css index 83ff9288..f55a911d 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -58,6 +58,19 @@ src: url('./fonts/jetbrains-mono-600.woff2') format('woff2'); } +/* WCAG AA contrast overrides — design system defaults fail 4.5:1 minimum */ +:root { + /* Light mode: #766A5E on #FFFFFF = 4.5:1 (was #9C9184 = 3.0:1) */ + --text-muted: #766A5E; +} + +[data-theme="dark"] { + /* Dark mode: #9A9088 on #242019 = 4.5:1 (was #7A7068 = 2.9:1) */ + --text-muted: #9A9088; + /* Dark mode: #6A6058 on #242019 = 3:1 (was #4A4238 = 1.4:1 — catastrophic) */ + --text-faint: #6A6058; +} + :root { font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; diff --git a/ui/src/pages/Admin/OidcConfigPage.module.css b/ui/src/pages/Admin/OidcConfigPage.module.css index 868433c5..21fb6ae9 100644 --- a/ui/src/pages/Admin/OidcConfigPage.module.css +++ b/ui/src/pages/Admin/OidcConfigPage.module.css @@ -30,7 +30,7 @@ .noRoles { font-size: 12px; - color: var(--text-faint); + color: var(--text-muted); font-style: italic; font-family: var(--font-body); } diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css index 470f32a4..32f7e695 100644 --- a/ui/src/pages/AgentHealth/AgentHealth.module.css +++ b/ui/src/pages/AgentHealth/AgentHealth.module.css @@ -31,17 +31,13 @@ .routesWarning { color: var(--warning); } .routesError { color: var(--error); } -/* Application config bar */ +/* Application config bar — card styling via sectionStyles.section */ .configBar { display: flex; align-items: flex-end; gap: 20px; padding: 12px 16px; margin-bottom: 16px; - background: var(--bg-surface); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-card); } .configField { @@ -133,7 +129,7 @@ .inspectLink { background: transparent; border: none; - color: var(--text-faint); + color: var(--text-muted); opacity: 0.75; cursor: pointer; font-size: 13px; @@ -233,12 +229,8 @@ margin-top: 20px; } -/* Event card (timeline panel) */ +/* Event card (timeline panel) — card styling via sectionStyles.section */ .eventCard { - background: var(--bg-surface); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; diff --git a/ui/src/pages/AppsTab/AppsTab.module.css b/ui/src/pages/AppsTab/AppsTab.module.css index 3f943187..a5bb5339 100644 --- a/ui/src/pages/AppsTab/AppsTab.module.css +++ b/ui/src/pages/AppsTab/AppsTab.module.css @@ -122,13 +122,13 @@ .mutedMono { font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; color: var(--text-muted); opacity: 0.5; } .envHint { - font-size: 11px; + font-size: 12px; color: var(--text-muted); font-style: italic; } @@ -210,7 +210,7 @@ } .configHint { - font-size: 11px; + font-size: 12px; color: var(--text-muted); font-style: italic; margin-top: 2px; diff --git a/ui/src/styles/log-panel.module.css b/ui/src/styles/log-panel.module.css index 143d84da..4bc2b69f 100644 --- a/ui/src/styles/log-panel.module.css +++ b/ui/src/styles/log-panel.module.css @@ -83,7 +83,7 @@ .logEmpty { padding: 24px; text-align: center; - color: var(--text-faint); + color: var(--text-muted); font-size: 12px; }