@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.
Files changed (186) hide show
  1. package/dist/bin/designsystemet.js +4264 -45
  2. package/dist/bin/options.js +5 -4
  3. package/dist/src/colors/colorMetadata.js +5 -4
  4. package/dist/src/colors/index.js +470 -4
  5. package/dist/src/colors/theme.js +286 -20
  6. package/dist/src/colors/utils.js +16 -15
  7. package/dist/{bin → src}/config.d.ts +46 -1
  8. package/dist/src/config.d.ts.map +1 -0
  9. package/dist/src/config.js +377 -0
  10. package/dist/src/index.js +3666 -2
  11. package/dist/src/migrations/beta-to-v1.js +85 -4
  12. package/dist/src/migrations/codemods/css/plugins.js +5 -4
  13. package/dist/src/migrations/codemods/css/run.d.ts.map +1 -1
  14. package/dist/src/migrations/codemods/css/run.js +18 -4
  15. package/dist/src/migrations/color-rename-next49.js +77 -6
  16. package/dist/src/migrations/index.d.ts +0 -1
  17. package/dist/src/migrations/index.d.ts.map +1 -1
  18. package/dist/src/migrations/index.js +461 -6
  19. package/dist/src/scripts/createJsonSchema.js +1608 -4
  20. package/dist/src/scripts/update-design-tokens.d.ts +2 -0
  21. package/dist/src/scripts/update-design-tokens.d.ts.map +1 -0
  22. package/dist/src/scripts/update-design-tokens.js +36 -0
  23. package/dist/src/{tokens/template.d.ts → scripts/update-template.d.ts} +1 -1
  24. package/dist/src/scripts/update-template.d.ts.map +1 -0
  25. package/dist/src/scripts/update-template.js +1200 -0
  26. package/dist/src/tokens/build.d.ts +2 -19
  27. package/dist/src/tokens/build.d.ts.map +1 -1
  28. package/dist/src/tokens/build.js +1511 -70
  29. package/dist/src/tokens/create/defaults.d.ts +7 -0
  30. package/dist/src/tokens/create/defaults.d.ts.map +1 -0
  31. package/dist/src/tokens/create/defaults.js +994 -0
  32. package/dist/src/tokens/create/generators/$designsystemet.d.ts +5 -0
  33. package/dist/src/tokens/create/generators/$designsystemet.d.ts.map +1 -0
  34. package/dist/src/tokens/create/generators/$designsystemet.js +100 -0
  35. package/dist/src/tokens/create/generators/$metadata.d.ts +8 -0
  36. package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -0
  37. package/dist/src/tokens/{write/generate$metadata.js → create/generators/$metadata.js} +3 -2
  38. package/dist/src/tokens/create/generators/$themes.d.ts +12 -0
  39. package/dist/src/tokens/create/generators/$themes.d.ts.map +1 -0
  40. package/dist/src/tokens/create/generators/$themes.js +333 -0
  41. package/dist/src/tokens/create/generators/color.d.ts +5 -0
  42. package/dist/src/tokens/create/generators/color.d.ts.map +1 -0
  43. package/dist/src/tokens/create/generators/color.js +374 -0
  44. package/dist/src/tokens/create/generators/semantic.d.ts +296 -0
  45. package/dist/src/tokens/create/generators/semantic.d.ts.map +1 -0
  46. package/dist/src/tokens/create/generators/semantic.js +483 -0
  47. package/dist/src/tokens/create/generators/theme.d.ts +3 -0
  48. package/dist/src/tokens/create/generators/theme.d.ts.map +1 -0
  49. package/dist/src/tokens/create/generators/theme.js +168 -0
  50. package/dist/src/tokens/create/generators/typography.d.ts +3 -0
  51. package/dist/src/tokens/create/generators/typography.d.ts.map +1 -0
  52. package/dist/src/tokens/create/generators/typography.js +33 -0
  53. package/dist/src/tokens/{write.d.ts → create/write.d.ts} +2 -2
  54. package/dist/src/tokens/create/write.d.ts.map +1 -0
  55. package/dist/src/tokens/create/write.js +546 -0
  56. package/dist/src/tokens/create.d.ts +4 -2
  57. package/dist/src/tokens/create.d.ts.map +1 -1
  58. package/dist/src/tokens/create.js +2049 -59
  59. package/dist/src/tokens/format.d.ts +16 -0
  60. package/dist/src/tokens/format.d.ts.map +1 -0
  61. package/dist/src/tokens/format.js +3514 -0
  62. package/dist/src/tokens/index.d.ts +1 -0
  63. package/dist/src/tokens/index.d.ts.map +1 -1
  64. package/dist/src/tokens/index.js +3526 -2
  65. package/dist/src/tokens/process/configs/color.d.ts +12 -0
  66. package/dist/src/tokens/process/configs/color.d.ts.map +1 -0
  67. package/dist/src/tokens/process/configs/color.js +823 -0
  68. package/dist/src/tokens/process/configs/semantic.d.ts +3 -0
  69. package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -0
  70. package/dist/src/tokens/process/configs/semantic.js +367 -0
  71. package/dist/src/tokens/process/configs/shared.d.ts +10 -0
  72. package/dist/src/tokens/process/configs/shared.d.ts.map +1 -0
  73. package/dist/src/tokens/process/configs/shared.js +99 -0
  74. package/dist/src/tokens/process/configs/storefront.d.ts +3 -0
  75. package/dist/src/tokens/process/configs/storefront.d.ts.map +1 -0
  76. package/dist/src/tokens/process/configs/storefront.js +220 -0
  77. package/dist/src/tokens/process/configs/typography.d.ts +3 -0
  78. package/dist/src/tokens/process/configs/typography.d.ts.map +1 -0
  79. package/dist/src/tokens/process/configs/typography.js +369 -0
  80. package/dist/src/tokens/{build → process}/configs.d.ts +3 -11
  81. package/dist/src/tokens/process/configs.d.ts.map +1 -0
  82. package/dist/src/tokens/process/configs.js +976 -0
  83. package/dist/src/tokens/process/formats/css/color.d.ts +4 -0
  84. package/dist/src/tokens/process/formats/css/color.d.ts.map +1 -0
  85. package/dist/src/tokens/process/formats/css/color.js +128 -0
  86. package/dist/src/tokens/process/formats/css/semantic.d.ts +17 -0
  87. package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -0
  88. package/dist/src/tokens/process/formats/css/semantic.js +109 -0
  89. package/dist/src/tokens/process/formats/css/typography.d.ts +3 -0
  90. package/dist/src/tokens/process/formats/css/typography.d.ts.map +1 -0
  91. package/dist/src/tokens/process/formats/css/typography.js +32 -0
  92. package/dist/src/tokens/process/formats/css.d.ts +8 -0
  93. package/dist/src/tokens/process/formats/css.d.ts.map +1 -0
  94. package/dist/src/tokens/{build → process}/formats/css.js +94 -57
  95. package/dist/src/tokens/process/formats/js-tokens.d.ts.map +1 -0
  96. package/dist/src/tokens/process/formats/js-tokens.js +109 -0
  97. package/dist/src/tokens/process/platform.d.ts +87 -0
  98. package/dist/src/tokens/process/platform.d.ts.map +1 -0
  99. package/dist/src/tokens/process/platform.js +1090 -0
  100. package/dist/src/tokens/process/transformers.d.ts.map +1 -0
  101. package/dist/src/tokens/{build → process}/transformers.js +29 -6
  102. package/dist/src/tokens/{build → process}/utils/getMultidimensionalThemes.d.ts +3 -3
  103. package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -0
  104. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +922 -0
  105. package/dist/src/tokens/template/design-tokens/primitives/globals.js +5 -0
  106. package/dist/src/tokens/template/design-tokens/primitives/modes/size/global.js +5 -0
  107. package/dist/src/tokens/template/design-tokens/primitives/modes/size/large.js +5 -0
  108. package/dist/src/tokens/template/design-tokens/primitives/modes/size/medium.js +5 -0
  109. package/dist/src/tokens/template/design-tokens/primitives/modes/size/small.js +5 -0
  110. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/large.js +5 -0
  111. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.js +5 -0
  112. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/small.js +5 -0
  113. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/typography.template.js +5 -0
  114. package/dist/src/tokens/template/design-tokens/semantic/color.base.template.js +5 -0
  115. package/dist/src/tokens/template/design-tokens/semantic/color.template.js +5 -0
  116. package/dist/src/tokens/template/design-tokens/semantic/modes/color.template.js +5 -0
  117. package/dist/src/tokens/template/design-tokens/semantic/style.js +5 -0
  118. package/dist/src/tokens/template/design-tokens/themes/theme.base.template.js +5 -0
  119. package/dist/src/tokens/template/design-tokens/themes/theme.template.js +5 -0
  120. package/dist/src/tokens/types.d.ts +54 -38
  121. package/dist/src/tokens/types.d.ts.map +1 -1
  122. package/dist/src/tokens/types.js +8 -0
  123. package/dist/src/tokens/utils.d.ts +30 -5
  124. package/dist/src/tokens/utils.d.ts.map +1 -1
  125. package/dist/src/tokens/utils.js +36 -50
  126. package/dist/src/utils.d.ts +18 -0
  127. package/dist/src/utils.d.ts.map +1 -0
  128. package/dist/src/utils.js +63 -0
  129. package/dist/typography.template-4N5YLH7F.json +22 -0
  130. package/package.json +17 -16
  131. package/dist/bin/config.d.ts.map +0 -1
  132. package/dist/bin/config.js +0 -71
  133. package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts +0 -10
  134. package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts.map +0 -1
  135. package/dist/src/migrations/codemods/jsx/classname-prefix.js +0 -64
  136. package/dist/src/migrations/codemods/jsx/run.d.ts +0 -7
  137. package/dist/src/migrations/codemods/jsx/run.d.ts.map +0 -1
  138. package/dist/src/migrations/codemods/jsx/run.js +0 -22
  139. package/dist/src/migrations/react-beta-to-v1.d.ts +0 -3
  140. package/dist/src/migrations/react-beta-to-v1.d.ts.map +0 -1
  141. package/dist/src/migrations/react-beta-to-v1.js +0 -5
  142. package/dist/src/scripts/copy-internal-tokens.d.ts +0 -2
  143. package/dist/src/scripts/copy-internal-tokens.d.ts.map +0 -1
  144. package/dist/src/scripts/copy-internal-tokens.js +0 -28
  145. package/dist/src/tokens/build/configs.d.ts.map +0 -1
  146. package/dist/src/tokens/build/configs.js +0 -280
  147. package/dist/src/tokens/build/formats/css.d.ts +0 -53
  148. package/dist/src/tokens/build/formats/css.d.ts.map +0 -1
  149. package/dist/src/tokens/build/formats/js-tokens.d.ts.map +0 -1
  150. package/dist/src/tokens/build/formats/js-tokens.js +0 -48
  151. package/dist/src/tokens/build/transformers.d.ts.map +0 -1
  152. package/dist/src/tokens/build/types.d.ts +0 -48
  153. package/dist/src/tokens/build/types.d.ts.map +0 -1
  154. package/dist/src/tokens/build/types.js +0 -7
  155. package/dist/src/tokens/build/utils/entryfile.d.ts +0 -12
  156. package/dist/src/tokens/build/utils/entryfile.d.ts.map +0 -1
  157. package/dist/src/tokens/build/utils/entryfile.js +0 -67
  158. package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts.map +0 -1
  159. package/dist/src/tokens/build/utils/getMultidimensionalThemes.js +0 -112
  160. package/dist/src/tokens/design-tokens/template/$metadata.json +0 -25
  161. package/dist/src/tokens/design-tokens/template/$themes.json +0 -1498
  162. package/dist/src/tokens/template.d.ts.map +0 -1
  163. package/dist/src/tokens/template.js +0 -99
  164. package/dist/src/tokens/write/generate$metadata.d.ts +0 -9
  165. package/dist/src/tokens/write/generate$metadata.d.ts.map +0 -1
  166. package/dist/src/tokens/write/generate$themes.d.ts +0 -12
  167. package/dist/src/tokens/write/generate$themes.d.ts.map +0 -1
  168. package/dist/src/tokens/write/generate$themes.js +0 -161
  169. package/dist/src/tokens/write.d.ts.map +0 -1
  170. package/dist/src/tokens/write.js +0 -177
  171. /package/dist/{src/tokens/design-tokens/template/semantic/color-base-file.json → color.base.template-M7BHS4OV.json} +0 -0
  172. /package/dist/{src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json → color.template-LMPUQ72A.json} +0 -0
  173. /package/dist/{src/tokens/design-tokens/template/semantic/semantic-color-template.json → color.template-XQNSHLTU.json} +0 -0
  174. /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/global.json → global-XVXVBKM6.json} +0 -0
  175. /package/dist/{src/tokens/design-tokens/default/primitives/globals.json → globals-76VAFMDF.json} +0 -0
  176. /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/large.json → large-CIIHO7AY.json} +0 -0
  177. /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/large.json → large-UUOZ6DYI.json} +0 -0
  178. /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/medium.json → medium-OQ7S7P4P.json} +0 -0
  179. /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json → medium-VSB2S4X3.json} +0 -0
  180. /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/small.json → small-AEXJ6U7Z.json} +0 -0
  181. /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/small.json → small-ZY4KOJWX.json} +0 -0
  182. /package/dist/src/tokens/{build → process}/formats/js-tokens.d.ts +0 -0
  183. /package/dist/src/tokens/{build → process}/transformers.d.ts +0 -0
  184. /package/dist/{src/tokens/design-tokens/default/semantic/style.json → style-FP5XVCUD.json} +0 -0
  185. /package/dist/{src/tokens/design-tokens/template/themes/theme-base-file.json → theme.base.template-Y4RMFBQY.json} +0 -0
  186. /package/dist/{src/tokens/design-tokens/template/themes/theme-color-template.json → theme.template-CTQRNOMO.json} +0 -0
@@ -0,0 +1,4 @@
1
+ import type { Format } from 'style-dictionary/types';
2
+ export declare const colorScheme: Format;
3
+ export declare const colorCategory: Format;
4
+ //# sourceMappingURL=color.d.ts.map
@@ -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,3 @@
1
+ import type { Format } from 'style-dictionary/types';
2
+ export declare const typography: Format;
3
+ //# sourceMappingURL=typography.d.ts.map
@@ -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,8 @@
1
+ import type { Format } from 'style-dictionary/types';
2
+ export declare const formats: {
3
+ colorScheme: Format;
4
+ colorCategory: Format;
5
+ semantic: Format;
6
+ typography: Format;
7
+ };
8
+ //# sourceMappingURL=css.d.ts.map
@@ -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
- import { createPropertyFormatter, fileHeader } from "style-dictionary/utils";
3
- import {
4
- getValue,
5
- isColorCategoryToken,
6
- isDigit,
7
- isGlobalColorToken,
8
- isSemanticToken,
9
- pathStartsWithOneOf
10
- } from "../../utils.js";
11
- import { colorCategories } from "../types.js";
12
- function squashTokens(shouldSquash, tokens) {
13
- const [inlineableTokens, otherTokens] = R.partition(shouldSquash, tokens);
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
- const prefersColorScheme = (colorScheme2, content) => `
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
- const colorScheme = {
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
- R.allPass([
50
- R.anyPass([
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 = R.isNotNil(layer) ? `@layer ${layer} {
99
+ const body = R2.isNotNil(layer) ? `@layer ${layer} {
67
100
  ${selector} ${content} ${autoSelectorContent}
68
101
  }
69
102
  ` : `${selector} ${content} ${autoSelectorContent}
70
103
  `;
71
- return header + body;
104
+ return body;
72
105
  }
73
106
  };
74
- const colorCategory = {
107
+ var colorCategory = {
75
108
  name: "ds/css-colorcategory",
76
109
  format: async ({ dictionary, file, options, platform }) => {
77
- const { outputReferences, usesDtcg, replaceCategoryWith = "" } = options;
110
+ const { outputReferences, usesDtcg } = options;
78
111
  const { selector, layer } = platform;
79
- const header = await fileHeader({ file });
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 = R.isNotNil(layer) ? `@layer ${layer} {
133
+ const body = R2.isNotNil(layer) ? `@layer ${layer} {
102
134
  ${selector} ${content}
103
135
  }
104
136
  ` : `${selector} ${content}
105
137
  `;
106
- return header + body;
138
+ return body;
107
139
  }
108
140
  };
109
- const isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
110
- const isNumericSizeToken = (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]);
111
- const isSquashTokens = R.anyPass([isNumericBorderRadiusToken, isNumericSizeToken]);
112
- const overrideSizingFormula = (format, token) => {
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
- const formatSizingTokens = (format, tokens) => {
123
- const { round, calc } = R.reduce(
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
- const semantic = {
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 header = await fileHeader({ file });
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 = squashTokens(isSquashTokens, dictionary.allTokens);
154
- const filteredTokens = R.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
155
- const [sizingTokens, restTokens] = R.partition(
156
- (t) => pathStartsWithOneOf(["size", "_size"], t) && isDigit(t.path[1]),
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 = [R.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
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 = R.isNotNil(layer) ? `@layer ${layer} {
200
+ const body = R3.isNotNil(layer) ? `@layer ${layer} {
165
201
  ${selector} ${content}
166
202
  }
167
203
  ` : `${selector} ${content}
168
204
  `;
169
- return header + body;
205
+ return body;
170
206
  }
171
207
  };
172
- const typographyFontFamilyPredicate = R.allPass([
173
- R.pathSatisfies(R.includes("typography"), ["path"]),
174
- R.pathSatisfies(R.includes("fontFamily"), ["path"])
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
- const typography = {
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 header = await fileHeader({ file });
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 = R.reject(typographyFontFamilyPredicate, dictionary.allTokens);
189
- const formattedTokens = R.pipe(R.map(format), R.join("\n"))(filteredTokens);
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 = R.isNotNil(layer) ? `@layer ${layer} {
232
+ const body = R4.isNotNil(layer) ? `@layer ${layer} {
194
233
  ${content}
195
234
  }` : content;
196
- return header + body;
235
+ return body;
197
236
  }
198
237
  };
199
- const formats = {
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"}