Skip to content

Commit

Permalink
fix: pass options to transforms filters, live demo main page (#1208)
Browse files Browse the repository at this point in the history
  • Loading branch information
jorenbroekema committed May 17, 2024
1 parent 0972b26 commit 4ec34fd
Show file tree
Hide file tree
Showing 6 changed files with 315 additions and 50 deletions.
5 changes: 5 additions & 0 deletions .changeset/serious-years-jam.md
Original file line number Diff line number Diff line change
@@ -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.
39 changes: 20 additions & 19 deletions __tests__/common/transforms.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
});
});
Expand Down
237 changes: 237 additions & 0 deletions docs/public/demo-tokens.json
Original file line number Diff line number Diff line change
@@ -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}"]
}
}
}
11 changes: 11 additions & 0 deletions docs/src/content/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<sd-playground tokens={JSON.stringify({ value: JSON.stringify(tokens, null, 2), lang: 'json'})} id="main-demo">

<div style="height: 100%" slot="monaco-editor"></div>
</sd-playground>
1 change: 0 additions & 1 deletion docs/src/remark-playground.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ const paragraphVisitor = (
script="${scriptData}"
><div style="height: 100%" slot="monaco-editor"></div></sd-playground>`,
} as Html;

parent.children.splice(index, skipAmount, newNode);
}
};
Expand Down

0 comments on commit 4ec34fd

Please sign in to comment.