expand colorPalette flexibility

[VinSpee]

Description

expand the flexibility of the Virtual Color feature by allowing for un-opinionated nested object definitions

Problem Statement/Justification

Hi! I've been using panda in two large projects. As a former Chakra user and a tailwind tolerator, I was delighted to hop on the panda train as quickly as possible and guide my teams in that direction.

One idea I really like is Virtual Color.

I like to build component libraries in a very flexible way, and a technique I use is to provide aesthetic and color props. In panda, I model it like this:

const config = defineConfig({
	theme: {
		tokens: {
			blue: {
				50: {
					value: 'blue'
				},
				900: {
					value: 'cyan'
				}
			},
			red: {
				50: {
					value: 'red'
				},
				900: {
					value: 'magenta'
				}
			}
		}
	}
});

const buttonRecipe = defineRecipe({
	name: 'button',
	base: {
		…baseProps
	},
	variants: {
		color: {
			blue: {
				colorPalette: 'blue',
			},
			red: {
				colorPalette: 'red',
			}
		},
		aesthetic: {
			solid: {
				backgroundColor: 'colorPalette.50'
				color: 'colorPalette.900'
			}
		}
	}
});

This is straightforward enough.

However, in my current project, we're taking an approach where we lean into semantic tokens, with a theme configuration like so:

const config = defineConfig({
	theme: {
		semanticTokens: {
			core: {
				light: {
					DEFAULT: {
						value: 'blue'
					},
					accent: {
						value: 'cyan'
					}
			},
			brand: {
				light: {
					DEFAULT: {
						value: 'red',
					},
					accent: {
						value: 'magenta'
					}
				}
			}
		}
	}
})

which means I want to define my button like this:

const buttonRecipe = defineRecipe({
	name: 'button',
	base: {
		…baseProps
	},
	variants: {
		color: {
			core: {
				colorPalette: 'core',
			},
			brand: {
				colorPalette: 'brand',
			}
		},
		aesthetic: {
			solid: {
				backgroundColor: 'colorPalette.light'
				color: 'colorPalette.light.accent'
			}
		}
	}
});

This doesn't work.

Proposed Solution or API

I see in the docs that colorPalette requires 50–900 keys.

1. Why does colorPalette have an opinion about its shape?
2. Would it be reasonable to expand the flexibility of Virtual Colors to allow for nested tokens?

Alternatives

• altering my color palette to use 50-900
• not using colorPalette or Virtual Color at all

Additional Information

Here's a failing case: https://play.panda-css.com/XIIQGvJhd9

Thanks for the excellent work on the project – it makes building UIs so fun, and is the most lovely successor to chakra, which I loved for a long time.

[isBatak]

@VinSpee
It seems like it mostly works, only the hover state is not detected 🤔
https://play.panda-css.com/ebvVxk8H8U

[VinSpee]

@VinSpee

It seems like it mostly works, only the hover state is not detected 🤔

https://play.panda-css.com/ebvVxk8H8U

Exactly. The nested case fails (has nothing to do with the hover state, it's due to that token being nested an additional level)

[p7gg]

Yeah, the ability to extend this functionality would be huge...
For instance I want to use it with @radix-ui/colors but I can't, cuz its color objects have 12 keys

[isBatak]

@p7gg could you share a playground reproduction of this issue?

Link to playground https://play.panda-css.com/

[isBatak]

@p7gg you can already do this, check it here https://play.panda-css.com/lCHlTlE7yu

[trangcongthanh]

@p7gg I wrote a small function to transform @radix-ui/colors into semanticTokens.

import * as colors from '@radix-ui/colors'

type SemanticToken = {
	value: {
		base: string
		_dark?: string
		_osDark?: string
	}
	description?: string
}

function transformColorsToTokens() {
	const transformed = Object.entries(colors).reduce((a, [colorName, values]) => {
		const isDark = colorName.includes('Dark')

		Object.entries(values).forEach(([scale, value]) => {
			const token = a.get(scale) ?? ({ value: {} } as SemanticToken)
			token.description = scale
			if (isDark) {
				token.value['_dark'] = value
				token.value['_osDark'] = value
			}
			if (!isDark) {
				token.value['base'] = value
			}
			a.set(scale, token)
		})

		return a
	}, new Map<string, SemanticToken>())
	return Object.fromEntries(transformed.entries())
}
export default defineConfig({
	theme: {
            extend: { semanticToken: { colors: transformColorsToTokens() } }
	},
})

Usage:

<div className={css({ color: 'blue12', backgroundColor: 'slate1' }} />

[isBatak]

@VinSpee could you please check it in this Draft build of playground https://panda-playground-git-issue-1062-expand-colorpa-125510-chakra-ui.vercel.app/?
It's based on this Draft PR #1166 and I think it should cover all of the cases 🤞 :D

[VinSpee]

@isBatak looks like this adds the custom property correctly, but still doesn't interpolate correctly, here's the output of my test cast:

@layer utilities {
  .color-palette_core {
    --colors-color-palette-dark: var(--colors-core-dark);
    --colors-color-palette-light: var(--colors-core-light);
    --colors-color-palette-light-accent: var(--colors-core-light-accent);
  }

  .text_light {
    color: light;
  }

  .bg_dark {
    background-color: dark;
  }

  .hover\:text_light\.accent:is(:hover, [data-hover]) {
    /* this isn't right */
    color: light.accent;
  }
}

[isBatak]

@VinSpee could you share the whole example?

To me it seems like it works:

@layer utilities {
  .color-palette_core {
    --colors-color-palette-light: var(--colors-core-light);
    --colors-color-palette-light-accent: var(--colors-core-light-accent);
  }

  .text_colorPalette\.light {
    color: var(--colors-color-palette-light);
  }

  .hover\:text_colorPalette\.light\.accent:is(:hover, [data-hover]) {
    color: var(--colors-color-palette-light-accent);
  }
}

config

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

export const config = defineConfig({
  theme: {
		semanticTokens: {
      colors:{
        core: {
          light: {
            DEFAULT: {
              value: 'blue'
            },
            accent: {
              value: 'cyan'
            }
          }
        },
        brand: {
          light: {
            DEFAULT: {
              value: 'red',
            },
            accent: {
              value: 'magenta'
            }
          }
        }
      }
    }
	}
});    

code:

import { css } from 'styled-system/css'

export const App = () => {
  return (
    <>
      <button
        className={css({
          colorPalette: 'core',
          color: 'colorPalette.light',
          _hover: {
            color: 'colorPalette.light.accent'
          }
        })}
      >
        Hello world
      </button>
    </>
  )
}

[VinSpee]

I must have been missing something – it's working @isBatak