@digdir/designsystemet 1.13.2 → 1.13.3

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 (74) hide show
  1. package/dist/bin/config.js +50 -658
  2. package/dist/bin/designsystemet.js +131 -4623
  3. package/dist/bin/options.js +22 -14
  4. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
  5. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
  6. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
  7. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
  8. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
  9. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
  10. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
  11. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
  12. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
  13. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
  14. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
  15. package/dist/package.js +5 -0
  16. package/dist/src/colors/colorMetadata.js +255 -261
  17. package/dist/src/colors/index.js +5 -522
  18. package/dist/src/colors/theme.js +104 -343
  19. package/dist/src/colors/types.js +22 -25
  20. package/dist/src/colors/utils.js +241 -154
  21. package/dist/src/config.js +103 -444
  22. package/dist/src/index.js +10 -3588
  23. package/dist/src/migrations/beta-to-v1.js +339 -537
  24. package/dist/src/migrations/codemods/css/plugins.js +31 -42
  25. package/dist/src/migrations/codemods/css/run.js +20 -151
  26. package/dist/src/migrations/color-rename-next49.js +44 -220
  27. package/dist/src/migrations/index.js +7 -577
  28. package/dist/src/tokens/build.js +39 -1816
  29. package/dist/src/tokens/create/files.js +43 -602
  30. package/dist/src/tokens/create/generators/$designsystemet.js +8 -97
  31. package/dist/src/tokens/create/generators/$metadata.js +17 -20
  32. package/dist/src/tokens/create/generators/$themes.js +137 -311
  33. package/dist/src/tokens/create/generators/primitives/color-scheme.js +68 -443
  34. package/dist/src/tokens/create/generators/primitives/globals.js +141 -147
  35. package/dist/src/tokens/create/generators/primitives/size.js +146 -156
  36. package/dist/src/tokens/create/generators/primitives/typography.js +213 -217
  37. package/dist/src/tokens/create/generators/semantic/color-modes.js +24 -59
  38. package/dist/src/tokens/create/generators/semantic/color.js +42 -326
  39. package/dist/src/tokens/create/generators/semantic/style.js +379 -382
  40. package/dist/src/tokens/create/generators/themes/theme.js +108 -392
  41. package/dist/src/tokens/create.js +47 -1591
  42. package/dist/src/tokens/format.js +38 -3324
  43. package/dist/src/tokens/generate-config.js +155 -298
  44. package/dist/src/tokens/index.js +3 -3344
  45. package/dist/src/tokens/process/configs/color.js +50 -1085
  46. package/dist/src/tokens/process/configs/semantic.js +45 -1083
  47. package/dist/src/tokens/process/configs/shared.js +18 -109
  48. package/dist/src/tokens/process/configs/size-mode.js +27 -1082
  49. package/dist/src/tokens/process/configs/size.js +32 -1083
  50. package/dist/src/tokens/process/configs/type-scale.js +49 -1083
  51. package/dist/src/tokens/process/configs/typography.js +63 -1084
  52. package/dist/src/tokens/process/configs.js +88 -1224
  53. package/dist/src/tokens/process/formats/css/color.js +58 -1079
  54. package/dist/src/tokens/process/formats/css/semantic.js +27 -1081
  55. package/dist/src/tokens/process/formats/css/size-mode.js +43 -1077
  56. package/dist/src/tokens/process/formats/css/size.js +86 -1079
  57. package/dist/src/tokens/process/formats/css/type-scale.js +53 -1083
  58. package/dist/src/tokens/process/formats/css/typography.js +27 -1081
  59. package/dist/src/tokens/process/formats/css.js +18 -1081
  60. package/dist/src/tokens/process/output/declarations.js +18 -1201
  61. package/dist/src/tokens/process/output/tailwind.js +26 -40
  62. package/dist/src/tokens/process/output/theme.js +73 -206
  63. package/dist/src/tokens/process/platform.js +165 -1355
  64. package/dist/src/tokens/process/transformers.js +49 -89
  65. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +100 -1183
  66. package/dist/src/tokens/process/utils/kebab-case.js +7 -5
  67. package/dist/src/tokens/types.js +6 -7
  68. package/dist/src/tokens/utils.js +102 -93
  69. package/dist/src/types.js +1 -5
  70. package/dist/src/utils/filesystem.js +112 -124
  71. package/package.json +10 -13
  72. package/configs/test-tokens.config.json +0 -82
  73. package/dist/src/scripts/createJsonSchema.js +0 -409
  74. package/dist/src/scripts/update-preview-tokens.js +0 -3353
package/dist/src/tokens/create/generators/primitives/typography.js CHANGED
@@ -1,220 +1,216 @@
1
- // src/tokens/create/generators/primitives/typography.ts
2
- var generateTypography = (themeName, { fontFamily }) => ({
3
- [themeName]: {
4
- "font-family": {
5
- $type: "fontFamilies",
6
- $value: fontFamily
7
- },
8
- "font-weight": {
9
- medium: {
10
- $type: "fontWeights",
11
- $value: "Medium"
12
- },
13
- semibold: {
14
- $type: "fontWeights",
15
- $value: "Semi bold"
16
- },
17
- regular: {
18
- $type: "fontWeights",
19
- $value: "Regular"
20
- }
21
- }
22
- }
23
- });
24
- var generateFontSizes = (size) => fontSizes[size];
25
- var lineHeights = {
26
- sm: {
27
- $type: "lineHeights",
28
- $value: "130%"
29
- },
30
- md: {
31
- $type: "lineHeights",
32
- $value: "150%"
33
- },
34
- lg: {
35
- $type: "lineHeights",
36
- $value: "170%"
37
- }
1
+ //#region src/tokens/create/generators/primitives/typography.ts
2
+ const generateTypography = (themeName, { fontFamily }) => ({ [themeName]: {
3
+ "font-family": {
4
+ $type: "fontFamilies",
5
+ $value: fontFamily
6
+ },
7
+ "font-weight": {
8
+ medium: {
9
+ $type: "fontWeights",
10
+ $value: "Medium"
11
+ },
12
+ semibold: {
13
+ $type: "fontWeights",
14
+ $value: "Semi bold"
15
+ },
16
+ regular: {
17
+ $type: "fontWeights",
18
+ $value: "Regular"
19
+ }
20
+ }
21
+ } });
22
+ const generateFontSizes = (size) => fontSizes[size];
23
+ const lineHeights = {
24
+ sm: {
25
+ $type: "lineHeights",
26
+ $value: "130%"
27
+ },
28
+ md: {
29
+ $type: "lineHeights",
30
+ $value: "150%"
31
+ },
32
+ lg: {
33
+ $type: "lineHeights",
34
+ $value: "170%"
35
+ }
38
36
  };
39
- var letterSpacings = {
40
- "1": {
41
- $type: "letterSpacing",
42
- $value: "-1%"
43
- },
44
- "2": {
45
- $type: "letterSpacing",
46
- $value: "-0.5%"
47
- },
48
- "3": {
49
- $type: "letterSpacing",
50
- $value: "-0.25%"
51
- },
52
- "4": {
53
- $type: "letterSpacing",
54
- $value: "-0.15%"
55
- },
56
- "5": {
57
- $type: "letterSpacing",
58
- $value: "0%"
59
- },
60
- "6": {
61
- $type: "letterSpacing",
62
- $value: "0.15%"
63
- },
64
- "7": {
65
- $type: "letterSpacing",
66
- $value: "0.25%"
67
- },
68
- "8": {
69
- $type: "letterSpacing",
70
- $value: "0.5%"
71
- },
72
- "9": {
73
- $type: "letterSpacing",
74
- $value: "1.5%"
75
- }
37
+ const letterSpacings = {
38
+ "1": {
39
+ $type: "letterSpacing",
40
+ $value: "-1%"
41
+ },
42
+ "2": {
43
+ $type: "letterSpacing",
44
+ $value: "-0.5%"
45
+ },
46
+ "3": {
47
+ $type: "letterSpacing",
48
+ $value: "-0.25%"
49
+ },
50
+ "4": {
51
+ $type: "letterSpacing",
52
+ $value: "-0.15%"
53
+ },
54
+ "5": {
55
+ $type: "letterSpacing",
56
+ $value: "0%"
57
+ },
58
+ "6": {
59
+ $type: "letterSpacing",
60
+ $value: "0.15%"
61
+ },
62
+ "7": {
63
+ $type: "letterSpacing",
64
+ $value: "0.25%"
65
+ },
66
+ "8": {
67
+ $type: "letterSpacing",
68
+ $value: "0.5%"
69
+ },
70
+ "9": {
71
+ $type: "letterSpacing",
72
+ $value: "1.5%"
73
+ }
76
74
  };
77
- var fontSizes = {
78
- large: {
79
- "line-height": lineHeights,
80
- "font-size": {
81
- "1": {
82
- $type: "fontSizes",
83
- $value: "13"
84
- },
85
- "2": {
86
- $type: "fontSizes",
87
- $value: "16"
88
- },
89
- "3": {
90
- $type: "fontSizes",
91
- $value: "18"
92
- },
93
- "4": {
94
- $type: "fontSizes",
95
- $value: "21"
96
- },
97
- "5": {
98
- $type: "fontSizes",
99
- $value: "24"
100
- },
101
- "6": {
102
- $type: "fontSizes",
103
- $value: "30"
104
- },
105
- "7": {
106
- $type: "fontSizes",
107
- $value: "36"
108
- },
109
- "8": {
110
- $type: "fontSizes",
111
- $value: "48"
112
- },
113
- "9": {
114
- $type: "fontSizes",
115
- $value: "60"
116
- },
117
- "10": {
118
- $type: "fontSizes",
119
- $value: "72"
120
- }
121
- },
122
- "letter-spacing": letterSpacings
123
- },
124
- medium: {
125
- "line-height": lineHeights,
126
- "font-size": {
127
- "1": {
128
- $type: "fontSizes",
129
- $value: "12"
130
- },
131
- "2": {
132
- $type: "fontSizes",
133
- $value: "14"
134
- },
135
- "3": {
136
- $type: "fontSizes",
137
- $value: "16"
138
- },
139
- "4": {
140
- $type: "fontSizes",
141
- $value: "18"
142
- },
143
- "5": {
144
- $type: "fontSizes",
145
- $value: "21"
146
- },
147
- "6": {
148
- $type: "fontSizes",
149
- $value: "24"
150
- },
151
- "7": {
152
- $type: "fontSizes",
153
- $value: "30"
154
- },
155
- "8": {
156
- $type: "fontSizes",
157
- $value: "36"
158
- },
159
- "9": {
160
- $type: "fontSizes",
161
- $value: "48"
162
- },
163
- "10": {
164
- $type: "fontSizes",
165
- $value: "60"
166
- }
167
- },
168
- "letter-spacing": letterSpacings
169
- },
170
- small: {
171
- "line-height": lineHeights,
172
- "font-size": {
173
- "1": {
174
- $type: "fontSizes",
175
- $value: "11"
176
- },
177
- "2": {
178
- $type: "fontSizes",
179
- $value: "13"
180
- },
181
- "3": {
182
- $type: "fontSizes",
183
- $value: "14"
184
- },
185
- "4": {
186
- $type: "fontSizes",
187
- $value: "16"
188
- },
189
- "5": {
190
- $type: "fontSizes",
191
- $value: "18"
192
- },
193
- "6": {
194
- $type: "fontSizes",
195
- $value: "21"
196
- },
197
- "7": {
198
- $type: "fontSizes",
199
- $value: "24"
200
- },
201
- "8": {
202
- $type: "fontSizes",
203
- $value: "30"
204
- },
205
- "9": {
206
- $type: "fontSizes",
207
- $value: "36"
208
- },
209
- "10": {
210
- $type: "fontSizes",
211
- $value: "48"
212
- }
213
- },
214
- "letter-spacing": letterSpacings
215
- }
216
- };
217
- export {
218
- generateFontSizes,
219
- generateTypography
75
+ const fontSizes = {
76
+ large: {
77
+ "line-height": lineHeights,
78
+ "font-size": {
79
+ "1": {
80
+ $type: "fontSizes",
81
+ $value: "13"
82
+ },
83
+ "2": {
84
+ $type: "fontSizes",
85
+ $value: "16"
86
+ },
87
+ "3": {
88
+ $type: "fontSizes",
89
+ $value: "18"
90
+ },
91
+ "4": {
92
+ $type: "fontSizes",
93
+ $value: "21"
94
+ },
95
+ "5": {
96
+ $type: "fontSizes",
97
+ $value: "24"
98
+ },
99
+ "6": {
100
+ $type: "fontSizes",
101
+ $value: "30"
102
+ },
103
+ "7": {
104
+ $type: "fontSizes",
105
+ $value: "36"
106
+ },
107
+ "8": {
108
+ $type: "fontSizes",
109
+ $value: "48"
110
+ },
111
+ "9": {
112
+ $type: "fontSizes",
113
+ $value: "60"
114
+ },
115
+ "10": {
116
+ $type: "fontSizes",
117
+ $value: "72"
118
+ }
119
+ },
120
+ "letter-spacing": letterSpacings
121
+ },
122
+ medium: {
123
+ "line-height": lineHeights,
124
+ "font-size": {
125
+ "1": {
126
+ $type: "fontSizes",
127
+ $value: "12"
128
+ },
129
+ "2": {
130
+ $type: "fontSizes",
131
+ $value: "14"
132
+ },
133
+ "3": {
134
+ $type: "fontSizes",
135
+ $value: "16"
136
+ },
137
+ "4": {
138
+ $type: "fontSizes",
139
+ $value: "18"
140
+ },
141
+ "5": {
142
+ $type: "fontSizes",
143
+ $value: "21"
144
+ },
145
+ "6": {
146
+ $type: "fontSizes",
147
+ $value: "24"
148
+ },
149
+ "7": {
150
+ $type: "fontSizes",
151
+ $value: "30"
152
+ },
153
+ "8": {
154
+ $type: "fontSizes",
155
+ $value: "36"
156
+ },
157
+ "9": {
158
+ $type: "fontSizes",
159
+ $value: "48"
160
+ },
161
+ "10": {
162
+ $type: "fontSizes",
163
+ $value: "60"
164
+ }
165
+ },
166
+ "letter-spacing": letterSpacings
167
+ },
168
+ small: {
169
+ "line-height": lineHeights,
170
+ "font-size": {
171
+ "1": {
172
+ $type: "fontSizes",
173
+ $value: "11"
174
+ },
175
+ "2": {
176
+ $type: "fontSizes",
177
+ $value: "13"
178
+ },
179
+ "3": {
180
+ $type: "fontSizes",
181
+ $value: "14"
182
+ },
183
+ "4": {
184
+ $type: "fontSizes",
185
+ $value: "16"
186
+ },
187
+ "5": {
188
+ $type: "fontSizes",
189
+ $value: "18"
190
+ },
191
+ "6": {
192
+ $type: "fontSizes",
193
+ $value: "21"
194
+ },
195
+ "7": {
196
+ $type: "fontSizes",
197
+ $value: "24"
198
+ },
199
+ "8": {
200
+ $type: "fontSizes",
201
+ $value: "30"
202
+ },
203
+ "9": {
204
+ $type: "fontSizes",
205
+ $value: "36"
206
+ },
207
+ "10": {
208
+ $type: "fontSizes",
209
+ $value: "48"
210
+ }
211
+ },
212
+ "letter-spacing": letterSpacings
213
+ }
220
214
  };
215
+ //#endregion
216
+ export { generateFontSizes, generateTypography };
package/dist/src/tokens/create/generators/semantic/color-modes.js CHANGED
@@ -1,61 +1,26 @@
1
- // src/colors/types.ts
2
- import * as R from "ramda";
3
- var semanticColorMap = {
4
- "background-default": 1,
5
- "background-tinted": 2,
6
- "surface-default": 3,
7
- "surface-tinted": 4,
8
- "surface-hover": 5,
9
- "surface-active": 6,
10
- "border-subtle": 7,
11
- "border-default": 8,
12
- "border-strong": 9,
13
- "text-subtle": 10,
14
- "text-default": 11,
15
- "base-default": 12,
16
- "base-hover": 13,
17
- "base-active": 14,
18
- "base-contrast-subtle": 15,
19
- "base-contrast-default": 16
1
+ import { semanticColorNames } from "../../../../colors/types.js";
2
+ //#region src/tokens/create/generators/semantic/color-modes.ts
3
+ const generateColorModes = (colors, _themeName) => {
4
+ const mainColorNames = Object.keys(colors.main);
5
+ const supportColorNames = Object.keys(colors.support);
6
+ const modes = {
7
+ "main-color": {},
8
+ "support-color": {}
9
+ };
10
+ const categories = [["main-color", mainColorNames], ["support-color", supportColorNames]];
11
+ for (const [colorCategory, colorNames] of categories) for (const colorName of colorNames) {
12
+ const customColorTokens = { color: { [colorCategory.replace("-color", "")]: generateColorScaleTokens(colorName) } };
13
+ modes[colorCategory][colorName] = customColorTokens;
14
+ }
15
+ return modes;
20
16
  };
21
- var semanticColorNames = R.keys(semanticColorMap);
22
- var semanticColorNumbers = R.values(semanticColorMap);
23
-
24
- // src/tokens/create/generators/semantic/color-modes.ts
25
- var generateColorModes = (colors, _themeName) => {
26
- const mainColorNames = Object.keys(colors.main);
27
- const supportColorNames = Object.keys(colors.support);
28
- const modes = {
29
- "main-color": {},
30
- "support-color": {}
31
- };
32
- const categories = [
33
- ["main-color", mainColorNames],
34
- ["support-color", supportColorNames]
35
- ];
36
- for (const [colorCategory, colorNames] of categories) {
37
- for (const colorName of colorNames) {
38
- const category = colorCategory.replace("-color", "");
39
- const customColorTokens = {
40
- color: {
41
- [category]: generateColorScaleTokens(colorName)
42
- }
43
- };
44
- modes[colorCategory][colorName] = customColorTokens;
45
- }
46
- }
47
- return modes;
48
- };
49
- var generateColorScaleTokens = (colorName) => {
50
- const colorScale = {};
51
- for (const colorSemantic of semanticColorNames) {
52
- colorScale[colorSemantic] = {
53
- $type: "color",
54
- $value: `{color.${colorName}.${colorSemantic}}`
55
- };
56
- }
57
- return colorScale;
58
- };
59
- export {
60
- generateColorModes
17
+ const generateColorScaleTokens = (colorName) => {
18
+ const colorScale = {};
19
+ for (const colorSemantic of semanticColorNames) colorScale[colorSemantic] = {
20
+ $type: "color",
21
+ $value: `{color.${colorName}.${colorSemantic}}`
22
+ };
23
+ return colorScale;
61
24
  };
25
+ //#endregion
26
+ export { generateColorModes };