Box util for Stitches CSS in JS
1/24/2023
I had a specific border I wanted to use consistently in my web design, so I made a util for Stitches (styling) that took the position the border needed to be in and did the work of styling the border for light and dark mode.
createStitches({
utils: {
box: (sides: Array<"top" | "left" | "bottom" | "right">) =>
(sides.length ? sides : sidesOptions).reduce<{
[k: string]: string;
}>((prevVal, side) => {
prevVal[`border-${side}`] = "1px dashed $gray200";
if (!prevVal[`.${darkTheme} &`]) {
// @ts-ignore
prevVal[`.${darkTheme} &`] = {};
}
// @ts-ignore
prevVal[`.${darkTheme} &`][`border-${side}`] = "1px dashed $gray800";
return prevVal;
}, {}),
},
});