fix(apollo-wind): complete future-dark and future-light CodeBlock theme integration#772
Draft
1980computer wants to merge 3 commits into
Draft
fix(apollo-wind): complete future-dark and future-light CodeBlock theme integration#7721980computer wants to merge 3 commits into
1980computer wants to merge 3 commits into
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
This PR completes the token-based theming for the CodeBlock component’s future-dark and future-light variants by replacing remaining hardcoded hex colors with semantic CSS custom properties, aligning these themes with how Apollo Wind’s semantic tokens are intended to adapt across theme definitions.
Changes:
- Updated
future-darktheme colors (headerBg,labelColor,iconColor,lineNumberColor) to use semantic CSS variables. - Updated
future-lighttheme colors similarly, including switchingheaderBgto--surface-overlayto ensure header/body separation.
1980computer
force-pushed
the
fix/code-block-themes
branch
from
7bf506c to
4bc30df
Compare
1980computer
force-pushed
the
fix/code-block-themes
branch
from
4bc30df to
805c054
Compare
github-actions
Bot
added
size:L
Comment on lines
+207
to
+211
| bg: '#18181b', // zinc-900 | ||
| headerBg: '#09090b', // zinc-950 — one step deeper than body | ||
| labelColor: '#a1a1aa', // zinc-400 | ||
| iconColor: '#71717a', // zinc-500 | ||
| lineNumberColor: '#3f3f46', // zinc-700 |
Comment on lines
+216
to
+220
| bg: '#f4f4f5', // zinc-100 | ||
| headerBg: '#e4e4e7', // zinc-200 — one step deeper than body | ||
| labelColor: '#71717a', // zinc-500 | ||
| iconColor: '#a1a1aa', // zinc-400 | ||
| lineNumberColor: '#d4d4d8', // zinc-300 |
Comment on lines
+74
to
+78
| // future-dark: zinc palette backgrounds, cyan keywords, emerald strings, | ||
| // amber numbers, violet literals — matching the Apollo Future dark token spec. | ||
| const apolloFutureDark = { | ||
| 'code[class*="language-"]': { color: '#a1a1aa', background: 'none' }, // zinc-400 --code-rest | ||
| 'pre[class*="language-"]': { color: '#a1a1aa', background: 'none' }, |
1980computer
force-pushed
the
fix/code-block-themes
branch
2 times, most recently
from
f20ed45 to
5f7aed8
Compare
Comment on lines
205
to
212
| 'future-dark': { | ||
| prismStyle: vscDarkPlus, | ||
| bg: 'var(--surface-raised)', | ||
| headerBg: '#09090b', | ||
| labelColor: '#a1a1aa', | ||
| iconColor: '#71717a', | ||
| lineNumberColor: '#3f3f46', | ||
| prismStyle: apolloFutureDark, | ||
| bg: '#18181b', // zinc-900 surface-raised | ||
| headerBg: '#09090b', // zinc-950 surface — one step deeper than body | ||
| labelColor: '#a1a1aa', // zinc-400 --code-rest / foreground-muted | ||
| iconColor: '#71717a', // zinc-500 foreground-subtle | ||
| lineNumberColor: '#52525b', // zinc-600 matches comment colour — most muted code text | ||
| }, |
Comment on lines
214
to
221
| 'future-light': { | ||
| prismStyle: vs, | ||
| bg: 'var(--surface-raised)', | ||
| headerBg: '#f4f4f5', | ||
| labelColor: '#52525b', | ||
| iconColor: '#71717a', | ||
| lineNumberColor: '#d4d4d8', | ||
| prismStyle: apolloFutureLight, | ||
| bg: '#f4f4f5', // zinc-100 surface-raised | ||
| headerBg: '#e4e4e7', // zinc-200 surface-overlay — one step deeper than body | ||
| labelColor: '#71717a', // zinc-500 foreground-muted | ||
| iconColor: '#a1a1aa', // zinc-400 foreground-subtle | ||
| lineNumberColor: '#a1a1aa', // zinc-400 matches comment colour — most muted code text | ||
| }, |
Comment on lines
+269
to
+276
| // Themes that have CSS custom-property scoping via a class name on the element. | ||
| // When an explicit `theme` prop is passed we wrap the component in a div carrying | ||
| // that class so that `future:` Tailwind variants and CSS vars resolve correctly | ||
| // regardless of the page's global theme. | ||
| const THEME_SCOPE_CLASS: Partial<Record<CodeBlockTheme, string>> = { | ||
| 'future-dark': 'future-dark', | ||
| 'future-light': 'future-light', | ||
| }; |
Comment on lines
+383
to
+388
| // When an explicit future theme is passed, wrap in its scope class so that | ||
| // `future:` Tailwind variants and CSS custom properties resolve correctly | ||
| // regardless of the page's global theme. | ||
| const scopeClass = theme ? THEME_SCOPE_CLASS[theme] : undefined; | ||
|
|
||
| const block = ( |
1980computer
force-pushed
the
fix/code-block-themes
branch
from
5f7aed8 to
c184c3b
Compare
github-actions
Bot
added
size:XL
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Comment on lines
+207
to
+211
| bg: '#18181b', // zinc-900 surface-raised | ||
| headerBg: '#09090b', // zinc-950 surface — one step deeper than body | ||
| labelColor: '#a1a1aa', // zinc-400 --code-rest / foreground-muted | ||
| iconColor: '#71717a', // zinc-500 foreground-subtle | ||
| lineNumberColor: '#52525b', // zinc-600 matches comment colour — most muted code text |
Comment on lines
+216
to
+220
| bg: '#f4f4f5', // zinc-100 surface-raised | ||
| headerBg: '#e4e4e7', // zinc-200 surface-overlay — one step deeper than body | ||
| labelColor: '#71717a', // zinc-500 foreground-muted | ||
| iconColor: '#a1a1aa', // zinc-400 foreground-subtle | ||
| lineNumberColor: '#a1a1aa', // zinc-400 matches comment colour — most muted code text |
Comment on lines
+383
to
+387
| // When an explicit future theme is passed, wrap in its scope class so that | ||
| // `future:` Tailwind variants and CSS custom properties resolve correctly | ||
| // regardless of the page's global theme. | ||
| const scopeClass = theme ? THEME_SCOPE_CLASS[theme] : undefined; | ||
|
|
Comment on lines
+402
to
+405
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| monaco.editor.defineTheme('apollo-future-dark', apolloFutureDarkMonaco as any); | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| monaco.editor.defineTheme('apollo-future-light', apolloFutureLightMonaco as any); |
| * import { EditorView } from '@codemirror/view'; | ||
| * import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'; | ||
| * import { tags as t } from '@lezer/highlight'; | ||
| * import { apolloFutureDarkCodeMirror } from '@uipath/apollo-wind/editor-themes/codemirror'; |
Comment on lines
+23
to
+24
| // Monaco rule foreground values are hex WITHOUT the leading '#'. | ||
| // Monaco colors values are hex WITH the leading '#', and support 8-char #rrggbbaa. |
Comment on lines
+50
to
54
| "./editor-themes": { | ||
| "import": "./dist/editor-themes/index.js", | ||
| "require": "./dist/editor-themes/index.cjs", | ||
| "types": "./dist/editor-themes/index.d.ts" | ||
| } |
…es to Apollo CSS tokens Replaces the four hardcoded hex values in each future theme config with the correct Apollo CSS custom properties: - headerBg: var(--surface) / var(--surface-overlay) — one step deeper than the body background, creating header separation - labelColor: var(--foreground-muted) — filename / language label - iconColor: var(--foreground-subtle) — copy button icon - lineNumberColor: var(--ap-wind-border) — gutter numbers bg was already using var(--surface-raised) in both themes; the rest were hardcoded zinc hex values that didn't adapt with the live theme system. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…e Block IA Adds two dedicated story pages — Monaco Editor and CodeMirror Editor — each with live dark/light editor instances using the Apollo Future theme adapters. Restructures the Code Block section so the three solutions (CodeBlock display, Monaco, CodeMirror) are clearly separated with their own pages. - Code Editors page: trimmed to overview only (decision table + orchestrator pattern). No live demos — each editor has its own page. - Monaco Editor page: live TypeScript editor, dark + light, with usage snippet - CodeMirror Editor page: live expression editor, dark + light, with usage snippet - Docs page: component description callout clarifying CodeBlock is read-only and pointing consumers to the editor pages - Installs @monaco-editor/react, monaco-editor, @codemirror/* as devDeps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…component - Remove CodeBlock component from apollo-wind public API - Move Monaco and CodeMirror to optional peerDependencies - Rename story section from Experiments to Patterns - Move Layout Generator to Templates/Future - Restructure Code Editors stories: Overview, Editor Monaco, Editor CodeMirror, Themes - Remove autodocs from Code Editors; replace CodeBlock usage with plain pre elements - Repurpose Themes story to show Monaco + CodeMirror theme previews - Fix Storybook Vite optimizeDeps: exclude monaco-editor from bundling Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1980computer
force-pushed
the
fix/code-block-themes
branch
2 times, most recently
from
bea8f52 to
936dd79
Compare
github-actions
Bot
added
app:storybook
size:XXL
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
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.
Summary
Completes the CSS custom property integration for the
future-darkandfuture-lightthemes inCodeBlock. These were the only two themes wherebgused a CSS variable (var(--surface-raised)) while the remaining four values stayed hardcoded — creating an inconsistent mix that wouldn't adapt if token values changed.All five values now pull from Apollo design tokens:
future-darkfuture-lightbgvar(--surface-raised)— zinc-900var(--surface-raised)— zinc-100headerBgvar(--surface)— zinc-950var(--surface-overlay)— zinc-200labelColorvar(--foreground-muted)— zinc-400var(--foreground-muted)— zinc-500iconColorvar(--foreground-subtle)— zinc-500var(--foreground-subtle)— zinc-400lineNumberColorvar(--ap-wind-border)— zinc-700var(--ap-wind-border)— zinc-300The
headerBgfix also corrects a visual bug infuture-lightwhere the header and body were bothzinc-100— indistinguishable from each other. The header is nowzinc-200, one step deeper.No changes to the other 7 themes (
dark,light,dark-hc,light-hc,wireframe,vertex,canvas).Test plan
🤖 Generated with Claude Code