From 60a3115094248db7a18a40f883337d5090fb2e71 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Tue, 4 Aug 2026 10:38:55 -0700 Subject: [PATCH 1/2] improvement(docs): inherit the platform border and font-weight scales MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #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. --- apps/docs/app/global.css | 16 ++++++++-------- apps/docs/components/ai/ask-ai-panel.tsx | 4 ++-- apps/docs/components/navbar/navbar.tsx | 6 +++--- apps/docs/components/ui/faq.tsx | 4 ++-- .../workflow-preview/output-bundle.tsx | 2 +- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css index 09ffa108b86..48c8defedee 100644 --- a/apps/docs/app/global.css +++ b/apps/docs/app/global.css @@ -65,9 +65,9 @@ body.wp-lightbox-open [aria-label="Ask Sim"] { --surface-5: #f3f3f3; --surface-6: #e5e5e5; --surface-active: #ececec; - --border: #dedede; - --border-1: #e0e0e0; - --divider: #ededed; + --border: #d8d8d8; + /** Legacy neutral-border aliases. New work should use --border. */ + --border-1: var(--border); --text-primary: #1a1a1a; --text-secondary: #525252; --text-tertiary: #5c5c5c; @@ -84,7 +84,7 @@ body.wp-lightbox-open [aria-label="Ask Sim"] { --surface-inverted: #1b1b1b; --surface-inverted-hover: #363636; --border-inverted: #363636; - --border-muted: #e4e4e4; + --border-muted: var(--border); --badge-success-bg: #bbf7d0; --badge-success-text: #15803d; --badge-blue-bg: #bfdbfe; @@ -116,9 +116,9 @@ body.wp-lightbox-open [aria-label="Ask Sim"] { --surface-5: #363636; --surface-6: #454545; --surface-active: #2c2c2c; - --border: #333333; - --border-1: #3d3d3d; - --divider: #393939; + --border: #444444; + /** Legacy neutral-border aliases. New work should use --border. */ + --border-1: var(--border); --text-primary: #e6e6e6; --text-secondary: #cccccc; --text-tertiary: #b3b3b3; @@ -135,7 +135,7 @@ body.wp-lightbox-open [aria-label="Ask Sim"] { --surface-inverted: #242424; --surface-inverted-hover: #363636; --border-inverted: #3d3d3d; - --border-muted: #424242; + --border-muted: var(--border); --badge-success-bg: rgba(34, 197, 94, 0.2); --badge-success-text: #86efac; --badge-blue-bg: rgba(59, 130, 246, 0.2); diff --git a/apps/docs/components/ai/ask-ai-panel.tsx b/apps/docs/components/ai/ask-ai-panel.tsx index e6af234ebb6..c55b05dca0c 100644 --- a/apps/docs/components/ai/ask-ai-panel.tsx +++ b/apps/docs/components/ai/ask-ai-panel.tsx @@ -145,8 +145,8 @@ export function AskAIPanel({ locale, open, onClose }: AskAIPanelProps) { className={cn( 'space-y-3 text-[var(--text-primary)] text-base leading-relaxed', '[&_a]:text-[var(--text-primary)] [&_a]:underline [&_a]:decoration-dashed [&_a]:underline-offset-4', - '[&_strong]:font-[600]', - '[&_h1]:font-[600] [&_h2]:font-[600] [&_h3]:font-[600] [&_h4]:font-[600]', + '[&_strong]:font-semibold', + '[&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold', '[&_li]:my-1 [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5', '[&_code]:font-mono [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-[var(--surface-5)] [&_pre]:p-3 [&_pre]:text-small' )} diff --git a/apps/docs/components/navbar/navbar.tsx b/apps/docs/components/navbar/navbar.tsx index 20d8020c0bf..8b2ee8fcc2a 100644 --- a/apps/docs/components/navbar/navbar.tsx +++ b/apps/docs/components/navbar/navbar.tsx @@ -77,12 +77,12 @@ export function Navbar() { className={cn( '-mb-px relative flex items-center border-b text-[14px] tracking-[-0.01em] transition-colors', isActive - ? 'border-[var(--text-muted)] font-[480] text-[var(--text-primary)]' - : 'border-transparent font-[430] text-[var(--text-muted)] hover:border-[var(--border-1)] hover:text-[var(--text-secondary)]' + ? 'border-[var(--text-muted)] font-medium text-[var(--text-primary)]' + : 'border-transparent font-normal text-[var(--text-muted)] hover:border-[var(--border-1)] hover:text-[var(--text-secondary)]' )} > {/* Invisible bold text reserves width to prevent layout shift */} - {tab.label} + {tab.label} {tab.label} ) diff --git a/apps/docs/components/ui/faq.tsx b/apps/docs/components/ui/faq.tsx index 6b2d241b59b..7a7c0eec62f 100644 --- a/apps/docs/components/ui/faq.tsx +++ b/apps/docs/components/ui/faq.tsx @@ -30,7 +30,7 @@ function FAQItemRow({ type='button' onClick={onToggle} aria-expanded={isOpen} - className='flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left font-[470] text-[0.875rem] text-[var(--text-body)] transition-colors hover:bg-[var(--surface-3)]' + className='flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left font-medium text-[0.875rem] text-[var(--text-body)] transition-colors hover:bg-[var(--surface-3)]' > -

{title}

+

{title}

{items.map((item, index) => (
{expanded && (node.children || node.value !== undefined) && ( -
+
{node.children ? node.children.map((child) => ( From 65ebe6a5cee2d5c8a8454bc71d960cb9a12217fe Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Tue, 4 Aug 2026 10:49:06 -0700 Subject: [PATCH 2/2] improvement(docs): finish the platform token sweep MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- apps/docs/app/global.css | 48 ++++++++++++++++--- .../docs-layout/sidebar-components.tsx | 8 ++-- apps/docs/components/page-type-badge.tsx | 2 +- apps/docs/components/ui/search-trigger.tsx | 4 +- apps/docs/components/ui/video-chapters.tsx | 2 +- apps/docs/components/ui/video-placeholder.tsx | 2 +- .../components/ui/what-you-will-learn.tsx | 4 +- .../workflow-preview/block-inspector.tsx | 2 +- .../workflow-preview/output-bundle.tsx | 14 +++--- .../workflow-preview/workflow-preview.tsx | 4 +- 10 files changed, 62 insertions(+), 28 deletions(-) diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css index 48c8defedee..d7709776139 100644 --- a/apps/docs/app/global.css +++ b/apps/docs/app/global.css @@ -71,10 +71,11 @@ body.wp-lightbox-open [aria-label="Ask Sim"] { --text-primary: #1a1a1a; --text-secondary: #525252; --text-tertiary: #5c5c5c; - --text-body: #3b3b3b; - --text-muted: #707070; + --text-body: #434343; + --text-muted: #7a7a7a; --text-subtle: #8c8c8c; - --text-icon: #525252; + --text-icon: #5a5a5a; + --text-icon-muted: #5c5c5c; --text-inverse: #ffffff; --text-error: #ef4444; --text-muted-inverse: #a0a0a0; @@ -87,6 +88,23 @@ body.wp-lightbox-open [aria-label="Ask Sim"] { --border-muted: var(--border); --badge-success-bg: #bbf7d0; --badge-success-text: #15803d; + /* Shared-component tokens: referenced by @sim/emcn and @sim/workflow-renderer. + Undefined here, a var() silently falls back to currentColor. Values mirror + apps/sim/app/_styles/globals.css. */ + --border-success: #e0e0e0; + --success: #22c55e; + --error: #dc2626; + --warning: #ea580c; + --caution: #f59e0b; + --text-placeholder: #8d8d8d; + --badge-teal-bg: #99f6e4; + --badge-teal-text: #0f766e; + --badge-cyan-bg: #cffafe; + --badge-cyan-text: #0891b2; + --badge-pink-bg: #fbcfe8; + --badge-pink-text: #be185d; + --badge-blue-secondary-bg: #bae6fd; + --badge-blue-secondary-text: #0369a1; --badge-blue-bg: #bfdbfe; --badge-blue-text: #1d4ed8; --badge-purple-bg: #e9d5ff; @@ -122,10 +140,11 @@ body.wp-lightbox-open [aria-label="Ask Sim"] { --text-primary: #e6e6e6; --text-secondary: #cccccc; --text-tertiary: #b3b3b3; - --text-body: #cdcdcd; - --text-muted: #787878; + --text-body: #c1c1c1; + --text-muted: #6e6e6e; --text-subtle: #7d7d7d; - --text-icon: #a0a0a0; + --text-icon: #969696; + --text-icon-muted: #949494; --text-inverse: #1b1b1b; --text-error: #ef4444; --text-muted-inverse: #b3b3b3; @@ -138,6 +157,23 @@ body.wp-lightbox-open [aria-label="Ask Sim"] { --border-muted: var(--border); --badge-success-bg: rgba(34, 197, 94, 0.2); --badge-success-text: #86efac; + /* Shared-component tokens: referenced by @sim/emcn and @sim/workflow-renderer. + Undefined here, a var() silently falls back to currentColor. Values mirror + apps/sim/app/_styles/globals.css. */ + --border-success: #575757; + --success: #22c55e; + --error: #f87171; + --warning: #ff6600; + --caution: #f59e0b; + --text-placeholder: #8d8d8d; + --badge-teal-bg: rgba(20, 184, 166, 0.2); + --badge-teal-text: #5eead4; + --badge-cyan-bg: rgba(14, 165, 233, 0.2); + --badge-cyan-text: #7dd3fc; + --badge-pink-bg: rgba(236, 72, 153, 0.2); + --badge-pink-text: #f9a8d4; + --badge-blue-secondary-bg: rgba(51, 180, 255, 0.2); + --badge-blue-secondary-text: #7dd3fc; --badge-blue-bg: rgba(59, 130, 246, 0.2); --badge-blue-text: #93c5fd; --badge-purple-bg: rgba(168, 85, 247, 0.2); diff --git a/apps/docs/components/docs-layout/sidebar-components.tsx b/apps/docs/components/docs-layout/sidebar-components.tsx index d4c279e255b..cb7cb3e8dda 100644 --- a/apps/docs/components/docs-layout/sidebar-components.tsx +++ b/apps/docs/components/docs-layout/sidebar-components.tsx @@ -56,7 +56,7 @@ const ITEM_BASE = const ITEM_ACTIVE_MOBILE = 'bg-[var(--surface-active)] font-medium text-[var(--text-primary)]' const ITEM_DESKTOP = - 'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight' + 'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-small lg:leading-tight' const ITEM_TEXT = 'lg:text-[var(--text-body)]' const ITEM_HOVER = 'lg:hover:bg-[var(--surface-3)]' const ITEM_ACTIVE = 'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)]' @@ -144,7 +144,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac 'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', 'text-[var(--text-muted)] hover:bg-[var(--surface-active)] hover:text-[var(--text-body)]', active && ITEM_ACTIVE_MOBILE, - 'lg:block lg:flex-1 lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-[13px] lg:leading-tight', + 'lg:block lg:flex-1 lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-small lg:leading-tight', FOLDER_TEXT, !active && FOLDER_HOVER, active && FOLDER_ACTIVE @@ -171,7 +171,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac className={cn( 'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', 'text-[var(--text-muted)] hover:bg-[var(--surface-active)]', - 'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-left lg:text-[13px] lg:leading-tight', + 'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-left lg:text-small lg:leading-tight', FOLDER_TEXT, FOLDER_HOVER )} @@ -214,7 +214,7 @@ export function SidebarSeparator({ item }: { item: Separator }) {

{item.name} diff --git a/apps/docs/components/page-type-badge.tsx b/apps/docs/components/page-type-badge.tsx index e1f7eb30db5..df46fd1d962 100644 --- a/apps/docs/components/page-type-badge.tsx +++ b/apps/docs/components/page-type-badge.tsx @@ -42,7 +42,7 @@ export function PageTypeBadge({ type, className }: PageTypeBadgeProps) { return ( Search… - ⌘ - K + ⌘ + K ) diff --git a/apps/docs/components/ui/video-chapters.tsx b/apps/docs/components/ui/video-chapters.tsx index 3010195bcb8..4d8850dd50d 100644 --- a/apps/docs/components/ui/video-chapters.tsx +++ b/apps/docs/components/ui/video-chapters.tsx @@ -43,7 +43,7 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video return (