Skip to content

Commit e8aea2f

Browse files
jorenbroekemajorenbroekema
authoredJul 6, 2024··
fix: advanced transitive transform color example chroma (#1260)
·
v5.0.0-rc.1v4.0.1
1 parent 61b6984 commit e8aea2f

File tree

24 files changed

+90
-78
lines changed

24 files changed

+90
-78
lines changed
 

Diff for: ‎.changeset/eleven-otters-eat.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'style-dictionary': patch
3+
---
4+
5+
Fix transitive color transform advanced example, migrate chroma-js to colorjs.io

Diff for: ‎docs/src/components/sd-playground.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -414,7 +414,7 @@ class SdPlayground extends LitElement {
414414
const dependencies = await analyzeDependencies(script.value);
415415
const sdDep = dependencies.find((dep) => dep.package === 'style-dictionary');
416416
if (sdDep) {
417-
sdDep.package = 'style-dictionary@<? version placeholder ?>';
417+
sdDep.package = 'style-dictionary';
418418
}
419419
const files: Record<string, string> = {};
420420
files[`tokens.${tokens.lang}`] = tokens.value;

Diff for: ‎examples/advanced/assets-base64-embed/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"author": "",
1313
"license": "Apache-2.0",
1414
"devDependencies": {
15-
"style-dictionary": "4.0.0-prerelease.30"
15+
"style-dictionary": "^4.0.0"
1616
}
17-
}
17+
}

Diff for: ‎examples/advanced/create-react-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"devDependencies": {
1414
"eslint-config-react-app": "^7.0.1",
15-
"style-dictionary": "4.0.0-prerelease.30"
15+
"style-dictionary": "^4.0.0"
1616
},
1717
"resolutions": {
1818
"immer": "8.0.1",
@@ -37,4 +37,4 @@
3737
"not op_mini all"
3838
],
3939
"license": "Apache-2.0"
40-
}
40+
}

Diff for: ‎examples/advanced/create-react-native-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"eslint-config-react-app": "^7.0.1",
3030
"jest": "~25.2.6",
3131
"react-test-renderer": "~16.13.1",
32-
"style-dictionary": "4.0.0-prerelease.30"
32+
"style-dictionary": "^4.0.0"
3333
},
3434
"jest": {
3535
"preset": "react-native"
@@ -38,4 +38,4 @@
3838
"extends": "react-app"
3939
},
4040
"private": true
41-
}
41+
}

Diff for: ‎examples/advanced/custom-parser/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
"author": "",
1111
"license": "Apache-2.0",
1212
"devDependencies": {
13-
"style-dictionary": "4.0.0-prerelease.30"
13+
"style-dictionary": "^4.0.0"
1414
}
15-
}
15+
}

Diff for: ‎examples/advanced/custom-transforms/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"author": "",
1717
"license": "Apache-2.0",
1818
"devDependencies": {
19-
"style-dictionary": "4.0.0-prerelease.30"
19+
"style-dictionary": "^4.0.0"
2020
}
21-
}
21+
}

Diff for: ‎examples/advanced/font-face-rules/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
},
1010
"license": "Apache-2.0",
1111
"devDependencies": {
12-
"style-dictionary": "4.0.0-prerelease.30"
12+
"style-dictionary": "^4.0.0"
1313
}
14-
}
14+
}

Diff for: ‎examples/advanced/format-helpers/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
"author": "",
1111
"license": "Apache-2.0",
1212
"devDependencies": {
13-
"style-dictionary": "4.0.0-prerelease.30"
13+
"style-dictionary": "^4.0.0"
1414
}
15-
}
15+
}

Diff for: ‎examples/advanced/matching-build-files/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@
1717
"author": "Kelly Harrop <kn.harrop@gmail.com>",
1818
"license": "Apache-2.0",
1919
"devDependencies": {
20-
"style-dictionary": "4.0.0-prerelease.30"
20+
"style-dictionary": "^4.0.0"
2121
}
22-
}
22+
}

Diff for: ‎examples/advanced/multi-brand-multi-platform/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"author": "",
1717
"license": "Apache-2.0",
1818
"devDependencies": {
19-
"style-dictionary": "4.0.0-prerelease.30"
19+
"style-dictionary": "^4.0.0"
2020
}
21-
}
21+
}

Diff for: ‎examples/advanced/node-modules-as-config-and-properties/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
},
2121
"homepage": "https://github.com/dbanksdesign/style-dictionary-node#readme",
2222
"devDependencies": {
23-
"style-dictionary": "4.0.0-prerelease.30",
23+
"style-dictionary": "^4.0.0",
2424
"tinycolor2": "^1.4.1"
2525
}
26-
}
26+
}

Diff for: ‎examples/advanced/npm-module/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@
1717
"author": "",
1818
"license": "Apache-2.0",
1919
"devDependencies": {
20-
"style-dictionary": "4.0.0-prerelease.30"
20+
"style-dictionary": "^4.0.0"
2121
}
22-
}
22+
}

Diff for: ‎examples/advanced/referencing_aliasing/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"author": "",
1717
"license": "Apache-2.0",
1818
"devDependencies": {
19-
"style-dictionary": "4.0.0-prerelease.30"
19+
"style-dictionary": "^4.0.0"
2020
}
21-
}
21+
}

Diff for: ‎examples/advanced/s3/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"devDependencies": {
1717
"aws-sdk": "^2.7.21",
1818
"fs-extra": "^1.0.0",
19-
"style-dictionary": "4.0.0-prerelease.30"
19+
"style-dictionary": "^4.0.0"
2020
}
21-
}
21+
}

Diff for: ‎examples/advanced/tokens-deprecation/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"author": "",
1717
"license": "Apache-2.0",
1818
"devDependencies": {
19-
"style-dictionary": "4.0.0-prerelease.30"
19+
"style-dictionary": "^4.0.0"
2020
}
21-
}
21+
}

Diff for: ‎examples/advanced/transitive-transforms/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"author": "",
1212
"license": "ISC",
1313
"devDependencies": {
14-
"chroma-js": "^2.1.0",
15-
"style-dictionary": "4.0.0-prerelease.30"
14+
"colorjs.io": "^0.5.2",
15+
"style-dictionary": "^4.0.0"
1616
}
17-
}
17+
}

Diff for: ‎examples/advanced/transitive-transforms/sd.config.js

+36-23
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import StyleDictionary from 'style-dictionary';
22
import { usesReferences } from 'style-dictionary/utils';
3-
import chroma from 'chroma-js';
3+
import Color from 'colorjs.io';
44

55
const colorTransform = (token) => {
66
const { value, modify = [] } = token;
7-
let color = chroma(value);
7+
8+
// This assumes "hex" format, if you want to support { h, s, l } format you have to do
9+
// `new Color('hsl', [value.h, value.s, value.l]);`
10+
const color = new Color(value);
811

912
// defer until reference is resolved
1013
if (typeof modify === 'string' && usesReferences(modify)) {
@@ -18,15 +21,22 @@ const colorTransform = (token) => {
1821
if (usesReferences(type) || usesReferences(amount)) {
1922
return undefined;
2023
}
21-
// modifier type must match a method name in chromajs
22-
// https://gka.github.io/chroma.js/
23-
// chroma methods can be chained, so each time we override the color variable
24-
// we can still call other chroma methods, similar to
25-
// chroma(value).brighten(1).darken(1).hex();
26-
color = color[type](amount);
24+
25+
switch (type) {
26+
case 'lighten': {
27+
const lightness = color.hsl.l;
28+
const difference = 100 - lightness;
29+
const newLightness = Math.min(100, lightness + difference * amount);
30+
color.set('hsl.l', newLightness);
31+
break;
32+
}
33+
case 'transparentize':
34+
color.alpha = Math.max(0, Math.min(1, Number(amount)));
35+
break;
36+
}
2737
});
2838

29-
return color.hex();
39+
return color.to('srgb').toString({ format: 'hex' });
3040
};
3141

3242
export default {
@@ -36,21 +46,24 @@ export default {
3646

3747
// I am directly defining transforms here
3848
// This would work if you were to call StyleDictionary.registerTransform() as well
39-
transform: {
40-
colorTransform: {
41-
type: `value`,
42-
// only transforms that have transitive: true will be applied to tokens
43-
// that alias/reference other tokens
44-
transitive: true,
45-
filter: (token) => token.attributes.category === 'color' && token.modify,
46-
transform: colorTransform,
47-
},
49+
hooks: {
50+
transforms: {
51+
colorTransform: {
52+
type: `value`,
53+
// only transforms that have transitive: true will be applied to tokens
54+
// that alias/reference other tokens
55+
transitive: true,
56+
filter: (token) => token.attributes.category === 'color' && token.modify,
57+
transform: colorTransform,
58+
},
4859

49-
// For backwards compatibility, all built-in transforms are not transitive
50-
// by default. This will make the 'color/css' transform transitive
51-
'color/css': Object.assign({}, StyleDictionary.transform[`color/css`], {
52-
transitive: true,
53-
}),
60+
// For backwards compatibility, all built-in transforms are not transitive
61+
// by default. This will make the 'color/css' transform transitive
62+
'color/css': {
63+
...StyleDictionary.hooks.transforms[`color/css`],
64+
transitive: true,
65+
},
66+
},
5467
},
5568

5669
platforms: {

Diff for: ‎examples/advanced/transitive-transforms/tokens/color/core.json5

-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@
66

77
red: {
88
'100': {
9-
// hue, saturation, and lightness are defined in
10-
// tokens/hue.json5, tokens/saturation.json5, and tokens/lightness.json5
11-
// The {h, s, l} object structure conforms to the input structure for
12-
// chromajs: https://gka.github.io/chroma.js/#chroma
139
value: { h: '{hue.red}', s: '{saturation.7}', l: '{lightness.7}' },
1410
type: 'color',
1511
},

Diff for: ‎examples/advanced/transitive-transforms/tokens/color/font.json5

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
{
22
color: {
33
font: {
4-
primary: { value: '{color.core.black.value}', type: 'color' },
4+
primary: { value: '{color.core.black}', type: 'color' },
55
secondary: {
6-
value: '{color.font.primary.value}',
6+
value: '{color.font.primary}',
77
modify: [
88
{
9-
type: 'brighten',
10-
// See https://gka.github.io/chroma.js/#color-brighten
11-
// for definition of brighten
12-
amount: 1,
9+
type: 'lighten',
10+
amount: 0.2,
1311
},
1412
],
1513
type: 'color',
@@ -20,10 +18,10 @@
2018
value: '{color.font.secondary}',
2119
modify: [
2220
{
23-
// this will brighten the secondary value, which is a brightened version
21+
// this will lighten the secondary value, which is a lightened version
2422
// of primary
25-
type: 'brighten',
26-
amount: 1,
23+
type: 'lighten',
24+
amount: 0.2,
2725
},
2826
],
2927
type: 'color',

Diff for: ‎examples/advanced/transitive-transforms/tokens/color/overlay.json5

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
color: {
33
overlay: {
44
primary: {
5-
value: '{color.core.white.value}',
5+
value: '{color.core.white}',
66
modify: [
77
{
8-
type: 'alpha',
8+
type: 'transparentize',
99
// You can access other parts of your style dictionary in here too:
1010
amount: '{alpha.1}',
1111
},
@@ -14,10 +14,10 @@
1414
},
1515

1616
secondary: {
17-
value: '{color.core.white.value}',
17+
value: '{color.core.white}',
1818
modify: [
1919
{
20-
type: 'alpha',
20+
type: 'transparentize',
2121
// You can access other parts of your style dictionary in here too:
2222
amount: '{alpha.2}',
2323
},

Diff for: ‎examples/advanced/variables-in-outputs/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
"author": "",
1212
"license": "MIT",
1313
"devDependencies": {
14-
"style-dictionary": "4.0.0-prerelease.30"
14+
"style-dictionary": "^4.0.0"
1515
}
16-
}
16+
}

Diff for: ‎examples/advanced/yaml-tokens/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"author": "",
1111
"license": "Apache-2.0",
1212
"devDependencies": {
13-
"style-dictionary": "4.0.0-prerelease.30",
13+
"style-dictionary": "^4.0.0",
1414
"yaml": "^1.10.0"
1515
}
16-
}
16+
}

Diff for: ‎scripts/inject-version.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ const packageJSONs = globSync('./examples/*/*/package.json', { fs });
99
packageJSONs.forEach(function (filePath) {
1010
let pkg = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
1111
if (pkg.devDependencies) {
12-
pkg.devDependencies[name] = version;
12+
pkg.devDependencies[name] = `^${version}`;
1313
fs.writeFileSync(filePath, JSON.stringify(pkg, null, 2));
1414
}
1515
execSync(`git add ${filePath}`);
1616
});
1717

1818
// version in lib file
19-
const paths = ['lib/StyleDictionary.js', 'docs/src/components/sd-playground.ts'];
19+
const paths = ['lib/StyleDictionary.js'];
2020
paths.forEach((p) => {
2121
const indexContent = fs.readFileSync(p, 'utf-8');
2222
const newIndexContent = indexContent.replace('<? version placeholder ?>', version);

0 commit comments

Comments
 (0)
Please sign in to comment.