diff --git a/.changeset/serious-years-jam.md b/.changeset/serious-years-jam.md
new file mode 100644
index 000000000..02ad8f135
--- /dev/null
+++ b/.changeset/serious-years-jam.md
@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Pass options to all of the filter functions in our built-in transforms, to check for `usesDTCG` and `$type` property.
diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js
index c0ba04924..b3e1b4586 100644
--- a/__tests__/common/transforms.test.js
+++ b/__tests__/common/transforms.test.js
@@ -1311,52 +1311,53 @@ describe('common', () => {
describe('transform filters', () => {
describe('isColor', () => {
it('should match short hex colors', () => {
- expect(isColor({ type: 'color', value: '369' })).to.be.true;
- expect(isColor({ type: 'color', value: '#369' })).to.be.true;
+ expect(isColor({ type: 'color', value: '369' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: '#369' }, {})).to.be.true;
});
it('should match standard hex colors', () => {
- expect(isColor({ type: 'color', value: 'e66465' })).to.be.true;
- expect(isColor({ type: 'color', value: '#e66465' })).to.be.true;
+ expect(isColor({ type: 'color', value: 'e66465' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: '#e66465' }, {})).to.be.true;
});
it('should match 8-digit hex colors', () => {
- expect(isColor({ type: 'color', value: 'e66465FF' })).to.be.true;
- expect(isColor({ type: 'color', value: '#e66465FF' })).to.be.true;
+ expect(isColor({ type: 'color', value: 'e66465FF' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: '#e66465FF' }, {})).to.be.true;
});
it('should match legacy rgb/rgba colors', () => {
- expect(isColor({ type: 'color', value: 'rgb(132, 99, 255)' })).to.be.true;
- expect(isColor({ type: 'color', value: 'rgb(132, 99, 255, 0.5)' })).to.be.true;
- expect(isColor({ type: 'color', value: 'rgba(132, 99, 255, 0.5)' })).to.be.true;
+ expect(isColor({ type: 'color', value: 'rgb(132, 99, 255)' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: 'rgb(132, 99, 255, 0.5)' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: 'rgba(132, 99, 255, 0.5)' }, {})).to.be.true;
});
it('should match rgb colors', () => {
- expect(isColor({ type: 'color', value: 'rgb(132 99 255)' })).to.be.true;
- expect(isColor({ type: 'color', value: 'rgb(132 99 255 / .5)' })).to.be.true;
- expect(isColor({ type: 'color', value: 'rgb(132 99 255 / 50%)' })).to.be.true;
+ expect(isColor({ type: 'color', value: 'rgb(132 99 255)' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: 'rgb(132 99 255 / .5)' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: 'rgb(132 99 255 / 50%)' }, {})).to.be.true;
});
it('should match legacy hsl/hsla colors', () => {
- expect(isColor({ type: 'color', value: 'hsl(30, 100%, 50%, 0.6)' })).to.be.true;
- expect(isColor({ type: 'color', value: 'hsla(30, 100%, 50%, 0.6)' })).to.be.true;
+ expect(isColor({ type: 'color', value: 'hsl(30, 100%, 50%, 0.6)' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: 'hsla(30, 100%, 50%, 0.6)' }, {})).to.be.true;
});
it('should match hsl colors', () => {
- expect(isColor({ type: 'color', value: 'hsl(30 100% 50% / .6)' })).to.be.true;
- expect(isColor({ type: 'color', value: 'hsl(30.2 100% 50% / 60%)' })).to.be.true;
+ expect(isColor({ type: 'color', value: 'hsl(30 100% 50% / .6)' }, {})).to.be.true;
+ expect(isColor({ type: 'color', value: 'hsl(30.2 100% 50% / 60%)' }, {})).to.be.true;
});
it('should match named colors', () => {
- expect(isColor({ type: 'color', value: 'red' })).to.be.true;
+ expect(isColor({ type: 'color', value: 'red' }, {})).to.be.true;
});
it('should ignore gradients', () => {
- expect(isColor({ type: 'color', value: 'linear-gradient(#e66465, #9198e5)' })).to.be.false;
+ expect(isColor({ type: 'color', value: 'linear-gradient(#e66465, #9198e5)' }, {})).to.be
+ .false;
});
it('should ignore values that cannot convert to a color', () => {
- expect(isColor({ type: 'color', value: 'currentColor' })).to.be.false;
+ expect(isColor({ type: 'color', value: 'currentColor' }, {})).to.be.false;
});
});
});
diff --git a/docs/public/demo-tokens.json b/docs/public/demo-tokens.json
new file mode 100644
index 000000000..ffdbfa8c1
--- /dev/null
+++ b/docs/public/demo-tokens.json
@@ -0,0 +1,237 @@
+{
+ "colors": {
+ "$type": "color",
+ "black": {
+ "$value": "#000000"
+ },
+ "white": {
+ "$value": "#ffffff"
+ },
+ "orange": {
+ "100": {
+ "$value": "#fffaf0"
+ },
+ "200": {
+ "$value": "#feebc8"
+ },
+ "300": {
+ "$value": "#fbd38d"
+ },
+ "400": {
+ "$value": "#f6ad55"
+ },
+ "500": {
+ "$value": "#ed8936"
+ },
+ "600": {
+ "$value": "#dd6b20"
+ },
+ "700": {
+ "$value": "#c05621"
+ },
+ "800": {
+ "$value": "#9c4221"
+ },
+ "900": {
+ "$value": "#7b341e"
+ }
+ }
+ },
+ "dimensions": {
+ "$type": "dimension",
+ "0": {
+ "$value": "0px"
+ },
+ "1": {
+ "$value": "4px"
+ },
+ "2": {
+ "$value": "8px"
+ },
+ "3": {
+ "$value": "12px"
+ },
+ "4": {
+ "$value": "16px"
+ },
+ "5": {
+ "$value": "20px"
+ },
+ "6": {
+ "$value": "24px"
+ },
+ "7": {
+ "$value": "28px"
+ },
+ "8": {
+ "$value": "32px"
+ },
+ "9": {
+ "$value": "36px"
+ },
+ "10": {
+ "$value": "40px"
+ },
+ "11": {
+ "$value": "44px"
+ },
+ "12": {
+ "$value": "48px"
+ },
+ "13": {
+ "$value": "52px"
+ },
+ "14": {
+ "$value": "56px"
+ },
+ "15": {
+ "$value": "60px"
+ },
+ "max": {
+ "$value": "9999px"
+ }
+ },
+ "text": {
+ "fonts": {
+ "$type": "fontFamily",
+ "serif": {
+ "$value": "Times New Roman, serif"
+ },
+ "sans": {
+ "$value": "Open Sans, sans-serif"
+ }
+ },
+ "weights": {
+ "$type": "fontWeight",
+ "light": {
+ "$value": "thin"
+ },
+ "regular": {
+ "$value": "regular"
+ },
+ "bold": {
+ "$value": "extra-bold"
+ }
+ },
+ "lineHeights": {
+ "$type": "number",
+ "normal": {
+ "$value": 1.2
+ },
+ "large": {
+ "$value": 1.8
+ }
+ },
+ "typography": {
+ "$type": "typography",
+ "heading": {
+ "$value": {
+ "fontFamily": "{text.fonts.sans}",
+ "fontWeight": "{text.weights.bold}",
+ "fontSize": "{dimensions.7}",
+ "lineHeight": "{text.lineHeights.large}"
+ }
+ },
+ "body": {
+ "$value": {
+ "fontFamily": "{text.fonts.serif}",
+ "fontWeight": "{text.weights.regular}",
+ "fontSize": "{dimensions.4}",
+ "lineHeight": "{text.lineHeights.normal}"
+ }
+ }
+ }
+ },
+ "transitions": {
+ "$type": "transition",
+ "emphasis": {
+ "$value": {
+ "duration": "{transitions.durations.medium}",
+ "delay": "{transitions.durations.instant}",
+ "timingFunction": "{transitions.easingFunctions.accelerate}"
+ }
+ },
+ "fade": {
+ "$value": {
+ "duration": "{transitions.durations.long}",
+ "delay": "{transitions.durations.instant}",
+ "timingFunction": "{transitions.easingFunctions.decelerate}"
+ }
+ },
+ "easingFunctions": {
+ "$type": "cubicBezier",
+ "accelerate": {
+ "$value": [0.5, 0, 1, 1]
+ },
+ "decelerate": {
+ "$value": [0, 0, 0.5, 1]
+ }
+ },
+ "durations": {
+ "$type": "duration",
+ "instant": {
+ "$value": "0ms"
+ },
+ "short": {
+ "$value": "100ms"
+ },
+ "medium": {
+ "$value": "300ms"
+ },
+ "long": {
+ "$value": "600ms"
+ }
+ }
+ },
+ "borders": {
+ "$type": "border",
+ "heavy": {
+ "$value": {
+ "color": "{colors.black}",
+ "width": "{dimensions.1}",
+ "style": "{borders.styles.solid}"
+ }
+ },
+ "wireframe": {
+ "$value": {
+ "color": "{colors.orange.600}",
+ "width": "{dimensions.2}",
+ "style": "{borders.styles.dashed}"
+ }
+ },
+ "styles": {
+ "$type": "strokeStyle",
+ "solid": {
+ "$value": "solid"
+ },
+ "dashed": {
+ "$value": {
+ "dashArray": ["0.5rem", "0.25rem"],
+ "lineCap": "round"
+ }
+ }
+ }
+ },
+ "shadows": {
+ "$type": "shadow",
+ "sm": {
+ "$value": {
+ "color": "{colors.black}",
+ "offsetX": "{dimensions.0}",
+ "offsetY": "{dimensions.1}",
+ "blur": "{dimensions.3}"
+ }
+ },
+ "lg": {
+ "$value": {
+ "color": "{colors.black}",
+ "offsetX": "{dimensions.0}",
+ "offsetY": "{dimensions.2}",
+ "blur": "{dimensions.4}"
+ }
+ },
+ "multi": {
+ "$value": ["{shadows.sm}", "{shadows.lg}"]
+ }
+ }
+}
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 9a8186c18..0b9e212e0 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -20,3 +20,14 @@ hero:
link: https://github.com/amzn/style-dictionary
icon: external
---
+
+import tokens from '/public/demo-tokens.json';
+
+## Live Demo
+
+Below is a showcase of how a set of DTCG tokens would be exported to CSS:
+
+
+
+
+
diff --git a/docs/src/remark-playground.ts b/docs/src/remark-playground.ts
index 7ec664f78..0ca752fde 100644
--- a/docs/src/remark-playground.ts
+++ b/docs/src/remark-playground.ts
@@ -54,7 +54,6 @@ const paragraphVisitor = (
script="${scriptData}"
>`,
} as Html;
-
parent.children.splice(index, skipAmount, newNode);
}
};
diff --git a/lib/common/transforms.js b/lib/common/transforms.js
index efb455a30..565cfa41e 100644
--- a/lib/common/transforms.js
+++ b/lib/common/transforms.js
@@ -38,42 +38,50 @@ const camelOpts = {
/**
* @param {Token} token
+ * @param {Config} options
* @returns {boolean}
*/
-export function isColor(token) {
- return token.type === 'color' && Color(token.$value ?? token.value).isValid();
+export function isColor(token, options) {
+ return (
+ (options.usesDtcg ? token.$type : token.type) === 'color' &&
+ Color(options.usesDtcg ? token.$value : token.value).isValid()
+ );
}
/**
* @param {Token} token
+ * @param {Config} options
* @returns {boolean}
*/
-function isDimension(token) {
- return token.type === 'dimension';
+function isDimension(token, options) {
+ return (options.usesDtcg ? token.$type : token.type) === 'dimension';
}
/**
* @param {Token} token
+ * @param {Config} options
* @returns {boolean}
*/
-function isFontSize(token) {
- return token.type === 'fontSize';
+function isFontSize(token, options) {
+ return (options.usesDtcg ? token.$type : token.type) === 'fontSize';
}
/**
* @param {Token} token
+ * @param {Config} options
* @returns {boolean}
*/
-function isAsset(token) {
- return token.type === 'asset';
+function isAsset(token, options) {
+ return (options.usesDtcg ? token.$type : token.type) === 'asset';
}
/**
* @param {Token} token
+ * @param {Config} options
* @returns {boolean}
*/
-function isContent(token) {
- return token.type === 'content';
+function isContent(token, options) {
+ return (options.usesDtcg ? token.$type : token.type) === 'content';
}
/**
@@ -679,7 +687,7 @@ export default {
*/
'size/object': {
type: 'value',
- filter: (token) => isDimension(token) || isFontSize(token),
+ filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
transform: function (token, config, options) {
const value = options.usesDtcg ? token.$value : token.value;
const parsedVal = parseFloat(value);
@@ -753,7 +761,7 @@ export default {
*/
'size/px': {
type: 'value',
- filter: (token) => isDimension(token) || isFontSize(token),
+ filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
transform: function (token, _, options) {
const value = options.usesDtcg ? token.$value : token.value;
const parsedVal = parseFloat(value);
@@ -775,7 +783,7 @@ export default {
*/
'size/rem': {
type: 'value',
- filter: (token) => isDimension(token) || isFontSize(token),
+ filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
transform: function (token, _, options) {
const nonParsed = options.usesDtcg ? token.$value : token.value;
const parsedVal = parseFloat(nonParsed);
@@ -797,7 +805,7 @@ export default {
*/
'size/remToPt': {
type: 'value',
- filter: (token) => isDimension(token) || isFontSize(token),
+ filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
transform: function (token, config, options) {
const value = options.usesDtcg ? token.$value : token.value;
const parsedVal = parseFloat(value);
@@ -887,7 +895,7 @@ export default {
*/
'size/swift/remToCGFloat': {
type: 'value',
- filter: (token) => isDimension(token) || isFontSize(token),
+ filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
transform: function (token, config, options) {
const value = options.usesDtcg ? token.$value : token.value;
const parsedVal = parseFloat(value);
@@ -910,7 +918,7 @@ export default {
*/
'size/remToPx': {
type: 'value',
- filter: (token) => isDimension(token) || isFontSize(token),
+ filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
transform: function (token, config, options) {
const value = options.usesDtcg ? token.$value : token.value;
const parsedVal = parseFloat(value);
@@ -934,7 +942,7 @@ export default {
*/
'size/pxToRem': {
type: 'value',
- filter: (token) => isDimension(token) || isFontSize(token),
+ filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
transform: (token, config, options) => {
const value = options.usesDtcg ? token.$value : token.value;
const parsedVal = parseFloat(value);
@@ -965,8 +973,8 @@ export default {
*/
'html/icon': {
type: 'value',
- filter: function (token) {
- return token.type === 'html';
+ filter: function (token, options) {
+ return (options.usesDtcg ? token.$type : token.type) === 'html';
},
transform: function (token, _, options) {
return (options.usesDtcg ? token.$value : token.value).replace(
@@ -1049,8 +1057,8 @@ export default {
*/
'time/seconds': {
type: 'value',
- filter: function (token) {
- return token.type === 'time';
+ filter: function (token, options) {
+ return (options.usesDtcg ? token.$type : token.type) === 'time';
},
transform: function (token, _, options) {
return (parseFloat(options.usesDtcg ? token.$value : token.value) / 1000).toFixed(2) + 's';
@@ -1072,7 +1080,7 @@ export default {
*/
'fontFamily/css': {
type: 'value',
- filter: (token) => token.type === 'fontFamily',
+ filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'fontFamily',
transform: (token, _, options) => {
/** @type {string|string[]} */
const fontFamily = options.usesDtcg ? token.$value : token.value;
@@ -1096,7 +1104,7 @@ export default {
*/
'cubicBezier/css': {
type: 'value',
- filter: (token) => token.type === 'cubicBezier',
+ filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'cubicBezier',
transform: (token, _, options) => {
/** @type {number[]|string} */
const cubicBezier = options.usesDtcg ? token.$value : token.value;
@@ -1121,7 +1129,7 @@ export default {
type: 'value',
// border properties can be references
transitive: true,
- filter: (token) => token.type === 'strokeStyle',
+ filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'strokeStyle',
transform: (token, _, options) => {
const val = options.usesDtcg ? token.$value : token.value;
if (typeof val !== 'object') {
@@ -1148,7 +1156,7 @@ export default {
type: 'value',
// border properties can be references
transitive: true,
- filter: (token) => token.type === 'border',
+ filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'border',
transform: (token, _, options) => {
const val = options.usesDtcg ? token.$value : token.value;
if (typeof val !== 'object') {
@@ -1188,7 +1196,7 @@ export default {
type: 'value',
// typography properties can be references
transitive: true,
- filter: (token) => token.type === 'typography',
+ filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'typography',
transform: (token, platform, options) => {
const val = options.usesDtcg ? token.$value : token.value;
if (typeof val !== 'object') {
@@ -1244,7 +1252,7 @@ export default {
type: 'value',
// transition properties can be references
transitive: true,
- filter: (token) => token.type === 'transition',
+ filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'transition',
transform: (token, _, options) => {
const val = options.usesDtcg ? token.$value : token.value;
if (typeof val !== 'object') {
@@ -1273,7 +1281,7 @@ export default {
type: 'value',
// shadow properties can be references
transitive: true,
- filter: (token) => token.type === 'shadow',
+ filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'shadow',
transform: (token, _, options) => {
const val = options.usesDtcg ? token.$value : token.value;
if (typeof val !== 'object') {
@@ -1283,6 +1291,10 @@ export default {
/** @param {any} val */
const stringifyShadow = (val) => {
+ // check if the shadows are objects, they might already be transformed to strings if they were refs
+ if (typeof val !== 'object') {
+ return val;
+ }
const { type, color, offsetX, offsetY, blur, spread } = val;
return `${type ? `${type} ` : ''}${offsetX ?? 0} ${offsetY ?? 0} ${blur ?? 0} ${
spread ? `${spread} ` : ''
@@ -1420,7 +1432,7 @@ export default {
*/
'content/flutter/literal': {
type: 'value',
- filter: (token) => isContent(token),
+ filter: isContent,
transform: (token, _, options) => wrapValueWithDoubleQuote(token, options),
},
@@ -1452,7 +1464,7 @@ export default {
*/
'size/flutter/remToDouble': {
type: 'value',
- filter: (token) => isDimension(token) || isFontSize(token),
+ filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
transform: function (token, config, options) {
const baseFont = getBasePxFontSize(config);
return (parseFloat(options.usesDtcg ? token.$value : token.value) * baseFont).toFixed(2);