From 0cc5a3839dd5df9ce3964e1302d774f24eca61b8 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Thu, 28 Apr 2022 12:31:44 -0400
Subject: [PATCH] Add the `size` token

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
---
 styles/src/tokens.ts | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/styles/src/tokens.ts b/styles/src/tokens.ts
index 4e97d8ea79..bde1c0aa2c 100644
--- a/styles/src/tokens.ts
+++ b/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,
 };