Do you need help taking your digital life from chaos to order? Sign up early for my Digital Delight course!

Box util for Stitches CSS in JS

A util for a border for Stitches styling

2023-01-25

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;
	      }, {}),
	},
});
Photo of Chase Adams

Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.

Do you need help taking your digital life from chaos to order? Sign up early for my Digital Delight course!

Reader Survey

Choose answer

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.