Skip to content

improvement(docs): align components with the platform design system#5227

Merged
waleedlatif1 merged 2 commits into
stagingfrom
docs-design-system-audit
Jun 27, 2026
Merged

improvement(docs): align components with the platform design system#5227
waleedlatif1 merged 2 commits into
stagingfrom
docs-design-system-audit

Conversation

@waleedlatif1

Copy link
Copy Markdown
Collaborator

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

vercel Bot commented Jun 27, 2026

Copy link
Copy Markdown

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

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

Request Review

@cursor

cursor Bot commented Jun 27, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Visual and token-only changes in the docs app; no API, auth, or data-path changes. Main risk is inconsistent appearance if a token is missing, which the PR addresses by using defined variables.

Overview
This PR replaces ad-hoc colors and fumadocs tokens across the docs app with the mirrored platform CSS variables from global.css, so chrome matches apps/sim.

Chip CTAs: ChipLink drops the green brand variant in favor of primary (inverse surface: dark pill in light mode, white in dark). Navbar “Get started” and the 404 “Go home” link use ChipLink variant='primary' instead of custom green buttons or raw Link styles.

Shared chip chrome: SearchTrigger now composes exported chip geometry, filled surface, and border classes from chip.tsx instead of duplicating pill styles.

Ask AI: Text and controls switch from undefined --text-base / --text-link to --text-body, --text-primary, --text-inverse, --brand-accent for links, --shadow-medium for elevation, and the send button uses the same inverse fill as primary chips.

Academy panels: WhatYouWillLearn and VideoChapters swap fd-* borders/backgrounds for --border-1, --surface-3, and platform text tokens. VideoPlaceholder’s “Coming soon” pill uses surface/border/brand tokens instead of hard-coded hex.

Workflow previews: Adds --wp-highlight in global.css and routes trace/highlight styling (edges, rings, output tree keys) through it; error handles/dots use --text-error; inspector toggles/sliders use --brand-accent instead of inline greens.

Reviewed by Cursor Bugbot for commit 7624d63. Configure here.

@greptile-apps

greptile-apps Bot commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

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

  • Replaced hand-rolled pill links with shared chip components.
  • Updated docs colors from undefined or fumadocs tokens to platform tokens.
  • Added a workflow-preview highlight token and reused it across preview chrome.
  • Tokenized Ask AI, video, learning-card, and workflow-preview styling.

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 chip styling.
apps/docs/app/[lang]/not-found.tsx Uses ChipLink and platform text tokens for the not-found page.
apps/docs/components/navbar/navbar.tsx Updates navbar chip spacing and the Get started link variant.
apps/docs/components/ai/ask-ai.tsx Replaces undefined text and link tokens with platform tokens in the Ask AI UI.
apps/docs/components/ui/search-trigger.tsx Reuses shared chip geometry, fill, border, and icon classes for the search trigger.
apps/docs/app/global.css Adds the workflow-preview highlight token used by preview components.
apps/docs/components/workflow-preview/workflow-data.ts Uses the new workflow highlight token for highlighted edges.
apps/docs/components/workflow-preview/preview-block-node.tsx Uses platform tokens for preview node error and highlight styling.
apps/docs/components/workflow-preview/block-inspector.tsx Uses platform accent tokens for toggle and slider controls.
apps/docs/components/workflow-preview/block-preview.tsx Uses the platform error token for the block preview error dot.
apps/docs/components/workflow-preview/output-bundle.tsx Uses the workflow highlight token for highlighted output nodes.
apps/docs/components/ui/video-chapters.tsx Replaces fumadocs styling tokens with platform tokens.
apps/docs/components/ui/video-placeholder.tsx Uses platform tokens for the video placeholder status pill.
apps/docs/components/ui/what-you-will-learn.tsx Replaces fumadocs styling tokens with platform tokens.

Reviews (2): 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

Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ 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 waleedlatif1 merged commit 954de05 into staging Jun 27, 2026
16 checks passed
@waleedlatif1 waleedlatif1 deleted the docs-design-system-audit branch June 27, 2026 00:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant