Build tokens for Figma

Nate Butler created 3 years ago

Change summary

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

Detailed changes

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",

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",

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",