feat(theme): add build configuration for dark theme tokens #88

AlaskaAirlines · Dec 13, 2022 · 87d8d75 · 87d8d75
1 parent f349c22
commit 87d8d75
Show file tree

Hide file tree

Showing 3 changed files with 293 additions and 3 deletions.
diff --git a/scripts/config-dark.json b/scripts/config-dark.json
@@ -0,0 +1,285 @@
+{
+  "include": ["./src/asset/*.json", "./src/size/*.json", "./src/*.json"],
+  "source": ["./src/color-dark/*.json"],
+  "platforms": {
+    "SCSSVariables--dark": {
+      "transformGroup": "scss",
+      "prefix": "auro",
+      "comment": "File type: SCSS; variable type: Sass; filter: public, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "SCSSVariables--dark.scss",
+          "format": "scss/variables",
+          "filter": {
+            "public": true
+          }
+        },
+        {
+          "destination": "SCSSVariablesMapFlat--dark.scss",
+          "format": "custom/scss/map-flat",
+          "mapName": "auroTokens",
+          "filter": {
+            "public": true
+          }
+        }
+      ]
+    },
+    "CSSVariables--dark": {
+      "transformGroup": "css",
+      "prefix": "auro",
+      "comment": "File type: CSS; variable type: css; filter: public",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "CSSVariables--dark.css",
+          "format": "css/variables",
+          "filter": {
+            "public": true
+          }
+        },
+        {
+          "destination": "CSSVariablesMapFlat--dark.css",
+          "format": "custom/scss/map-flat",
+          "mapName": "auroTokens",
+          "filter": {
+            "public": true
+          }
+        }
+      ]
+    },
+    "SCSSOpacityVariables--dark": {
+      "transformGroup": "scss",
+      "prefix": "auro",
+      "comment": "File type: SCSS; variable type: Sass; filter: opacity, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "SCSSOpacityVariables--dark.scss",
+          "format": "scss/variables",
+          "filter": {
+            "opacity": true
+          }
+        }
+      ]
+    },
+    "SCSSVariableMap--dark": {
+      "transformGroup": "scss",
+      "prefix": "auro",
+      "comment": "File type: SCSS; variable type: Sassmap; filter: size, public, theme: dark mode",
+      "dependency": "WCSS: ./src/utilityMixins/_spacingUtility.scss",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "SCSSVariableMap--dark.scss",
+          "format": "scss/map-deep",
+          "filter": {
+            "attributes": {
+              "category": "size"
+            },
+            "public": true
+          }
+        }
+      ]
+    },
+
+    "CSSCustomProperties--dark": {
+      "transformGroup": "css",
+      "prefix": "auro",
+      "comment": "File type: CSS; variable type: CSS; filter: public, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "CSSCustomProperties--dark.css",
+          "format": "css/variables",
+          "filter": {
+            "public": true
+          }
+        }
+      ]
+    },
+    "CSSCustomPropertiesColorRGB--dark": {
+      "transformGroup": "css",
+      "transforms": ["attribute/cti", "name/cti/kebab", "custom/color/rgb"],
+      "prefix": "auro-rgb",
+      "comment": "File type: CSS; variable type: CSS; filter: color; custom rgb output, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "CSSCustomPropertiesColorRGB--dark.css",
+          "format": "css/variables",
+          "filter": {
+            "attributes": {
+              "category": "color"
+            },
+            "public": true
+          }
+        }
+      ]
+    },
+    "SassCustomPropertiesColorRGB--dark": {
+      "transformGroup": "css",
+      "transforms": ["attribute/cti", "name/cti/kebab", "custom/color/rgb"],
+      "prefix": "auro-rgb",
+      "comment": "File type: Sass; variable type: CSS; filter: color; custom rgb output, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "SassCustomPropertiesColorRGB--dark.scss",
+          "format": "css/variables",
+          "filter": {
+            "attributes": {
+              "category": "color"
+            },
+            "public": true
+          }
+        }
+      ]
+    },
+    "CSSOpacityCustomProp--darkerties": {
+      "transformGroup": "css",
+      "prefix": "auro",
+      "comment": "File type: SCSS; variable type: Sass; filter: opacity, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "CSSOpacityProperties--dark.scss",
+          "format": "css/variables",
+          "filter": {
+            "opacity": true
+          }
+        }
+      ]
+    },
+    "CSSSizeCustomProperties--dark": {
+      "transformGroup": "css",
+      "prefix": "auro",
+      "comment": "File type: CSS; variable type: CSS; filter: size, public, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "CSSSizeCustomProperties--dark.css",
+          "format": "css/variables",
+          "filter": {
+            "attributes": {
+              "category": "size"
+            },
+            "public": true
+          }
+        }
+      ]
+    },
+    "SassSizeCustomProperties--dark": {
+      "transformGroup": "scss",
+      "prefix": "auro",
+      "comment": "File type: Sass; variable type: Sass; filter: size, public, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "SassSizeCustomProperties--dark.scss",
+          "format": "css/variables",
+          "filter": {
+            "attributes": {
+              "category": "size"
+            },
+            "public": true
+          }
+        }
+      ]
+    },
+    "SassCustomProperties--dark": {
+      "transformGroup": "css",
+      "prefix": "auro",
+      "comment": "File type: SCSS; variable type: CSS; filter: public, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "SassCustomProperties--dark.scss",
+          "format": "css/variables",
+          "filter": {
+            "public": true
+          }
+        }
+      ]
+    },
+    "JSmoduledarkC-color": {
+      "prefix": "auro",
+      "transformGroup": "js",
+      "comment": "File type: JS; data type: JS; filter: colors || public, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "transforms": ["attribute/cti", "name/cti/kebab", "color/css"],
+      "files": [
+        {
+          "destination": "JSData--darkColor.js",
+          "format": "javascript/module",
+          "filter": {
+            "attributes": {
+              "category": "color"
+            },
+            "public": true
+          }
+        }
+      ]
+    },
+    "JSes6--darkColor": {
+      "prefix": "auro",
+      "transformGroup": "js",
+      "comment": "File type: JS; data type: JS; filter: colors || public, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "JSVariables--darkColor.js",
+          "format": "javascript/es6",
+          "filter": {
+            "attributes": {
+              "category": "color"
+            },
+            "public": true
+          }
+        }
+      ]
+    },
+    "JSObject--allDarkTokens": {
+      "transformGroup": "js",
+      "prefix": "auro",
+      "comment": "File type: JS; data type: JS; filter: classic colors, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "transforms": ["attribute/cti", "name/cti/kebab", "color/css"],
+      "files": [
+        {
+          "destination": "JSObject--allDarkTokens.js",
+          "format": "javascript/module",
+          "filter": {
+            "public": true,
+            "deprecated": false
+          }
+        }
+      ]
+    },
+    "JSONtest--dark": {
+      "transformGroup": "css",
+      "buildPath": "./test/",
+      "files": [
+        {
+          "destination": "validJSON--dark",
+          "format": "css/variables"
+        }
+      ]
+    },
+    "JSObject--deprecatedDarkTokens": {
+      "transformGroup": "js",
+      "comment": "File type: JS; data type: JS; filter: deprecated, theme: dark mode",
+      "buildPath": "./dist/tokens/",
+      "transforms": ["attribute/cti", "name/cti/kebab", "color/css"],
+      "files": [
+        {
+          "destination": "JSObject--deprecatedDark.js",
+          "format": "javascript/module",
+          "filter": {
+            "deprecated": true
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/scripts/config.json b/scripts/config.json
@@ -1,5 +1,6 @@
 {
-  "source": ["./src/**/*.json"],
+  "include": ["./src/asset/*.json", "./src/size/*.json", "./src/*.json"],
+  "source": ["./src/color/*.json"],
   "platforms": {
     "SCSSVariables": {
       "transformGroup": "scss",
@@ -11,7 +12,7 @@
           "destination": "SCSSVariables.scss",
           "format": "scss/variables",
           "filter": {
-            "public": true
+            "public": true          
           }
         },
         {
@@ -20,7 +21,7 @@
           "mapName": "auroTokens",
           "filter": {
             "public": true
-        }
+          }
         }
       ]
     },

diff --git a/scripts/styleDictionary.js b/scripts/styleDictionary.js
@@ -29,3 +29,7 @@ const tokensConfig = StyleDictionary.extend('./scripts/config.json');
 
 // Style Dictionary build function
 tokensConfig.buildAllPlatforms();
+
+const darkTokensConfig = StyleDictionary.extend('./scripts/config-dark.json');
+
+darkTokensConfig.buildAllPlatforms();