How to refer variants in globalStyle and intersected variants

[Spaubleit]

Hi everyone! Recently I found this beautiful library and try to restyle some of my components. And I face some difficulties. For example take this simplified component:

.button
    .gradient
        //some styles

    .outline
        //some styles

    .clear
        color: colors.$text

        svg
            fill: colors.$icon

        &:hover:not(.disabled)
            color: colors.$text-light
            
            svg
                fill: colors.$text-light

I see some issues:

• I can't set class for every icon in the application so I change svg element fill.
• I have .disabled class that I use in some contexts. I should refer it somehow.

I come up with this solution, but it obviously doesn't work:

export const disabled = style({})

export const button = recipe({
    variants: {
        style: {
            gradient: {},
            outline: {},
            clear: {
                color: themeVars.colors.text.default,
                selectors: {
                    "& svg": {
                        fill: themeVars.colors.icon,
                    },
                    [`&:hover:not(${disabled})`]: {
                        color: themeVars.colors.text.light,
                    },
                    [`&:hover:not(${disabled}) svg`]: {
                        fill: themeVars.colors.text.light,
                    }
                }
            },
        }
    },
})

As you can see here I extracted disabled style to refer it. But can it be part of the recipe? And how can I create global style for variant to refer nested svg elements? Maybe there is easy solution that I miss?

[graup]

I also want to know this. When trying to write child selectors, the error message and docs lead you to style and globalStyle, but there's no explanation of how to do this with recipe variants.

It looks like we need an API to access the className of the recipe and its variants, maybe something like this...?

// proposed API
const myRecipe = recipe({ variants: { size: { big: ... } });
globalStyle(`${myRecipe.variants.size.big} svg`, { ... }):

I found a way to do this through private undocumented API:

export const tableRecipe = recipe({
  base: [
    {
      borderCollapse: 'collapse',
      width: '100%',
    },
  ],
  variants: {
    variant: {
      simple: { }
    },
  },
});

// this is a hack
const recipeClass = (tableRecipe as any).__recipe__.args[0].defaultClassName.split(' ')[0];
globalStyle(`${recipeClass} th`, {
  textAlign: 'left',
});

const variantClass = (tableRecipe as any).__recipe__.args[0].variantClassNames.variant.simple.split(' ')[0];
globalStyle(`${recipeClass} thead`, {
  fontSize: '10px',
});

[Spaubleit]

After some investigation I found a solution. You can use styleVariants to refer each variant class. In my example it would be like this:

export const disabled = style({})

export const buttonStyleVariants = styleVariants({
    gradient: {},
    outline: {},
    clear: {
        color: themeVars.colors.text.default,
        selectors: {
            [`&:hover:not(${disabled})`]: {
                color: themeVars.colors.text.light,
            },
        }
    },
})

export const button = recipe({
    variants: {
        style: buttonStyleVariants,
    },
})

globalStyle(`${buttonStyleVariants.clear} svg`, {
    fill: themeVars.colors.icon,
})

globalStyle(`${buttonStyleVariants.clear}:hover:not(${disabled}) svg`, {
    fill: themeVars.colors.text.light,
})