Adding recipes and overriding on definePreset does not work

[margauxflores]

Hello guys! First of all, thank you for all your hard work for Park UI.

So I'm trying to create a shared component library based on Park UI and PandaCSS (obviously 😅) and replacing a previous design-system we had. I'm using tsup to build my package and I managed to get it working. Basically, my file structure looks something like this:

.
├── apps
│   └── console
│       ├── app
│       │   └── src
│       │       └── layout.tsx
│       └── panda.config.ts
└── packages
    └── design-system
        ├── src
        │   ├── components
        │   │   └── ui
        │   │       └── button.tsx
        │   ├── themes
        │   │   ├── tokens
        │   │   │   ├── colors.ts
        │   │   │   └── index.ts
        │   │   └── slot-recipes
        │   │       ├── sidebar.ts
        │   │       └── index.ts
        │   └── index.tsx
        ├── preset.ts
        ├── panda.config.ts
        ├── tsup.config.ts
        └── park-ui.json

Here are my configurations: colors.ts

import { defineSemanticTokens } from "@pandacss/dev";

export const colors = defineSemanticTokens({
  colors: {
    accent: {
      1: { value: "#FDFDFD" }, // Your custom value
      2: { value: "#EEF4FF" },
      3: { value: "#E0EAFF" },
      4: { value: "#C7D8FE" },
      5: { value: "#A4BDFD" },
      6: { value: "#8098F9" },
      7: { value: "#6274F2" },
      8: { value: "#535AE8" },
      9: { value: "#373BCB" },
      10: { value: "#2D3382" },
      11: { value: "#2D3382" },
      12: { value: "#1B1D4B" },
      default: { value: "#535AE8" }, // Override ParkUI’s default accent color
    },
  },
});

design-system/preset.ts

import { definePreset } from "@pandacss/dev";
import { createPreset } from "@park-ui/panda-preset";
import { colors } from "./src/theme/tokens/colors";
import recipes from "./src/theme/recipes";
import slotRecipes from "./src/theme/slot-recipes";

export const designSystemPreset = definePreset({
  presets: [
    "@pandacss/preset-base",
    "@park-ui/panda-preset",
    createPreset({
      grayColor: "neutral",
      borderRadius: "sm",
      additionalColors: [
        "amber",
        "cyan",
        "purple",
        "pink",
        "sand",
        "green",
        "red",
      ],
    }),
  ],
  theme: {
    extend: {
      semanticTokens: {
        colors: {
          ...colors,
        },
      },
      slotRecipes,
      recipes: {
        ...recipes,
        button: {
          variants: {
            variant: {
              solid: {
                color: "white",
                _hover: { color: "white", _dark: { color: "black" } },
              },
            },
          },
        },
      },
    },
  },
});

Note: slotRecipe is coming from the slot-recipe folder with an index.ts that looks something like this:

import { collapseSwitch } from "./collapseSwitch";
import { sidebar } from "./sidebar";

const slotRecipes = {
  collapseSwitch,
  sidebar,
};

export default slotRecipes;

Here are the panda configs.

design-system/panda.config.ts

import { defineConfig } from "@pandacss/dev";
import { designSystemPreset } from "./preset";

export default defineConfig({
  presets: [designSystemPreset],
  // Other configurations specific to your design system
  preflight: true,
  jsxFramework: "react",
  include: ["./src/**/*.{js,jsx,ts,tsx}"],
  exclude: [],
  outdir: "styled-system", // Output directory for generated files
  importMap: "@tailor-inc/design-system", // Map imports to your package name
});

console/panda.config.ts

import { defineConfig } from "@pandacss/dev";

import { designSystemPreset } from "@tailor-inc/design-system/preset";

export default defineConfig({
  presets: [designSystemPreset],
  preflight: true,
  jsxFramework: "react",
  include: [
    "./node_modules/@tailor-platform/design-systems/dist/panda.buildinfo.json",
    "./src/**/*.{ts,tsx}", // Your app source files
  ],
  importMap: "@tailor-inc/styled-system", // Match your styled-system package
  outdir: "@tailor-inc/styled-system/design-system", // Output directory
});

For some reason, everything that I put on theme: { extend : {} } does not get reflected on my Next.js app even with everything working.

Am I missing something? I tried moving the extend to console/panda.config.ts and I managed to get it working there, but I would really like it to work from the design-system package level cause then I'd have to add the recipes and semantic token overrides to every application that will be using this design-system which kind of defeats the purpose of having a shared component library.

[margauxflores]

Update: I moved preset.ts to the src folder and it didn't seem to affect anything.

[margauxflores]

Update again: I managed to get the recipes working from preset and I have tried to isolate the colors issue by directly adding the value to the values to definePreset({}) but it's still not overriding the accent color.

preset.ts

import { definePreset } from "@pandacss/dev";
import { createPreset } from "@park-ui/panda-preset";
import recipes from "./theme/recipes";
import slotRecipes from "./theme/slot-recipes";

export const designSystemPreset = definePreset({
  presets: [
    "@pandacss/preset-base",
    "@park-ui/panda-preset",
    createPreset({
      grayColor: "neutral",
      borderRadius: "sm",
      additionalColors: [
        "amber",
        "cyan",
        "purple",
        "pink",
        "sand",
        "green",
        "red",
      ],
    }),
  ],
  theme: {
    extend: {
      semanticTokens: {
        colors: {
          accent: {
            1: {
              value: {
                base: "#535AE8",
                _dark: "#535AE8",
              },
            },
            default: {
              value: {
                base: "#535AE8",
                _dark: "#535AE8",
              },
            },
          },
          bg: {
            body: {
              value: {
                base: "#FFF",
                _dark: "#000",
              },
            },
          },
        },
      },
      slotRecipes,
      recipes: {
        ...recipes,
        button: {
          variants: {
            variant: {
              solid: {
                color: "white",
                _hover: { color: "white", _dark: { color: "black" } },
              },
            },
          },
        },
      },
    },
  },
});