improvement(docs): align components with the platform design system by waleedlatif1 · Pull Request #5227 · simstudioai/sim

waleedlatif1 · 2026-06-27T00:02:34Z

Summary

Fix undefined CSS tokens in the docs app (--text-base x6, --text-link) that broke the Ask AI send-button fill and link/text colors
Replace hand-rolled brand/pill buttons with the canonical ChipLink/chip chrome (not-found page, search trigger)
Swap fumadocs fd-* tokens for platform tokens in what-you-will-learn and video-chapters
Tokenize workflow-preview chrome (new --wp-highlight; error dots → --text-error; toggle/slider → --brand-accent) and the video-placeholder status pill
Every change validated against the canonical emcn source in apps/sim; components already matching the platform (dropdown geometry, badge radius, 14px row icons) were intentionally left alone

Type of Change

Improvement

Testing

Tested manually. biome clean, all referenced tokens verified defined, no new warnings.

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Bring the docs app's chrome in line with the main Sim design system, validated against the canonical emcn source in apps/sim. - ask-ai: fix undefined tokens (--text-base x6, --text-link) that broke the send-button fill and link/text colors; send button now matches the canonical primary fill (text-primary/text-inverse, dark:bg-white); use --shadow-medium and chip gap rhythm - not-found: replace the hand-rolled brand pill with <ChipLink variant='brand'> and swap fumadocs tokens for platform tokens - search-trigger: compose the exported chip chrome constants instead of re-spelling them (single source of truth) - what-you-will-learn, video-chapters: fumadocs fd-* tokens -> platform tokens - workflow-preview: add --wp-highlight token; route the #33b4ff highlight, #ef4444 error dots, and toggle/slider green through tokens - video-placeholder: tokenize the status pill (bespoke illustration art intentionally left as-is) dropdown-menu, faq, theme-toggle, and page-type-badge were deliberately left at their canonical values (14px row icons, rounded-md badge) after validation showed those match the platform, not the chip-pill, standard.

vercel · 2026-06-27T00:02:42Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Jun 27, 2026 12:21am

cursor · 2026-06-27T00:02:44Z

PR Summary

Low Risk
Docs-only styling and token swaps with no API or auth changes; main behavioral note is CTA appearance shifting from green brand to inverse primary chips.

Overview
This PR aligns the docs app UI with the platform design tokens and chip chrome, replacing one-off colors and fumadocs classes with shared CSS variables and ChipLink / chip exports.

Chip CTAs rename variant='brand' to primary (inverse dark/white fill instead of green brand accent) on the navbar “Get started”, 404 “Go home”, and in chip.tsx. Search reuses shared chip geometry, filled surface, border, and 16px icon classes.

Ask AI swaps undefined --text-base / --text-link for --text-body, --brand-accent links, --shadow-medium, and the same inverse send button as primary chips.

Academy panels (what-you-will-learn, video-chapters, video placeholder status pill) move from fd-* / hex colors to --border-1, --surface-*, and text tokens.

Workflow previews add --wp-highlight in global.css and wire highlights, error handles, toggles/sliders, and edges to --wp-highlight, --text-error, and --brand-accent instead of hard-coded hex values.

^{Reviewed by Cursor Bugbot for commit 7624d63. Configure here.}

greptile-apps · 2026-06-27T00:04:52Z

Greptile Summary

This PR aligns the docs UI with the platform design system. The main changes are:

Replaced undefined docs CSS tokens with defined platform tokens.
Moved not-found and navbar CTAs onto the shared chip link styling.
Reused chip chrome constants for the search trigger.
Tokenized workflow-preview, video placeholder, video chapters, and learning-card colors.

Confidence Score: 5/5

This looks safe to merge.

No blocking issues found in the changed code.

Important Files Changed

Filename	Overview
apps/docs/components/ui/chip.tsx	Updates the docs chip CTA variant from brand styling to the platform primary styling.
apps/docs/app/[lang]/not-found.tsx	Replaces the hand-rolled home CTA with the shared chip link component.
apps/docs/components/ui/search-trigger.tsx	Builds the search trigger from shared chip geometry, fill, border, and icon classes.
apps/docs/components/ai/ask-ai.tsx	Moves Ask AI text, link, shadow, and send-button styling onto defined platform tokens.
apps/docs/app/global.css	Adds the workflow-preview highlight token used by highlighted edges, rings, and output labels.
apps/docs/components/workflow-preview/workflow-data.ts	Uses the workflow-preview highlight token for highlighted edge styling.
apps/docs/components/workflow-preview/preview-block-node.tsx	Moves preview node highlight and error colors onto shared CSS variables.
apps/docs/components/workflow-preview/block-preview.tsx	Uses the shared error text token for the workflow preview error dot.
apps/docs/components/workflow-preview/block-inspector.tsx	Uses the brand accent token for workflow inspector toggles and sliders.
apps/docs/components/workflow-preview/output-bundle.tsx	Uses the workflow-preview highlight token for highlighted output tree labels.
apps/docs/components/ui/video-chapters.tsx	Replaces fumadocs card and text colors with platform tokens.
apps/docs/components/ui/what-you-will-learn.tsx	Replaces fumadocs card and text colors with platform tokens.
apps/docs/components/ui/video-placeholder.tsx	Tokenizes the video placeholder status pill border, surface, text, and dot colors.
apps/docs/components/navbar/navbar.tsx	Updates the navbar CTA to the platform primary chip variant.

_{Reviews (5): Last reviewed commit: "improvement(docs): neutral primary chip ..." | Re-trigger Greptile}

…cing Align the docs navbar with the main app, which reserves green for accents/status and uses a neutral high-contrast CTA in nav. - add a canonical `primary` chip variant (inverse fill: dark in light mode, white in dark mode), mirroring the emcn chip's primary action - "Get started" and the 404 "Go home" now use variant='primary' instead of the green brand surface - retire the now-unused `brand` chip variant (no parallel path left behind) - fix navbar right-cluster spacing: gap-2 to match the landing navbar and drop the asymmetric ml-1 on the CTA

waleedlatif1 · 2026-06-27T00:17:42Z

@greptile

waleedlatif1 · 2026-06-27T00:17:43Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 7624d63. Configure here.}

waleedlatif1 · 2026-06-28T20:52:57Z

@greptile

waleedlatif1 · 2026-06-28T20:52:58Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 7624d63. Configure here.}

waleedlatif1 · 2026-06-28T20:58:26Z

@greptile

waleedlatif1 · 2026-06-28T20:58:27Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 7624d63. Configure here.}

waleedlatif1 · 2026-06-28T21:08:53Z

@greptile re-review the latest commit (229f01c) please

vercel Bot deployed to Preview June 27, 2026 00:07 View deployment

cursor Bot reviewed Jun 27, 2026

View reviewed changes

vercel Bot deployed to Preview June 27, 2026 00:21 View deployment

waleedlatif1 merged commit 954de05 into staging Jun 27, 2026
16 checks passed

waleedlatif1 deleted the docs-design-system-audit branch June 27, 2026 00:24

waleedlatif1 mentioned this pull request Jun 27, 2026

v0.7.15: academy, perf improvements, db attribution, kb tags filter fix, settings overhaul, thrive learning integration #5224

Merged

cursor Bot reviewed Jun 28, 2026

View reviewed changes

waleedlatif1 mentioned this pull request Jun 28, 2026

improvement(docs): flatten the academy learn/chapters panels #5253

Merged

6 tasks

Uh oh!

Conversation

waleedlatif1 commented Jun 27, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

greptile-apps Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Uh oh!

waleedlatif1 commented Jun 27, 2026

Uh oh!

waleedlatif1 commented Jun 27, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

waleedlatif1 commented Jun 28, 2026

Uh oh!

waleedlatif1 commented Jun 28, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

waleedlatif1 commented Jun 28, 2026

Uh oh!

waleedlatif1 commented Jun 28, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

waleedlatif1 commented Jun 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Jun 27, 2026 •

edited

Loading

cursor Bot commented Jun 27, 2026 •

edited

Loading

greptile-apps Bot commented Jun 27, 2026 •

edited

Loading