From 7bc6f8b5eed929d7ea6f002cf05d8866e9258ff5 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 20 Apr 2022 15:30:33 -0400
Subject: [PATCH] Build tokens for Figma

---
 styles/dist/dark.json   | 44 ++++++++++++++++++++
 styles/dist/light.json  | 48 ++++++++++++++++++++-
 styles/dist/tokens.json | 92 ++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 180 insertions(+), 4 deletions(-)

diff --git a/styles/dist/dark.json b/styles/dist/dark.json
index 0aed7aa7b7..872e1d1280 100644
--- a/styles/dist/dark.json
+++ b/styles/dist/dark.json
@@ -173,6 +173,50 @@
         "type": "color"
       }
     },
+    "on300": {
+      "base": {
+        "value": "#0e0e0e80",
+        "step": 850,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#070707",
+        "step": 875,
+        "type": "color"
+      },
+      "active": {
+        "value": "#000000",
+        "step": 900,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#070707",
+        "step": 875,
+        "type": "color"
+      }
+    },
+    "on500": {
+      "base": {
+        "value": "#0e0e0e",
+        "step": 850,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#1c1c1c",
+        "step": 800,
+        "type": "color"
+      },
+      "active": {
+        "value": "#232323",
+        "step": 775,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#1c1c1c",
+        "step": 800,
+        "type": "color"
+      }
+    },
     "ok": {
       "base": {
         "value": "#1b9447",
diff --git a/styles/dist/light.json b/styles/dist/light.json
index 897b03a6fd..cb94077e95 100644
--- a/styles/dist/light.json
+++ b/styles/dist/light.json
@@ -141,8 +141,8 @@
         "type": "color"
       },
       "active": {
-        "value": "#dcdcdc",
-        "step": 125,
+        "value": "#e3e3e3",
+        "step": 100,
         "type": "color"
       },
       "focused": {
@@ -173,6 +173,50 @@
         "type": "color"
       }
     },
+    "on300": {
+      "base": {
+        "value": "#f1f1f1",
+        "step": 50,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      },
+      "active": {
+        "value": "#d5d5d5",
+        "step": 150,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      }
+    },
+    "on500": {
+      "base": {
+        "value": "#f1f1f1",
+        "step": 50,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#f8f8f8",
+        "step": 25,
+        "type": "color"
+      },
+      "active": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#f8f8f8",
+        "step": 25,
+        "type": "color"
+      }
+    },
     "ok": {
       "base": {
         "value": "#b7f9ce",
diff --git a/styles/dist/tokens.json b/styles/dist/tokens.json
index dc9438cdc7..2d52abc280 100644
--- a/styles/dist/tokens.json
+++ b/styles/dist/tokens.json
@@ -1329,6 +1329,50 @@
           "type": "color"
         }
       },
+      "on300": {
+        "base": {
+          "value": "#0e0e0e80",
+          "step": 850,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#070707",
+          "step": 875,
+          "type": "color"
+        },
+        "active": {
+          "value": "#000000",
+          "step": 900,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#070707",
+          "step": 875,
+          "type": "color"
+        }
+      },
+      "on500": {
+        "base": {
+          "value": "#0e0e0e",
+          "step": 850,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#1c1c1c",
+          "step": 800,
+          "type": "color"
+        },
+        "active": {
+          "value": "#232323",
+          "step": 775,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#1c1c1c",
+          "step": 800,
+          "type": "color"
+        }
+      },
       "ok": {
         "base": {
           "value": "#1b9447",
@@ -1934,8 +1978,8 @@
           "type": "color"
         },
         "active": {
-          "value": "#dcdcdc",
-          "step": 125,
+          "value": "#e3e3e3",
+          "step": 100,
           "type": "color"
         },
         "focused": {
@@ -1966,6 +2010,50 @@
           "type": "color"
         }
       },
+      "on300": {
+        "base": {
+          "value": "#f1f1f1",
+          "step": 50,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#e3e3e3",
+          "step": 100,
+          "type": "color"
+        },
+        "active": {
+          "value": "#d5d5d5",
+          "step": 150,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#e3e3e3",
+          "step": 100,
+          "type": "color"
+        }
+      },
+      "on500": {
+        "base": {
+          "value": "#f1f1f1",
+          "step": 50,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#f8f8f8",
+          "step": 25,
+          "type": "color"
+        },
+        "active": {
+          "value": "#ffffff",
+          "step": 0,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#f8f8f8",
+          "step": 25,
+          "type": "color"
+        }
+      },
       "ok": {
         "base": {
           "value": "#b7f9ce",