build: filter light tokens into separate files for export

build: Filter light tokens
Fullscript · Aug 10, 2022 · 39eed2e · 39eed2e
2 parents b24593b + 2a43da9
commit 39eed2e
Show file tree

Hide file tree

Showing 18 changed files with 520 additions and 101 deletions.
diff --git a/.github/workflows/build-tokens.yml b/.github/workflows/build-tokens.yml
@@ -5,7 +5,6 @@ on:
     paths:
       - "data/light.json"
       - "data/core.json"
-      - "config.json"
       - "build.js"
     branches-ignore:
       - "main"

diff --git a/build.js b/build.js
@@ -1,4 +1,4 @@
-const StyleDictionary = require("style-dictionary").extend("config.json");
+const StyleDictionary = require("style-dictionary");
 const ChangeCase = require("change-case");
 
 function isStringPxValue(token) {
@@ -72,87 +72,97 @@ StyleDictionary.registerTransformGroup({
   ],
 });
 
-StyleDictionary.extend({
-  platforms: {
-    Owlery: {
-      transformGroup: "custom/aviary",
-      buildPath: "build/scss/",
-      files: [
-        {
-          destination: "typography.scss",
-          format: "scss/variables",
-          filter: "filter-typography",
-        },
-        {
-          destination: "colors.scss",
-          format: "scss/variables",
-          filter: {
-            type: "color",
+const getStyleDictionaryConfig = (theme) => {
+  const core = theme === "core";
+  return {
+    source: [`transformed/transformed-${theme}.json`],
+    platforms: {
+      Owlery: {
+        transformGroup: "custom/aviary",
+        buildPath: "build/scss/",
+        files: [
+          {
+            destination: `typography.scss`,
+            format: "scss/variables",
+            filter: "filter-typography",
           },
-        },
-      ],
-    },
+          {
+            destination: core ? "colors.scss" : `themes/${theme}.scss`,
+            format: "scss/variables",
+            filter: {
+              type: "color",
+            },
+          },
+        ],
+      },
 
-    Aviary: {
-      transformGroup: "custom/aviary",
-      buildPath: "build/ts/",
-      files: [
-        {
-          format: "javascript/module-flat",
-          destination: "typography.js",
-          filter: "filter-typography",
-        },
-        {
-          format: "typescript/es6-declarations",
-          destination: "typography.d.ts",
-          filter: "filter-typography",
-        },
-        {
-          format: "javascript/module-flat",
-          destination: "colors.js",
-          filter: {
-            type: "color",
+      Aviary: {
+        transformGroup: "custom/aviary",
+        buildPath: "build/ts/",
+        files: [
+          {
+            format: "javascript/module-flat",
+            destination: "typography.js",
+            filter: "filter-typography",
           },
-        },
-        {
-          format: "typescript/es6-declarations",
-          destination: "colors.d.ts",
-          filter: {
-            type: "color",
+          {
+            format: "typescript/es6-declarations",
+            destination: "typography.d.ts",
+            filter: "filter-typography",
           },
-        },
-      ],
-    },
+          {
+            format: "javascript/module-flat",
+            destination: core ? "colors.js" : `themes/${theme}.js`,
+            filter: {
+              type: "color",
+            },
+          },
+          {
+            format: "typescript/es6-declarations",
+            destination: core ? "colors.d.ts" : `themes/${theme}.d.ts`,
+            filter: {
+              type: "color",
+            },
+          },
+        ],
+      },
 
-    Native: {
-      transformGroup: "custom/native",
-      buildPath: "build/native/",
-      files: [
-        {
-          format: "javascript/module-flat",
-          destination: "typography.js",
-          filter: "filter-typography",
-        },
-        {
-          format: "typescript/es6-declarations",
-          destination: "typography.d.ts",
-          filter: "filter-typography",
-        },
-        {
-          format: "javascript/module-flat",
-          destination: "colors.js",
-          filter: {
-            type: "color",
+      Native: {
+        transformGroup: "custom/native",
+        buildPath: "build/native/",
+        files: [
+          {
+            format: "javascript/module-flat",
+            destination: "typography.js",
+            filter: "filter-typography",
           },
-        },
-        {
-          format: "typescript/es6-declarations",
-          destination: "colors.d.ts",
-          filter: {
-            type: "color",
+          {
+            format: "typescript/es6-declarations",
+            destination: "typography.d.ts",
+            filter: "filter-typography",
           },
-        },
-      ],
+          {
+            format: "javascript/module-flat",
+            destination: core ? "colors.js" : `themes/${theme}.js`,
+            filter: {
+              type: "color",
+            },
+          },
+          {
+            format: "typescript/es6-declarations",
+            destination: core ? "colors.d.ts" : `themes/${theme}.d.ts`,
+            filter: {
+              type: "color",
+            },
+          },
+        ],
+      },
     },
-  },
-}).buildAllPlatforms();
+  };
+};
+
+// Add themes to the array to create theme-specific files under themes folder
+// "core" theme will build files outside of the themes folder
+["core", "light"].map((theme) => {
+  StyleDictionary.extend(getStyleDictionaryConfig(theme)).buildAllPlatforms();
+});
diff --git a/build/native/colors.d.ts b/build/native/colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Aug 2022 16:30:42 GMT
+ * Generated on Tue, 09 Aug 2022 21:44:08 GMT
  */
 
 export const green100 : string;
@@ -53,4 +53,4 @@ export const grey700 : string;
 export const grey800 : string;
 export const white : string;
 export const black : string;
-export const transparent : string;
+export const transparent : string;
diff --git a/build/native/colors.js b/build/native/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Aug 2022 16:30:42 GMT
+ * Generated on Tue, 09 Aug 2022 21:44:08 GMT
  */
 
 module.exports = {
@@ -55,4 +55,4 @@ module.exports = {
   "white": "#FFFFFF",
   "black": "#000000",
   "transparent": "transparent"
-};
+};
diff --git a/build/native/themes/light.d.ts b/build/native/themes/light.d.ts
@@ -0,0 +1,82 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 09 Aug 2022 21:44:09 GMT
+ */
+
+export const textBase : string;
+export const textEmphasis : string;
+export const textSubdued : string;
+export const surfaceLevel0 : string;
+export const surfaceLevel1 : string;
+export const surfaceLevel2 : string;
+export const surfaceLevel3 : string;
+export const primaryTextBase : string;
+export const primaryTextHover : string;
+export const primaryTextActive : string;
+export const primaryBackgroundBase : string;
+export const primaryBackgroundHover : string;
+export const primaryBackgroundActive : string;
+export const primaryBackgroundMuted : string;
+export const primaryBackgroundMutedHover : string;
+export const primaryBackgroundMutedActive : string;
+export const primaryBackgroundBox : string;
+export const primaryBorderBase : string;
+export const primaryBorderHover : string;
+export const primaryBorderActive : string;
+export const infoTextBase : string;
+export const infoTextHover : string;
+export const infoTextActive : string;
+export const infoBackgroundBase : string;
+export const infoBackgroundHover : string;
+export const infoBackgroundActive : string;
+export const infoBackgroundMuted : string;
+export const infoBackgroundMutedHover : string;
+export const infoBackgroundMutedActive : string;
+export const infoBackgroundBox : string;
+export const infoBorderBase : string;
+export const infoBorderHover : string;
+export const infoBorderActive : string;
+export const warningTextBase : string;
+export const warningTextHover : string;
+export const warningTextActive : string;
+export const warningBackgroundBase : string;
+export const warningBackgroundHover : string;
+export const warningBackgroundActive : string;
+export const warningBackgroundMuted : string;
+export const warningBackgroundMutedHover : string;
+export const warningBackgroundMutedActive : string;
+export const warningBackgroundBox : string;
+export const warningBorderBase : string;
+export const warningBorderHover : string;
+export const warningBorderActive : string;
+export const dangerTextBase : string;
+export const dangerTextHover : string;
+export const dangerTextActive : string;
+export const dangerBackgroundBase : string;
+export const dangerBackgroundHover : string;
+export const dangerBackgroundActive : string;
+export const dangerBackgroundMuted : string;
+export const dangerBackgroundMutedHover : string;
+export const dangerBackgroundMutedActive : string;
+export const dangerBackgroundBox : string;
+export const dangerBorderBase : string;
+export const dangerBorderHover : string;
+export const dangerBorderActive : string;
+export const highlightTextBase : string;
+export const highlightTextHover : string;
+export const highlightTextActive : string;
+export const highlightBackgroundBase : string;
+export const highlightBackgroundHover : string;
+export const highlightBackgroundActive : string;
+export const highlightBackgroundMuted : string;
+export const highlightBackgroundMutedHover : string;
+export const highlightBackgroundMutedActive : string;
+export const highlightBackgroundBox : string;
+export const highlightBorderBase : string;
+export const highlightBorderHover : string;
+export const highlightBorderActive : string;
+export const disabledText : string;
+export const disabledBackground : string;
+export const disabledNakedContent : string;
+export const disabledNakedBackground : string;
+export const disabledBorder : string;
diff --git a/build/native/themes/light.js b/build/native/themes/light.js
@@ -0,0 +1,84 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 09 Aug 2022 21:44:09 GMT
+ */
+
+module.exports = {
+  "textBase": "#2E3A47",
+  "textEmphasis": "#36485C",
+  "textSubdued": "#596D84",
+  "surfaceLevel0": "#F5F7FA",
+  "surfaceLevel1": "#FFFFFF",
+  "surfaceLevel2": "#FCFEFF",
+  "surfaceLevel3": "#FFFFFF",
+  "primaryTextBase": "#307553",
+  "primaryTextHover": "#275E43",
+  "primaryTextActive": "#244C38",
+  "primaryBackgroundBase": "#307553",
+  "primaryBackgroundHover": "#275E43",
+  "primaryBackgroundActive": "#244C38",
+  "primaryBackgroundMuted": "#EBF2EF",
+  "primaryBackgroundMutedHover": "#D1E0D9",
+  "primaryBackgroundMutedActive": "#B6CFC2",
+  "primaryBackgroundBox": "#FAFFFC",
+  "primaryBorderBase": "#307553",
+  "primaryBorderHover": "#275E43",
+  "primaryBorderActive": "#244C38",
+  "infoTextBase": "#3971A8",
+  "infoTextHover": "#21588F",
+  "infoTextActive": "#194673",
+  "infoBackgroundBase": "#3971A8",
+  "infoBackgroundHover": "#21588F",
+  "infoBackgroundActive": "#194673",
+  "infoBackgroundMuted": "#E6F1FC",
+  "infoBackgroundMutedHover": "#C0D8F0",
+  "infoBackgroundMutedActive": "#88B1D9",
+  "infoBackgroundBox": "#F5FAFF",
+  "infoBorderBase": "#3971A8",
+  "infoBorderHover": "#21588F",
+  "infoBorderActive": "#194673",
+  "warningTextBase": "#B4631D",
+  "warningTextHover": "#8E4D14",
+  "warningTextActive": "#784213",
+  "warningBackgroundBase": "#B4631D",
+  "warningBackgroundHover": "#8E4D14",
+  "warningBackgroundActive": "#784213",
+  "warningBackgroundMuted": "#FFF3E8",
+  "warningBackgroundMutedHover": "#F3D8C0",
+  "warningBackgroundMutedActive": "#E7B88F",
+  "warningBackgroundBox": "#FFFAF5",
+  "warningBorderBase": "#B4631D",
+  "warningBorderHover": "#8E4D14",
+  "warningBorderActive": "#784213",
+  "dangerTextBase": "#AF2645",
+  "dangerTextHover": "#980B29",
+  "dangerTextActive": "#800D25",
+  "dangerBackgroundBase": "#AF2645",
+  "dangerBackgroundHover": "#980B29",
+  "dangerBackgroundActive": "#800D25",
+  "dangerBackgroundMuted": "#FEEEF2",
+  "dangerBackgroundMutedHover": "#F0C4CD",
+  "dangerBackgroundMutedActive": "#E296A6",
+  "dangerBackgroundBox": "#FFF7F9",
+  "dangerBorderBase": "#AF2645",
+  "dangerBorderHover": "#980B29",
+  "dangerBorderActive": "#800D25",
+  "highlightTextBase": "#533E7D",
+  "highlightTextHover": "#3B2566",
+  "highlightTextActive": "#2A174F",
+  "highlightBackgroundBase": "#533E7D",
+  "highlightBackgroundHover": "#3B2566",
+  "highlightBackgroundActive": "#2A174F",
+  "highlightBackgroundMuted": "#F2ECFE",
+  "highlightBackgroundMutedHover": "#D7CEE9",
+  "highlightBackgroundMutedActive": "#B9ABD5",
+  "highlightBackgroundBox": "#FCFAFF",
+  "highlightBorderBase": "#533E7D",
+  "highlightBorderHover": "#3B2566",
+  "highlightBorderActive": "#2A174F",
+  "disabledText": "#596D84",
+  "disabledBackground": "#F5F7FA",
+  "disabledNakedContent": "#F5F7FA",
+  "disabledNakedBackground": "transparent",
+  "disabledBorder": "#C8D3E0"
+};