BREAKING CHANGE: background, border, font dark mode color values

.github/workflows/pull-request.yml

@@ -8,7 +8,7 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
   push:
-    branches: [main]
+    branches: [main, beta]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
@@ -30,4 +30,3 @@ jobs:
       - name: unit test
         run: |
           yarn test
-

build.js

@@ -12,6 +12,37 @@ const useSizeUnit = require('./transforms/useSizeUnit/useSizeUnit');
 const customKebab = require('./transforms/customKebab/customKebab');
 const createIconComponents = require('./utils/createIconComponents/createIconComponents');
 
+/**
+ * This function will wrap a built-in format and replace `.value` with `.darkValue`
+ * if a token has a `.darkValue`.
+ * @param {String} format - the name of the built-in format
+ * @returns {Function}
+ */
+function darkFormatWrapper(format) {
+  return function (args) {
+    const dictionary = Object.assign({}, args.dictionary);
+    // Override each token's `value` with `darkValue`
+    dictionary.allTokens = dictionary.allTokens.map(token => {
+      const { darkValue } = token;
+      if (darkValue) {
+        return Object.assign({}, token, {
+          value: token.darkValue,
+          original: {
+            value: token.darkValue,
+            darkValue: token.darkValue,
+          },
+        });
+      } else {
+        return token;
+      }
+    });
+
+    // Use the built-in format but with our customized dictionary object
+    // so it will output the darkValue instead of the value
+    return StyleDictionary.format[format]({ ...args, dictionary });
+  };
+}
+
 console.log('Build started...');
 console.log('\n==============================================');
 
@@ -37,6 +68,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 +101,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 = '5702376608';
 
 /**
  * Read tokens from FIGMA file.
@@ -69,7 +110,7 @@ getFigmaDocument(FIGMA_TOKENS_DOCUMENT, FIGMA_FILE_VERSION)
   .then(response => response.json())
   .then(figmaJson => {
     /**
-     * Empty build directoty
+     * Empty build directory
      */
     fse.emptyDirSync('./build');
     console.log('\nBuild directory cleared');
@@ -80,13 +121,6 @@ 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);
-
     /**
      * Apply the configuration.
      *
@@ -95,6 +129,10 @@ getFigmaDocument(FIGMA_TOKENS_DOCUMENT, FIGMA_FILE_VERSION)
      */
     const StyleDictionaryExtended = StyleDictionary.extend({
       properties,
+      format: {
+        cssDark: darkFormatWrapper(`css/variables`),
+        scssDark: darkFormatWrapper(`scss/variables`),
+      },
       platforms: dictionaryConfig.platforms,
     });
 

config.json

@@ -1,14 +1,27 @@
 {
   "platforms": {
     "scss": {
-      "transforms": ["attribute/cti", "name/cti/custom-kebab", "time/seconds", "content/icon", "size/use-unit", "color/css"],
+      "transforms": [
+        "attribute/cti",
+        "name/cti/custom-kebab",
+        "time/seconds",
+        "content/icon",
+        "size/use-unit",
+        "color/css"
+      ],
       "buildPath": "build/scss/",
       "files": [
         {
           "destination": "variables-color.scss",
           "format": "scss/variables",
           "filter": "isBrandColor"
         },
+        {
+          "destination": "variables-color-dark.scss",
+          "format": "scssDark",
+          "options": { "selector": ":root.dark" },
+          "filter": "isDarkColor"
+        },
         {
           "destination": "variables-size.scss",
           "format": "scss/variables",
@@ -22,13 +35,26 @@
       ]
     },
     "css": {
-      "transforms": ["attribute/cti", "name/cti/custom-kebab", "time/seconds", "content/icon", "size/use-unit", "color/css"],
+      "transforms": [
+        "attribute/cti",
+        "name/cti/custom-kebab",
+        "time/seconds",
+        "content/icon",
+        "size/use-unit",
+        "color/css"
+      ],
       "buildPath": "build/css/",
       "files": [
         {
           "destination": "variables-color.css",
           "format": "css/variables",
-          "filter": "isBrandColor"
+          "filter": "isColor"
+        },
+        {
+          "destination": "variables-color-dark.css",
+          "format": "cssDark",
+          "options": { "selector": ":root.dark" },
+          "filter": "isDarkColor"
         },
         {
           "destination": "variables-size.css",
@@ -44,22 +70,45 @@
     },
     "cssUtilities": {
       "buildPath": "build/utilities/",
-      "transforms": ["attribute/cti", "name/cti/custom-kebab", "time/seconds", "content/icon", "size/use-unit", "color/css"],
-      "files": [{
-        "destination": "utilities.css",
-        "format": "css/utility-classes"
-      }]
+      "transforms": [
+        "attribute/cti",
+        "name/cti/custom-kebab",
+        "time/seconds",
+        "content/icon",
+        "size/use-unit",
+        "color/css"
+      ],
+      "files": [
+        {
+          "destination": "utilities.css",
+          "format": "css/utility-classes"
+        }
+      ]
     },
     "sassUtilities": {
       "buildPath": "build/utilities/",
-      "transforms": ["attribute/cti", "name/cti/custom-kebab", "time/seconds", "content/icon", "size/use-unit", "color/css"],
-      "files": [{
-        "destination": "utilities.scss",
-        "format": "css/utility-classes"
-      }]
+      "transforms": [
+        "attribute/cti",
+        "name/cti/custom-kebab",
+        "time/seconds",
+        "content/icon",
+        "size/use-unit",
+        "color/css"
+      ],
+      "files": [
+        {
+          "destination": "utilities.scss",
+          "format": "css/utility-classes"
+        }
+      ]
     },
     "js": {
-      "transforms": ["attribute/cti", "name/cti/pascal", "size/use-unit", "color/css"],
+      "transforms": [
+        "attribute/cti",
+        "name/cti/pascal",
+        "size/use-unit",
+        "color/css"
+      ],
       "buildPath": "build/js/",
       "files": [
         {
@@ -80,7 +129,12 @@
       ]
     },
     "json": {
-      "transforms": ["attribute/cti", "name/cti/pascal", "size/use-unit", "color/css"],
+      "transforms": [
+        "attribute/cti",
+        "name/cti/pascal",
+        "size/use-unit",
+        "color/css"
+      ],
       "buildPath": "build/json/",
       "files": [
         {

formats/utilityClass/utilitiesConfig.js

@@ -9,6 +9,16 @@ const utilities = [
     hover: true,
     focus: true,
   },
+  {
+    name: 'font-color',
+    tokenCategory: 'color',
+    tokenType: 'text',
+    cssProp: 'color',
+    variations: [''],
+    responsive: false,
+    hover: true,
+    focus: true,
+  },
   {
     name: 'background-color',
     tokenCategory: 'color',
@@ -19,6 +29,16 @@ const utilities = [
     hover: true,
     focus: true,
   },
+  {
+    name: 'background-color',
+    tokenCategory: 'color',
+    tokenType: 'background',
+    cssProp: 'background-color',
+    variations: [''],
+    responsive: false,
+    hover: true,
+    focus: true,
+  },
   {
     name: 'border-color',
     tokenCategory: 'color',
@@ -29,6 +49,16 @@ const utilities = [
     hover: true,
     focus: true,
   },
+  {
+    name: 'border-color',
+    tokenCategory: 'color',
+    tokenType: 'border',
+    cssProp: 'border-color',
+    variations: [''],
+    responsive: false,
+    hover: true,
+    focus: true,
+  },
   {
     name: 'font-size',
     tokenCategory: 'size',
@@ -224,4 +254,4 @@ const utilities = [
   },
 ];
 
-module.exports = utilities;
+module.exports = utilities;

package.json

@@ -35,6 +35,6 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "semantic-release": "^19.0.3",
-    "style-dictionary": "^2.10.0"
+    "style-dictionary": "^3.8.0"
   }
 }