refactor: normalize FlowPilot/Assistant/ScriptBuilder to design system tokens #126

2026-04-07T00:22:13Z

chihlasm commented

2026-04-07 00:22:13 +00:00

(Migrated from github.com)

Summary

Replace ~110 hardcoded Tailwind color utilities (text-blue-400, text-amber-400, text-rose-400, text-emerald-400) with semantic design system tokens (text-accent, text-warning, text-danger, text-success) across 31 files in the FlowPilot, Assistant Chat, and Script Builder communities
Replace opacity hacks (bg-white/[0.08]) with semantic surface tokens (bg-elevated)
Remove gradient surface on primary button (bg-gradient-to-r from-blue-500 to-blue-400 → bg-accent)
Remove hard-coded hex color (bg-[#60a5fa] → bg-accent)
Add graphify-out/ to .gitignore

Why

The accent color has changed twice in 5 weeks (orange → blue). Every hardcoded Tailwind color utility survives theme changes silently — wrong color, no error. With semantic tokens, the next theme change is a 1-line edit in index.css.

Identified via knowledge graph analysis (/graphify frontend/src) which surfaced that FlowPilot, Assistant Chat, Script Builder, and Procedural Step Execution were the only feature communities not using design system primitives.

Test plan

npm run build passes with zero TypeScript errors
Visual check: FlowPilot session, Escalate modal, Assistant Chat, Script Builder — colors should look identical (tokens resolve to same hex values)
Confirm accent, warning, danger, success colors render correctly in each affected component

🤖 Generated with Claude Code

## Summary - Replace ~110 hardcoded Tailwind color utilities (`text-blue-400`, `text-amber-400`, `text-rose-400`, `text-emerald-400`) with semantic design system tokens (`text-accent`, `text-warning`, `text-danger`, `text-success`) across 31 files in the FlowPilot, Assistant Chat, and Script Builder communities - Replace opacity hacks (`bg-white/[0.08]`) with semantic surface tokens (`bg-elevated`) - Remove gradient surface on primary button (`bg-gradient-to-r from-blue-500 to-blue-400` → `bg-accent`) - Remove hard-coded hex color (`bg-[#60a5fa]` → `bg-accent`) - Add `graphify-out/` to `.gitignore` ## Why The accent color has changed twice in 5 weeks (orange → blue). Every hardcoded Tailwind color utility survives theme changes silently — wrong color, no error. With semantic tokens, the next theme change is a 1-line edit in `index.css`. Identified via knowledge graph analysis (`/graphify frontend/src`) which surfaced that FlowPilot, Assistant Chat, Script Builder, and Procedural Step Execution were the only feature communities not using design system primitives. ## Test plan - [x] `npm run build` passes with zero TypeScript errors - [ ] Visual check: FlowPilot session, Escalate modal, Assistant Chat, Script Builder — colors should look identical (tokens resolve to same hex values) - [ ] Confirm accent, warning, danger, success colors render correctly in each affected component 🤖 Generated with [Claude Code](https://claude.com/claude-code)

railway-app[bot] commented

2026-04-07 00:22:38 +00:00

(Migrated from github.com)

🚅 Deployed to the resolutionflow-pr-126 environment in selfless-grace

Service	Status	Web	Updated (UTC)
patherly	🕐 Queued (View Logs)		Apr 7, 2026 at 12:22 am
hopeful-liberation	🕒 Building (View Logs)		Apr 7, 2026 at 12:22 am

🚅 Deployed to the [resolutionflow-pr-126](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134?environmentId=5ffebc26-a605-488f-96d1-9561b580839a) environment in **[selfless-grace](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134)** | **Service** | **Status** | **Web** | **Updated** (UTC) | | :--- | :--- | :--- | :--- | | patherly | 🕐 Queued ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/95f556ff-5264-4116-a0c2-618a2fc53ba4?id=327d37f1-30cf-4917-90ee-441d35b7f050&environmentId=5ffebc26-a605-488f-96d1-9561b580839a)) | | Apr 7, 2026 at 12:22 am | | hopeful-liberation | 🕒 Building ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/e1db2ee3-d241-4f45-abe4-c9c5fdf483d5?id=4c133fa4-6758-4b11-8e5f-044526c30e92&environmentId=5ffebc26-a605-488f-96d1-9561b580839a)) | | Apr 7, 2026 at 12:22 am |

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#126