docs: width and height tokens (#231)

* feat: width and height tokens

* move to top level

* don't show pixel value for percentages

* update docs

src/docs/Height.stories.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import sizes from '@palmetto/palmetto-design-tokens/build/js/variables-size';
+import { PALMETTO_HEIGHT_OPTIONS, PALMETTO_HEIGHT_VALUES } from '../lib/tokens';
+
+<Meta
+  title="Design Tokens/Height"
+/>
+
+# Height
+
+Standard heights have been defined based on percentages or `rem`.
+
+Rem based values will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table>
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+      <th>notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    {PALMETTO_HEIGHT_OPTIONS.map((height, i) => (
+      <tr key={i}>
+        <td><code>{`size-height-${height}`}</code></td>
+        <td><code>{height}</code></td>
+        <td>{PALMETTO_HEIGHT_VALUES[i].value}</td>
+        <td>{height === 'base' ? '16' : PALMETTO_HEIGHT_VALUES[i].value.includes('%') ? '' : PALMETTO_HEIGHT_VALUES[i].original.value * 16}</td>
+        <td>{PALMETTO_HEIGHT_VALUES[i].original.comment}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+

src/docs/Width.stories.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import sizes from '@palmetto/palmetto-design-tokens/build/js/variables-size';
+import { PALMETTO_WIDTH_OPTIONS, PALMETTO_WIDTH_VALUES } from '../lib/tokens';
+
+<Meta
+  title="Design Tokens/Width"
+/>
+
+# Width
+
+Standard widths have been defined based on percentages or `rem`.
+
+Rem based values will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table>
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+      <th>notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    {PALMETTO_WIDTH_OPTIONS.map((width, i) => (
+      <tr key={i}>
+        <td><code>{`size-width-${width}`}</code></td>
+        <td><code>{width}</code></td>
+        <td>{PALMETTO_WIDTH_VALUES[i].value}</td>
+        <td>{width === 'base' ? '16' : PALMETTO_WIDTH_VALUES[i].value.includes('%') ? '' : PALMETTO_WIDTH_VALUES[i].original.value * 16}</td>
+        <td>{PALMETTO_WIDTH_VALUES[i].original.comment}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+

src/lib/tokens.ts

@@ -76,3 +76,9 @@ export const PALMETTO_BRAND_COLOR_VALUES = colors.color.brand;
 
 export const PALMETTO_SPACING_OPTIONS = Object.keys(sizes.size.spacing);
 export const PALMETTO_SPACING_VALUES = Object.values(sizes.size.spacing);
+
+export const PALMETTO_WIDTH_OPTIONS = Object.keys(sizes.size.width);
+export const PALMETTO_WIDTH_VALUES = Object.values(sizes.size.width);
+
+export const PALMETTO_HEIGHT_OPTIONS = Object.keys(sizes.size.height);
+export const PALMETTO_HEIGHT_VALUES = Object.values(sizes.size.height);