feat: includeColors to make the themes lightweight

src/colors/generateColors.ts

@@ -1,12 +1,12 @@
 import type { Recursive, Token } from '@pandacss/types'
 import * as radixColors from '@radix-ui/colors'
-import { type RequireDarkForeground, requireDarkForeground } from '@/types.js'
+import { type BrandColor, type Color, type RequireDarkForeground, requireDarkForeground } from '@/types.js'
 
-const generateColors = () => {
+const generateColors = (include?: Color[]) => {
   const colors: Recursive<Token<string>> = {}
   for (const [key, value] of Object.entries(radixColors)) {
     const colorName = /([a-z]*)/.exec(key)?.[1] as keyof typeof radixColors
-    // if (colorName === 'default' || !colorName) continue
+    if (include !== undefined && !include.includes(colorName as BrandColor)) continue
     const newColor: Recursive<Token<string>> = {}
     const isAlpha = key.endsWith('A')
     const isP3 = key.includes('P3')

src/index.ts

@@ -4,24 +4,26 @@ import generateNeutralColor from '@/colors/generateNeutralColor.js'
 import buttonRecipe from '@/recipes/button.js'
 import { detailsRecipe } from '@/recipes/details.js'
 import inputRecipe from '@/recipes/input.js'
-import type { BrandColor, ColorVariation, NeutralColor } from '@/types.js'
+import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types.js'
 import generateSemanticColors from './colors/generateSemanticColors.js'
 
-export type themeConfig = {
+export type ThemeConfig = {
   neutral?: NeutralColor
   semanticColors?: Record<string, BrandColor>
   colorVariation?: ColorVariation
+  includeColors?: Color[]
 }
 
-const defaultConfig: Required<themeConfig> = {
+const defaultConfig: Required<ThemeConfig> = {
   neutral: 'slate',
   colorVariation: { dark: false, p3: false, alpha: false },
-  semanticColors: { primary: 'teal' }
+  semanticColors: { primary: 'teal' },
+  includeColors: color
 }
 
-const srJuggernautPandaPreset = (config?: themeConfig) => {
+const srJuggernautPandaPreset = (config?: ThemeConfig) => {
   const mergedConfig = { ...defaultConfig, ...config }
-  const colors = generateColors()
+  const colors = generateColors(config?.includeColors)
   const neutral = generateNeutralColor(mergedConfig.neutral, mergedConfig.colorVariation)
   const semanticColors = generateSemanticColors(mergedConfig.semanticColors, mergedConfig.colorVariation)
   return definePreset({

src/types.ts

@@ -32,6 +32,10 @@ export const neutralColor = ['gray', 'mauve', 'slate', 'sage', 'olive', 'sand']
 
 export type NeutralColor = (typeof neutralColor)[number]
 
+export const color = [...brandColor, ...neutralColor]
+
+export type Color = BrandColor | NeutralColor
+
 export type ColorVariation = {
   dark?: boolean
   p3?: boolean