style-dictionary 4.3.2 → 4.4.0

package/README.md

@@ -187,7 +187,7 @@ This tells the style dictionary build system how and what to build. The default
       "small": { "value": "10px" },
       "medium": { "value": "16px" },
       "large": { "value": "24px" },
-      "base": { "value": "{size.font.medium.value}" }
+      "base": { "value": "{size.font.medium}" }
     }
   }
 }

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

@@ -12,6 +12,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   }
 }

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

@@ -1,9 +1,9 @@
 {
   "color": {
     "font": {
-      "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" }
+      "base": { "value": "{color.base.red}", "type": "color" },
+      "secondary": { "value": "{color.base.green}", "type": "color" },
+      "tertiary": { "value": "{color.base.gray.light}", "type": "color" }
     }
   }
 }

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

@@ -17,7 +17,7 @@
         "type": "fontSize"
       },
       "base": {
-        "value": "{size.font.medium.value}",
+        "value": "{size.font.medium}",
         "comment": "the base size of the font",
         "type": "fontSize"
       }

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

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   },
   "resolutions": {
     "immer": "8.0.1",

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

@@ -14,7 +14,7 @@
   "size": {
     "text": {
       "base": {
-        "value": "{size.text.medium.value}",
+        "value": "{size.text.medium}",
         "type": "fontSize"
       },
       "small": {

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": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   },
   "jest": {
     "preset": "react-native"

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

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   }
 }

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

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   }
 }

package/examples/advanced/flutter/style_dictionary/tokens/color/font.json

@@ -1,9 +1,9 @@
 {
   "color": {
     "font": {
-      "primary": { "value": "{color.core.black.value}", "type": "color" },
-      "link": { "value": "{color.core.blue.value}", "type": "color" },
-      "inverse": { "value": "{color.core.white.value}", "type": "color" }
+      "primary": { "value": "{color.core.black}", "type": "color" },
+      "link": { "value": "{color.core.blue}", "type": "color" },
+      "inverse": { "value": "{color.core.white}", "type": "color" }
     }
   }
 }

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

@@ -9,6 +9,6 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   }
 }

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

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   }
 }

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

@@ -1,7 +1,7 @@
 {
   "color": {
     "core": {
-      "greener": { "value": "{color.core.green.value}", "type": "color" },
+      "greener": { "value": "{color.core.green}", "type": "color" },
       "red": { "value": "#ff0000", "type": "color" },
       "blue": { "value": "#0000ff", "type": "color" },
       "green": { "value": "#00ff00", "type": "color" }

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": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   }
 }

package/examples/advanced/matching-build-files/tokens/button/base.json

@@ -2,7 +2,7 @@
   "button": {
     "background": {
       "color": {
-        "value": "{color.blue.value}",
+        "value": "{color.blue}",
         "type": "color"
       }
     },

package/examples/advanced/multi-brand-multi-platform/README.md

@@ -84,8 +84,8 @@ These values are used as "aliases" in the `tokens/global/color/base.json` file:
     "base": {
       ...
     },
-    "primary"     : { "value": "{color.brand.primary.value}", "type": "color" },
-    "secondary"   : { "value": "{color.brand.secondary.value}", "type": "color" },
+    "primary"     : { "value": "{color.brand.primary}", "type": "color" },
+    "secondary"   : { "value": "{color.brand.secondary}", "type": "color" },
     ...
   }
 }
@@ -112,7 +112,7 @@ the value `font.platform.system` is consumed by the `tokens/globals/font/index.j
   "font": {
     "family": {
       "headers": { "value": "Montserrat", "type": "fontFamily" },
-      "base": { "value": "{font.platform.system.value}", "type": "fontFamily" }
+      "base": { "value": "{font.platform.system}", "type": "fontFamily" }
     }
   }
 }

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

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.4.0"
   }
 }

package/examples/advanced/multi-brand-multi-platform/tokens/globals/button.json

@@ -8,7 +8,7 @@
     },
     "text": {
       "size": {
-        "value": "{size.font.medium.value}",
+        "value": "{size.font.medium}",
         "type": "fontSize"
       }
     }

package/examples/advanced/multi-brand-multi-platform/tokens/globals/color/base.json

@@ -10,12 +10,12 @@
       "red": { "value": "#FF0000", "type": "color" },
       "green": { "value": "#00FF00", "type": "color" }
     },
-    "primary": { "value": "{color.brand.primary.value}", "type": "color" },
-    "secondary": { "value": "{color.brand.secondary.value}", "type": "color" },
+    "primary": { "value": "{color.brand.primary}", "type": "color" },
+    "secondary": { "value": "{color.brand.secondary}", "type": "color" },
     "action": {
-      "primary": { "value": "{color.primary.value}", "type": "color" },
-      "secondary": { "value": "{color.secondary.value}", "type": "color" },
-      "tertiary": { "value": "{color.base.gray.medium.value}", "type": "color" }
+      "primary": { "value": "{color.primary}", "type": "color" },
+      "secondary": { "value": "{color.secondary}", "type": "color" },
+      "tertiary": { "value": "{color.base.gray.medium}", "type": "color" }
     }
   }
 }

package/examples/advanced/multi-brand-multi-platform/tokens/globals/color/font.json

@@ -1,10 +1,10 @@
 {
   "color": {
     "font": {
-      "base": { "value": "{color.base.black.value}", "type": "color" },
-      "primary": { "value": "{color.primary.value}", "type": "color" },
-      "secondary": { "value": "{color.secondary.value}", "type": "color" },
-      "tertiary": { "value": "{color.base.gray.light.value}", "type": "color" }
+      "base": { "value": "{color.base.black}", "type": "color" },
+      "primary": { "value": "{color.primary}", "type": "color" },
+      "secondary": { "value": "{color.secondary}", "type": "color" },
+      "tertiary": { "value": "{color.base.gray.light}", "type": "color" }
     }
   }
 }

package/examples/advanced/multi-brand-multi-platform/tokens/globals/font/index.json

@@ -2,7 +2,7 @@
   "font": {
     "family": {
       "headers": { "value": "Montserrat", "type": "fontFamily" },
-      "base": { "value": "{font.platform.system.value}", "type": "fontFamily" }
+      "base": { "value": "{font.platform.system}", "type": "fontFamily" }
     }
   }
 }

package/examples/advanced/multi-brand-multi-platform/tokens/globals/size/font.json

@@ -1,7 +1,7 @@
 {
   "size": {
     "font": {
-      "small" : {
+      "small": {
         "value": "0.75",
         "comment": "the small size of the font"
       },
@@ -9,12 +9,12 @@
         "value": "1",
         "comment": "the medium size of the font"
       },
-      "large" : {
+      "large": {
         "value": "2",
         "comment": "the large size of the font"
       },
-      "base"  : {
-        "value": "{size.font.medium.value}",
+      "base": {
+        "value": "{size.font.medium}",
         "comment": "the base size of the font"
       }
     }

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

@@ -1,4 +1,4 @@
 export default {
-  padding: { value: '{size.padding.base.value}', type: 'dimension' },
-  'font-size': { value: '{size.font.large.value}', type: 'fontSize' },
+  padding: { value: '{size.padding.base}', type: 'dimension' },
+  'font-size': { value: '{size.font.large}', type: 'fontSize' },
 };

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

@@ -5,6 +5,6 @@ import base from './base.js';
 // styles if you have a base style and variations.
 export default {
   ...base,
-  'background-color': { value: '{color.background.link.value}' },
-  color: { value: '{color.font.inverse.base.value}' },
+  'background-color': { value: '{color.background.link}' },
+  color: { value: '{color.font.inverse.base}' },
 };

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

@@ -2,9 +2,9 @@ import base from './base.js';
 
 export default {
   ...base,
-  'background-color': { value: '{color.background.base.value}' },
-  color: { value: '{color.font.link.value}' },
-  'border-color': { value: '{color.border.base.value}' },
-  'border-width': { value: '{size.border.width.base.value}' },
-  'border-radius': { value: '{size.border.radius.base.value}' },
+  'background-color': { value: '{color.background.base}' },
+  color: { value: '{color.font.link}' },
+  'border-color': { value: '{color.border.base}' },
+  'border-width': { value: '{size.border.width.base}' },
+  'border-radius': { value: '{size.border.radius.base}' },
 };

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