@park-ui/[email protected]

Changed

• Color Tokens: The accent color concept has been removed. Components now rely on the built-in
  colorPalette prop for color customization. This change aligns with how Panda CSS envisions the
  use of its virtual color system..

Previously, color tokens were organized like this:

colorPalette.1  
 └── accent.1  
 └── amber.1  
 ├── amber.light.1  
 └── amber.dark.1

The accent layer was unnecessary and has been removed:

colorPalette.1  
 └── amber.1  
 ├── amber.light.1  
 └── amber.dark.1

Here's how this change impacts usage:

- <Box color="accent.default" />
+ <Box color="colorPalette.default" />

• Improved consistency and scalability by refining the Park UI Preset setup in the Panda
  configuration. Learn more in the docs.

 import { defineConfig } from '@pandacss/dev'

```diff
 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'

 export default defineConfig({
   preflight: true,
   presets: [
-    '@pandacss/preset-base',
     createPreset({
-      accentColor: 'amber',
-      grayColor: 'sand',
-      borderRadius: 'sm',
+      accentColor: amber,
+      grayColor: sand,
+      radius: 'sm',
     }),
   ],
   include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
   jsxFramework: 'react', // or 'solid' or 'vue'
   outdir: 'styled-system',
 })