style-dictionary 4.0.0-prerelease.9 → 4.0.1

package/README.md

@@ -2,6 +2,10 @@
 <a href="https://amzn.github.io/style-dictionary/#/version_3">What's new in Style Dictionary 3.0!</a>
 </pre>
 
+<pre>
+<a href="https://github.com/amzn/style-dictionary#version-4">What's coming in Style Dictionary 4.0?</a>
+</pre>
+
 <img src="docs/assets/logo.png" alt="Style Dictionary logo and mascot" title="&quot;Pascal&quot;" width="100" align="right" />
 
 [![npm version](https://img.shields.io/npm/v/style-dictionary.svg?style=flat-square)](https://badge.fury.io/js/style-dictionary)
@@ -162,7 +166,7 @@ This tells the style dictionary build system how and what to build. The default
 }
 ```
 
-| Attribute                            | Type              | Description                                                                                                                                                                                                                                                                   |
+| Property                             | Type              | Description                                                                                                                                                                                                                                                                   |
 | :----------------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | source                               | Array             | An array of file path [globs](https://github.com/isaacs/node-glob) to design token files. Style Dictionary will do a deep merge of all of the token files, allowing you to organize your files files however you want.                                                        |
 | include                              | Array             | An array of file path [globs](https://github.com/isaacs/node-glob) to design token files that contain default styles. The Style Dictionary uses this as a base collection of tokens. The tokens found using the "source" attribute will overwrite tokens found using include. |
@@ -298,10 +302,10 @@ const StyleDictionary = require('style-dictionary').extend('config.json');
 StyleDictionary.registerTransform({
   name: 'time/seconds',
   type: 'value',
-  matcher: function (token) {
-    return token.attributes.category === 'time';
+  filter: function (token) {
+    return token.type === 'time';
   },
-  transformer: function (token) {
+  transform: function (token) {
     return (parseInt(token.original.value) / 1000).toString() + 's';
   },
 });
@@ -311,6 +315,27 @@ StyleDictionary.buildAllPlatforms();
 
 For more information on creating your own transforms and formats, take a look at our [docs](https://amzn.github.io/style-dictionary/).
 
+## Version 4
+
+In May 2021, we started [an issue / RFC, "What would you like to see in Style-Dictionary 4.0?"](https://github.com/amzn/style-dictionary/issues/643) to gather feedback on what the community would like to see.
+Fortunately, in August 2023, the folks at [Tokens Studio](https://tokens.studio/) contacted us about co-maintaining this project, and leading the v4 release (and beyond)!
+
+We have started working on the biggest and most important changes, like migrating to ESM, making the library browser-compatible out of the box, and supporting asynchronicity in Style-Dictionary's various APIs. There will be multiple prereleases to battle-test these changes before a final v4.0 is released.
+
+You can follow [this roadmap board](https://github.com/orgs/amzn/projects/4/views/1?layout=board) to keep an eye on the developments for v4.0, we will also keep adding to this board when we encounter changes we'd like to see in v4.0 that would entail a breaking change. Absence of something in this roadmap does not mean we don't see value in it, but rather that it could also be added in a (non-breaking) minor release within v4.x.x.
+
+### From the folks at Tokens Studio
+
+Hi everyone! I'm Joren from Tokens Studio, a big fan of this project (see [Style-Dictionary-Play](https://www.style-dictionary-play.dev/), [Token Configurator](https://configurator.tokens.studio/), [sd-transforms](https://github.com/tokens-studio/sd-transforms)) and the main pusher behind leading a 4.0 release of this project, I think it would be good to explain from our perspective why we've made the move to collaborate with Amazon on this.
+
+At Tokens Studio, we're a huge fan of Design Tokens and the workflows they enable. We believe exporting design tokens to various platforms is a key ingredient in ensuring that the journey from design to implementation code is smooth.
+In our minds, Style-Dictionary has been the most popular and most flexible library for reaching that goal, and so we want to build on top of that.
+Rather than starting our own spinoff tool, we much prefer bringing Style-Dictionary further, together with its vibrant community of contributors, which is why we reached out to Danny Banks.
+
+I think it's important to stress that it is our shared vision to keep Style-Dictionary as an agnostic (so not "Tokens Studio"-specific) and flexible tool. As Tokens Studio, while we are highly incentivized to see this project progress further to strengthen our product journey, we value the open source community highly and want to make sure this library remains the go-to tool for exporting Design Tokens, whether you use Tokens Studio or not.
+
+We are very open to feedback and collaboration, feel free to reach out to us in [our Slack](https://join.slack.com/t/tokens-studio/shared_invite/zt-1p8ea3m6t-C163oJcN9g3~YZTKRgo2hg) -> `style-dictionary-v4` channel!
+
 ## Mascot
 
 The mascot for Style Dictionary is ["Pascal"](https://github.com/amzn/style-dictionary/issues/97) the chameleon (seen below). You can also find them blending in as the logo throughout the documentation.

package/bin/style-dictionary.js

@@ -43,6 +43,12 @@ program
   .command('build')
   .description('Builds a style dictionary package from the current directory.')
   .option('-c, --config <path>', 'set config path. defaults to ./config.json')
+  .option(
+    '-v, --verbose',
+    'enable verbose logging for reference errors, token collisions and filtered tokens with outputReferences',
+  )
+  .option('-n, --no-warn', 'disable all warnings, only success logs and fatal errors shown')
+  .option('-s, --silent', 'silence all logging, except for fatal errors')
   .option(
     '-p, --platform [platform]',
     'only build specific platforms. Must be defined in the config',
@@ -57,6 +63,12 @@ program
     'Removes files specified in the config of the style dictionary package of the current directory.',
   )
   .option('-c, --config <path>', 'set config path. defaults to ./config.json')
+  .option(
+    '-v, --verbose',
+    'enable verbose logging for reference errors, token collisions and filtered tokens with outputReferences',
+  )
+  .option('-n, --no-warn', 'disable all warnings, only success logs and fatal errors shown')
+  .option('-s, --silent', 'silence all logging, except for fatal errors')
   .option(
     '-p, --platform [platform]',
     'only clean specific platform(s). Must be defined in the config',
@@ -76,7 +88,9 @@ program
     }
     /* eslint-disable no-console */
     console.log('Copying starter files...\n');
-    node_fs.copySync(path.join(__dirname, '..', 'examples', type), process.cwd());
+    node_fs.cpSync(path.join(__dirname, '..', 'examples', type), process.cwd(), {
+      recursive: true,
+    });
     console.log('Source style dictionary starter files created!\n');
     console.log(
       'Running `style-dictionary build` for the first time to generate build artifacts.\n',
@@ -94,35 +108,39 @@ program.on('command:*', function () {
   process.exit(1);
 });
 
+function getSD(configPath, options) {
+  let verbosity;
+  let warnings;
+  if (options.verbose || options.silent) {
+    verbosity = options.verbose ? 'verbose' : 'silent';
+  }
+  if (options.warn === false) {
+    warnings = 'disabled';
+  }
+  return new StyleDictionary(configPath, { verbosity, warnings });
+}
+
 async function styleDictionaryBuild(options) {
   options = options || {};
   const configPath = getConfigPath(options);
-
-  // Create a style dictionary object with the config
-  const styleDictionary = new StyleDictionary(configPath);
+  const sd = getSD(configPath, options);
 
   if (options.platform && options.platform.length > 0) {
-    return Promise.all(
-      options.platforms.map((platform) => styleDictionary.buildPlatform(platform)),
-    );
+    return Promise.all(options.platforms.map((platform) => sd.buildPlatform(platform)));
   } else {
-    return styleDictionary.buildAllPlatforms();
+    return sd.buildAllPlatforms();
   }
 }
 
 async function styleDictionaryClean(options) {
   options = options || {};
   const configPath = getConfigPath(options);
-
-  // Create a style dictionary object with the config
-  const styleDictionary = new StyleDictionary(configPath);
+  const sd = getSD(configPath, options);
 
   if (options.platform && options.platform.length > 0) {
-    return Promise.all(
-      options.platforms.map((platform) => styleDictionary.cleanPlatform(platform)),
-    );
+    return Promise.all(options.platforms.map((platform) => sd.cleanPlatform(platform)));
   } else {
-    return styleDictionary.cleanAllPlatforms();
+    return sd.cleanAllPlatforms();
   }
 }
 

package/examples/README.md

@@ -31,12 +31,8 @@ This is a more complete package and should have everything you need to get start
 If you want to look at more advanced examples of possible applications and customizations of Style Dictionary, the [`examples/advanced`](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/) folder on GitHub contains these extra folders:
 
 - [**assets-base64-embed**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/assets-base64-embed) shows how it's possible to embed and distribute assets – like images, icons and fonts – directly as design tokens.
-- [**auto-rebuild-watcher**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/auto-rebuild-watcher) shows how to setup a "watcher" that auto-rebuilds the tokens every time there is a change in the tokens.
-- [**component-cti**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/component-cti) shows how to write component tokens and still use the CTI structure.
 - [**create-react-app**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/create-react-app) shows how to integrate Style Dictionary into a React application.
 - [**create-react-native-app**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/create-react-native-app) shows how to integrate Style Dictionary into a React Native application.
-- [**custom-file-header**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/custom-file-header) shows how to define custom file headers and use them in output files.
-- [**custom-formats-with-templates**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/custom-formats-with-templates) shows how to generate custom output formats using templates, useful when you need to distribute your design tokens into your own pipelines or scripts.
 - [**custom-parser**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/custom-parser) shows how to use custom parsers for token files.
 - [**custom-transforms**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/custom-transforms) shows how to use custom transforms (and transformGroups) to apply custom "transformations" to the design tokens.
 - [**flutter**](https://github.com/amzn/style-dictionary/tree/main/examples/advanced/flutter) shows how to integrate with Flutter applications.

package/examples/advanced/assets-base64-embed/README.md

@@ -44,7 +44,7 @@ Open the `config.json` file and see how all the "assets/embed/\*" platform block
 
 ```
     "assets/embed/json": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "asset/base64"],
+      "transforms": ["attribute/cti", "name/kebab", "asset/base64"],
       "buildPath": "build/json/",
       "files": [{
         "destination": "assets_icons.json",
@@ -56,7 +56,7 @@ Open the `config.json` file and see how all the "assets/embed/\*" platform block
       ...
 ```
 
-Here there are **three specific transforms**: _attribute/cti_ to assign the Category/Type/Item attributes to the tokens, _name/cti/kebab_ to assign them the correct name, and finally _asset/base64_ to take the path declared in the "value" of the tokens, convert the file at that path in base64 format, and assign the output of the base64 conversion to the "value" of the token.
+Here there are **three specific transforms**: _attribute/cti_ to assign the Category/Type/Item attributes to the tokens, _name/kebab_ to assign them the correct name, and finally _asset/base64_ to take the path declared in the "value" of the tokens, convert the file at that path in base64 format, and assign the output of the base64 conversion to the "value" of the token.
 
 If you take for example the file `assets/icons.json` you will see this declaration:
 

package/examples/advanced/assets-base64-embed/config.json

@@ -4,95 +4,104 @@
     "scss": {
       "transformGroup": "scss",
       "buildPath": "build/scss/",
-      "files": [{
-        "destination": "colors.scss",
-        "format": "scss/variables",
-        "filter": {
-          "attributes": {
-            "category": "color"
+      "files": [
+        {
+          "destination": "colors.scss",
+          "format": "scss/variables",
+          "filter": {
+            "type": "color"
           }
-        }
-      },{
-        "destination": "sizes.scss",
-        "format": "scss/variables",
-        "filter": {
-          "attributes": {
-            "category": "size"
+        },
+        {
+          "destination": "sizes.scss",
+          "format": "scss/variables",
+          "filter": {
+            "type": "fontSize"
           }
         }
-      }]
+      ]
     },
     "json": {
       "transformGroup": "web",
       "buildPath": "build/json/",
-      "files": [{
-        "destination": "variables.json",
-        "format": "json/flat"
-      }]
+      "files": [
+        {
+          "destination": "variables.json",
+          "format": "json/flat"
+        }
+      ]
     },
     "assets/embed/scss": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "asset/base64"],
+      "transforms": ["attribute/cti", "name/kebab", "asset/base64"],
       "buildPath": "build/scss/",
-      "files": [{
-        "destination": "assets_icons.scss",
-        "format": "scss/variables",
-        "filter": {
-          "attributes": {
-            "category": "asset",
-            "type": "icon"
+      "files": [
+        {
+          "destination": "assets_icons.scss",
+          "format": "scss/variables",
+          "filter": {
+            "attributes": {
+              "category": "asset",
+              "type": "icon"
+            }
           }
-        }
-      },{
-        "destination": "assets_images.scss",
-        "format": "scss/variables",
-        "filter": {
-          "attributes": {
-            "category": "asset",
-            "type": "image"
+        },
+        {
+          "destination": "assets_images.scss",
+          "format": "scss/variables",
+          "filter": {
+            "attributes": {
+              "category": "asset",
+              "type": "image"
+            }
           }
-        }
-      },{
-        "destination": "assets_fonts.scss",
-        "format": "scss/variables",
-        "filter": {
-          "attributes": {
-            "category": "asset",
-            "type": "font"
+        },
+        {
+          "destination": "assets_fonts.scss",
+          "format": "scss/variables",
+          "filter": {
+            "attributes": {
+              "category": "asset",
+              "type": "font"
+            }
           }
         }
-      }]
+      ]
     },
     "assets/embed/json": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "asset/base64"],
+      "transforms": ["attribute/cti", "name/kebab", "asset/base64"],
       "buildPath": "build/json/",
-      "files": [{
-        "destination": "assets_icons.json",
-        "format": "json/flat",
-        "filter": {
-          "attributes": {
-            "category": "asset",
-            "type": "icon"
+      "files": [
+        {
+          "destination": "assets_icons.json",
+          "format": "json/flat",
+          "filter": {
+            "attributes": {
+              "category": "asset",
+              "type": "icon"
+            }
           }
-        }
-      },{
-        "destination": "assets_images.json",
-        "format": "json/flat",
-        "filter": {
-          "attributes": {
-            "category": "asset",
-            "type": "image"
+        },
+        {
+          "destination": "assets_images.json",
+          "format": "json/flat",
+          "filter": {
+            "attributes": {
+              "category": "asset",
+              "type": "image"
+            }
           }
-        }
-      },{
-        "destination": "assets_fonts.json",
-        "format": "json/flat",
-        "filter": {
-          "attributes": {
-            "category": "asset",
-            "type": "font"
+        },
+        {
+          "destination": "assets_fonts.json",
+          "format": "json/flat",
+          "filter": {
+            "attributes": {
+              "category": "asset",
+              "type": "font"
+            }
           }
         }
-      }]
+      ]
     }
   }
 }

package/examples/advanced/assets-base64-embed/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "build.js",
+  "type": "module",
   "scripts": {
     "build": "node_modules/.bin/style-dictionary build",
     "clean": "rm -rf build",
@@ -11,6 +12,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.9"
+    "style-dictionary": "^4.0.1"
   }
 }

package/examples/advanced/assets-base64-embed/tokens/assets/fonts.json

@@ -2,16 +2,16 @@
   "asset": {
     "font": {
       "materialicons": {
-        "ttf"  : { "value": "assets/fonts/MaterialIcons-Regular.ttf" },
-        "eot"  : { "value": "assets/fonts/MaterialIcons-Regular.eot" },
-        "woff" : { "value": "assets/fonts/MaterialIcons-Regular.woff" },
-        "woff2": { "value": "assets/fonts/MaterialIcons-Regular.woff2" }
+        "ttf": { "value": "assets/fonts/MaterialIcons-Regular.ttf", "type": "asset" },
+        "eot": { "value": "assets/fonts/MaterialIcons-Regular.eot", "type": "asset" },
+        "woff": { "value": "assets/fonts/MaterialIcons-Regular.woff", "type": "asset" },
+        "woff2": { "value": "assets/fonts/MaterialIcons-Regular.woff2", "type": "asset" }
       },
       "opensans": {
-        "ttf"  : { "value": "assets/fonts/OpenSans-Regular.ttf" }
+        "ttf": { "value": "assets/fonts/OpenSans-Regular.ttf", "type": "asset" }
       },
       "roboto": {
-        "ttf"  : { "value": "assets/fonts/Roboto-Regular.ttf" }
+        "ttf": { "value": "assets/fonts/Roboto-Regular.ttf", "type": "asset" }
       }
     }
   }

package/examples/advanced/assets-base64-embed/tokens/assets/icons.json

@@ -1,34 +1,34 @@
 {
   "asset": {
     "icon": {
-      "alert-circle": { "value": "assets/icons/alert-circle.svg" },
-      "alert-octagon": { "value": "assets/icons/alert-octagon.svg" },
-      "alert-triangle": { "value": "assets/icons/alert-triangle.svg" },
-      "archive": { "value": "assets/icons/archive.svg" },
-      "book-open": { "value": "assets/icons/book-open.svg" },
-      "book": { "value": "assets/icons/book.svg" },
-      "bookmark": { "value": "assets/icons/bookmark.svg" },
-      "briefcase": { "value": "assets/icons/briefcase.svg" },
-      "calendar": { "value": "assets/icons/calendar.svg" },
-      "camera": { "value": "assets/icons/camera.svg" },
-      "check-circle": { "value": "assets/icons/check-circle.svg" },
-      "check-square": { "value": "assets/icons/check-square.svg" },
-      "database": { "value": "assets/icons/database.svg" },
-      "delete": { "value": "assets/icons/delete.svg" },
-      "dollar-sign": { "value": "assets/icons/dollar-sign.svg" },
-      "download-cloud": { "value": "assets/icons/download-cloud.svg" },
-      "edit-1": { "value": "assets/icons/edit-1.svg" },
-      "edit-2": { "value": "assets/icons/edit-2.svg" },
-      "edit-3": { "value": "assets/icons/edit-3.svg" },
-      "external-link": { "value": "assets/icons/external-link.svg" },
-      "file-text": { "value": "assets/icons/file-text.svg" },
-      "file": { "value": "assets/icons/file.svg" },
-      "film": { "value": "assets/icons/film.svg" },
-      "folder": { "value": "assets/icons/folder.svg" },
-      "gift": { "value": "assets/icons/gift.svg" },
-      "github": { "value": "assets/icons/github.svg" },
-      "globe": { "value": "assets/icons/globe.svg" },
-      "grid": { "value": "assets/icons/grid.svg" }
+      "alert-circle": { "value": "assets/icons/alert-circle.svg", "type": "asset" },
+      "alert-octagon": { "value": "assets/icons/alert-octagon.svg", "type": "asset" },
+      "alert-triangle": { "value": "assets/icons/alert-triangle.svg", "type": "asset" },
+      "archive": { "value": "assets/icons/archive.svg", "type": "asset" },
+      "book-open": { "value": "assets/icons/book-open.svg", "type": "asset" },
+      "book": { "value": "assets/icons/book.svg", "type": "asset" },
+      "bookmark": { "value": "assets/icons/bookmark.svg", "type": "asset" },
+      "briefcase": { "value": "assets/icons/briefcase.svg", "type": "asset" },
+      "calendar": { "value": "assets/icons/calendar.svg", "type": "asset" },
+      "camera": { "value": "assets/icons/camera.svg", "type": "asset" },
+      "check-circle": { "value": "assets/icons/check-circle.svg", "type": "asset" },
+      "check-square": { "value": "assets/icons/check-square.svg", "type": "asset" },
+      "database": { "value": "assets/icons/database.svg", "type": "asset" },
+      "delete": { "value": "assets/icons/delete.svg", "type": "asset" },
+      "dollar-sign": { "value": "assets/icons/dollar-sign.svg", "type": "asset" },
+      "download-cloud": { "value": "assets/icons/download-cloud.svg", "type": "asset" },
+      "edit-1": { "value": "assets/icons/edit-1.svg", "type": "asset" },
+      "edit-2": { "value": "assets/icons/edit-2.svg", "type": "asset" },
+      "edit-3": { "value": "assets/icons/edit-3.svg", "type": "asset" },
+      "external-link": { "value": "assets/icons/external-link.svg", "type": "asset" },
+      "file-text": { "value": "assets/icons/file-text.svg", "type": "asset" },
+      "file": { "value": "assets/icons/file.svg", "type": "asset" },
+      "film": { "value": "assets/icons/film.svg", "type": "asset" },
+      "folder": { "value": "assets/icons/folder.svg", "type": "asset" },
+      "gift": { "value": "assets/icons/gift.svg", "type": "asset" },
+      "github": { "value": "assets/icons/github.svg", "type": "asset" },
+      "globe": { "value": "assets/icons/globe.svg", "type": "asset" },
+      "grid": { "value": "assets/icons/grid.svg", "type": "asset" }
     }
   }
 }

package/examples/advanced/assets-base64-embed/tokens/assets/images.json

@@ -1,7 +1,7 @@
 {
   "asset": {
     "image": {
-      "logo": { "value": "assets/images/logo.png" }
+      "logo": { "value": "assets/images/logo.png", "type": "asset" }
     }
   }
 }

package/examples/advanced/assets-base64-embed/tokens/color/base.json

@@ -2,12 +2,12 @@
   "color": {
     "base": {
       "gray": {
-        "light" : { "value": "#CCCCCC" },
-        "medium": { "value": "#999999" },
-        "dark"  : { "value": "#111111" }
+        "light": { "value": "#CCCCCC", "type": "color" },
+        "medium": { "value": "#999999", "type": "color" },
+        "dark": { "value": "#111111", "type": "color" }
       },
-      "red": { "value": "#FF0000" },
-      "green": { "value": "#00FF00" }
+      "red": { "value": "#FF0000", "type": "color" },
+      "green": { "value": "#00FF00", "type": "color" }
     }
   }
 }

package/examples/advanced/assets-base64-embed/tokens/color/font.json

@@ -1,9 +1,9 @@
 {
   "color": {
     "font": {
-      "base"     : { "value": "{color.base.red.value}" },
-      "secondary": { "value": "{color.base.green.value}" },
-      "tertiary" : { "value": "{color.base.gray.light.value}" }
+      "base": { "value": "{color.base.red.value}", "type": "color" },
+      "secondary": { "value": "{color.base.green.value}", "type": "color" },
+      "tertiary": { "value": "{color.base.gray.light.value}", "type": "color" }
     }
   }
 }

package/examples/advanced/assets-base64-embed/tokens/size/font.json

@@ -1,21 +1,25 @@
 {
   "size": {
     "font": {
-      "small" : {
+      "small": {
         "value": "0.75",
-        "comment": "the small size of the font"
+        "comment": "the small size of the font",
+        "type": "fontSize"
       },
       "medium": {
         "value": "1",
-        "comment": "the medium size of the font"
+        "comment": "the medium size of the font",
+        "type": "fontSize"
       },
-      "large" : {
+      "large": {
         "value": "2",
-        "comment": "the large size of the font"
+        "comment": "the large size of the font",
+        "type": "fontSize"
       },
-      "base"  : {
+      "base": {
         "value": "{size.font.medium.value}",
-        "comment": "the base size of the font"
+        "comment": "the base size of the font",
+        "type": "fontSize"
       }
     }
   }

package/examples/advanced/create-react-app/package.json

@@ -1,6 +1,7 @@
 {
   "name": "style-dictionary-create-react-app",
   "description": "",
+  "type": "module",
   "version": "1.0.0",
   "dependencies": {
     "node-sass": "^7.0.0",
@@ -11,7 +12,7 @@
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",
-    "style-dictionary": "4.0.0-prerelease.9"
+    "style-dictionary": "^4.0.1"
   },
   "resolutions": {
     "immer": "8.0.1",

package/examples/advanced/create-react-app/style-dictionary/config.json

@@ -1,22 +1,26 @@
 {
-  "source": ["./style-dictionary/properties/**/*.json"],
+  "source": ["./style-dictionary/tokens/**/*.json"],
   "platforms": {
     "scss": {
       "transformGroup": "scss",
       "buildPath": "./src/style-dictionary-dist/",
       "prefix": "token",
-      "files": [{
-        "destination": "variables.scss",
-        "format": "scss/variables"
-      }]
+      "files": [
+        {
+          "destination": "variables.scss",
+          "format": "scss/variables"
+        }
+      ]
     },
     "js": {
       "transformGroup": "js",
       "buildPath": "./src/style-dictionary-dist/",
-      "files": [{
-        "destination": "variables.js",
-        "format": "javascript/es6"
-      }]
+      "files": [
+        {
+          "destination": "variables.js",
+          "format": "javascript/es6"
+        }
+      ]
     }
   }
 }

package/examples/advanced/create-react-app/style-dictionary/tokens/color.json

@@ -0,0 +1,22 @@
+{
+  "color": {
+    "base": {
+      "primary": {
+        "value": "#61dafb",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#fc7aa5",
+        "type": "color"
+      }
+    },
+    "text": {
+      "value": "#666666",
+      "type": "color"
+    },
+    "background": {
+      "value": "#EEEEEE",
+      "type": "color"
+    }
+  }
+}