[Hackathon] Consume @pulumi/design-tokens for Tailwind v4 theme

[kimberleyamackenzie]

Summary

• Adds @pulumi/design-tokens v0.2.1 as a theme dependency
• Replaces ~150 lines of hand-maintained color definitions in _theme.scss with the shared PDS-generated Tailwind v4 @theme block
• Keeps site-specific tokens locally (xl breakpoint at 1270px, nav-desktop breakpoint, background image)

Context

pulumi.com/docs already migrated to Tailwind v4 with PDS-aligned colors. This PR wires those values to the canonical source in pulumi/pulumi-design-system so token updates propagate from one repo.

Test plan

• Sass compilation of main.scss succeeds with @pulumi/design-tokens/scss/tailwind-v4/theme
• Compiled CSS contains expected tokens (--color-gray-800: #56535a, --color-violet-primary: #5a30c5)
• Full make build-assets / CI green
• Visual smoke test on docs home, marketing page, and brand colors

Dependencies

Requires pulumi/pulumi-design-system tagged v0.2.1 (already published).

Notes

• No intentional visual changes — same hex values, now sourced from PDS SCSS maps
• Legacy salmon/fuchsia/purple scales remain removed (unchanged from current master)
• Registry migration is a follow-up (Phase 3)

Made with Cursor

[github-actions]

Pre-merge Review — Last updated 2026-06-23T17:03:51Z

Tip

Summary: This is a build/theme infrastructure change: it replaces the inlined Tailwind v4 @theme color and typography tokens in theme/src/scss/_theme.scss with an import of the shared @pulumi/design-tokens package (github:pulumi/pulumi-design-system#v0.2.1), keeping only the site-specific extensions (the xl/nav-desktop breakpoints and the top-right background image). It also adds the package dependency to package.json/yarn.lock and a loadPaths entry to the webpack Sass config so the @import resolves from node_modules. The risk that would matter here is a token regression — the imported package must supply every token the deleted block defined (the full color scales, semantic role tokens, fonts, the smaller breakpoints, --shadow-3xl, --leading-extra-tight, --default-font-feature-settings); a missing token would surface as a styling break across the site. That depends on the package contents and the compiled Sass, which the lint and build-and-deploy jobs exercise rather than this review. The dependency reference and pinned commit were verified against the upstream pulumi/pulumi-design-system repo.

Review confidence:

Dimension	Level	Notes
mechanics	MEDIUM	Diff is internally consistent, but token parity with the imported package and the compiled CSS aren't exercised here — the lint and build jobs cover that.
facts	HIGH

Investigation log

• Cross-sibling reads: not run (not in a templated section)
• External claim verification: 3 of 3 claims verified (0 unverifiable, 0 contradicted) · 4 specialists (numerical, cross-reference, capability, framing); 0 cross-specialist corroborations · routed: 0 inline, 3 Pass 1, 0 Pass 2, 0 Pass 3.
• Cited-claim spot-checks: not run (no cited claims)
• Frontmatter sweep: not run (no frontmatter in diff)
• Temporal-trigger sweep: not run (no trigger words)
• Code execution: not run (no static/programs/ change)
• Code-examples checks: not run (no fenced code blocks in content files)
• Editorial-balance pass: not run (not under content/blog/)

🚨 Outstanding	⚠️ Low-confidence	💡 Pre-existing	✅ Resolved
0	0	0	0

🔍 Verification trail

3 claims extracted · 3 verified · 0 unverifiable · 0 contradicted

• L8 in theme/package.json "'@pulumi/design-tokens': 'github:pulumi/pulumi-design-system#v0.2.1'," → ✅ verified (evidence: The theme/package.json file at L8 contains exactly "@pulumi/design-tokens": "github:pulumi/pulumi-design-system#v0.2.1", and the tag v0.2.1 exists in the pulumi/pulumi-design-system repo (SHA: `fc0d37d6fb0374e347e6902c59bfac5c1c27e…; source: repo:theme/package.json; gh api repos/pulumi/pulumi-design-system/git/refs/tags/v0.2.1)
• L368 in theme/yarn.lock "'@pulumi/design-tokens@github:pulumi/pulumi-design-system#v0.2.1':" → ✅ verified (evidence: The GitHub API confirms that tag v0.2.1 exists in the pulumi/pulumi-design-system repository (ref: refs/tags/v0.2.1, sha: fc0d37d6fb0374e347e6902c59bfac5c1c27e4fc), matching the yarn.lock entry `@pulumi/design-tokens@github:pulumi/…; source: gh api repos/pulumi/pulumi-design-system/git/refs/tags)
• L370 in theme/yarn.lock "resolved 'https://codeload.github.com/pulumi/pulumi-design-system/tar.gz/fc0d37d6fb0374e347e6902c59bfac5c1c27e4fc'" → ✅ verified (evidence: The commit fc0d37d6fb0374e347e6902c59bfac5c1c27e4fc exists in pulumi/pulumi-design-system (SHA confirmed via GitHub API), authored by Kimberley Mackenzie on 2026-06-23 with message "Add Tailwind v4 @theme generated from PDS color maps.…; source: gh api repos/pulumi/pulumi-design-system/commits/fc0d37d6fb0374e347e6902c59bfac5c1c27e4fc)

🚨 Outstanding in this PR

No outstanding findings in this PR.

⚠️ Low-confidence

No low-confidence findings.

💡 Pre-existing issues in touched files (optional)

No pre-existing issues in touched files.

✅ Resolved since last review

No items resolved since the last review.

📜 Review history

• 2026-06-23T17:03:51Z — Infra/theme refactor to consume @pulumi/design-tokens; no blockers, all 3 dependency claims verified against the upstream repo (f027f26)

---

Need a re-review? Want to dispute a finding? Mention @claude and include #update-review.
(For ad-hoc questions or fixes, just @claude — no hashtag.)

[pulumi-bot]

Your site preview for commit d3ec810 is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-19823-d3ec8107.s3-website.us-west-2.amazonaws.com

[pulumi-bot]

Lighthouse Performance Report

Commit: d3ec810 | Metric definitions

Page	Device	Score	FCP	LCP	TBT	CLS	SI
Homepage	Mobile	🟡 59	3.0s	4.5s	700ms	0.077	3.8s
Homepage	Desktop	🟡 83	0.8s	1.1s	233ms	0.042	2.8s
Install Pulumi	Mobile	🟡 58	5.4s	7.5s	127ms	0.001	8.0s
Install Pulumi	Desktop	🟡 82	1.3s	1.9s	0ms	0.013	2.9s
AWS Get Started	Mobile	🟡 58	5.1s	7.7s	95ms	0.066	7.7s
AWS Get Started	Desktop	🟡 83	1.3s	1.7s	0ms	0.023	2.9s