feat: reimplementing Box and Stack with sprinkles and intrinsic attri…

…bues

lib/stories/borders.stories.tsx

@@ -1,13 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { Box } from '../components/Box';
 import { Heading } from '../components/Heading';
 import { tokens } from '../themes/base/tokens';
-import { BorderWidthScale } from '../themes/tokens';
 
-import { Stack } from './helpers';
-import { labels, swatch, titles } from './styles.css';
+import { Box, Stack, type Sprinkles } from './helpers';
+import { labels, titles } from './helpers/styles.css';
 
 const widthItems = Object.keys(tokens.border.width);
 const radiusItems = Object.keys(tokens.border.radius);
@@ -22,11 +20,12 @@ const Widths = () => {
 			{widthItems.map((width) => (
 				<Stack space="sm" horizontal key={width}>
 					<Box
-						backgroundColour="black100"
-						borderColour="neutral"
+						background="black100"
+						borderColor="dark"
 						borderRadius="1"
-						borderWidth={width as BorderWidthScale}
-						className={swatch}
+						borderStyle="solid"
+						borderWidth={width as Sprinkles['borderWidth']}
+						size="9"
 					/>
 					<p className={labels}>{width}</p>
 				</Stack>
@@ -45,11 +44,10 @@ const Radius = () => {
 			{radiusItems.sort().map((radius) => (
 				<Stack space="sm" horizontal key={radius}>
 					<Box
-						backgroundColour="black100"
-						borderColour="neutral"
-						borderRadius={radius}
-						borderWidth="2"
-						className={swatch}
+						background="black500"
+						borderColor="gray"
+						borderRadius={radius as Sprinkles['borderRadius']}
+						size="9"
 						style={
 							radius === 'pill' ? { height: '74px' } : undefined
 						}

lib/stories/helpers/index.tsx

@@ -1,10 +1,45 @@
+import clsx from 'clsx';
 import React from 'react';
 
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
 import { stack, type RecipeStackProps } from '../../styles/stack.css';
 
+import {
+	variantColourSwatch,
+	type VariantColourSwatchProps,
+} from './styles.css';
+
+type ElementAttributes = React.ComponentPropsWithoutRef<'div'>;
+type FilteredAttributes = Pick<ElementAttributes, 'className' | 'style'>;
+type ComponentProps<P> = React.PropsWithChildren<P & FilteredAttributes>;
+
+export const Box = ({
+	children,
+	className,
+	style,
+	...props
+}: ComponentProps<Sprinkles>) => (
+	<div className={clsx([sprinkles(props), className])} style={style}>
+		{children}
+	</div>
+);
+
 export const Stack = ({
 	children,
+	className,
+	style,
 	...props
-}: RecipeStackProps & { children: React.ReactNode }) => (
-	<div className={stack(props)}>{children}</div>
+}: ComponentProps<RecipeStackProps>) => (
+	<div className={clsx([stack(props), className])} style={style}>
+		{children}
+	</div>
+);
+
+type ColourSwatchProps = ComponentProps<
+	Omit<Sprinkles, 'size'> & VariantColourSwatchProps
+>;
+export const ColourSwatch = ({ shape, size, ...props }: ColourSwatchProps) => (
+	<Box {...props} className={variantColourSwatch({ shape, size })}></Box>
 );
+
+export { type Sprinkles } from '../../styles/sprinkles.css';

lib/stories/helpers/styles.css.ts

@@ -0,0 +1,45 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { themeContractVars as vars } from '../../themes/theme.css';
+
+export const titles = style({
+	marginTop: '11px',
+});
+
+export const labels = style({
+	textTransform: 'capitalize',
+});
+
+export const hexPill = style({
+	backgroundColor: 'hsl(0 0 100 / 75%)',
+	borderRadius: '100px',
+	display: 'inline-block',
+	fontSize: '11px',
+	padding: '1px 8px',
+	position: 'absolute',
+	textTransform: 'uppercase',
+	top: '5px',
+});
+
+export const variantColourSwatch = recipe({
+	base: { position: 'relative' },
+	variants: {
+		size: {
+			sm: { height: vars.space[7], width: vars.space[7] },
+			md: { height: vars.space[8], width: vars.space[8] },
+			lg: { height: vars.space[9], width: vars.space[9] },
+		},
+		shape: {
+			circle: { borderRadius: '100%' },
+		},
+	},
+	defaultVariants: {
+		size: 'md',
+		shape: 'circle',
+	},
+});
+
+export type VariantColourSwatchProps = NonNullable<
+	RecipeVariants<typeof variantColourSwatch>
+>;

lib/stories/palette.stories.tsx

@@ -7,8 +7,8 @@ import { sprinkles } from '../styles/sprinkles.css';
 import { baseThemeColours } from '../themes/base/tokens';
 import type { ColourGamut, ColourValue } from '../themes/tokens';
 
-import { Stack } from './helpers';
-import { labels, hexPill, swatch } from './styles.css';
+import { ColourSwatch, Stack } from './helpers';
+import { labels, hexPill } from './helpers/styles.css';
 
 interface SwatchProps {
 	colour: ColourGamut;
@@ -24,17 +24,9 @@ const Swatch = ({ colour, hex, hue }: SwatchProps) => (
 			position: 'relative',
 		}}
 	>
-		<div
-			className={clsx([
-				sprinkles({
-					background: colour,
-					borderRadius: 'full',
-				}),
-				swatch,
-			])}
-		>
+		<ColourSwatch background={colour} size="lg">
 			<div className={hexPill}>{hex}</div>
-		</div>
+		</ColourSwatch>
 		{hue && colour.replace(hue, '')}
 	</div>
 );

lib/stories/theme.stories.tsx

@@ -5,16 +5,16 @@ import { Heading } from '../components/Heading';
 import { themeContractVars } from '../themes/theme.css';
 
 import { Stack } from './helpers';
-import { labels, swatch } from './styles.css';
+import { labels, variantColourSwatch } from './helpers/styles.css';
 
 const ThemeSwatch = ({ label, cssVar }) => (
 	<div
 		key={label}
 		style={{ display: 'flex', gap: '10px', alignItems: 'center' }}
 	>
 		<div
-			className={swatch}
-			style={{ background: cssVar, borderRadius: '100%' }}
+			className={variantColourSwatch()}
+			style={{ background: cssVar }}
 		></div>
 		<span className={labels}>{label}</span>
 	</div>
@@ -28,8 +28,8 @@ const SemanticSwatches = ({ vars }: { vars: Record<string, string> }) => (
 				style={{ display: 'flex', gap: '10px', alignItems: 'center' }}
 			>
 				<div
-					className={swatch}
-					style={{ background: cssVar, borderRadius: '100%' }}
+					className={variantColourSwatch()}
+					style={{ background: cssVar }}
 				></div>
 				<span className={labels}>{colour}</span>
 			</div>
@@ -79,7 +79,7 @@ export const ThemeColours: Story = {
 		return (
 			<Stack>
 				<hgroup>
-					<Heading is="h1">Themed Colours</Heading>
+					<Heading is="h1">Theme Colours</Heading>
 					<p>
 						Use the theme selection menu options in the top bar to
 						view alternate colour mappings.
@@ -97,6 +97,10 @@ export const ThemeColours: Story = {
 						vars={themeContractVars.colours.background}
 					/>
 				</Stack>
+				<Stack>
+					<Heading is="h2">Border</Heading>
+					<SemanticSwatches vars={themeContractVars.border.colours} />
+				</Stack>
 
 				<Stack>
 					<Heading is="h2">Intentional colour sets</Heading>

lib/styles/sprinkles.css.ts

@@ -1,18 +1,20 @@
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
 
 import { tokens } from '../themes/base/tokens';
+const { border, colours, space } = tokens;
+const { none, ...spaceWithoutNone } = space;
 
 const responsiveProperties = defineProperties({
 	properties: {
-		gap: tokens.space,
-		marginBottom: tokens.space,
-		marginLeft: tokens.space,
-		marginRight: tokens.space,
-		marginTop: tokens.space,
-		paddingBottom: tokens.space,
-		paddingLeft: tokens.space,
-		paddingRight: tokens.space,
-		paddingTop: tokens.space,
+		gap: space,
+		marginBottom: space,
+		marginLeft: space,
+		marginRight: space,
+		marginTop: space,
+		paddingBottom: space,
+		paddingLeft: space,
+		paddingRight: space,
+		paddingTop: space,
 	},
 	shorthands: {
 		margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
@@ -26,38 +28,51 @@ const responsiveProperties = defineProperties({
 
 const borderProperties = defineProperties({
 	properties: {
-		borderRadius: { ...tokens.border.radius },
-		borderWidth: { ...tokens.border.width },
+		borderColor: { ...border.colours },
+		borderRadius: { ...border.radius },
+		borderStyle: ['solid', 'dotted', 'dashed'],
+		borderWidth: { ...border.width },
 	},
 });
 
-const flexProperties = defineProperties({
+const displayProperties = defineProperties({
 	properties: {
 		display: ['none', 'block', 'flex'],
 		flexDirection: ['row', 'column'],
 		flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
 		alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
 		justifyContent: ['stretch', 'flex-start', 'center', 'flex-end'],
-		width: ['100%', 'auto'],
+		height: {
+			...spaceWithoutNone,
+			'100%': '100%',
+			auto: 'auto',
+		},
+		width: {
+			...spaceWithoutNone,
+			'100%': '100%',
+			auto: 'auto',
+		},
 	},
 	shorthands: {
 		placeItems: ['justifyContent', 'alignItems'],
+		size: ['width', 'height'],
 	},
 });
 
 const gamutProperties = defineProperties({
 	properties: {
-		color: tokens.colours.gamut,
-		background: tokens.colours.gamut,
-		borderColor: tokens.colours.gamut,
-		fill: tokens.colours.gamut,
-		stroke: tokens.colours.gamut,
+		color: colours.gamut,
+		background: colours.gamut,
+		fill: colours.gamut,
+		stroke: colours.gamut,
 	},
 });
 
 export const sprinkles = createSprinkles(
 	responsiveProperties,
 	borderProperties,
-	flexProperties,
+	displayProperties,
 	gamutProperties,
 );
+
+export type Sprinkles = Parameters<typeof sprinkles>[0];