Issues customizing theme

[kaumac]

Hey @cschroeter !

Continuing on the topic of customizing themes, I started venturing into customizing the park-ui/panda theme using the colors of my project.

The problem is that when I use createPreset({ accentColor: 'myCustomColor' }) for example, typescript complains that I can only use the original color names from PandaCSS. Is this correct?

I then tried createPreset({ accentColor: 'blue' }) and this works, but only if I use the original blue color palette from Panda.

If I try to change the blue palette from Panda then it stops working and I get black instead of blue.

Ideally I'd like to have a custom color palette (In my case I named it "enterprise") and set that as the accentColor for park-ui. But if that doesn't work I'd be ok with overriding the blue palette from panda.

Here's my code: panda.config.ts:

import { createPreset } from '@park-ui/panda-preset'

import beesideTheme from '@/theme'

export default defineConfig({
    // Whether to use css reset
    preflight: true,

    theme: {
      extend: {
        tokens: {
          ...beesideTheme
        }
      }
    },

    presets: [
      '@pandacss/preset-base',
      createPreset({
        accentColor: 'enterprise',
        grayColor: 'sand',
        borderRadius: 'md'
      }),
    ],

    // Where to look for your css declarations
    include: ["./src/components/**/*.{ts,tsx,js,jsx}", "./src/app/**/*.{ts,tsx,js,jsx}"],

    // Files to exclude
    exclude: [],

    jsxFramework: 'react',

    // The output directory for your css system
    outdir: "styled-system",

})

theme file (imported on panda config):

import colors from './colors'

export const theme = {
  colors: { ...colors }
}

export default theme

colors file (used on the theme file):

export const enterprise = { 
  value: '#27399A',
  25: { value: '#F8F9FF' },
  50: { value: '#F4F6FF' },
  100: { value: '#EFF2FE' },
  200: { value: '#DBE0FB' },
  300: { value: '#AAB6F4' },
  400: { value: '#6A7EE8' },
  500: { value: '#27399A' },
  600: { value: '#172573' },
  700: { value: '#101B58' },
  800: { value: '#0C1547' },
  900: { value: '#040924' }
}

export const colors = {
  enterprise: {...enterprise},
  primary: {...enterprise},
  blue: {...enterprise}
}

export default colors

[kaumac]

I found another bug related to this...

If I add the park-ui preset like this:

createPreset({
        accentColor: 'blue',
        grayColor: 'sand',
        borderRadius: 'md'
      }),

Then I can't access "nested" tokens anymore. If I do <Text color="blue.300"> while using the park-ui preset, it doesn't work. But <Text color="blue"> works (it applies blue 500).

If I remove the park-ui preset, both color="blue" and color="blue.300" works.

Any ideas?

----- Update -------

This doesn't happen only with a custom preset using createPreset, even if I use @park-ui/panda-preset I get the same behavior. Weird stuff...

[kaumac]

Any news on this? I'm working on a new commercial app and wanted to use park-ui, but this is a huge blocker 🙁

cc @cschroeter

[cschroeter]

@kaumac

Sorry for the delayed response. I'm kinda burried in the Ark UI 1.0 launch. The good news is that what you like to achieve is possible.

With @park-ui/panda-prest 0.19.0 we start using the radix colors system. Those colors work a bit different than the Panda / Tailwind default colors. So instead having colors ranging from 50 to 950 instead they gro from 1 to 12. You can read more about it here https://www.radix-ui.com/colors

The cool part is that for example blue.5 is already an semantic token matching in light to #C2E5FF and in dark to #004074

So this line <Text color="blue.5">I'm a bluish text</Text> will change its color depneding on the color mode. So in short to add a new color that follow this spec you will need to do sth like:

export const indigo = {
  1: { value: { base: '{colors.indigo.light.1}', _dark: '{colors.indigo.dark.1}' } },
  // ...
  12: {}
 }

But before you start sweating the cool part about Park UI it does not directly use this colors. So you don't really need to provide a full blown accent color instead you can simply override the main semantic tokens:

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  theme: {
    extend: {
      tokens: {
        colors: {
          coral: {
            50: { value: '#fef2ea' },
            // etc..
          },
        },
      },
      semanticTokens: {
        colors: {
          accent: {
            default: { value: { base: '{colors.coral.500}', _dark: '{colors.coral.500}' } },
            emphasized: { value: { base: '{colors.coral.600}', _dark: '{colors.coral.600}' } },
            fg: { value: { base: '{colors.white}', _dark: '{colors.white}' } },
          },
          fg: {
            default: {
              value: { base: '{colors.grayPalette.900}', _dark: '{colors.grayPalette.100}' },
            },
          },
          border: {
            accent: { value: { base: '{colors.coral.500}', _dark: '{colors.coral.500}' } },
          },
        },
      },
    },
  },
})

[kaumac]

Thanks for taking the time to reply @cschroeter , and I totally get it that there's a lot going on with the panda/ark ecosystem right now so no worries!

I'll do a fresh install and try it using the radix color system.

I have 3 new questions regarding this: 1) Do I understand correctly that the panda color system doesn't work anymore altogether when using park-ui? Or will the panda color palette still work if I use the radix color names?

2) If I want to extend the theme and add my own colors, do I do it on panda.config.ts using the extend option and use the radix naming scheme? Or is there a different way to add new colors? Because I couldn't use the new colors when using park-ui.

3) Is there a documentation somewhere for the semantic tokens used by park-ui?

Thanks again for the help!

[kaumac]

Okay, so after playing around with this for a bit, I now understand that the panda colors are not used anymore and those are replaced with Radix colors (which is nice by the way, I'll use that convention for my project colors).

Couldn't find a place where I can see the names of the semantic tokens so that I can customize them though. For now I'm inspecting the elements and checking their css variable names to use as a reference, but a documentation would be awesome.

[cschroeter]

I have extended the documentations quite extensively. Feel free to create a new issue if something is unclear.

[kaumac]

Fantastic work @cschroeter! I'm sure it'll be super useful for new users of park-ui. Thanks again for the hard work! 😄