style-dictionary 3.1.0 → 3.7.1

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

@@ -11,6 +11,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

package/examples/advanced/auto-rebuild-watcher/package.json

@@ -17,6 +17,6 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "chokidar-cli": "^1.2.0",
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

package/examples/advanced/component-cti/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

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

@@ -3,14 +3,14 @@
   "description": "",
   "version": "1.0.0",
   "dependencies": {
-    "node-sass": "^6.0.1",
+    "node-sass": "^7.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "^4.0.3",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   },
   "resolutions": {
     "immer": "8.0.1",

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

@@ -27,7 +27,7 @@
     "babel-jest": "~25.2.6",
     "jest": "~25.2.6",
     "react-test-renderer": "~16.13.1",
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   },
   "jest": {
     "preset": "react-native"

package/examples/advanced/custom-file-header/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

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

@@ -0,0 +1,99 @@
+## Filters
+
+This example shows how to use built-in and custom filters to the design tokens.
+
+Filters are functions that might remove according to some conditions a design token from the output distribution.
+
+#### Running the example
+
+First of all, set up the required dependencies running the command `npm install` in your local CLI environment (if you prefer to use *yarn* update the commands accordingly).
+
+At this point, if you want to build the tokens you can run `npm run build`. This command will generate the files in the `build` folder.
+
+#### How does it work a built-in filter?
+
+Currently StyleDictionary supports just the following built-in filters:
+
+- removePrivate
+
+You have to apply it in the `config.json` file:
+
+```
+"scss": {
+  "buildPath": "build/web/",
+  "files": [{
+    "destination": "colors.scss",
+    "filter": "removePrivate",
+    "format": "scss/variables"
+  }]
+}
+```
+
+The StyleDictionary will take care of filtering out proper design tokens from the source of truth:
+
+```
+{
+  "color": {
+    "gray": {
+      "light" : {
+        "value": "#CCCCCC",
+        "group": "color",
+        "private": true
+      },
+      "medium": {
+        "value": "#999999",
+        "group": "color"
+      },
+      "dark"  : {
+        "value": "#111111",
+        "group": "color"
+      }
+    },
+  }
+}
+```
+
+#### How does it work a custom filter?
+
+To declare a custom **filter**, you have to call the `registerFilter` method:
+
+```
+StyleDictionary.registerFilter({
+  name: 'isTextTransform',
+  matcher: function(token) {
+    return token.attributes.category === 'font' && token.value.includes['lowercase', 'uppercase]
+  }
+});
+```
+
+You have to apply it in the `config.json` file:
+
+```
+"scss": {
+  "buildPath": "build/web/",
+  "files": [{
+    "destination": "fonts.scss",
+    "filter": "isTextTransform",
+    "format": "scss/variables"
+  }]
+}
+```
+
+The StyleDictionary will take care of filtering out proper design tokens from the source of truth:
+
+```
+{
+  "fonts": {
+    "title-transform": {
+      "value": "uppercase", // included
+      "group": "font"
+    },
+    "title-size": {
+      "value": "36px", // excluded
+      "group": "font"
+    }
+  }
+}
+```
+
+More information can be found on the [documentation](https://amzn.github.io/style-dictionary/#/api?id=registerfilter).

package/examples/advanced/custom-filters/build.js

@@ -0,0 +1,27 @@
+const StyleDictionary = require('../../../index');
+
+console.log('Build started...');
+console.log('\n==============================================');
+
+
+// REGISTER THE CUSTOM FILTERS
+
+StyleDictionary.registerFilter({
+  name: 'removeBigSpacing',
+  matcher: function(token) {
+    return token.group === 'spacing' && token.value < 0.5
+  }
+});
+
+// APPLY THE CONFIGURATION
+// IMPORTANT: the registration of custom transforms
+// needs to be done _before_ applying the configuration
+const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.json');
+
+
+// FINALLY, BUILD ALL THE PLATFORMS
+StyleDictionaryExtended.buildAllPlatforms();
+
+
+console.log('\n==============================================');
+console.log('\nBuild completed!');

package/examples/advanced/custom-filters/config.json

@@ -0,0 +1,21 @@
+{
+  "source": ["tokens/**/*.json"],
+  "platforms": {
+    "web": {
+      "buildPath": "build/web/",
+      "files": [{
+        "destination": "tokens.js",
+        "filter": "removeBigSpacing",
+        "format": "javascript/es6"
+      }]
+    },
+    "scss": {
+      "buildPath": "build/web/",
+      "files": [{
+        "destination": "tokens.scss",
+        "filter": "removeBigSpacing",
+        "format": "scss/variables"
+      }]
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+{
+  "name": "style-dictionary-filters",
+  "version": "1.0.0",
+  "description": "",
+  "main": "build/index.js",
+  "files": [
+    "build",
+    "properties"
+  ],
+  "scripts": {
+    "build": "node ./build.js",
+    "clean": "rm -rf build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "style-dictionary": "3.7.1"
+  }
+}

package/examples/advanced/custom-filters/tokens/spacing.json

@@ -0,0 +1,20 @@
+{
+  "margin": {
+    "small" : {
+      "value": "0.15",
+      "group": "spacing"
+    },
+    "medium": {
+      "value": "0.25",
+      "group": "spacing"
+    },
+    "large" : {
+      "value": "0.6",
+      "group": "spacing"
+    },
+    "extralarge" : {
+      "value": "1",
+      "group": "spacing"
+    }
+  }
+}

package/examples/advanced/custom-formats-with-templates/package.json

@@ -18,6 +18,6 @@
     "handlebars": "^4.7.7",
     "lodash": "^4.17.21",
     "pug": "^3.0.2",
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

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

@@ -9,6 +9,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

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

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

package/examples/advanced/font-face-rules/README.md

@@ -0,0 +1,71 @@
+## Generating @font-face rules
+
+To generate `@font-face` rules, we will need a few moving parts (described below). The final output will look like:
+
+```css
+/** build/css/fonts.css */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/Roboto.woff2") format("woff2"),
+       url("../fonts/Roboto.woff") format("woff");
+  font-display: fallback;
+}
+```
+
+```scss
+// build/scss/_fonts.scss
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: url("#{$font-path}/fonts/Roboto.woff2") format("woff2"),
+       url("#{$font-path}/fonts/Roboto.woff") format("woff");
+  font-display: fallback;
+}
+```
+
+#### Running the example
+
+Set up the required dependencies by running the command `npm install` in your local CLI environment (if you prefer to use _yarn_, update the commands accordingly).
+
+At this point, if you want to build the tokens you can run `npm run build`. This command will generate the files in the `build` folder.
+
+Note, running this example will generate a "While building fonts.css, token collisions were found; output may be unexpected." warning. The warning is expected and can be ignored.
+
+#### How does it work
+
+- Each font is defined using a specific structure:
+  ```json
+  {
+    "asset": {
+      "font": {
+        "<family>": {
+          "<weight>": {
+            "<style>": {
+              "value": "<path>",
+              "formats": ["<list of formats, e.g. woff2, woff>"]
+            }
+          }
+        }
+      }
+    }
+  }
+  ```
+- A custom _transform_ will promote the family name, weight and style to their own named attributes on the token object.
+- A custom _format_ will generate the `@font-face` rules.
+- A _platform_ ties it all together.
+
+#### What to look at
+
+Open `tokens.json`:
+
+- To distinguish font-face tokens from other font tokens, the "**asset**" category is used.
+- Each font-face token is structured so that the font's _family name_, _weight_ (400, 700, etc.), and _style_ (normal or italics) can be determined at runtime.
+
+Compare this example's `tokens.json` to the generated files `css/fonts.css`, and `scss/_fonts.scss`.
+
+Next up, open `sd.config.js` to see how the "css-font-face" and "scss-font-face" platforms are configured. Note the `transforms`, `format`, `filter`, and the custom `options.fontPathPrefix` properties.
+
+Lastly, in the same file, check out the code for the `attribute/font` transform, and `font-face` format.

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

@@ -0,0 +1,13 @@
+{
+  "name": "font-face-rules",
+  "version": "1.0.0",
+  "description": "Example showing one way to generate @font-face rules",
+  "main": "sd.config.js",
+  "scripts": {
+    "build": "style-dictionary build --config ./sd.config.js"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "style-dictionary": "3.7.1"
+  }
+}

package/examples/advanced/font-face-rules/sd.config.js

@@ -0,0 +1,102 @@
+const StyleDictionary = require('style-dictionary');
+
+// Register an "attribute" transform to codify the font's details
+// as named attributes.
+StyleDictionary.registerTransform({
+  name: 'attribute/font',
+  type: 'attribute',
+  transformer: prop => ({
+    category: prop.path[0],
+    type: prop.path[1],
+    family: prop.path[2],
+    weight: prop.path[3],
+    style: prop.path[4]
+  })
+});
+
+// Register a custom format to generate @font-face rules.
+StyleDictionary.registerFormat({
+  name: 'font-face',
+  formatter: ({ dictionary: { allTokens }, options }) => {
+    const fontPathPrefix = options.fontPathPrefix || '../';
+
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src
+    const formatsMap = {
+      'woff2': 'woff2',
+      'woff': 'woff',
+      'ttf': 'truetype',
+      'otf': 'opentype',
+      'svg': 'svg',
+      'eot': 'embedded-opentype'
+    };
+
+    return allTokens.reduce((fontList, prop) => {
+      const {
+        attributes: { family, weight, style },
+        formats,
+        value: path
+      } = prop;
+
+      const urls = formats
+        .map(extension => `url("${fontPathPrefix}${path}.${extension}") format("${formatsMap[extension]}")`);
+
+      const fontCss = [
+        '@font-face {',
+        `\n\tfont-family: "${family}";`,
+        `\n\tfont-style: ${style};`,
+        `\n\tfont-weight: ${weight};`,
+        `\n\tsrc: ${urls.join(',\n\t\t\t ')};`,
+        '\n\tfont-display: fallback;',
+        '\n}\n'
+      ].join('');
+
+      fontList.push(fontCss);
+
+      return fontList;
+    }, []).join('\n');
+  }
+});
+
+module.exports = {
+  source: ['tokens.json'],
+  platforms: {
+    'css-font-face': {
+      transforms: ['attribute/font'],
+      buildPath: 'build/css/',
+      files: [
+        {
+          destination: 'fonts.css',
+          format: 'font-face',
+          filter: {
+            attributes: {
+              category: 'asset',
+              type: 'font'
+            }
+          },
+          options: {
+            fontPathPrefix: '../'
+          }
+        }
+      ]
+    },
+    'scss-font-face': {
+      transforms: ['attribute/font'],
+      buildPath: 'build/scss/',
+      files: [
+        {
+          destination: '_fonts.scss',
+          format: 'font-face',
+          filter: {
+            attributes: {
+              category: 'asset',
+              type: 'font'
+            }
+          },
+          options: {
+            fontPathPrefix: '#{$font-path}/'
+          }
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+{
+  "asset": {
+    "font": {
+      "Roboto": {
+        "400": {
+          "normal": {
+            "value": "fonts/roboto-V20-latin-regular",
+            "formats": ["woff2", "woff"]
+          },
+          "italic": {
+            "value": "fonts/roboto-V20-latin-italic",
+            "formats": ["woff2", "woff"]
+          }
+        },
+        "700": {
+          "normal": {
+            "value": "fonts/roboto-V20-latin-700",
+            "formats": ["woff2", "woff"]
+          },
+          "italic": {
+            "value": "fonts/roboto-V20-latin-700italic",
+            "formats": ["woff2", "woff"]
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

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

@@ -16,6 +16,6 @@
   "author": "Kelly Harrop <kn.harrop@gmail.com>",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

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

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

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

@@ -19,7 +19,7 @@
   },
   "homepage": "https://github.com/dbanksdesign/style-dictionary-node#readme",
   "devDependencies": {
-    "style-dictionary": "3.1.0",
+    "style-dictionary": "3.7.1",
     "tinycolor2": "^1.4.1"
   }
 }

package/examples/advanced/npm-module/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

package/examples/advanced/referencing_aliasing/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

package/examples/advanced/s3/package.json

@@ -15,6 +15,6 @@
   "devDependencies": {
     "aws-sdk": "^2.7.21",
     "fs-extra": "^1.0.0",
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

package/examples/advanced/tokens-deprecation/package.json

@@ -16,6 +16,6 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "lodash": "^4.17.11",
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

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

@@ -11,6 +11,6 @@
   "license": "ISC",
   "devDependencies": {
     "chroma-js": "^2.1.0",
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

package/examples/advanced/transitive-transforms/tokens/color/font.json5

@@ -13,7 +13,8 @@
       },
       tertiary: {
         // transitive transforms allow you to modify a modified reference
-        value: "{color.font.secondary.value}",
+        // You can use references with or without `.value`
+        value: "{color.font.secondary}",
         modify: [{
           // this will brighten the secondary value, which is a brightened version
           // of primary

package/examples/advanced/variables-in-outputs/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "style-dictionary": "3.1.0"
+    "style-dictionary": "3.7.1"
   }
 }

package/examples/advanced/yaml-tokens/package.json

@@ -9,7 +9,7 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.1.0",
+    "style-dictionary": "3.7.1",
     "yaml": "^1.10.0"
   }
 }

package/examples/basic/config.json

@@ -95,10 +95,25 @@
       "transformGroup": "ios-swift",
       "buildPath": "build/ios-swift/",
       "files": [{
-        "destination": "StyleDictionary.swift",
+        "destination": "StyleDictionary+Class.swift",
         "format": "ios-swift/class.swift",
-        "className": "StyleDictionary",
+        "className": "StyleDictionaryClass",
         "filter": {}
+      },{
+        "destination": "StyleDictionary+Enum.swift",
+        "format": "ios-swift/enum.swift",
+        "className": "StyleDictionaryEnum",
+        "filter": {}
+      },{
+        "destination": "StyleDictionary+Struct.swift",
+        "format": "ios-swift/any.swift",
+        "className": "StyleDictionaryStruct",
+        "filter": {},
+        "options": {
+          "imports": "SwiftUI",
+          "objectType": "struct",
+          "accessControl": "internal"
+        }
       }]
     },
     "ios-swift-separate-enums": {
@@ -117,7 +132,6 @@
         "destination": "StyleDictionarySize.swift",
         "format": "ios-swift/enum.swift",
         "className": "StyleDictionarySize",
-        "type": "float",
         "filter": {
           "attributes": {
             "category": "size"

package/examples/complete/package.json

@@ -11,6 +11,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "2.9.0"
+    "style-dictionary": "latest"
   }
 }