style-dictionary 5.3.0 → 5.3.2

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

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

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

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",
-    "style-dictionary": "^5.3.0"
+    "style-dictionary": "^5.3.2"
   },
   "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.3.0"
+    "style-dictionary": "^5.3.2"
   },
   "jest": {
     "preset": "react-native"

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

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

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

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

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

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

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

@@ -11,6 +11,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.3.0"
+    "style-dictionary": "^5.3.2"
   }
 }

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.3.0"
+    "style-dictionary": "^5.3.2"
   }
 }

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

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

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

@@ -1125,9 +1125,9 @@
       "license": "MIT"
     },
     "node_modules/qs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
-      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {

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": "^5.3.0",
+    "style-dictionary": "^5.3.2",
     "tinycolor2": "^1.4.1"
   }
 }

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

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

package/examples/advanced/referencing_aliasing/package.json

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

package/examples/advanced/s3/package.json

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

package/examples/advanced/tailwind-preset/package.json

@@ -10,7 +10,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.3.0",
+    "style-dictionary": "^5.3.2",
     "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": "^5.3.0"
+    "style-dictionary": "^5.3.2"
   }
 }

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

@@ -12,6 +12,6 @@
   "license": "ISC",
   "devDependencies": {
     "colorjs.io": "^0.5.2",
-    "style-dictionary": "^5.3.0"
+    "style-dictionary": "^5.3.2"
   }
 }

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

@@ -11,6 +11,6 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "style-dictionary": "^5.3.0"
+    "style-dictionary": "^5.3.2"
   }
 }

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

@@ -10,7 +10,7 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.3.0",
+    "style-dictionary": "^5.3.2",
     "yaml": "^1.10.0"
   }
 }

package/lib/StyleDictionary.js

@@ -67,7 +67,7 @@ export default class StyleDictionary extends Register {
   // Placeholder is transformed on prepublish -> see scripts/inject-version.js
   // Another option might be import pkg from './package.json' with { "type": "json" } which would work in both browser and node, but support is not there yet.
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#browser_compatibility
-  static VERSION = '5.3.0';
+  static VERSION = '5.3.2';
 
   /** @returns {Config} */
   get options() {

package/lib/common/transforms.d.ts

@@ -5,17 +5,12 @@
  */
 export function isDTCGColorObject(val: unknown): val is DTCGColorValue;
 /**
- * Get color RGB values from either legacy string format or DTCG object format
- * @param {Token} token
- * @param {Config} options
- * @returns {{ r: number, g: number, b: number, a: number }}
+ * Get a CSS compatible color string from a token value that contains a color property
+ * Used in CSS shorthand transforms for token types that can have color poperties, like border, gradient, shadow.
+ * @param {unknown} tokenValue
+ * @returns {string | undefined}
  */
-export function getColorRgb(token: Token, options: Config): {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
+export function getColorStringFromTokenObjectValue(tokenValue: unknown): string | undefined;
 /**
  * Get a tinycolor2 Color instance from either legacy string format or DTCG object format
  * This provides backward compatibility for transformers that use tinycolor2 methods
@@ -26,11 +21,10 @@ export function getColorRgb(token: Token, options: Config): {
 export function getColor(token: Token, options: Config): ReturnType<typeof Color>;
 /**
  * Get a ColorJS Color instance from either legacy string format or DTCG object format
- * @param {Token} token
- * @param {Config} options
+ * @param {DTCGColorValue | string} val
  * @returns {ColorJS}
  */
-export function getColorJS(token: Token, options: Config): ColorJS;
+export function getColorJS(val: DTCGColorValue | string): ColorJS;
 /**
  * @param {Token} token
  * @param {Config} options

package/lib/common/transforms.js

@@ -130,20 +130,23 @@ function dtcgColorToRgb(dtcgColor) {
 }
 
 /**
- * Get color RGB values from either legacy string format or DTCG object format
- * @param {Token} token
- * @param {Config} options
- * @returns {{ r: number, g: number, b: number, a: number }}
+ * Get a CSS compatible color string from a token value that contains a color property
+ * Used in CSS shorthand transforms for token types that can have color poperties, like border, gradient, shadow.
+ * @param {unknown} tokenValue
+ * @returns {string | undefined}
  */
-export function getColorRgb(token, options) {
-  const val = options.usesDtcg ? token.$value : token.value;
-
-  if (isDTCGColorObject(val)) {
-    return dtcgColorToRgb(val);
+export function getColorStringFromTokenObjectValue(tokenValue) {
+  /** @type {string | undefined} */
+  let hex;
+  if (typeof tokenValue === 'object' && tokenValue !== null && 'color' in tokenValue) {
+    if (typeof tokenValue.color === 'string') {
+      return tokenValue.color;
+    }
+    let color = /** @type {DTCGColorValue} */ (tokenValue.color);
+    let colorJS = getColorJS(color);
+    hex = colorJS.toString();
   }
-
-  // Legacy format - use tinycolor2
-  return Color(val).toRgb();
+  return hex;
 }
 
 /**
@@ -166,13 +169,10 @@ export function getColor(token, options) {
 
 /**
  * Get a ColorJS Color instance from either legacy string format or DTCG object format
- * @param {Token} token
- * @param {Config} options
+ * @param {DTCGColorValue | string} val
  * @returns {ColorJS}
  */
-export function getColorJS(token, options) {
-  const val = options.usesDtcg ? token.$value : token.value;
-
+export function getColorJS(val) {
   if (isDTCGColorObject(val)) {
     return dtcgToColorJS(val);
   }
@@ -858,7 +858,8 @@ export default {
     type: value,
     filter: isColor,
     transform: function (token, _, options) {
-      const color = getColorJS(token, options).to('oklch');
+      const val = options.usesDtcg ? token.$value : token.value;
+      const color = getColorJS(val).to('oklch');
       const [l, c, h] = color.coords;
       const alpha = isNaN(color.alpha) ? 1 : color.alpha;
       // Format: oklch(L C H) or oklch(L C H / alpha)
@@ -889,7 +890,8 @@ export default {
     type: value,
     filter: isColor,
     transform: function (token, _, options) {
-      const color = getColorJS(token, options).to('oklab');
+      const val = options.usesDtcg ? token.$value : token.value;
+      const color = getColorJS(val).to('oklab');
       const [l, a, b] = color.coords;
       const alpha = isNaN(color.alpha) ? 1 : color.alpha;
       // Format: oklab(L a b) or oklab(L a b / alpha)
@@ -920,7 +922,8 @@ export default {
     type: value,
     filter: isColor,
     transform: function (token, _, options) {
-      const color = getColorJS(token, options).to('p3');
+      const val = options.usesDtcg ? token.$value : token.value;
+      const color = getColorJS(val).to('p3');
       const [r, g, b] = color.coords;
       const alpha = isNaN(color.alpha) ? 1 : color.alpha;
       // Format: color(display-p3 r g b) or color(display-p3 r g b / alpha)
@@ -951,7 +954,8 @@ export default {
     type: value,
     filter: isColor,
     transform: function (token, _, options) {
-      const color = getColorJS(token, options).to('lch');
+      const val = options.usesDtcg ? token.$value : token.value;
+      const color = getColorJS(val).to('lch');
       const [l, c, h] = color.coords;
       const alpha = isNaN(color.alpha) ? 1 : color.alpha;
       // Format: lch(L% C H) or lch(L% C H / alpha)
@@ -1561,16 +1565,18 @@ export default {
         // already transformed to string
         return val;
       }
-      const { color, width } = val;
-      let { style } = val;
+      const colorStr = getColorStringFromTokenObjectValue(val);
+      const { width } = val;
 
       // use fallback for style object value, since CSS does not allow
       // detailed control of the dash pattern or line caps on dashed borders
       // https://design-tokens.github.io/community-group/format/#example-fallback-for-object-stroke-style
+      let { style } = val;
       if (typeof style === 'object') {
         style = 'dashed';
       }
-      return `${width ? `${width} ` : ''}${style ? `${style}` : 'none'}${color ? ` ${color}` : ''}`;
+
+      return `${width ? `${width} ` : ''}${style ? `${style}` : 'none'}${colorStr ? ` ${colorStr}` : ''}`;
     },
   },
 
@@ -1693,10 +1699,12 @@ export default {
         if (typeof val !== 'object') {
           return val;
         }
-        const { type, color, offsetX, offsetY, blur, spread } = val;
-        return `${type ? `${type} ` : ''}${offsetX ?? 0} ${offsetY ?? 0} ${blur ?? 0} ${
+        const { inset, type, offsetX, offsetY, blur, spread } = val;
+        const colorStr = getColorStringFromTokenObjectValue(val);
+        // `type` property will be deprecated (Tokens Studio compat) in the future and removed in v6
+        return `${inset || type === 'inset' ? 'inset ' : ''}${offsetX ?? 0} ${offsetY ?? 0} ${blur ?? 0} ${
           spread ? `${spread} ` : ''
-        }${color ?? `#000000`}`;
+        }${colorStr ?? `#000000`}`;
       };
 
       if (Array.isArray(val)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-dictionary",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "description": "Style once, use everywhere. A build system for creating cross-platform styles.",
   "keywords": [
     "style dictionary",
@@ -117,7 +117,7 @@
   },
   "dependencies": {
     "@bundled-es-modules/deepmerge": "^4.3.1",
-    "@bundled-es-modules/glob": "^13.0.1",
+    "@bundled-es-modules/glob": "^13.0.3",
     "@bundled-es-modules/memfs": "^4.17.0",
     "@zip.js/zip.js": "^2.7.44",
     "chalk": "^5.3.0",