@digdir/designsystemet 1.1.3 → 1.1.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 +130 -186
- package/dist/src/index.js +88 -145
- package/dist/src/scripts/update-preview-tokens.d.ts +3 -0
- package/dist/src/scripts/update-preview-tokens.d.ts.map +1 -0
- package/dist/src/scripts/update-preview-tokens.js +3446 -0
- package/dist/src/tokens/build.d.ts +1 -1
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +98 -154
- package/dist/src/tokens/create/generators/$designsystemet.js +6 -6
- package/dist/src/tokens/create/write.js +6 -6
- package/dist/src/tokens/format.d.ts +1 -1
- package/dist/src/tokens/format.d.ts.map +1 -1
- package/dist/src/tokens/format.js +88 -145
- package/dist/src/tokens/index.js +88 -145
- package/dist/src/tokens/process/configs/color.js +234 -293
- package/dist/src/tokens/process/configs/semantic.js +509 -113
- package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/typography.js +504 -110
- package/dist/src/tokens/process/configs.d.ts +0 -1
- package/dist/src/tokens/process/configs.d.ts.map +1 -1
- package/dist/src/tokens/process/configs.js +231 -290
- package/dist/src/tokens/process/formats/css/color.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/color.js +644 -12
- package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/semantic.js +679 -23
- package/dist/src/tokens/process/formats/css/typography.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/typography.js +741 -8
- package/dist/src/tokens/process/formats/css.js +549 -38
- package/dist/src/tokens/process/output/declarations.js +60 -121
- package/dist/src/tokens/process/output/theme.js +6 -6
- package/dist/src/tokens/process/platform.d.ts +9 -4
- package/dist/src/tokens/process/platform.d.ts.map +1 -1
- package/dist/src/tokens/process/platform.js +76 -133
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +62 -123
- package/package.json +6 -6
- package/dist/src/tokens/process/configs/storefront.d.ts +0 -3
- package/dist/src/tokens/process/configs/storefront.d.ts.map +0 -1
- package/dist/src/tokens/process/configs/storefront.js +0 -234
- package/dist/src/tokens/process/formats/js-tokens.d.ts +0 -6
- package/dist/src/tokens/process/formats/js-tokens.d.ts.map +0 -1
- package/dist/src/tokens/process/formats/js-tokens.js +0 -123
|
@@ -164,11 +164,11 @@ var TypographyValues;
|
|
|
164
164
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
165
165
|
import chalk2 from "chalk";
|
|
166
166
|
import { kebabCase } from "change-case";
|
|
167
|
-
import * as
|
|
167
|
+
import * as R10 from "ramda";
|
|
168
168
|
|
|
169
169
|
// src/tokens/process/platform.ts
|
|
170
170
|
import chalk from "chalk";
|
|
171
|
-
import * as
|
|
171
|
+
import * as R9 from "ramda";
|
|
172
172
|
import StyleDictionary2 from "style-dictionary";
|
|
173
173
|
|
|
174
174
|
// src/tokens/types.ts
|
|
@@ -179,7 +179,7 @@ var colorCategories = {
|
|
|
179
179
|
|
|
180
180
|
// src/tokens/process/configs.ts
|
|
181
181
|
import { register } from "@tokens-studio/sd-transforms";
|
|
182
|
-
import * as
|
|
182
|
+
import * as R8 from "ramda";
|
|
183
183
|
import StyleDictionary from "style-dictionary";
|
|
184
184
|
|
|
185
185
|
// src/tokens/utils.ts
|
|
@@ -278,7 +278,11 @@ var colorScheme = {
|
|
|
278
278
|
(t) => !isColorCategoryToken(t)
|
|
279
279
|
])
|
|
280
280
|
);
|
|
281
|
-
const
|
|
281
|
+
const formattedMap = filteredAllTokens.map((token) => ({
|
|
282
|
+
token,
|
|
283
|
+
formatted: format(token)
|
|
284
|
+
}));
|
|
285
|
+
const formattedTokens = formattedMap.map(R2.view(R2.lensProp("formatted"))).join("\n");
|
|
282
286
|
const content = `{
|
|
283
287
|
${formattedTokens}
|
|
284
288
|
${colorSchemeProperty}}
|
|
@@ -296,7 +300,8 @@ var colorCategory = {
|
|
|
296
300
|
name: "ds/css-colorcategory",
|
|
297
301
|
format: async ({ dictionary, options, platform }) => {
|
|
298
302
|
const { outputReferences, usesDtcg } = options;
|
|
299
|
-
const { selector, layer } = platform;
|
|
303
|
+
const { selector, layer, files } = platform;
|
|
304
|
+
const destination = files?.[0]?.destination;
|
|
300
305
|
const format = R2.compose(
|
|
301
306
|
createPropertyFormatter({
|
|
302
307
|
outputReferences,
|
|
@@ -313,7 +318,12 @@ var colorCategory = {
|
|
|
313
318
|
}
|
|
314
319
|
})
|
|
315
320
|
);
|
|
316
|
-
const
|
|
321
|
+
const formattedMap = dictionary.allTokens.map((token) => ({
|
|
322
|
+
token,
|
|
323
|
+
formatted: format(token)
|
|
324
|
+
}));
|
|
325
|
+
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
326
|
+
const formattedTokens = formattedMap.map(R2.view(R2.lensProp("formatted"))).join("\n");
|
|
317
327
|
const content = `{
|
|
318
328
|
${formattedTokens}
|
|
319
329
|
}
|
|
@@ -344,30 +354,30 @@ var overrideSizingFormula = (format, token) => {
|
|
|
344
354
|
calc
|
|
345
355
|
};
|
|
346
356
|
};
|
|
347
|
-
var formatSizingTokens = (format, tokens) =>
|
|
348
|
-
|
|
349
|
-
(
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
357
|
+
var formatSizingTokens = (format, tokens) => R3.reduce(
|
|
358
|
+
(acc, token) => {
|
|
359
|
+
const { round, calc, name } = overrideSizingFormula(format, token);
|
|
360
|
+
return {
|
|
361
|
+
tokens: [...acc.tokens, token],
|
|
362
|
+
round: [...acc.round, `${name}: ${round};`],
|
|
363
|
+
calc: [...acc.calc, `${name}: ${calc};`]
|
|
364
|
+
};
|
|
365
|
+
},
|
|
366
|
+
{ tokens: [], round: [], calc: [] },
|
|
367
|
+
tokens
|
|
368
|
+
);
|
|
369
|
+
var sizingTemplate = ({ round, calc }) => `
|
|
360
370
|
${calc.join("\n")}
|
|
361
371
|
|
|
362
372
|
@supports (width: round(down, .1em, 1px)) {
|
|
363
373
|
${round.join("\n")}
|
|
364
374
|
}`;
|
|
365
|
-
};
|
|
366
375
|
var semantic = {
|
|
367
376
|
name: "ds/css-semantic",
|
|
368
377
|
format: async ({ dictionary, options, platform }) => {
|
|
369
378
|
const { outputReferences, usesDtcg } = options;
|
|
370
|
-
const { selector, layer } = platform;
|
|
379
|
+
const { selector, layer, files } = platform;
|
|
380
|
+
const destination = files?.[0]?.destination;
|
|
371
381
|
const format = createPropertyFormatter2({
|
|
372
382
|
outputReferences,
|
|
373
383
|
dictionary,
|
|
@@ -380,7 +390,18 @@ var semantic = {
|
|
|
380
390
|
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
381
391
|
filteredTokens
|
|
382
392
|
);
|
|
383
|
-
const
|
|
393
|
+
const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
|
|
394
|
+
const formattedMap = restTokens.map((token) => ({
|
|
395
|
+
token,
|
|
396
|
+
formatted: format(token)
|
|
397
|
+
}));
|
|
398
|
+
const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
|
|
399
|
+
token: formattedSizingTokens.tokens[i],
|
|
400
|
+
formatted: t
|
|
401
|
+
}));
|
|
402
|
+
buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
|
|
403
|
+
const sizingSnippet = sizingTemplate(formattedSizingTokens);
|
|
404
|
+
const formattedTokens = formattedMap.map(R3.view(R3.lensProp("formatted"))).concat(sizingSnippet);
|
|
384
405
|
const content = `{
|
|
385
406
|
${formattedTokens.join("\n")}
|
|
386
407
|
}
|
|
@@ -405,7 +426,8 @@ var typography = {
|
|
|
405
426
|
name: "ds/css-typography",
|
|
406
427
|
format: async ({ dictionary, options, platform }) => {
|
|
407
428
|
const { outputReferences, usesDtcg } = options;
|
|
408
|
-
const { selector, layer } = platform;
|
|
429
|
+
const { selector, layer, files } = platform;
|
|
430
|
+
const destination = files?.[0]?.destination;
|
|
409
431
|
const format = createPropertyFormatter3({
|
|
410
432
|
outputReferences,
|
|
411
433
|
dictionary,
|
|
@@ -413,7 +435,12 @@ var typography = {
|
|
|
413
435
|
usesDtcg
|
|
414
436
|
});
|
|
415
437
|
const filteredTokens = R4.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
416
|
-
const
|
|
438
|
+
const formattedMap = filteredTokens.map((token) => ({
|
|
439
|
+
token,
|
|
440
|
+
formatted: format(token)
|
|
441
|
+
}));
|
|
442
|
+
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
443
|
+
const formattedTokens = formattedMap.map(R4.view(R4.lensProp("formatted"))).join("\n");
|
|
417
444
|
const content = selector ? `${selector} {
|
|
418
445
|
${formattedTokens}
|
|
419
446
|
}` : formattedTokens;
|
|
@@ -620,90 +647,6 @@ var semanticVariables = ({ theme }) => {
|
|
|
620
647
|
};
|
|
621
648
|
};
|
|
622
649
|
|
|
623
|
-
// src/tokens/process/configs/storefront.ts
|
|
624
|
-
import * as R9 from "ramda";
|
|
625
|
-
import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
|
|
626
|
-
|
|
627
|
-
// src/tokens/process/formats/js-tokens.ts
|
|
628
|
-
import * as R8 from "ramda";
|
|
629
|
-
import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
|
|
630
|
-
var groupByType = R8.groupBy((token) => getType(token));
|
|
631
|
-
var removeUnwatedTokens = R8.pipe(
|
|
632
|
-
R8.reject((token) => isColorCategoryToken(token)),
|
|
633
|
-
R8.reject((token) => R8.any((path) => path.startsWith("_"))(token.path))
|
|
634
|
-
);
|
|
635
|
-
var dissocExtensions = R8.pipe(R8.dissoc("$extensions"), R8.dissocPath(["original", "$extensions"]));
|
|
636
|
-
var removeUnwatedProps = R8.map((token) => dissocExtensions(token));
|
|
637
|
-
var toCssVarName = R8.pipe(R8.split(":"), R8.head, R8.trim);
|
|
638
|
-
var jsTokens = {
|
|
639
|
-
name: "ds/js-tokens",
|
|
640
|
-
format: async ({ dictionary, file, options }) => {
|
|
641
|
-
const { usesDtcg, outputReferences } = options;
|
|
642
|
-
const format = createPropertyFormatter4({
|
|
643
|
-
outputReferences,
|
|
644
|
-
dictionary,
|
|
645
|
-
format: "css",
|
|
646
|
-
usesDtcg
|
|
647
|
-
});
|
|
648
|
-
const formatTokens = R8.map((token) => {
|
|
649
|
-
if (pathStartsWithOneOf(["size", "_size"], token)) {
|
|
650
|
-
const { calc, name } = overrideSizingFormula(format, token);
|
|
651
|
-
return {
|
|
652
|
-
...token,
|
|
653
|
-
name: name.trim(),
|
|
654
|
-
$value: calc.trim()
|
|
655
|
-
};
|
|
656
|
-
}
|
|
657
|
-
return {
|
|
658
|
-
...token,
|
|
659
|
-
name: toCssVarName(format(token))
|
|
660
|
-
};
|
|
661
|
-
});
|
|
662
|
-
const processTokens = R8.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
|
|
663
|
-
const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
|
|
664
|
-
const content = Object.entries(tokens).map(
|
|
665
|
-
([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
|
|
666
|
-
`
|
|
667
|
-
).join("\n");
|
|
668
|
-
return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
|
|
669
|
-
}
|
|
670
|
-
};
|
|
671
|
-
|
|
672
|
-
// src/tokens/process/configs/storefront.ts
|
|
673
|
-
var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
|
|
674
|
-
return {
|
|
675
|
-
preprocessors: ["tokens-studio"],
|
|
676
|
-
platforms: {
|
|
677
|
-
ts: {
|
|
678
|
-
prefix,
|
|
679
|
-
basePxFontSize,
|
|
680
|
-
transforms: dsTransformers,
|
|
681
|
-
buildPath: `${theme}/`,
|
|
682
|
-
files: [
|
|
683
|
-
{
|
|
684
|
-
destination: `${colorScheme2}.ts`,
|
|
685
|
-
format: jsTokens.name,
|
|
686
|
-
filter: (token) => {
|
|
687
|
-
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R9.includes("semantic", token.filePath))
|
|
688
|
-
return false;
|
|
689
|
-
const isSemanticColor = R9.includes("semantic", token.filePath) && typeEquals(["color"], token);
|
|
690
|
-
const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
|
|
691
|
-
return isSemanticColor || wantedTypes;
|
|
692
|
-
}
|
|
693
|
-
}
|
|
694
|
-
],
|
|
695
|
-
options: {
|
|
696
|
-
outputReferences: (token, options) => {
|
|
697
|
-
const include = pathStartsWithOneOf(["border-radius"], token);
|
|
698
|
-
const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
|
|
699
|
-
return (include || isWantedSize) && outputReferencesFilter2(token, options);
|
|
700
|
-
}
|
|
701
|
-
}
|
|
702
|
-
}
|
|
703
|
-
}
|
|
704
|
-
};
|
|
705
|
-
};
|
|
706
|
-
|
|
707
650
|
// src/tokens/process/configs/typography.ts
|
|
708
651
|
import { expandTypesMap } from "@tokens-studio/sd-transforms";
|
|
709
652
|
var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
@@ -730,6 +673,7 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
730
673
|
sizeRem.name,
|
|
731
674
|
"ts/size/lineheight",
|
|
732
675
|
"ts/typography/fontWeight",
|
|
676
|
+
"ts/size/css/letterspacing",
|
|
733
677
|
typographyName.name
|
|
734
678
|
],
|
|
735
679
|
files: [
|
|
@@ -757,7 +701,6 @@ StyleDictionary.registerTransform(sizeRem);
|
|
|
757
701
|
StyleDictionary.registerTransform(typographyName);
|
|
758
702
|
StyleDictionary.registerTransform(resolveMath);
|
|
759
703
|
StyleDictionary.registerTransform(unitless);
|
|
760
|
-
StyleDictionary.registerFormat(jsTokens);
|
|
761
704
|
for (const format of Object.values(formats)) {
|
|
762
705
|
StyleDictionary.registerFormat(format);
|
|
763
706
|
}
|
|
@@ -771,12 +714,15 @@ var configs = {
|
|
|
771
714
|
warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
|
|
772
715
|
infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
|
|
773
716
|
typographyVariables,
|
|
774
|
-
semanticVariables
|
|
775
|
-
typescriptTokens
|
|
717
|
+
semanticVariables
|
|
776
718
|
};
|
|
777
719
|
|
|
778
720
|
// src/tokens/process/platform.ts
|
|
779
|
-
var buildOptions
|
|
721
|
+
var buildOptions = {
|
|
722
|
+
verbose: false,
|
|
723
|
+
processed$themes: [],
|
|
724
|
+
buildTokenFormats: {}
|
|
725
|
+
};
|
|
780
726
|
var sd = new StyleDictionary2();
|
|
781
727
|
var buildConfigs = {
|
|
782
728
|
typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
|
|
@@ -809,13 +755,6 @@ var buildConfigs = {
|
|
|
809
755
|
log: ({ permutation: { theme } }) => `${theme} - info`
|
|
810
756
|
},
|
|
811
757
|
semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
|
|
812
|
-
// storefront: {
|
|
813
|
-
// name: 'Storefront preview tokens',
|
|
814
|
-
// getConfig: configs.typescriptTokens,
|
|
815
|
-
// dimensions: ['color-scheme'],
|
|
816
|
-
// options: { outPath: path.resolve('../../apps/storefront/tokens') },
|
|
817
|
-
// enabled: () => buildOptions?.preview ?? false,
|
|
818
|
-
// },
|
|
819
758
|
};
|
|
820
759
|
|
|
821
760
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
@@ -824,7 +763,7 @@ var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
|
824
763
|
const grouped$themes = groupThemes(processed$themes);
|
|
825
764
|
const permutations = permutateThemes(grouped$themes);
|
|
826
765
|
const ALL_DEPENDENT_ON = ["theme"];
|
|
827
|
-
const keys2 =
|
|
766
|
+
const keys2 = R10.keys(grouped$themes);
|
|
828
767
|
const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
829
768
|
if (verboseLogging) {
|
|
830
769
|
console.log(chalk2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
@@ -864,7 +803,7 @@ function groupThemes(themes) {
|
|
|
864
803
|
}
|
|
865
804
|
return groups;
|
|
866
805
|
}
|
|
867
|
-
var hasUnknownProps =
|
|
806
|
+
var hasUnknownProps = R10.pipe(R10.values, R10.none(R10.equals("unknown")), R10.not);
|
|
868
807
|
function permutateThemes(groups) {
|
|
869
808
|
const separator = "_";
|
|
870
809
|
const permutations = cartesian(Object.values(groups));
|
|
@@ -874,8 +813,8 @@ function permutateThemes(groups) {
|
|
|
874
813
|
const { group, name, selectedTokenSets } = theme;
|
|
875
814
|
let updatedPermutation = acc.permutation;
|
|
876
815
|
if (group) {
|
|
877
|
-
const groupProp =
|
|
878
|
-
updatedPermutation =
|
|
816
|
+
const groupProp = R10.lensProp(group);
|
|
817
|
+
updatedPermutation = R10.set(groupProp, name, updatedPermutation);
|
|
879
818
|
}
|
|
880
819
|
const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
|
|
881
820
|
const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "CLI for Designsystemet",
|
|
5
5
|
"author": "Designsystemet team",
|
|
6
6
|
"engines": {
|
|
7
|
-
"node": ">=22.
|
|
7
|
+
"node": ">=22.17.0"
|
|
8
8
|
},
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"object-hash": "^3.0.0",
|
|
48
48
|
"postcss": "^8.5.6",
|
|
49
49
|
"ramda": "^0.31.3",
|
|
50
|
-
"style-dictionary": "^5.0.
|
|
51
|
-
"zod": "^3.25.
|
|
50
|
+
"style-dictionary": "^5.0.1",
|
|
51
|
+
"zod": "^3.25.74",
|
|
52
52
|
"zod-validation-error": "^3.5.2"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
@@ -56,8 +56,7 @@
|
|
|
56
56
|
"@types/apca-w3": "^0.1.3",
|
|
57
57
|
"@types/chroma-js": "^3.1.1",
|
|
58
58
|
"@types/fs-extra": "^11.0.4",
|
|
59
|
-
"@types/
|
|
60
|
-
"@types/node": "^22.15.32",
|
|
59
|
+
"@types/node": "^22.16.0",
|
|
61
60
|
"@types/object-hash": "^3.0.6",
|
|
62
61
|
"@types/ramda": "^0.30.2",
|
|
63
62
|
"fs-extra": "^11.3.0",
|
|
@@ -86,6 +85,7 @@
|
|
|
86
85
|
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
87
86
|
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
88
87
|
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
88
|
+
"update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
|
|
89
89
|
"update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
|
|
90
90
|
"verify": "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
91
91
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"storefront.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/storefront.ts"],"names":[],"mappings":"AAMA,OAAO,EAAkC,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpG,eAAO,MAAM,gBAAgB,EAAE,wBAqC9B,CAAC"}
|
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
// src/tokens/process/configs/storefront.ts
|
|
2
|
-
import * as R5 from "ramda";
|
|
3
|
-
import { outputReferencesFilter } from "style-dictionary/utils";
|
|
4
|
-
|
|
5
|
-
// src/tokens/utils.ts
|
|
6
|
-
import * as R from "ramda";
|
|
7
|
-
|
|
8
|
-
// src/tokens/types.ts
|
|
9
|
-
var colorCategories = {
|
|
10
|
-
main: "main",
|
|
11
|
-
support: "support"
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
// src/tokens/utils.ts
|
|
15
|
-
var mapToLowerCase = R.map(R.toLower);
|
|
16
|
-
var hasAnyTruth = R.any(R.equals(true));
|
|
17
|
-
var getType = (token) => (token.$type ?? token.type) || "";
|
|
18
|
-
var getValue = (token) => token.$value ?? token.value;
|
|
19
|
-
var typeEquals = R.curry(
|
|
20
|
-
(types, token) => {
|
|
21
|
-
if (R.isNil(token)) {
|
|
22
|
-
return false;
|
|
23
|
-
}
|
|
24
|
-
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
var pathStartsWithOneOf = R.curry(
|
|
28
|
-
(paths, token) => {
|
|
29
|
-
if (R.isNil(token)) {
|
|
30
|
-
return false;
|
|
31
|
-
}
|
|
32
|
-
const tokenPath = mapToLowerCase(token.path);
|
|
33
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
34
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
function isColorCategoryToken(token, category) {
|
|
38
|
-
if (!category) {
|
|
39
|
-
return Object.keys(colorCategories).some(
|
|
40
|
-
(colorCategory) => isColorCategoryToken(token, colorCategory)
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
return R.startsWith(["color", category], token.path);
|
|
44
|
-
}
|
|
45
|
-
var isDigit = (s) => /^\d+$/.test(s);
|
|
46
|
-
function inlineTokens(shouldInline, tokens) {
|
|
47
|
-
const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
|
|
48
|
-
return otherTokens.map((token) => {
|
|
49
|
-
let transformed = getValue(token.original);
|
|
50
|
-
for (const ref of inlineableTokens) {
|
|
51
|
-
const refName = ref.path.join(".");
|
|
52
|
-
if (typeof transformed === "string") {
|
|
53
|
-
transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
|
|
57
|
-
return tokenWithInlinedRefs;
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// src/tokens/process/formats/js-tokens.ts
|
|
62
|
-
import * as R3 from "ramda";
|
|
63
|
-
import { createPropertyFormatter as createPropertyFormatter2, fileHeader } from "style-dictionary/utils";
|
|
64
|
-
|
|
65
|
-
// src/tokens/process/formats/css/semantic.ts
|
|
66
|
-
import * as R2 from "ramda";
|
|
67
|
-
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
68
|
-
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
69
|
-
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
70
|
-
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
71
|
-
var isInlineTokens = R2.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
72
|
-
var overrideSizingFormula = (format, token) => {
|
|
73
|
-
const [name, value] = format(token).split(":");
|
|
74
|
-
const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
|
|
75
|
-
const round = `round(down, ${calc}, 1px)`;
|
|
76
|
-
return {
|
|
77
|
-
name,
|
|
78
|
-
round,
|
|
79
|
-
calc
|
|
80
|
-
};
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
// src/tokens/process/formats/js-tokens.ts
|
|
84
|
-
var groupByType = R3.groupBy((token) => getType(token));
|
|
85
|
-
var removeUnwatedTokens = R3.pipe(
|
|
86
|
-
R3.reject((token) => isColorCategoryToken(token)),
|
|
87
|
-
R3.reject((token) => R3.any((path) => path.startsWith("_"))(token.path))
|
|
88
|
-
);
|
|
89
|
-
var dissocExtensions = R3.pipe(R3.dissoc("$extensions"), R3.dissocPath(["original", "$extensions"]));
|
|
90
|
-
var removeUnwatedProps = R3.map((token) => dissocExtensions(token));
|
|
91
|
-
var toCssVarName = R3.pipe(R3.split(":"), R3.head, R3.trim);
|
|
92
|
-
var jsTokens = {
|
|
93
|
-
name: "ds/js-tokens",
|
|
94
|
-
format: async ({ dictionary, file, options }) => {
|
|
95
|
-
const { usesDtcg, outputReferences } = options;
|
|
96
|
-
const format = createPropertyFormatter2({
|
|
97
|
-
outputReferences,
|
|
98
|
-
dictionary,
|
|
99
|
-
format: "css",
|
|
100
|
-
usesDtcg
|
|
101
|
-
});
|
|
102
|
-
const formatTokens = R3.map((token) => {
|
|
103
|
-
if (pathStartsWithOneOf(["size", "_size"], token)) {
|
|
104
|
-
const { calc, name } = overrideSizingFormula(format, token);
|
|
105
|
-
return {
|
|
106
|
-
...token,
|
|
107
|
-
name: name.trim(),
|
|
108
|
-
$value: calc.trim()
|
|
109
|
-
};
|
|
110
|
-
}
|
|
111
|
-
return {
|
|
112
|
-
...token,
|
|
113
|
-
name: toCssVarName(format(token))
|
|
114
|
-
};
|
|
115
|
-
});
|
|
116
|
-
const processTokens = R3.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
|
|
117
|
-
const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
|
|
118
|
-
const content = Object.entries(tokens).map(
|
|
119
|
-
([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
|
|
120
|
-
`
|
|
121
|
-
).join("\n");
|
|
122
|
-
return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
// src/tokens/process/transformers.ts
|
|
127
|
-
import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
|
|
128
|
-
import * as R4 from "ramda";
|
|
129
|
-
var isPx = R4.test(/\b\d+px\b/g);
|
|
130
|
-
var sizeRem = {
|
|
131
|
-
name: "ds/size/toRem",
|
|
132
|
-
type: "value",
|
|
133
|
-
transitive: true,
|
|
134
|
-
filter: (token) => {
|
|
135
|
-
const hasWantedType = typeEquals(["dimension", "fontsize"], token);
|
|
136
|
-
const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
|
|
137
|
-
return hasWantedType && hasWantedPath;
|
|
138
|
-
},
|
|
139
|
-
transform: (token, config) => {
|
|
140
|
-
const value = getValue(token);
|
|
141
|
-
if (isPx(value)) {
|
|
142
|
-
const baseFont = config.basePxFontSize || 16;
|
|
143
|
-
const size = parseInt(value);
|
|
144
|
-
if (size === 0) {
|
|
145
|
-
return "0";
|
|
146
|
-
}
|
|
147
|
-
return `${size / baseFont}rem`;
|
|
148
|
-
}
|
|
149
|
-
return value;
|
|
150
|
-
}
|
|
151
|
-
};
|
|
152
|
-
var typographyName = {
|
|
153
|
-
name: "name/typography",
|
|
154
|
-
type: "name",
|
|
155
|
-
transitive: true,
|
|
156
|
-
// expanded tokens have different type so we match on path instead
|
|
157
|
-
filter: (token) => pathStartsWithOneOf(["typography"], token),
|
|
158
|
-
transform: (token) => {
|
|
159
|
-
return token.name.replace("-typography", "");
|
|
160
|
-
}
|
|
161
|
-
};
|
|
162
|
-
var resolveMath = {
|
|
163
|
-
name: "ds/resolveMath",
|
|
164
|
-
type: "value",
|
|
165
|
-
transitive: true,
|
|
166
|
-
filter: (token) => {
|
|
167
|
-
const isValidValue = ["string", "object"].includes(typeof getValue(token));
|
|
168
|
-
const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
|
|
169
|
-
return isValidValue && isTokenOfInterest;
|
|
170
|
-
},
|
|
171
|
-
transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
|
|
172
|
-
};
|
|
173
|
-
var unitless = {
|
|
174
|
-
name: "ds/unitless",
|
|
175
|
-
type: "value",
|
|
176
|
-
transitive: true,
|
|
177
|
-
filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
|
|
178
|
-
transform: (token) => parseInt(getValue(token))
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
// src/tokens/process/configs/shared.ts
|
|
182
|
-
var prefix = "ds";
|
|
183
|
-
var basePxFontSize = 16;
|
|
184
|
-
var dsTransformers = [
|
|
185
|
-
"name/kebab",
|
|
186
|
-
resolveMath.name,
|
|
187
|
-
"ts/size/px",
|
|
188
|
-
sizeRem.name,
|
|
189
|
-
unitless.name,
|
|
190
|
-
"ts/typography/fontWeight",
|
|
191
|
-
typographyName.name,
|
|
192
|
-
"ts/color/modifiers",
|
|
193
|
-
"ts/color/css/hexrgba",
|
|
194
|
-
"ts/size/lineheight",
|
|
195
|
-
"shadow/css/shorthand"
|
|
196
|
-
];
|
|
197
|
-
|
|
198
|
-
// src/tokens/process/configs/storefront.ts
|
|
199
|
-
var typescriptTokens = ({ "color-scheme": colorScheme, theme }) => {
|
|
200
|
-
return {
|
|
201
|
-
preprocessors: ["tokens-studio"],
|
|
202
|
-
platforms: {
|
|
203
|
-
ts: {
|
|
204
|
-
prefix,
|
|
205
|
-
basePxFontSize,
|
|
206
|
-
transforms: dsTransformers,
|
|
207
|
-
buildPath: `${theme}/`,
|
|
208
|
-
files: [
|
|
209
|
-
{
|
|
210
|
-
destination: `${colorScheme}.ts`,
|
|
211
|
-
format: jsTokens.name,
|
|
212
|
-
filter: (token) => {
|
|
213
|
-
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R5.includes("semantic", token.filePath))
|
|
214
|
-
return false;
|
|
215
|
-
const isSemanticColor = R5.includes("semantic", token.filePath) && typeEquals(["color"], token);
|
|
216
|
-
const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
|
|
217
|
-
return isSemanticColor || wantedTypes;
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
],
|
|
221
|
-
options: {
|
|
222
|
-
outputReferences: (token, options) => {
|
|
223
|
-
const include = pathStartsWithOneOf(["border-radius"], token);
|
|
224
|
-
const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
|
|
225
|
-
return (include || isWantedSize) && outputReferencesFilter(token, options);
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
};
|
|
231
|
-
};
|
|
232
|
-
export {
|
|
233
|
-
typescriptTokens
|
|
234
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|