feat(*): redesign park ui preset (#470)

components/react/panda.config.ts

@@ -1,15 +1,12 @@
 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({ additionalColors: ['red', 'green', 'blue'] })],
-  include: ['./src/**/*.{js,jsx,ts,tsx}'],
-  jsxFramework: 'react',
+  presets: [createPreset({ accentColor: amber, grayColor: sand, radius: 'sm' })],
+  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
+  jsxFramework: 'react', // or solid or vue
   outdir: 'styled-system',
-  staticCss: {
-    recipes: {
-      input: ['*'],
-    },
-  },
 })

components/solid/panda.config.ts

@@ -1,15 +1,12 @@
 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({ additionalColors: ['red', 'green', 'blue'] })],
-  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  presets: [createPreset({ accentColor: amber, grayColor: sand, radius: 'sm' })],
+  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
   jsxFramework: 'solid',
   outdir: 'styled-system',
-  staticCss: {
-    recipes: {
-      input: ['*'],
-    },
-  },
 })

components/vue/panda.config.ts

@@ -1,9 +1,11 @@
 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()],
+  presets: [createPreset({ accentColor: amber, grayColor: sand, radius: 'sm' })],
   include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
   jsxFramework: 'vue',
   outdir: 'styled-system',

packages/panda/CHANGELOG.md

@@ -6,6 +6,46 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Changed
+
+- Removed the `accent` color concept. Components now use the built-in `colorPalette` prop for color customization. Learn more about the virtual color concept [here](https://panda-css.com/docs/concepts/virtual-color).
+
+```diff
+- <Text color="accent.default">Park UI</Text>
++ <Text color="colorPalette.default">Park UI</Text>
+```
+
+- Enhanced consistency and scalability by refining the Park UI Preset setup in the Panda configuration. [Learn more in the docs](https://park-ui.com/react/docs/theme/customize).
+
+
+```diff
+ 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',
+ })
+```
+
 ## [0.42.0] - 2024-08-01
 
 ### Added

packages/panda/package.json

@@ -6,59 +6,80 @@
   "author": "Christian Schröter <[email protected]> (https://cschroeter.net/)",
   "homepage": "https://park-ui.com",
   "license": "MIT",
-  "repository": "https://github.com/cschroeter/park-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cschroeter/park-ui.git",
+    "directory": "packages/panda"
+  },
   "bugs": {
     "url": "https://github.com/cschroeter/park-ui/issues"
   },
-  "files": ["dist", "src"],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "postinstall": "bun run build",
     "build": "tsup",
     "release-it": "release-it",
     "lint": "biome lint ./src",
-    "test": "bun test",
-    "prepack": "clean-package",
-    "postpack": "clean-package restore",
+    "test": " bun test",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@ark-ui/anatomy": "3.5.0",
-    "@radix-ui/colors": "3.0.0",
-    "ts-pattern": "5.5.0"
+    "effect": "3.10.13"
   },
   "devDependencies": {
     "@pandacss/dev": "0.47.0",
     "@release-it/keep-a-changelog": "5.0.0",
-    "clean-package": "2.2.0",
     "release-it": "17.10.0",
     "tsup": "8.3.5"
   },
   "peerDependencies": {
     "@pandacss/dev": ">0.22.0"
   },
-  "clean-package": {
-    "replace": {
-      "main": "dist/index.js",
-      "module": "dist/index.mjs",
-      "types": "dist/index.d.ts",
-      "exports": {
-        ".": {
-          "types": "./dist/index.d.ts",
-          "import": "./dist/index.mjs",
-          "require": "./dist/index.js"
-        },
-        "./package.json": "./package.json"
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./utils": {
+      "import": {
+        "types": "./dist/utils/index.d.ts",
+        "default": "./dist/utils/index.js"
+      },
+      "require": {
+        "types": "./dist/utils/index.d.cts",
+        "default": "./dist/utils/index.cjs"
+      }
+    },
+    "./colors/*": {
+      "import": {
+        "types": "./dist/colors/*.d.ts",
+        "default": "./dist/colors/*.js"
+      },
+      "require": {
+        "types": "./dist/colors/*.d.cts",
+        "default": "./dist/colors/*.cjs"
       }
     }
   },
   "tsup": {
-    "entry": ["src/index.ts"],
+    "entry": ["src/index.ts", "src/colors/*.ts", "src/utils/index.ts"],
     "clean": true,
     "dts": true,
     "sourcemap": true,
     "format": ["esm", "cjs"]
-  },
-  "main": "src/index.ts"
+  }
 }

packages/panda/src/colors/amber.ts

@@ -0,0 +1,92 @@
+import { defineSemanticTokens, defineTokens } from '@pandacss/dev'
+
+const tokens = defineTokens.colors({
+  light: {
+    '1': { value: '#fefdfb' },
+    '2': { value: '#fefbe9' },
+    '3': { value: '#fff7c2' },
+    '4': { value: '#ffee9c' },
+    '5': { value: '#fbe577' },
+    '6': { value: '#f3d673' },
+    '7': { value: '#e9c162' },
+    '8': { value: '#e2a336' },
+    '9': { value: '#ffc53d' },
+    '10': { value: '#ffba18' },
+    '11': { value: '#ab6400' },
+    '12': { value: '#4f3422' },
+    a1: { value: '#c0800004' },
+    a2: { value: '#f4d10016' },
+    a3: { value: '#ffde003d' },
+    a4: { value: '#ffd40063' },
+    a5: { value: '#f8cf0088' },
+    a6: { value: '#eab5008c' },
+    a7: { value: '#dc9b009d' },
+    a8: { value: '#da8a00c9' },
+    a9: { value: '#ffb300c2' },
+    a10: { value: '#ffb300e7' },
+    a11: { value: '#ab6400' },
+    a12: { value: '#341500dd' },
+  },
+  dark: {
+    '1': { value: '#16120c' },
+    '2': { value: '#1d180f' },
+    '3': { value: '#302008' },
+    '4': { value: '#3f2700' },
+    '5': { value: '#4d3000' },
+    '6': { value: '#5c3d05' },
+    '7': { value: '#714f19' },
+    '8': { value: '#8f6424' },
+    '9': { value: '#ffc53d' },
+    '10': { value: '#ffd60a' },
+    '11': { value: '#ffca16' },
+    '12': { value: '#ffe7b3' },
+    a1: { value: '#e63c0006' },
+    a2: { value: '#fd9b000d' },
+    a3: { value: '#fa820022' },
+    a4: { value: '#fc820032' },
+    a5: { value: '#fd8b0041' },
+    a6: { value: '#fd9b0051' },
+    a7: { value: '#ffab2567' },
+    a8: { value: '#ffae3587' },
+    a9: { value: '#ffc53d' },
+    a10: { value: '#ffd60a' },
+    a11: { value: '#ffca16' },
+    a12: { value: '#ffe7b3' },
+  },
+})
+const semanticTokens = defineSemanticTokens.colors({
+  '1': { value: { _light: '{colors.amber.light.1}', _dark: '{colors.amber.dark.1}' } },
+  '2': { value: { _light: '{colors.amber.light.2}', _dark: '{colors.amber.dark.2}' } },
+  '3': { value: { _light: '{colors.amber.light.3}', _dark: '{colors.amber.dark.3}' } },
+  '4': { value: { _light: '{colors.amber.light.4}', _dark: '{colors.amber.dark.4}' } },
+  '5': { value: { _light: '{colors.amber.light.5}', _dark: '{colors.amber.dark.5}' } },
+  '6': { value: { _light: '{colors.amber.light.6}', _dark: '{colors.amber.dark.6}' } },
+  '7': { value: { _light: '{colors.amber.light.7}', _dark: '{colors.amber.dark.7}' } },
+  '8': { value: { _light: '{colors.amber.light.8}', _dark: '{colors.amber.dark.8}' } },
+  '9': { value: { _light: '{colors.amber.light.9}', _dark: '{colors.amber.dark.9}' } },
+  '10': { value: { _light: '{colors.amber.light.10}', _dark: '{colors.amber.dark.10}' } },
+  '11': { value: { _light: '{colors.amber.light.11}', _dark: '{colors.amber.dark.11}' } },
+  '12': { value: { _light: '{colors.amber.light.12}', _dark: '{colors.amber.dark.12}' } },
+  a1: { value: { _light: '{colors.amber.light.a1}', _dark: '{colors.amber.dark.a1}' } },
+  a2: { value: { _light: '{colors.amber.light.a2}', _dark: '{colors.amber.dark.a2}' } },
+  a3: { value: { _light: '{colors.amber.light.a3}', _dark: '{colors.amber.dark.a3}' } },
+  a4: { value: { _light: '{colors.amber.light.a4}', _dark: '{colors.amber.dark.a4}' } },
+  a5: { value: { _light: '{colors.amber.light.a5}', _dark: '{colors.amber.dark.a5}' } },
+  a6: { value: { _light: '{colors.amber.light.a6}', _dark: '{colors.amber.dark.a6}' } },
+  a7: { value: { _light: '{colors.amber.light.a7}', _dark: '{colors.amber.dark.a7}' } },
+  a8: { value: { _light: '{colors.amber.light.a8}', _dark: '{colors.amber.dark.a8}' } },
+  a9: { value: { _light: '{colors.amber.light.a9}', _dark: '{colors.amber.dark.a9}' } },
+  a10: { value: { _light: '{colors.amber.light.a10}', _dark: '{colors.amber.dark.a10}' } },
+  a11: { value: { _light: '{colors.amber.light.a11}', _dark: '{colors.amber.dark.a11}' } },
+  a12: { value: { _light: '{colors.amber.light.a12}', _dark: '{colors.amber.dark.a12}' } },
+  default: { value: { _light: '{colors.amber.light.9}', _dark: '{colors.amber.dark.9}' } },
+  emphasized: { value: { _light: '{colors.amber.light.10}', _dark: '{colors.amber.dark.10}' } },
+  fg: { value: { _light: '{colors.gray.light.12}', _dark: '{colors.gray.light.12}' } },
+  text: { value: { _light: '{colors.amber.light.a11}', _dark: '{colors.amber.dark.a11}' } },
+})
+
+export default {
+  name: 'amber',
+  tokens,
+  semanticTokens,
+}

packages/panda/src/colors/blue.ts

@@ -0,0 +1,93 @@
+import { defineSemanticTokens, defineTokens } from '@pandacss/dev'
+
+const tokens = defineTokens.colors({
+  light: {
+    '1': { value: '#fbfdff' },
+    '2': { value: '#f4faff' },
+    '3': { value: '#e6f4fe' },
+    '4': { value: '#d5efff' },
+    '5': { value: '#c2e5ff' },
+    '6': { value: '#acd8fc' },
+    '7': { value: '#8ec8f6' },
+    '8': { value: '#5eb1ef' },
+    '9': { value: '#0090ff' },
+    '10': { value: '#0588f0' },
+    '11': { value: '#0d74ce' },
+    '12': { value: '#113264' },
+    a1: { value: '#0080ff04' },
+    a2: { value: '#008cff0b' },
+    a3: { value: '#008ff519' },
+    a4: { value: '#009eff2a' },
+    a5: { value: '#0093ff3d' },
+    a6: { value: '#0088f653' },
+    a7: { value: '#0083eb71' },
+    a8: { value: '#0084e6a1' },
+    a9: { value: '#0090ff' },
+    a10: { value: '#0086f0fa' },
+    a11: { value: '#006dcbf2' },
+    a12: { value: '#002359ee' },
+  },
+  dark: {
+    '1': { value: '#0d1520' },
+    '2': { value: '#111927' },
+    '3': { value: '#0d2847' },
+    '4': { value: '#003362' },
+    '5': { value: '#004074' },
+    '6': { value: '#104d87' },
+    '7': { value: '#205d9e' },
+    '8': { value: '#2870bd' },
+    '9': { value: '#0090ff' },
+    '10': { value: '#3b9eff' },
+    '11': { value: '#70b8ff' },
+    '12': { value: '#c2e6ff' },
+    a1: { value: '#004df211' },
+    a2: { value: '#1166fb18' },
+    a3: { value: '#0077ff3a' },
+    a4: { value: '#0075ff57' },
+    a5: { value: '#0081fd6b' },
+    a6: { value: '#0f89fd7f' },
+    a7: { value: '#2a91fe98' },
+    a8: { value: '#3094feb9' },
+    a9: { value: '#0090ff' },
+    a10: { value: '#3b9eff' },
+    a11: { value: '#70b8ff' },
+    a12: { value: '#c2e6ff' },
+  },
+})
+const semanticTokens = defineSemanticTokens.colors({
+  '1': { value: { _light: '{colors.blue.light.1}', _dark: '{colors.blue.dark.1}' } },
+  '2': { value: { _light: '{colors.blue.light.2}', _dark: '{colors.blue.dark.2}' } },
+  '3': { value: { _light: '{colors.blue.light.3}', _dark: '{colors.blue.dark.3}' } },
+  '4': { value: { _light: '{colors.blue.light.4}', _dark: '{colors.blue.dark.4}' } },
+  '5': { value: { _light: '{colors.blue.light.5}', _dark: '{colors.blue.dark.5}' } },
+  '6': { value: { _light: '{colors.blue.light.6}', _dark: '{colors.blue.dark.6}' } },
+  '7': { value: { _light: '{colors.blue.light.7}', _dark: '{colors.blue.dark.7}' } },
+  '8': { value: { _light: '{colors.blue.light.8}', _dark: '{colors.blue.dark.8}' } },
+  '9': { value: { _light: '{colors.blue.light.9}', _dark: '{colors.blue.dark.9}' } },
+  '10': { value: { _light: '{colors.blue.light.10}', _dark: '{colors.blue.dark.10}' } },
+  '11': { value: { _light: '{colors.blue.light.11}', _dark: '{colors.blue.dark.11}' } },
+  '12': { value: { _light: '{colors.blue.light.12}', _dark: '{colors.blue.dark.12}' } },
+  a1: { value: { _light: '{colors.blue.light.a1}', _dark: '{colors.blue.dark.a1}' } },
+  a2: { value: { _light: '{colors.blue.light.a2}', _dark: '{colors.blue.dark.a2}' } },
+  a3: { value: { _light: '{colors.blue.light.a3}', _dark: '{colors.blue.dark.a3}' } },
+  a4: { value: { _light: '{colors.blue.light.a4}', _dark: '{colors.blue.dark.a4}' } },
+  a5: { value: { _light: '{colors.blue.light.a5}', _dark: '{colors.blue.dark.a5}' } },
+  a6: { value: { _light: '{colors.blue.light.a6}', _dark: '{colors.blue.dark.a6}' } },
+  a7: { value: { _light: '{colors.blue.light.a7}', _dark: '{colors.blue.dark.a7}' } },
+  a8: { value: { _light: '{colors.blue.light.a8}', _dark: '{colors.blue.dark.a8}' } },
+  a9: { value: { _light: '{colors.blue.light.a9}', _dark: '{colors.blue.dark.a9}' } },
+  a10: { value: { _light: '{colors.blue.light.a10}', _dark: '{colors.blue.dark.a10}' } },
+  a11: { value: { _light: '{colors.blue.light.a11}', _dark: '{colors.blue.dark.a11}' } },
+  a12: { value: { _light: '{colors.blue.light.a12}', _dark: '{colors.blue.dark.a12}' } },
+
+  default: { value: { _light: '{colors.blue.light.9}', _dark: '{colors.blue.dark.9}' } },
+  emphasized: { value: { _light: '{colors.blue.light.10}', _dark: '{colors.blue.dark.10}' } },
+  fg: { value: { _light: 'white', _dark: 'white' } },
+  text: { value: { _light: '{colors.blue.light.a11}', _dark: '{colors.blue.dark.a11}' } },
+})
+
+export default {
+  name: 'blue',
+  tokens,
+  semanticTokens,
+}