@digdir/designsystemet 1.0.3 → 1.0.4
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/dist/bin/designsystemet.js +4264 -45
- package/dist/bin/options.js +5 -4
- package/dist/src/colors/colorMetadata.js +5 -4
- package/dist/src/colors/index.js +470 -4
- package/dist/src/colors/theme.js +286 -20
- package/dist/src/colors/utils.js +16 -15
- package/dist/{bin → src}/config.d.ts +46 -1
- package/dist/src/config.d.ts.map +1 -0
- package/dist/src/config.js +377 -0
- package/dist/src/index.js +3666 -2
- package/dist/src/migrations/beta-to-v1.js +85 -4
- package/dist/src/migrations/codemods/css/plugins.js +5 -4
- package/dist/src/migrations/codemods/css/run.d.ts.map +1 -1
- package/dist/src/migrations/codemods/css/run.js +18 -4
- package/dist/src/migrations/color-rename-next49.js +77 -6
- package/dist/src/migrations/index.d.ts +0 -1
- package/dist/src/migrations/index.d.ts.map +1 -1
- package/dist/src/migrations/index.js +461 -6
- package/dist/src/scripts/createJsonSchema.js +1608 -4
- package/dist/src/scripts/update-design-tokens.d.ts +2 -0
- package/dist/src/scripts/update-design-tokens.d.ts.map +1 -0
- package/dist/src/scripts/update-design-tokens.js +36 -0
- package/dist/src/{tokens/template.d.ts → scripts/update-template.d.ts} +1 -1
- package/dist/src/scripts/update-template.d.ts.map +1 -0
- package/dist/src/scripts/update-template.js +1200 -0
- package/dist/src/tokens/build.d.ts +2 -19
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +1511 -70
- package/dist/src/tokens/create/defaults.d.ts +7 -0
- package/dist/src/tokens/create/defaults.d.ts.map +1 -0
- package/dist/src/tokens/create/defaults.js +994 -0
- package/dist/src/tokens/create/generators/$designsystemet.d.ts +5 -0
- package/dist/src/tokens/create/generators/$designsystemet.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/$designsystemet.js +100 -0
- package/dist/src/tokens/create/generators/$metadata.d.ts +8 -0
- package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -0
- package/dist/src/tokens/{write/generate$metadata.js → create/generators/$metadata.js} +3 -2
- package/dist/src/tokens/create/generators/$themes.d.ts +12 -0
- package/dist/src/tokens/create/generators/$themes.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/$themes.js +333 -0
- package/dist/src/tokens/create/generators/color.d.ts +5 -0
- package/dist/src/tokens/create/generators/color.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/color.js +374 -0
- package/dist/src/tokens/create/generators/semantic.d.ts +296 -0
- package/dist/src/tokens/create/generators/semantic.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/semantic.js +483 -0
- package/dist/src/tokens/create/generators/theme.d.ts +3 -0
- package/dist/src/tokens/create/generators/theme.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/theme.js +168 -0
- package/dist/src/tokens/create/generators/typography.d.ts +3 -0
- package/dist/src/tokens/create/generators/typography.d.ts.map +1 -0
- package/dist/src/tokens/create/generators/typography.js +33 -0
- package/dist/src/tokens/{write.d.ts → create/write.d.ts} +2 -2
- package/dist/src/tokens/create/write.d.ts.map +1 -0
- package/dist/src/tokens/create/write.js +546 -0
- package/dist/src/tokens/create.d.ts +4 -2
- package/dist/src/tokens/create.d.ts.map +1 -1
- package/dist/src/tokens/create.js +2049 -59
- package/dist/src/tokens/format.d.ts +16 -0
- package/dist/src/tokens/format.d.ts.map +1 -0
- package/dist/src/tokens/format.js +3514 -0
- package/dist/src/tokens/index.d.ts +1 -0
- package/dist/src/tokens/index.d.ts.map +1 -1
- package/dist/src/tokens/index.js +3526 -2
- package/dist/src/tokens/process/configs/color.d.ts +12 -0
- package/dist/src/tokens/process/configs/color.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/color.js +823 -0
- package/dist/src/tokens/process/configs/semantic.d.ts +3 -0
- package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/semantic.js +367 -0
- package/dist/src/tokens/process/configs/shared.d.ts +10 -0
- package/dist/src/tokens/process/configs/shared.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/shared.js +99 -0
- package/dist/src/tokens/process/configs/storefront.d.ts +3 -0
- package/dist/src/tokens/process/configs/storefront.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/storefront.js +220 -0
- package/dist/src/tokens/process/configs/typography.d.ts +3 -0
- package/dist/src/tokens/process/configs/typography.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/typography.js +369 -0
- package/dist/src/tokens/{build → process}/configs.d.ts +3 -11
- package/dist/src/tokens/process/configs.d.ts.map +1 -0
- package/dist/src/tokens/process/configs.js +976 -0
- package/dist/src/tokens/process/formats/css/color.d.ts +4 -0
- package/dist/src/tokens/process/formats/css/color.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/color.js +128 -0
- package/dist/src/tokens/process/formats/css/semantic.d.ts +17 -0
- package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/semantic.js +109 -0
- package/dist/src/tokens/process/formats/css/typography.d.ts +3 -0
- package/dist/src/tokens/process/formats/css/typography.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/typography.js +32 -0
- package/dist/src/tokens/process/formats/css.d.ts +8 -0
- package/dist/src/tokens/process/formats/css.d.ts.map +1 -0
- package/dist/src/tokens/{build → process}/formats/css.js +94 -57
- package/dist/src/tokens/process/formats/js-tokens.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/js-tokens.js +109 -0
- package/dist/src/tokens/process/platform.d.ts +87 -0
- package/dist/src/tokens/process/platform.d.ts.map +1 -0
- package/dist/src/tokens/process/platform.js +1090 -0
- package/dist/src/tokens/process/transformers.d.ts.map +1 -0
- package/dist/src/tokens/{build → process}/transformers.js +29 -6
- package/dist/src/tokens/{build → process}/utils/getMultidimensionalThemes.d.ts +3 -3
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -0
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +922 -0
- package/dist/src/tokens/template/design-tokens/primitives/globals.js +5 -0
- package/dist/src/tokens/template/design-tokens/primitives/modes/size/global.js +5 -0
- package/dist/src/tokens/template/design-tokens/primitives/modes/size/large.js +5 -0
- package/dist/src/tokens/template/design-tokens/primitives/modes/size/medium.js +5 -0
- package/dist/src/tokens/template/design-tokens/primitives/modes/size/small.js +5 -0
- package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/large.js +5 -0
- package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.js +5 -0
- package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/small.js +5 -0
- package/dist/src/tokens/template/design-tokens/primitives/modes/typography/typography.template.js +5 -0
- package/dist/src/tokens/template/design-tokens/semantic/color.base.template.js +5 -0
- package/dist/src/tokens/template/design-tokens/semantic/color.template.js +5 -0
- package/dist/src/tokens/template/design-tokens/semantic/modes/color.template.js +5 -0
- package/dist/src/tokens/template/design-tokens/semantic/style.js +5 -0
- package/dist/src/tokens/template/design-tokens/themes/theme.base.template.js +5 -0
- package/dist/src/tokens/template/design-tokens/themes/theme.template.js +5 -0
- package/dist/src/tokens/types.d.ts +54 -38
- package/dist/src/tokens/types.d.ts.map +1 -1
- package/dist/src/tokens/types.js +8 -0
- package/dist/src/tokens/utils.d.ts +30 -5
- package/dist/src/tokens/utils.d.ts.map +1 -1
- package/dist/src/tokens/utils.js +36 -50
- package/dist/src/utils.d.ts +18 -0
- package/dist/src/utils.d.ts.map +1 -0
- package/dist/src/utils.js +63 -0
- package/dist/typography.template-4N5YLH7F.json +22 -0
- package/package.json +17 -16
- package/dist/bin/config.d.ts.map +0 -1
- package/dist/bin/config.js +0 -71
- package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts +0 -10
- package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts.map +0 -1
- package/dist/src/migrations/codemods/jsx/classname-prefix.js +0 -64
- package/dist/src/migrations/codemods/jsx/run.d.ts +0 -7
- package/dist/src/migrations/codemods/jsx/run.d.ts.map +0 -1
- package/dist/src/migrations/codemods/jsx/run.js +0 -22
- package/dist/src/migrations/react-beta-to-v1.d.ts +0 -3
- package/dist/src/migrations/react-beta-to-v1.d.ts.map +0 -1
- package/dist/src/migrations/react-beta-to-v1.js +0 -5
- package/dist/src/scripts/copy-internal-tokens.d.ts +0 -2
- package/dist/src/scripts/copy-internal-tokens.d.ts.map +0 -1
- package/dist/src/scripts/copy-internal-tokens.js +0 -28
- package/dist/src/tokens/build/configs.d.ts.map +0 -1
- package/dist/src/tokens/build/configs.js +0 -280
- package/dist/src/tokens/build/formats/css.d.ts +0 -53
- package/dist/src/tokens/build/formats/css.d.ts.map +0 -1
- package/dist/src/tokens/build/formats/js-tokens.d.ts.map +0 -1
- package/dist/src/tokens/build/formats/js-tokens.js +0 -48
- package/dist/src/tokens/build/transformers.d.ts.map +0 -1
- package/dist/src/tokens/build/types.d.ts +0 -48
- package/dist/src/tokens/build/types.d.ts.map +0 -1
- package/dist/src/tokens/build/types.js +0 -7
- package/dist/src/tokens/build/utils/entryfile.d.ts +0 -12
- package/dist/src/tokens/build/utils/entryfile.d.ts.map +0 -1
- package/dist/src/tokens/build/utils/entryfile.js +0 -67
- package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts.map +0 -1
- package/dist/src/tokens/build/utils/getMultidimensionalThemes.js +0 -112
- package/dist/src/tokens/design-tokens/template/$metadata.json +0 -25
- package/dist/src/tokens/design-tokens/template/$themes.json +0 -1498
- package/dist/src/tokens/template.d.ts.map +0 -1
- package/dist/src/tokens/template.js +0 -99
- package/dist/src/tokens/write/generate$metadata.d.ts +0 -9
- package/dist/src/tokens/write/generate$metadata.d.ts.map +0 -1
- package/dist/src/tokens/write/generate$themes.d.ts +0 -12
- package/dist/src/tokens/write/generate$themes.d.ts.map +0 -1
- package/dist/src/tokens/write/generate$themes.js +0 -161
- package/dist/src/tokens/write.d.ts.map +0 -1
- package/dist/src/tokens/write.js +0 -177
- /package/dist/{src/tokens/design-tokens/template/semantic/color-base-file.json → color.base.template-M7BHS4OV.json} +0 -0
- /package/dist/{src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json → color.template-LMPUQ72A.json} +0 -0
- /package/dist/{src/tokens/design-tokens/template/semantic/semantic-color-template.json → color.template-XQNSHLTU.json} +0 -0
- /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/global.json → global-XVXVBKM6.json} +0 -0
- /package/dist/{src/tokens/design-tokens/default/primitives/globals.json → globals-76VAFMDF.json} +0 -0
- /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/large.json → large-CIIHO7AY.json} +0 -0
- /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/large.json → large-UUOZ6DYI.json} +0 -0
- /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/medium.json → medium-OQ7S7P4P.json} +0 -0
- /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json → medium-VSB2S4X3.json} +0 -0
- /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/small.json → small-AEXJ6U7Z.json} +0 -0
- /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/small.json → small-ZY4KOJWX.json} +0 -0
- /package/dist/src/tokens/{build → process}/formats/js-tokens.d.ts +0 -0
- /package/dist/src/tokens/{build → process}/transformers.d.ts +0 -0
- /package/dist/{src/tokens/design-tokens/default/semantic/style.json → style-FP5XVCUD.json} +0 -0
- /package/dist/{src/tokens/design-tokens/template/themes/theme-base-file.json → theme.base.template-Y4RMFBQY.json} +0 -0
- /package/dist/{src/tokens/design-tokens/template/themes/theme-color-template.json → theme.template-CTQRNOMO.json} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/color.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAYrD,eAAO,MAAM,WAAW,EAAE,MA0CzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MA+B3B,CAAC"}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
// src/tokens/process/formats/css/color.ts
|
|
2
|
+
import * as R2 from "ramda";
|
|
3
|
+
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
4
|
+
|
|
5
|
+
// src/tokens/types.ts
|
|
6
|
+
var colorCategories = {
|
|
7
|
+
main: "main",
|
|
8
|
+
support: "support"
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/tokens/utils.ts
|
|
12
|
+
import * as R from "ramda";
|
|
13
|
+
var mapToLowerCase = R.map(R.toLower);
|
|
14
|
+
var hasAnyTruth = R.any(R.equals(true));
|
|
15
|
+
var getType = (token) => (token.$type ?? token.type) || "";
|
|
16
|
+
var typeEquals = R.curry((types, token) => {
|
|
17
|
+
if (R.isNil(token)) {
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
21
|
+
});
|
|
22
|
+
var pathStartsWithOneOf = R.curry((paths, token) => {
|
|
23
|
+
if (R.isNil(token)) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
27
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
28
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
29
|
+
});
|
|
30
|
+
function isSemanticToken(token) {
|
|
31
|
+
return token.filePath.includes("semantic/");
|
|
32
|
+
}
|
|
33
|
+
function isGlobalColorToken(token) {
|
|
34
|
+
return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
|
|
35
|
+
}
|
|
36
|
+
function isColorCategoryToken(token, category) {
|
|
37
|
+
if (!category) {
|
|
38
|
+
return ["main", "support"].some((c) => isColorCategoryToken(token, c));
|
|
39
|
+
}
|
|
40
|
+
return R.startsWith(["color", category], token.path);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// src/tokens/process/formats/css/color.ts
|
|
44
|
+
var prefersColorScheme = (colorScheme2, content) => `
|
|
45
|
+
@media (prefers-color-scheme: ${colorScheme2}) {
|
|
46
|
+
[data-color-scheme="auto"] ${content}
|
|
47
|
+
}
|
|
48
|
+
`;
|
|
49
|
+
var colorScheme = {
|
|
50
|
+
name: "ds/css-colorscheme",
|
|
51
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
52
|
+
const { allTokens } = dictionary;
|
|
53
|
+
const { outputReferences, usesDtcg } = options;
|
|
54
|
+
const { selector, colorScheme: colorScheme2, layer } = platform;
|
|
55
|
+
const colorScheme_ = colorScheme2;
|
|
56
|
+
const format = createPropertyFormatter({
|
|
57
|
+
outputReferences,
|
|
58
|
+
dictionary,
|
|
59
|
+
format: "css",
|
|
60
|
+
usesDtcg
|
|
61
|
+
});
|
|
62
|
+
const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
|
|
63
|
+
color-scheme: ${colorScheme_};
|
|
64
|
+
` : "";
|
|
65
|
+
const filteredAllTokens = allTokens.filter(
|
|
66
|
+
R2.allPass([
|
|
67
|
+
R2.anyPass([
|
|
68
|
+
// Include semantic tokens in the output
|
|
69
|
+
isSemanticToken,
|
|
70
|
+
// Include global color tokens
|
|
71
|
+
isGlobalColorToken
|
|
72
|
+
]),
|
|
73
|
+
// Don't include color category tokens -- they are exported separately
|
|
74
|
+
(t) => !isColorCategoryToken(t)
|
|
75
|
+
])
|
|
76
|
+
);
|
|
77
|
+
const formattedTokens = filteredAllTokens.map(format).join("\n");
|
|
78
|
+
const content = `{
|
|
79
|
+
${formattedTokens}
|
|
80
|
+
${colorSchemeProperty}}
|
|
81
|
+
`;
|
|
82
|
+
const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
|
|
83
|
+
const body = R2.isNotNil(layer) ? `@layer ${layer} {
|
|
84
|
+
${selector} ${content} ${autoSelectorContent}
|
|
85
|
+
}
|
|
86
|
+
` : `${selector} ${content} ${autoSelectorContent}
|
|
87
|
+
`;
|
|
88
|
+
return body;
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
var colorCategory = {
|
|
92
|
+
name: "ds/css-colorcategory",
|
|
93
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
94
|
+
const { outputReferences, usesDtcg } = options;
|
|
95
|
+
const { selector, layer } = platform;
|
|
96
|
+
const format = R2.compose(
|
|
97
|
+
createPropertyFormatter({
|
|
98
|
+
outputReferences,
|
|
99
|
+
dictionary,
|
|
100
|
+
format: "css",
|
|
101
|
+
usesDtcg
|
|
102
|
+
}),
|
|
103
|
+
(token) => ({
|
|
104
|
+
...token,
|
|
105
|
+
name: token.name.replace(/color-\w+-/, "color-"),
|
|
106
|
+
original: {
|
|
107
|
+
...token.original,
|
|
108
|
+
$value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
|
|
109
|
+
}
|
|
110
|
+
})
|
|
111
|
+
);
|
|
112
|
+
const formattedTokens = dictionary.allTokens.map(format).join("\n");
|
|
113
|
+
const content = `{
|
|
114
|
+
${formattedTokens}
|
|
115
|
+
}
|
|
116
|
+
`;
|
|
117
|
+
const body = R2.isNotNil(layer) ? `@layer ${layer} {
|
|
118
|
+
${selector} ${content}
|
|
119
|
+
}
|
|
120
|
+
` : `${selector} ${content}
|
|
121
|
+
`;
|
|
122
|
+
return body;
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
export {
|
|
126
|
+
colorCategory,
|
|
127
|
+
colorScheme
|
|
128
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { TransformedToken } from 'style-dictionary';
|
|
2
|
+
import type { Format } from 'style-dictionary/types';
|
|
3
|
+
export declare const isInlineTokens: (t: TransformedToken) => boolean;
|
|
4
|
+
/**
|
|
5
|
+
* Overrides the default sizing formula with a custom one that supports [round()](https://developer.mozilla.org/en-US/docs/Web/CSS/round) if supported.
|
|
6
|
+
*
|
|
7
|
+
* @param format - Function to format a token into a CSS property string.
|
|
8
|
+
* @param tokens - Array of transformed tokens to format.
|
|
9
|
+
* @returns Object with formatted CSS strings for calc and round.
|
|
10
|
+
*/
|
|
11
|
+
export declare const overrideSizingFormula: (format: (t: TransformedToken) => string, token: TransformedToken) => {
|
|
12
|
+
name: string;
|
|
13
|
+
round: string;
|
|
14
|
+
calc: string;
|
|
15
|
+
};
|
|
16
|
+
export declare const semantic: Format;
|
|
17
|
+
//# sourceMappingURL=semantic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/semantic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAQrD,eAAO,MAAM,cAAc,MAJY,gBAAgB,YAI+C,CAAC;AAEvG;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,CAAC,CAAC,EAAE,gBAAgB,KAAK,MAAM,EAAE,OAAO,gBAAgB;;;;CAYrG,CAAC;AA8BF,eAAO,MAAM,QAAQ,EAAE,MA0BtB,CAAC"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
// src/tokens/process/formats/css/semantic.ts
|
|
2
|
+
import * as R2 from "ramda";
|
|
3
|
+
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
4
|
+
|
|
5
|
+
// src/tokens/utils.ts
|
|
6
|
+
import * as R from "ramda";
|
|
7
|
+
var mapToLowerCase = R.map(R.toLower);
|
|
8
|
+
var hasAnyTruth = R.any(R.equals(true));
|
|
9
|
+
var getType = (token) => (token.$type ?? token.type) || "";
|
|
10
|
+
var getValue = (token) => token.$value ?? token.value;
|
|
11
|
+
var typeEquals = R.curry((types, token) => {
|
|
12
|
+
if (R.isNil(token)) {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
16
|
+
});
|
|
17
|
+
var pathStartsWithOneOf = R.curry((paths, token) => {
|
|
18
|
+
if (R.isNil(token)) {
|
|
19
|
+
return false;
|
|
20
|
+
}
|
|
21
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
22
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
23
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
24
|
+
});
|
|
25
|
+
var isDigit = (s) => /^\d+$/.test(s);
|
|
26
|
+
function inlineTokens(shouldInline, tokens) {
|
|
27
|
+
const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
|
|
28
|
+
return otherTokens.map((token) => {
|
|
29
|
+
let transformed = getValue(token.original);
|
|
30
|
+
for (const ref of inlineableTokens) {
|
|
31
|
+
const refName = ref.path.join(".");
|
|
32
|
+
if (typeof transformed === "string") {
|
|
33
|
+
transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
|
|
37
|
+
return tokenWithInlinedRefs;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// src/tokens/process/formats/css/semantic.ts
|
|
42
|
+
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
43
|
+
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
44
|
+
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
45
|
+
var isInlineTokens = R2.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
46
|
+
var overrideSizingFormula = (format, token) => {
|
|
47
|
+
const [name, value] = format(token).split(":");
|
|
48
|
+
const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
|
|
49
|
+
const round = `round(down, ${calc}, 0.0625rem)`;
|
|
50
|
+
return {
|
|
51
|
+
name,
|
|
52
|
+
round,
|
|
53
|
+
calc
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
var formatSizingTokens = (format, tokens) => {
|
|
57
|
+
const { round, calc } = R2.reduce(
|
|
58
|
+
(acc, token) => {
|
|
59
|
+
const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
|
|
60
|
+
return {
|
|
61
|
+
round: [...acc.round, `${name}: ${round2};`],
|
|
62
|
+
calc: [...acc.calc, `${name}: ${calc2};`]
|
|
63
|
+
};
|
|
64
|
+
},
|
|
65
|
+
{ round: [], calc: [] },
|
|
66
|
+
tokens
|
|
67
|
+
);
|
|
68
|
+
return `
|
|
69
|
+
${calc.join("\n")}
|
|
70
|
+
|
|
71
|
+
@supports (width: round(down, .1em, 1px)) {
|
|
72
|
+
${round.join("\n")}
|
|
73
|
+
}`;
|
|
74
|
+
};
|
|
75
|
+
var semantic = {
|
|
76
|
+
name: "ds/css-semantic",
|
|
77
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
78
|
+
const { outputReferences, usesDtcg } = options;
|
|
79
|
+
const { selector, layer } = platform;
|
|
80
|
+
const format = createPropertyFormatter({
|
|
81
|
+
outputReferences,
|
|
82
|
+
dictionary,
|
|
83
|
+
format: "css",
|
|
84
|
+
usesDtcg
|
|
85
|
+
});
|
|
86
|
+
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
87
|
+
const filteredTokens = R2.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
|
|
88
|
+
const [sizingTokens, restTokens] = R2.partition(
|
|
89
|
+
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
90
|
+
filteredTokens
|
|
91
|
+
);
|
|
92
|
+
const formattedTokens = [R2.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
|
|
93
|
+
const content = `{
|
|
94
|
+
${formattedTokens.join("\n")}
|
|
95
|
+
}
|
|
96
|
+
`;
|
|
97
|
+
const body = R2.isNotNil(layer) ? `@layer ${layer} {
|
|
98
|
+
${selector} ${content}
|
|
99
|
+
}
|
|
100
|
+
` : `${selector} ${content}
|
|
101
|
+
`;
|
|
102
|
+
return body;
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
export {
|
|
106
|
+
isInlineTokens,
|
|
107
|
+
overrideSizingFormula,
|
|
108
|
+
semantic
|
|
109
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/process/formats/css/typography.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASrD,eAAO,MAAM,UAAU,EAAE,MAsBxB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// src/tokens/process/formats/css/typography.ts
|
|
2
|
+
import * as R from "ramda";
|
|
3
|
+
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
4
|
+
var typographyFontFamilyPredicate = R.allPass([
|
|
5
|
+
R.pathSatisfies(R.includes("typography"), ["path"]),
|
|
6
|
+
R.pathSatisfies(R.includes("fontFamily"), ["path"])
|
|
7
|
+
]);
|
|
8
|
+
var typography = {
|
|
9
|
+
name: "ds/css-typography",
|
|
10
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
11
|
+
const { outputReferences, usesDtcg } = options;
|
|
12
|
+
const { selector, layer } = platform;
|
|
13
|
+
const format = createPropertyFormatter({
|
|
14
|
+
outputReferences,
|
|
15
|
+
dictionary,
|
|
16
|
+
format: "css",
|
|
17
|
+
usesDtcg
|
|
18
|
+
});
|
|
19
|
+
const filteredTokens = R.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
20
|
+
const formattedTokens = R.pipe(R.map(format), R.join("\n"))(filteredTokens);
|
|
21
|
+
const content = selector ? `${selector} {
|
|
22
|
+
${formattedTokens}
|
|
23
|
+
}` : formattedTokens;
|
|
24
|
+
const body = R.isNotNil(layer) ? `@layer ${layer} {
|
|
25
|
+
${content}
|
|
26
|
+
}` : content;
|
|
27
|
+
return body;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
typography
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/formats/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAMrD,eAAO,MAAM,OAAO;;;;;CAKc,CAAC"}
|
|
@@ -1,16 +1,48 @@
|
|
|
1
|
+
// src/tokens/process/formats/css/color.ts
|
|
2
|
+
import * as R2 from "ramda";
|
|
3
|
+
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
4
|
+
|
|
5
|
+
// src/tokens/types.ts
|
|
6
|
+
var colorCategories = {
|
|
7
|
+
main: "main",
|
|
8
|
+
support: "support"
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/tokens/utils.ts
|
|
1
12
|
import * as R from "ramda";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
var mapToLowerCase = R.map(R.toLower);
|
|
14
|
+
var hasAnyTruth = R.any(R.equals(true));
|
|
15
|
+
var getType = (token) => (token.$type ?? token.type) || "";
|
|
16
|
+
var getValue = (token) => token.$value ?? token.value;
|
|
17
|
+
var typeEquals = R.curry((types, token) => {
|
|
18
|
+
if (R.isNil(token)) {
|
|
19
|
+
return false;
|
|
20
|
+
}
|
|
21
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
22
|
+
});
|
|
23
|
+
var pathStartsWithOneOf = R.curry((paths, token) => {
|
|
24
|
+
if (R.isNil(token)) {
|
|
25
|
+
return false;
|
|
26
|
+
}
|
|
27
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
28
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
29
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
30
|
+
});
|
|
31
|
+
function isSemanticToken(token) {
|
|
32
|
+
return token.filePath.includes("semantic/");
|
|
33
|
+
}
|
|
34
|
+
function isGlobalColorToken(token) {
|
|
35
|
+
return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
|
|
36
|
+
}
|
|
37
|
+
function isColorCategoryToken(token, category) {
|
|
38
|
+
if (!category) {
|
|
39
|
+
return ["main", "support"].some((c) => isColorCategoryToken(token, c));
|
|
40
|
+
}
|
|
41
|
+
return R.startsWith(["color", category], token.path);
|
|
42
|
+
}
|
|
43
|
+
var isDigit = (s) => /^\d+$/.test(s);
|
|
44
|
+
function inlineTokens(shouldInline, tokens) {
|
|
45
|
+
const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
|
|
14
46
|
return otherTokens.map((token) => {
|
|
15
47
|
let transformed = getValue(token.original);
|
|
16
48
|
for (const ref of inlineableTokens) {
|
|
@@ -23,19 +55,20 @@ function squashTokens(shouldSquash, tokens) {
|
|
|
23
55
|
return tokenWithInlinedRefs;
|
|
24
56
|
});
|
|
25
57
|
}
|
|
26
|
-
|
|
58
|
+
|
|
59
|
+
// src/tokens/process/formats/css/color.ts
|
|
60
|
+
var prefersColorScheme = (colorScheme2, content) => `
|
|
27
61
|
@media (prefers-color-scheme: ${colorScheme2}) {
|
|
28
62
|
[data-color-scheme="auto"] ${content}
|
|
29
63
|
}
|
|
30
64
|
`;
|
|
31
|
-
|
|
65
|
+
var colorScheme = {
|
|
32
66
|
name: "ds/css-colorscheme",
|
|
33
67
|
format: async ({ dictionary, file, options, platform }) => {
|
|
34
68
|
const { allTokens } = dictionary;
|
|
35
69
|
const { outputReferences, usesDtcg } = options;
|
|
36
70
|
const { selector, colorScheme: colorScheme2, layer } = platform;
|
|
37
71
|
const colorScheme_ = colorScheme2;
|
|
38
|
-
const header = await fileHeader({ file });
|
|
39
72
|
const format = createPropertyFormatter({
|
|
40
73
|
outputReferences,
|
|
41
74
|
dictionary,
|
|
@@ -46,8 +79,8 @@ const colorScheme = {
|
|
|
46
79
|
color-scheme: ${colorScheme_};
|
|
47
80
|
` : "";
|
|
48
81
|
const filteredAllTokens = allTokens.filter(
|
|
49
|
-
|
|
50
|
-
|
|
82
|
+
R2.allPass([
|
|
83
|
+
R2.anyPass([
|
|
51
84
|
// Include semantic tokens in the output
|
|
52
85
|
isSemanticToken,
|
|
53
86
|
// Include global color tokens
|
|
@@ -63,21 +96,20 @@ ${formattedTokens}
|
|
|
63
96
|
${colorSchemeProperty}}
|
|
64
97
|
`;
|
|
65
98
|
const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
|
|
66
|
-
const body =
|
|
99
|
+
const body = R2.isNotNil(layer) ? `@layer ${layer} {
|
|
67
100
|
${selector} ${content} ${autoSelectorContent}
|
|
68
101
|
}
|
|
69
102
|
` : `${selector} ${content} ${autoSelectorContent}
|
|
70
103
|
`;
|
|
71
|
-
return
|
|
104
|
+
return body;
|
|
72
105
|
}
|
|
73
106
|
};
|
|
74
|
-
|
|
107
|
+
var colorCategory = {
|
|
75
108
|
name: "ds/css-colorcategory",
|
|
76
109
|
format: async ({ dictionary, file, options, platform }) => {
|
|
77
|
-
const { outputReferences, usesDtcg
|
|
110
|
+
const { outputReferences, usesDtcg } = options;
|
|
78
111
|
const { selector, layer } = platform;
|
|
79
|
-
const
|
|
80
|
-
const format = R.compose(
|
|
112
|
+
const format = R2.compose(
|
|
81
113
|
createPropertyFormatter({
|
|
82
114
|
outputReferences,
|
|
83
115
|
dictionary,
|
|
@@ -98,18 +130,23 @@ const colorCategory = {
|
|
|
98
130
|
${formattedTokens}
|
|
99
131
|
}
|
|
100
132
|
`;
|
|
101
|
-
const body =
|
|
133
|
+
const body = R2.isNotNil(layer) ? `@layer ${layer} {
|
|
102
134
|
${selector} ${content}
|
|
103
135
|
}
|
|
104
136
|
` : `${selector} ${content}
|
|
105
137
|
`;
|
|
106
|
-
return
|
|
138
|
+
return body;
|
|
107
139
|
}
|
|
108
140
|
};
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
141
|
+
|
|
142
|
+
// src/tokens/process/formats/css/semantic.ts
|
|
143
|
+
import * as R3 from "ramda";
|
|
144
|
+
import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
|
|
145
|
+
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
146
|
+
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
147
|
+
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
148
|
+
var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
149
|
+
var overrideSizingFormula = (format, token) => {
|
|
113
150
|
const [name, value] = format(token).split(":");
|
|
114
151
|
const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
|
|
115
152
|
const round = `round(down, ${calc}, 0.0625rem)`;
|
|
@@ -119,8 +156,8 @@ const overrideSizingFormula = (format, token) => {
|
|
|
119
156
|
calc
|
|
120
157
|
};
|
|
121
158
|
};
|
|
122
|
-
|
|
123
|
-
const { round, calc } =
|
|
159
|
+
var formatSizingTokens = (format, tokens) => {
|
|
160
|
+
const { round, calc } = R3.reduce(
|
|
124
161
|
(acc, token) => {
|
|
125
162
|
const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
|
|
126
163
|
return {
|
|
@@ -138,74 +175,74 @@ ${calc.join("\n")}
|
|
|
138
175
|
${round.join("\n")}
|
|
139
176
|
}`;
|
|
140
177
|
};
|
|
141
|
-
|
|
178
|
+
var semantic = {
|
|
142
179
|
name: "ds/css-semantic",
|
|
143
180
|
format: async ({ dictionary, file, options, platform }) => {
|
|
144
181
|
const { outputReferences, usesDtcg } = options;
|
|
145
182
|
const { selector, layer } = platform;
|
|
146
|
-
const
|
|
147
|
-
const format = createPropertyFormatter({
|
|
183
|
+
const format = createPropertyFormatter2({
|
|
148
184
|
outputReferences,
|
|
149
185
|
dictionary,
|
|
150
186
|
format: "css",
|
|
151
187
|
usesDtcg
|
|
152
188
|
});
|
|
153
|
-
const tokens =
|
|
154
|
-
const filteredTokens =
|
|
155
|
-
const [sizingTokens, restTokens] =
|
|
156
|
-
(t) => pathStartsWithOneOf(["
|
|
189
|
+
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
190
|
+
const filteredTokens = R3.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
|
|
191
|
+
const [sizingTokens, restTokens] = R3.partition(
|
|
192
|
+
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
157
193
|
filteredTokens
|
|
158
194
|
);
|
|
159
|
-
const formattedTokens = [
|
|
195
|
+
const formattedTokens = [R3.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
|
|
160
196
|
const content = `{
|
|
161
197
|
${formattedTokens.join("\n")}
|
|
162
198
|
}
|
|
163
199
|
`;
|
|
164
|
-
const body =
|
|
200
|
+
const body = R3.isNotNil(layer) ? `@layer ${layer} {
|
|
165
201
|
${selector} ${content}
|
|
166
202
|
}
|
|
167
203
|
` : `${selector} ${content}
|
|
168
204
|
`;
|
|
169
|
-
return
|
|
205
|
+
return body;
|
|
170
206
|
}
|
|
171
207
|
};
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
208
|
+
|
|
209
|
+
// src/tokens/process/formats/css/typography.ts
|
|
210
|
+
import * as R4 from "ramda";
|
|
211
|
+
import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
|
|
212
|
+
var typographyFontFamilyPredicate = R4.allPass([
|
|
213
|
+
R4.pathSatisfies(R4.includes("typography"), ["path"]),
|
|
214
|
+
R4.pathSatisfies(R4.includes("fontFamily"), ["path"])
|
|
175
215
|
]);
|
|
176
|
-
|
|
216
|
+
var typography = {
|
|
177
217
|
name: "ds/css-typography",
|
|
178
218
|
format: async ({ dictionary, file, options, platform }) => {
|
|
179
219
|
const { outputReferences, usesDtcg } = options;
|
|
180
220
|
const { selector, layer } = platform;
|
|
181
|
-
const
|
|
182
|
-
const format = createPropertyFormatter({
|
|
221
|
+
const format = createPropertyFormatter3({
|
|
183
222
|
outputReferences,
|
|
184
223
|
dictionary,
|
|
185
224
|
format: "css",
|
|
186
225
|
usesDtcg
|
|
187
226
|
});
|
|
188
|
-
const filteredTokens =
|
|
189
|
-
const formattedTokens =
|
|
227
|
+
const filteredTokens = R4.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
228
|
+
const formattedTokens = R4.pipe(R4.map(format), R4.join("\n"))(filteredTokens);
|
|
190
229
|
const content = selector ? `${selector} {
|
|
191
230
|
${formattedTokens}
|
|
192
231
|
}` : formattedTokens;
|
|
193
|
-
const body =
|
|
232
|
+
const body = R4.isNotNil(layer) ? `@layer ${layer} {
|
|
194
233
|
${content}
|
|
195
234
|
}` : content;
|
|
196
|
-
return
|
|
235
|
+
return body;
|
|
197
236
|
}
|
|
198
237
|
};
|
|
199
|
-
|
|
238
|
+
|
|
239
|
+
// src/tokens/process/formats/css.ts
|
|
240
|
+
var formats = {
|
|
200
241
|
colorScheme,
|
|
201
242
|
colorCategory,
|
|
202
243
|
semantic,
|
|
203
244
|
typography
|
|
204
245
|
};
|
|
205
246
|
export {
|
|
206
|
-
formats
|
|
207
|
-
isNumericSizeToken,
|
|
208
|
-
isSquashTokens,
|
|
209
|
-
overrideSizingFormula,
|
|
210
|
-
squashTokens
|
|
247
|
+
formats
|
|
211
248
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"js-tokens.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/formats/js-tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAoBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MAuCtB,CAAC"}
|