style-dictionary 4.0.0-prerelease.13 → 4.0.0-prerelease.14

package/lib/common/formatHelpers/formattedVariables.js

@@ -36,6 +36,7 @@ const defaultFormatting = {
  * @param {Boolean} [options.outputReferences] - Whether or not to output references
  * @param {Formatting} [options.formatting] - Custom formatting properties that define parts of a declaration line in code. This will get passed to `formatHelpers.createPropertyFormatter` and used for the `lineSeparator` between lines of code.
  * @param {Boolean} [options.themeable] [false] - Whether tokens should default to being themeable.
+ * @param {boolean} [options.usesDtcg] [false] - Whether DTCG token syntax should be uses.
  * @returns {String}
  * @example
  * ```js
@@ -57,6 +58,7 @@ export default function formattedVariables({
   outputReferences = false,
   formatting = {},
   themeable = false,
+  usesDtcg = false,
 }) {
   // typecast, we know that by know the tokens have been transformed
   let allTokens = /** @type {Token[]} */ (dictionary.allTokens);
@@ -87,6 +89,7 @@ export default function formattedVariables({
         format,
         formatting,
         themeable,
+        usesDtcg,
       }),
     )
     .filter(function (strVal) {

package/lib/common/formatHelpers/getTypeScriptType.d.ts

@@ -1,5 +1,6 @@
 /**
  * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').Config} Config
  */
 /**
  * Given some value, returns a basic valid TypeScript type for that value.
@@ -22,11 +23,12 @@
  * });
  *```
  * @param {any} value A value to check the type of.
- * @param {Options & {outputStringLiterals?: boolean}} [options]
+ * @param {Options & Config & {outputStringLiterals?: boolean}} [options]
  * @return {String} A valid name for a TypeScript type.
  *
  */
-export default function getTypeScriptType(value: any, options?: (import("../../../types/Config.d.ts").LocalOptions & {
+export default function getTypeScriptType(value: any, options?: (import("../../../types/Config.d.ts").LocalOptions & import("../../../types/Config.d.ts").Config & {
     outputStringLiterals?: boolean | undefined;
 }) | undefined): string;
 export type Options = import('../../../types/Config.d.ts').LocalOptions;
+export type Config = import('../../../types/Config.d.ts').Config;

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -13,6 +13,7 @@
 
 /**
  * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').Config} Config
  */
 
 /**
@@ -36,7 +37,7 @@
  * });
  *```
  * @param {any} value A value to check the type of.
- * @param {Options & {outputStringLiterals?: boolean}} [options]
+ * @param {Options & Config & {outputStringLiterals?: boolean}} [options]
  * @return {String} A valid name for a TypeScript type.
  *
  */
@@ -45,7 +46,7 @@ export default function getTypeScriptType(value, options = {}) {
 
   if (Array.isArray(value)) return getArrayType(value);
   if (typeof value === 'object') return getObjectType(value);
-  if (outputStringLiterals && typeof value === 'string') return `"${value}"`;
+  if (outputStringLiterals && typeof value === 'string') return `"${value.replace(/"/g, '\\"')}"`;
   if (['string', 'number', 'boolean'].includes(typeof value)) return typeof value;
 
   return 'any';

package/lib/common/formatHelpers/iconsWithPrefix.d.ts

@@ -1,6 +1,7 @@
 /**
  * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} Token
  * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').PlatformConfig} PlatformConfig
  */
 /**
  *
@@ -13,6 +14,7 @@
  * @param {String} prefix - Character to prefix variable names, like '$' for Sass
  * @param {Token[]} allTokens - allTokens array on the dictionary object passed to the formatter function.
  * @param {Options} options - options object passed to the formatter function.
+ * @param {PlatformConfig} platform - platform specific options
  * @returns {String}
  * @example
  * ```js
@@ -24,6 +26,7 @@
  * });
  * ```
  */
-export default function iconsWithPrefix(prefix: string, allTokens: Token[], options: Options): string;
+export default function iconsWithPrefix(prefix: string, allTokens: Token[], options: Options, platform: PlatformConfig): string;
 export type Token = import('../../../types/DesignToken.d.ts').TransformedToken;
 export type Options = import('../../../types/Config.d.ts').LocalOptions;
+export type PlatformConfig = import('../../../types/Config.d.ts').PlatformConfig;

package/lib/common/formatHelpers/iconsWithPrefix.js

@@ -14,6 +14,7 @@
 /**
  * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} Token
  * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').PlatformConfig} PlatformConfig
  */
 
 /**
@@ -27,6 +28,7 @@
  * @param {String} prefix - Character to prefix variable names, like '$' for Sass
  * @param {Token[]} allTokens - allTokens array on the dictionary object passed to the formatter function.
  * @param {Options} options - options object passed to the formatter function.
+ * @param {PlatformConfig} platform - platform specific options
  * @returns {String}
  * @example
  * ```js
@@ -38,14 +40,15 @@
  * });
  * ```
  */
-export default function iconsWithPrefix(prefix, allTokens, options) {
+export default function iconsWithPrefix(prefix, allTokens, options, platform) {
   return allTokens
     .filter(function (token) {
       return token.attributes?.category === 'content' && token.attributes.type === 'icon';
     })
     .map(function (token) {
-      const varName = prefix + token.name + ': ' + (token.$value ?? token.value) + ';';
-      const className = '.' + options.prefix + '-icon.' + token.attributes?.item + ':before ';
+      const varName =
+        prefix + token.name + ': ' + (options.usesDtcg ? token.$value : token.value) + ';';
+      const className = '.' + platform.prefix + '-icon.' + token.attributes?.item + ':before ';
       const declaration = '{ content: ' + prefix + token.name + '; }';
       return varName + '\n' + className + declaration;
     })

package/lib/common/formatHelpers/minifyDictionary.d.ts

@@ -6,6 +6,7 @@
  * @memberof module:formatHelpers
  * @name minifyDictionary
  * @param {Tokens} obj - The object to minify. You will most likely pass `dictionary.tokens` to it.
+ * @param {boolean} [usesDtcg] - Whether or not tokens are using DTCG syntax.
  * @returns {Tokens}
  * @example
  * ```js
@@ -17,5 +18,5 @@
  * });
  * ```
  */
-export default function minifyDictionary(obj: Tokens): Tokens;
+export default function minifyDictionary(obj: Tokens, usesDtcg?: boolean | undefined): Tokens;
 export type Tokens = import('../../../types/DesignToken.d.ts').TransformedTokens;

package/lib/common/formatHelpers/minifyDictionary.js

@@ -20,6 +20,7 @@
  * @memberof module:formatHelpers
  * @name minifyDictionary
  * @param {Tokens} obj - The object to minify. You will most likely pass `dictionary.tokens` to it.
+ * @param {boolean} [usesDtcg] - Whether or not tokens are using DTCG syntax.
  * @returns {Tokens}
  * @example
  * ```js
@@ -31,7 +32,7 @@
  * });
  * ```
  */
-export default function minifyDictionary(obj) {
+export default function minifyDictionary(obj, usesDtcg = false) {
   if (typeof obj !== 'object' || Array.isArray(obj)) {
     return obj;
   }
@@ -39,12 +40,12 @@ export default function minifyDictionary(obj) {
   /** @type {Tokens} */
   const toRet = {};
 
-  if (Object.hasOwn(obj, '$value') || Object.hasOwn(obj, 'value')) {
-    return obj.$value ?? obj.value;
+  if (Object.hasOwn(obj, `${usesDtcg ? '$' : ''}value`)) {
+    return usesDtcg ? obj.$value : obj.value;
   } else {
     for (const name in obj) {
       if (Object.hasOwn(obj, name)) {
-        toRet[name] = minifyDictionary(obj[name]);
+        toRet[name] = minifyDictionary(obj[name], usesDtcg);
       }
     }
   }

package/lib/common/formatHelpers/sortByReference.js

@@ -12,7 +12,7 @@
  */
 
 import usesReferences from '../../utils/references/usesReferences.js';
-import getReferences from '../../utils/references/getReferences.js';
+import { _getReferences } from '../../utils/references/getReferences.js';
 
 /**
  * @typedef {import('../../../types/DesignToken.d.ts').TransformedTokens} Tokens
@@ -57,10 +57,10 @@ export default function sortByReference(tokens, opts) {
     if (a.original && usesReferences(a.original.value)) {
       // Both a and b have references, we need to see if they reference each other
       if (b.original && usesReferences(b.original.value)) {
-        const aRefs = getReferences(a.original.value, tokens, {
+        const aRefs = _getReferences(a.original.value, tokens, {
           unfilteredTokens: opts?.unfilteredTokens,
         });
-        const bRefs = getReferences(b.original.value, tokens, {
+        const bRefs = _getReferences(b.original.value, tokens, {
           unfilteredTokens: opts?.unfilteredTokens,
         });
 

package/lib/common/formats.js

@@ -83,11 +83,11 @@ const formats = {
    */
   'css/variables': function ({ dictionary, options = {}, file }) {
     const selector = options.selector ? options.selector : `:root`;
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     return (
       fileHeader({ file }) +
       `${selector} {\n` +
-      formattedVariables({ format: 'css', dictionary, outputReferences }) +
+      formattedVariables({ format: 'css', dictionary, outputReferences, usesDtcg }) +
       `\n}\n`
     );
   },
@@ -144,13 +144,13 @@ const formats = {
     const mapTemplate = _template(scssMapDeep);
 
     // Default the "themeable" option to true for backward compatibility.
-    const { outputReferences, themeable = true } = options;
+    const { outputReferences, themeable = true, usesDtcg } = options;
     return (
       '\n' +
       fileHeader({ file, commentStyle: 'long' }) +
-      formattedVariables({ format: 'sass', dictionary, outputReferences, themeable }) +
+      formattedVariables({ format: 'sass', dictionary, outputReferences, themeable, usesDtcg }) +
       '\n' +
-      mapTemplate({ dictionary, file })
+      mapTemplate({ dictionary, file, options })
     );
   },
 
@@ -173,10 +173,10 @@ const formats = {
    * ```
    */
   'scss/variables': function ({ dictionary, options, file }) {
-    const { outputReferences, themeable = false } = options;
+    const { outputReferences, themeable = false, usesDtcg } = options;
     return (
       fileHeader({ file, commentStyle: 'short' }) +
-      formattedVariables({ format: 'sass', dictionary, outputReferences, themeable }) +
+      formattedVariables({ format: 'sass', dictionary, outputReferences, themeable, usesDtcg }) +
       '\n'
     );
   },
@@ -193,10 +193,10 @@ const formats = {
    * .icon.email:before { content:$content-icon-email; }
    * ```
    */
-  'scss/icons': function ({ dictionary, options, file }) {
+  'scss/icons': function ({ dictionary, options, file, platform }) {
     return (
       fileHeader({ file, commentStyle: 'short' }) +
-      iconsWithPrefix('$', dictionary.allTokens, options)
+      iconsWithPrefix('$', dictionary.allTokens, options, platform)
     );
   },
 
@@ -216,10 +216,10 @@ const formats = {
    * ```
    */
   'less/variables': function ({ dictionary, options, file }) {
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     return (
       fileHeader({ file, commentStyle: 'short' }) +
-      formattedVariables({ format: 'less', dictionary, outputReferences }) +
+      formattedVariables({ format: 'less', dictionary, outputReferences, usesDtcg }) +
       '\n'
     );
   },
@@ -236,10 +236,10 @@ const formats = {
    * .icon.email:before { content:\@content-icon-email; }
    * ```
    */
-  'less/icons': function ({ dictionary, options, file }) {
+  'less/icons': function ({ dictionary, options, file, platform }) {
     return (
       fileHeader({ file, commentStyle: 'short' }) +
-      iconsWithPrefix('@', dictionary.allTokens, options)
+      iconsWithPrefix('@', dictionary.allTokens, options, platform)
     );
   },
 
@@ -256,10 +256,10 @@ const formats = {
    * ```
    */
   'stylus/variables': function ({ dictionary, options, file }) {
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     return (
       fileHeader({ file, commentStyle: 'short' }) +
-      formattedVariables({ format: 'stylus', dictionary, outputReferences }) +
+      formattedVariables({ format: 'stylus', dictionary, outputReferences, usesDtcg }) +
       '\n'
     );
   },
@@ -305,14 +305,16 @@ const formats = {
    *}
    *```
    */
-  'javascript/module-flat': function ({ dictionary, file }) {
+  'javascript/module-flat': function ({ dictionary, file, options }) {
     return (
       fileHeader({ file }) +
       'module.exports = ' +
       '{\n' +
       dictionary.allTokens
         .map(function (token) {
-          return `  "${token.name}": ${JSON.stringify(token.$value ?? token.value)}`;
+          return `  "${token.name}": ${JSON.stringify(
+            options.usesDtcg ? token.$value : token.value,
+          )}`;
         })
         .join(',\n') +
       '\n}' +
@@ -441,7 +443,7 @@ const formats = {
    * export const ColorBackgroundAlt = '#fcfcfcfc';
    * ```
    */
-  'javascript/es6': function ({ dictionary, file }) {
+  'javascript/es6': function ({ dictionary, file, options }) {
     return (
       fileHeader({ file }) +
       dictionary.allTokens
@@ -450,7 +452,7 @@ const formats = {
             'export const ' +
             token.name +
             ' = ' +
-            JSON.stringify(token.$value ?? token.value) +
+            JSON.stringify(options.usesDtcg ? token.$value : token.value) +
             ';';
           if (token.comment) to_ret = to_ret.concat(' // ' + token.comment);
           return to_ret;
@@ -486,9 +488,7 @@ const formats = {
    *
    * @memberof Formats
    * @kind member
-   * @typedef {Object} typescriptEs6DeclarationsOpts
-   * @property {Boolean} [options.outputStringLiterals=false] - Whether or not to output literal types for string values
-   * @param {FormatOpts & { options?: typescriptEs6DeclarationsOpts }} options
+   * @param {FormatOpts} options
    * @example
    * ```typescript
    * export const ColorBackgroundBase : string;
@@ -506,7 +506,7 @@ const formats = {
             'export const ' +
             token.name +
             ' : ' +
-            getTypeScriptType(token.$value ?? token.value, options) +
+            getTypeScriptType(options.usesDtcg ? token.$value : token.value, options) +
             ';';
           return to_ret_token;
         })
@@ -577,7 +577,8 @@ const formats = {
      */
     function treeWalker(obj) {
       let type = Object.create(null);
-      if (Object.hasOwn(obj, '$value') || Object.hasOwn(obj, 'value')) {
+      const propToCheck = options.usesDtcg ? '$value' : 'value';
+      if (Object.hasOwn(obj, propToCheck)) {
         type = 'DesignToken';
       } else {
         for (let k in obj)
@@ -593,8 +594,7 @@ const formats = {
 
     // TODO: find a browser+node compatible way to read from '../../types/DesignToken.d.ts'
     const designTokenInterface = `interface DesignToken {
-      value?: any;
-      $value?: any;
+      ${options.usesDtcg ? '$' : ''}value?: any;
       name?: string;
       comment?: string;
       themeable?: boolean;
@@ -650,8 +650,8 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    *  <dimen name="size_font_base">14sp</color>
    * ```
    */
-  'android/resources': function ({ dictionary, file }) {
-    return androidResources({ dictionary, file, fileHeader });
+  'android/resources': function ({ dictionary, file, options }) {
+    return androidResources({ dictionary, file, fileHeader, options });
   },
 
   /**
@@ -834,7 +834,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   'compose/object': function ({ dictionary, options, file }) {
     const { allTokens, tokens, unfilteredTokens } = dictionary;
     const template = _template(composeObject);
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     const formatProperty = createPropertyFormatter({
       outputReferences,
       dictionary,
@@ -842,6 +842,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
         suffix: '',
         commentStyle: 'none', // We will add the comment in the format template
       },
+      usesDtcg,
     });
 
     let sortedTokens;
@@ -1027,7 +1028,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   'ios-swift/class.swift': function ({ dictionary, options, file, platform }) {
     const { allTokens, tokens, unfilteredTokens } = dictionary;
     const template = _template(iosSwiftAny);
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     options = setSwiftFileProperties(options, 'class', platform.transformGroup);
     const formatProperty = createPropertyFormatter({
       outputReferences,
@@ -1035,6 +1036,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
       formatting: {
         suffix: '',
       },
+      usesDtcg,
     });
 
     let sortedTokens;
@@ -1068,7 +1070,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   'ios-swift/enum.swift': function ({ dictionary, options, file, platform }) {
     const { allTokens, tokens, unfilteredTokens } = dictionary;
     const template = _template(iosSwiftAny);
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     options = setSwiftFileProperties(options, 'enum', platform.transformGroup);
     const formatProperty = createPropertyFormatter({
       outputReferences,
@@ -1076,6 +1078,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
       formatting: {
         suffix: '',
       },
+      usesDtcg,
     });
 
     let sortedTokens;
@@ -1119,7 +1122,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   'ios-swift/any.swift': function ({ dictionary, options, file, platform }) {
     const { allTokens, tokens, unfilteredTokens } = dictionary;
     const template = _template(iosSwiftAny);
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     options = setSwiftFileProperties(options, options.objectType, platform.transformGroup);
     const formatProperty = createPropertyFormatter({
       outputReferences,
@@ -1127,6 +1130,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
       formatting: {
         suffix: '',
       },
+      usesDtcg,
     });
 
     let sortedTokens;
@@ -1214,8 +1218,8 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * }
    * ```
    */
-  'json/nested': function ({ dictionary }) {
-    return JSON.stringify(minifyDictionary(dictionary.tokens), null, 2) + '\n';
+  'json/nested': function ({ dictionary, options }) {
+    return JSON.stringify(minifyDictionary(dictionary.tokens, options.usesDtcg), null, 2) + '\n';
   },
 
   /**
@@ -1231,12 +1235,14 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * }
    * ```
    */
-  'json/flat': function ({ dictionary }) {
+  'json/flat': function ({ dictionary, options }) {
     return (
       '{\n' +
       dictionary.allTokens
         .map(function (token) {
-          return `  "${token.name}": ${JSON.stringify(token.$value ?? token.value)}`;
+          return `  "${token.name}": ${JSON.stringify(
+            options.usesDtcg ? token.$value : token.value,
+          )}`;
         })
         .join(',\n') +
       '\n}' +
@@ -1263,7 +1269,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * }
    * ```
    */
-  'sketch/palette': function ({ dictionary }) {
+  'sketch/palette': function ({ dictionary, options }) {
     const to_ret = {
       compatibleVersion: '1.0',
       pluginVersion: '1.1',
@@ -1275,7 +1281,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
         return token.attributes?.category === 'color' && token.attributes.type === 'base';
       })
       .map(function (token) {
-        return token.$value ?? token.value;
+        return options.usesDtcg ? token.$value : token.value;
       });
     return JSON.stringify(to_ret, null, 2) + '\n';
   },
@@ -1301,7 +1307,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * }
    * ```
    */
-  'sketch/palette/v2': function ({ dictionary }) {
+  'sketch/palette/v2': function ({ dictionary, options }) {
     const to_ret = {
       compatibleVersion: '2.0',
       pluginVersion: '2.2',
@@ -1311,7 +1317,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
           {
             name: token.name,
           },
-          token.$value ?? token.value,
+          options.usesDtcg ? token.$value : token.value,
         );
       }),
     };
@@ -1343,10 +1349,11 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   'flutter/class.dart': function ({ dictionary, options, file }) {
     const { allTokens, tokens, unfilteredTokens } = dictionary;
     const template = _template(flutterClassDart);
-    const { outputReferences } = options;
+    const { outputReferences, usesDtcg } = options;
     const formatProperty = createPropertyFormatter({
       outputReferences,
       dictionary,
+      usesDtcg,
     });
 
     let sortedTokens;

package/lib/common/templates/android/colors.template.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<%\n//\n// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\").\n// You may not use this file except in compliance with the License.\n// A copy of the License is located at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// or in the \"license\" file accompanying this file. This file is distributed\n// on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n// express or implied. See the License for the specific language governing\n// permissions and limitations under the License.\n\nconst tokens = dictionary.allTokens.filter(function(token) {\n  return token.attributes.category === 'color';\n});\n%>\n<%= fileHeader({file, commentStyle: 'xml'}) %>\n<resources>\n  <% tokens.forEach(function(token) {\n  %><color name=\"<%= token.name %>\"><%= token.$value ?? token.value %></color><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>\n  <% }); %>\n</resources>";
+declare const _default: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<%\n//\n// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\").\n// You may not use this file except in compliance with the License.\n// A copy of the License is located at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// or in the \"license\" file accompanying this file. This file is distributed\n// on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n// express or implied. See the License for the specific language governing\n// permissions and limitations under the License.\n\nconst tokens = dictionary.allTokens.filter(function(token) {\n  return token.attributes.category === 'color';\n});\n%>\n<%= fileHeader({file, commentStyle: 'xml'}) %>\n<resources>\n  <% tokens.forEach(function(token) {\n  %><color name=\"<%= token.name %>\"><%= options.usesDtcg ? token.$value : token.value %></color><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>\n  <% }); %>\n</resources>";
 export default _default;

package/lib/common/templates/android/colors.template.js

@@ -21,6 +21,6 @@ const tokens = dictionary.allTokens.filter(function(token) {
 <%= fileHeader({file, commentStyle: 'xml'}) %>
 <resources>
   <% tokens.forEach(function(token) {
-  %><color name="<%= token.name %>"><%= token.$value ?? token.value %></color><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>
+  %><color name="<%= token.name %>"><%= options.usesDtcg ? token.$value : token.value %></color><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>
   <% }); %>
 </resources>`;

package/lib/common/templates/android/dimens.template.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "xml version=\"1.0\" encoding=\"UTF-8\"?>\n<%\n//\n// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\").\n// You may not use this file except in compliance with the License.\n// A copy of the License is located at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// or in the \"license\" file accompanying this file. This file is distributed\n// on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n// express or implied. See the License for the specific language governing\n// permissions and limitations under the License.\n\nconst tokens = dictionary.allTokens.filter(function(token) {\n  return token.attributes.category === 'size' && token.attributes.type !== 'font'\n}); %>\n<%= fileHeader({file, commentStyle: 'xml'}) %>\n<resources>\n  <% tokens.forEach(function(token) {\n  %><dimen name=\"<%= token.name %>\"><%= token.$value ?? token.value %></dimen><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>\n  <% }); %>\n</resources>";
+declare const _default: "xml version=\"1.0\" encoding=\"UTF-8\"?>\n<%\n//\n// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\").\n// You may not use this file except in compliance with the License.\n// A copy of the License is located at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// or in the \"license\" file accompanying this file. This file is distributed\n// on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n// express or implied. See the License for the specific language governing\n// permissions and limitations under the License.\n\nconst tokens = dictionary.allTokens.filter(function(token) {\n  return token.attributes.category === 'size' && token.attributes.type !== 'font'\n}); %>\n<%= fileHeader({file, commentStyle: 'xml'}) %>\n<resources>\n  <% tokens.forEach(function(token) {\n  %><dimen name=\"<%= token.name %>\"><%= options.usesDtcg ? token.$value : token.value %></dimen><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>\n  <% }); %>\n</resources>";
 export default _default;

package/lib/common/templates/android/dimens.template.js

@@ -20,6 +20,6 @@ const tokens = dictionary.allTokens.filter(function(token) {
 <%= fileHeader({file, commentStyle: 'xml'}) %>
 <resources>
   <% tokens.forEach(function(token) {
-  %><dimen name="<%= token.name %>"><%= token.$value ?? token.value %></dimen><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>
+  %><dimen name="<%= token.name %>"><%= options.usesDtcg ? token.$value : token.value %></dimen><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>
   <% }); %>
 </resources>`;

package/lib/common/templates/android/fontDimens.template.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<%\n//\n// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\").\n// You may not use this file except in compliance with the License.\n// A copy of the License is located at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// or in the \"license\" file accompanying this file. This file is distributed\n// on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n// express or implied. See the License for the specific language governing\n// permissions and limitations under the License.\n\nconst tokens = dictionary.allTokens.filter(function(token) {\n  return token.attributes.category === 'size' && token.attributes.type === 'font';\n}); %>\n<%= fileHeader({file, commentStyle: 'xml'}) %>\n<resources>\n  <% tokens.forEach(function(token) {\n  %><dimen name=\"<%= token.name %>\"><%= token.$value ?? token.value %></dimen><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>\n  <% }); %>\n</resources>";
+declare const _default: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<%\n//\n// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\").\n// You may not use this file except in compliance with the License.\n// A copy of the License is located at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// or in the \"license\" file accompanying this file. This file is distributed\n// on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n// express or implied. See the License for the specific language governing\n// permissions and limitations under the License.\n\nconst tokens = dictionary.allTokens.filter(function(token) {\n  return token.attributes.category === 'size' && token.attributes.type === 'font';\n}); %>\n<%= fileHeader({file, commentStyle: 'xml'}) %>\n<resources>\n  <% tokens.forEach(function(token) {\n  %><dimen name=\"<%= token.name %>\"><%= options.usesDtcg ? token.$value : token.value %></dimen><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>\n  <% }); %>\n</resources>";
 export default _default;

package/lib/common/templates/android/fontDimens.template.js

@@ -20,6 +20,6 @@ const tokens = dictionary.allTokens.filter(function(token) {
 <%= fileHeader({file, commentStyle: 'xml'}) %>
 <resources>
   <% tokens.forEach(function(token) {
-  %><dimen name="<%= token.name %>"><%= token.$value ?? token.value %></dimen><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>
+  %><dimen name="<%= token.name %>"><%= options.usesDtcg ? token.$value : token.value %></dimen><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>
   <% }); %>
 </resources>`;

package/lib/common/templates/android/integers.template.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<%\n//\n// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\").\n// You may not use this file except in compliance with the License.\n// A copy of the License is located at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// or in the \"license\" file accompanying this file. This file is distributed\n// on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n// express or implied. See the License for the specific language governing\n// permissions and limitations under the License.\n\nvar tokens = dictionary.allTokens.filter(function(token) {\n  return token.attributes.category === 'time';\n}); %>\n<%= fileHeader({file, commentStyle: 'xml'}) %>\n<resources>\n  <% tokens.forEach(function(token) {\n  %><integer name=\"<%= token.name %>\"><%= token.$value ?? token.value %></integer><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>\n  <% }); %>\n</resources>";
+declare const _default: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<%\n//\n// Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\").\n// You may not use this file except in compliance with the License.\n// A copy of the License is located at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// or in the \"license\" file accompanying this file. This file is distributed\n// on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either\n// express or implied. See the License for the specific language governing\n// permissions and limitations under the License.\n\nvar tokens = dictionary.allTokens.filter(function(token) {\n  return token.attributes.category === 'time';\n}); %>\n<%= fileHeader({file, commentStyle: 'xml'}) %>\n<resources>\n  <% tokens.forEach(function(token) {\n  %><integer name=\"<%= token.name %>\"><%= options.usesDtcg ? token.$value : token.value %></integer><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>\n  <% }); %>\n</resources>";
 export default _default;

package/lib/common/templates/android/integers.template.js

@@ -20,6 +20,6 @@ var tokens = dictionary.allTokens.filter(function(token) {
 <%= fileHeader({file, commentStyle: 'xml'}) %>
 <resources>
   <% tokens.forEach(function(token) {
-  %><integer name="<%= token.name %>"><%= token.$value ?? token.value %></integer><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>
+  %><integer name="<%= token.name %>"><%= options.usesDtcg ? token.$value : token.value %></integer><% if (token.comment) { %><!-- <%= token.comment %> --><% } %>
   <% }); %>
 </resources>`;

package/lib/common/templates/android/resources.template.d.ts

@@ -2,10 +2,12 @@ declare function _default(opts: {
     dictionary: Dictionary;
     file?: File;
     fileHeader?: FileHeader;
+    options: Config;
 }): string;
 export default _default;
 export type Dictionary = import('../../../../types/DesignToken.d.ts').Dictionary;
 export type Token = import('../../../../types/DesignToken.d.ts').TransformedToken;
 export type Tokens = import('../../../../types/DesignToken.d.ts').TransformedTokens;
 export type File = import('../../../../types/File.d.ts').File;
+export type Config = import('../../../../types/Config.d.ts').Config;
 export type FileHeader = typeof import("../../formatHelpers/fileHeader.js").default;

package/lib/common/templates/android/resources.template.js

@@ -18,6 +18,7 @@ import { usesReferences, getReferences } from 'style-dictionary/utils';
  * @typedef {import('../../../../types/DesignToken.d.ts').TransformedToken} Token
  * @typedef {import('../../../../types/DesignToken.d.ts').TransformedTokens} Tokens
  * @typedef {import('../../../../types/File.d.ts').File} File
+ * @typedef {import('../../../../types/Config.d.ts').Config} Config
  * @typedef {import('../../formatHelpers/fileHeader.js').default} FileHeader
  */
 
@@ -26,10 +27,11 @@ import { usesReferences, getReferences } from 'style-dictionary/utils';
  *   dictionary: Dictionary;
  *   file?: File;
  *   fileHeader?: FileHeader;
+ *   options: Config
  * }} opts
  */
 export default (opts) => {
-  const { file, fileHeader, dictionary } = opts;
+  const { file, fileHeader, dictionary, options } = opts;
 
   const resourceType = file?.resourceType || null;
 
@@ -65,7 +67,7 @@ export default (opts) => {
     if (file?.options && file.options.outputReferences && usesReferences(token.original.value)) {
       return `@${tokenToType(token)}/${getReferences(token.original.value, tokens)[0].name}`;
     } else {
-      return token.$value ?? token.value;
+      return options.usesDtcg ? token.$value : token.value;
     }
   }