Skip to content

fix(dashboard): complete CSS variable migration — remaining color families #4077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aegis-gh-agent merged 1 commit into from
May 23, 2026
Merged

fix(dashboard): complete CSS variable migration — remaining color families #4077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dashboard/src/components/ConfirmDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ interface ConfirmDialogProps {
const VARIANT_STYLES = {
danger: {
confirm:
'bg-[var(--color-danger)]/10 hover:bg-[var(--color-danger)]/20 text-red-300 border border-[var(--color-danger)]/30',
'bg-[var(--color-danger)]/10 hover:bg-[var(--color-danger)]/20 text-[var(--color-danger-glow)] border border-[var(--color-danger)]/30',
},
warning: {
confirm:
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/CreateSessionModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -629,7 +629,7 @@ export default function CreateSessionModal({ open, onClose }: CreateSessionModal
<div className="p-4 sm:p-5 space-y-4">
<div className="flex items-center gap-3">
{batchResult.created > 0 && (
<span className="text-xs font-medium text-emerald-400 bg-emerald-400/10 border border-emerald-400/20 rounded px-3 py-1.5">
<span className="text-xs font-medium text-[var(--color-success-glow)] bg-[var(--color-success)]/10 border border-[var(--color-success)]/20 rounded px-3 py-1.5">
{batchResult.created} created
</span>
)}
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,7 +559,7 @@ export default function Layout() {

<div className={`flex items-center justify-end gap-1.5 sm:gap-3 transition-opacity ${isMobileDrawerOpen ? "pointer-events-none opacity-30" : ""}`}>
{/* PREVIEW badge — hidden on very small screens */}
<span className="hidden sm:inline-flex rounded-md border border-transparent bg-blue-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-blue-800 ring-1 ring-blue-200 dark:border-[var(--color-cta-bg)]/50 dark:bg-[var(--color-cta-bg)]/10 dark:text-[var(--color-cta-bg)] dark:ring-0">
<span className="hidden sm:inline-flex rounded-md border border-transparent bg-[var(--color-info)]/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--color-info)] ring-1 ring-[var(--color-info)]/30 dark:border-[var(--color-cta-bg)]/50 dark:bg-[var(--color-cta-bg)]/10 dark:text-[var(--color-cta-bg)] dark:ring-0">
PREVIEW
</span>

Expand Down Expand Up @@ -632,7 +632,7 @@ export default function Layout() {
)}

{updateCheckError && (
<div className="hidden sm:block text-xs text-amber-500" title={updateCheckError}>
<div className="hidden sm:block text-xs text-[var(--color-warning)]" title={updateCheckError}>
Update check failed
</div>
)}
Expand Down
10 changes: 5 additions & 5 deletions dashboard/src/components/agents/AgentBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import { getAgentMeta } from "./agent-registry";

/** Tailwind color → dark-theme badge classes. */
const COLOR_CLASSES: Record<string, string> = {
purple: "bg-purple-500/15 text-purple-400 border-purple-500/25",
green: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25",
blue: "bg-blue-500/15 text-blue-400 border-blue-500/25",
amber: "bg-[var(--color-warning)]/15 text-amber-400 border-[var(--color-warning)]/25",
purple: "bg-[var(--color-accent-purple)]/15 text-[var(--color-accent-purple-glow)] border-[var(--color-accent-purple)]/25",
green: "bg-[var(--color-success)]/15 text-[var(--color-success-glow)] border-[var(--color-success)]/25",
blue: "bg-[var(--color-info)]/15 text-[var(--color-info-glow)] border-[var(--color-info)]/25",
amber: "bg-[var(--color-warning)]/15 text-[var(--color-warning-glow)] border-[var(--color-warning)]/25",
cyan: "bg-[var(--color-accent-cyan)]/15 text-[var(--color-accent-cyan-glow)] border-[var(--color-accent-cyan)]/25",
rose: "bg-rose-500/15 text-rose-400 border-rose-500/25",
rose: "bg-[var(--color-danger)]/15 text-[var(--color-danger-glow)] border-[var(--color-danger)]/25",
gray: "bg-gray-500/15 text-gray-400 border-gray-500/25",
};

Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/approvals/ApprovalNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export function ApprovalBadge() {

return (
<span
className="inline-flex items-center gap-1 rounded-full bg-[var(--color-warning)]/20 border border-[var(--color-warning)]/30 px-2 py-0.5 text-xs font-bold text-amber-400 cursor-pointer"
className="inline-flex items-center gap-1 rounded-full bg-[var(--color-warning)]/20 border border-[var(--color-warning)]/30 px-2 py-0.5 text-xs font-bold text-[var(--color-warning-glow)] cursor-pointer"
aria-label={`${count} pending approval${count > 1 ? "s" : ""}`}
title={`${count} session${count > 1 ? "s" : ""} awaiting approval`}
>
Expand Down
12 changes: 6 additions & 6 deletions dashboard/src/components/overview/HomeStatusPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,19 @@ function StatusCard({ label, value, detail, tone, icon, actionButton }: StatusCa
value: 'text-[var(--color-accent-cyan-glow)]',
},
green: {
border: 'border-emerald-500/20',
icon: 'text-emerald-400',
value: 'text-emerald-300',
border: 'border-[var(--color-success)]/20',
icon: 'text-[var(--color-success-glow)]',
value: 'text-[var(--color-success-glow)]',
},
amber: {
border: 'border-[var(--color-warning)]/20',
icon: 'text-[var(--color-warning)]',
value: 'text-amber-300',
value: 'text-[var(--color-warning-glow)]',
},
red: {
border: 'border-[var(--color-danger)]/40 bg-[var(--color-danger)]/10 shadow-[0_0_20px_rgba(239,68,68,0.15),0_20px_40px_-15px_rgba(0,0,0,0.8)] ring-1 ring-inset ring-[var(--color-danger)]/20',
icon: 'text-[var(--color-danger)]',
value: 'text-red-300',
value: 'text-[var(--color-danger-glow)]',
},
};

Expand Down Expand Up @@ -89,7 +89,7 @@ function StatusCard({ label, value, detail, tone, icon, actionButton }: StatusCa
type="button"
onClick={actionButton.onClick}
className={`ml-11 sm:ml-14 inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest transition-colors ${
tone === 'red' ? 'text-[var(--color-danger)] hover:text-red-300' : 'text-[var(--color-warning)] hover:text-amber-300'
tone === 'red' ? 'text-[var(--color-danger)] hover:text-[var(--color-danger-glow)]' : 'text-[var(--color-warning)] hover:text-[var(--color-warning-glow)]'
}`}
>
<ExternalLink className="h-3 w-3" />
Expand Down
6 changes: 3 additions & 3 deletions dashboard/src/components/overview/MetricCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function MetricCards() {

if (loadError && !metrics && !health) {
return (
<div className="rounded-lg border border-[var(--color-warning)]/30 bg-[var(--color-warning)]/10 p-6 text-sm text-amber-200">
<div className="rounded-lg border border-[var(--color-warning)]/30 bg-[var(--color-warning)]/10 p-6 text-sm text-[var(--color-warning-glow)]">
{loadError}
</div>
);
Expand Down Expand Up @@ -157,7 +157,7 @@ export default function MetricCards() {
<p className="font-mono text-2xl text-[var(--color-danger)] font-bold">{failedSessions}</p>
<NavLink
to="/audit"
className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-[var(--color-danger)] hover:text-red-300 transition-colors"
className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-[var(--color-danger)] hover:text-[var(--color-danger-glow)] transition-colors"
>
<ExternalLink className="h-3 w-3" />
View Error Logs
Expand Down Expand Up @@ -190,7 +190,7 @@ export default function MetricCards() {
<div className="flex gap-4">
{promptsDelivered > 0 && (
<div>
<p className="text-sm font-semibold text-emerald-400">{promptsDelivered}</p>
<p className="text-sm font-semibold text-[var(--color-success-glow)]">{promptsDelivered}</p>
<p className="text-[10px] text-[var(--color-text-muted)] uppercase tracking-wider">Delivered</p>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/overview/RealtimeBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const LABELS: Record<RealtimeBadgeProps['mode'], string> = {
export default function RealtimeBadge({ mode, message }: RealtimeBadgeProps) {
return (
<span
className="inline-flex items-center rounded-full border border-[var(--color-warning)]/30 bg-[var(--color-warning)]/10 px-2.5 py-1 text-[11px] font-medium text-amber-300"
className="inline-flex items-center rounded-full border border-[var(--color-warning)]/30 bg-[var(--color-warning)]/10 px-2.5 py-1 text-[11px] font-medium text-[var(--color-warning-glow)]"
title={message}
>
{LABELS[mode]}
Expand Down
6 changes: 3 additions & 3 deletions dashboard/src/components/overview/SessionMobileCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const SessionMobileCard = memo(function SessionMobileCard({
onClick={(e) => onApprove(e, session.id)}
disabled={currentAction === 'approve'}
aria-label={`Approve session ${formatSessionName(session.displayName, session.id.slice(0, 8))}`}
className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-green-900/30 p-2 text-[var(--color-success)] transition-colors hover:bg-green-900/50 disabled:pointer-events-none disabled:opacity-40"
className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-[var(--color-success)]/15 p-2 text-[var(--color-success)] transition-colors hover:bg-[var(--color-success)]/25 disabled:pointer-events-none disabled:opacity-40"
title="Approve"
>
<Play className="h-4 w-4" />
Expand All @@ -84,7 +84,7 @@ export const SessionMobileCard = memo(function SessionMobileCard({
onClick={(e) => onKill(e, session.id)}
disabled={currentAction === 'kill'}
aria-label={`Kill session ${formatSessionName(session.displayName, session.id.slice(0, 8))}`}
className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-red-900/30 p-2 text-[var(--color-danger)] transition-colors hover:bg-red-900/50 disabled:pointer-events-none disabled:opacity-40"
className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-[var(--color-danger)]/15 p-2 text-[var(--color-danger)] transition-colors hover:bg-[var(--color-danger)]/25 disabled:pointer-events-none disabled:opacity-40"
title="Kill"
>
<XCircle className="h-4 w-4" />
Expand All @@ -101,7 +101,7 @@ export const SessionMobileCard = memo(function SessionMobileCard({
</span>
)}
{session.permissionMode && session.permissionMode !== 'default' ? (
<span className="inline-flex items-center gap-1 rounded-full bg-green-900/30 px-2 py-0.5 text-[var(--color-success)]">
<span className="inline-flex items-center gap-1 rounded-full bg-[var(--color-success)]/15 px-2 py-0.5 text-[var(--color-success)]">
<CheckCircle2 className="h-3 w-3" /> {session.permissionMode}
</span>
) : (
Expand Down
6 changes: 3 additions & 3 deletions dashboard/src/components/overview/SessionTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,7 @@ export default function SessionTable({ maxRows }: SessionTableProps = {}) {
return (
<div className="rounded-lg border border-[var(--color-warning)]/30 bg-[var(--color-warning)]/10 p-6">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<p className="text-sm text-amber-200">{loadError}</p>
<p className="text-sm text-[var(--color-warning-glow)]">{loadError}</p>
<button
type="button"
onClick={() => {
Expand All @@ -487,7 +487,7 @@ export default function SessionTable({ maxRows }: SessionTableProps = {}) {
void fetchSessions();
}}
aria-label={t("aria.retryLoading")}
className="rounded-md border border-[var(--color-warning)]/40 px-3 py-2 text-sm text-amber-700 dark:text-amber-100 transition-colors hover:border-amber-300 hover:text-amber-900 dark:hover:text-white"
className="rounded-md border border-[var(--color-warning)]/40 px-3 py-2 text-sm text-[var(--color-warning)] dark:text-[var(--color-warning-glow)] transition-colors hover:border-[var(--color-warning)] hover:text-[var(--color-warning)] dark:hover:text-white"
>
Retry
</button>
Expand Down Expand Up @@ -652,7 +652,7 @@ export default function SessionTable({ maxRows }: SessionTableProps = {}) {
onClick={() => runBulkAction('kill')}
disabled={bulkAction !== null}
aria-label={`Kill ${selectedIds.length} selected session${selectedIds.length === 1 ? '' : 's'}`}
className="min-h-[44px] rounded-md bg-red-900/30 px-3 py-2 text-sm font-medium text-red-300 transition-colors hover:bg-red-900/50 disabled:pointer-events-none disabled:opacity-40"
className="min-h-[44px] rounded-md bg-[var(--color-danger)]/15 px-3 py-2 text-sm font-medium text-[var(--color-danger-glow)] transition-colors hover:bg-[var(--color-danger)]/25 disabled:pointer-events-none disabled:opacity-40"
>
Kill Selected
</button>
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/overview/VirtualizedSessionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ function ApproveButton({
onClick={(e) => onApprove(e, session.id)}
disabled={currentAction === 'approve'}
aria-label={`Approve session ${formatSessionName(session.displayName, session.id.slice(0, 8))}`}
className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-green-900/30 text-xs font-medium text-[var(--color-success)] transition-colors hover:bg-green-900/50 disabled:pointer-events-none disabled:opacity-40"
className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md bg-[var(--color-success)]/15 text-xs font-medium text-[var(--color-success)] transition-colors hover:bg-[var(--color-success)]/25 disabled:pointer-events-none disabled:opacity-40"
title="Approve"
>
<Play className="h-3 w-3" />
Expand Down Expand Up @@ -219,7 +219,7 @@ function VirtualizedRow(props: {
</div>
<div className="flex items-center px-3">
{session.permissionMode && session.permissionMode !== 'default' ? (
<span className="inline-flex items-center gap-1 rounded-full bg-green-900/30 px-2 py-0.5 text-xs text-[var(--color-success)]">
<span className="inline-flex items-center gap-1 rounded-full bg-[var(--color-success)]/15 px-2 py-0.5 text-xs text-[var(--color-success)]">
<CheckCircle2 className="h-3 w-3" />
{session.permissionMode}
</span>
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/pipeline/PipelineStatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface PipelineStatusBadgeProps {

const STATUS_STYLES: Record<string, string> = {
running: 'bg-[var(--color-cta-bg)]/10 text-[var(--color-accent-cyan)] border-[var(--color-accent-cyan)]/30',
completed: 'bg-emerald-400/10 text-emerald-400 border-emerald-400/30',
completed: 'bg-[var(--color-success)]/10 text-[var(--color-success-glow)] border-[var(--color-success)]/30',
failed: 'bg-[var(--color-danger)]/10 text-[var(--color-danger)] border-[var(--color-danger)]/30',
pending: 'bg-[var(--color-void-lighter)] text-[var(--color-text-muted)] border-[var(--color-void-lighter)]',
};
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/session/AcpApprovalModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export function AcpApprovalModal({
<div className="flex items-center gap-2 rounded-lg bg-[var(--color-danger)]/10 px-3 py-2 text-sm text-[var(--color-danger)]" role="alert">
<span className="flex-1">{error}</span>
{onClearError && (
<button type="button" onClick={onClearError} className="text-[var(--color-danger)] hover:text-red-300" aria-label={t("aria.dismissError")}>
<button type="button" onClick={onClearError} className="text-[var(--color-danger)] hover:text-[var(--color-danger-glow)]" aria-label={t("aria.dismissError")}>
✕
</button>
)}
Expand Down
6 changes: 3 additions & 3 deletions dashboard/src/components/session/AuditTrailPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ function actionColor(action: string): string {
function actionBg(action: string): string {
const a = action.toLowerCase();
if (a.includes('approve') || a.includes('permission_granted'))
return 'bg-green-950/30 border-green-900/30';
return 'bg-[var(--color-success)]/10 border-[var(--color-success)]/20';
if (a.includes('reject') || a.includes('deny') || a.includes('permission_denied'))
return 'bg-red-950/30 border-red-900/30';
return 'bg-[var(--color-danger)]/10 border-[var(--color-danger)]/20';
if (a.includes('prompt') || a.includes('request'))
return 'bg-[var(--color-warning)]/30 border-[var(--color-warning)]/30';
return 'bg-[var(--color-surface-strong)] border-[var(--color-border)]';
Expand All @@ -83,7 +83,7 @@ export function AuditTrailPanel({ records, loading, error }: AuditTrailPanelProp

if (error) {
return (
<div className="rounded-lg border border-red-900/30 bg-[var(--color-danger)]/10 p-4 text-[var(--color-danger)] text-sm">
<div className="rounded-lg border border-[var(--color-danger)]/20 bg-[var(--color-danger)]/10 p-4 text-[var(--color-danger)] text-sm">
Failed to load audit trail: {error}
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/session/ContextWindowMeter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ function formatTokens(n: number): string {
}

function getUsageColor(percentage: number): string {
if (percentage < 0.5) return 'bg-emerald-500';
if (percentage < 0.5) return 'bg-[var(--color-success)]';
if (percentage < 0.75) return 'bg-[var(--color-warning)]';
if (percentage < 0.9) return 'bg-[var(--color-warning)]';
return 'bg-[var(--color-danger)]';
}

function getUsageTextColor(percentage: number): string {
if (percentage < 0.5) return 'text-emerald-400';
if (percentage < 0.5) return 'text-[var(--color-success-glow)]';
if (percentage < 0.75) return 'text-[var(--color-warning)]';
if (percentage < 0.9) return 'text-[var(--color-warning)]';
return 'text-[var(--color-danger)]';
Expand Down
6 changes: 3 additions & 3 deletions dashboard/src/components/session/DiffViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export function DiffViewer({ entries, isLoading }: DiffViewerProps) {
<span className={`ml-2 rounded px-1.5 py-0.5 text-[10px] font-medium ${
selectedChange.type === 'edit'
? 'bg-[var(--color-warning)]/10 text-[var(--color-warning)]'
: 'bg-emerald-500/10 text-emerald-400'
: 'bg-[var(--color-success)]/10 text-[var(--color-success-glow)]'
}`}>
{selectedChange.type === 'edit' ? 'modified' : 'created'}
</span>
Expand All @@ -223,7 +223,7 @@ function DiffContent({ change }: { change: FileChange }) {
key={i}
className={`flex ${
line.type === 'add'
? 'bg-emerald-500/10'
? 'bg-[var(--color-success)]/10'
: line.type === 'remove'
? 'bg-[var(--color-danger)]/10'
: ''
Expand All @@ -234,7 +234,7 @@ function DiffContent({ change }: { change: FileChange }) {
</span>
<span className={
line.type === 'add'
? 'text-emerald-400'
? 'text-[var(--color-success-glow)]'
: line.type === 'remove'
? 'text-[var(--color-danger)]'
: 'text-[var(--color-text-muted)]'
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/session/DriverControlBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function DriverControlBar({
{onClearError && (
<button type="button"
onClick={onClearError}
className="text-[var(--color-danger)] hover:text-red-300"
className="text-[var(--color-danger)] hover:text-[var(--color-danger-glow)]"
aria-label={t("aria.dismissError")}
>
✕
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/session/PauseControlBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export function PauseControlBar({
{onClearError && (
<button type="button"
onClick={onClearError}
className="text-[var(--color-danger)] hover:text-red-300"
className="text-[var(--color-danger)] hover:text-[var(--color-danger-glow)]"
aria-label={t("aria.dismissError")}
>
✕
Expand Down
Loading
Loading