#508 - Added in code to support additionalColors preset option.

.gitignore

@@ -43,5 +43,3 @@ dist
 
 
 .turbo
-.astro
-styled-system

components/react/package.json

@@ -3,29 +3,29 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "prepare": "panda codegen --silent",
     "dev": "bun run storybook",
     "lint": "biome lint ./src",
     "storybook": "storybook dev -p 6006",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@ark-ui/react": "5.6.0",
-    "@pandacss/dev": "0.48.0",
+    "@ark-ui/react": "5.7.0",
+    "@pandacss/dev": "0.53.4",
     "@park-ui/panda-preset": "workspace:*",
-    "@storybook/addon-a11y": "8.4.6",
-    "@storybook/addon-essentials": "8.4.6",
-    "@storybook/addon-themes": "8.4.6",
-    "@storybook/react-vite": "8.4.6",
-    "@storybook/react": "8.4.6",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.4",
-    "lucide-react": "0.462.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "storybook": "8.4.6",
-    "typescript": "5.7.2",
+    "@storybook/addon-a11y": "8.6.12",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/addon-themes": "8.6.12",
+    "@storybook/react-vite": "8.6.12",
+    "@storybook/react": "8.6.12",
+    "@types/react-dom": "19.1.2",
+    "@types/react": "19.1.2",
+    "@vitejs/plugin-react": "4.4.1",
+    "lucide-react": "0.503.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "storybook": "8.6.12",
+    "styled-system": "workspace:*",
+    "typescript": "5.8.3",
     "vite": "6.0.1",
     "vite-tsconfig-paths": "5.1.3"
   }

components/react/panda.config.ts

@@ -1,12 +1,15 @@
 import { defineConfig } from '@pandacss/dev'
 import { createPreset } from '@park-ui/panda-preset'
-import amber from '@park-ui/panda-preset/colors/amber'
-import sand from '@park-ui/panda-preset/colors/sand'
+import neutral from '@park-ui/panda-preset/colors/neutral'
 
 export default defineConfig({
   preflight: true,
-  presets: [createPreset({ accentColor: amber, grayColor: sand, radius: 'sm' })],
-  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
-  jsxFramework: 'react', // or solid or vue
-  outdir: 'styled-system',
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  importMap: 'styled-system',
+  jsxFramework: 'react',
+  presets: [
+    '@pandacss/preset-panda',
+    createPreset({ accentColor: neutral, grayColor: neutral, radius: 'sm' }),
+  ],
 })

components/solid/package.json

@@ -3,15 +3,14 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "prepare": "panda codegen --silent",
     "dev": "bun run storybook",
     "lint": "biome lint ./src",
     "storybook": "storybook dev -p 6006",
     "typecheck": "tsc"
   },
   "dependencies": {
     "@ark-ui/solid": "5.6.0",
-    "@pandacss/dev": "0.48.0",
+    "@pandacss/dev": "0.53.4",
     "@park-ui/panda-preset": "workspace:*",
     "@storybook/addon-a11y": "8.4.6",
     "@storybook/addon-essentials": "8.4.6",
@@ -23,7 +22,7 @@
     "storybook": "8.4.6",
     "storybook-solidjs": "1.0.0-beta.6",
     "storybook-solidjs-vite": "1.0.0-beta.6",
-    "typescript": "5.7.2",
+    "typescript": "5.8.3",
     "vite": "6.0.1",
     "vite-plugin-solid": "2.11.0",
     "vite-tsconfig-paths": "5.1.3"

components/vue/package.json

@@ -3,7 +3,6 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "prepare": "panda codegen --silent",
     "dev": "bun run storybook",
     "format": "prettier --write './src/**/*.vue'",
     "storybook": "histoire dev",
@@ -12,14 +11,14 @@
   "dependencies": {
     "@ark-ui/vue": "5.6.0",
     "@histoire/plugin-vue": "0.17.17",
-    "@pandacss/dev": "0.48.0",
+    "@pandacss/dev": "0.53.4",
     "@park-ui/panda-preset": "workspace:*",
     "@vitejs/plugin-vue": "5.2.1",
     "@vitejs/plugin-vue-jsx": "4.1.1",
     "histoire": "0.17.17",
     "lucide-vue-next": "0.462.0",
     "prettier": "3.4.1",
-    "typescript": "5.7.2",
+    "typescript": "5.8.3",
     "vite": "6.0.1",
     "vite-tsconfig-paths": "5.1.3",
     "vue": "3.5.13"

package.json

@@ -23,12 +23,16 @@
   "dependencies": {
     "@biomejs/biome": "1.9.4",
     "@types/bun": "1.2.10",
+    "caniuse-lite": "1.0.30001715",
     "lefthook": "1.11.11",
     "turbo": "2.5.1",
     "typescript": "5.8.3",
     "vercel": "41.6.2",
     "vercel-submodules": "1.0.10"
   },
   "packageManager": "[email protected]",
-  "trustedDependencies": ["@park-ui/website"]
+  "trustedDependencies": ["@park-ui/website"],
+  "overrides": {
+    "@pandacss/dev": "0.53.4"
+  }
 }

packages/cli/package.json

@@ -25,7 +25,7 @@
     "@types/node": "22.10.1",
     "@types/yargs": "17.0.33",
     "release-it": "17.10.0",
-    "typescript": "5.7.2"
+    "typescript": "5.8.3"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

packages/panda/package.json → packages/preset/package.json

@@ -30,7 +30,7 @@
     "effect": "3.10.19"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.48.0",
+    "@pandacss/dev": "0.53.4",
     "@release-it/keep-a-changelog": "5.0.0",
     "clean-package": "2.2.0",
     "release-it": "17.10.0",

packages/panda/src/create-preset.ts → packages/preset/src/create-preset.ts

@@ -1,4 +1,4 @@
-import { type SemanticTokens, definePreset } from '@pandacss/dev'
+import { type SemanticTokens, Tokens, definePreset } from '@pandacss/dev'
 import red from './colors/red'
 import type { PresetOptions } from './options'
 import { breakpoints } from './theme/breakpoints'
@@ -12,11 +12,21 @@ import { tokens } from './theme/tokens'
 import { createRadii } from './utils/create-radii'
 
 export const createPreset = (options: PresetOptions) => {
-  const { accentColor, grayColor, radius } = options
+  const { accentColor, grayColor, radius, additionalColors = [] } = options
 
   const standardizeGrayTokens = (tokens: SemanticTokens['colors']) =>
     JSON.parse(JSON.stringify(tokens).replace(new RegExp(grayColor.name, 'g'), 'gray'))
 
+  const addlColorTokens = additionalColors.reduce((acc, color) => {
+    acc[color.name] = color.tokens
+    return acc
+  }, {} as {[name:string]: Tokens['colors']})
+
+  const addlColorSemanticTokens = additionalColors.reduce((acc, color) => {
+    acc[color.name] = color.semanticTokens
+    return acc
+  }, {} as {[name:string]: SemanticTokens['colors']})
+
   return definePreset({
     name: '@park-ui/panda-preset',
     presets: ['@pandacss/preset-base'],
@@ -39,6 +49,7 @@ export const createPreset = (options: PresetOptions) => {
           colors: {
             ...tokens.colors,
             red: red.tokens,
+            ...addlColorTokens,
             gray: grayColor.tokens ?? {},
             [accentColor.name]: accentColor.tokens,
           },
@@ -48,6 +59,7 @@ export const createPreset = (options: PresetOptions) => {
           colors: {
             ...semanticTokens.colors,
             red: red.semanticTokens,
+            ...addlColorSemanticTokens,
             gray: standardizeGrayTokens(grayColor.semanticTokens),
             [accentColor.name]: accentColor.semanticTokens,
           },

packages/panda/src/options.ts → packages/preset/src/options.ts

@@ -10,6 +10,7 @@ export interface PresetOptions {
   accentColor: ColorPalette
   grayColor: ColorPalette
   radius: Radius
+  additionalColors?: ColorPalette[]
 }
 
 export type AccentColor = (typeof accentColors)[number]

packages/styled-system/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "styled-system",
+  "private": true,
+  "scripts": {
+    "prepare": "panda codegen --clean"
+  },
+  "dependencies": {
+    "@pandacss/dev": "0.53.4",
+    "@park-ui/panda-preset": "workspace:*"
+  },
+  "exports": {
+    "./css": {
+      "types": "./dist/css/index.d.ts",
+      "require": "./dist/css/index.mjs",
+      "import": "./dist/css/index.mjs"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "require": "./dist/tokens/index.mjs",
+      "import": "./dist/tokens/index.mjs"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/types/index.mjs",
+      "import": "./dist/types/index.mjs"
+    },
+    "./patterns": {
+      "types": "./dist/patterns/index.d.ts",
+      "require": "./dist/patterns/index.mjs",
+      "import": "./dist/patterns/index.mjs"
+    },
+    "./recipes": {
+      "types": "./dist/recipes/index.d.ts",
+      "require": "./dist/recipes/index.mjs",
+      "import": "./dist/recipes/index.mjs"
+    },
+    "./jsx": {
+      "types": "./dist/jsx/index.d.ts",
+      "require": "./dist/jsx/index.mjs",
+      "import": "./dist/jsx/index.mjs"
+    }
+  }
+}

packages/styled-system/panda.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@pandacss/dev'
+import { createPreset } from '@park-ui/panda-preset'
+import neutral from '@park-ui/panda-preset/colors/neutral'
+
+export default defineConfig({
+  presets: [
+    '@pandacss/preset-panda',
+    createPreset({ accentColor: neutral, grayColor: neutral, radius: 'sm' }),
+  ],
+  preflight: true,
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  outdir: 'dist',
+  jsxFramework: 'react',
+  staticCss: {
+    recipes: '*',
+  },
+})

scripts/package.json

@@ -9,7 +9,7 @@
     "recipes": "bun run src/generators/recipes.ts",
     "postrecipes": "bun biome format --write ../website/public/registry/latest/recipes",
     "colors": "bun run src/generators/colors.ts",
-    "postcolors": "bun biome format --write ../packages/panda/src/colors"
+    "postcolors": "bun biome format --write ../packages/preset/src/colors"
   },
   "dependencies": {
     "@radix-ui/colors": "3.0.0",

scripts/src/generators/colors.ts

@@ -12,7 +12,7 @@ const main = () => {
       const semanticTokens = defineSemanticTokens(color)
 
       fs.writeFileSync(
-        join(process.cwd(), '../packages/panda/src/colors', `${color}.ts`),
+        join(process.cwd(), '../packages/preset/src/colors', `${color}.ts`),
         `import { defineTokens, defineSemanticTokens } from '@pandacss/dev'
 
       const tokens = defineTokens.colors(${JSON.stringify(tokens, null, 0)})

scripts/src/generators/recipes.ts

@@ -7,7 +7,7 @@ import { globby } from 'globby'
  * Reads all the recipes from the theme and generates a JSON file for each recipe.
  */
 const programm = pipe(
-  Effect.promise(() => globby(['../packages/panda/src/theme/recipes/*.ts'])),
+  Effect.promise(() => globby(['../packages/preset/src/theme/recipes/*.ts'])),
   Effect.flatMap((recipes) =>
     Effect.forEach(recipes, (recipe) =>
       pipe(

templates/react/next-js/package.json

@@ -9,21 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ark-ui/react": "5.6.0",
-    "@icons-pack/react-simple-icons": "10.0.0",
-    "lucide-react": "0.452.0",
+    "@ark-ui/react": "5.7.0",
+    "@icons-pack/react-simple-icons": "12.7.0",
+    "lucide-react": "0.503.0",
     "next": "14.2.15",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.46.1",
-    "@park-ui/panda-preset": "0.42.0",
+    "@pandacss/dev": "0.53.4",
+    "@park-ui/panda-preset": "0.43.1",
     "@types/node": "22.7.5",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "eslint": "9.12.0",
     "eslint-config-next": "14.2.15",
-    "typescript": "5.6.3"
+    "typescript": "5.8.3"
   }
 }

templates/solid/solid-start/package.json

@@ -21,9 +21,9 @@
     "vinxi": "0.4.3"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.46.1",
-    "@park-ui/panda-preset": "0.42.0",
-    "typescript": "5.6.3",
+    "@pandacss/dev": "0.53.4",
+    "@park-ui/panda-preset": "0.43.1",
+    "typescript": "5.8.3",
     "vite-tsconfig-paths": "5.0.1"
   }
 }

templates/vue/nuxt/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@ark-ui/vue": "5.6.0",
-    "@pandacss/dev": "0.46.1",
-    "@park-ui/panda-preset": "0.42.0",
+    "@pandacss/dev": "0.53.4",
+    "@park-ui/panda-preset": "0.43.1",
     "@nuxt/kit": "3.13.2",
     "nuxt": "3.13.2",
     "vue": "3.5.12"

website/next.config.mjs

@@ -8,7 +8,7 @@ const nextConfig = {
       '../components/react/src/demos/*',
       '../components/solid/src/demos/*',
       '../components/vue/src/demos/*',
-      '../packages/panda/src/theme/recipes/*',
+      '../packages/preset/src/theme/recipes/*',
     ],
   },
   async redirects() {