style-dictionary 5.0.0-rc.2 → 5.0.0

package/README.md

@@ -12,14 +12,14 @@
 
 # Style Dictionary
 
+[See documentation](http://styledictionary.com)
+
 > _Style once, use everywhere._
 
 A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language. It provides a single place to create and edit your styles, and exports these tokens to all the places you need - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.
 
 When you are managing user experiences, it can be quite challenging to keep styles consistent and synchronized across multiple development platforms and devices. At the same time, designers, developers, PMs and others must be able to have consistent and up-to-date style documentation to enable effective work and communication. Even then, mistakes inevitably happen and the design may not be implemented accurately. Style Dictionary solves this by automatically generating style definitions across all platforms from a single source - removing roadblocks, errors, and inefficiencies across your workflow.
 
-For detailed usage head to https://amzn.github.io/style-dictionary
-
 ## Watch the Demo on YouTube
 
 [![Watch the video](/docs/src/assets/fake_player.png)](http://youtu.be/1HREvonfqhY)
@@ -314,27 +314,6 @@ StyleDictionary.buildAllPlatforms();
 
 For more information on creating your own transforms and formats, take a look at our [docs](https://styledictionary.com).
 
-## 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/examples/advanced/assets-base64-embed/package.json

@@ -12,6 +12,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   }
 }

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

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   },
   "resolutions": {
     "immer": "8.0.1",

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

@@ -29,7 +29,7 @@
     "eslint-config-react-app": "^7.0.1",
     "jest": "~25.2.6",
     "react-test-renderer": "~16.13.1",
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   },
   "jest": {
     "preset": "react-native"

package/examples/advanced/custom-parser/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   }
 }

package/examples/advanced/custom-transforms/README.md

@@ -9,7 +9,7 @@ Transforms are functions that modify a design token (in a non-destructive way).
 The need for custom transforms is that Style Dictionary expects the tokens to be declared according to certain criteria, to use the pre-defined transforms and formats/templates. For example, the _web_ transformGroup consists of the _attribute/cti_, _name/kebab_, _size/px_ and _color/css_ transforms.
 The _size/px_ adds 'px' to the end of the number, and is applied only if `token.attributes.category === 'size'`. This means that your token needs to be expressed without units, and be under the _'size'_ "category. If you need a different logic or you want to organize your tokens differently, probably you can't use the out-of-the-box transformation groups, but you have to declare your custom ones.
 
-If [custom formats](https://v4.styledictionary.com/reference/hooks/formats/#custom-formats) are the way to allow users to customize the format of the _output_ of Style Dictionary, custom transforms are the way to allow them to customize both the _input_ (the token names/values/attributes) and the _output_ (the actual values expressed in the design tokens). For this reasons, custom transforms are probably one of the **most powerful features** of Style Dictionary: they make it extremely versatile, allowing limitless possibilities of extension and customization of the entire design token pipeline.
+If [custom formats](https://styledictionary.com/reference/hooks/formats/#custom-formats) are the way to allow users to customize the format of the _output_ of Style Dictionary, custom transforms are the way to allow them to customize both the _input_ (the token names/values/attributes) and the _output_ (the actual values expressed in the design tokens). For this reasons, custom transforms are probably one of the **most powerful features** of Style Dictionary: they make it extremely versatile, allowing limitless possibilities of extension and customization of the entire design token pipeline.
 
 #### Running the example
 
@@ -34,7 +34,7 @@ StyleDictionary.registerTransform({
 });
 ```
 
-More information can be found on the [documentation](https://amzn.github.io/style-dictionary/#/api?id=registertransform).
+More information can be found on the [documentation](https://styledictionary.com/reference/api/#registertransform).
 
 To use this new custom transform, we need to create a new custom transformGroup that references it.
 
@@ -47,7 +47,7 @@ StyleDictionary.registerTransformGroup({
 });
 ```
 
-More information can be found on the [documentation](https://amzn.github.io/style-dictionary/#/api?id=registertransformgroup).
+More information can be found on the [documentation](https://styledictionary.com/reference/api/#registertransformgroup).
 
 Once registered, the custom group can be associated to one or more **platforms** in the `config.json` file:
 
@@ -68,7 +68,7 @@ Once registered, the custom group can be associated to one or more **platforms**
 
 When you register a new group, you can use a new array of transforms, or you can "extend" an existing group (see the code in the `build.js` file). Even though the second option seems simpler, we suggest to always declare explicitly your array: it's clearer to see what transformations will be applied, and you will always be in full control of the code.
 
-Tip: to know what transforms are included in a pre-defined group you can [refer to the documentation](https://amzn.github.io/style-dictionary/#/transform_groups) or you can add a `console.log(StyleDictionary.transformGroup['group_name'])`
+Tip: to know what transforms are included in a pre-defined group you can [refer to the documentation](https://styledictionary.com/reference/hooks/transform-groups/predefined/) or you can add a `console.log(StyleDictionary.hooks.transformGroups['group_name'])`
 in your code and look the array of transforms associated with the it, directly in your console.
 
 #### What to look at

package/examples/advanced/custom-transforms/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   }
 }

package/examples/advanced/font-face-rules/package.json

@@ -9,6 +9,6 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   }
 }

package/examples/advanced/format-helpers/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   }
 }

package/examples/advanced/matching-build-files/package.json

@@ -17,6 +17,6 @@
   "author": "Kelly Harrop <kn.harrop@gmail.com>",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   }
 }

package/examples/advanced/multi-brand-multi-platform/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.0.0-rc.2"
+    "style-dictionary": "^5.0.0"
   }
 }

package/examples/advanced/node-modules-as-config-and-properties/README.md

@@ -1,6 +1,6 @@
 ## Node Modules as Config and Token files
 
-This example shows some advanced features using Style Dictionary with node modules. Make sure you are familiar with Style Dictionary concepts first by reading the [docs](https://amzn.github.io/style-dictionary) first.
+This example shows some advanced features using Style Dictionary with node modules. Make sure you are familiar with Style Dictionary concepts first by reading the [docs](https://styledictionary.com) first.
 
 #### Running the example
 

package/examples/advanced/node-modules-as-config-and-properties/components/index.js

@@ -1,4 +1,4 @@
-import button from './button.js';
+import button from './button/index.js';
 
 export default {
   component: {

package/examples/advanced/node-modules-as-config-and-properties/config.js

@@ -1,6 +1,6 @@
 import StyleDictionary from 'style-dictionary';
 import { formats, transforms, transformGroups, transformTypes } from 'style-dictionary/enums';
-import tokens from './tokens.js';
+import tokens from './tokens/index.js';
 // Rather than have Style Dictionary handle the merging of token files,
 // you could use node module export/require to do it yourself. This will
 // allow you to not have to copy object namespaces like you normally would.
@@ -87,7 +87,7 @@ export default {
 
     scss: {
       // This works, we can create new transform arrays on the fly and edit built-ins
-      transforms: StyleDictionary.hooks.scss.concat(colorRgb),
+      transforms: StyleDictionary.hooks.scss?.concat(colorRgb),
       buildPath: buildPath,
       files: [
         {
@@ -98,7 +98,7 @@ export default {
     },
 
     js: {
-      transforms: StyleDictionary.hooks.js.concat('myRegisteredTransform'),
+      transforms: StyleDictionary.hooks.js?.concat('myRegisteredTransform'),
       buildPath: buildPath,
       // If you want to get super fancy, you can use node modules
       // to create a tokens object first, and then you can