From 0b23bf8a13c18a9aa4da2ef093765e477b928a4b Mon Sep 17 00:00:00 2001 From: Jeff Merrick Date: Mon, 29 Jun 2026 13:51:18 -0500 Subject: [PATCH 1/7] Redesign language chooser as a card with a left-label toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- layouts/partials/example-program.html | 2 +- layouts/shortcodes/example-program.html | 2 +- theme/src/scss/_code.scss | 22 ++- theme/src/scss/_copy-button.scss | 12 +- theme/src/scss/_notes.scss | 46 +++--- theme/src/scss/components/_chooser.scss | 139 ++++++++++++++++++ theme/src/scss/docs/_docs-theme.scss | 56 +++++-- .../src/components/chooser/chooser.e2e.ts | 38 +++++ .../src/components/chooser/chooser.scss | 6 +- .../src/components/chooser/chooser.tsx | 63 ++++++-- 10 files changed, 334 insertions(+), 52 deletions(-) diff --git a/layouts/partials/example-program.html b/layouts/partials/example-program.html index 2e22f1679d86..0fdb859933d7 100644 --- a/layouts/partials/example-program.html +++ b/layouts/partials/example-program.html @@ -74,7 +74,7 @@
{{ highlight $code $language }}
-
+
{{ partial "icon.html" (dict "name" "brand/github") }} diff --git a/layouts/shortcodes/example-program.html b/layouts/shortcodes/example-program.html index 473d5f6c821f..e9aff75b42f1 100644 --- a/layouts/shortcodes/example-program.html +++ b/layouts/shortcodes/example-program.html @@ -78,7 +78,7 @@
{{ highlight $code $language }}
-
+
{{ partial "icon.html" (dict "name" "brand/github") }} diff --git a/theme/src/scss/_code.scss b/theme/src/scss/_code.scss index 6d9a2b7ef391..c536dd5b7052 100644 --- a/theme/src/scss/_code.scss +++ b/theme/src/scss/_code.scss @@ -241,13 +241,29 @@ div.highlight.line-numbers { } .example-program-footer { - @apply block bg-blue-900 -mt-1 pb-1 px-2 rounded-b text-base mb-4 text-right; + @apply block -mt-1 pb-1 px-2 rounded-b text-base mb-4 text-right; + + // Match the code block's background (always dark) so the footer reads as + // its bottom lip in both light and dark mode. + background: var(--color-violet-950); + + // Shrink the tooltip's positioning context to the icon so the tooltip + // (centered on its target) lines up over the GitHub icon rather than over + // the full-width footer. + pulumi-tooltip { + @apply inline-block; + } + + // Shrink the GitHub icon a bit. + .ph-icon { + @apply h-4 w-4; + } a { - @apply text-blue-300 ; + @apply text-gray-400; &:hover { - @apply text-blue-200; + @apply text-gray-200; } } } diff --git a/theme/src/scss/_copy-button.scss b/theme/src/scss/_copy-button.scss index 41643b2bce06..d9a70f25d726 100644 --- a/theme/src/scss/_copy-button.scss +++ b/theme/src/scss/_copy-button.scss @@ -13,8 +13,12 @@ div.highlight { flex-direction: row; width: fit-content; + + // Match the code block's background with a subtle gray outline, so the button + // reads as part of the code panel rather than a filled violet button. margin: 8px 7px 0 0; - background: var(--color-violet-primary); + background: var(--color-violet-950); + border: 1px solid var(--color-gray-700); border-radius: 4px; position: absolute; @@ -22,16 +26,16 @@ div.highlight { right: 0; &:hover { - background: var(--color-violet-800); + background: var(--color-violet-900); } &:active { - background: var(--color-violet-primary); + background: var(--color-violet-950); } .code-mode-dark & { - background: var(--color-violet-primary); + background: var(--color-violet-950); } button.copy-button { diff --git a/theme/src/scss/_notes.scss b/theme/src/scss/_notes.scss index 06228e4379d6..048762246ada 100644 --- a/theme/src/scss/_notes.scss +++ b/theme/src/scss/_notes.scss @@ -27,20 +27,19 @@ } } - i, - svg.ph-icon { - font-size: 15px; - width: 20px; - height: 20px; - margin-top: 2px; - flex-shrink: 0; - } - div.icon-and-line { display: flex; flex-direction: column; align-items: center; gap: 4px; + + svg.ph-icon, i { + font-size: 15px; + width: 20px; + height: 20px; + margin-top: 2px; + flex-shrink: 0; + } } div.line { @@ -75,8 +74,11 @@ background: var(--color-violet-background); a, - i, - svg.ph-icon { + i { + color: var(--color-violet-primary); + } + + div.icon-and-line svg.ph-icon { color: var(--color-violet-primary); } @@ -93,8 +95,11 @@ background: var(--color-green-background); a, - i, - svg.ph-icon { + i { + color: var(--color-green-primary); + } + + div.icon-and-line svg.ph-icon { color: var(--color-green-primary); } @@ -111,8 +116,11 @@ background: var(--color-orange-background); a, - i, - svg.ph-icon { + i { + color: var(--color-orange-primary); + } + + div.icon-and-line svg.ph-icon { color: var(--color-orange-primary); } @@ -125,14 +133,12 @@ } } - div.highlight div.copy-button-container button.copy-button i, - div.highlight div.copy-button-container button.copy-button svg { - color: #fff; - } } section.docs-content div.note { - :last-child { + // Tighten the last content block (scoped to the content's direct children so it + // doesn't reach deeply-nested last children like the copy button). + div.content > :last-child { padding-bottom: 0; } diff --git a/theme/src/scss/components/_chooser.scss b/theme/src/scss/components/_chooser.scss index 5db4b02936a9..7f5d0f63bb25 100644 --- a/theme/src/scss/components/_chooser.scss +++ b/theme/src/scss/components/_chooser.scss @@ -56,6 +56,145 @@ pulumi-chooser { } } + // Language chooser: the whole thing (toolbar + slotted code/prose) is wrapped in a + // bordered card. A gray top toolbar carries the active language's colored logo + full + // name on the left and underline-style abbreviation tabs (TS, PY, GO, …) on the right. + // Scoped to non-headless language choosers; the headless/inline ones + // (option-style="none") keep no chrome at all. Semantic --docs-* tokens (with literal + // fallbacks) give dark mode for free on /docs and light defaults on marketing pages. + // + // Padding lives on the card so that ALL slotted content is inset uniformly — + // including loose prose, which Hugo emits as a bare text node that no element + // selector could target. The toolbar breaks out of that padding to stay flush at the + // top edge. + &[type="language"]:not([option-style="none"]) { + @apply block rounded-lg px-4 pb-4 mb-4 overflow-hidden; + + background: var(--docs-card, theme("colors.white")); + border: 1px solid var(--docs-border, theme("colors.gray.200")); + + // The toolbar gets its height from the label's vertical padding; the tabs stretch + // to fill it (items-stretch is the flex default) so each tab's bottom border sits + // flush with the bottom edge of the toolbar. Colors use the semantic --docs-* + // tokens so they flip in dark mode (the legacy dark rule in _docs-theme.scss only + // covers the old `pulumi-chooser > ul` tabs, not this toolbar). + .chooser-toolbar { + @apply -mx-4 mb-4 flex justify-between gap-2 px-4; + + background: var(--docs-surface, theme("colors.gray.50")); + + .chooser-toolbar-label { + @apply font-display text-sm font-medium flex items-center gap-2 py-2; + + color: var(--docs-fg, theme("colors.gray.900")); + } + + .chooser-toolbar-logo { + @apply h-5 w-5 flex-shrink-0 object-contain; + } + + > ul { + @apply m-0 flex flex-wrap justify-end; + + padding: 0 !important; + list-style-type: none !important; + + li { + @apply font-display text-xs flex p-0 m-0 border-b-2 border-transparent transition; + @include transition; + + &:hover { + border-bottom-color: var(--docs-border, theme("colors.gray.200")); + } + + &.active { + border-bottom-color: var(--docs-link, var(--color-violet-primary)); + + a { + color: var(--docs-fg, theme("colors.gray.900")); + } + } + + a { + @apply flex items-center cursor-pointer py-2 px-3; + + color: var(--docs-fg-muted, theme("colors.gray.600")); + + &:hover { + color: var(--docs-fg, theme("colors.gray.900")); + text-decoration: none !important; + } + + span { + @apply ml-1; + @extend .badge; + @extend .badge-preview; + } + } + } + } + } + + // Code units inside a choosable carry their spacing on the wrapper (not the inner + // pre, nor the example-program footer) and collapse it at the edges of the + // choosable's content so the card padding isn't doubled: only child → no margin, + // first → bottom only, last → top only, middle → both (the first/last resets on a + // symmetric margin cover all four). A .example-program (code + GitHub footer) is + // one such unit. The choosable component wraps slotted content in its own
+ // (class "active" when selected), so the units live one level below the choosable. + pre { + @apply mb-0; + } + + pulumi-choosable > div > .highlight, + pulumi-choosable > div > .example-program { + @apply my-4; + + &:first-child { + @apply mt-0; + } + + &:last-child { + @apply mb-0; + } + } + + // A paragraph or list directly above already supplies a bottom margin, so drop the + // unit's top margin there to avoid a doubled gap. + pulumi-choosable > div > :is(p, ul, ol) + .highlight, + pulumi-choosable > div > :is(p, ul, ol) + .example-program { + @apply mt-0; + } + + // The footer's own bottom margin would fight the unit margin above; drop it so the + // .example-program wrapper is the single source of the unit's trailing space. + pulumi-choosable .example-program-footer { + @apply mb-0; + } + + // Example programs are self-contained code panels (code + GitHub footer): run + // them flush to the card edges rather than double-padding them. These choosers + // only ever contain .example-program blocks (never loose prose), so dropping the + // card padding is safe; overflow-hidden clips the panel's square corners back to + // the card radius and zeroing the trailing margin keeps it tight to the edge. + &:has(> .example-program) { + @apply px-0 pb-0; + + .chooser-toolbar { + @apply mx-0 mb-0; + } + + > .example-program { + pre, + .code-max-h, + .highlight, + .example-program-footer { + @apply mb-0 rounded-none; + } + } + } + } + &.solutions-persona-chooser[selection="developer"] { + h2 .developers { display: inherit; diff --git a/theme/src/scss/docs/_docs-theme.scss b/theme/src/scss/docs/_docs-theme.scss index e1effe3db695..d6a5e4a0a5a4 100644 --- a/theme/src/scss/docs/_docs-theme.scss +++ b/theme/src/scss/docs/_docs-theme.scss @@ -174,8 +174,11 @@ html[data-theme="dark"] body.section-docs { background: var(--color-violet-950); a, - i, - svg.ph-icon { + i { + color: var(--color-violet-300); + } + + div.icon-and-line svg.ph-icon { color: var(--color-violet-300); } @@ -192,8 +195,11 @@ html[data-theme="dark"] body.section-docs { background: var(--color-green-950); a, - i, - svg.ph-icon { + i { + color: var(--color-green-300); + } + + div.icon-and-line svg.ph-icon { color: var(--color-green-300); } @@ -210,8 +216,11 @@ html[data-theme="dark"] body.section-docs { background: var(--color-orange-950); a, - i, - svg.ph-icon { + i { + color: var(--color-orange-300); + } + + div.icon-and-line svg.ph-icon { color: var(--color-orange-300); } @@ -425,6 +434,34 @@ html[data-theme="dark"] body.section-docs { } } + // New language toolbar tabs: the unlayered `*` border reset below would otherwise + // paint their underlines with --docs-border (beating the layered component styles + // regardless of specificity). Re-assert here: inactive matches the toolbar surface, + // active is the violet link color. + .chooser-toolbar > ul li { + border-bottom-color: var(--docs-surface); + + &:hover { + border-bottom-color: var(--docs-border); + } + + a { + color: var(--docs-fg-muted); + + &:hover { + color: var(--docs-fg); + } + } + + &.active { + border-bottom-color: var(--docs-link); + + a { + color: var(--docs-fg); + } + } + } + pulumi-tabs::part(tab) { border-bottom-color: var(--docs-border); } @@ -577,12 +614,13 @@ html[data-theme="dark"] body.section-docs { } } - // Code-block copy button stays primary violet-700 (the --color-violet-primary - // remap would otherwise turn it lavender). + // Code-block copy button matches the code block background (violet-950) with its + // outline, same as light mode. violet-950 is a fixed value, so unlike the old + // violet-primary fill it isn't affected by the lavender remap. .copy-button-container, .copy-button-container:active, .code-mode-dark .copy-button-container { - background: var(--color-violet-700); + background: var(--color-violet-950); } // Masked chrome icons (nav toggles, TOC chevron + "On this page" glyph) bake diff --git a/theme/stencil/src/components/chooser/chooser.e2e.ts b/theme/stencil/src/components/chooser/chooser.e2e.ts index c03117384625..864cb8e18cc9 100644 --- a/theme/stencil/src/components/chooser/chooser.e2e.ts +++ b/theme/stencil/src/components/chooser/chooser.e2e.ts @@ -11,4 +11,42 @@ describe("pulumi-chooser", () => { const items = await element.findAll("ul > li"); expect(items.length).toEqual(3); }); + + it("renders a language chooser as a toolbar with a logo label and abbreviated tabs", async () => { + const page = await newE2EPage(); + await page.setContent(``); + + const element = await page.find("pulumi-chooser"); + expect(element).toHaveClass("hydrated"); + + // The toolbar wrapper and left-hand label (logo + full name) render. + const toolbar = await element.find(".chooser-toolbar"); + expect(toolbar).not.toBeNull(); + const label = await element.find(".chooser-toolbar-label"); + expect(label).not.toBeNull(); + const logo = await element.find(".chooser-toolbar-logo"); + expect(logo).not.toBeNull(); + + // The tabs show uppercased file-extension abbreviations, not full names. + const items = await element.findAll(".chooser-toolbar ul > li a"); + const labels = items.map(item => item.textContent.trim()); + expect(labels).toEqual(["TS", "GO", "PY"]); + }); + + it("renders a non-language chooser as plain name tabs with no toolbar", async () => { + const page = await newE2EPage(); + await page.setContent(``); + + const element = await page.find("pulumi-chooser"); + expect(element).toHaveClass("hydrated"); + + // No toolbar wrapper for non-language choosers. + const toolbar = await element.find(".chooser-toolbar"); + expect(toolbar).toBeNull(); + + // Tabs render the full option names. + const items = await element.findAll("ul > li a"); + const labels = items.map(item => item.textContent.trim()); + expect(labels).toEqual(["macOS", "Linux", "Windows"]); + }); }); diff --git a/theme/stencil/src/components/chooser/chooser.scss b/theme/stencil/src/components/chooser/chooser.scss index 171a674a5fc1..a24327da40e9 100644 --- a/theme/stencil/src/components/chooser/chooser.scss +++ b/theme/stencil/src/components/chooser/chooser.scss @@ -1,7 +1,9 @@ pulumi-chooser { - // Headless choosers' option lists are hidden. + // Headless choosers' option lists are hidden. Language choosers wrap the list in + // a .chooser-toolbar, so hide that wrapper too. &[option-style="none"] { - > ul { + > ul, + > .chooser-toolbar { display: none; } } diff --git a/theme/stencil/src/components/chooser/chooser.tsx b/theme/stencil/src/components/chooser/chooser.tsx index 944f79da1a1e..89e2ecd81fb5 100644 --- a/theme/stencil/src/components/chooser/chooser.tsx +++ b/theme/stencil/src/components/chooser/chooser.tsx @@ -21,6 +21,7 @@ export interface SupportedLanguage { key: LanguageKey; name: string; extension: string; + logo: string; preview: boolean; } @@ -242,25 +243,53 @@ export class Chooser { } render() { + // Render the current set of options, marking the selected one active. For + // language choosers the button text is the uppercased file extension (e.g. TS, + // PY); every other type keeps rendering the full name and PREVIEW badge as before. + const list = ( + + ); + + if (this.type === "language") { + const selected = this.currentOptions.find(o => o.key === this.selection) as SupportedLanguage; + return ( + +
+ + {selected ? : ""} + {selected ? selected.name : ""} + + {list} +
+ + + ); + } + return ( - + {list} ); } + // The text shown on a chooser tab. For languages we use the uppercased file + // extension (TS, PY, GO, …) so 7+ options fit on one row; everything else uses the + // full option name. + private optionLabel(opt: ChooserOption): string { + const ext = (opt as SupportedLanguage).extension; + return ext ? ext.toUpperCase() : opt.name; + } + // The choosable elements of this chooser, if any. // Only returns choosables that match this chooser's type. private get choosables() { @@ -435,60 +464,70 @@ export class Chooser { key: "typescript", name: "TypeScript", extension: "ts", + logo: "/logos/tech/typescript.svg", preview: false, }, { key: "javascript", name: "JavaScript", extension: "js", + logo: "/logos/tech/javascript.svg", preview: false, }, { key: "python", name: "Python", extension: "py", + logo: "/logos/tech/python.svg", preview: false, }, { key: "go", name: "Go", extension: "go", + logo: "/logos/tech/go.svg", preview: false, }, { key: "csharp", name: "C#", extension: "cs", + logo: "/logos/tech/csharp.svg", preview: false, }, { key: "fsharp", name: "F#", extension: "fs", + logo: "/logos/tech/fsharp.svg", preview: false, }, { key: "visualbasic", name: "VB", extension: "vb", + logo: "/logos/tech/visualbasic.svg", preview: false, }, { key: "java", name: "Java", extension: "java", + logo: "/logos/tech/java.svg", preview: false, }, { key: "yaml", name: "YAML", extension: "yaml", + logo: "/logos/tech/yaml.svg", preview: false, }, { key: "opa", name: "OPA", extension: "rego", + logo: "/logos/tech/logo-opa.png", preview: false, }, ]; From a9eadcf2aeb11f495c137028d7117beaa092dacd Mon Sep 17 00:00:00 2001 From: Jeff Merrick Date: Mon, 29 Jun 2026 14:28:23 -0500 Subject: [PATCH 2/7] Theme-aware code blocks and language chooser refinements - 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 --- static/logos/tech/c-sharp.svg | 23 +-- static/logos/tech/csharp.svg | 23 +-- theme/src/scss/_code.scss | 32 ++- theme/src/scss/_copy-button.scss | 57 +++--- theme/src/scss/components/_chooser.scss | 11 +- theme/src/scss/docs/_code-light.scss | 184 ++++++++++++++++++ theme/src/scss/docs/_docs-theme.scss | 11 +- theme/src/scss/main.scss | 7 + .../src/components/chooser/chooser.tsx | 33 +++- 9 files changed, 314 insertions(+), 67 deletions(-) create mode 100644 theme/src/scss/docs/_code-light.scss diff --git a/static/logos/tech/c-sharp.svg b/static/logos/tech/c-sharp.svg index 0e1f3a67d749..c023aa9be44a 100644 --- a/static/logos/tech/c-sharp.svg +++ b/static/logos/tech/c-sharp.svg @@ -1,13 +1,10 @@ - - - - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/static/logos/tech/csharp.svg b/static/logos/tech/csharp.svg index 0e1f3a67d749..c023aa9be44a 100644 --- a/static/logos/tech/csharp.svg +++ b/static/logos/tech/csharp.svg @@ -1,13 +1,10 @@ - - - - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/theme/src/scss/_code.scss b/theme/src/scss/_code.scss index c536dd5b7052..f8cc695dfd2a 100644 --- a/theme/src/scss/_code.scss +++ b/theme/src/scss/_code.scss @@ -248,10 +248,38 @@ div.highlight.line-numbers { background: var(--color-violet-950); // Shrink the tooltip's positioning context to the icon so the tooltip - // (centered on its target) lines up over the GitHub icon rather than over - // the full-width footer. + // lines up with the GitHub icon rather than the full-width footer. pulumi-tooltip { @apply inline-block; + + // Place this tooltip to the LEFT of the icon instead of the default + // above-centered: the footer sits at the bottom-right of the code + // panel, where an upward tooltip would overflow the panel. Vertically + // center it on the icon, sit it just left of the icon (margin = gap), + // and point the caret right. + .tooltip-content { + top: 50%; + bottom: auto; + left: auto; + right: 100%; + margin: 0 8px 0 0; + transform: translateY(-50%); + + // Caret on the right edge, pointing at the icon. + &:after { + @apply absolute m-0; + top: 50%; + left: auto; + right: -3px; + transform: translateY(-50%) rotate(45deg); + } + } + + // The global active rule re-introduces `bottom: 100%`; cancel it so the + // tooltip stays to the left (not above) when shown. + .tooltip-target.active + .tooltip-content { + bottom: auto; + } } // Shrink the GitHub icon a bit. diff --git a/theme/src/scss/_copy-button.scss b/theme/src/scss/_copy-button.scss index d9a70f25d726..d8a9859d84b3 100644 --- a/theme/src/scss/_copy-button.scss +++ b/theme/src/scss/_copy-button.scss @@ -13,29 +13,14 @@ div.highlight { flex-direction: row; width: fit-content; - - // Match the code block's background with a subtle gray outline, so the button - // reads as part of the code panel rather than a filled violet button. - margin: 8px 7px 0 0; - background: var(--color-violet-950); - border: 1px solid var(--color-gray-700); - + background: transparent; border-radius: 4px; position: absolute; top: 0; right: 0; &:hover { - background: var(--color-violet-900); - } - - &:active { - background: var(--color-violet-950); - } - - - .code-mode-dark & { - background: var(--color-violet-950); + background: color-mix(in oklch, var(--color-white) 8%, transparent); } button.copy-button { @@ -44,10 +29,34 @@ div.highlight { gap: 4px; } - // Use a slightly narrower tooltip for these. + // Use a slightly narrower tooltip for these, and place it to the LEFT of the + // button instead of the default above-centered: the button sits at the + // top-right of the code panel, where an upward tooltip would overflow above it. pulumi-tooltip { .tooltip-content { @apply w-auto whitespace-nowrap; + + top: 50%; + bottom: auto; + left: auto; + right: 100%; + margin: 0 8px 0 0; + transform: translateY(-50%); + + // Caret on the right edge, pointing at the button. + &:after { + @apply absolute m-0; + top: 50%; + left: auto; + right: -3px; + transform: translateY(-50%) rotate(45deg); + } + } + + // The global active rule re-introduces `bottom: 100%`; cancel it so the + // tooltip stays to the left (not above) when shown. + .tooltip-target.active + .tooltip-content { + bottom: auto; } } @@ -64,17 +73,15 @@ div.highlight { .copy-button { @include transition; - color: #fff; + // One muted foreground for every context — reads on the dark (Min Dark) + // panel; the docs-light theme overrides it to a dark gray. + color: var(--color-gray-400); font-size: 14px; font-family: 'Inter'; padding: 8px 8px 8px 10px; - .code-mode-dark & { - @apply text-gray-600; - - &:hover { - @apply text-gray-500; - } + &:hover { + color: var(--color-gray-200); } } } diff --git a/theme/src/scss/components/_chooser.scss b/theme/src/scss/components/_chooser.scss index 7f5d0f63bb25..f8b7e7b2ff77 100644 --- a/theme/src/scss/components/_chooser.scss +++ b/theme/src/scss/components/_chooser.scss @@ -6,11 +6,16 @@ pulumi-chooser { list-style-type: none !important; li { - @apply font-display text-xs p-0 m-0 border-b-2 transition border-gray-300 text-center w-full; + @apply font-display text-xs p-0 m-0 border-b-2 transition text-center w-full; @include transition; + // Semantic --docs-* tokens (with literal fallbacks for non-docs pages) + // give dark mode for free; the legacy dark rule in _docs-theme.scss + // re-asserts the dark hover/active values. + border-bottom-color: var(--docs-surface, theme("colors.gray.50")); + &:hover { - @apply border-gray-500; + border-bottom-color: var(--docs-border, theme("colors.gray.200")); } @include screen-md { @@ -21,7 +26,7 @@ pulumi-chooser { @include gradient-border; a { - @apply text-gray-800; + color: var(--color-service-black); } } diff --git a/theme/src/scss/docs/_code-light.scss b/theme/src/scss/docs/_code-light.scss new file mode 100644 index 000000000000..a481dc9e47c4 --- /dev/null +++ b/theme/src/scss/docs/_code-light.scss @@ -0,0 +1,184 @@ +// =========================================================================== +// Min Light code theme — /docs light mode only +// --------------------------------------------------------------------------- +// The global code theme (theme/src/scss/_chroma.scss) is Min Dark on a Violet +// 950 background, and stays the default everywhere. This file is its light-mode +// counterpart: the Min Light theme (miguelsolorio/min-theme) on a Violet 50 +// (#f5f5ff) background, per the Pulumi brand "Code highlighting" guideline. +// +// It is the mirror of the dark block in _docs-theme.scss. Where that block is +// gated on `html[data-theme="dark"] body.section-docs`, this one is gated on +// `html:not([data-theme="dark"]) body.section-docs` — i.e. docs pages whose +// effective theme is light (no data-theme attribute is written pre-paint unless +// dark is effective). Combined with `body.section-docs` it cannot affect any +// non-docs page, and in docs dark mode it yields to the Min Dark default. +// +// Imported UNLAYERED from main.scss (after docs-theme) so it beats the layered +// _chroma.scss / _code.scss / _copy-button.scss component rules. +// +// One deviation from faithful Min Light: comments are bumped from the theme's +// #c2c3c5 (APCA Lc 27 on violet-50 — unreadable) to #6e7781 (Lc 66). Everything +// else is the canonical Min Light palette. +// =========================================================================== +html:not([data-theme="dark"]) body.section-docs { + // --- Surface + base text ----------------------------------------------- + // _code.scss paints `pre` violet-950 with light (text-gray-400) text; flip + // both to the Min Light surface and foreground. + pre { + background: var(--color-violet-50); + color: #212121; + } + + .chroma, + .bg { + background-color: var(--color-violet-50); + color: #212121; + } + + .chroma { + .x { color: #212121; } + .err { color: #cd3131; } + .hl { background-color: var(--color-violet-100); } + + // Keywords / storage + .k, + .kd, + .kn, + .kr, + .kt, + .nn, + .ow { color: #D32F2F; } + + // Constants, numbers, builtins, variables (Min Light blue) + .kc, + .kp, + .m, + .mb, + .mf, + .mh, + .mi, + .il, + .mo, + .nb, + .bp, + .no, + .nl, + .nv, + .vc, + .vg, + .vi, + .vm { color: #1976D2; } + + // Functions, types, classes, decorators, attributes (Min Light purple) + .n, + .na, + .nc, + .nd, + .ne, + .nf, + .fm, + .ni, + .nx { color: #6f42c1; } + + // Properties + punctuation render as base text in Min Light + .py, + .p { color: #212121; } + .o { color: #24292e; } + + // Strings + .l, + .ld, + .s, + .sa, + .sb, + .sc, + .dl, + .s2, + .se, + .sh, + .si, + .sx, + .sr, + .s1, + .ss { color: #2b5581; } + + // Tags + .nt { color: #22863a; } + + // Comments (bumped from #c2c3c5 for contrast — see header) + .c, + .ch, + .cm, + .c1, + .cs, + .cp, + .cpf { color: #6e7781; font-style: italic; } + + // Docstrings track the comment color + .sd { color: #6e7781; font-style: italic; } + + // Generic / diff + .gd { color: #b31d28; background-color: #ffeef0; } + .gi { color: #22863a; background-color: #e6ffed; } + .gh { color: #1976D2; font-weight: bold; } + .gu { color: #1976D2; } + .gp { color: #6e7781; font-weight: bold; } + .go { color: #6e7781; } + .gr, + .gt { color: #cd3131; } + .gs { font-weight: bold; color: #cd3131; } + } + + // --- Copy button (docs-light variant of the consolidated style) --------- + .copy-button-container { + border-color: var(--color-gray-200); + + &:hover { + background: var(--color-violet-100); + } + } + + .copy-button { + color: var(--color-gray-700); + + &:hover { + color: var(--color-gray-900); + } + } + + // --- example-program footer (bottom lip of the code panel) -------------- + .example-program .example-program-footer { + background: var(--color-violet-50); + + a { + color: var(--color-gray-700); + + &:hover { + color: var(--color-gray-900); + } + } + } + + // --- code-tabbed (interactive multi-language demo) ---------------------- + .code-tabbed { + .code-tabbed-tabs, + .code-tabbed-content, + .code-tabbed-status { + background: var(--color-violet-50); + } + + .code-tabbed-tab { + .code-tabbed-tab-label { + color: var(--color-gray-600); + } + + &:hover .code-tabbed-tab-label { + color: var(--color-gray-800); + } + + &.active .code-tabbed-tab-label { + color: var(--color-gray-900); + } + } + } +} diff --git a/theme/src/scss/docs/_docs-theme.scss b/theme/src/scss/docs/_docs-theme.scss index d6a5e4a0a5a4..3816ee8b1341 100644 --- a/theme/src/scss/docs/_docs-theme.scss +++ b/theme/src/scss/docs/_docs-theme.scss @@ -614,14 +614,9 @@ html[data-theme="dark"] body.section-docs { } } - // Code-block copy button matches the code block background (violet-950) with its - // outline, same as light mode. violet-950 is a fixed value, so unlike the old - // violet-primary fill it isn't affected by the lavender remap. - .copy-button-container, - .copy-button-container:active, - .code-mode-dark .copy-button-container { - background: var(--color-violet-950); - } + // The copy button is a transparent ghost chip (see _copy-button.scss) that + // reads correctly on the dark violet-950 panel as-is, so dark mode needs no + // override — the docs-light variant lives in docs/_code-light.scss. // Masked chrome icons (nav toggles, TOC chevron + "On this page" glyph) bake // a fixed-color SVG behind a mask; drop the image and tint the mask so they diff --git a/theme/src/scss/main.scss b/theme/src/scss/main.scss index 335bfeb9fe7d..17d170c014c0 100644 --- a/theme/src/scss/main.scss +++ b/theme/src/scss/main.scss @@ -387,6 +387,13 @@ $sitenav-offset: calc($sitenav-height + 16px); // cannot affect any non-docs page. @import "docs/docs-theme"; +// Min Light code theme for /docs light mode. Imported UNLAYERED (like docs-theme +// above) so it beats the layered _chroma.scss / _code.scss / _copy-button.scss +// component rules. Scoped to `html:not([data-theme="dark"]) body.section-docs`, +// so it only applies to docs pages in light mode and yields to the Min Dark +// default everywhere else (and in docs dark mode). +@import "docs/code-light"; + // Auth-aware header swap. The inline script in head.html adds .is-signed-in // to when the auth cookie is present, before first paint. These rules // live unlayered so they win against the buttons' display utilities (which diff --git a/theme/stencil/src/components/chooser/chooser.tsx b/theme/stencil/src/components/chooser/chooser.tsx index 89e2ecd81fb5..2efbe72f6e17 100644 --- a/theme/stencil/src/components/chooser/chooser.tsx +++ b/theme/stencil/src/components/chooser/chooser.tsx @@ -22,6 +22,11 @@ export interface SupportedLanguage { name: string; extension: string; logo: string; + // Optional dark-mode logo variant. Set only for languages whose light logo + // doesn't read on a dark background (e.g. YAML's black wordmark). When + // present, the toolbar emits both images and the docs theme's + // .docs-logo-light/.docs-logo-dark CSS swaps them on dark docs pages. + logoOnDark?: string; preview: boolean; } @@ -264,8 +269,9 @@ export class Chooser {
- {selected ? : ""} + {selected ? this.renderToolbarLogo(selected) : ""} {selected ? selected.name : ""} + {selected && selected.preview ? Preview : ""} {list}
@@ -282,6 +288,22 @@ export class Chooser { ); } + // The language logo in the toolbar. When the language ships a dark-mode + // variant, emit both images tagged with the docs theme's .docs-logo-light / + // .docs-logo-dark classes: the dark one is hidden everywhere by default and + // revealed only on dark-mode docs pages, so the right logo shows in every + // context (and non-docs pages keep the light one). Languages without a dark + // variant render a single full-color logo that reads on both backgrounds. + private renderToolbarLogo(lang: SupportedLanguage) { + if (lang.logoOnDark) { + return [ + , + , + ]; + } + return ; + } + // The text shown on a chooser tab. For languages we use the uppercased file // extension (TS, PY, GO, …) so 7+ options fit on one row; everything else uses the // full option name. @@ -513,14 +535,19 @@ export class Chooser { key: "java", name: "Java", extension: "java", - logo: "/logos/tech/java.svg", + // Mark-only Java cup (no "Java" wordmark), already used elsewhere in docs. + logo: "/images/docs/icons/languages/java-color-32-32.svg", preview: false, }, { key: "yaml", name: "YAML", extension: "yaml", - logo: "/logos/tech/yaml.svg", + // The matched light/dark pair already used elsewhere in docs (the + // div.yaml-color-32-32 icon); the -on-dark recolor keeps the black + // wordmark legible on dark backgrounds. + logo: "/images/docs/icons/languages/yaml-color-32-32.svg", + logoOnDark: "/images/docs/icons/languages/yaml-color-32-32-on-dark.svg", preview: false, }, { From d7408a53b37dfb1ea9118b22c5510d18fb0757b7 Mon Sep 17 00:00:00 2001 From: Jeff Merrick Date: Mon, 29 Jun 2026 14:40:42 -0500 Subject: [PATCH 3/7] Fix chooser e2e tab-order assertions to match render order 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) --- theme/stencil/src/components/chooser/chooser.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/stencil/src/components/chooser/chooser.e2e.ts b/theme/stencil/src/components/chooser/chooser.e2e.ts index 864cb8e18cc9..746e0adfaa12 100644 --- a/theme/stencil/src/components/chooser/chooser.e2e.ts +++ b/theme/stencil/src/components/chooser/chooser.e2e.ts @@ -30,7 +30,7 @@ describe("pulumi-chooser", () => { // The tabs show uppercased file-extension abbreviations, not full names. const items = await element.findAll(".chooser-toolbar ul > li a"); const labels = items.map(item => item.textContent.trim()); - expect(labels).toEqual(["TS", "GO", "PY"]); + expect(labels).toEqual(["TS", "PY", "GO"]); }); it("renders a non-language chooser as plain name tabs with no toolbar", async () => { @@ -47,6 +47,6 @@ describe("pulumi-chooser", () => { // Tabs render the full option names. const items = await element.findAll("ul > li a"); const labels = items.map(item => item.textContent.trim()); - expect(labels).toEqual(["macOS", "Linux", "Windows"]); + expect(labels).toEqual(["macOS", "Windows", "Linux"]); }); }); From 2e3b05e2a92b66ad4accf0077c17e0edc8b96d3b Mon Sep 17 00:00:00 2001 From: Jeff Merrick Date: Mon, 29 Jun 2026 15:07:27 -0500 Subject: [PATCH 4/7] Tooltip position prop, docs-icon language logos, comment cleanup - 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 --- layouts/partials/example-program.html | 2 +- layouts/shortcodes/example-program.html | 2 +- .../icons/languages/csharp-color-32-32.svg | 10 ++++ .../icons/languages/fsharp-color-32-32.svg | 7 +++ .../languages/javascript-color-32-32.svg | 11 ++++ .../docs/icons/languages/opa-color-32-32.png | Bin 0 -> 51127 bytes .../languages/typescript-color-32-32.svg | 5 ++ .../languages/visualbasic-color-32-32.svg | 13 +++++ theme/src/scss/_code.scss | 37 +----------- theme/src/scss/_copy-button.scss | 29 +--------- theme/src/scss/_tooltip.scss | 27 +++++++++ theme/src/scss/components/_chooser.scss | 54 ++++++------------ theme/src/scss/docs/_code-light.scss | 47 +++++---------- theme/src/scss/docs/_docs-theme.scss | 11 ++-- theme/src/scss/main.scss | 7 +-- theme/src/ts/copybutton.ts | 2 +- .../src/components/chooser/chooser.tsx | 37 ++++++------ .../src/components/tooltip/tooltip.tsx | 7 ++- 18 files changed, 141 insertions(+), 167 deletions(-) create mode 100644 static/images/docs/icons/languages/csharp-color-32-32.svg create mode 100644 static/images/docs/icons/languages/fsharp-color-32-32.svg create mode 100644 static/images/docs/icons/languages/javascript-color-32-32.svg create mode 100644 static/images/docs/icons/languages/opa-color-32-32.png create mode 100644 static/images/docs/icons/languages/typescript-color-32-32.svg create mode 100644 static/images/docs/icons/languages/visualbasic-color-32-32.svg diff --git a/layouts/partials/example-program.html b/layouts/partials/example-program.html index 0fdb859933d7..f93efa4804e5 100644 --- a/layouts/partials/example-program.html +++ b/layouts/partials/example-program.html @@ -75,7 +75,7 @@ {{ highlight $code $language }}
- + {{ partial "icon.html" (dict "name" "brand/github") }} diff --git a/layouts/shortcodes/example-program.html b/layouts/shortcodes/example-program.html index e9aff75b42f1..b4d3f90923b2 100644 --- a/layouts/shortcodes/example-program.html +++ b/layouts/shortcodes/example-program.html @@ -79,7 +79,7 @@ {{ highlight $code $language }}
- + {{ partial "icon.html" (dict "name" "brand/github") }} diff --git a/static/images/docs/icons/languages/csharp-color-32-32.svg b/static/images/docs/icons/languages/csharp-color-32-32.svg new file mode 100644 index 000000000000..c023aa9be44a --- /dev/null +++ b/static/images/docs/icons/languages/csharp-color-32-32.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/static/images/docs/icons/languages/fsharp-color-32-32.svg b/static/images/docs/icons/languages/fsharp-color-32-32.svg new file mode 100644 index 000000000000..fea14f61cb7a --- /dev/null +++ b/static/images/docs/icons/languages/fsharp-color-32-32.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/docs/icons/languages/javascript-color-32-32.svg b/static/images/docs/icons/languages/javascript-color-32-32.svg new file mode 100644 index 000000000000..f2d84428d690 --- /dev/null +++ b/static/images/docs/icons/languages/javascript-color-32-32.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/images/docs/icons/languages/opa-color-32-32.png b/static/images/docs/icons/languages/opa-color-32-32.png new file mode 100644 index 0000000000000000000000000000000000000000..fcbb49ba71190ebf8e979704a74180c134517872 GIT binary patch literal 51127 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 literal 0 HcmV?d00001 diff --git a/static/images/docs/icons/languages/typescript-color-32-32.svg b/static/images/docs/icons/languages/typescript-color-32-32.svg new file mode 100644 index 000000000000..3e5b7be5c62c --- /dev/null +++ b/static/images/docs/icons/languages/typescript-color-32-32.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/images/docs/icons/languages/visualbasic-color-32-32.svg b/static/images/docs/icons/languages/visualbasic-color-32-32.svg new file mode 100644 index 000000000000..7a80ad80729c --- /dev/null +++ b/static/images/docs/icons/languages/visualbasic-color-32-32.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/theme/src/scss/_code.scss b/theme/src/scss/_code.scss index f8cc695dfd2a..6163e35bf4cd 100644 --- a/theme/src/scss/_code.scss +++ b/theme/src/scss/_code.scss @@ -243,46 +243,15 @@ div.highlight.line-numbers { .example-program-footer { @apply block -mt-1 pb-1 px-2 rounded-b text-base mb-4 text-right; - // Match the code block's background (always dark) so the footer reads as - // its bottom lip in both light and dark mode. + // Always dark — the footer is the code panel's bottom lip. background: var(--color-violet-950); - // Shrink the tooltip's positioning context to the icon so the tooltip - // lines up with the GitHub icon rather than the full-width footer. + // Shrink the tooltip's positioning context to the icon (placement is + // set via ). pulumi-tooltip { @apply inline-block; - - // Place this tooltip to the LEFT of the icon instead of the default - // above-centered: the footer sits at the bottom-right of the code - // panel, where an upward tooltip would overflow the panel. Vertically - // center it on the icon, sit it just left of the icon (margin = gap), - // and point the caret right. - .tooltip-content { - top: 50%; - bottom: auto; - left: auto; - right: 100%; - margin: 0 8px 0 0; - transform: translateY(-50%); - - // Caret on the right edge, pointing at the icon. - &:after { - @apply absolute m-0; - top: 50%; - left: auto; - right: -3px; - transform: translateY(-50%) rotate(45deg); - } - } - - // The global active rule re-introduces `bottom: 100%`; cancel it so the - // tooltip stays to the left (not above) when shown. - .tooltip-target.active + .tooltip-content { - bottom: auto; - } } - // Shrink the GitHub icon a bit. .ph-icon { @apply h-4 w-4; } diff --git a/theme/src/scss/_copy-button.scss b/theme/src/scss/_copy-button.scss index d8a9859d84b3..7d1388ceaa1f 100644 --- a/theme/src/scss/_copy-button.scss +++ b/theme/src/scss/_copy-button.scss @@ -29,34 +29,10 @@ div.highlight { gap: 4px; } - // Use a slightly narrower tooltip for these, and place it to the LEFT of the - // button instead of the default above-centered: the button sits at the - // top-right of the code panel, where an upward tooltip would overflow above it. + // Narrower tooltip; left placement is set via position="left" in copybutton.ts. pulumi-tooltip { .tooltip-content { @apply w-auto whitespace-nowrap; - - top: 50%; - bottom: auto; - left: auto; - right: 100%; - margin: 0 8px 0 0; - transform: translateY(-50%); - - // Caret on the right edge, pointing at the button. - &:after { - @apply absolute m-0; - top: 50%; - left: auto; - right: -3px; - transform: translateY(-50%) rotate(45deg); - } - } - - // The global active rule re-introduces `bottom: 100%`; cancel it so the - // tooltip stays to the left (not above) when shown. - .tooltip-target.active + .tooltip-content { - bottom: auto; } } @@ -73,8 +49,7 @@ div.highlight { .copy-button { @include transition; - // One muted foreground for every context — reads on the dark (Min Dark) - // panel; the docs-light theme overrides it to a dark gray. + // Muted icon on the dark panel; the docs-light theme darkens it. color: var(--color-gray-400); font-size: 14px; font-family: 'Inter'; diff --git a/theme/src/scss/_tooltip.scss b/theme/src/scss/_tooltip.scss index 534bdfa33458..e855858b532a 100644 --- a/theme/src/scss/_tooltip.scss +++ b/theme/src/scss/_tooltip.scss @@ -34,6 +34,33 @@ pulumi-tooltip { } } + // Left placement (opt in with position="left"): bubble to the left of the + // target, vertically centered, caret on its right edge. For triggers where an + // above-centered tooltip would overflow (e.g. the code copy button). + &[position="left"] { + .tooltip-content { + top: 50%; + bottom: auto; + left: auto; + right: 100%; + margin: 0 8px 0 0; + transform: translateY(-50%); + + &:after { + @apply absolute m-0; + top: 50%; + left: auto; + right: -3px; + transform: translateY(-50%) rotate(45deg); + } + } + + // Cancel the base active rule's `bottom: 100%` so it stays left when shown. + .tooltip-target.active + .tooltip-content { + bottom: auto; + } + } + // To prevent a flash of unstyled/understyled slotted content, we hide that content until // it's rendered as a child of the tooltip component. [slot="content"] { diff --git a/theme/src/scss/components/_chooser.scss b/theme/src/scss/components/_chooser.scss index f8b7e7b2ff77..ac39ec455f59 100644 --- a/theme/src/scss/components/_chooser.scss +++ b/theme/src/scss/components/_chooser.scss @@ -9,9 +9,8 @@ pulumi-chooser { @apply font-display text-xs p-0 m-0 border-b-2 transition text-center w-full; @include transition; - // Semantic --docs-* tokens (with literal fallbacks for non-docs pages) - // give dark mode for free; the legacy dark rule in _docs-theme.scss - // re-asserts the dark hover/active values. + // --docs-* tokens (with non-docs fallbacks); the legacy dark rule in + // _docs-theme.scss re-asserts the dark hover/active values. border-bottom-color: var(--docs-surface, theme("colors.gray.50")); &:hover { @@ -61,28 +60,20 @@ pulumi-chooser { } } - // Language chooser: the whole thing (toolbar + slotted code/prose) is wrapped in a - // bordered card. A gray top toolbar carries the active language's colored logo + full - // name on the left and underline-style abbreviation tabs (TS, PY, GO, …) on the right. - // Scoped to non-headless language choosers; the headless/inline ones - // (option-style="none") keep no chrome at all. Semantic --docs-* tokens (with literal - // fallbacks) give dark mode for free on /docs and light defaults on marketing pages. - // - // Padding lives on the card so that ALL slotted content is inset uniformly — - // including loose prose, which Hugo emits as a bare text node that no element - // selector could target. The toolbar breaks out of that padding to stay flush at the - // top edge. + // Language chooser card: a bordered card wrapping a gray toolbar (active logo + + // name on the left, abbreviation tabs on the right) and the slotted code/prose. + // Skips headless choosers (option-style="none"). --docs-* tokens with literal + // fallbacks give dark mode on /docs and light defaults elsewhere. Padding lives + // on the card so all slotted content (including bare-text-node prose) is inset + // uniformly; the toolbar breaks out of it to stay flush at the top. &[type="language"]:not([option-style="none"]) { @apply block rounded-lg px-4 pb-4 mb-4 overflow-hidden; background: var(--docs-card, theme("colors.white")); border: 1px solid var(--docs-border, theme("colors.gray.200")); - // The toolbar gets its height from the label's vertical padding; the tabs stretch - // to fill it (items-stretch is the flex default) so each tab's bottom border sits - // flush with the bottom edge of the toolbar. Colors use the semantic --docs-* - // tokens so they flip in dark mode (the legacy dark rule in _docs-theme.scss only - // covers the old `pulumi-chooser > ul` tabs, not this toolbar). + // Height comes from the label's padding; the tabs stretch to fill it so each + // tab's bottom border sits flush with the toolbar's bottom edge. .chooser-toolbar { @apply -mx-4 mb-4 flex justify-between gap-2 px-4; @@ -140,13 +131,9 @@ pulumi-chooser { } } - // Code units inside a choosable carry their spacing on the wrapper (not the inner - // pre, nor the example-program footer) and collapse it at the edges of the - // choosable's content so the card padding isn't doubled: only child → no margin, - // first → bottom only, last → top only, middle → both (the first/last resets on a - // symmetric margin cover all four). A .example-program (code + GitHub footer) is - // one such unit. The choosable component wraps slotted content in its own
- // (class "active" when selected), so the units live one level below the choosable. + // Code units (.highlight / .example-program) carry their spacing on the + // wrapper and collapse it at the choosable's edges so the card padding isn't + // doubled (first → bottom only, last → top only). pre { @apply mb-0; } @@ -164,24 +151,21 @@ pulumi-chooser { } } - // A paragraph or list directly above already supplies a bottom margin, so drop the - // unit's top margin there to avoid a doubled gap. + // A paragraph/list above already supplies bottom margin; drop the unit's top + // margin to avoid a doubled gap. pulumi-choosable > div > :is(p, ul, ol) + .highlight, pulumi-choosable > div > :is(p, ul, ol) + .example-program { @apply mt-0; } - // The footer's own bottom margin would fight the unit margin above; drop it so the - // .example-program wrapper is the single source of the unit's trailing space. + // Drop the footer's bottom margin so the .example-program wrapper is the sole + // source of the unit's trailing space. pulumi-choosable .example-program-footer { @apply mb-0; } - // Example programs are self-contained code panels (code + GitHub footer): run - // them flush to the card edges rather than double-padding them. These choosers - // only ever contain .example-program blocks (never loose prose), so dropping the - // card padding is safe; overflow-hidden clips the panel's square corners back to - // the card radius and zeroing the trailing margin keeps it tight to the edge. + // Example-program-only choosers: run the panel flush to the card edges (drop + // card padding; overflow-hidden clips the square corners to the card radius). &:has(> .example-program) { @apply px-0 pb-0; diff --git a/theme/src/scss/docs/_code-light.scss b/theme/src/scss/docs/_code-light.scss index a481dc9e47c4..e4e8f0e31ff1 100644 --- a/theme/src/scss/docs/_code-light.scss +++ b/theme/src/scss/docs/_code-light.scss @@ -1,29 +1,12 @@ -// =========================================================================== -// Min Light code theme — /docs light mode only -// --------------------------------------------------------------------------- -// The global code theme (theme/src/scss/_chroma.scss) is Min Dark on a Violet -// 950 background, and stays the default everywhere. This file is its light-mode -// counterpart: the Min Light theme (miguelsolorio/min-theme) on a Violet 50 -// (#f5f5ff) background, per the Pulumi brand "Code highlighting" guideline. -// -// It is the mirror of the dark block in _docs-theme.scss. Where that block is -// gated on `html[data-theme="dark"] body.section-docs`, this one is gated on -// `html:not([data-theme="dark"]) body.section-docs` — i.e. docs pages whose -// effective theme is light (no data-theme attribute is written pre-paint unless -// dark is effective). Combined with `body.section-docs` it cannot affect any -// non-docs page, and in docs dark mode it yields to the Min Dark default. -// -// Imported UNLAYERED from main.scss (after docs-theme) so it beats the layered -// _chroma.scss / _code.scss / _copy-button.scss component rules. -// -// One deviation from faithful Min Light: comments are bumped from the theme's -// #c2c3c5 (APCA Lc 27 on violet-50 — unreadable) to #6e7781 (Lc 66). Everything -// else is the canonical Min Light palette. -// =========================================================================== +// Min Light code theme for /docs light mode — the light-mode counterpart to the +// global Min Dark theme (_chroma.scss), on a Violet 50 background per the Pulumi +// brand "Code highlighting" guideline. Mirror of the dark block in +// _docs-theme.scss: gated on `html:not([data-theme="dark"]) body.section-docs`, +// imported unlayered so it beats the layered component rules. Comments are bumped +// from Min Light's #c2c3c5 (unreadable on violet-50) to #6e7781; the rest is the +// canonical palette. html:not([data-theme="dark"]) body.section-docs { - // --- Surface + base text ----------------------------------------------- - // _code.scss paints `pre` violet-950 with light (text-gray-400) text; flip - // both to the Min Light surface and foreground. + // Flip the dark code surface + text (set in _chroma.scss / _code.scss). pre { background: var(--color-violet-50); color: #212121; @@ -129,13 +112,9 @@ html:not([data-theme="dark"]) body.section-docs { .gs { font-weight: bold; color: #cd3131; } } - // --- Copy button (docs-light variant of the consolidated style) --------- - .copy-button-container { - border-color: var(--color-gray-200); - - &:hover { - background: var(--color-violet-100); - } + // Copy button: dark icon + faint hover on the light panel. + .copy-button-container:hover { + background: var(--color-violet-100); } .copy-button { @@ -146,7 +125,7 @@ html:not([data-theme="dark"]) body.section-docs { } } - // --- example-program footer (bottom lip of the code panel) -------------- + // example-program footer (the code panel's bottom lip). .example-program .example-program-footer { background: var(--color-violet-50); @@ -159,7 +138,7 @@ html:not([data-theme="dark"]) body.section-docs { } } - // --- code-tabbed (interactive multi-language demo) ---------------------- + // code-tabbed (interactive multi-language demo). .code-tabbed { .code-tabbed-tabs, .code-tabbed-content, diff --git a/theme/src/scss/docs/_docs-theme.scss b/theme/src/scss/docs/_docs-theme.scss index 3816ee8b1341..53cd928dd06d 100644 --- a/theme/src/scss/docs/_docs-theme.scss +++ b/theme/src/scss/docs/_docs-theme.scss @@ -434,10 +434,8 @@ html[data-theme="dark"] body.section-docs { } } - // New language toolbar tabs: the unlayered `*` border reset below would otherwise - // paint their underlines with --docs-border (beating the layered component styles - // regardless of specificity). Re-assert here: inactive matches the toolbar surface, - // active is the violet link color. + // Language toolbar tabs: re-assert the underline colors (inactive = surface, + // active = link) so the unlayered `*` border reset below doesn't override them. .chooser-toolbar > ul li { border-bottom-color: var(--docs-surface); @@ -614,9 +612,8 @@ html[data-theme="dark"] body.section-docs { } } - // The copy button is a transparent ghost chip (see _copy-button.scss) that - // reads correctly on the dark violet-950 panel as-is, so dark mode needs no - // override — the docs-light variant lives in docs/_code-light.scss. + // The copy button is a transparent ghost chip (see _copy-button.scss); it reads + // fine on the dark panel as-is, so dark mode needs no override here. // Masked chrome icons (nav toggles, TOC chevron + "On this page" glyph) bake // a fixed-color SVG behind a mask; drop the image and tint the mask so they diff --git a/theme/src/scss/main.scss b/theme/src/scss/main.scss index 17d170c014c0..696954daa074 100644 --- a/theme/src/scss/main.scss +++ b/theme/src/scss/main.scss @@ -387,11 +387,8 @@ $sitenav-offset: calc($sitenav-height + 16px); // cannot affect any non-docs page. @import "docs/docs-theme"; -// Min Light code theme for /docs light mode. Imported UNLAYERED (like docs-theme -// above) so it beats the layered _chroma.scss / _code.scss / _copy-button.scss -// component rules. Scoped to `html:not([data-theme="dark"]) body.section-docs`, -// so it only applies to docs pages in light mode and yields to the Min Dark -// default everywhere else (and in docs dark mode). +// Min Light code theme for /docs light mode. Unlayered (like docs-theme above) so +// it beats the layered component rules; scoped + documented in the partial. @import "docs/code-light"; // Auth-aware header swap. The inline script in head.html adds .is-signed-in diff --git a/theme/src/ts/copybutton.ts b/theme/src/ts/copybutton.ts index 68786fc077dc..8ec0500fa16d 100644 --- a/theme/src/ts/copybutton.ts +++ b/theme/src/ts/copybutton.ts @@ -102,7 +102,7 @@ function addCopyButton(container: HTMLElement) { ""; var buttonHtml = '
' + - " " + + ' ' + ' " + ' ' + tooltipText + diff --git a/theme/stencil/src/components/chooser/chooser.tsx b/theme/stencil/src/components/chooser/chooser.tsx index 2efbe72f6e17..e86554611156 100644 --- a/theme/stencil/src/components/chooser/chooser.tsx +++ b/theme/stencil/src/components/chooser/chooser.tsx @@ -22,10 +22,9 @@ export interface SupportedLanguage { name: string; extension: string; logo: string; - // Optional dark-mode logo variant. Set only for languages whose light logo - // doesn't read on a dark background (e.g. YAML's black wordmark). When - // present, the toolbar emits both images and the docs theme's - // .docs-logo-light/.docs-logo-dark CSS swaps them on dark docs pages. + // Optional dark-mode logo variant, for languages whose light logo doesn't read + // on a dark background (e.g. YAML's black wordmark). Swapped via the docs + // theme's .docs-logo-light/.docs-logo-dark CSS. logoOnDark?: string; preview: boolean; } @@ -288,12 +287,9 @@ export class Chooser { ); } - // The language logo in the toolbar. When the language ships a dark-mode - // variant, emit both images tagged with the docs theme's .docs-logo-light / - // .docs-logo-dark classes: the dark one is hidden everywhere by default and - // revealed only on dark-mode docs pages, so the right logo shows in every - // context (and non-docs pages keep the light one). Languages without a dark - // variant render a single full-color logo that reads on both backgrounds. + // The toolbar language logo. With a dark variant, emit both images tagged + // .docs-logo-light/.docs-logo-dark for the docs theme to swap (the dark one is + // hidden except on dark docs pages); otherwise a single logo. private renderToolbarLogo(lang: SupportedLanguage) { if (lang.logoOnDark) { return [ @@ -486,49 +482,49 @@ export class Chooser { key: "typescript", name: "TypeScript", extension: "ts", - logo: "/logos/tech/typescript.svg", + logo: "/images/docs/icons/languages/typescript-color-32-32.svg", preview: false, }, { key: "javascript", name: "JavaScript", extension: "js", - logo: "/logos/tech/javascript.svg", + logo: "/images/docs/icons/languages/javascript-color-32-32.svg", preview: false, }, { key: "python", name: "Python", extension: "py", - logo: "/logos/tech/python.svg", + logo: "/images/docs/icons/languages/python-color-32-32.svg", preview: false, }, { key: "go", name: "Go", extension: "go", - logo: "/logos/tech/go.svg", + logo: "/images/docs/icons/languages/go-color-32-32.svg", preview: false, }, { key: "csharp", name: "C#", extension: "cs", - logo: "/logos/tech/csharp.svg", + logo: "/images/docs/icons/languages/csharp-color-32-32.svg", preview: false, }, { key: "fsharp", name: "F#", extension: "fs", - logo: "/logos/tech/fsharp.svg", + logo: "/images/docs/icons/languages/fsharp-color-32-32.svg", preview: false, }, { key: "visualbasic", name: "VB", extension: "vb", - logo: "/logos/tech/visualbasic.svg", + logo: "/images/docs/icons/languages/visualbasic-color-32-32.svg", preview: false, }, { @@ -543,9 +539,8 @@ export class Chooser { key: "yaml", name: "YAML", extension: "yaml", - // The matched light/dark pair already used elsewhere in docs (the - // div.yaml-color-32-32 icon); the -on-dark recolor keeps the black - // wordmark legible on dark backgrounds. + // Matched light/dark pair (the -on-dark recolor keeps the black wordmark + // legible on dark). logo: "/images/docs/icons/languages/yaml-color-32-32.svg", logoOnDark: "/images/docs/icons/languages/yaml-color-32-32-on-dark.svg", preview: false, @@ -554,7 +549,7 @@ export class Chooser { key: "opa", name: "OPA", extension: "rego", - logo: "/logos/tech/logo-opa.png", + logo: "/images/docs/icons/languages/opa-color-32-32.png", preview: false, }, ]; diff --git a/theme/stencil/src/components/tooltip/tooltip.tsx b/theme/stencil/src/components/tooltip/tooltip.tsx index 2ff59483bb05..6526962bd0fa 100644 --- a/theme/stencil/src/components/tooltip/tooltip.tsx +++ b/theme/stencil/src/components/tooltip/tooltip.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Host, h, Method, State } from "@stencil/core"; +import { Component, Element, Host, h, Method, Prop, State } from "@stencil/core"; import { getUUID } from "../../util/util"; /** @@ -32,6 +32,11 @@ export class Tooltip { @State() active: boolean; + // Placement relative to the target: "top" (default, above-centered) or "left". + // Reflected so _tooltip.scss can key off [position="left"]. + @Prop({ reflect: true }) + position: "top" | "left" = "top"; + // Show the tooltip. @Method() async show() { From 741c5300d3b58a49c03aa0e7a19fbb1ac667f3c7 Mon Sep 17 00:00:00 2001 From: Jeff Merrick Date: Wed, 8 Jul 2026 15:04:34 -0500 Subject: [PATCH 5/7] Add HCL as a chooser language with a Preview badge - 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 --- .../docs/icons/languages/hcl-color-32-32.svg | 9 +++++++++ .../icons/languages/hcl-wordmark-color-32-32.svg | 9 +++++++++ theme/stencil/src/components/chooser/chooser.tsx | 14 +++++++++++--- 3 files changed, 29 insertions(+), 3 deletions(-) create mode 100644 static/images/docs/icons/languages/hcl-color-32-32.svg create mode 100644 static/images/docs/icons/languages/hcl-wordmark-color-32-32.svg diff --git a/static/images/docs/icons/languages/hcl-color-32-32.svg b/static/images/docs/icons/languages/hcl-color-32-32.svg new file mode 100644 index 000000000000..d7ff7975282e --- /dev/null +++ b/static/images/docs/icons/languages/hcl-color-32-32.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/static/images/docs/icons/languages/hcl-wordmark-color-32-32.svg b/static/images/docs/icons/languages/hcl-wordmark-color-32-32.svg new file mode 100644 index 000000000000..2989b8e86e73 --- /dev/null +++ b/static/images/docs/icons/languages/hcl-wordmark-color-32-32.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/theme/stencil/src/components/chooser/chooser.tsx b/theme/stencil/src/components/chooser/chooser.tsx index e86554611156..9c6fe793d59d 100644 --- a/theme/stencil/src/components/chooser/chooser.tsx +++ b/theme/stencil/src/components/chooser/chooser.tsx @@ -3,7 +3,7 @@ import { store, Unsubscribe } from "@stencil/redux"; import { AppState } from "../../store/state"; import { setLanguage, setK8sLanguage, setOS, setCloud, setPersona, setBackEnd, setPythonToolchain } from "../../store/actions/preferences"; -export type LanguageKey = "javascript" | "typescript" | "python" | "go" | "csharp" | "fsharp" | "visualbasic" | "java" | "yaml" | "opa"; +export type LanguageKey = "javascript" | "typescript" | "python" | "go" | "csharp" | "fsharp" | "visualbasic" | "java" | "yaml" | "hcl" | "opa"; export type K8sLanguageKey = "typescript" | "yaml" | "typescript-kx"; export type OSKey = "macos" | "linux" | "windows"; export type CloudKey = "aws" | "azure" | "gcp" | "kubernetes" | "digitalocean" | "oci" | "docker"; @@ -249,13 +249,14 @@ export class Chooser { render() { // Render the current set of options, marking the selected one active. For // language choosers the button text is the uppercased file extension (e.g. TS, - // PY); every other type keeps rendering the full name and PREVIEW badge as before. + // PY) and the PREVIEW badge lives on the toolbar label, not the tab; every other + // type keeps rendering the full name and the tab PREVIEW badge. const list = (
    {this.currentOptions.map(opt => (
  • this.makeChoice(event, this.type, opt)}> - {this.optionLabel(opt)} {opt.preview ? PREVIEW : ""} + {this.optionLabel(opt)} {opt.preview && this.type !== "language" ? PREVIEW : ""}
    • ))} @@ -545,6 +546,13 @@ export class Chooser { logoOnDark: "/images/docs/icons/languages/yaml-color-32-32-on-dark.svg", preview: false, }, + { + key: "hcl", + name: "HCL", + extension: "hcl", + logo: "/images/docs/icons/languages/hcl-color-32-32.svg", + preview: true, + }, { key: "opa", name: "OPA", From f3b7c76c6b6b4c0c5ebb02b2dfab6fddcecdba15 Mon Sep 17 00:00:00 2001 From: Jeff Merrick Date: Thu, 9 Jul 2026 15:56:54 -0500 Subject: [PATCH 6/7] Chooser refinements: standalone strip, tab fixes, and global-reset bug 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 --- content/docs/iac/concepts/stacks.md | 4 +- theme/src/scss/components/_chooser.scss | 94 ++++++++++++++----- theme/src/scss/docs/_docs-theme.scss | 13 +-- .../src/components/chooser/chooser.e2e.ts | 7 +- .../src/components/chooser/chooser.tsx | 94 ++++++++++++------- 5 files changed, 147 insertions(+), 65 deletions(-) diff --git a/content/docs/iac/concepts/stacks.md b/content/docs/iac/concepts/stacks.md index e8fcdd3a37d3..d7dd288fa2fb 100644 --- a/content/docs/iac/concepts/stacks.md +++ b/content/docs/iac/concepts/stacks.md @@ -393,7 +393,7 @@ Stack outputs respect secret annotations and are encrypted appropriately. If a s To add a README to a stack, export a stack output named `readme` whose value is the rendered markdown — most commonly by reading from a template file checked into your project (for example, `Pulumi.README.md`): -{{< chooser language "typescript,python,go,csharp,java" / >}} +{{< chooser language "typescript,python,go,csharp,java" >}} {{% choosable language typescript %}} @@ -474,6 +474,8 @@ public class App { {{% /choosable %}} +{{< /chooser >}} + The template file can reference other stack outputs (or resource properties) with `${...}` placeholders that Pulumi Cloud resolves when rendering. For example: ```markdown diff --git a/theme/src/scss/components/_chooser.scss b/theme/src/scss/components/_chooser.scss index ac39ec455f59..de7b18cc81ba 100644 --- a/theme/src/scss/components/_chooser.scss +++ b/theme/src/scss/components/_chooser.scss @@ -1,45 +1,43 @@ pulumi-chooser { + // Standard (non-language) chooser: a gray strip of small tabs matching the + // language chooser's toolbar — surface background, rounded top, 1px bottom + // border that the active tab's underline sits on. --docs-* tokens (with + // non-docs fallbacks); the dark rule in _docs-theme.scss re-asserts the + // border colors the unlayered `*` border reset would otherwise override. > ul { - @apply m-0 mb-4 flex; + @apply m-0 mb-4 flex rounded-t-lg; padding: 0 !important; list-style-type: none !important; + background: var(--docs-surface, theme("colors.gray.100")); + border-bottom: 1px solid var(--docs-border, theme("colors.gray.200")); + li { - @apply font-display text-xs p-0 m-0 border-b-2 transition text-center w-full; + @apply font-display text-xs p-0 m-0 border-b-2 border-transparent transition text-center w-full; @include transition; - // --docs-* tokens (with non-docs fallbacks); the legacy dark rule in - // _docs-theme.scss re-asserts the dark hover/active values. - border-bottom-color: var(--docs-surface, theme("colors.gray.50")); - &:hover { border-bottom-color: var(--docs-border, theme("colors.gray.200")); } - @include screen-md { - @apply text-base; - } - &.active { - @include gradient-border; + border-bottom-color: var(--docs-link, var(--color-violet-primary)); a { - color: var(--color-service-black); + color: var(--docs-fg, theme("colors.gray.900")); } } a { - @apply block text-gray-700 cursor-pointer py-2 px-2; + @apply block cursor-pointer py-2 px-3; + + color: var(--docs-fg-muted, theme("colors.gray.600")); span { @apply hidden; } - @include screen-md { - @apply pt-4 pb-3 px-6; - } - @include screen-xl { span { @apply inline; @@ -47,8 +45,8 @@ pulumi-chooser { } &:hover { - @apply text-gray-800; - text-decoration: none !important; // I know. Don't judge me. I promise to come back to it. + color: var(--docs-fg, theme("colors.gray.900")); + text-decoration: none !important; } } @@ -77,12 +75,18 @@ pulumi-chooser { .chooser-toolbar { @apply -mx-4 mb-4 flex justify-between gap-2 px-4; - background: var(--docs-surface, theme("colors.gray.50")); + background: var(--docs-surface, theme("colors.gray.100")); + // On mobile the logo + name label is hidden and the tab row scrolls + // horizontally; from md up the label returns and the tabs right-align. .chooser-toolbar-label { - @apply font-display text-sm font-medium flex items-center gap-2 py-2; + @apply font-display text-sm font-medium hidden items-center gap-2 py-2; color: var(--docs-fg, theme("colors.gray.900")); + + @include screen-md { + @apply flex; + } } .chooser-toolbar-logo { @@ -90,13 +94,17 @@ pulumi-chooser { } > ul { - @apply m-0 flex flex-wrap justify-end; + @apply m-0 flex w-full flex-nowrap justify-start overflow-x-auto; padding: 0 !important; list-style-type: none !important; + @include screen-md { + @apply w-auto flex-wrap justify-end overflow-x-visible; + } + li { - @apply font-display text-xs flex p-0 m-0 border-b-2 border-transparent transition; + @apply font-display text-xs flex flex-none p-0 m-0 border-b-2 border-transparent transition; @include transition; &:hover { @@ -164,6 +172,46 @@ pulumi-chooser { @apply mb-0; } + // Standalone choosers (self-closing shortcode form; the choosables are + // siblings on the page, not slotted children): there's no content to card, + // so drop the card chrome and render the toolbar as a flat control strip + // with a single bottom border, which the active tab's underline sits on. + &:not(:has(pulumi-choosable)) { + @apply pb-0 rounded-b-none; + + background: transparent; + border: none; + + .chooser-toolbar { + @apply mb-0; + + //background: transparent; + border-bottom: 1px solid var(--docs-border, theme("colors.gray.200")); + } + } + + // Code-only choosers (every choosable holds exactly one code block and + // nothing else): run the code flush to the card edges, like example-program + // choosers. The pair of :has() conditions means "some choosable has a lone + // .highlight, and none has anything more". CSS can't see bare text nodes, + // so a choosable mixing loose text with a code block still counts as + // code-only — keep prose in real elements (

    ) inside choosables. + &:has(pulumi-choosable > div > .highlight:only-child):not(:has(pulumi-choosable > div > :not(.highlight:only-child))) { + @apply px-0 pb-0; + + .chooser-toolbar { + @apply mx-0 mb-0; + } + + pulumi-choosable > div > .highlight { + @apply rounded-none; + + pre { + @apply rounded-none mb-0; + } + } + } + // Example-program-only choosers: run the panel flush to the card edges (drop // card padding; overflow-hidden clips the square corners to the card radius). &:has(> .example-program) { diff --git a/theme/src/scss/docs/_docs-theme.scss b/theme/src/scss/docs/_docs-theme.scss index 53cd928dd06d..165cef22fd86 100644 --- a/theme/src/scss/docs/_docs-theme.scss +++ b/theme/src/scss/docs/_docs-theme.scss @@ -408,13 +408,14 @@ html[data-theme="dark"] body.section-docs { } } - // --- Language chooser + tabs (active indicator uses the shared - // gradient-border violet-primary, too dark for the dark surface) ------- + // --- Chooser tabs: re-assert the underline colors (inactive = transparent, + // hover = border, active = link) so the unlayered `*` border reset below + // doesn't override them. --------------------------------------------- pulumi-chooser > ul li { - border-color: var(--docs-border); + border-bottom-color: transparent; &:hover { - border-color: var(--color-gray-400); + border-bottom-color: var(--docs-border); } a { @@ -434,10 +435,10 @@ html[data-theme="dark"] body.section-docs { } } - // Language toolbar tabs: re-assert the underline colors (inactive = surface, + // Language toolbar tabs: re-assert the underline colors (inactive = transparent, // active = link) so the unlayered `*` border reset below doesn't override them. .chooser-toolbar > ul li { - border-bottom-color: var(--docs-surface); + border-bottom-color: transparent; &:hover { border-bottom-color: var(--docs-border); diff --git a/theme/stencil/src/components/chooser/chooser.e2e.ts b/theme/stencil/src/components/chooser/chooser.e2e.ts index 746e0adfaa12..0779e281d4b8 100644 --- a/theme/stencil/src/components/chooser/chooser.e2e.ts +++ b/theme/stencil/src/components/chooser/chooser.e2e.ts @@ -14,7 +14,7 @@ describe("pulumi-chooser", () => { it("renders a language chooser as a toolbar with a logo label and abbreviated tabs", async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent(``); const element = await page.find("pulumi-chooser"); expect(element).toHaveClass("hydrated"); @@ -27,10 +27,11 @@ describe("pulumi-chooser", () => { const logo = await element.find(".chooser-toolbar-logo"); expect(logo).not.toBeNull(); - // The tabs show uppercased file-extension abbreviations, not full names. + // The tabs show uppercased file-extension abbreviations (or the tabLabel + // override, e.g. C#), not full names. const items = await element.findAll(".chooser-toolbar ul > li a"); const labels = items.map(item => item.textContent.trim()); - expect(labels).toEqual(["TS", "PY", "GO"]); + expect(labels).toEqual(["TS", "PY", "GO", "C#"]); }); it("renders a non-language chooser as plain name tabs with no toolbar", async () => { diff --git a/theme/stencil/src/components/chooser/chooser.tsx b/theme/stencil/src/components/chooser/chooser.tsx index 9c6fe793d59d..752259b00f36 100644 --- a/theme/stencil/src/components/chooser/chooser.tsx +++ b/theme/stencil/src/components/chooser/chooser.tsx @@ -26,6 +26,9 @@ export interface SupportedLanguage { // on a dark background (e.g. YAML's black wordmark). Swapped via the docs // theme's .docs-logo-light/.docs-logo-dark CSS. logoOnDark?: string; + // Optional tab label, for languages whose uppercased extension isn't the + // natural short name (e.g. C# rather than CS). + tabLabel?: string; preview: boolean; } @@ -195,32 +198,24 @@ export class Chooser { } = state; // In some cases, the user's preferred (i.e., most recently selected) choice - // may not be available as an option. When that happens, we switch into local - // mode and choose the first available option, to make sure at least one - // choosable item is always visible. + // may not be available as an option. When that happens, we display the + // first available option instead -- without writing anything back to the + // global store: a chooser that's merely missing an option must not clobber + // the page-wide selection. (It used to dispatch a reset here, which made + // every chooser on the page snap back to this one's default whenever you + // picked a language it didn't offer.) The fallback is display-only and we + // stay subscribed, so the moment a supported option is chosen anywhere on + // the page, this chooser follows it again. The choosables this chooser + // controls are flipped to local mode so they render the fallback too (left + // global, they'd all hide, since none matches the unavailable preference); + // from then on they mirror this chooser's selection via applyChoice. const preferredOrDefault = (key: ChooserKey) => { if (!this.currentOptions.find(o => o.key === key)) { - const defaultChoice = this.currentOptions[0]; - key = defaultChoice.key; - - if (this.choosables.length > 0) { - this.mode = "local"; - - // Tell the children of this chooser they're local now, too. - this.choosables.forEach(choosable => { - choosable.setAttribute("mode", "local"); - }); - - // In local mode, there's no need to listen for store updates anymore, - // so we unsubscribe. - if (this.storeUnsubscribe) { - this.storeUnsubscribe(); - } - } else { - // This is a global chooser with (presumably) on-page choosables, - // so we need to dispatch an event to reset the selected language. - this.setChoice(this.type, defaultChoice); - } + key = this.currentOptions[0].key; + + this.choosables.forEach(choosable => { + choosable.setAttribute("mode", "local"); + }); } return { selection: key }; }; @@ -301,18 +296,51 @@ export class Chooser { return ; } - // The text shown on a chooser tab. For languages we use the uppercased file - // extension (TS, PY, GO, …) so 7+ options fit on one row; everything else uses the - // full option name. + // The text shown on a chooser tab. For languages we use the tabLabel override if + // set, otherwise the uppercased file extension (TS, PY, GO, …) so 7+ options fit + // on one row; everything else uses the full option name. private optionLabel(opt: ChooserOption): string { - const ext = (opt as SupportedLanguage).extension; - return ext ? ext.toUpperCase() : opt.name; + const lang = opt as SupportedLanguage; + if (lang.tabLabel) { + return lang.tabLabel; + } + return lang.extension ? lang.extension.toUpperCase() : opt.name; } - // The choosable elements of this chooser, if any. + // The choosable elements this chooser controls: its choosable children if it has + // any, otherwise the on-page choosables that follow it (see adoptedChoosables). // Only returns choosables that match this chooser's type. - private get choosables() { - return this.el.querySelectorAll(`pulumi-choosable[type="${this.type}"]`); + private get choosables(): Element[] { + const children = Array.from(this.el.querySelectorAll(`pulumi-choosable[type="${this.type}"]`)); + return children.length > 0 ? children : this.adoptedChoosables; + } + + // Standalone choosers (the self-closing shortcode form) render no choosable + // children -- their content follows them on the page, driven by the global store. + // Adopt that content: every top-level choosable of this type after this chooser + // in document order, up to the next visible top-level chooser of this type. + // Headless (option-style="none") choosers are inline helper widgets, not section + // boundaries, so they don't end the walk. Adoption is what lets a standalone + // chooser fall back locally when the preferred option is missing, instead of + // resetting the global preference. + private get adoptedChoosables(): Element[] { + const scan = Array.from( + document.querySelectorAll(`pulumi-chooser[type="${this.type}"]:not([option-style="none"]), pulumi-choosable[type="${this.type}"]`), + ).filter(el => el === this.el || !(el.parentElement && el.parentElement.closest("pulumi-chooser"))); + + const start = scan.indexOf(this.el); + if (start === -1) { + return []; + } + + const adopted: Element[] = []; + for (let i = start + 1; i < scan.length; i++) { + if (scan[i].tagName === "PULUMI-CHOOSER") { + break; + } + adopted.push(scan[i]); + } + return adopted; } // Convert inbound options lists into ChooserKeys, so they can be converted into @@ -511,6 +539,7 @@ export class Chooser { key: "csharp", name: "C#", extension: "cs", + tabLabel: "C#", logo: "/images/docs/icons/languages/csharp-color-32-32.svg", preview: false, }, @@ -518,6 +547,7 @@ export class Chooser { key: "fsharp", name: "F#", extension: "fs", + tabLabel: "F#", logo: "/images/docs/icons/languages/fsharp-color-32-32.svg", preview: false, }, From 4ff5aab14813fc60adb241cff81a392e10f20cde Mon Sep 17 00:00:00 2001 From: Jeff Merrick Date: Thu, 9 Jul 2026 16:02:01 -0500 Subject: [PATCH 7/7] Use brand blue for note-info callouts instead of violet Co-Authored-By: Claude Fable 5 --- theme/src/scss/_notes.scss | 10 +++++----- theme/src/scss/docs/_docs-theme.scss | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/theme/src/scss/_notes.scss b/theme/src/scss/_notes.scss index 048762246ada..1839891a1231 100644 --- a/theme/src/scss/_notes.scss +++ b/theme/src/scss/_notes.scss @@ -71,23 +71,23 @@ } &.note-info { - background: var(--color-violet-background); + background: var(--color-blue-background); a, i { - color: var(--color-violet-primary); + color: var(--color-blue-primary); } div.icon-and-line svg.ph-icon { - color: var(--color-violet-primary); + color: var(--color-blue-primary); } div.line { - background-color: var(--color-violet-muted); + background-color: var(--color-blue-muted); } :not(pre) > code { - background-color: var(--color-violet-muted); + background-color: var(--color-blue-muted); } } diff --git a/theme/src/scss/docs/_docs-theme.scss b/theme/src/scss/docs/_docs-theme.scss index 9a34798ce6c5..60e3431bc3c6 100644 --- a/theme/src/scss/docs/_docs-theme.scss +++ b/theme/src/scss/docs/_docs-theme.scss @@ -176,7 +176,7 @@ html[data-theme="dark"] body.section-docs { // gated on `html[data-theme="dark"] body.section-docs`, so the light source in // _notes.scss, _tables.scss, _card.scss, _breadcrumb.scss, _docs-home.scss, // components/*, etc. is never touched and light mode is unchanged. Callout hues -// keep their light identity in dark (info=violet, tip=green, warning=orange), +// keep their light identity in dark (info=blue, tip=green, warning=orange), // each mapped to the brand's 950 background / 300 accent steps. // =========================================================================== html[data-theme="dark"] body.section-docs { @@ -187,23 +187,23 @@ html[data-theme="dark"] body.section-docs { } &.note-info { - background: var(--color-violet-950); + background: var(--color-blue-950); a, i { - color: var(--color-violet-300); + color: var(--color-blue-300); } div.icon-and-line svg.ph-icon { - color: var(--color-violet-300); + color: var(--color-blue-300); } div.line { - background-color: var(--color-violet-300); + background-color: var(--color-blue-300); } code { - background-color: color-mix(in oklch, var(--color-violet-300) 22%, transparent); + background-color: color-mix(in oklch, var(--color-blue-300) 22%, transparent); } }