docs: update docs for next release

Author: cschroeter

packages/panda/CHANGELOG.md

@@ -6,6 +6,29 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Removed
+
+- **Breaking**: The Park UI Preset no longer includes component recipes. From now on, recipes will be added to your project when you install a component via the CLI, giving you full flexibility to customize them as needed. To migrate, simply reinstall your components using the CLI.
+
+Afterward, update your `panda.config.ts` as follows:
+
+```tsx
+// other imports
+import { recipes, slotRecipes } from '~/theme/recipes'
+
+export default defineConfig({
+  // other configuration
+  theme: {
+    extend: {
+      recipes,
+      slotRecipes,
+    },
+  },
+})
+```
+
+If you run into any issues, check out the updated [getting started guide](https://park-ui.com/react/docs/overview/getting-started#setup-guide).
+
 ## [0.43.1] - 2024-11-23
 
 ### Fixed

website/src/content/pages/overview/getting-started.mdx

@@ -32,15 +32,13 @@ npm install @ark-ui/react
 </Step>
 <Step number="3" title="Install the Panda Presets">
 
-The next package you will need is `@park-ui/panda-preset`. This package contains all the recipes and tokens explicitly
-built for Ark UI's headless components.
+The next package you'll need is `@park-ui/panda-preset`. It extends the Panda Base Preset with advanced color options and opinionated design tokens.
 
 ```bash
 npm install @park-ui/panda-preset -D
 ```
 
-After you've installed the presets, you'll need to add it to your Panda configuration file along with your preferred
-`jsxFramework` like shown below:
+Next, update your Panda config file to include the preset and set your preferred `jsxFramework`, as shown below:
 
 ```tsx multi
 import { defineConfig } from '@pandacss/dev'
@@ -57,7 +55,7 @@ export default defineConfig({
 })
 ```
 
-> Ensure you run `panda codegen` after adding the presets to your Panda configuration file.
+> Don't forget to run `panda codegen` after updating your configuration
 
 </Step>
 <Step number="4" title="Path Aliases">
@@ -89,47 +87,69 @@ export default defineConfig({
 
 </Step>
 
-<Step number="5" title="Adding Components to Your Project">
+<Step number="5" title="Add your first component">
 
-We recommend storing your components in the `~/components/ui` directory.
-Here's an example how a project structure might look like:
-
-```bash
-➜ /src/components/ui/
-  |-- styled/
-  |   |-- utils/
-  |   |   `-- create-style-context.ts
-  |   `-- button.tsx
-  `-- button.tsx
-```
-
-Although you can manually add components, we recommend using the Park UI CLI for efficiency.
-To add a single component, run:
+Use the Park UI CLI to add your first component. For example, to add a button, run:
 
 ```bash
 npx @park-ui/cli components add button
 ```
 
-If a `park-ui.json` file is not found in your project, the CLI will prompt you to set up the configuration by asking:
+If it's your first time running the CLI, you'll be prompted to configure:
 
 ```txt
 - Which JS framework do you use? [React / Solid / Vue]
 - Where would you like to store your components? [./src/components/ui]
+- Where would you like to store your recipes? [./src/theme/recipes]
+```
+
+After adding the button, your folder structure should resemble this:
+
+```bash
+➜ /src/
+  |-- components/
+  |   `-- ui/
+  |       |-- styled/
+  |       |   |-- utils/
+  |       |   |   `-- create-style-context.ts
+  |       |   `-- button.tsx
+  |       `-- button.tsx
+  `-- theme/
+      `-- recipes/
+          |-- button.tsx
+          `-- index.ts
+```
+
+Update the `panda.config.ts` file to include the recipes:
+
+```tsx
+// other imports
+import { recipes, slotRecipes } from '~/theme/recipes'
+
+export default defineConfig({
+  // other configuration
+  theme: {
+    extend: {
+      recipes,
+      slotRecipes,
+    },
+  },
+})
 ```
 
-To add multiple components at once, separate their names with spaces:
+To add multiple components at once, list them separated by spaces:
 
 ```bash
 npx @park-ui/cli components add avatar button card
 ```
 
-To add all available components at once, use the `--all` flag:
+Or use the `--all` flag to install all available components:
 
 ```bash
 npx @park-ui/cli components add --all
 ```
 
-And that's it! Happy hacking! ✌️
+That's it! Happy hacking! ✌️
 
 </Step>
 </Steps>

website/src/content/pages/theme/customize.mdx

@@ -1,16 +1,15 @@
 ---
 id: customize
 title: Customize
-description: Learn how to customize the Park UI Theme
+description: Learn how to customize the Park UI Preset
 ---
 
-Depending on your project's needs, you may want to customize the Park UI theme. This guide will walk you through the
-different ways you can tailor Park UI to fit your brand.
+This guide will walk you through the different ways you can customize Park UI to fit your brand.
 
 ## Presets
 
-Park UI was built with customization in mind. When you integrate the `@park-ui/panda-preset` into your Panda config, it
-lets you adjust features like color palettes and border radii to fit your brand.
+Park UI was built with customization in mind. By adding the `@park-ui/panda-preset` into your Panda configuration,
+you can play with different accent and gray colors and pick a border radii to match your brand.
 
 ```tsx
 import { defineConfig } from '@pandacss/dev'
@@ -38,19 +37,19 @@ export const coral = {
   tokens: defineTokens.colors({
     light: {
       '1': { value: '#fff8f7' },
-      // ...
+      // [2 - 11]
       '12': { value: '#762d25' },
     },
     dark: {
       '1': { value: '#1c1412' },
-      // ...
+      // [2 - 11]
       '12': { value: '#faa19b' },
     },
   }),
 
   semanticTokens: defineSemanticTokens.colors({
     '1': { value: { _light: '{colors.coral.light.1}', _dark: '{colors.coral.dark.1}' } },
-    // ...
+    // [2 - 11]
     '12': { value: { _light: '{colors.coral.light.12}', _dark: '{colors.coral.dark.12}' } },
 
     default: {
@@ -99,7 +98,7 @@ export default defineConfig({
 
 ## Semantic Tokens
 
-Another cool way to customize Park UI is by adjusting
+A powerful way to customize Park UI is by adjusting
 [semantic tokens](https://park-ui.com/docs/panda/theme/semantic-tokens). This is helpful if you want to modify specific
 aspects of the theme, such as the appearance of disabled elements.
 
@@ -127,56 +126,8 @@ export default defineConfig({
 
 > You don't have to use color tokens. You can also use simple color values like `#000` or `black`.
 
-## Recipes
+## Recipes  
 
-To customize or enhance a component's style, you want to extend its recipe. In the example below we're extending the
-`button` recipe to render all buttons in uppercase.
+As of `v0.44`, the `@park-ui/panda-preset` no longer includes component recipes.
+Recipes are now added to your project when you install a component, allowing you to fully customize them as needed.
 
-```tsx
-import { defineConfig } from '@pandacss/dev'
-
-export default defineConfig({
-  // ...
-  theme: {
-    extend: {
-      recipes: {
-        button: {
-          base: {
-            textTransform: 'uppercase',
-          },
-        },
-      },
-    },
-  },
-})
-```
-
-You can also add a completly new variant to a component. The following example demonstrates how to add a `primary`
-variant to the `button` component.
-
-```tsx
-import { defineConfig } from '@pandacss/dev'
-
-export default defineConfig({
-  // ...
-  theme: {
-    extend: {
-      recipes: {
-        button: {
-          variants: {
-            primary: {
-              base: {
-                color: '{colors.white}',
-                // etc...
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-})
-```
-
-Learn more about [recipes](https://panda-css.com/docs/concepts/recipes) and
-[slot recipes](https://panda-css.com/docs/concepts/slot-recipes) at Panda CSS.