improvement(docs): inherit the platform border and font-weight scales - #6252
Merged
Conversation
#6241 consolidated the app's neutral border tokens and flattened its font-weight scale. `apps/docs` was carrying an untouched copy of the pre-migration values, so the two have visibly drifted — the docs `@theme` block already declares it "mirrors apps/sim/tailwind.config.ts", so the drift is against stated intent rather than a deliberate divergence. Borders — same consolidation as the app: - `--border` #dedede -> #d8d8d8 (light), #333333 -> #444444 (dark) - `--border-1` and `--border-muted` become aliases of `--border`, so the 19 existing `var(--border-1)` consumers pick up the unified colour without being touched - `--divider` is retired; its single consumer moves to `--border` Font weights — the arbitrary values the app dropped: - `font-[480]`/`font-[470]`/`font-[500]` -> `font-medium`, `font-[430]` -> `font-normal`, `font-[600]` -> `font-semibold` The navbar's active tab and its invisible width-reserving ghost both used `font-[480]`; they move to `font-medium` together, so the anti-layout-shift trick still holds. Deliberately NOT ported: the app's `--border-width` hairline (0.5px on hi-dpi). The app wires it through `borderWidth.DEFAULT` in a Tailwind v3 JS config; docs is Tailwind v4 CSS-first, which hardcodes `border: 1px` in the utility with no theme key, so matching it means overriding a Tailwind utility. That is a site-wide visual change and wants its own PR with visual review. Also unchanged: the inline SVGs. `components/icons.tsx` (328) is the brand and integration set, `sim-logo` is a brand mark, and the handful of remaining shapes are bespoke and positioned by hand. Docs already consumes `@sim/emcn/icons` in the 15 places where a shared icon is the right call, and imports zero lucide.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview Borders in Font weights: arbitrary utilities ( Output tree in workflow preview uses Reviewed by Cursor Bugbot for commit 60a3115. Configure here. |
Contributor
Greptile SummaryThe PR synchronizes the docs site’s neutral border tokens and font-weight utilities with the main platform.
Confidence Score: 5/5The PR appears safe to merge with no actionable defects identified. The changed border values and aliases match the platform theme, the retired divider token has no remaining consumers, and the replacement font utilities are supported by the docs Tailwind configuration.
|
| Filename | Overview |
|---|---|
| apps/docs/app/global.css | Aligns light and dark neutral-border values and aliases with the platform theme. |
| apps/docs/components/ai/ask-ai-panel.tsx | Replaces 600-weight arbitrary descendant utilities with the equivalent font-semibold utility. |
| apps/docs/components/navbar/navbar.tsx | Maps active and inactive tab weights to standard utilities while preserving active-state width reservation. |
| apps/docs/components/ui/faq.tsx | Replaces arbitrary FAQ heading and row weights with the equivalent font-medium utility. |
| apps/docs/components/workflow-preview/output-bundle.tsx | Moves the tree guide border from the retired divider token to the consolidated border token. |
Reviews (1): Last reviewed commit: "improvement(docs): inherit the platform ..." | Re-trigger Greptile
Follow-on within the same PR. A full comparison of every custom token docs rolls against the platform found three more classes of drift. Text scale — #6241 retuned these and docs kept the old values: - `--text-body` #3b3b3b -> #434343 (light), #cdcdcd -> #c1c1c1 (dark) - `--text-muted` #707070 -> #7a7a7a (light), #787878 -> #6e6e6e (dark) - `--text-icon` #525252 -> #5a5a5a (light), #a0a0a0 -> #969696 (dark) Docs and the app now agree on all 62 shared token names, with zero divergent values. Missing shared-component tokens. Docs renders `@sim/emcn` (Badge, Chip, ChipLink) and `@sim/workflow-renderer` (block, subflow and note views), but never defined 14 of the tokens those components reference — an undefined `var()` silently falls back to `currentColor`, so the failure is invisible until the branch that uses it renders. Several are live: `--warning` on an edited subflow, `--caution` on inline code inside a note, `--text-placeholder` on an empty note, `--border-success` on a successful run edge. Added with the app's values, along with `--text-icon-muted` (new in #6241) and the four Badge palettes docs lacked (teal, cyan, pink, blue-secondary), so any variant renders correctly rather than being one prop away from black. Type scale — docs declares micro/xs/caption/small/base/md in `@theme` but 20 call sites bypassed it with identical raw values (`text-[13px]`, `text-[0.8125rem]`, `text-[12px]`, `text-[15px]`, `text-[10px]`). Each now uses the token; every value is byte-identical, so this is a rename, not a restyle. The class reordering in the same files is biome's `useSortedClasses` reacting to the rename — verified as a pure permutation, with the class multiset unchanged in every file. Deliberately left alone: - `#33C482` / `#2FB3FF` — brand-mark SVG fills and default props in demo data, not styling. - The Ask AI button's inverted `#383838`/`#575757`/`#e0e0e0`/`#cfcfcf`. The platform's `--surface-inverted`/`--surface-inverted-hover` hold *different* values, so adopting them would restyle the control rather than tokenize it. Worth doing, but as a visual change with review.
This was referenced Aug 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-on to #6241. That PR consolidated the app's neutral border tokens and flattened its font-weight scale;
apps/docswas carrying an untouched copy of the pre-migration values, so the two have visibly drifted.This is drift against stated intent rather than a deliberate divergence — the docs
@themeblock already says it "Mirrors apps/sim/tailwind.config.ts".Borders
apps/docs/app/global.cssheld exactly the values #6241 replaced (--border: #dedede/#333333,--border-1,--border-muted,--divider). Same consolidation applied:--border#dedede/#333333#d8d8d8/#444444--border-1#e0e0e0/#3d3d3dvar(--border)--border-muted#e4e4e4/#424242var(--border)--divider#ededed/#393939The 19 existing
var(--border-1)consumers pick up the unified colour without being touched.--dividerhad one consumer, moved to--border.Font weights
The arbitrary weights #6241 dropped:
font-[480]/font-[470]/font-[500]→font-medium,font-[430]→font-normal,font-[600]→font-semibold. Seven call sites; none remain.One to look at in review: the navbar's active tab and its invisible width-reserving ghost were both
font-[480]. They move tofont-mediumtogether, so the anti-layout-shift trick still holds — if you change one, change both.Deliberately not in this PR
The
--border-widthhairline (0.5px on hi-dpi). The app wires it viaborderWidth.DEFAULTin a Tailwind v3 JS config. Docs is Tailwind v4 CSS-first, which hardcodesborder: 1pxin the utility with no theme key — matching it means overriding a Tailwind utility. That is a site-wide visual change and deserves its own PR with visual review.The inline SVGs.
components/icons.tsx(328) is the brand/integration set,sim-logois a brand mark, and the few remaining shapes are bespoke and hand-positioned. Docs already consumes@sim/emcn/iconsin the 15 places where a shared icon is right, and imports zero lucide — so there was no icon migration left to do.Verification
biome,type-check --force(23/23), and a fullnext buildof the docs app all pass.Not visually verified — these are colour and weight changes to a public site. The border shift is subtle but real, and the navbar/FAQ/ask-AI weights are the places to eyeball.