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;
}, {}),
},
});
This Article is Still in Progress
This post is a work in progress and not yet complete. If you're interested in reading the full article, let me know!
Want to Read It? Your interest helps me prioritize which articles to finish first. Click below to tell me you want to read this article when it's complete.