Box util for Stitches CSS in JS
Essays and updates on product, engineering, and AI by Chase Adams.
1 minute read
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;
}, {}),
},
});
First Cohort
No Coding Experience Required
Build Your Website with AI—No Code Required
Learn to create and deploy professional websites using ChatGPT and Claude. Go from complete beginner to confident website builder.