include non colors from theme 1

jpmorganchase · Mar 20, 2024 · cae97df · cae97df
1 parent 3ad06e2
commit cae97df
Show file tree

Hide file tree

Showing 3 changed files with 704 additions and 21 deletions.
diff --git a/packages/theme/json/parsers/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js
@@ -25,7 +25,21 @@ const mdVariables = {};
 const ldVariables = {};
 const tdVariables = {};
 
-function processFile(filePath) {
+function isNonColor(token) {
+  const tokenParts = token.split("-");
+  const isColor = tokenParts.find((part) =>
+    [
+      "borderColor",
+      "foreground",
+      "background",
+      "outlineColor",
+      "indicator",
+    ].includes(part)
+  );
+  return !isColor;
+}
+
+function processFile(filePath, nonColors) {
   // Process CSS files
   const cssContent = fs.readFileSync(filePath, "utf8");
 
@@ -54,50 +68,99 @@ function processFile(filePath) {
   if (lightContent) {
     while ((match = cssVariableRegex.exec(lightContent[0])) !== null) {
       const variableName = match[1];
-      const variableValue = match[2].trim();
-      lightModeVariables[variableName] = variableValue;
+      if (nonColors) {
+        if (isNonColor(variableName)) {
+          const variableValue = match[2].trim();
+          lightModeVariables[variableName] = variableValue;
+        }
+      } else {
+        const variableValue = match[2].trim();
+        lightModeVariables[variableName] = variableValue;
+      }
     }
   }
   if (darkContent) {
     while ((match = cssVariableRegex.exec(darkContent[0])) !== null) {
       const variableName = match[1];
-      const variableValue = match[2].trim();
-      darkModeVariables[variableName] = variableValue;
+      if (nonColors) {
+        if (isNonColor(variableName)) {
+          const variableValue = match[2].trim();
+          darkModeVariables[variableName] = variableValue;
+        }
+      } else {
+        const variableValue = match[2].trim();
+        darkModeVariables[variableName] = variableValue;
+      }
     }
   }
   if (hdContent) {
     while ((match = cssVariableRegex.exec(hdContent[0])) !== null) {
       const variableName = match[1];
-      const variableValue = match[2].trim();
-      hdVariables[variableName] = variableValue;
+      if (nonColors) {
+        if (isNonColor(variableName)) {
+          const variableValue = match[2].trim();
+          hdVariables[variableName] = variableValue;
+        }
+      } else {
+        const variableValue = match[2].trim();
+        hdVariables[variableName] = variableValue;
+      }
     }
   }
   if (mdContent) {
     while ((match = cssVariableRegex.exec(mdContent[0])) !== null) {
       const variableName = match[1];
-      const variableValue = match[2].trim();
-      mdVariables[variableName] = variableValue;
+      if (nonColors) {
+        if (isNonColor(variableName)) {
+          const variableValue = match[2].trim();
+          mdVariables[variableName] = variableValue;
+        }
+      } else {
+        const variableValue = match[2].trim();
+        mdVariables[variableName] = variableValue;
+      }
     }
   }
   if (ldContent) {
     while ((match = cssVariableRegex.exec(ldContent[0])) !== null) {
       const variableName = match[1];
-      const variableValue = match[2].trim();
-      ldVariables[variableName] = variableValue;
+      if (nonColors) {
+        if (isNonColor(variableName)) {
+          const variableValue = match[2].trim();
+          ldVariables[variableName] = variableValue;
+        }
+      } else {
+        const variableValue = match[2].trim();
+        ldVariables[variableName] = variableValue;
+      }
     }
   }
   if (tdContent) {
     while ((match = cssVariableRegex.exec(tdContent[0])) !== null) {
       const variableName = match[1];
-      const variableValue = match[2].trim();
-      tdVariables[variableName] = variableValue;
+      if (nonColors) {
+        if (isNonColor(variableName)) {
+          const variableValue = match[2].trim();
+          tdVariables[variableName] = variableValue;
+        }
+      } else {
+        const variableValue = match[2].trim();
+        tdVariables[variableName] = variableValue;
+      }
     }
   }
   if (generalContent) {
     while ((match = cssVariableRegex.exec(generalContent[0])) !== null) {
       const variableName = match[1];
-      const variableValue = match[2].trim();
-      cssVariables[variableName] = variableValue;
+      if (nonColors) {
+        if (isNonColor(variableName)) {
+          const variableValue = match[2].trim();
+          cssVariables[variableName] = variableValue;
+        }
+      } else {
+        const variableValue = match[2].trim();
+        cssVariables[variableName] = variableValue;
+      }
     }
   }
 }
@@ -119,7 +182,7 @@ module.exports = {
       general: cssVariables,
     };
   },
-  fromDir: function getCssVariablesFromDir(dirPath) {
+  fromDir: function getCssVariablesFromDir(dirPath, nonColors) {
     const files = fs.readdirSync(dirPath);
     const foundations = files.map((file) => file.replace(".css", ""));
     files.forEach((file) => {
@@ -136,7 +199,7 @@ module.exports = {
         !foundations.includes(`${fileName}-next`) &&
         fileName !== "fade"
       ) {
-        processFile(filePath);
+        processFile(filePath, nonColors);
       }
     });
 

diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js
@@ -264,15 +264,14 @@ function format(variables) {
         if (tokenParts.find((part) => part === "textTransform")) {
           type = "textTransform";
         }
-        if (tokenParts.find((part) => part === "fontStyle")) {
-          type = "fontStyle";
-        }
         if (tokenParts.find((part) => part === "fontWeight")) {
           // Do we want to group text e.g. h1, h2?
           type = "fontWeight";
+          tokenValue = formatCharacteristicValue(tokenValue);
         }
         if (tokenParts.find((part) => part === "fontFamily")) {
           type = "fontFamily";
+          tokenValue = formatCharacteristicValue(tokenValue);
         }
         if (tokenParts.find((part) => part === "fontSize")) {
           type = "fontSize";
@@ -311,12 +310,20 @@ function themeToJson() {
   const foundationVariables = fromDir(
     path.resolve(__dirname, "../../css/foundations")
   );
-  const characteristicVariables = fromFile(
+  let characteristicVariables = fromFile(
     path.resolve(
       __dirname,
       "../../css/characteristics/characteristics-next.css"
     )
   );
+  let characteristicsNonColors = fromDir(
+    path.resolve(__dirname, "../../css/characteristics"),
+    true
+  );
+  characteristicVariables = {
+    ...characteristicVariables,
+    ...characteristicsNonColors,
+  };
   format({
     $light: {
       ...paletteVariables.light,