From e7ff2bdbdb95c5fdf53cfefa610182f96f7285ee Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 7 Nov 2022 14:39:26 +0100 Subject: [PATCH] add variant --- packages/css-vars/README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/css-vars/README.md b/packages/css-vars/README.md index 2f00bbfa34..55ca5f1bfa 100644 --- a/packages/css-vars/README.md +++ b/packages/css-vars/README.md @@ -50,13 +50,22 @@ import {styled} from 'stitches' // icon.ts const showVar = cssVars.define("button-show"); // --button-show-0 +const primaryBgVar = cssVars.define("button-primary-bg"); // --button-primary-bg-1 -export const buttonCssVars = ({ show }: { show: boolean }) => ({ +export const buttonCssVars = ({ show, variant }: { show: boolean, variant: 'primary' | 'secondary' }) => ({ [showVar]: show ? "block" : "none", + [primaryBgVar]: variant === 'primary' ? "red" : "grey", }); export const Button = styled('button', { display: cssVars.use(showVar, "none") + variants: { + variant: { + primary: { + background: cssVars.use(primaryBgVar, "red") + } + } + } }) // panel.ts