Notion app logo
Struggling to stay organized and effective? Learn to master your time and tasks with the Effectively Notion 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.

Freebies

Vector Arrow Scribbles
banner image for figma vector arrows scribbles

A figma community project of vectorized hand-drawn arrows.

Go To Figma
Vector Line Scribbles
banner for figma vector line scribbles

A figma community project of vectorized hand-drawn lines.

Go To Figma
Vector Shape Scribbles
banner image of figma vector shapes scribbles

A figma community project of vectorized hand-drawn shapes.

Go To Figma

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.

Online

I'm on almost all social media as @curiouslychase.

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