update (style-dictionary): adding variables

santanche · Aug 22, 2023 · d44d5ec · d44d5ec
1 parent 3114730
commit d44d5ec
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 19 deletions.
diff --git a/design-system/style-dictionary/README.md b/design-system/style-dictionary/README.md
@@ -13,7 +13,7 @@ npx style-dictionary init complete
 
 In this case, you must:
 * replace the `config.json` with our `config.js` to customize transformations, focusing on CSS;
-* replace the initial generated tokens (`token` folder) with our tokens to use them.
+* replace the initially generated tokens (`token` folder) with our tokens to use them.
 
 ## Build
 
@@ -31,11 +31,15 @@ npx style-dictionary build --config ./config-classes.js
 
 * `config.js` -- default file
   * `transform`: add specialized measures to the CSS output -- add the `rem` measure to shape specifications;
+  * `format`:
+    * `css/variables.css`: JSON tokens transformed in CSS variables.
+
 * `config-classes.js`
   * `transform`: add specialized measures to the CSS output -- add the `rem` measure to shape specifications;
   * `format`: customized formats that load an extra `classes.json` file and generate:
-    * `classes/classes-resolved.json`: transforms classes.json tokens in their respective values;
-    * `css/classes-tokens.css`: transforms in CSS converting first-level properties in CSS classes and tokens to CSS variables;
+    * `classes/classes-resolved.json`: JSON classes with tokens transformed in their respective values;
+    * `css/variables.css`: JSON tokens transformed in CSS variables;
+    * `css/classes-tokens.css`: JSON classes transformed in CSS converting first-level properties in CSS classes and tokens to CSS variables;
     * `css/classes-resolved.css`: same as the previous, but converting tokens in their respective values;
     * `intermediary/aggregated-tokens.json`: an auxiliary file aggregating all tokens in a single hierarchical file.
 

diff --git a/design-system/style-dictionary/build/css/variables.css b/design-system/style-dictionary/build/css/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 20 Aug 2023 23:14:57 GMT
+ * Generated on Tue, 22 Aug 2023 11:25:09 GMT
  */
 
 :root {

diff --git a/design-system/style-dictionary/config-classes.js b/design-system/style-dictionary/config-classes.js
@@ -123,33 +123,25 @@ module.exports = {
       'transforms': StyleDictionary.transformGroup['css'].concat(['shape/rem']),
       "buildPath": "build/",
       "files": [
+        {
+          "format": "css/variables",
+          "destination": "css/variables.css"
+        },
         {
           "format": "jsonAggregatedFormat",
-          "destination": "intermediary/aggregated-tokens.json",
-          "options": {
-            "showFileHeader": false
-          }
+          "destination": "intermediary/aggregated-tokens.json"
         },
         {
           "format": "jsonResolvedFormat",
-          "destination": "classes/classes-resolved.json",
-          "options": {
-            "showFileHeader": false
-          }
+          "destination": "classes/classes-resolved.json"
         },
         {
           "format": "cssClassFormat",
           "destination": "css/classes-tokens.css",
-          "options": {
-            "showFileHeader": false
-          }
         },
         {
           "format": "cssResolvedClassFormat",
-          "destination": "css/classes-resolved.css",
-          "options": {
-            "showFileHeader": false
-          }
+          "destination": "css/classes-resolved.css"
         }
       ]
     }