REOPEN: missing accent colours without `additionalColors`

[maclong9]

You should not have to add crimson to the additionalColors field if you have declared crimson as your accent color.

Your config should look like this and crimson should be available:

import { defineConfig } from '@pandacss/dev';
import { createPreset } from '@park-ui/panda-preset';

export default defineConfig({
  presets: [
    '@pandacss/preset-base',
    createPreset({
      accentColor: 'crimson',
      // additionalColors: ['crimson'], <-- if you have to do this, please re-open the issue
    }),
  ],
})

See I thought this and that's what my original issue was about, it works fine if I have additionalColors: ['*']

Otherwise

- [tokens]: Missing token: `colors.crimson.9` used in `config.semanticTokens.colors.accent.default`
- [tokens]: Missing token: `colors.crimson.10` used in `config.semanticTokens.colors.accent.emphasized`
- [tokens]: Missing token: `colors.crimson.a11` used in `config.semanticTokens.colors.accent.text`

With configuration:

import { defineConfig } from "@pandacss/dev";
import { createPreset } from '@park-ui/panda-preset'

export default defineConfig({
  preflight: true,
  presets: [
      '@pandacss/preset-base',
      createPreset({
        accentColor: 'crimson',
        grayColor: 'neutral',
    }),
  ],
  include: ["./app/**/*.{js,jsx,ts,tsx}"],
  exclude: [],
  jsxFramework: "react",
  outdir: "styled-system",
});

Originally posted by @mac-codes9 in https://github.com/cschroeter/park-ui/issues/228#issuecomment-1937769793

[lee-reinhardt]

Chiming in to say I ran into this yesterday too after updating.

My accentColor and grayColor were not automatically included. I had to redundantly list them in the additionalColors array.

This config

export default defineConfig({
  preflight: true,
  presets: [
    '@pandacss/preset-base',
    createPreset({
      grayColor: 'slate',
      accentColor: 'indigo',
      borderRadius: 'sm'
    })
  ],
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  jsxFramework: 'react',
  outdir: 'styled-system',
  theme: { ... },
  staticCss: { ... }
})

results in these errors

 ○ Compiling / ...
🐼 warn [config] ⚠️ Invalid config:
- [tokens]: Missing token: `colors.slate.9` used in `config.semanticTokens.colors.gray.default`
- [tokens]: Missing token: `colors.slate.10` used in `config.semanticTokens.colors.gray.emphasized`
- [tokens]: Missing token: `colors.slate.12` used in `config.semanticTokens.colors.gray.text`
- [tokens]: Missing token: `colors.indigo.9` used in `config.semanticTokens.colors.accent.default`
- [tokens]: Missing token: `colors.indigo.10` used in `config.semanticTokens.colors.accent.emphasized`
- [tokens]: Missing token: `colors.indigo.a11` used in `config.semanticTokens.colors.accent.text`

Adding them fixes it.

additionalColors: ['slate', 'indigo'],

"@ark-ui/react": "2.0.2",
"@pandacss/dev": "0.30.2",
"@park-ui/panda-preset": "0.34.0",

[cschroeter]

@lee-reinhardt @lee-reinhardt

Fixed in 0.34.1

See Panda Nextjs example: https://stackblitz.com/github/cschroeter/park-ui/tree/main/examples/panda/react/next-js?file=panda.config.ts

[maclong9]

@cschroeter absolutely beautiful, thank you!

[asterikx]

@cschroeter I still get this error in 0.34.1:

🐼 warn [config] ⚠️ Invalid config:
- [tokens] Missing token: `colors.white` used in `config.semanticTokens.colors.indigo.fg`
- [tokens] Missing token: `colors.white` used in `config.semanticTokens.colors.slate.fg`
- [tokens] Missing token: `colors.white` used in `config.semanticTokens.colors.gray.fg`
- [tokens] Missing token: `colors.white` used in `config.semanticTokens.colors.accent.fg`
- [tokens] Missing token: `colors.white` used in `config.semanticTokens.colors.bg.default`

My config looks like this (I'm not using white anywhere in it):

    presets: [
        '@pandacss/preset-base',
        createPreset({
            accentColor: 'indigo',
            grayColor: 'slate',
            borderRadius: 'sm',
        }),
    ],