From 33b471f9bb10fc0c38cbe20764b16844496525b0 Mon Sep 17 00:00:00 2001
From: nathanyoung <1447339+nathanyoung@users.noreply.github.com>
Date: Thu, 2 May 2024 11:56:00 -0700
Subject: [PATCH] BREAKING CHANGE: do not generate semantic colors

---
 build.js                                      | 26 ++++++++++++++-----
 config.json                                   |  7 ++++-
 .../parseFigmaDocumentTokens.js               | 20 +++++++++-----
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/build.js b/build.js
index 1741199..50e24a5 100644
--- a/build.js
+++ b/build.js
@@ -1,4 +1,5 @@
 require('dotenv').config();
+const util = require('util');
 const fse = require('fs-extra');
 const StyleDictionary = require('style-dictionary');
 const getFigmaDocument = require('./utils/getFigmaDocument/getFigmaDocument');
@@ -37,6 +38,16 @@ StyleDictionary.registerFilter({
     prop.attributes.category === 'color' && prop.attributes.type === 'brand',
 });
 
+StyleDictionary.registerFilter({
+  name: 'isColor',
+  matcher: token => token.attributes.category === 'color',
+});
+
+StyleDictionary.registerFilter({
+  name: 'isDarkColor',
+  matcher: token => token.darkValue && token.attributes.category === 'color',
+});
+
 // Custom Formats
 StyleDictionary.registerFormat(utilityClass);
 StyleDictionary.registerFormat(cssVariablesFont);
@@ -60,7 +71,7 @@ const FIGMA_TOKENS_DOCUMENT = 'abGRptpr7iPaMsXdEPVm6W';
  * Ideally the figma file version _label_ and the npm package version will match
  * but it is not required.
  */
-const FIGMA_FILE_VERSION = '5496945385';
+const FIGMA_FILE_VERSION = '5680304673';
 
 /**
  * Read tokens from FIGMA file.
@@ -80,12 +91,13 @@ getFigmaDocument(FIGMA_TOKENS_DOCUMENT, FIGMA_FILE_VERSION)
      */
     let properties = parseFigmaDocumentTokens(figmaJson.document);
 
-    /**
-     * Generate semantic (light, lighter, etc...) colors
-     * from lightness numbers (50, 100, etc...)
-     * It keeps the original colors as well as the semantic versions.
-     */
-    properties = mapSemanticColors(properties);
+    console.log(
+      util.inspect(properties, {
+        showHidden: false,
+        depth: null,
+        colors: true,
+      }),
+    );
 
     /**
      * Apply the configuration.
diff --git a/config.json b/config.json
index 9848a11..83fd40d 100644
--- a/config.json
+++ b/config.json
@@ -42,7 +42,12 @@
         {
           "destination": "variables-color.css",
           "format": "css/variables",
-          "filter": "isBrandColor"
+          "filter": "isColor"
+        },
+        {
+          "destination": "variables-color-dark.css",
+          "format": "css/variables",
+          "filter": "isDarkColor"
         },
         {
           "destination": "variables-size.css",
diff --git a/utils/parseFigmaDocumentTokens/parseFigmaDocumentTokens.js b/utils/parseFigmaDocumentTokens/parseFigmaDocumentTokens.js
index d23a509..b558183 100644
--- a/utils/parseFigmaDocumentTokens/parseFigmaDocumentTokens.js
+++ b/utils/parseFigmaDocumentTokens/parseFigmaDocumentTokens.js
@@ -1,12 +1,20 @@
 const figmaDocumentReducer = (acc, current) => {
   if (current.children) {
-    let value = current.children.find(child => child.type === 'TEXT' && child.name === 'value');
-    let unit = current.children.find(child => child.type === 'TEXT' && child.name === 'unit');
+    let value = current.children.find(
+      child => child.type === 'TEXT' && child.name === 'value',
+    );
+    let darkValue = current.children.find(
+      child => child.type === 'TEXT' && child.name === 'darkValue',
+    );
+    let unit = current.children.find(
+      child => child.type === 'TEXT' && child.name === 'unit',
+    );
     if (value) {
       acc[current.name] = {
         value: value.characters,
-        ...unit && { unit: unit.characters },
-      }
+        ...(unit && { unit: unit.characters }),
+        ...(darkValue && { darkValue: darkValue.characters }),
+      };
     } else {
       acc[current.name] = current.children.reduce(figmaDocumentReducer, {});
     }
@@ -14,7 +22,7 @@ const figmaDocumentReducer = (acc, current) => {
   return acc;
 };
 
-const parseFigmaDocumentTokens = (document) => document.children.reduce(figmaDocumentReducer, {});
+const parseFigmaDocumentTokens = document =>
+  document.children.reduce(figmaDocumentReducer, {});
 
 module.exports = parseFigmaDocumentTokens;
-