Redesign language chooser and add light/dark code theme#19940
Redesign language chooser and add light/dark code theme#19940jeffmerrick wants to merge 8 commits into
Conversation
Convert the type="language" pulumi-chooser into a bordered card: a gray top toolbar showing the active language's colored logo + full name on the left and full-height underline-style abbreviation tabs (TS, PY, GO, …) on the right, with the slotted code/prose below. Scoped to non-headless language choosers; other chooser types and inline/headless choosers are unchanged. - chooser.tsx: add per-language `logo`, render the toolbar + abbreviation tabs for language, helper for tab labels; extend e2e coverage. - _chooser.scss: card + toolbar styling via semantic --docs-* tokens (dark mode for free); collapse code-unit margins at choosable edges (.highlight / .example-program) and drop top margin after a p/ul/ol; flush example-program panels. - _docs-theme.scss: dark overrides for the new toolbar tabs (the unlayered `*` border reset would otherwise win) and scope note status-icon color to .icon-and-line so copy buttons aren't tinted. - _copy-button.scss: match the code block background with a gray outline. - _notes.scss: scope note icon color/size to .icon-and-line; scope the last-child padding reset to content blocks so copy buttons aren't hit. - _code.scss: example-program footer uses the code background, fix the GitHub tooltip positioning and shrink its icon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add Min Light code theme for /docs light mode (theme/src/scss/docs/_code-light.scss), scoped to html:not([data-theme="dark"]) body.section-docs; Min Dark stays the default everywhere else and in docs dark mode. Per the Pulumi brand "Code highlighting" guideline (Min Theme on Violet 50 / Violet 950). - Consolidate the code copy button into one predictable ghost-chip style and drop the obsolete dark-mode violet-950 override. - Position the copy-button and example-program "View full example" tooltips to the left of their trigger instead of above. - Replace the C# language logo with the canonical purple hex mark. - Make the chooser language logos dark-mode aware (optional logoOnDark + .docs-logo-light/.docs-logo-dark swap); use the existing matched dark YAML asset and the mark-only Java cup logo. - Add an optional Preview badge next to the active label in the chooser toolbar. - Chooser plain tabs: use --docs-surface (inactive) / --docs-border (hover) borders and service-black active label text. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The chooser renders options in the declaration order of the supported* arrays (mapOptions filters them, preserving source order), not the order passed in the options attribute. Correct both new assertions to expect the actual render order. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Your site preview for commit 4ff5aab is ready! 🎉 http://www-testing-pulumi-docs-origin-pr-19940-4ff5aab1.s3-website.us-west-2.amazonaws.com |
Pre-merge Review — Last updated 2026-06-29T19:48:31ZTip Summary: This PR redesigns the docs language chooser and adds a light/dark code-highlighting theme. It restyles the chooser into a bordered card with a logo-labeled toolbar and abbreviated language tabs (a Stencil component change plus accompanying SCSS), adds a Min Light Chroma palette gated to Review confidence:
Investigation log
🔍 Verification trail20 claims extracted · 0 verified · 0 unverifiable · 0 contradicted
🚨 Outstanding in this PRNo outstanding findings in this PR.
|
Lighthouse Performance ReportCommit: 4ff5aab | Metric definitions
|
- Add a `position="left"` prop to pulumi-tooltip (placement lives in the component + _tooltip.scss); opt in from the copy button and example-program footer, removing the per-consumer positioning overrides. - Source all chooser language logos from /images/docs/icons/languages for consistency (copy in typescript/javascript/csharp/fsharp/visualbasic/opa; switch python/go); keep the C# hex distinct from the .NET mark. - Trim overly verbose comments across the branch. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
CamSoper
left a comment
There was a problem hiding this comment.
I love it! You're a rockstar, Jeff.
- Add "hcl" to the chooser's LanguageKey and supportedLanguages (marked preview: true), with a compact braces icon (hcl-color-32-32.svg); keep the full "HCL" wordmark as hcl-wordmark-color-32-32.svg. - Show the Preview badge only on the toolbar label for language choosers, not on the tabs (other chooser types keep the tab badge). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
cnunciato
left a comment
There was a problem hiding this comment.
Ok so first off, this looks fantastic. I love it. ✨
Still poking, but wanted to get you a first pass to work with some of the more noticeable things I've seen so far.
-
We use choosers to toggle blocks of content on the page, which currently produces what looks like an empty container (new vs. current):
-
Variations on the chooser look different. Should we change these too, or leave them the same?
-
Many have extra padding — might be a quirk of Hugo rendering?
-
I assume we're pulling this from the extension, but it'd be great to have the label here be
C#rather thanCS:
-
The wrapping is a bit awkward on mobile. Should we maybe hide the full name and the icon below a certain width? 🤔
…g fix - Standalone (self-closing) language choosers render as a toolbar strip instead of an empty card; generic (os/persona/etc.) choosers restyled to match (surface bg, small tabs, violet active underline) - Code-only choosers run their single code block flush to the card edges - C# and F# tabs use their proper names via a tabLabel override - Mobile: toolbar label hidden, tab row scrolls horizontally - Fix the chooser global-reset bug: a chooser missing the preferred option no longer dispatches a page-wide language reset (which made YAML unselectable on pages like /docs/iac/concepts/stacks/). It now shows a display-only fallback, keeps following the store, and adopts the sibling choosables it controls so their content stays visible - Wrap the Stack README chooser in stacks.md so it renders as a card Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…9928-update-language-chooser
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@cnunciato Good catches and feedback, thank you!
Unrelated update: I changed the info notes back to blue instead of violet - since the code background is violet in light mode now they were really blending in with eachother too much. Also bonus: ran across and fixed a bug where tabs weren't working when there were mixed chooser options (clicking YAML here https://www.pulumi.com/docs/iac/concepts/stacks/#outputs doesn't work.) |
cnunciato
left a comment
There was a problem hiding this comment.
Looks great! Will keep an eye out for any additional issues, but so far, everything looks solid. Well done!




In addition to updates to the language chooser to make it fit more languages more easily, this updates all code blocks in /docs to be theme-aware instead of always dark mode.
TBD: what icon to use for HCL when it's added, or consider if we want language icons at all.Follow up work: replicate these changes in the registry.
Resolves #19928.
Redesigns the language chooser into a bordered card with a left-label toolbar, and makes code blocks theme-aware in
/docs(a new Min Light theme for light mode alongside the existing Min Dark default).Changes
Language chooser redesign
type="language") in a bordered card with a gray toolbar: the active language's colored logo + full name on the left, underline-style abbreviation tabs (TS, PY, GO, …) on the right.logo(and optionallogoOnDark) field to eachSupportedLanguage; YAML ships a dark-mode wordmark variant swapped via the docs.docs-logo-light/.docs-logo-darkclasses.option-style="none") keep no chrome — the toolbar wrapper is hidden alongside the list.Theme-aware code blocks (/docs)
theme/src/scss/docs/_code-light.scss— the Min Light code theme (Violet 50 surface) for docs light mode, mirroring the Min Dark dark-mode block. Comments are bumped for contrast; everything else is the canonical Min Light palette.main.scssso it beats the layered component rules, scoped tohtml:not([data-theme="dark"]) body.section-docsso it can't touch non-docs pages or dark mode.Code-panel chrome refinements
code-mode-darkoverrides).div.icon-and-lineso it no longer leaks onto copy-button icons.Tests