[Feautre request] Allow arbitrary values for defineProperties function in sprinkle package #550
joseDaKing
started this conversation in
Ideas
Replies: 1 comment 2 replies
-
Not sure how this would work with arbitrary props (like your The variable example ( import { createVar } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';
export const currentColor = createVar();
export const buttonRecipe = recipe({
base: {
vars: {
[currentColor]: 'grey',
},
},
variants: {
variant: {
stroke: { boxShadow: `0 0 1px 1px ${currentColor}` },
'strong-fill': { backgroundColor: currentColor, color: '#fff' },
},
},
defaultVariants: {
variant: 'stroke',
},
}); For now, the only way to do this seems to be using function getProps({ color, variant, ...props }: Props) {
const className = buttonRecipe({ variant });
const style = assignInlineVars({[currentColor]: vars.color[var]});
return mergeProps(props, {className, style});
}
export function Button(props: Props) {
return <button {...getProps(props)} />;
} I'd love to do something like this in the recipe: variants: {
color: mapToVar(currentColor, vars.color),
variant: {
stroke: { boxShadow: `0 0 1px 1px ${currentColor}` },
'strong-fill': { backgroundColor: currentColor, color: '#fff' },
},
}, |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Allow arbitrary values for defineProperties function in sprinkle package by using functions. This would allow for more flexibility. These functions should also be able to take variables from createVar function.
Beta Was this translation helpful? Give feedback.
All reactions