Add the `size` token

Nate Butler created 

Introduces the `size` token, a token that will be used for defining standardized sizes for paddings, margins & borders.

Available sizes are `px`, `xs`, `sm`, `md`, `lg`, `xl`

- Adds `size`, types, and token
- Adds the size() function

Change summary

styles/src/tokens.ts | 27 +++++++++++++++++++++++++++
1 file changed, 27 insertions(+)

Detailed changes

styles/src/tokens.ts 🔗 

@@ -65,6 +65,32 @@ export const fontWeights = {
   "black": fontWeight("black"),
 }
 
+// Standard size unit used for paddings, margins, borders, etc.
+export type Size =
+  | "px"
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl";
+
+export const sizes = {
+  px: 1,
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+};
+
+export type SizeToken = Token<Size, "size">;
+function size(value: Size): SizeToken {
+  return {
+    value,
+    type: "size"
+  };
+}
+
 export type Color = string;
 export interface ColorToken {
   value: Color,
@@ -104,5 +130,6 @@ export default {
   fontFamilies,
   fontSizes,
   fontWeights,
+  size,
   colors,
 };