Add borer radii options and spacing tokens

docs/Spacing.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Design Tokens/Spacing" />
+
+# Spacing
+
+Spacing is utilized for margin, padding, and gap for consistency
+
+<Canvas>
+  <Story id="spacing-spacing--spacing" />
+</Canvas>
+
+| Size  | JS                 | CSS                |
+| ----- | ------------------ | ------------------ |
+| **0** | `spacing.spacing0` | `var(--spacing-0)` |
+
+## References
+
+- [Figma Spacing Page](https://www.figma.com/file/GIctVoel8jQYWNuFWaufQh/DS-Spacing?node-id=2%3A2&t=ONUySsuYXUFTwdou-0)(internal use only)

docs/Spacing.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { spacing } from '../src/js';
+
+import { Text } from './components';
+
+import README from './Spacing.mdx';
+
+export default {
+  title: 'Spacing/Spacing',
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    spacing: {
+      control: 'select',
+      options: Object.keys(spacing),
+    },
+  },
+  args: {},
+};
+
+interface SpacingSwatchProps {
+  children: any;
+  style?: object;
+  spacingProp: any;
+}
+
+const SpacingSwatch = ({
+  children,
+  style,
+  spacingProp,
+}: SpacingSwatchProps) => (
+  <div
+    style={{
+      height: 36,
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${spacing.spacing2}px`,
+      marginBottom: `${spacing.spacing1}px`,
+      ...style,
+    }}
+  >
+    <div style={{ width: `${spacing.spacing10}px`, height: '100%' }}>
+      <div
+        style={{
+          backgroundColor: 'var(--color-error-muted)',
+          height: '100%',
+          width: `var(--${spacingProp})`,
+          minWidth: '.5px',
+        }}
+      ></div>
+    </div>
+    <Text>{children}</Text>
+  </div>
+);
+
+export const Spacing = (args) => {
+  const spacingSizes = Object.keys(spacing);
+  const formattedSpacingSizes = spacingSizes.map((key) => {
+    return key.replace(/(\D+)(\d+)/, '$1-$2');
+  });
+
+  return (
+    <div>
+      {formattedSpacingSizes.map((size) => {
+        return (
+          <SpacingSwatch key={size} spacingProp={size}>
+            {size}
+          </SpacingSwatch>
+        );
+      })}
+    </div>
+  );
+};

src/css/design-tokens.css

@@ -92,6 +92,30 @@
   --line-height-5: 2rem;
   --line-height-6: 2.5rem;
   --line-height-7: 3.5rem;
+  /* spacing */
+  --spacing-0: 0;
+  --spacing-0_25: 2px;
+  --spacing-0_5: 4px;
+  --spacing-1: 8px;
+  --spacing-1_5: 12px;
+  --spacing-2: 16px;
+  --spacing-3: 24px;
+  --spacing-4: 32px;
+  --spacing-5: 40px;
+  --spacing-6: 48px;
+  --spacing-7: 56px;
+  --spacing-8: 64px;
+  --spacing-9: 72px;
+  --spacing-10: 80px;
+  /* border radius */
+  --border-radius-none: 0;
+  --border-radius-xs: 2px;
+  --border-radius-sm: 4px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+  --border-radius-xl: 12px;
+  --border-radius-circle: 50%;
+  --border-radius-pill: 999px;
   /* font weights */
   --font-weight-regular: 400;
   --font-weight-medium: 500;

src/figma/tokens.json

@@ -732,6 +732,98 @@
         "textDecoration": "$textDecoration.none"
       },
       "type": "typography"
+    },
+    "spacing": {
+      "spacing-0": {
+        "value": "0",
+        "type": "spacing"
+      },
+      "spacing-0_25": {
+        "value": "2",
+        "type": "spacing"
+      },
+      "spacing-0_5": {
+        "value": "4",
+        "type": "spacing"
+      },
+      "spacing-1": {
+        "value": "8",
+        "type": "spacing"
+      },
+      "spacing-1_5": {
+        "value": "12",
+        "type": "spacing"
+      },
+      "spacing-2": {
+        "value": "16",
+        "type": "spacing"
+      },
+      "spacing-3": {
+        "value": "24",
+        "type": "spacing"
+      },
+      "spacing-4": {
+        "value": "32",
+        "type": "spacing"
+      },
+      "spacing-5": {
+        "value": "40",
+        "type": "spacing"
+      },
+      "spacing-6": {
+        "value": "48",
+        "type": "spacing"
+      },
+      "spacing-7": {
+        "value": "56",
+        "type": "spacing"
+      },
+      "spacing-8": {
+        "value": "64",
+        "type": "spacing"
+      },
+      "spacing-9": {
+        "value": "72",
+        "type": "spacing"
+      },
+      "spacing-10": {
+        "value": "80",
+        "type": "spacing"
+      }
+    },
+    "borderRadius": {
+      "none": {
+        "value": "0",
+        "type": "borderRadius"
+      },
+      "xs": {
+        "value": "2",
+        "type": "borderRadius"
+      },
+      "sm": {
+        "value": "4",
+        "type": "borderRadius"
+      },
+      "md": {
+        "value": "6",
+        "type": "borderRadius"
+      },
+      "lg": {
+        "value": "8",
+        "type": "borderRadius"
+      },
+      "xl": {
+        "value": "12",
+        "type": "borderRadius"
+      },
+      "circle": {
+        "value": "50%",
+        "type": "borderRadius"
+      },
+      "pill": {
+        "value": "999",
+        "type": "borderRadius"
+      }
     }
   },
   "light": {
@@ -1476,6 +1568,10 @@
   },
   "$themes": [],
   "$metadata": {
-    "tokenSetOrder": ["global", "light", "dark"]
+    "tokenSetOrder": [
+      "global",
+      "light",
+      "dark"
+    ]
   }
-}
+}

src/js/index.ts

@@ -1,6 +1,7 @@
 export { Theme } from './themes';
 export { lightTheme } from './themes';
 export { darkTheme } from './themes';
+export { spacing } from './spacing';
 
 // DEPRECATED in favor of importing theme objects above
 export { colors } from './colors';

src/js/spacing/index.ts

@@ -0,0 +1 @@
+export { spacing } from './spacing';

src/js/spacing/spacing.ts

@@ -0,0 +1,16 @@
+export const spacing = {
+  spacing0: 0,
+  spacing0_25: 2,
+  spacing0_5: 4,
+  spacing1: 8,
+  spacing1_5: 12,
+  spacing2: 16,
+  spacing3: 24,
+  spacing4: 32,
+  spacing5: 40,
+  spacing6: 48,
+  spacing7: 56,
+  spacing8: 64,
+  spacing9: 72,
+  spacing10: 80,
+};

src/js/spacing/types.ts

@@ -0,0 +1,3 @@
+export interface SpacingSizes {
+  spacing: number;
+}