feat(tokens): add radius (#739)

package.json

@@ -57,6 +57,7 @@
     "babel-jest": "^29.4.1",
     "chromatic": "^9.1.0",
     "concurrently": "^8.2.2",
+    "csstype": "^3.1.3",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "2.27.5",

packages/tokens/.storybook/components.tsx

@@ -29,3 +29,19 @@ export const Palette = function Palette(
     />
   );
 };
+
+export const RadiusSwatch = function RadiusSwatch(
+  props: React.ComponentProps<typeof Swatch>
+) {
+  return (
+    <div style={{ padding: 4 }}>
+      <Swatch
+        {...props}
+        style={{
+          border: '1px solid black',
+          ...props.style,
+        }}
+      />
+    </div>
+  );
+};

packages/tokens/package.json

@@ -10,5 +10,7 @@
     }
   },
   "type": "module",
-  "dependencies": {}
+  "dependencies": {
+    "csstype": "^3.1.3"
+  }
 }

packages/tokens/src/index.ts

@@ -1,6 +1,9 @@
 export { color } from './color';
 export type { ColorToken, ColorPalette, ColorNestedPalettes } from './color';
 
+export { radius } from './radius';
+export type { RadiusToken, RadiusPalette } from './radius';
+
 export { skinTone } from './skin-tone';
 export type {
   SkinToneToken,

packages/tokens/src/radius.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as radius from './radius';
+import { Palette, RadiusSwatch as Swatch } from '../.storybook/components';
+
+const meta: Meta = {
+  title: 'Radius',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Zero: Story = {
+  render: () => <Swatch style={{ borderRadius: radius.zero }} />,
+  name: 'zero',
+};
+
+export const Xs: Story = {
+  render: () => <Swatch style={{ borderRadius: radius.xs }} />,
+  name: 'xs',
+};
+
+export const Sm: Story = {
+  render: () => <Swatch style={{ borderRadius: radius.sm }} />,
+  name: 'sm',
+};
+
+export const Md: Story = {
+  render: () => <Swatch style={{ borderRadius: radius.md }} />,
+  name: 'md',
+};
+
+export const Lg: Story = {
+  render: () => <Swatch style={{ borderRadius: radius.lg }} />,
+  name: 'lg',
+};
+
+export const Xl: Story = {
+  render: () => <Swatch style={{ borderRadius: radius.xl }} />,
+  name: 'xl',
+};
+
+export const Full: Story = {
+  render: () => <Swatch style={{ borderRadius: radius.full }} />,
+  name: 'full',
+};
+
+export const Radius: Story = {
+  render: () => (
+    <Palette>
+      {Object.entries(radius.radius).map(([name, value]) => (
+        <div key={name}>
+          <div>{name}</div>
+          <Swatch style={{ borderRadius: value }} />
+        </div>
+      ))}
+    </Palette>
+  ),
+  name: 'radius (palette)',
+};

packages/tokens/src/radius.ts

@@ -0,0 +1,25 @@
+import type { Property } from 'csstype';
+
+/** A global token for a CSS border radius property value. */
+export type RadiusToken = Property.BorderRadius;
+
+export const zero = '0px' as const satisfies RadiusToken;
+export const xs = '2px' as const satisfies RadiusToken;
+export const sm = '4px' as const satisfies RadiusToken;
+export const md = '8px' as const satisfies RadiusToken;
+export const lg = '16px' as const satisfies RadiusToken;
+export const xl = '32px' as const satisfies RadiusToken;
+export const full = '9999px' as const satisfies RadiusToken;
+
+/** A palette of radius tokens. */
+export type RadiusPalette = Record<string, RadiusToken>;
+
+export const radius = {
+  zero,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  full,
+} as const satisfies RadiusPalette;