feat(tokens): add border (#743)

* feat(tokens): add border

* chore: add missing storybook component

packages/tokens/.storybook/components.tsx

@@ -61,3 +61,19 @@ export const BoxShadowSwatch = function ShadowSwatch(
     </div>
   );
 };
+
+export const BorderSwatch = function BorderSwatch(
+  props: React.ComponentProps<typeof Swatch>
+) {
+  return (
+    <div style={{ padding: 4 }}>
+      <Swatch
+        {...props}
+        style={{
+          margin: 4,
+          ...props.style,
+        }}
+      />
+    </div>
+  );
+};

packages/tokens/src/border.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as border from './border';
+import { Palette, BorderSwatch as Swatch } from '../.storybook/components';
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Border',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const None: Story = {
+  render: () => <Swatch style={{ border: border.none }} />,
+  name: 'none',
+};
+
+export const Transparent: Story = {
+  render: () => <Swatch style={{ border: border.transparent }} />,
+  name: 'transparent',
+};
+
+export const Subtle: Story = {
+  render: () => <Swatch style={{ border: border.subtle }} />,
+  name: 'subtle',
+};
+
+export const Standard: Story = {
+  render: () => <Swatch style={{ border: border.standard }} />,
+  name: 'standard',
+};
+
+export const Bold: Story = {
+  render: () => <Swatch style={{ border: border.bold }} />,
+  name: 'bold',
+};
+
+export const Selected: Story = {
+  render: () => <Swatch style={{ border: border.selected }} />,
+  name: 'selected',
+};
+
+export const Active: Story = {
+  render: () => <Swatch style={{ border: border.active }} />,
+  name: 'active',
+};
+
+export const Expanded: Story = {
+  render: () => <Swatch style={{ border: border.expanded }} />,
+  name: 'expanded',
+};
+
+export const Hover: Story = {
+  render: () => <Swatch style={{ border: border.hover }} />,
+  name: 'hover',
+};
+
+export const Focus: Story = {
+  render: () => <Swatch style={{ border: border.focus }} />,
+  name: 'focus',
+};
+
+export const Error: Story = {
+  render: () => <Swatch style={{ border: border.error }} />,
+  name: 'error',
+};
+
+export const Info: Story = {
+  render: () => <Swatch style={{ border: border.info }} />,
+  name: 'info',
+};
+
+export const Success: Story = {
+  render: () => <Swatch style={{ border: border.success }} />,
+  name: 'success',
+};
+
+export const Warning: Story = {
+  render: () => <Swatch style={{ border: border.warning }} />,
+  name: 'warning',
+};
+
+export const Stylistic: Story = {
+  render: () => (
+    <Palette>
+      {Object.entries(border.stylistic).map(([name, value]) => (
+        <div key={name}>
+          <div>{name}</div>
+          <Swatch style={{ border: value }} />
+        </div>
+      ))}
+    </Palette>
+  ),
+  name: 'stylistic (palette)',
+};
+
+export const Action: Story = {
+  render: () => (
+    <Palette>
+      {Object.entries(border.action).map(([name, value]) => (
+        <div key={name}>
+          <div>{name}</div>
+          <Swatch style={{ border: value }} />
+        </div>
+      ))}
+    </Palette>
+  ),
+  name: 'action (palette)',
+};
+
+export const Severity: Story = {
+  render: () => (
+    <Palette>
+      {Object.entries(border.severity).map(([name, value]) => (
+        <div key={name}>
+          <div>{name}</div>
+          <Swatch style={{ border: value }} />
+        </div>
+      ))}
+    </Palette>
+  ),
+  name: 'severity (palette)',
+};
+
+export const Border: Story = {
+  render: () => (
+    <div>
+      {Object.entries(border.border).map(([name, value]) => (
+        <React.Fragment key={name}>
+          <div>{name}</div>
+          <Palette>
+            {Object.entries(value).map(([name, value]) => (
+              <div key={name}>
+                <div>{name}</div>
+                <Swatch style={{ border: value }} />
+              </div>
+            ))}
+          </Palette>
+        </React.Fragment>
+      ))}
+    </div>
+  ),
+  name: 'border (nested palettes)',
+};

packages/tokens/src/border.ts

@@ -0,0 +1,60 @@
+import type { Property } from 'csstype';
+import * as color from './color';
+
+/** A composite token for a CSS border property value. */
+export type BorderToken = Property.Border;
+
+export const none = 'none' as const satisfies BorderToken;
+export const transparent =
+  `1px solid ${color.transparent}` as const satisfies BorderToken;
+export const subtle = `1px solid ${color.N70}` as const satisfies BorderToken;
+export const standard = `1px solid ${color.N90}` as const satisfies BorderToken;
+export const bold = `1px solid ${color.N100}` as const satisfies BorderToken;
+
+export const selected =
+  `1px solid ${color.B600}` as const satisfies BorderToken;
+export const active = `1px solid ${color.B100}` as const satisfies BorderToken;
+export const expanded =
+  `1px solid ${color.B600}` as const satisfies BorderToken;
+export const hover = `1px solid ${color.N100}` as const satisfies BorderToken;
+export const focus = `1px solid ${color.B600}` as const satisfies BorderToken;
+
+export const error = `1px solid ${color.R700}` as const satisfies BorderToken;
+export const info = `1px solid ${color.B600}` as const satisfies BorderToken;
+export const success = `1px solid ${color.G600}` as const satisfies BorderToken;
+export const warning = `1px solid ${color.Y600}` as const satisfies BorderToken;
+
+/** A palette of border tokens. */
+export type BorderPalette = Record<string, BorderToken>;
+
+export const stylistic = {
+  none,
+  transparent,
+  subtle,
+  standard,
+  bold,
+} as const satisfies BorderPalette;
+
+export const action = {
+  selected,
+  active,
+  expanded,
+  hover,
+  focus,
+} as const satisfies BorderPalette;
+
+export const severity = {
+  error,
+  info,
+  success,
+  warning,
+} as const satisfies BorderPalette;
+
+/** All border palettes. */
+export type BorderNestedPalettes = Record<string, BorderPalette>;
+
+export const border = {
+  stylistic,
+  action,
+  severity,
+} as const satisfies BorderNestedPalettes;

packages/tokens/src/index.ts

@@ -4,6 +4,13 @@ export type {
   BackgroundColorPalette,
 } from './background-color';
 
+export { border } from './border';
+export type {
+  BorderToken,
+  BorderPalette,
+  BorderNestedPalettes,
+} from './border';
+
 export { boxShadow } from './box-shadow';
 export type {
   BoxShadowToken,