style-dictionary 5.2.0 → 5.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/examples/advanced/assets-base64-embed/package.json +1 -1
- package/examples/advanced/create-react-app/package.json +1 -1
- package/examples/advanced/create-react-native-app/package.json +1 -1
- package/examples/advanced/custom-parser/package.json +1 -1
- package/examples/advanced/custom-transforms/package.json +1 -1
- package/examples/advanced/font-face-rules/package.json +1 -1
- package/examples/advanced/format-helpers/package.json +2 -1
- package/examples/advanced/matching-build-files/README.md +24 -22
- package/examples/advanced/matching-build-files/package.json +1 -1
- package/examples/advanced/matching-build-files/tokens/index.js +8 -4
- package/examples/advanced/multi-brand-multi-platform/package.json +1 -1
- package/examples/advanced/node-modules-as-config-and-properties/package-lock.json +3 -3
- package/examples/advanced/node-modules-as-config-and-properties/package.json +1 -1
- package/examples/advanced/npm-module/package.json +1 -1
- package/examples/advanced/referencing_aliasing/package.json +1 -1
- package/examples/advanced/s3/package.json +1 -1
- package/examples/advanced/tailwind-preset/package.json +1 -1
- package/examples/advanced/tokens-deprecation/package.json +1 -1
- package/examples/advanced/transitive-transforms/package.json +1 -1
- package/examples/advanced/variables-in-outputs/package.json +1 -1
- package/examples/advanced/yaml-tokens/package.json +1 -1
- package/lib/StyleDictionary.js +1 -1
- package/lib/common/transforms.d.ts +102 -0
- package/lib/common/transforms.js +323 -22
- package/lib/enums/transforms.d.ts +4 -0
- package/lib/enums/transforms.js +4 -0
- package/package.json +7 -5
- package/types/DesignToken.d.ts +15 -0
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
"name": "format-helpers",
|
|
3
3
|
"version": "1.0.0",
|
|
4
4
|
"description": "",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"main": "sd.config.js",
|
|
6
7
|
"scripts": {
|
|
7
8
|
"build": "style-dictionary build --config ./sd.config.js"
|
|
@@ -10,6 +11,6 @@
|
|
|
10
11
|
"author": "",
|
|
11
12
|
"license": "Apache-2.0",
|
|
12
13
|
"devDependencies": {
|
|
13
|
-
"style-dictionary": "^5.
|
|
14
|
+
"style-dictionary": "^5.3.1"
|
|
14
15
|
}
|
|
15
16
|
}
|
|
@@ -18,25 +18,25 @@ At this point, you can run `npm run build`. This command will generate the outpu
|
|
|
18
18
|
|
|
19
19
|
The "build" command processes the JSON files in the `tokens` folder. The `index.js` file adds each folder, allowing you to map through them in `config.js`. The script goes through each folder and generates a file for each folder and populates it with tokens that match the filter.
|
|
20
20
|
|
|
21
|
-
```
|
|
21
|
+
```json
|
|
22
22
|
# tokens/color/base.json
|
|
23
23
|
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
"color": {
|
|
25
|
+
"red": {
|
|
26
|
+
"value": "#FF0000"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
29
|
}
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
```
|
|
32
|
+
```json
|
|
33
33
|
# tokens/size/base.json
|
|
34
34
|
{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
"size": {
|
|
36
|
+
"small": {
|
|
37
|
+
"value": "2px"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
40
|
}
|
|
41
41
|
```
|
|
42
42
|
|
|
@@ -46,16 +46,18 @@ Because the folder name matches the category, the output would automatically gen
|
|
|
46
46
|
|
|
47
47
|
Open the `config.js` file and see how the script first looks within the `tokens` directory to map through each folder. The destination then outputs a file that would match the name, and fill that file with the tokens that match the filter criteria.
|
|
48
48
|
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
49
|
+
```js
|
|
50
|
+
{
|
|
51
|
+
files: tokens.map((tokenCategory) => ({
|
|
52
|
+
destination: `${tokenCategory}.js`,
|
|
53
|
+
format: 'format/js',
|
|
54
|
+
filter: {
|
|
55
|
+
attributes: {
|
|
56
|
+
category: tokenCategory,
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
}));
|
|
60
|
+
}
|
|
59
61
|
```
|
|
60
62
|
|
|
61
63
|
Now each new folder that gets added will automatically generate a corresponding file filled with tokens that match the category!
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import { readdirSync
|
|
2
|
-
|
|
3
|
-
const dirs = (p) =>
|
|
4
|
-
|
|
1
|
+
import { readdirSync } from 'node:fs';
|
|
2
|
+
|
|
3
|
+
const dirs = (p) =>
|
|
4
|
+
readdirSync(p, { withFileTypes: true })
|
|
5
|
+
.filter((d) => d.isDirectory())
|
|
6
|
+
.map((d) => d.name);
|
|
7
|
+
|
|
8
|
+
export default dirs(import.meta.dirname);
|
|
@@ -1125,9 +1125,9 @@
|
|
|
1125
1125
|
"license": "MIT"
|
|
1126
1126
|
},
|
|
1127
1127
|
"node_modules/qs": {
|
|
1128
|
-
"version": "6.14.
|
|
1129
|
-
"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.
|
|
1130
|
-
"integrity": "sha512-
|
|
1128
|
+
"version": "6.14.2",
|
|
1129
|
+
"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
|
|
1130
|
+
"integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
|
|
1131
1131
|
"dev": true,
|
|
1132
1132
|
"license": "BSD-3-Clause",
|
|
1133
1133
|
"dependencies": {
|
package/lib/StyleDictionary.js
CHANGED
|
@@ -67,7 +67,7 @@ export default class StyleDictionary extends Register {
|
|
|
67
67
|
// Placeholder is transformed on prepublish -> see scripts/inject-version.js
|
|
68
68
|
// 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.
|
|
69
69
|
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#browser_compatibility
|
|
70
|
-
static VERSION = '5.
|
|
70
|
+
static VERSION = '5.3.1';
|
|
71
71
|
|
|
72
72
|
/** @returns {Config} */
|
|
73
73
|
get options() {
|
|
@@ -1,3 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Check if a value is a DTCG color object
|
|
3
|
+
* @param {unknown} val
|
|
4
|
+
* @returns {val is DTCGColorValue}
|
|
5
|
+
*/
|
|
6
|
+
export function isDTCGColorObject(val: unknown): val is DTCGColorValue;
|
|
7
|
+
/**
|
|
8
|
+
* Get a CSS compatible color string from a token value that contains a color property
|
|
9
|
+
* Used in CSS shorthand transforms for token types that can have color poperties, like border, gradient, shadow.
|
|
10
|
+
* @param {unknown} tokenValue
|
|
11
|
+
* @returns {string | undefined}
|
|
12
|
+
*/
|
|
13
|
+
export function getColorStringFromTokenObjectValue(tokenValue: unknown): string | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* Get a tinycolor2 Color instance from either legacy string format or DTCG object format
|
|
16
|
+
* This provides backward compatibility for transformers that use tinycolor2 methods
|
|
17
|
+
* @param {Token} token
|
|
18
|
+
* @param {Config} options
|
|
19
|
+
* @returns {ReturnType<typeof Color>}
|
|
20
|
+
*/
|
|
21
|
+
export function getColor(token: Token, options: Config): ReturnType<typeof Color>;
|
|
22
|
+
/**
|
|
23
|
+
* Get a ColorJS Color instance from either legacy string format or DTCG object format
|
|
24
|
+
* @param {DTCGColorValue | string} val
|
|
25
|
+
* @returns {ColorJS}
|
|
26
|
+
*/
|
|
27
|
+
export function getColorJS(val: DTCGColorValue | string): ColorJS;
|
|
1
28
|
/**
|
|
2
29
|
* @param {Token} token
|
|
3
30
|
* @param {Config} options
|
|
@@ -354,6 +381,78 @@ declare const _default: {
|
|
|
354
381
|
alpha: number;
|
|
355
382
|
};
|
|
356
383
|
};
|
|
384
|
+
/**
|
|
385
|
+
* Transforms the value into an OKLCH CSS color function string.
|
|
386
|
+
* Preserves wide-gamut colors without lossy gamut mapping.
|
|
387
|
+
*
|
|
388
|
+
* ```css
|
|
389
|
+
* // Matches: token.type === 'color'
|
|
390
|
+
* // Returns:
|
|
391
|
+
* "oklch(0.7 0.15 180)"
|
|
392
|
+
* "oklch(0.7 0.15 180 / 0.5)"
|
|
393
|
+
* ```
|
|
394
|
+
*
|
|
395
|
+
* @memberof Transforms
|
|
396
|
+
*/
|
|
397
|
+
"color/oklch": {
|
|
398
|
+
type: "value";
|
|
399
|
+
filter: typeof isColor;
|
|
400
|
+
transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, _: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
|
|
401
|
+
};
|
|
402
|
+
/**
|
|
403
|
+
* Transforms the value into an OKLAB CSS color function string.
|
|
404
|
+
* Preserves wide-gamut colors without lossy gamut mapping.
|
|
405
|
+
*
|
|
406
|
+
* ```css
|
|
407
|
+
* // Matches: token.type === 'color'
|
|
408
|
+
* // Returns:
|
|
409
|
+
* "oklab(0.7 -0.1 0.1)"
|
|
410
|
+
* "oklab(0.7 -0.1 0.1 / 0.5)"
|
|
411
|
+
* ```
|
|
412
|
+
*
|
|
413
|
+
* @memberof Transforms
|
|
414
|
+
*/
|
|
415
|
+
"color/oklab": {
|
|
416
|
+
type: "value";
|
|
417
|
+
filter: typeof isColor;
|
|
418
|
+
transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, _: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
|
|
419
|
+
};
|
|
420
|
+
/**
|
|
421
|
+
* Transforms the value into a Display P3 CSS color function string.
|
|
422
|
+
* Preserves wide-gamut colors without lossy gamut mapping.
|
|
423
|
+
*
|
|
424
|
+
* ```css
|
|
425
|
+
* // Matches: token.type === 'color'
|
|
426
|
+
* // Returns:
|
|
427
|
+
* "color(display-p3 0.5 0.5 0.5)"
|
|
428
|
+
* "color(display-p3 0.5 0.5 0.5 / 0.5)"
|
|
429
|
+
* ```
|
|
430
|
+
*
|
|
431
|
+
* @memberof Transforms
|
|
432
|
+
*/
|
|
433
|
+
"color/p3": {
|
|
434
|
+
type: "value";
|
|
435
|
+
filter: typeof isColor;
|
|
436
|
+
transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, _: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
|
|
437
|
+
};
|
|
438
|
+
/**
|
|
439
|
+
* Transforms the value into an LCH CSS color function string.
|
|
440
|
+
* Preserves wide-gamut colors without lossy gamut mapping.
|
|
441
|
+
*
|
|
442
|
+
* ```css
|
|
443
|
+
* // Matches: token.type === 'color'
|
|
444
|
+
* // Returns:
|
|
445
|
+
* "lch(50% 30 180)"
|
|
446
|
+
* "lch(50% 30 180 / 0.5)"
|
|
447
|
+
* ```
|
|
448
|
+
*
|
|
449
|
+
* @memberof Transforms
|
|
450
|
+
*/
|
|
451
|
+
"color/lch": {
|
|
452
|
+
type: "value";
|
|
453
|
+
filter: typeof isColor;
|
|
454
|
+
transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, _: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
|
|
455
|
+
};
|
|
357
456
|
/**
|
|
358
457
|
* Transforms the value into a scale-independent pixel (sp) value for font sizes on Android. It will not scale the number.
|
|
359
458
|
*
|
|
@@ -975,9 +1074,12 @@ declare const _default: {
|
|
|
975
1074
|
export default _default;
|
|
976
1075
|
export type Transform = import("../../types/Transform.d.ts").Transform;
|
|
977
1076
|
export type Token = import("../../types/DesignToken.d.ts").TransformedToken;
|
|
1077
|
+
export type DTCGColorValue = import("../../types/DesignToken.d.ts").DTCGColorValue;
|
|
1078
|
+
export type DTCGColorSpace = import("../../types/DesignToken.d.ts").DTCGColorSpace;
|
|
978
1079
|
export type PlatformConfig = import("../../types/Config.d.ts").PlatformConfig;
|
|
979
1080
|
export type Config = import("../../types/Config.d.ts").Config;
|
|
980
1081
|
import Color from 'tinycolor2';
|
|
1082
|
+
import ColorJS from 'colorjs.io';
|
|
981
1083
|
/**
|
|
982
1084
|
* @param {Token} token
|
|
983
1085
|
* @param {Config} options
|
package/lib/common/transforms.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import Color from 'tinycolor2';
|
|
2
|
+
import ColorJS from 'colorjs.io';
|
|
2
3
|
import { join } from 'path-unified/posix';
|
|
3
4
|
import { snakeCase, kebabCase, camelCase } from 'change-case';
|
|
4
5
|
import convertToBase64 from '../utils/convertToBase64.js';
|
|
@@ -8,6 +9,8 @@ import { transforms, transformTypes } from '../enums/index.js';
|
|
|
8
9
|
/**
|
|
9
10
|
* @typedef {import('../../types/Transform.d.ts').Transform} Transform
|
|
10
11
|
* @typedef {import('../../types/DesignToken.d.ts').TransformedToken} Token
|
|
12
|
+
* @typedef {import('../../types/DesignToken.d.ts').DTCGColorValue} DTCGColorValue
|
|
13
|
+
* @typedef {import('../../types/DesignToken.d.ts').DTCGColorSpace} DTCGColorSpace
|
|
11
14
|
* @typedef {import('../../types/Config.d.ts').PlatformConfig} PlatformConfig
|
|
12
15
|
* @typedef {import('../../types/Config.d.ts').Config} Config
|
|
13
16
|
*/
|
|
@@ -15,6 +18,169 @@ import { transforms, transformTypes } from '../enums/index.js';
|
|
|
15
18
|
const UNKNOWN_CSS_FONT_PROPS_WARNINGS = GroupMessages.GROUP.UnknownCSSFontProperties;
|
|
16
19
|
const { value, name, attribute } = transformTypes;
|
|
17
20
|
|
|
21
|
+
/**
|
|
22
|
+
* Valid DTCG v2025.10 color spaces
|
|
23
|
+
* @type {Set<string>}
|
|
24
|
+
*/
|
|
25
|
+
const DTCG_COLOR_SPACES = new Set([
|
|
26
|
+
'srgb',
|
|
27
|
+
'srgb-linear',
|
|
28
|
+
'display-p3',
|
|
29
|
+
'a98-rgb',
|
|
30
|
+
'prophoto-rgb',
|
|
31
|
+
'rec2020',
|
|
32
|
+
'xyz-d50',
|
|
33
|
+
'xyz-d65',
|
|
34
|
+
'lab',
|
|
35
|
+
'lch',
|
|
36
|
+
'oklab',
|
|
37
|
+
'oklch',
|
|
38
|
+
'hsl',
|
|
39
|
+
'hwb',
|
|
40
|
+
]);
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Map DTCG color space names to colorjs.io color space IDs
|
|
44
|
+
* @type {Record<string, string>}
|
|
45
|
+
*/
|
|
46
|
+
const DTCG_TO_COLORJS_SPACE = {
|
|
47
|
+
srgb: 'srgb',
|
|
48
|
+
'srgb-linear': 'srgb-linear',
|
|
49
|
+
'display-p3': 'p3',
|
|
50
|
+
'a98-rgb': 'a98rgb',
|
|
51
|
+
'prophoto-rgb': 'prophoto',
|
|
52
|
+
rec2020: 'rec2020',
|
|
53
|
+
'xyz-d50': 'xyz-d50',
|
|
54
|
+
'xyz-d65': 'xyz-d65',
|
|
55
|
+
lab: 'lab',
|
|
56
|
+
lch: 'lch',
|
|
57
|
+
oklab: 'oklab',
|
|
58
|
+
oklch: 'oklch',
|
|
59
|
+
hsl: 'hsl',
|
|
60
|
+
hwb: 'hwb',
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Check if a value is a DTCG color object
|
|
65
|
+
* @param {unknown} val
|
|
66
|
+
* @returns {val is DTCGColorValue}
|
|
67
|
+
*/
|
|
68
|
+
export function isDTCGColorObject(val) {
|
|
69
|
+
return (
|
|
70
|
+
typeof val === 'object' &&
|
|
71
|
+
val !== null &&
|
|
72
|
+
'colorSpace' in val &&
|
|
73
|
+
typeof val.colorSpace === 'string' &&
|
|
74
|
+
DTCG_COLOR_SPACES.has(val.colorSpace) &&
|
|
75
|
+
'components' in val &&
|
|
76
|
+
Array.isArray(val.components)
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Convert a DTCG color object to a ColorJS Color instance
|
|
82
|
+
* Handles 'none' values in components and alpha
|
|
83
|
+
* @param {DTCGColorValue} dtcgColor
|
|
84
|
+
* @returns {ColorJS}
|
|
85
|
+
*/
|
|
86
|
+
function dtcgToColorJS(dtcgColor) {
|
|
87
|
+
const { colorSpace, components, alpha } = dtcgColor;
|
|
88
|
+
|
|
89
|
+
// Map DTCG color space to colorjs.io color space ID
|
|
90
|
+
const colorjsSpace = DTCG_TO_COLORJS_SPACE[colorSpace] ?? colorSpace;
|
|
91
|
+
|
|
92
|
+
// Convert 'none' values to NaN (as per CSS Color spec)
|
|
93
|
+
const coords = /** @type {[number, number, number]} */ (
|
|
94
|
+
components.map((c) => (c === 'none' ? NaN : c))
|
|
95
|
+
);
|
|
96
|
+
const alphaValue = alpha === 'none' ? NaN : (alpha ?? 1);
|
|
97
|
+
|
|
98
|
+
return new ColorJS(colorjsSpace, coords, alphaValue);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* Get the sRGB representation of a color, with gamut mapping if needed
|
|
103
|
+
* Uses the hex property as fallback if provided and color is out of gamut
|
|
104
|
+
* @param {DTCGColorValue} dtcgColor
|
|
105
|
+
* @returns {{ r: number, g: number, b: number, a: number }}
|
|
106
|
+
*/
|
|
107
|
+
function dtcgColorToRgb(dtcgColor) {
|
|
108
|
+
const color = dtcgToColorJS(dtcgColor);
|
|
109
|
+
|
|
110
|
+
// Check if color is in sRGB gamut
|
|
111
|
+
if (!color.inGamut('srgb')) {
|
|
112
|
+
// If hex fallback is provided, use it
|
|
113
|
+
if (dtcgColor.hex) {
|
|
114
|
+
const fallback = Color(dtcgColor.hex).toRgb();
|
|
115
|
+
return fallback;
|
|
116
|
+
}
|
|
117
|
+
// Otherwise, perform gamut mapping
|
|
118
|
+
color.toGamut({ space: 'srgb' });
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
const srgb = color.to('srgb');
|
|
122
|
+
const alpha = isNaN(srgb.alpha) ? 1 : srgb.alpha;
|
|
123
|
+
|
|
124
|
+
return {
|
|
125
|
+
r: Math.round(Math.max(0, Math.min(1, srgb.coords[0])) * 255),
|
|
126
|
+
g: Math.round(Math.max(0, Math.min(1, srgb.coords[1])) * 255),
|
|
127
|
+
b: Math.round(Math.max(0, Math.min(1, srgb.coords[2])) * 255),
|
|
128
|
+
a: alpha,
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Get a CSS compatible color string from a token value that contains a color property
|
|
134
|
+
* Used in CSS shorthand transforms for token types that can have color poperties, like border, gradient, shadow.
|
|
135
|
+
* @param {unknown} tokenValue
|
|
136
|
+
* @returns {string | undefined}
|
|
137
|
+
*/
|
|
138
|
+
export function getColorStringFromTokenObjectValue(tokenValue) {
|
|
139
|
+
/** @type {string | undefined} */
|
|
140
|
+
let hex;
|
|
141
|
+
if (typeof tokenValue === 'object' && tokenValue !== null && 'color' in tokenValue) {
|
|
142
|
+
if (typeof tokenValue.color === 'string') {
|
|
143
|
+
return tokenValue.color;
|
|
144
|
+
}
|
|
145
|
+
let color = /** @type {DTCGColorValue} */ (tokenValue.color);
|
|
146
|
+
let colorJS = getColorJS(color);
|
|
147
|
+
hex = colorJS.toString();
|
|
148
|
+
}
|
|
149
|
+
return hex;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* Get a tinycolor2 Color instance from either legacy string format or DTCG object format
|
|
154
|
+
* This provides backward compatibility for transformers that use tinycolor2 methods
|
|
155
|
+
* @param {Token} token
|
|
156
|
+
* @param {Config} options
|
|
157
|
+
* @returns {ReturnType<typeof Color>}
|
|
158
|
+
*/
|
|
159
|
+
export function getColor(token, options) {
|
|
160
|
+
const val = options.usesDtcg ? token.$value : token.value;
|
|
161
|
+
|
|
162
|
+
if (isDTCGColorObject(val)) {
|
|
163
|
+
const rgb = dtcgColorToRgb(val);
|
|
164
|
+
return Color(rgb);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
return Color(val);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* Get a ColorJS Color instance from either legacy string format or DTCG object format
|
|
172
|
+
* @param {DTCGColorValue | string} val
|
|
173
|
+
* @returns {ColorJS}
|
|
174
|
+
*/
|
|
175
|
+
export function getColorJS(val) {
|
|
176
|
+
if (isDTCGColorObject(val)) {
|
|
177
|
+
return dtcgToColorJS(val);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// Parse legacy format with ColorJS
|
|
181
|
+
return new ColorJS(val);
|
|
182
|
+
}
|
|
183
|
+
|
|
18
184
|
/**
|
|
19
185
|
* @param {string} str
|
|
20
186
|
* @returns {string}
|
|
@@ -33,8 +199,14 @@ const camelOpts = {
|
|
|
33
199
|
export function isColor(token, options) {
|
|
34
200
|
const val = options.usesDtcg ? token.$value : token.value;
|
|
35
201
|
const type = options.usesDtcg ? token.$type : token.type;
|
|
202
|
+
|
|
203
|
+
if (type !== 'color') return false;
|
|
204
|
+
|
|
205
|
+
// DTCG object format
|
|
206
|
+
if (isDTCGColorObject(val)) return true;
|
|
207
|
+
|
|
208
|
+
// Legacy string format
|
|
36
209
|
return (
|
|
37
|
-
type === 'color' &&
|
|
38
210
|
Color(val).isValid() &&
|
|
39
211
|
// exclude gradients from being color transformed
|
|
40
212
|
['linear', 'radial', 'conic']
|
|
@@ -257,7 +429,7 @@ export default {
|
|
|
257
429
|
type: attribute,
|
|
258
430
|
filter: isColor,
|
|
259
431
|
transform: function (token, _, options) {
|
|
260
|
-
const color =
|
|
432
|
+
const color = getColor(token, options);
|
|
261
433
|
return {
|
|
262
434
|
hex: color.toHex(),
|
|
263
435
|
rgb: color.toRgb(),
|
|
@@ -399,7 +571,7 @@ export default {
|
|
|
399
571
|
type: value,
|
|
400
572
|
filter: isColor,
|
|
401
573
|
transform: function (token, _, options) {
|
|
402
|
-
return
|
|
574
|
+
return getColor(token, options).toRgbString();
|
|
403
575
|
},
|
|
404
576
|
},
|
|
405
577
|
|
|
@@ -419,7 +591,7 @@ export default {
|
|
|
419
591
|
type: value,
|
|
420
592
|
filter: isColor,
|
|
421
593
|
transform: function (token, _, options) {
|
|
422
|
-
return
|
|
594
|
+
return getColor(token, options).toHslString();
|
|
423
595
|
},
|
|
424
596
|
},
|
|
425
597
|
|
|
@@ -439,7 +611,7 @@ export default {
|
|
|
439
611
|
type: value,
|
|
440
612
|
filter: isColor,
|
|
441
613
|
transform: function (token, _, options) {
|
|
442
|
-
const color =
|
|
614
|
+
const color = getColor(token, options);
|
|
443
615
|
const o = color.toHsl();
|
|
444
616
|
const vals = `${Math.round(o.h)} ${Math.round(o.s * 100)}% ${Math.round(o.l * 100)}%`;
|
|
445
617
|
if (color.getAlpha() === 1) {
|
|
@@ -465,7 +637,7 @@ export default {
|
|
|
465
637
|
type: value,
|
|
466
638
|
filter: isColor,
|
|
467
639
|
transform: function (token, _, options) {
|
|
468
|
-
const color =
|
|
640
|
+
const color = getColor(token, options);
|
|
469
641
|
if (color.getAlpha() === 1) {
|
|
470
642
|
return color.toHexString();
|
|
471
643
|
} else {
|
|
@@ -489,7 +661,7 @@ export default {
|
|
|
489
661
|
type: value,
|
|
490
662
|
filter: isColor,
|
|
491
663
|
transform: function (token, _, options) {
|
|
492
|
-
return
|
|
664
|
+
return getColor(token, options).toHex8String();
|
|
493
665
|
},
|
|
494
666
|
},
|
|
495
667
|
|
|
@@ -508,7 +680,7 @@ export default {
|
|
|
508
680
|
type: value,
|
|
509
681
|
filter: isColor,
|
|
510
682
|
transform: function (token, _, options) {
|
|
511
|
-
const str =
|
|
683
|
+
const str = getColor(token, options).toHex8();
|
|
512
684
|
return '#' + str.slice(6) + str.slice(0, 6);
|
|
513
685
|
},
|
|
514
686
|
},
|
|
@@ -528,7 +700,7 @@ export default {
|
|
|
528
700
|
type: value,
|
|
529
701
|
filter: isColor,
|
|
530
702
|
transform: function (token, _, options) {
|
|
531
|
-
const str =
|
|
703
|
+
const str = getColor(token, options).toHex8();
|
|
532
704
|
return 'Color(0x' + str.slice(6) + str.slice(0, 6) + ')';
|
|
533
705
|
},
|
|
534
706
|
},
|
|
@@ -548,7 +720,7 @@ export default {
|
|
|
548
720
|
type: value,
|
|
549
721
|
filter: isColor,
|
|
550
722
|
transform: function (token, _, options) {
|
|
551
|
-
const rgb =
|
|
723
|
+
const rgb = getColor(token, options).toRgb();
|
|
552
724
|
return (
|
|
553
725
|
'[UIColor colorWithRed:' +
|
|
554
726
|
(rgb.r / 255).toFixed(3) +
|
|
@@ -581,7 +753,7 @@ export default {
|
|
|
581
753
|
type: value,
|
|
582
754
|
filter: isColor,
|
|
583
755
|
transform: function (token, _, options) {
|
|
584
|
-
const { r, g, b, a } =
|
|
756
|
+
const { r, g, b, a } = getColor(token, options).toRgb();
|
|
585
757
|
const rFixed = (r / 255.0).toFixed(3);
|
|
586
758
|
const gFixed = (g / 255.0).toFixed(3);
|
|
587
759
|
const bFixed = (b / 255.0).toFixed(3);
|
|
@@ -604,7 +776,7 @@ export default {
|
|
|
604
776
|
type: value,
|
|
605
777
|
filter: isColor,
|
|
606
778
|
transform: function (token, _, options) {
|
|
607
|
-
const { r, g, b, a } =
|
|
779
|
+
const { r, g, b, a } = getColor(token, options).toRgb();
|
|
608
780
|
const rFixed = (r / 255.0).toFixed(3);
|
|
609
781
|
const gFixed = (g / 255.0).toFixed(3);
|
|
610
782
|
const bFixed = (b / 255.0).toFixed(3);
|
|
@@ -628,7 +800,7 @@ export default {
|
|
|
628
800
|
type: value,
|
|
629
801
|
filter: isColor,
|
|
630
802
|
transform: function (token, _, options) {
|
|
631
|
-
const color =
|
|
803
|
+
const color = getColor(token, options);
|
|
632
804
|
if (color.getAlpha() === 1) {
|
|
633
805
|
return color.toHexString();
|
|
634
806
|
} else {
|
|
@@ -659,7 +831,7 @@ export default {
|
|
|
659
831
|
type: value,
|
|
660
832
|
filter: isColor,
|
|
661
833
|
transform: function (token, _, options) {
|
|
662
|
-
let color =
|
|
834
|
+
let color = getColor(token, options).toRgb();
|
|
663
835
|
return {
|
|
664
836
|
red: (color.r / 255).toFixed(5),
|
|
665
837
|
green: (color.g / 255).toFixed(5),
|
|
@@ -669,6 +841,134 @@ export default {
|
|
|
669
841
|
},
|
|
670
842
|
},
|
|
671
843
|
|
|
844
|
+
/**
|
|
845
|
+
* Transforms the value into an OKLCH CSS color function string.
|
|
846
|
+
* Preserves wide-gamut colors without lossy gamut mapping.
|
|
847
|
+
*
|
|
848
|
+
* ```css
|
|
849
|
+
* // Matches: token.type === 'color'
|
|
850
|
+
* // Returns:
|
|
851
|
+
* "oklch(0.7 0.15 180)"
|
|
852
|
+
* "oklch(0.7 0.15 180 / 0.5)"
|
|
853
|
+
* ```
|
|
854
|
+
*
|
|
855
|
+
* @memberof Transforms
|
|
856
|
+
*/
|
|
857
|
+
[transforms.colorOklch]: {
|
|
858
|
+
type: value,
|
|
859
|
+
filter: isColor,
|
|
860
|
+
transform: function (token, _, options) {
|
|
861
|
+
const val = options.usesDtcg ? token.$value : token.value;
|
|
862
|
+
const color = getColorJS(val).to('oklch');
|
|
863
|
+
const [l, c, h] = color.coords;
|
|
864
|
+
const alpha = isNaN(color.alpha) ? 1 : color.alpha;
|
|
865
|
+
// Format: oklch(L C H) or oklch(L C H / alpha)
|
|
866
|
+
const lStr = (isNaN(l) ? 0 : l).toFixed(4);
|
|
867
|
+
const cStr = (isNaN(c) ? 0 : c).toFixed(4);
|
|
868
|
+
const hStr = (isNaN(h) ? 0 : h).toFixed(2);
|
|
869
|
+
if (alpha === 1) {
|
|
870
|
+
return `oklch(${lStr} ${cStr} ${hStr})`;
|
|
871
|
+
}
|
|
872
|
+
return `oklch(${lStr} ${cStr} ${hStr} / ${alpha})`;
|
|
873
|
+
},
|
|
874
|
+
},
|
|
875
|
+
|
|
876
|
+
/**
|
|
877
|
+
* Transforms the value into an OKLAB CSS color function string.
|
|
878
|
+
* Preserves wide-gamut colors without lossy gamut mapping.
|
|
879
|
+
*
|
|
880
|
+
* ```css
|
|
881
|
+
* // Matches: token.type === 'color'
|
|
882
|
+
* // Returns:
|
|
883
|
+
* "oklab(0.7 -0.1 0.1)"
|
|
884
|
+
* "oklab(0.7 -0.1 0.1 / 0.5)"
|
|
885
|
+
* ```
|
|
886
|
+
*
|
|
887
|
+
* @memberof Transforms
|
|
888
|
+
*/
|
|
889
|
+
[transforms.colorOklab]: {
|
|
890
|
+
type: value,
|
|
891
|
+
filter: isColor,
|
|
892
|
+
transform: function (token, _, options) {
|
|
893
|
+
const val = options.usesDtcg ? token.$value : token.value;
|
|
894
|
+
const color = getColorJS(val).to('oklab');
|
|
895
|
+
const [l, a, b] = color.coords;
|
|
896
|
+
const alpha = isNaN(color.alpha) ? 1 : color.alpha;
|
|
897
|
+
// Format: oklab(L a b) or oklab(L a b / alpha)
|
|
898
|
+
const lStr = (isNaN(l) ? 0 : l).toFixed(4);
|
|
899
|
+
const aStr = (isNaN(a) ? 0 : a).toFixed(4);
|
|
900
|
+
const bStr = (isNaN(b) ? 0 : b).toFixed(4);
|
|
901
|
+
if (alpha === 1) {
|
|
902
|
+
return `oklab(${lStr} ${aStr} ${bStr})`;
|
|
903
|
+
}
|
|
904
|
+
return `oklab(${lStr} ${aStr} ${bStr} / ${alpha})`;
|
|
905
|
+
},
|
|
906
|
+
},
|
|
907
|
+
|
|
908
|
+
/**
|
|
909
|
+
* Transforms the value into a Display P3 CSS color function string.
|
|
910
|
+
* Preserves wide-gamut colors without lossy gamut mapping.
|
|
911
|
+
*
|
|
912
|
+
* ```css
|
|
913
|
+
* // Matches: token.type === 'color'
|
|
914
|
+
* // Returns:
|
|
915
|
+
* "color(display-p3 0.5 0.5 0.5)"
|
|
916
|
+
* "color(display-p3 0.5 0.5 0.5 / 0.5)"
|
|
917
|
+
* ```
|
|
918
|
+
*
|
|
919
|
+
* @memberof Transforms
|
|
920
|
+
*/
|
|
921
|
+
[transforms.colorP3]: {
|
|
922
|
+
type: value,
|
|
923
|
+
filter: isColor,
|
|
924
|
+
transform: function (token, _, options) {
|
|
925
|
+
const val = options.usesDtcg ? token.$value : token.value;
|
|
926
|
+
const color = getColorJS(val).to('p3');
|
|
927
|
+
const [r, g, b] = color.coords;
|
|
928
|
+
const alpha = isNaN(color.alpha) ? 1 : color.alpha;
|
|
929
|
+
// Format: color(display-p3 r g b) or color(display-p3 r g b / alpha)
|
|
930
|
+
const rStr = (isNaN(r) ? 0 : r).toFixed(5);
|
|
931
|
+
const gStr = (isNaN(g) ? 0 : g).toFixed(5);
|
|
932
|
+
const bStr = (isNaN(b) ? 0 : b).toFixed(5);
|
|
933
|
+
if (alpha === 1) {
|
|
934
|
+
return `color(display-p3 ${rStr} ${gStr} ${bStr})`;
|
|
935
|
+
}
|
|
936
|
+
return `color(display-p3 ${rStr} ${gStr} ${bStr} / ${alpha})`;
|
|
937
|
+
},
|
|
938
|
+
},
|
|
939
|
+
|
|
940
|
+
/**
|
|
941
|
+
* Transforms the value into an LCH CSS color function string.
|
|
942
|
+
* Preserves wide-gamut colors without lossy gamut mapping.
|
|
943
|
+
*
|
|
944
|
+
* ```css
|
|
945
|
+
* // Matches: token.type === 'color'
|
|
946
|
+
* // Returns:
|
|
947
|
+
* "lch(50% 30 180)"
|
|
948
|
+
* "lch(50% 30 180 / 0.5)"
|
|
949
|
+
* ```
|
|
950
|
+
*
|
|
951
|
+
* @memberof Transforms
|
|
952
|
+
*/
|
|
953
|
+
[transforms.colorLch]: {
|
|
954
|
+
type: value,
|
|
955
|
+
filter: isColor,
|
|
956
|
+
transform: function (token, _, options) {
|
|
957
|
+
const val = options.usesDtcg ? token.$value : token.value;
|
|
958
|
+
const color = getColorJS(val).to('lch');
|
|
959
|
+
const [l, c, h] = color.coords;
|
|
960
|
+
const alpha = isNaN(color.alpha) ? 1 : color.alpha;
|
|
961
|
+
// Format: lch(L% C H) or lch(L% C H / alpha)
|
|
962
|
+
const lStr = (isNaN(l) ? 0 : l).toFixed(2);
|
|
963
|
+
const cStr = (isNaN(c) ? 0 : c).toFixed(2);
|
|
964
|
+
const hStr = (isNaN(h) ? 0 : h).toFixed(2);
|
|
965
|
+
if (alpha === 1) {
|
|
966
|
+
return `lch(${lStr}% ${cStr} ${hStr})`;
|
|
967
|
+
}
|
|
968
|
+
return `lch(${lStr}% ${cStr} ${hStr} / ${alpha})`;
|
|
969
|
+
},
|
|
970
|
+
},
|
|
971
|
+
|
|
672
972
|
/**
|
|
673
973
|
* Transforms the value into a scale-independent pixel (sp) value for font sizes on Android. It will not scale the number.
|
|
674
974
|
*
|
|
@@ -1265,16 +1565,18 @@ export default {
|
|
|
1265
1565
|
// already transformed to string
|
|
1266
1566
|
return val;
|
|
1267
1567
|
}
|
|
1268
|
-
const
|
|
1269
|
-
|
|
1568
|
+
const colorStr = getColorStringFromTokenObjectValue(val);
|
|
1569
|
+
const { width } = val;
|
|
1270
1570
|
|
|
1271
1571
|
// use fallback for style object value, since CSS does not allow
|
|
1272
1572
|
// detailed control of the dash pattern or line caps on dashed borders
|
|
1273
1573
|
// https://design-tokens.github.io/community-group/format/#example-fallback-for-object-stroke-style
|
|
1574
|
+
let { style } = val;
|
|
1274
1575
|
if (typeof style === 'object') {
|
|
1275
1576
|
style = 'dashed';
|
|
1276
1577
|
}
|
|
1277
|
-
|
|
1578
|
+
|
|
1579
|
+
return `${width ? `${width} ` : ''}${style ? `${style}` : 'none'}${colorStr ? ` ${colorStr}` : ''}`;
|
|
1278
1580
|
},
|
|
1279
1581
|
},
|
|
1280
1582
|
|
|
@@ -1397,10 +1699,11 @@ export default {
|
|
|
1397
1699
|
if (typeof val !== 'object') {
|
|
1398
1700
|
return val;
|
|
1399
1701
|
}
|
|
1400
|
-
const { type,
|
|
1702
|
+
const { type, offsetX, offsetY, blur, spread } = val;
|
|
1703
|
+
const colorStr = getColorStringFromTokenObjectValue(val);
|
|
1401
1704
|
return `${type ? `${type} ` : ''}${offsetX ?? 0} ${offsetY ?? 0} ${blur ?? 0} ${
|
|
1402
1705
|
spread ? `${spread} ` : ''
|
|
1403
|
-
}${
|
|
1706
|
+
}${colorStr ?? `#000000`}`;
|
|
1404
1707
|
};
|
|
1405
1708
|
|
|
1406
1709
|
if (Array.isArray(val)) {
|
|
@@ -1515,9 +1818,7 @@ export default {
|
|
|
1515
1818
|
type: value,
|
|
1516
1819
|
filter: isColor,
|
|
1517
1820
|
transform: function (token, _, options) {
|
|
1518
|
-
const str =
|
|
1519
|
-
.toHex8()
|
|
1520
|
-
.toUpperCase();
|
|
1821
|
+
const str = getColor(token, options).toHex8().toUpperCase();
|
|
1521
1822
|
return `Color(0x${str.slice(6)}${str.slice(0, 6)})`;
|
|
1522
1823
|
},
|
|
1523
1824
|
},
|
|
@@ -52,6 +52,10 @@ export namespace transforms {
|
|
|
52
52
|
let assetObjCLiteral: "asset/objC/literal";
|
|
53
53
|
let assetSwiftLiteral: "asset/swift/literal";
|
|
54
54
|
let colorHex8flutter: "color/hex8flutter";
|
|
55
|
+
let colorOklch: "color/oklch";
|
|
56
|
+
let colorOklab: "color/oklab";
|
|
57
|
+
let colorP3: "color/p3";
|
|
58
|
+
let colorLch: "color/lch";
|
|
55
59
|
let contentFlutterLiteral: "content/flutter/literal";
|
|
56
60
|
let assetFlutterLiteral: "asset/flutter/literal";
|
|
57
61
|
let sizeFlutterRemToDouble: "size/flutter/remToDouble";
|
package/lib/enums/transforms.js
CHANGED
|
@@ -52,6 +52,10 @@ export const transforms = {
|
|
|
52
52
|
assetObjCLiteral: /** @type {'asset/objC/literal'} */ ('asset/objC/literal'),
|
|
53
53
|
assetSwiftLiteral: /** @type {'asset/swift/literal'} */ ('asset/swift/literal'),
|
|
54
54
|
colorHex8flutter: /** @type {'color/hex8flutter'} */ ('color/hex8flutter'),
|
|
55
|
+
colorOklch: /** @type {'color/oklch'} */ ('color/oklch'),
|
|
56
|
+
colorOklab: /** @type {'color/oklab'} */ ('color/oklab'),
|
|
57
|
+
colorP3: /** @type {'color/p3'} */ ('color/p3'),
|
|
58
|
+
colorLch: /** @type {'color/lch'} */ ('color/lch'),
|
|
55
59
|
contentFlutterLiteral: /** @type {'content/flutter/literal'} */ ('content/flutter/literal'),
|
|
56
60
|
assetFlutterLiteral: /** @type {'asset/flutter/literal'} */ ('asset/flutter/literal'),
|
|
57
61
|
sizeFlutterRemToDouble: /** @type {'size/flutter/remToDouble'} */ ('size/flutter/remToDouble'),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "style-dictionary",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.1",
|
|
4
4
|
"description": "Style once, use everywhere. A build system for creating cross-platform styles.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"style dictionary",
|
|
@@ -112,15 +112,17 @@
|
|
|
112
112
|
],
|
|
113
113
|
"homepage": "https://styledictionary.com",
|
|
114
114
|
"overrides": {
|
|
115
|
-
"tmp": "0.2.5"
|
|
115
|
+
"tmp": "0.2.5",
|
|
116
|
+
"lodash": "4.17.23"
|
|
116
117
|
},
|
|
117
118
|
"dependencies": {
|
|
118
119
|
"@bundled-es-modules/deepmerge": "^4.3.1",
|
|
119
|
-
"@bundled-es-modules/glob": "^
|
|
120
|
-
"@bundled-es-modules/memfs": "^4.
|
|
120
|
+
"@bundled-es-modules/glob": "^13.0.3",
|
|
121
|
+
"@bundled-es-modules/memfs": "^4.17.0",
|
|
121
122
|
"@zip.js/zip.js": "^2.7.44",
|
|
122
123
|
"chalk": "^5.3.0",
|
|
123
124
|
"change-case": "^5.3.0",
|
|
125
|
+
"colorjs.io": "^0.5.2",
|
|
124
126
|
"commander": "^12.1.0",
|
|
125
127
|
"is-plain-obj": "^4.1.0",
|
|
126
128
|
"json5": "^2.2.2",
|
|
@@ -163,7 +165,7 @@
|
|
|
163
165
|
"lint-staged": "^12.3.1",
|
|
164
166
|
"lit": "^3.1.2",
|
|
165
167
|
"mdast": "^3.0.0",
|
|
166
|
-
"mermaid": "^
|
|
168
|
+
"mermaid": "^10.9.5",
|
|
167
169
|
"mocha": "^10.2.0",
|
|
168
170
|
"monaco-editor": "^0.47.0",
|
|
169
171
|
"npm-run-all": "^4.1.5",
|
package/types/DesignToken.d.ts
CHANGED
|
@@ -60,3 +60,18 @@ export interface Dictionary {
|
|
|
60
60
|
unfilteredAllTokens?: TransformedToken[];
|
|
61
61
|
unfilteredTokenMap?: Map<string, TransformedToken>;
|
|
62
62
|
}
|
|
63
|
+
/**
|
|
64
|
+
* DTCG v2025.10 color spaces
|
|
65
|
+
* @see https://tr.designtokens.org/format/#color
|
|
66
|
+
*/
|
|
67
|
+
export type DTCGColorSpace = 'srgb' | 'srgb-linear' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec2020' | 'xyz-d50' | 'xyz-d65' | 'lab' | 'lch' | 'oklab' | 'oklch' | 'hsl' | 'hwb';
|
|
68
|
+
/**
|
|
69
|
+
* DTCG v2025.10 color value format
|
|
70
|
+
* @see https://tr.designtokens.org/format/#color
|
|
71
|
+
*/
|
|
72
|
+
export interface DTCGColorValue {
|
|
73
|
+
colorSpace: DTCGColorSpace;
|
|
74
|
+
components: (number | 'none')[];
|
|
75
|
+
alpha?: number | 'none';
|
|
76
|
+
hex?: string;
|
|
77
|
+
}
|