style-dictionary 4.3.2 → 4.3.3

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.3.3"
   }
 }

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.3.3"
   },
   "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.3.3"
   },
   "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.3.3"
   }
 }

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.3.3"
   }
 }

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.3.3"
   }
 }

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.3.3"
   }
 }

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.3.3"
   }
 }

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.3.3"
   }
 }

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/package.json

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

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

@@ -1,5 +1,5 @@
 export default {
   base: { value: '#ffffff' },
-  alt: { value: '{color.core.grey.20.value}' },
-  link: { value: '{color.brand.primary.base.value}' },
+  alt: { value: '{color.core.grey.20}' },
+  link: { value: '{color.brand.primary.base}' },
 };

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

@@ -1,3 +1,3 @@
 export default {
-  base: { value: '{color.core.grey.20.value}' },
+  base: { value: '{color.core.grey.20}' },
 };

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

@@ -1,16 +1,16 @@
 export default {
   primary: {
-    lighter: { value: '{color.core.teal.60.value}' },
-    light: { value: '{color.core.teal.80.value}' },
-    base: { value: '{color.core.teal.100.value}' },
-    dark: { value: '{color.core.teal.120.value}' },
-    darker: { value: '{color.core.teal.140.value}' },
+    lighter: { value: '{color.core.teal.60}' },
+    light: { value: '{color.core.teal.80}' },
+    base: { value: '{color.core.teal.100}' },
+    dark: { value: '{color.core.teal.120}' },
+    darker: { value: '{color.core.teal.140}' },
   },
   secondary: {
-    lighter: { value: '{color.core.purple.60.value}' },
-    light: { value: '{color.core.purple.80.value}' },
-    base: { value: '{color.core.purple.100.value}' },
-    dark: { value: '{color.core.purple.120.value}' },
-    darker: { value: '{color.core.purple.140.value}' },
+    lighter: { value: '{color.core.purple.60}' },
+    light: { value: '{color.core.purple.80}' },
+    base: { value: '{color.core.purple.100}' },
+    dark: { value: '{color.core.purple.120}' },
+    darker: { value: '{color.core.purple.140}' },
   },
 };

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

@@ -1,7 +1,7 @@
 export default {
-  base: { value: '{color.core.grey.100.value}' },
-  secondary: { value: '{color.core.grey.80.value}' },
-  link: { value: '{color.brand.primary.base.value}' },
+  base: { value: '{color.core.grey.100}' },
+  secondary: { value: '{color.core.grey.80}' },
+  link: { value: '{color.brand.primary.base}' },
   inverse: {
     base: { value: '#fff' },
   },

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

@@ -6,6 +6,6 @@ export default {
   5: { value: 1.75 },
   6: { value: 2.5 },
 
-  base: { value: '{size.font.3.value}' },
-  large: { value: '{size.font.4.value}' },
+  base: { value: '{size.font.3}' },
+  large: { value: '{size.font.4}' },
 };

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

@@ -5,6 +5,6 @@ export default {
   4: { value: 3.5 },
   5: { value: 5 },
 
-  base: { value: '{size.padding.1.value}' },
-  large: { value: '{size.padding.2.value}' },
+  base: { value: '{size.padding.1}' },
+  large: { value: '{size.padding.2}' },
 };

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

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

package/examples/advanced/npm-module/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/npm-module/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/referencing_aliasing/README.md

@@ -16,7 +16,7 @@ The "build" command processes the JSON files in the `tokens` folder. Whenever it
 
 ```
    token: {
-       "value": "{ref.to.object.value}"
+       "value": "{ref.to.object}"
    }
 ```
 
@@ -31,11 +31,11 @@ Open the JSON files in the `tokens` folder and see how certain tokens are refere
 For example, open `color/base.json` and see how the value of the "primary" color is a **reference** to the value of the "green" color, declared as:
 
 ```
-   "primary": { "value": "{color.base.green.value}" }
+   "primary": { "value": "{color.base.green}" }
 
 ```
 
-In this case, the string `"{color.base.green.value}"` is resolved at build time, and gets its value from the value of the "green" base color, `"#00FF00"`.
+In this case, the string `"{color.base.green}"` is resolved at build time, and gets its value from the value of the "green" base color, `"#00FF00"`.
 
 The reference can point to another token in a **different JSON file**. For example open `color/font.json` and see how the value for the base/secondary font colors are references to the tokens declared in `color/base.json`:
 
@@ -43,8 +43,8 @@ The reference can point to another token in a **different JSON file**. For examp
 {
   "color": {
     "font": {
-      "base"     : { "value": "{color.base.red.value}" },
-      "secondary": { "value": "{color.base.green.value}" }
+      "base"     : { "value": "{color.base.red}" },
+      "secondary": { "value": "{color.base.green}" }
       ...
 ```
 
@@ -55,7 +55,7 @@ It is also possible to create **chains of references**, where a value references
   "button": {
     "color": {
       "primary": {
-        "value": "{color.primary.value}"
+        "value": "{color.primary}"
         ...
 ```
 

package/examples/advanced/referencing_aliasing/package.json

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

package/examples/advanced/referencing_aliasing/tokens/button/button.json

@@ -2,15 +2,15 @@
   "button": {
     "color": {
       "primary": {
-        "value": "{color.primary.value}",
+        "value": "{color.primary}",
         "type": "color"
       },
       "secondary": {
-        "value": "{color.secondary.value}",
+        "value": "{color.secondary}",
         "type": "color"
       },
       "danger": {
-        "value": "{color.base.red.value}",
+        "value": "{color.base.red}",
         "type": "color"
       }
     },

package/examples/advanced/referencing_aliasing/tokens/color/base.json

@@ -11,7 +11,7 @@
       "green": { "value": "#00FF00", "type": "color" },
       "blue": { "value": "#0000FF", "type": "color" }
     },
-    "primary": { "value": "{color.base.green.value}", "type": "color" },
-    "secondary": { "value": "{color.base.blue.value}", "type": "color" }
+    "primary": { "value": "{color.base.green}", "type": "color" },
+    "secondary": { "value": "{color.base.blue}", "type": "color" }
   }
 }

package/examples/advanced/referencing_aliasing/tokens/color/font.json

@@ -1,9 +1,9 @@
 {
   "color": {
     "font": {
-      "base": { "value": "{color.base.gray.dark.value}", "type": "color" },
-      "faded": { "value": "{color.base.gray.medium.value}", "type": "color" },
-      "error": { "value": "{color.base.red.value}", "type": "color" }
+      "base": { "value": "{color.base.gray.dark}", "type": "color" },
+      "faded": { "value": "{color.base.gray.medium}", "type": "color" },
+      "error": { "value": "{color.base.red}", "type": "color" }
     }
   }
 }

package/examples/advanced/referencing_aliasing/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/s3/package.json

@@ -16,6 +16,6 @@
   "devDependencies": {
     "aws-sdk": "^2.7.21",
     "fs-extra": "^1.0.0",
-    "style-dictionary": "^4.3.2"
+    "style-dictionary": "^4.3.3"
   }
 }

package/examples/advanced/s3/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/s3/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/tailwind-preset/package.json

@@ -10,7 +10,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.3.2",
+    "style-dictionary": "^4.3.3",
     "tailwindcss": "^3.4.15",
     "mocha": "^10.2.0",
     "chai": "^5.1.1"

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

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

package/examples/advanced/tokens-deprecation/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}" },
+      "secondary": { "value": "{color.base.green}" },
+      "tertiary": { "value": "{color.base.gray.light}" }
     }
   }
 }

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

@@ -1,7 +1,7 @@
 {
   "size": {
     "font": {
-      "small" : {
+      "small": {
         "value": "0.75",
         "comment": "the small size of the font"
       },
@@ -9,14 +9,14 @@
         "value": "1",
         "comment": "the medium size of the font"
       },
-      "large" : {
+      "large": {
         "value": "2",
         "comment": "the large size of the font",
         "deprecated": true,
         "deprecated_comment": "replace with the \"medium\" size"
       },
-      "base"  : {
-        "value": "{size.font.medium.value}",
+      "base": {
+        "value": "{size.font.medium}",
         "comment": "the base size of the font"
       }
     }