From f027f2623b6ebb828c244ea0a000e453b938d0ce Mon Sep 17 00:00:00 2001 From: Kimberley Mackenzie Date: Tue, 23 Jun 2026 10:00:12 -0700 Subject: [PATCH 1/2] Consume design tokens from @pulumi/design-tokens for Tailwind v4 theme. Replace hand-maintained _theme.scss color definitions with the shared PDS-generated @theme block, keeping site-specific breakpoints and assets locally. Co-authored-by: Cursor --- theme/package.json | 1 + theme/src/scss/_theme.scss | 160 ++----------------------------------- theme/webpack.config.js | 1 + theme/yarn.lock | 4 + 4 files changed, 13 insertions(+), 153 deletions(-) diff --git a/theme/package.json b/theme/package.json index 28c448d98757..59191a171193 100644 --- a/theme/package.json +++ b/theme/package.json @@ -5,6 +5,7 @@ "private": true, "license": "Apache-2.0", "dependencies": { + "@pulumi/design-tokens": "github:pulumi/pulumi-design-system#v0.2.1", "@algolia/autocomplete-js": "^1.19.8", "@algolia/autocomplete-plugin-tags": "^1.19.8", "@algolia/autocomplete-theme-classic": "^1.19.8", diff --git a/theme/src/scss/_theme.scss b/theme/src/scss/_theme.scss index 7140a0790017..604eb29c44f4 100644 --- a/theme/src/scss/_theme.scss +++ b/theme/src/scss/_theme.scss @@ -1,155 +1,9 @@ -// v4 CSS-first theme: defines custom properties for colors, fonts, screens, etc. -// Values are sourced from the official Pulumi brand palette. -// -// NOTE: The legacy salmon, fuchsia, and purple color scales have been intentionally removed -@theme { - --color-white: #fff; - --color-black: #000; - --color-service-black: #1f1b21; - --color-transparent: transparent; - - /* Gray */ - --color-gray-50: #fafafa; - --color-gray-100: #efeff0; - --color-gray-200: #e0dfe2; - --color-gray-300: #cbcace; - --color-gray-400: #b3b1b9; - --color-gray-500: #9997a0; - --color-gray-600: #817d8c; - --color-gray-700: #6a6675; - --color-gray-800: #56535a; - --color-gray-900: #46434c; - --color-gray-950: #2e2932; - - /* Yellow */ - --color-yellow-50: #fffbeb; - --color-yellow-100: #fef2c7; - --color-yellow-200: #fde38a; - --color-yellow-300: #fdcf4c; - --color-yellow-400: #fcba23; - --color-yellow-500: #f49709; - --color-yellow-600: #da7205; - --color-yellow-700: #b54f08; - --color-yellow-800: #933d0d; - --color-yellow-900: #723213; - --color-yellow-950: #371d11; - - /* Violet */ - --color-violet-50: #f5f5ff; - --color-violet-100: #ebebff; - --color-violet-200: #dedbff; - --color-violet-300: #c3bdff; - --color-violet-400: #a697fc; - --color-violet-500: #9077f3; - --color-violet-600: #7952e5; - --color-violet-700: #5a30c5; - --color-violet-800: #492e8e; - --color-violet-900: #392960; - --color-violet-950: #231f33; - - /* Blue */ - --color-blue-50: #f5faff; - --color-blue-100: #e5f1ff; - --color-blue-200: #cce4ff; - --color-blue-300: #a3d0ff; - --color-blue-400: #75b5ff; - --color-blue-500: #5296ff; - --color-blue-600: #3c79f6; - --color-blue-700: #1e57eb; - --color-blue-800: #1e47c2; - --color-blue-900: #28448a; - --color-blue-950: #283048; - - /* Red */ - --color-red-50: #fff5f6; - --color-red-100: #ffe0e1; - --color-red-200: #ffc7ca; - --color-red-300: #ff9fa4; - --color-red-400: #ff676e; - --color-red-500: #fb2c36; - --color-red-600: #ee1721; - --color-red-700: #bd141c; - --color-red-800: #96171e; - --color-red-900: #611f22; - --color-red-950: #331f20; - - /* Orange */ - --color-orange-50: #fffaf5; - --color-orange-100: #ffebd1; - --color-orange-200: #fedbb3; - --color-orange-300: #fdbe7c; - --color-orange-400: #fb9746; - --color-orange-500: #f96c0b; - --color-orange-600: #da510b; - --color-orange-700: #b23c0b; - --color-orange-800: #923111; - --color-orange-900: #693420; - --color-orange-950: #33231f; - - /* Green */ - --color-green-50: #f6fdf9; - --color-green-100: #dffce9; - --color-green-200: #b6fbce; - --color-green-300: #84f1ac; - --color-green-400: #4ade80; - --color-green-500: #21c45d; - --color-green-600: #16a249; - --color-green-700: #1c7d41; - --color-green-800: #165a31; - --color-green-900: #1c3f2b; - --color-green-950: #202723; - - /* Semantic: violet-primary (violet-700) */ - --color-violet-primary: #5a30c5; - - /* Semantic palette roles */ - --color-violet-background: #f5f5ff; - --color-violet-muted: #dedbff; - --color-violet-accent: #9077f3; +// v4 CSS-first theme: color and typography tokens from @pulumi/design-tokens. +// Site-specific extensions (breakpoints, assets) are defined below. +@import "@pulumi/design-tokens/scss/tailwind-v4/theme"; - --color-gray-background: #fafafa; - --color-gray-muted: #e0dfe2; - --color-gray-accent: #9997a0; - --color-gray-primary: #6a6675; - - --color-yellow-background: #fffbeb; - --color-yellow-muted: #fde38a; - --color-yellow-accent: #f49709; - --color-yellow-primary: #b54f08; - - --color-blue-background: #f5faff; - --color-blue-muted: #cce4ff; - --color-blue-accent: #5296ff; - --color-blue-primary: #1e57eb; - - --color-red-background: #fff5f6; - --color-red-muted: #ffc7ca; - --color-red-accent: #fb2c36; - --color-red-primary: #bd141c; - - --color-orange-background: #fffaf5; - --color-orange-muted: #fedbb3; - --color-orange-accent: #f96c0b; - --color-orange-primary: #b23c0b; - - --color-green-background: #f6fdf9; - --color-green-muted: #b6fbce; - --color-green-accent: #21c45d; - --color-green-primary: #1c7d41; - - --font-display: Inter, ui-sans-serif, system-ui, sans-serif; - --font-body: Inter, ui-sans-serif, system-ui, sans-serif; - --font-mono: "Monaspace Neon Var", ui-monospace, SFMono-Regular, monospace; - --default-font-feature-settings: "liga" 1, "calt" 1, "cv11" 1; - --breakpoint-sm: 640px; - --breakpoint-md: 768px; - --breakpoint-lg: 1024px; - --breakpoint-xl: 1270px; - --breakpoint-xxl: 1536px; - --breakpoint-nav-desktop: 1345px; - --shadow-3xl: 0 35px 70px -20px rgba(0, 0, 0, 0.5); - --leading-extra-tight: 1.1; - - --background-image-lines-top-right: url("/images/bg-lines-top-right-1.svg"); +@theme { + --breakpoint-xl: 1270px; + --breakpoint-nav-desktop: 1345px; + --background-image-lines-top-right: url("/images/bg-lines-top-right-1.svg"); } - diff --git a/theme/webpack.config.js b/theme/webpack.config.js index 35b4512b8972..c7c48286cfb4 100644 --- a/theme/webpack.config.js +++ b/theme/webpack.config.js @@ -81,6 +81,7 @@ module.exports = function (env, argv = {}) { outputStyle: "compressed", quietDeps: true, silenceDeprecations: ["import", "global-builtin"], + loadPaths: [path.join(__dirname, "node_modules")], }, }, }, diff --git a/theme/yarn.lock b/theme/yarn.lock index 9a0706736700..ee575e407a18 100644 --- a/theme/yarn.lock +++ b/theme/yarn.lock @@ -365,6 +365,10 @@ "@parcel/watcher-win32-ia32" "2.5.4" "@parcel/watcher-win32-x64" "2.5.4" +"@pulumi/design-tokens@github:pulumi/pulumi-design-system#v0.2.1": + version "0.2.1" + resolved "https://codeload.github.com/pulumi/pulumi-design-system/tar.gz/fc0d37d6fb0374e347e6902c59bfac5c1c27e4fc" + "@tailwindcss/node@4.3.0": version "4.3.0" resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.3.0.tgz#9dc5312bf41c48658529f36021e0b466c4eb7860" From d3ec8107f67f221fec32099c5476f39eaf4f10c4 Mon Sep 17 00:00:00 2001 From: Kimberley Mackenzie Date: Tue, 23 Jun 2026 10:25:13 -0700 Subject: [PATCH 2/2] Bump @pulumi/design-tokens to v0.3.1. v0.3.0 layered JSON sources; v0.3.1 fixes SCSS re-export paths for node_modules. Co-authored-by: Cursor --- theme/package.json | 2 +- theme/yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/theme/package.json b/theme/package.json index 59191a171193..6f34c0d7a9b4 100644 --- a/theme/package.json +++ b/theme/package.json @@ -5,7 +5,7 @@ "private": true, "license": "Apache-2.0", "dependencies": { - "@pulumi/design-tokens": "github:pulumi/pulumi-design-system#v0.2.1", + "@pulumi/design-tokens": "github:pulumi/pulumi-design-system#v0.3.1", "@algolia/autocomplete-js": "^1.19.8", "@algolia/autocomplete-plugin-tags": "^1.19.8", "@algolia/autocomplete-theme-classic": "^1.19.8", diff --git a/theme/yarn.lock b/theme/yarn.lock index ee575e407a18..2de89594cbda 100644 --- a/theme/yarn.lock +++ b/theme/yarn.lock @@ -365,9 +365,9 @@ "@parcel/watcher-win32-ia32" "2.5.4" "@parcel/watcher-win32-x64" "2.5.4" -"@pulumi/design-tokens@github:pulumi/pulumi-design-system#v0.2.1": - version "0.2.1" - resolved "https://codeload.github.com/pulumi/pulumi-design-system/tar.gz/fc0d37d6fb0374e347e6902c59bfac5c1c27e4fc" +"@pulumi/design-tokens@github:pulumi/pulumi-design-system#v0.3.1": + version "0.3.1" + resolved "https://codeload.github.com/pulumi/pulumi-design-system/tar.gz/abf6ec84df5d806b4adc3486ed937ec5748121cb" "@tailwindcss/node@4.3.0": version "4.3.0"