Refactors code to generate style-dictionary tokens

Author: calitb

style-dictionary-dist/button_variables.js

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 28 Jun 2021 19:26:48 GMT
+// Generated on Fri, 02 Jul 2021 05:56:45 GMT
 
 $tw-clr-btn-destructive-primary-fill: #d40002;
 $tw-clr-btn-destructive-sold-fill-active: #ad0001;
@@ -38,6 +38,10 @@ $tw-sz-btn-small-min-width: 80px;
 $tw-sz-btn-medium-min-width: 100px;
 $tw-sz-btn-large-min-width: 120px;
 $tw-sz-btn-x-large-min-width: 140px;
+$tw-sz-btn-small-icon: $tw-fnt-btn-label-small-line-height;
+$tw-sz-btn-medium-icon: $tw-fnt-btn-label-medium-line-height;
+$tw-sz-btn-large-icon: $tw-fnt-btn-label-large-line-height;
+$tw-sz-btn-x-large-icon: $tw-fnt-btn-label-x-large-line-height;
 $tw-sz-btn-stroke: 2px;
 $tw-sz-btn-stroke-focus: 2px;
 $tw-fnt-btn-label-large-font-family: 'Inter', 'Inter-SemiBold';
@@ -58,9 +62,9 @@ $tw-fnt-btn-label-small-letter-spacing: 0px;
 $tw-fnt-btn-label-small-line-height: 20px;
 $tw-fnt-btn-label-small-font-weight: 600;
 $tw-fnt-btn-label-small-color: black;
-$tw-fnt-btn-label-xlarge-font-family: 'Inter', 'Inter-SemiBold';
-$tw-fnt-btn-label-xlarge-font-size: 24px;
-$tw-fnt-btn-label-xlarge-letter-spacing: 0px;
-$tw-fnt-btn-label-xlarge-line-height: 32px;
-$tw-fnt-btn-label-xlarge-font-weight: 600;
-$tw-fnt-btn-label-xlarge-color: black;
+$tw-fnt-btn-label-x-large-font-family: 'Inter', 'Inter-SemiBold';
+$tw-fnt-btn-label-x-large-font-size: 24px;
+$tw-fnt-btn-label-x-large-letter-spacing: 0px;
+$tw-fnt-btn-label-x-large-line-height: 32px;
+$tw-fnt-btn-label-x-large-font-weight: 600;
+$tw-fnt-btn-label-x-large-color: black;

style-dictionary-dist/button_variables.scss

@@ -0,0 +1,25 @@
+function build(source, destination) {
+  const StyleDictionary = require('style-dictionary').extend({
+    "source": source,
+    "platforms": {
+      "scss": {
+        "transformGroup": "scss",
+        "transforms": ["name/css_colors", "name/css_size", "name/css_typography"],
+        "buildPath": "../style-dictionary-dist/",
+        "files": [{
+          "format": "scss/variables",
+          "destination": destination,
+        }]
+      }
+    }
+  });
+  
+  StyleDictionary.registerTransform(require('./transforms/name_css_colors.js'));
+  StyleDictionary.registerTransform(require('./transforms/name_css_typography.js'));
+  StyleDictionary.registerTransform(require('./transforms/name_css_size.js'));
+  
+  StyleDictionary.buildAllPlatforms();
+}
+
+build(["./json/button/**/*.json"], "button_variables.scss");
+build(["./json/system/**/*.json"], "system_variables.scss");

style-dictionary-dist/system_variables.js

@@ -2,15 +2,15 @@
 
 rm -r style-dictionary-dist
 mkdir style-dictionary-dist
+rm -r style-dictionary/json
+mkdir -p style-dictionary/json/system
+mkdir -p style-dictionary/json/button
 
-cd style-dictionary/system
-curl https://terraformation.zeroheight.com/api/token_file/59958aac0858/share > colors.json
-node build.js
-
-cd ../button
-curl https://terraformation.zeroheight.com/api/token_file/cb5cd890ddf4/share > typography.json
-curl https://terraformation.zeroheight.com/api/token_file/2f90d49d4334/share > productive-colors.json
-curl https://terraformation.zeroheight.com/api/token_file/5e072293caf0/share > passive-colors.json
-curl https://terraformation.zeroheight.com/api/token_file/a170e0886291/share > destructive-colors.json
-curl https://terraformation.zeroheight.com/api/token_file/cfb0cfaf26bf/share > size.json
+cd style-dictionary
+curl https://terraformation.zeroheight.com/api/token_file/59958aac0858/share > json/system/colors.json
+curl https://terraformation.zeroheight.com/api/token_file/cb5cd890ddf4/share > json/button/typography.json
+curl https://terraformation.zeroheight.com/api/token_file/2f90d49d4334/share > json/button/productive-colors.json
+curl https://terraformation.zeroheight.com/api/token_file/5e072293caf0/share > json/button/passive-colors.json
+curl https://terraformation.zeroheight.com/api/token_file/a170e0886291/share > json/button/destructive-colors.json
+curl https://terraformation.zeroheight.com/api/token_file/cfb0cfaf26bf/share > json/button/size.json
 node build.js

style-dictionary/build.js

@@ -1 +1 @@
-{"Button":{"Small Height [$tw-sz-btn-small-height]":{"value":"32px"},"Medium Height [$tw-sz-btn-medium-height]":{"value":"40px"},"Large Height [$tw-sz-btn-large-height]":{"value":"48px"},"X-Large Height [$tw-sz-btn-x-large-height]":{"value":"56px"},"Small Min-Width [$tw-sz-btn-small-min-width]":{"value":"80px"},"Medium Min-Width [$tw-sz-btn-medium-min-width]":{"value":"100px"},"Large Min-Width [$tw-sz-btn-large-min-width]":{"value":"120px"},"X-Large Min-Width [$tw-sz-btn-x-large-min-width]":{"value":"140px"},"Stroke [$tw-sz-btn-stroke]":{"value":"2px"},"Stroke Focus [$tw-sz-btn-stroke-focus]":{"value":"2px"}}}
+{"Button":{"Small Height [$tw-sz-btn-small-height]":{"value":"32px"},"Medium Height [$tw-sz-btn-medium-height]":{"value":"40px"},"Large Height [$tw-sz-btn-large-height]":{"value":"48px"},"X-Large Height [$tw-sz-btn-x-large-height]":{"value":"56px"},"Small Min-Width [$tw-sz-btn-small-min-width]":{"value":"80px"},"Medium Min-Width [$tw-sz-btn-medium-min-width]":{"value":"100px"},"Large Min-Width [$tw-sz-btn-large-min-width]":{"value":"120px"},"X-Large Min-Width [$tw-sz-btn-x-large-min-width]":{"value":"140px"},"Small Icon [$tw-sz-btn-small-icon]":{"value":"$tw-fnt-btn-label-small-line-height"},"Medium Icon [$tw-sz-btn-medium-icon]":{"value":"$tw-fnt-btn-label-medium-line-height"},"Large Icon [$tw-sz-btn-large-icon]":{"value":"$tw-fnt-btn-label-large-line-height"},"X-Large Icon [$tw-sz-btn-x-large-icon]":{"value":"$tw-fnt-btn-label-x-large-line-height"},"Stroke [$tw-sz-btn-stroke]":{"value":"2px"},"Stroke Focus [$tw-sz-btn-stroke-focus]":{"value":"2px"}}}