@digdir/designsystemet 1.4.0 → 1.5.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/dist/bin/designsystemet.js +485 -163
- package/dist/global-Y35YADVH.json +100 -0
- package/dist/src/index.js +524 -200
- package/dist/src/scripts/update-preview-tokens.js +429 -118
- package/dist/src/tokens/build.js +426 -108
- package/dist/src/tokens/create/defaults.js +27 -23
- package/dist/src/tokens/create/generators/$designsystemet.js +3 -3
- package/dist/src/tokens/create/write.js +3 -3
- package/dist/src/tokens/create.js +27 -23
- package/dist/src/tokens/format.js +524 -200
- package/dist/src/tokens/index.js +524 -200
- package/dist/src/tokens/process/configs/color.js +366 -66
- package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/semantic.js +368 -68
- package/dist/src/tokens/process/configs/shared.js +9 -2
- package/dist/src/tokens/process/configs/size-mode.d.ts +3 -0
- package/dist/src/tokens/process/configs/size-mode.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/size-mode.js +1067 -0
- package/dist/src/tokens/process/configs/size.d.ts +3 -0
- package/dist/src/tokens/process/configs/size.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/size.js +1069 -0
- package/dist/src/tokens/process/configs/type-scale.d.ts +3 -0
- package/dist/src/tokens/process/configs/type-scale.d.ts.map +1 -0
- package/dist/src/tokens/process/configs/type-scale.js +1067 -0
- package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/typography.js +364 -64
- package/dist/src/tokens/process/configs.d.ts +3 -0
- package/dist/src/tokens/process/configs.d.ts.map +1 -1
- package/dist/src/tokens/process/configs.js +373 -71
- package/dist/src/tokens/process/formats/css/color.js +381 -79
- package/dist/src/tokens/process/formats/css/semantic.d.ts +0 -14
- package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/semantic.js +407 -109
- package/dist/src/tokens/process/formats/css/size-mode.d.ts +4 -0
- package/dist/src/tokens/process/formats/css/size-mode.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/size-mode.js +1068 -0
- package/dist/src/tokens/process/formats/css/size.d.ts +17 -0
- package/dist/src/tokens/process/formats/css/size.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/size.js +1069 -0
- package/dist/src/tokens/process/formats/css/type-scale.d.ts +3 -0
- package/dist/src/tokens/process/formats/css/type-scale.d.ts.map +1 -0
- package/dist/src/tokens/process/formats/css/type-scale.js +1069 -0
- package/dist/src/tokens/process/formats/css/typography.js +365 -63
- package/dist/src/tokens/process/formats/css.d.ts +3 -0
- package/dist/src/tokens/process/formats/css.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css.js +364 -64
- package/dist/src/tokens/process/output/declarations.js +373 -71
- package/dist/src/tokens/process/output/theme.d.ts.map +1 -1
- package/dist/src/tokens/process/output/theme.js +60 -11
- package/dist/src/tokens/process/platform.d.ts +16 -0
- package/dist/src/tokens/process/platform.d.ts.map +1 -1
- package/dist/src/tokens/process/platform.js +402 -95
- package/dist/src/tokens/process/transformers.js +9 -2
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +373 -71
- package/dist/src/tokens/template/design-tokens/primitives/modes/size/global.js +1 -1
- package/dist/src/tokens/utils.d.ts +4 -1
- package/dist/src/tokens/utils.d.ts.map +1 -1
- package/dist/src/tokens/utils.js +24 -1
- package/package.json +3 -3
- package/dist/global-XVXVBKM6.json +0 -96
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/tokens/process/configs.ts
|
|
2
2
|
import { register } from "@tokens-studio/sd-transforms";
|
|
3
|
-
import * as
|
|
3
|
+
import * as R15 from "ramda";
|
|
4
4
|
import StyleDictionary2 from "style-dictionary";
|
|
5
5
|
|
|
6
6
|
// src/tokens/utils.ts
|
|
@@ -31,7 +31,10 @@ var pathStartsWithOneOf = R.curry(
|
|
|
31
31
|
return false;
|
|
32
32
|
}
|
|
33
33
|
const tokenPath = mapToLowerCase(token.path);
|
|
34
|
-
const matchPathsStartingWith = R.map((
|
|
34
|
+
const matchPathsStartingWith = R.map((pathOrString) => {
|
|
35
|
+
const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
|
|
36
|
+
return R.startsWith(mapToLowerCase(path), tokenPath);
|
|
37
|
+
}, paths);
|
|
35
38
|
return hasAnyTruth(matchPathsStartingWith);
|
|
36
39
|
}
|
|
37
40
|
);
|
|
@@ -55,11 +58,11 @@ function isColorCategoryToken(token, category) {
|
|
|
55
58
|
var isDigit = (s) => /^\d+$/.test(s);
|
|
56
59
|
function traverseObj(obj, fn) {
|
|
57
60
|
for (const key in obj) {
|
|
58
|
-
const
|
|
59
|
-
if (
|
|
60
|
-
fn.apply(null, [obj, key,
|
|
61
|
-
if (typeof
|
|
62
|
-
traverseObj(
|
|
61
|
+
const prop4 = obj[key];
|
|
62
|
+
if (prop4 != null) {
|
|
63
|
+
fn.apply(null, [obj, key, prop4]);
|
|
64
|
+
if (typeof prop4 === "object") {
|
|
65
|
+
traverseObj(prop4, fn);
|
|
63
66
|
}
|
|
64
67
|
}
|
|
65
68
|
}
|
|
@@ -79,9 +82,26 @@ function inlineTokens(shouldInline, tokens) {
|
|
|
79
82
|
return tokenWithInlinedRefs;
|
|
80
83
|
});
|
|
81
84
|
}
|
|
85
|
+
var sizeMap = {
|
|
86
|
+
xsmall: "xs",
|
|
87
|
+
small: "sm",
|
|
88
|
+
medium: "md",
|
|
89
|
+
large: "lg",
|
|
90
|
+
xlarge: "xl"
|
|
91
|
+
};
|
|
92
|
+
function shortSizeName(size2) {
|
|
93
|
+
return sizeMap[size2] ?? size2;
|
|
94
|
+
}
|
|
95
|
+
var sizeComparator = (size2) => {
|
|
96
|
+
const sortIndex = Object.entries(sizeMap).findIndex(([key, val]) => key === size2 || val === size2);
|
|
97
|
+
return sortIndex ?? 0;
|
|
98
|
+
};
|
|
99
|
+
function orderBySize(sizes) {
|
|
100
|
+
return R.sortBy(sizeComparator, sizes);
|
|
101
|
+
}
|
|
82
102
|
|
|
83
103
|
// src/tokens/process/configs/color.ts
|
|
84
|
-
import * as
|
|
104
|
+
import * as R11 from "ramda";
|
|
85
105
|
|
|
86
106
|
// src/tokens/process/formats/css/color.ts
|
|
87
107
|
import * as R4 from "ramda";
|
|
@@ -357,6 +377,9 @@ var buildOptions = {
|
|
|
357
377
|
var sd = new StyleDictionary();
|
|
358
378
|
var buildConfigs = {
|
|
359
379
|
typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
|
|
380
|
+
sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ["size"] },
|
|
381
|
+
size: { getConfig: configs.sizeVariables, dimensions: ["semantic"] },
|
|
382
|
+
typeScale: { getConfig: configs.typeScaleVariables, dimensions: ["semantic"] },
|
|
360
383
|
"color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
|
|
361
384
|
"main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
|
|
362
385
|
"support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
|
|
@@ -442,10 +465,10 @@ ${selector} ${content} ${autoSelectorContent}
|
|
|
442
465
|
};
|
|
443
466
|
var colorCategory = {
|
|
444
467
|
name: "ds/css-colorcategory",
|
|
445
|
-
format: async ({ dictionary, options, platform }) => {
|
|
468
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
446
469
|
const { outputReferences, usesDtcg } = options;
|
|
447
|
-
const { selector, layer
|
|
448
|
-
const destination =
|
|
470
|
+
const { selector, layer } = platform;
|
|
471
|
+
const destination = file.destination;
|
|
449
472
|
const format = R4.compose(
|
|
450
473
|
createPropertyFormatter({
|
|
451
474
|
outputReferences,
|
|
@@ -482,6 +505,10 @@ ${selector} ${content}
|
|
|
482
505
|
};
|
|
483
506
|
|
|
484
507
|
// src/tokens/process/formats/css/semantic.ts
|
|
508
|
+
import * as R6 from "ramda";
|
|
509
|
+
import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
|
|
510
|
+
|
|
511
|
+
// src/tokens/process/formats/css/size.ts
|
|
485
512
|
import * as R5 from "ramda";
|
|
486
513
|
import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
|
|
487
514
|
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
@@ -489,12 +516,20 @@ var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.pa
|
|
|
489
516
|
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
490
517
|
var isInlineTokens = R5.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
491
518
|
var overrideSizingFormula = (format, token) => {
|
|
492
|
-
const [name, value] = format(token).split(":");
|
|
493
|
-
|
|
494
|
-
|
|
519
|
+
const [name, value] = format(token).replace(/;$/, "").split(": ");
|
|
520
|
+
let calc;
|
|
521
|
+
let round;
|
|
522
|
+
if (token.path[1] === "unit") {
|
|
523
|
+
calc = `calc(1rem * ${value})`;
|
|
524
|
+
} else if (value.startsWith("floor")) {
|
|
525
|
+
calc = value.replace(/^floor\((.*)\)$/, "calc($1)");
|
|
526
|
+
round = `round(down, ${calc}, 1px)`;
|
|
527
|
+
} else {
|
|
528
|
+
calc = value.includes("*") ? `calc(${value})` : value;
|
|
529
|
+
}
|
|
495
530
|
return {
|
|
496
531
|
name,
|
|
497
|
-
round,
|
|
532
|
+
round: round ?? calc,
|
|
498
533
|
calc
|
|
499
534
|
};
|
|
500
535
|
};
|
|
@@ -510,18 +545,21 @@ var formatSizingTokens = (format, tokens) => R5.reduce(
|
|
|
510
545
|
{ tokens: [], round: [], calc: [] },
|
|
511
546
|
tokens
|
|
512
547
|
);
|
|
513
|
-
var sizingTemplate = ({ round, calc }) =>
|
|
548
|
+
var sizingTemplate = ({ round, calc }) => {
|
|
549
|
+
const usesRounding = round.filter((val, i) => val !== calc[i]);
|
|
550
|
+
return `
|
|
514
551
|
${calc.join("\n")}
|
|
515
552
|
|
|
516
553
|
@supports (width: round(down, .1em, 1px)) {
|
|
517
|
-
${
|
|
554
|
+
${usesRounding.join("\n ")}
|
|
518
555
|
}`;
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
556
|
+
};
|
|
557
|
+
var size = {
|
|
558
|
+
name: "ds/css-size",
|
|
559
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
522
560
|
const { outputReferences, usesDtcg } = options;
|
|
523
|
-
const { selector, layer
|
|
524
|
-
const destination =
|
|
561
|
+
const { selector, layer } = platform;
|
|
562
|
+
const destination = file.destination;
|
|
525
563
|
const format = createPropertyFormatter2({
|
|
526
564
|
outputReferences,
|
|
527
565
|
dictionary,
|
|
@@ -529,9 +567,9 @@ var semantic = {
|
|
|
529
567
|
usesDtcg
|
|
530
568
|
});
|
|
531
569
|
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
532
|
-
const filteredTokens = R5.reject((token) =>
|
|
570
|
+
const filteredTokens = R5.reject((token) => R5.equals(["_size", "mode-font-size"], token.path), tokens);
|
|
533
571
|
const [sizingTokens, restTokens] = R5.partition(
|
|
534
|
-
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
572
|
+
(t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"),
|
|
535
573
|
filteredTokens
|
|
536
574
|
);
|
|
537
575
|
const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
|
|
@@ -544,64 +582,56 @@ var semantic = {
|
|
|
544
582
|
formatted: t
|
|
545
583
|
}));
|
|
546
584
|
buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
|
|
547
|
-
const
|
|
548
|
-
const
|
|
549
|
-
const content = `{
|
|
585
|
+
const formattedTokens = [formattedMap.map(R5.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
|
|
586
|
+
const content = `${selector} {
|
|
550
587
|
${formattedTokens.join("\n")}
|
|
551
588
|
}
|
|
552
589
|
`;
|
|
553
590
|
const body = R5.isNotNil(layer) ? `@layer ${layer} {
|
|
554
|
-
${
|
|
591
|
+
${content}
|
|
555
592
|
}
|
|
556
|
-
` : `${
|
|
593
|
+
` : `${content}
|
|
557
594
|
`;
|
|
558
595
|
return body;
|
|
559
596
|
}
|
|
560
597
|
};
|
|
561
598
|
|
|
562
|
-
// src/tokens/process/formats/css/
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
R6.pathSatisfies(R6.includes("typography"), ["path"]),
|
|
567
|
-
R6.pathSatisfies(R6.includes("fontFamily"), ["path"])
|
|
568
|
-
]);
|
|
569
|
-
var typography = {
|
|
570
|
-
name: "ds/css-typography",
|
|
571
|
-
format: async ({ dictionary, options, platform }) => {
|
|
599
|
+
// src/tokens/process/formats/css/semantic.ts
|
|
600
|
+
var semantic = {
|
|
601
|
+
name: "ds/css-semantic",
|
|
602
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
572
603
|
const { outputReferences, usesDtcg } = options;
|
|
573
|
-
const { selector, layer
|
|
574
|
-
const destination =
|
|
604
|
+
const { selector, layer } = platform;
|
|
605
|
+
const destination = file.destination;
|
|
575
606
|
const format = createPropertyFormatter3({
|
|
576
607
|
outputReferences,
|
|
577
608
|
dictionary,
|
|
578
609
|
format: "css",
|
|
579
610
|
usesDtcg
|
|
580
611
|
});
|
|
581
|
-
const
|
|
582
|
-
const formattedMap =
|
|
612
|
+
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
613
|
+
const formattedMap = tokens.map((token) => ({
|
|
583
614
|
token,
|
|
584
615
|
formatted: format(token)
|
|
585
616
|
}));
|
|
586
617
|
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
587
|
-
const formattedTokens = formattedMap.map(R6.
|
|
588
|
-
const content =
|
|
618
|
+
const formattedTokens = formattedMap.map(R6.prop("formatted")).join("\n");
|
|
619
|
+
const content = `${selector} {
|
|
589
620
|
${formattedTokens}
|
|
590
|
-
}
|
|
621
|
+
}
|
|
622
|
+
`;
|
|
591
623
|
const body = R6.isNotNil(layer) ? `@layer ${layer} {
|
|
592
624
|
${content}
|
|
593
|
-
}
|
|
625
|
+
}
|
|
626
|
+
` : `${content}
|
|
627
|
+
`;
|
|
594
628
|
return body;
|
|
595
629
|
}
|
|
596
630
|
};
|
|
597
631
|
|
|
598
|
-
// src/tokens/process/formats/css.ts
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
colorCategory,
|
|
602
|
-
semantic,
|
|
603
|
-
typography
|
|
604
|
-
};
|
|
632
|
+
// src/tokens/process/formats/css/size-mode.ts
|
|
633
|
+
import * as R8 from "ramda";
|
|
634
|
+
import { createPropertyFormatter as createPropertyFormatter4 } from "style-dictionary/utils";
|
|
605
635
|
|
|
606
636
|
// src/tokens/process/transformers.ts
|
|
607
637
|
import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
|
|
@@ -613,18 +643,22 @@ var sizeRem = {
|
|
|
613
643
|
transitive: true,
|
|
614
644
|
filter: (token) => {
|
|
615
645
|
const hasWantedType = typeEquals(["dimension", "fontsize"], token);
|
|
616
|
-
const hasWantedPath = pathStartsWithOneOf([
|
|
646
|
+
const hasWantedPath = pathStartsWithOneOf([
|
|
647
|
+
"border-radius",
|
|
648
|
+
"font-size"
|
|
649
|
+
/*, ['_size', 'mode-font-size']*/
|
|
650
|
+
], token);
|
|
617
651
|
return hasWantedType && hasWantedPath;
|
|
618
652
|
},
|
|
619
653
|
transform: (token, config) => {
|
|
620
654
|
const value = getValue(token);
|
|
621
655
|
if (isPx(value)) {
|
|
622
656
|
const baseFont = config.basePxFontSize || 16;
|
|
623
|
-
const
|
|
624
|
-
if (
|
|
657
|
+
const size2 = parseInt(value, 10);
|
|
658
|
+
if (size2 === 0) {
|
|
625
659
|
return "0";
|
|
626
660
|
}
|
|
627
|
-
return `${
|
|
661
|
+
return `${size2 / baseFont}rem`;
|
|
628
662
|
}
|
|
629
663
|
return value;
|
|
630
664
|
}
|
|
@@ -675,6 +709,154 @@ var dsTransformers = [
|
|
|
675
709
|
"shadow/css/shorthand"
|
|
676
710
|
];
|
|
677
711
|
|
|
712
|
+
// src/tokens/process/formats/css/size-mode.ts
|
|
713
|
+
var formatBaseSizeToken = (size2) => (token) => ({
|
|
714
|
+
...token,
|
|
715
|
+
originalName: token.name,
|
|
716
|
+
name: `${token.name}--${shortSizeName(size2)}`,
|
|
717
|
+
$value: token.$value / basePxFontSize
|
|
718
|
+
});
|
|
719
|
+
var sizeMode = {
|
|
720
|
+
name: "ds/css-size-mode",
|
|
721
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
722
|
+
const { outputReferences, usesDtcg } = options;
|
|
723
|
+
const { selector, layer, size: size2 } = platform;
|
|
724
|
+
const destination = file.destination;
|
|
725
|
+
const format = createPropertyFormatter4({
|
|
726
|
+
outputReferences,
|
|
727
|
+
dictionary,
|
|
728
|
+
format: "css",
|
|
729
|
+
usesDtcg
|
|
730
|
+
});
|
|
731
|
+
const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size2));
|
|
732
|
+
const sizeSpecificVariables = sizeSpecificTokens.map(format).join("\n");
|
|
733
|
+
const formattedMap = sizeSpecificTokens.map((token) => ({
|
|
734
|
+
token,
|
|
735
|
+
formatted: format({
|
|
736
|
+
...token,
|
|
737
|
+
// Remove the `--<size>` suffix for the token listing, since that is the only token we actually use
|
|
738
|
+
name: token.originalName
|
|
739
|
+
})
|
|
740
|
+
}));
|
|
741
|
+
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
742
|
+
const content = `${selector} /* ${size2} */ {
|
|
743
|
+
${sizeSpecificVariables}
|
|
744
|
+
}`;
|
|
745
|
+
const body = wrapInLayer(content, layer);
|
|
746
|
+
const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);
|
|
747
|
+
const defaultSize = shortSizeName(buildOptions?.defaultSize ?? "");
|
|
748
|
+
const sizingToggles = `:root, [data-size] {
|
|
749
|
+
--ds-size: var(--ds-size--${defaultSize});
|
|
750
|
+
${sizes.map((size3) => ` --ds-size--${size3}: var(--ds-size,);`).join("\n")}
|
|
751
|
+
--ds-size-mode-font-size:
|
|
752
|
+
${sizes.map((size3) => ` var(--ds-size--${size3}, var(--ds-size-mode-font-size--${size3}))`).join("\n")};
|
|
753
|
+
}`;
|
|
754
|
+
const sizingHelpers = sizes.map((size3) => `[data-size='${size3}'] { --ds-size: var(--ds-size--${size3}); }`).join("\n");
|
|
755
|
+
const sharedContent = `${sizingToggles}
|
|
756
|
+
|
|
757
|
+
${sizingHelpers}`;
|
|
758
|
+
const sharedBody = shortSizeName(size2) === R8.last(sizes) ? `
|
|
759
|
+
${wrapInLayer(sharedContent, layer)}` : "";
|
|
760
|
+
return body + sharedBody;
|
|
761
|
+
}
|
|
762
|
+
};
|
|
763
|
+
function wrapInLayer(content, layer) {
|
|
764
|
+
return R8.isNotNil(layer) ? `@layer ${layer} {
|
|
765
|
+
${content}
|
|
766
|
+
}
|
|
767
|
+
` : `${content}
|
|
768
|
+
`;
|
|
769
|
+
}
|
|
770
|
+
|
|
771
|
+
// src/tokens/process/formats/css/typography.ts
|
|
772
|
+
import * as R9 from "ramda";
|
|
773
|
+
import { createPropertyFormatter as createPropertyFormatter5 } from "style-dictionary/utils";
|
|
774
|
+
var typographyFontFamilyPredicate = R9.allPass([
|
|
775
|
+
R9.pathSatisfies(R9.includes("typography"), ["path"]),
|
|
776
|
+
R9.pathSatisfies(R9.includes("fontFamily"), ["path"])
|
|
777
|
+
]);
|
|
778
|
+
var typography = {
|
|
779
|
+
name: "ds/css-typography",
|
|
780
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
781
|
+
const { outputReferences, usesDtcg } = options;
|
|
782
|
+
const { selector, layer } = platform;
|
|
783
|
+
const destination = file.destination;
|
|
784
|
+
const format = createPropertyFormatter5({
|
|
785
|
+
outputReferences,
|
|
786
|
+
dictionary,
|
|
787
|
+
format: "css",
|
|
788
|
+
usesDtcg
|
|
789
|
+
});
|
|
790
|
+
const filteredTokens = R9.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
791
|
+
const formattedMap = filteredTokens.map((token) => ({
|
|
792
|
+
token,
|
|
793
|
+
formatted: format(token)
|
|
794
|
+
}));
|
|
795
|
+
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
796
|
+
const formattedTokens = formattedMap.map(R9.view(R9.lensProp("formatted"))).join("\n");
|
|
797
|
+
const content = selector ? `${selector} {
|
|
798
|
+
${formattedTokens}
|
|
799
|
+
}` : formattedTokens;
|
|
800
|
+
const body = R9.isNotNil(layer) ? `@layer ${layer} {
|
|
801
|
+
${content}
|
|
802
|
+
}` : content;
|
|
803
|
+
return body;
|
|
804
|
+
}
|
|
805
|
+
};
|
|
806
|
+
|
|
807
|
+
// src/tokens/process/formats/css/type-scale.ts
|
|
808
|
+
import * as R10 from "ramda";
|
|
809
|
+
import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
|
|
810
|
+
var typographyFontFamilyPredicate2 = R10.allPass([
|
|
811
|
+
R10.pathSatisfies(R10.includes("typography"), ["path"]),
|
|
812
|
+
R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
|
|
813
|
+
]);
|
|
814
|
+
function formatTypographySizeToken(token) {
|
|
815
|
+
return { ...token, $value: `calc(${token.$value} * var(--_ds-font-size-factor))` };
|
|
816
|
+
}
|
|
817
|
+
var typeScale = {
|
|
818
|
+
name: "ds/css-type-scale",
|
|
819
|
+
format: async ({ dictionary, file, options, platform }) => {
|
|
820
|
+
const { outputReferences, usesDtcg } = options;
|
|
821
|
+
const { selector, layer } = platform;
|
|
822
|
+
const destination = file.destination;
|
|
823
|
+
const format = createPropertyFormatter6({
|
|
824
|
+
outputReferences,
|
|
825
|
+
dictionary,
|
|
826
|
+
format: "css",
|
|
827
|
+
usesDtcg
|
|
828
|
+
});
|
|
829
|
+
const filteredTokens = R10.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
|
|
830
|
+
const tokens = R10.map(formatTypographySizeToken, filteredTokens);
|
|
831
|
+
const formattedMap = tokens.map((token) => ({
|
|
832
|
+
token,
|
|
833
|
+
formatted: format(token)
|
|
834
|
+
}));
|
|
835
|
+
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
836
|
+
const formattedTokens = formattedMap.map(R10.prop("formatted")).join("\n");
|
|
837
|
+
const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
|
|
838
|
+
const content = `${selector} {
|
|
839
|
+
${sizeFactor}
|
|
840
|
+
${formattedTokens}
|
|
841
|
+
}`;
|
|
842
|
+
const body = R10.isNotNil(layer) ? `@layer ${layer} {
|
|
843
|
+
${content}
|
|
844
|
+
}` : content;
|
|
845
|
+
return body;
|
|
846
|
+
}
|
|
847
|
+
};
|
|
848
|
+
|
|
849
|
+
// src/tokens/process/formats/css.ts
|
|
850
|
+
var formats = {
|
|
851
|
+
colorScheme,
|
|
852
|
+
colorCategory,
|
|
853
|
+
semantic,
|
|
854
|
+
sizeMode,
|
|
855
|
+
size,
|
|
856
|
+
typography,
|
|
857
|
+
typeScale
|
|
858
|
+
};
|
|
859
|
+
|
|
678
860
|
// src/tokens/process/configs/color.ts
|
|
679
861
|
var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
|
|
680
862
|
const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
|
|
@@ -696,7 +878,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
|
|
|
696
878
|
{
|
|
697
879
|
destination: `color-scheme/${colorScheme2}.css`,
|
|
698
880
|
format: formats.colorScheme.name,
|
|
699
|
-
filter: (token) => typeEquals("color", token) && !
|
|
881
|
+
filter: (token) => typeEquals("color", token) && !R11.startsWith(["global"], token.path)
|
|
700
882
|
}
|
|
701
883
|
],
|
|
702
884
|
options: {
|
|
@@ -747,7 +929,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
|
|
|
747
929
|
};
|
|
748
930
|
|
|
749
931
|
// src/tokens/process/configs/semantic.ts
|
|
750
|
-
import * as
|
|
932
|
+
import * as R12 from "ramda";
|
|
751
933
|
import { outputReferencesFilter } from "style-dictionary/utils";
|
|
752
934
|
var semanticVariables = ({ theme }) => {
|
|
753
935
|
const selector = `:root`;
|
|
@@ -770,9 +952,12 @@ var semanticVariables = ({ theme }) => {
|
|
|
770
952
|
destination: `semantic.css`,
|
|
771
953
|
format: formats.semantic.name,
|
|
772
954
|
filter: (token) => {
|
|
773
|
-
const isUwantedToken =
|
|
774
|
-
const isPrivateToken =
|
|
775
|
-
const unwantedPaths = pathStartsWithOneOf(
|
|
955
|
+
const isUwantedToken = R12.anyPass([R12.includes("primitives/global")])(token.filePath);
|
|
956
|
+
const isPrivateToken = R12.includes("_", token.path);
|
|
957
|
+
const unwantedPaths = pathStartsWithOneOf(
|
|
958
|
+
["size", "_size", "font-size", "line-height", "letter-spacing"],
|
|
959
|
+
token
|
|
960
|
+
);
|
|
776
961
|
const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
|
|
777
962
|
const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
|
|
778
963
|
return unwantedTokens;
|
|
@@ -782,9 +967,126 @@ var semanticVariables = ({ theme }) => {
|
|
|
782
967
|
options: {
|
|
783
968
|
outputReferences: (token, options) => {
|
|
784
969
|
const include = pathStartsWithOneOf(["border-radius"], token);
|
|
785
|
-
|
|
786
|
-
|
|
970
|
+
return include && outputReferencesFilter(token, options);
|
|
971
|
+
}
|
|
972
|
+
}
|
|
973
|
+
}
|
|
974
|
+
}
|
|
975
|
+
};
|
|
976
|
+
};
|
|
977
|
+
|
|
978
|
+
// src/tokens/process/configs/size.ts
|
|
979
|
+
import * as R13 from "ramda";
|
|
980
|
+
import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
|
|
981
|
+
var sizeVariables = ({ theme }) => {
|
|
982
|
+
const selector = `:root, [data-size]`;
|
|
983
|
+
const layer = `ds.theme.size`;
|
|
984
|
+
return {
|
|
985
|
+
preprocessors: ["tokens-studio"],
|
|
986
|
+
platforms: {
|
|
987
|
+
css: {
|
|
988
|
+
// custom
|
|
989
|
+
theme,
|
|
990
|
+
basePxFontSize,
|
|
991
|
+
selector,
|
|
992
|
+
layer,
|
|
993
|
+
//
|
|
994
|
+
prefix,
|
|
995
|
+
buildPath: `${theme}/`,
|
|
996
|
+
transforms: dsTransformers,
|
|
997
|
+
files: [
|
|
998
|
+
{
|
|
999
|
+
destination: `size.css`,
|
|
1000
|
+
format: formats.size.name,
|
|
1001
|
+
filter: (token) => {
|
|
1002
|
+
const isUwantedToken = R13.anyPass([R13.includes("primitives/global")])(token.filePath);
|
|
1003
|
+
const isPrivateToken = R13.includes("_", token.path);
|
|
1004
|
+
return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
],
|
|
1008
|
+
options: {
|
|
1009
|
+
outputReferences: (token, options) => {
|
|
1010
|
+
const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && (isDigit(token.path[1]) || token.path[1] === "unit");
|
|
1011
|
+
return isWantedSize && outputReferencesFilter2(token, options);
|
|
1012
|
+
}
|
|
1013
|
+
}
|
|
1014
|
+
}
|
|
1015
|
+
}
|
|
1016
|
+
};
|
|
1017
|
+
};
|
|
1018
|
+
|
|
1019
|
+
// src/tokens/process/configs/size-mode.ts
|
|
1020
|
+
import * as R14 from "ramda";
|
|
1021
|
+
var sizeModeVariables = ({ theme, size: size2 }) => {
|
|
1022
|
+
const selector = `:root`;
|
|
1023
|
+
const layer = `ds.theme.size-mode`;
|
|
1024
|
+
return {
|
|
1025
|
+
preprocessors: ["tokens-studio"],
|
|
1026
|
+
platforms: {
|
|
1027
|
+
css: {
|
|
1028
|
+
// custom
|
|
1029
|
+
size: size2,
|
|
1030
|
+
theme,
|
|
1031
|
+
basePxFontSize,
|
|
1032
|
+
selector,
|
|
1033
|
+
layer,
|
|
1034
|
+
//
|
|
1035
|
+
prefix,
|
|
1036
|
+
buildPath: `${theme}/`,
|
|
1037
|
+
transforms: dsTransformers,
|
|
1038
|
+
files: [
|
|
1039
|
+
{
|
|
1040
|
+
destination: `size-mode/${size2}.css`,
|
|
1041
|
+
format: formats.sizeMode.name,
|
|
1042
|
+
filter: (token) => {
|
|
1043
|
+
return R14.equals(["_size", "mode-font-size"], token.path);
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
]
|
|
1047
|
+
}
|
|
1048
|
+
}
|
|
1049
|
+
};
|
|
1050
|
+
};
|
|
1051
|
+
|
|
1052
|
+
// src/tokens/process/configs/type-scale.ts
|
|
1053
|
+
var typeScaleVariables = ({ theme }) => {
|
|
1054
|
+
const selector = ":root, [data-size]";
|
|
1055
|
+
const layer = `ds.theme.type-scale`;
|
|
1056
|
+
return {
|
|
1057
|
+
usesDtcg: true,
|
|
1058
|
+
preprocessors: ["tokens-studio"],
|
|
1059
|
+
expand: {
|
|
1060
|
+
include: ["typography"]
|
|
1061
|
+
},
|
|
1062
|
+
platforms: {
|
|
1063
|
+
css: {
|
|
1064
|
+
prefix,
|
|
1065
|
+
selector,
|
|
1066
|
+
layer,
|
|
1067
|
+
buildPath: `${theme}/`,
|
|
1068
|
+
basePxFontSize,
|
|
1069
|
+
transforms: [
|
|
1070
|
+
"name/kebab",
|
|
1071
|
+
"ts/size/px",
|
|
1072
|
+
sizeRem.name,
|
|
1073
|
+
"ts/size/lineheight",
|
|
1074
|
+
"ts/typography/fontWeight",
|
|
1075
|
+
typographyName.name
|
|
1076
|
+
],
|
|
1077
|
+
files: [
|
|
1078
|
+
{
|
|
1079
|
+
destination: `type-scale.css`,
|
|
1080
|
+
format: formats.typeScale.name,
|
|
1081
|
+
filter: (token) => {
|
|
1082
|
+
const included = typeEquals(["typography", "dimension", "fontsize"], token);
|
|
1083
|
+
if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
|
|
1084
|
+
return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "border-width", "border-radius"], token) && (pathStartsWithOneOf(["font-size"], token) || token.path.includes("fontSize"));
|
|
1085
|
+
}
|
|
787
1086
|
}
|
|
1087
|
+
],
|
|
1088
|
+
options: {
|
|
1089
|
+
outputReferences: (token) => pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize")
|
|
788
1090
|
}
|
|
789
1091
|
}
|
|
790
1092
|
}
|
|
@@ -825,12 +1127,9 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
825
1127
|
destination: `typography/${typography2}.css`,
|
|
826
1128
|
format: formats.typography.name,
|
|
827
1129
|
filter: (token) => {
|
|
828
|
-
const included = typeEquals(
|
|
829
|
-
["typography", "fontweight", "fontFamily", "lineHeight", "dimension", "font", "fontsize"],
|
|
830
|
-
token
|
|
831
|
-
);
|
|
1130
|
+
const included = typeEquals(["fontweight", "fontFamily", "lineHeight", "dimension"], token);
|
|
832
1131
|
if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
|
|
833
|
-
return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token);
|
|
1132
|
+
return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token) && !(pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize"));
|
|
834
1133
|
}
|
|
835
1134
|
}
|
|
836
1135
|
]
|
|
@@ -857,7 +1156,10 @@ var configs = {
|
|
|
857
1156
|
dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
|
|
858
1157
|
warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
|
|
859
1158
|
infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
|
|
1159
|
+
sizeModeVariables,
|
|
1160
|
+
sizeVariables,
|
|
860
1161
|
typographyVariables,
|
|
1162
|
+
typeScaleVariables,
|
|
861
1163
|
semanticVariables
|
|
862
1164
|
};
|
|
863
1165
|
var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
|
|
@@ -874,7 +1176,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
|
|
|
874
1176
|
obj.filePath = tokenSet;
|
|
875
1177
|
}
|
|
876
1178
|
});
|
|
877
|
-
tokenSource.tokens =
|
|
1179
|
+
tokenSource.tokens = R15.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
|
|
878
1180
|
}
|
|
879
1181
|
}
|
|
880
1182
|
} else {
|