root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-1033): replace hardcoded colors with CSS custom properties in mission UI

Browse Source 
- Add CSS custom properties for mission, slice, feature, and autopilot color tokens in styles.css
- Replace inline icon colors with CSS variables in MissionInterviewModal
- Replace hardcoded colors with CSS variables in MissionManager
- Add changeset for theme color tokens patch
This commit is contained in:
gsxdsm
2026-04-06 15:50:44 -07:00
parent 91672f3004
commit d490ea7038
4 changed files with 73 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dashboard/app/components/MissionInterviewModal.tsx
View File

@@ -854,7 +854,7 @@ function MissionPlanReview({
) : (
<ChevronRight size={16} style={{ color: "var(--text-secondary)", flexShrink: 0 }} />
)}
<Layers size={16} style={{ color: "#eab308", flexShrink: 0 }} />
<Layers size={16} style={{ color: "var(--icon-milestone)", flexShrink: 0 }} />
<input
type="text"
className="form-input"
@@ -931,7 +931,7 @@ function MissionPlanReview({
) : (
<ChevronRight size={14} style={{ color: "var(--text-secondary)", flexShrink: 0 }} />
)}
<Package size={14} style={{ color: "#22c55e", flexShrink: 0 }} />
<Package size={14} style={{ color: "var(--icon-slice)", flexShrink: 0 }} />
<input
type="text"
className="form-input"
@@ -986,7 +986,7 @@ function MissionPlanReview({
: "none",
}}
>
<Box size={12} style={{ color: "#3b82f6", marginTop: "4px", flexShrink: 0 }} />
<Box size={12} style={{ color: "var(--icon-feature)", marginTop: "4px", flexShrink: 0 }} />
<div style={{ flex: 1, minWidth: 0 }}>
<input
type="text"

40
packages/dashboard/app/components/MissionManager.tsx
View File

@@ -83,38 +83,38 @@ interface MissionManagerProps {
// Status badge colors — use CSS custom-property-compatible tokens
const missionStatusColors: Record<MissionStatus, { bg: string; text: string }> = {
planning: { bg: "rgba(234, 179, 8, 0.15)", text: "#eab308" },
active: { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
blocked: { bg: "rgba(239, 68, 68, 0.15)", text: "#ef4444" },
complete: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
archived: { bg: "var(--bg-tertiary)", text: "var(--text-secondary)" },
planning: { bg: "var(--mission-planning-bg)", text: "var(--mission-planning-text)" },
active: { bg: "var(--mission-active-bg)", text: "var(--mission-active-text)" },
blocked: { bg: "var(--mission-blocked-bg)", text: "var(--mission-blocked-text)" },
complete: { bg: "var(--mission-complete-bg)", text: "var(--mission-complete-text)" },
archived: { bg: "var(--mission-archived-bg)", text: "var(--mission-archived-text)" },
};
const milestoneStatusColors: Record<MilestoneStatus, { bg: string; text: string }> = {
planning: { bg: "rgba(234, 179, 8, 0.15)", text: "#eab308" },
active: { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
blocked: { bg: "rgba(239, 68, 68, 0.15)", text: "#ef4444" },
complete: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
planning: { bg: "var(--mission-planning-bg)", text: "var(--mission-planning-text)" },
active: { bg: "var(--mission-active-bg)", text: "var(--mission-active-text)" },
blocked: { bg: "var(--mission-blocked-bg)", text: "var(--mission-blocked-text)" },
complete: { bg: "var(--mission-complete-bg)", text: "var(--mission-complete-text)" },
};
const sliceStatusColors: Record<SliceStatus, { bg: string; text: string }> = {
pending: { bg: "rgba(234, 179, 8, 0.15)", text: "#eab308" },
active: { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
complete: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
pending: { bg: "var(--slice-pending-bg)", text: "var(--slice-pending-text)" },
active: { bg: "var(--slice-active-bg)", text: "var(--slice-active-text)" },
complete: { bg: "var(--slice-complete-bg)", text: "var(--slice-complete-text)" },
};
const featureStatusColors: Record<FeatureStatus, { bg: string; text: string }> = {
defined: { bg: "rgba(234, 179, 8, 0.15)", text: "#eab308" },
triaged: { bg: "rgba(168, 85, 247, 0.15)", text: "#a855f7" },
"in-progress": { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
done: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
defined: { bg: "var(--feature-defined-bg)", text: "var(--feature-defined-text)" },
triaged: { bg: "var(--feature-triaged-bg)", text: "var(--feature-triaged-text)" },
"in-progress": { bg: "var(--feature-in-progress-bg)", text: "var(--feature-in-progress-text)" },
done: { bg: "var(--feature-done-bg)", text: "var(--feature-done-text)" },
};
const autopilotStateColors: Record<AutopilotState, { bg: string; text: string }> = {
inactive: { bg: "rgba(148, 163, 184, 0.15)", text: "#94a3b8" },
watching: { bg: "rgba(34, 197, 94, 0.15)", text: "#22c55e" },
activating: { bg: "rgba(59, 130, 246, 0.15)", text: "#3b82f6" },
completing: { bg: "rgba(168, 85, 247, 0.15)", text: "#a855f7" },
inactive: { bg: "var(--autopilot-inactive-bg)", text: "var(--autopilot-inactive-text)" },
watching: { bg: "var(--autopilot-watching-bg)", text: "var(--autopilot-watching-text)" },
activating: { bg: "var(--autopilot-activating-bg)", text: "var(--autopilot-activating-text)" },
completing: { bg: "var(--autopilot-completing-bg)", text: "var(--autopilot-completing-text)" },
};
// Form types

45
packages/dashboard/app/styles.css
View File

@@ -153,6 +153,51 @@
--state-error-bg: rgba(248, 81, 73, 0.15);
--state-error-text: #f85149;
--state-error-border: #f85149;
/* === Mission & Milestone Status Colors === */
--mission-planning-bg: color-mix(in srgb, var(--triage) 15%, transparent);
--mission-planning-text: var(--triage);
--mission-active-bg: color-mix(in srgb, var(--in-review) 15%, transparent);
--mission-active-text: var(--in-review);
--mission-blocked-bg: color-mix(in srgb, var(--color-error) 15%, transparent);
--mission-blocked-text: var(--color-error);
--mission-complete-bg: color-mix(in srgb, #3b82f6 15%, transparent);
--mission-complete-text: #3b82f6;
--mission-archived-bg: var(--bg-tertiary);
--mission-archived-text: var(--text-secondary);
/* === Slice Status Colors === */
--slice-pending-bg: color-mix(in srgb, var(--triage) 15%, transparent);
--slice-pending-text: var(--triage);
--slice-active-bg: color-mix(in srgb, var(--in-review) 15%, transparent);
--slice-active-text: var(--in-review);
--slice-complete-bg: color-mix(in srgb, #3b82f6 15%, transparent);
--slice-complete-text: #3b82f6;
/* === Feature (Task) Status Colors === */
--feature-defined-bg: color-mix(in srgb, var(--triage) 15%, transparent);
--feature-defined-text: var(--triage);
--feature-triaged-bg: color-mix(in srgb, #a855f7 15%, transparent);
--feature-triaged-text: #a855f7;
--feature-in-progress-bg: color-mix(in srgb, var(--in-review) 15%, transparent);
--feature-in-progress-text: var(--in-review);
--feature-done-bg: color-mix(in srgb, #3b82f6 15%, transparent);
--feature-done-text: #3b82f6;
/* === Autopilot State Colors === */
--autopilot-inactive-bg: color-mix(in srgb, #94a3b8 15%, transparent);
--autopilot-inactive-text: #94a3b8;
--autopilot-watching-bg: color-mix(in srgb, var(--in-review) 15%, transparent);
--autopilot-watching-text: var(--in-review);
--autopilot-activating-bg: color-mix(in srgb, #3b82f6 15%, transparent);
--autopilot-activating-text: #3b82f6;
--autopilot-completing-bg: color-mix(in srgb, #a855f7 15%, transparent);
--autopilot-completing-text: #a855f7;
/* === Interview Modal Icon Colors === */
--icon-milestone: var(--triage);
--icon-slice: var(--in-review);
--icon-feature: #3b82f6;
}
html,