From d44d5ecc3599ba5229428aaef69c45b20ee269f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Tue, 22 Aug 2023 08:35:32 -0300
Subject: [PATCH] update (style-dictionary): adding variables

---
 design-system/style-dictionary/README.md      | 10 ++++++---
 .../style-dictionary/build/css/variables.css  |  2 +-
 .../style-dictionary/config-classes.js        | 22 ++++++-------------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/design-system/style-dictionary/README.md b/design-system/style-dictionary/README.md
index 6589e04..991a1cd 100644
--- 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
index 2650eac..1072208 100644
--- 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
index 5500e99..9ead1e7 100644
--- 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"
         }
       ]
     }