Stitches - Feature: Conditions

[bbg]

Hi Everyone,

As of now, I examined the component called Vanilla Extract that I discovered, did something on it, and came across a nice feature that is in Vanilla Extract and should be in Stitches.

Instead of Media's field in Stitches in Normal, Conditions in Vanilla Extract should be like this;

Currently, we only add Media queries in Media, but we also need Pseudo Conditions such as Hover, Focus, FocusWithIn, and Disabled.

For example;

export const { styled, css } = createStitches({
    media: {
        bp1: "(min-width: 640px)",
        bp2: "(min-width: 768px)",
        bp3: "(min-width: 1024px)"
    }
});

if there are conditions instead of media

export const { styled, css } = createStitches({
    conditions: {
        bp1: '@media (min-width: 640px)',
        bp2: '@media (min-width: 768px)',
        bp3: '@media (min-width: 1024px)',
        hover: { selector: '&:hover' },
        focus: { selector: '&:focus' }
    },
});

Usage example;

<Button
    color={{
        "@initial": "black",
        "@bp2": "violet",
        "@hover": "red"
    }}
>
    Button
</Button>

As I said, I was inspired by Vanilla Extract and I think it makes it very easy to use. https://vanilla-extract.style/documentation/sprinkles-api/

const responsiveProperties = defineProperties({
    conditions: {
        initial: {},
        tablet: { "@media": "screen and (min-width: 768px)" },
        desktop: { "@media": "screen and (min-width: 1024px)" },
        hover: { selector: '&:hover' },
        focus: { selector: '&:focus' }
    },
    defaultCondition: "initial",
    properties: {}
});

It is defined globally.

Well, if we need to give an example in the existing structure, for example, I do it this way.

<Button color="black" hoverColor="violet">
    Button
</Button>

Separate variants must be created for Hover, Focus, etc…. But if I have already defined Black, Violet, and Red in Color, creating separate variants for its Pseudo Conditions creates an unnecessary chunk of code.

I hope I was able to explain. Maybe we can do this by expanding Media's, but there will be a need for a document on this.

Thank you