@digdir/designsystemet 0.1.0-next.31 → 0.100.51-next.52

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 (199) hide show
  1. package/README.md +16 -0
  2. package/dist/bin/config.d.ts +162 -0
  3. package/dist/bin/config.d.ts.map +1 -0
  4. package/dist/bin/config.js +56 -0
  5. package/dist/{types/bin → bin}/designsystemet.d.ts.map +1 -1
  6. package/dist/bin/designsystemet.js +159 -31
  7. package/dist/bin/options.d.ts +16 -0
  8. package/dist/bin/options.d.ts.map +1 -0
  9. package/dist/bin/options.js +12 -0
  10. package/dist/config.schema.json +81 -0
  11. package/dist/src/colors/colorMetadata.d.ts +53 -0
  12. package/dist/src/colors/colorMetadata.d.ts.map +1 -0
  13. package/dist/src/colors/colorMetadata.js +211 -0
  14. package/dist/{types/src → src}/colors/index.d.ts +1 -0
  15. package/dist/src/colors/index.d.ts.map +1 -0
  16. package/dist/src/colors/index.js +1 -0
  17. package/dist/src/colors/theme.d.ts +30 -0
  18. package/dist/src/colors/theme.d.ts.map +1 -0
  19. package/dist/src/colors/theme.js +52 -233
  20. package/dist/src/colors/types.d.ts +63 -0
  21. package/dist/src/colors/types.d.ts.map +1 -0
  22. package/dist/{types/src → src}/colors/utils.d.ts +39 -56
  23. package/dist/src/colors/utils.d.ts.map +1 -0
  24. package/dist/src/colors/utils.js +59 -187
  25. package/dist/src/index.d.ts +3 -0
  26. package/dist/src/index.d.ts.map +1 -0
  27. package/dist/src/index.js +2 -0
  28. package/dist/src/migrations/beta-to-v1.d.ts.map +1 -0
  29. package/dist/src/migrations/beta-to-v1.js +45 -45
  30. package/dist/src/migrations/codemods/css/plugins.d.ts.map +1 -0
  31. package/dist/src/migrations/codemods/css/plugins.js +7 -8
  32. package/dist/src/migrations/codemods/css/run.d.ts.map +1 -0
  33. package/dist/src/migrations/codemods/css/run.js +9 -1
  34. package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts.map +1 -0
  35. package/dist/src/migrations/codemods/jsx/run.d.ts.map +1 -0
  36. package/dist/src/migrations/color-rename-next49.d.ts +3 -0
  37. package/dist/src/migrations/color-rename-next49.d.ts.map +1 -0
  38. package/dist/src/migrations/color-rename-next49.js +38 -0
  39. package/dist/{types/src → src}/migrations/index.d.ts +1 -0
  40. package/dist/src/migrations/index.d.ts.map +1 -0
  41. package/dist/src/migrations/index.js +3 -1
  42. package/dist/src/migrations/react-beta-to-v1.d.ts.map +1 -0
  43. package/dist/src/scripts/copy-internal-tokens.d.ts +2 -0
  44. package/dist/src/scripts/copy-internal-tokens.d.ts.map +1 -0
  45. package/dist/src/scripts/copy-internal-tokens.js +28 -0
  46. package/dist/src/scripts/createJsonSchema.d.ts +2 -0
  47. package/dist/src/scripts/createJsonSchema.d.ts.map +1 -0
  48. package/dist/src/scripts/createJsonSchema.js +15 -0
  49. package/dist/src/tokens/build/builtin-colors.css +87 -0
  50. package/dist/src/tokens/build/configs.d.ts +21 -0
  51. package/dist/src/tokens/build/configs.d.ts.map +1 -0
  52. package/dist/src/tokens/build/configs.js +136 -95
  53. package/dist/src/tokens/build/formats/css.d.ts +53 -0
  54. package/dist/src/tokens/build/formats/css.d.ts.map +1 -0
  55. package/dist/src/tokens/build/formats/css.js +140 -111
  56. package/dist/src/tokens/build/formats/js-tokens.d.ts.map +1 -0
  57. package/dist/src/tokens/build/formats/js-tokens.js +22 -9
  58. package/dist/src/tokens/build/transformers.d.ts +6 -0
  59. package/dist/src/tokens/build/transformers.d.ts.map +1 -0
  60. package/dist/src/tokens/build/transformers.js +27 -18
  61. package/dist/src/tokens/build/types.d.ts +45 -0
  62. package/dist/src/tokens/build/types.d.ts.map +1 -0
  63. package/dist/src/tokens/build/types.js +7 -0
  64. package/dist/{types/src → src}/tokens/build/utils/entryfile.d.ts +1 -0
  65. package/dist/src/tokens/build/utils/entryfile.d.ts.map +1 -0
  66. package/dist/src/tokens/build/utils/entryfile.js +42 -6
  67. package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts +35 -0
  68. package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts.map +1 -0
  69. package/dist/src/tokens/build/utils/getMultidimensionalThemes.js +112 -0
  70. package/dist/src/tokens/build.d.ts +20 -0
  71. package/dist/src/tokens/build.d.ts.map +1 -0
  72. package/dist/src/tokens/build.js +131 -0
  73. package/dist/src/tokens/create.d.ts +18 -0
  74. package/dist/src/tokens/create.d.ts.map +1 -0
  75. package/dist/src/tokens/create.js +99 -0
  76. package/dist/src/{init/template/default-files/design-tokens → tokens/design-tokens/default}/primitives/globals.json +2 -20
  77. package/dist/src/tokens/design-tokens/default/primitives/modes/size/global.json +96 -0
  78. package/dist/src/tokens/design-tokens/default/primitives/modes/size/large.json +16 -0
  79. package/dist/src/tokens/design-tokens/default/primitives/modes/size/medium.json +16 -0
  80. package/dist/src/tokens/design-tokens/default/primitives/modes/size/small.json +16 -0
  81. package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json +96 -0
  82. package/dist/src/{init/template/default-files/design-tokens/primitives/size/default.json → tokens/design-tokens/default/primitives/modes/typography/size/medium.json} +9 -88
  83. package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json +96 -0
  84. package/dist/src/{init/template/default-files/design-tokens → tokens/design-tokens/default}/semantic/style.json +126 -312
  85. package/dist/src/tokens/design-tokens/template/$metadata.json +25 -0
  86. package/dist/src/tokens/design-tokens/template/$themes.json +1498 -0
  87. package/dist/src/tokens/design-tokens/template/semantic/color-base-file.json +278 -0
  88. package/dist/src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json +66 -0
  89. package/dist/src/tokens/design-tokens/template/semantic/semantic-color-template.json +66 -0
  90. package/dist/src/tokens/design-tokens/template/themes/theme-base-file.json +57 -0
  91. package/dist/src/tokens/design-tokens/template/themes/theme-color-template.json +66 -0
  92. package/dist/src/tokens/index.d.ts +3 -0
  93. package/dist/src/tokens/index.d.ts.map +1 -0
  94. package/dist/src/tokens/index.js +2 -1
  95. package/dist/src/tokens/template.d.ts +2 -0
  96. package/dist/src/tokens/template.d.ts.map +1 -0
  97. package/dist/src/tokens/template.js +98 -0
  98. package/dist/src/tokens/types.d.ts +46 -0
  99. package/dist/src/tokens/types.d.ts.map +1 -0
  100. package/dist/src/tokens/types.js +0 -0
  101. package/dist/src/tokens/utils.d.ts +34 -0
  102. package/dist/src/tokens/utils.d.ts.map +1 -0
  103. package/dist/src/tokens/utils.js +85 -0
  104. package/dist/src/tokens/write/generate$metadata.d.ts +9 -0
  105. package/dist/src/tokens/write/generate$metadata.d.ts.map +1 -0
  106. package/dist/src/tokens/write/generate$metadata.js +28 -0
  107. package/dist/src/tokens/write/generate$themes.d.ts +12 -0
  108. package/dist/src/tokens/write/generate$themes.d.ts.map +1 -0
  109. package/dist/src/tokens/write/generate$themes.js +161 -0
  110. package/dist/src/tokens/write.d.ts +12 -0
  111. package/dist/src/tokens/write.d.ts.map +1 -0
  112. package/dist/src/tokens/write.js +176 -0
  113. package/package.json +43 -31
  114. package/dist/src/init/createTokensPackage.js +0 -273
  115. package/dist/src/init/generateMetadataJson.js +0 -24
  116. package/dist/src/init/generateThemesJson.js +0 -103
  117. package/dist/src/init/index.js +0 -10
  118. package/dist/src/init/nextStepsMarkdown.js +0 -92
  119. package/dist/src/init/template/default-files/README.md +0 -10
  120. package/dist/src/init/template/default-files/design-tokens/Figma/components.json +0 -22
  121. package/dist/src/init/template/default-files/design-tokens/README.md +0 -3
  122. package/dist/src/init/template/default-files/design-tokens/semantic/color.json +0 -572
  123. package/dist/src/init/template/default-files/design-tokens/themes/theme.json +0 -334
  124. package/dist/src/init/template/prettier.config.js +0 -5
  125. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/global.json +0 -376
  126. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/theme-template.json +0 -314
  127. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/global.json +0 -376
  128. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/theme-template.json +0 -314
  129. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/light/global.json +0 -376
  130. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/light/theme-template.json +0 -314
  131. package/dist/src/init/template/template-files/design-tokens/primitives/modes/typography/primary/theme-template.json +0 -30
  132. package/dist/src/init/template/template-files/design-tokens/primitives/modes/typography/secondary/theme-template.json +0 -30
  133. package/dist/src/init/template/template-files/design-tokens/themes/theme-template.json +0 -334
  134. package/dist/src/init/template/template-files/package.json +0 -24
  135. package/dist/src/init/utils.js +0 -15
  136. package/dist/src/tokens/build/actions.js +0 -33
  137. package/dist/src/tokens/build/index.js +0 -85
  138. package/dist/src/tokens/build/utils/noCase.js +0 -24
  139. package/dist/src/tokens/build/utils/permutateThemes.js +0 -64
  140. package/dist/src/tokens/build/utils/utils.js +0 -25
  141. package/dist/src/tokens/create/README.md +0 -3
  142. package/dist/src/tokens/create/index.js +0 -150
  143. package/dist/types/src/colors/index.d.ts.map +0 -1
  144. package/dist/types/src/colors/theme.d.ts +0 -85
  145. package/dist/types/src/colors/theme.d.ts.map +0 -1
  146. package/dist/types/src/colors/types.d.ts +0 -17
  147. package/dist/types/src/colors/types.d.ts.map +0 -1
  148. package/dist/types/src/colors/utils.d.ts.map +0 -1
  149. package/dist/types/src/init/createTokensPackage.d.ts +0 -5
  150. package/dist/types/src/init/createTokensPackage.d.ts.map +0 -1
  151. package/dist/types/src/init/generateMetadataJson.d.ts +0 -6
  152. package/dist/types/src/init/generateMetadataJson.d.ts.map +0 -1
  153. package/dist/types/src/init/generateThemesJson.d.ts +0 -3
  154. package/dist/types/src/init/generateThemesJson.d.ts.map +0 -1
  155. package/dist/types/src/init/index.d.ts +0 -3
  156. package/dist/types/src/init/index.d.ts.map +0 -1
  157. package/dist/types/src/init/nextStepsMarkdown.d.ts +0 -3
  158. package/dist/types/src/init/nextStepsMarkdown.d.ts.map +0 -1
  159. package/dist/types/src/init/template/prettier.config.d.mts +0 -9
  160. package/dist/types/src/init/template/prettier.config.d.mts.map +0 -1
  161. package/dist/types/src/init/utils.d.ts +0 -4
  162. package/dist/types/src/init/utils.d.ts.map +0 -1
  163. package/dist/types/src/migrations/beta-to-v1.d.ts.map +0 -1
  164. package/dist/types/src/migrations/codemods/css/plugins.d.ts.map +0 -1
  165. package/dist/types/src/migrations/codemods/css/run.d.ts.map +0 -1
  166. package/dist/types/src/migrations/codemods/jsx/classname-prefix.d.ts.map +0 -1
  167. package/dist/types/src/migrations/codemods/jsx/run.d.ts.map +0 -1
  168. package/dist/types/src/migrations/index.d.ts.map +0 -1
  169. package/dist/types/src/migrations/react-beta-to-v1.d.ts.map +0 -1
  170. package/dist/types/src/tokens/build/actions.d.ts +0 -6
  171. package/dist/types/src/tokens/build/actions.d.ts.map +0 -1
  172. package/dist/types/src/tokens/build/configs.d.ts +0 -31
  173. package/dist/types/src/tokens/build/configs.d.ts.map +0 -1
  174. package/dist/types/src/tokens/build/formats/css.d.ts +0 -5
  175. package/dist/types/src/tokens/build/formats/css.d.ts.map +0 -1
  176. package/dist/types/src/tokens/build/formats/js-tokens.d.ts.map +0 -1
  177. package/dist/types/src/tokens/build/index.d.ts +0 -11
  178. package/dist/types/src/tokens/build/index.d.ts.map +0 -1
  179. package/dist/types/src/tokens/build/transformers.d.ts +0 -5
  180. package/dist/types/src/tokens/build/transformers.d.ts.map +0 -1
  181. package/dist/types/src/tokens/build/utils/entryfile.d.ts.map +0 -1
  182. package/dist/types/src/tokens/build/utils/noCase.d.ts +0 -11
  183. package/dist/types/src/tokens/build/utils/noCase.d.ts.map +0 -1
  184. package/dist/types/src/tokens/build/utils/permutateThemes.d.ts +0 -17
  185. package/dist/types/src/tokens/build/utils/permutateThemes.d.ts.map +0 -1
  186. package/dist/types/src/tokens/build/utils/utils.d.ts +0 -25
  187. package/dist/types/src/tokens/build/utils/utils.d.ts.map +0 -1
  188. package/dist/types/src/tokens/create/index.d.ts +0 -64
  189. package/dist/types/src/tokens/create/index.d.ts.map +0 -1
  190. package/dist/types/src/tokens/index.d.ts +0 -2
  191. package/dist/types/src/tokens/index.d.ts.map +0 -1
  192. /package/dist/{types/bin → bin}/designsystemet.d.ts +0 -0
  193. /package/dist/{types/src → src}/migrations/beta-to-v1.d.ts +0 -0
  194. /package/dist/{types/src → src}/migrations/codemods/css/plugins.d.ts +0 -0
  195. /package/dist/{types/src → src}/migrations/codemods/css/run.d.ts +0 -0
  196. /package/dist/{types/src → src}/migrations/codemods/jsx/classname-prefix.d.ts +0 -0
  197. /package/dist/{types/src → src}/migrations/codemods/jsx/run.d.ts +0 -0
  198. /package/dist/{types/src → src}/migrations/react-beta-to-v1.d.ts +0 -0
  199. /package/dist/{types/src → src}/tokens/build/formats/js-tokens.d.ts +0 -0
package/README.md ADDED
@@ -0,0 +1,16 @@
1
+ # @digdir/designsystemet
2
+
3
+ CLI and tooling for Designsystemet
4
+
5
+ Use `--help` for available commands and options
6
+
7
+ Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.
8
+
9
+
10
+ ## Usage
11
+
12
+ ### Create tokens
13
+ We recommend using the [Designsystemet theme-builder](https://theme.designsystemet.no/) for generating options and commandline snippet.
14
+
15
+ ### Build tokens
16
+ Use `npx @digdir/designsystemet tokens build` to build CSS from design-tokens generated in the step above.
@@ -0,0 +1,162 @@
1
+ import { z } from 'zod';
2
+ export declare function mapPathToOptionName(path: (string | number)[]): string | undefined;
3
+ export declare const colorRegex: RegExp;
4
+ /**
5
+ * This defines the structure of the JSON config file
6
+ */
7
+ export declare const configFileSchema: z.ZodObject<{
8
+ outDir: z.ZodOptional<z.ZodString>;
9
+ clean: z.ZodOptional<z.ZodBoolean>;
10
+ themes: z.ZodRecord<z.ZodString, z.ZodObject<{
11
+ colors: z.ZodObject<{
12
+ main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>;
13
+ support: z.ZodDefault<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>>>;
14
+ neutral: z.ZodEffects<z.ZodString, `#${string}`, string>;
15
+ }, "strip", z.ZodTypeAny, {
16
+ main: Record<string, `#${string}`>;
17
+ neutral: `#${string}`;
18
+ support: Record<string, `#${string}`>;
19
+ }, {
20
+ main: Record<string, string>;
21
+ neutral: string;
22
+ support?: Record<string, string> | undefined;
23
+ }>;
24
+ typography: z.ZodOptional<z.ZodObject<{
25
+ fontFamily: z.ZodString;
26
+ }, "strip", z.ZodTypeAny, {
27
+ fontFamily: string;
28
+ }, {
29
+ fontFamily: string;
30
+ }>>;
31
+ borderRadius: z.ZodOptional<z.ZodNumber>;
32
+ }, "strip", z.ZodTypeAny, {
33
+ colors: {
34
+ main: Record<string, `#${string}`>;
35
+ neutral: `#${string}`;
36
+ support: Record<string, `#${string}`>;
37
+ };
38
+ typography?: {
39
+ fontFamily: string;
40
+ } | undefined;
41
+ borderRadius?: number | undefined;
42
+ }, {
43
+ colors: {
44
+ main: Record<string, string>;
45
+ neutral: string;
46
+ support?: Record<string, string> | undefined;
47
+ };
48
+ typography?: {
49
+ fontFamily: string;
50
+ } | undefined;
51
+ borderRadius?: number | undefined;
52
+ }>>;
53
+ }, "strip", z.ZodTypeAny, {
54
+ themes: Record<string, {
55
+ colors: {
56
+ main: Record<string, `#${string}`>;
57
+ neutral: `#${string}`;
58
+ support: Record<string, `#${string}`>;
59
+ };
60
+ typography?: {
61
+ fontFamily: string;
62
+ } | undefined;
63
+ borderRadius?: number | undefined;
64
+ }>;
65
+ clean?: boolean | undefined;
66
+ outDir?: string | undefined;
67
+ }, {
68
+ themes: Record<string, {
69
+ colors: {
70
+ main: Record<string, string>;
71
+ neutral: string;
72
+ support?: Record<string, string> | undefined;
73
+ };
74
+ typography?: {
75
+ fontFamily: string;
76
+ } | undefined;
77
+ borderRadius?: number | undefined;
78
+ }>;
79
+ clean?: boolean | undefined;
80
+ outDir?: string | undefined;
81
+ }>;
82
+ /**
83
+ * This defines the structure of the final configuration after combining the config file,
84
+ * command-line options and default values.
85
+ */
86
+ export declare const combinedConfigSchema: z.ZodObject<{
87
+ outDir: z.ZodString;
88
+ clean: z.ZodBoolean;
89
+ themes: z.ZodRecord<z.ZodString, z.ZodObject<{
90
+ colors: z.ZodObject<{
91
+ main: z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>;
92
+ support: z.ZodDefault<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>>>;
93
+ neutral: z.ZodEffects<z.ZodString, `#${string}`, string>;
94
+ }, "strip", z.ZodTypeAny, {
95
+ main: Record<string, `#${string}`>;
96
+ neutral: `#${string}`;
97
+ support: Record<string, `#${string}`>;
98
+ }, {
99
+ main: Record<string, string>;
100
+ neutral: string;
101
+ support?: Record<string, string> | undefined;
102
+ }>;
103
+ typography: z.ZodOptional<z.ZodObject<{
104
+ fontFamily: z.ZodString;
105
+ }, "strip", z.ZodTypeAny, {
106
+ fontFamily: string;
107
+ }, {
108
+ fontFamily: string;
109
+ }>>;
110
+ borderRadius: z.ZodOptional<z.ZodNumber>;
111
+ }, "strip", z.ZodTypeAny, {
112
+ colors: {
113
+ main: Record<string, `#${string}`>;
114
+ neutral: `#${string}`;
115
+ support: Record<string, `#${string}`>;
116
+ };
117
+ typography?: {
118
+ fontFamily: string;
119
+ } | undefined;
120
+ borderRadius?: number | undefined;
121
+ }, {
122
+ colors: {
123
+ main: Record<string, string>;
124
+ neutral: string;
125
+ support?: Record<string, string> | undefined;
126
+ };
127
+ typography?: {
128
+ fontFamily: string;
129
+ } | undefined;
130
+ borderRadius?: number | undefined;
131
+ }>>;
132
+ }, "strip", z.ZodTypeAny, {
133
+ clean: boolean;
134
+ themes: Record<string, {
135
+ colors: {
136
+ main: Record<string, `#${string}`>;
137
+ neutral: `#${string}`;
138
+ support: Record<string, `#${string}`>;
139
+ };
140
+ typography?: {
141
+ fontFamily: string;
142
+ } | undefined;
143
+ borderRadius?: number | undefined;
144
+ }>;
145
+ outDir: string;
146
+ }, {
147
+ clean: boolean;
148
+ themes: Record<string, {
149
+ colors: {
150
+ main: Record<string, string>;
151
+ neutral: string;
152
+ support?: Record<string, string> | undefined;
153
+ };
154
+ typography?: {
155
+ fontFamily: string;
156
+ } | undefined;
157
+ borderRadius?: number | undefined;
158
+ }>;
159
+ outDir: string;
160
+ }>;
161
+ export type CombinedConfigSchema = z.infer<typeof combinedConfigSchema>;
162
+ //# sourceMappingURL=config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../bin/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,sBAQ5D;AAUD,eAAO,MAAM,UAAU,QAA2C,CAAC;AA+BnE;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
@@ -0,0 +1,56 @@
1
+ import * as R from "ramda";
2
+ import { z } from "zod";
3
+ import { convertToHex } from "../src/colors/index.js";
4
+ import { cliOptions } from "../src/tokens/create.js";
5
+ function mapPathToOptionName(path) {
6
+ const normalisedPath = path[0] === "themes" ? ["theme", ...R.drop(2, path)] : path;
7
+ const option = R.path(normalisedPath, cliOptions);
8
+ if (typeof option !== "string") {
9
+ return;
10
+ }
11
+ return option;
12
+ }
13
+ const hexPatterns = [
14
+ // Hex colors: #000, #0000, #000000, #00000000
15
+ `#[0-9a-fA-F]{3}`,
16
+ `#[0-9a-fA-F]{4}`,
17
+ `#[0-9a-fA-F]{6}`,
18
+ `#[0-9a-fA-F]{8}`
19
+ ];
20
+ const colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
21
+ const colorSchema = z.string({ description: "A hex color, which is used for creating a color scale" }).regex(colorRegex).transform(convertToHex);
22
+ const colorCategorySchema = z.record(colorSchema, { description: "One or more color definitions" });
23
+ const themeSchema = z.object(
24
+ {
25
+ colors: z.object(
26
+ {
27
+ main: colorCategorySchema,
28
+ support: colorCategorySchema.optional().default({}),
29
+ neutral: colorSchema
30
+ },
31
+ { description: "Defines the colors for this theme" }
32
+ ),
33
+ typography: z.object(
34
+ {
35
+ fontFamily: z.string({ description: "Sets the font-family for this theme" })
36
+ },
37
+ { description: "Defines the typography for a given theme" }
38
+ ).optional(),
39
+ borderRadius: z.number({ description: "Defines the border-radius for this theme" }).optional()
40
+ },
41
+ { description: "An object defining a theme. The property name holding the object becomes the theme name." }
42
+ );
43
+ const configFileSchema = z.object({
44
+ outDir: z.string({ description: "Path to the output directory for the created design tokens" }).optional(),
45
+ clean: z.boolean({ description: "Delete the output directory before building or creating tokens" }).optional(),
46
+ themes: z.record(themeSchema, {
47
+ description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
48
+ })
49
+ });
50
+ const combinedConfigSchema = configFileSchema.required();
51
+ export {
52
+ colorRegex,
53
+ combinedConfigSchema,
54
+ configFileSchema,
55
+ mapPathToOptionName
56
+ };
@@ -1 +1 @@
1
- {"version":3,"file":"designsystemet.d.ts","sourceRoot":"","sources":["../../../bin/designsystemet.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"designsystemet.d.ts","sourceRoot":"","sources":["../../bin/designsystemet.ts"],"names":[],"mappings":""}
@@ -1,39 +1,123 @@
1
1
  #!/usr/bin/env node
2
+ import fs from "node:fs/promises";
3
+ import path from "node:path";
2
4
  import { Argument, createCommand, program } from "@commander-js/extra-typings";
3
5
  import chalk from "chalk";
6
+ import * as R from "ramda";
7
+ import { fromError } from "zod-validation-error";
4
8
  import { convertToHex } from "../src/colors/index.js";
5
- import { createTokensPackage } from "../src/init/createTokensPackage.js";
6
9
  import migrations from "../src/migrations/index.js";
7
- import { buildTokens } from "../src/tokens/build/index.js";
8
- import { createTokens } from "../src/tokens/create//index.js";
9
- program.name("Designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
10
+ import { buildTokens } from "../src/tokens/build.js";
11
+ import { cliOptions, createTokens } from "../src/tokens/create.js";
12
+ import { cleanDir } from "../src/tokens/utils.js";
13
+ import { writeTokens } from "../src/tokens/write.js";
14
+ import { combinedConfigSchema, configFileSchema, mapPathToOptionName } from "./config.js";
15
+ import { getDefaultOrExplicitOption } from "./options.js";
16
+ program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
10
17
  function makeTokenCommands() {
11
18
  const tokenCmd = createCommand("tokens");
12
- tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, "./design-tokens").option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
13
- const tokens = typeof opts.tokens === "string" ? opts.tokens : "./design-tokens";
14
- const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
15
- const preview = opts.preview;
16
- console.log(`Bulding tokens in ${chalk.green(tokens)}`);
17
- return buildTokens({ tokens, out, preview });
19
+ const DEFAULT_TOKENS_CREATE_DIR = "./design-tokens";
20
+ const DEFAULT_TOKENS_BUILD_DIR = "./design-tokens-build";
21
+ const DEFAULT_FONT = "Inter";
22
+ const DEFAULT_THEME_NAME = "theme";
23
+ const DEFAULT_CONFIG_FILE = "designsystemet.config.json";
24
+ tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(
25
+ "-o, --out-dir <string>",
26
+ `Output directory for built ${chalk.blue("design-tokens")}`,
27
+ DEFAULT_TOKENS_BUILD_DIR
28
+ ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${chalk.blue("design-tokens")}`, parseBoolean, false).option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
29
+ const { preview, verbose, clean, dry } = opts;
30
+ const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_CREATE_DIR;
31
+ const outDir = typeof opts.outDir === "string" ? opts.outDir : "./dist/tokens";
32
+ console.log(`Building tokens in ${chalk.green(tokens)}`);
33
+ if (dry) {
34
+ console.log(`Performing dry run, no files will be written`);
35
+ }
36
+ return buildTokens({ tokens, outDir, preview, verbose, dry, clean });
18
37
  });
19
- tokenCmd.command("create").description("Create Designsystemet tokens").option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`).option("-a, --accent <number>", `Accent hex color`).option("-n, --neutral <number>", `Neutral hex color`).option("-b1, --brand1 <number>", `Brand1 hex color`).option("-b2, --brand2 <number>", `Brand2 hex color`).option("-b3, --brand3 <number>", `Brand3 hex color`).option("-f, --font-family <string>", `Font family`).action(async (opts) => {
20
- console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts))}`);
21
- const family = typeof opts.fontFamily === "string" ? opts.fontFamily : "Inter";
22
- const write2 = typeof opts.write === "boolean" ? "./design-tokens" : opts.write;
23
- const props = {
24
- colors: {
25
- accent: convertToHex(opts.accent),
26
- neutral: convertToHex(opts.neutral),
27
- brand1: convertToHex(opts.brand1),
28
- brand2: convertToHex(opts.brand2),
29
- brand3: convertToHex(opts.brand3)
30
- },
31
- typography: {
32
- family
33
- },
34
- write: write2
35
- };
36
- await createTokens(props);
38
+ tokenCmd.command("create").description("Create Designsystemet tokens").option(`-m, --${cliOptions.theme.colors.main} <name:hex...>`, `Main colors`, parseColorValues).option(`-s, --${cliOptions.theme.colors.support} <name:hex...>`, `Support colors`, parseColorValues).option(`-n, --${cliOptions.theme.colors.neutral} <hex>`, `Neutral hex color`, convertToHex).option(
39
+ `-o, --${cliOptions.outDir} <string>`,
40
+ `Output directory for created ${chalk.blue("design-tokens")}`,
41
+ DEFAULT_TOKENS_CREATE_DIR
42
+ ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family`, DEFAULT_FONT).option(
43
+ `-b, --${cliOptions.theme.borderRadius} <number>`,
44
+ `Unitless base border-radius in px`,
45
+ (radiusAsString) => Number(radiusAsString),
46
+ 4
47
+ ).option("--theme <string>", "Theme name (ignored when using JSON config file)", DEFAULT_THEME_NAME).option(
48
+ "--config <string>",
49
+ `Path to config file (default: "${DEFAULT_CONFIG_FILE}")`,
50
+ (value) => parseConfig(value, { allowFileNotFound: false })
51
+ ).action(async (opts, cmd) => {
52
+ if (opts.dry) {
53
+ console.log(`Performing dry run, no files will be written`);
54
+ }
55
+ const configFile = await (opts.config ? opts.config : parseConfig(DEFAULT_CONFIG_FILE, { allowFileNotFound: true }));
56
+ const propsFromJson = configFile?.config;
57
+ if (propsFromJson) {
58
+ const themeColors = Object.values(propsFromJson?.themes ?? {}).map(
59
+ (x) => /* @__PURE__ */ new Set([...R.keys(x.colors.main), ...R.keys(x.colors.support)])
60
+ );
61
+ if (!R.all(R.equals(R.__, themeColors[0]), themeColors)) {
62
+ console.error(
63
+ chalk.redBright(
64
+ `In config ${configFile.path}, all themes must have the same custom color names, but we found:`
65
+ )
66
+ );
67
+ const themeNames = R.keys(propsFromJson.themes ?? {});
68
+ themeColors.forEach((colors, index) => {
69
+ const colorNames = Array.from(colors);
70
+ console.log(` - ${themeNames[index]}: ${colorNames.join(", ")}`);
71
+ });
72
+ console.log();
73
+ process.exit(1);
74
+ }
75
+ }
76
+ const noUndefined = R.reject(R.isNil);
77
+ const getThemeOptions = (optionGetter) => noUndefined({
78
+ colors: noUndefined({
79
+ main: optionGetter(cmd, "mainColors"),
80
+ support: optionGetter(cmd, "supportColors"),
81
+ neutral: optionGetter(cmd, "neutralColor")
82
+ }),
83
+ typography: noUndefined({
84
+ fontFamily: optionGetter(cmd, "fontFamily")
85
+ }),
86
+ borderRadius: optionGetter(cmd, "borderRadius")
87
+ });
88
+ const unvalidatedConfig = noUndefined({
89
+ outDir: propsFromJson?.outDir ?? getDefaultOrExplicitOption(cmd, "outDir"),
90
+ clean: propsFromJson?.clean ?? getDefaultOrExplicitOption(cmd, "clean"),
91
+ themes: propsFromJson?.themes ? (
92
+ // For each theme specified in the JSON config, we override the config values
93
+ // with the explicitly set options from the CLI.
94
+ R.map((theme) => R.mergeDeepRight(theme, getThemeOptions(getDefaultOrExplicitOption)), propsFromJson.themes)
95
+ ) : (
96
+ // If there are no themes specified in the JSON config, we use both explicit
97
+ // and default theme options from the CLI.
98
+ {
99
+ [opts.theme]: getThemeOptions(getDefaultOrExplicitOption)
100
+ }
101
+ )
102
+ });
103
+ let config;
104
+ try {
105
+ config = combinedConfigSchema.parse(unvalidatedConfig);
106
+ } catch (err) {
107
+ console.error(chalk.redBright("Invalid config after combining config file and CLI options"));
108
+ const validationError = makeFriendlyError(err);
109
+ console.error(validationError.toString());
110
+ process.exit(1);
111
+ }
112
+ console.log(`Creating tokens with configuration ${chalk.green(JSON.stringify(config, null, 2))}`);
113
+ if (config.clean) {
114
+ await cleanDir(config.outDir, opts.dry);
115
+ }
116
+ for (const [name, themeWithoutName] of Object.entries(config.themes)) {
117
+ const theme = { name, ...themeWithoutName };
118
+ const tokens = createTokens(theme);
119
+ await writeTokens({ outDir: config.outDir, tokens, theme, dry: opts.dry });
120
+ }
37
121
  });
38
122
  return tokenCmd;
39
123
  }
@@ -56,7 +140,51 @@ program.command("migrate").description("run a Designsystemet migration").addArgu
56
140
  console.log("Migrate: please specify a migration name or --list");
57
141
  }
58
142
  });
59
- program.command("init").description("create an initial token structure for Designsystemet").addArgument(new Argument("<targetDir>", "Target directory for the generated code")).action(async (targetDir) => {
60
- await createTokensPackage(targetDir);
61
- });
62
143
  await program.parseAsync(process.argv);
144
+ async function parseConfig(configPath, options) {
145
+ const resolvedPath = path.resolve(process.cwd(), configPath);
146
+ let configFile;
147
+ try {
148
+ configFile = await fs.readFile(resolvedPath, { encoding: "utf-8" });
149
+ console.log(`Found config file: ${chalk.green(resolvedPath)}`);
150
+ } catch (err) {
151
+ if (err instanceof Error) {
152
+ const nodeErr = err;
153
+ if (nodeErr.code === "ENOENT" && options.allowFileNotFound) {
154
+ return;
155
+ }
156
+ }
157
+ throw err;
158
+ }
159
+ try {
160
+ return {
161
+ path: configPath,
162
+ config: await configFileSchema.parseAsync(JSON.parse(configFile))
163
+ };
164
+ } catch (err) {
165
+ console.error(chalk.redBright(`Invalid config in ${configPath}`));
166
+ const validationError = makeFriendlyError(err);
167
+ console.error(validationError.toString());
168
+ process.exit(1);
169
+ }
170
+ }
171
+ function makeFriendlyError(err) {
172
+ return fromError(err, {
173
+ messageBuilder: (issues) => issues.map((issue) => {
174
+ const issuePath = issue.path.join(".");
175
+ const optionName = mapPathToOptionName(issue.path);
176
+ const errorCode = `(error code: ${issue.code})`;
177
+ const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
178
+ return ` - Error in JSON value ${chalk.red(issuePath)}${optionMessage}:
179
+ ${issue.message} ${chalk.dim(errorCode)}`;
180
+ }).join("\n")
181
+ });
182
+ }
183
+ function parseColorValues(value, previous = {}) {
184
+ const [name, hex] = value.split(":");
185
+ previous[name] = convertToHex(hex);
186
+ return previous;
187
+ }
188
+ function parseBoolean(value, previous) {
189
+ return value === "true" || value === true;
190
+ }
@@ -0,0 +1,16 @@
1
+ import type { Command, OptionValueSource, OptionValues } from '@commander-js/extra-typings';
2
+ declare const getOptionIfMatchingSource: (...sources: OptionValueSource[]) => <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
3
+ export type OptionGetter = ReturnType<typeof getOptionIfMatchingSource>;
4
+ /**
5
+ * Get an option value if it is explicitly supplied to the CLI command.
6
+ * The difference between this and using the option directly is that we return undefined
7
+ * instead of the default value if the option was not explicitly set.
8
+ */
9
+ export declare const getExplicitOptionOnly: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
10
+ /**
11
+ * This function is basically the default behaviour, unlike {@link getExplicitOptionOnly}.
12
+ * It is provided so that the program can choose its behaviour as needed.
13
+ */
14
+ export declare const getDefaultOrExplicitOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
15
+ export {};
16
+ //# sourceMappingURL=options.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../bin/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE5F,QAAA,MAAM,yBAAyB,eAChB,iBAAiB,EAAE,MAC/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAMV,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAjB/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAewD,CAAC;AAEtE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAvBpC,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAqBwE,CAAC"}
@@ -0,0 +1,12 @@
1
+ const getOptionIfMatchingSource = (...sources) => (command, option) => {
2
+ const source = command.getOptionValueSource(option);
3
+ if (sources.includes(source)) {
4
+ return command.getOptionValue(option);
5
+ }
6
+ };
7
+ const getExplicitOptionOnly = getOptionIfMatchingSource("cli");
8
+ const getDefaultOrExplicitOption = getOptionIfMatchingSource("cli", "default");
9
+ export {
10
+ getDefaultOrExplicitOption,
11
+ getExplicitOptionOnly
12
+ };
@@ -0,0 +1,81 @@
1
+ {
2
+ "type": "object",
3
+ "properties": {
4
+ "$schema": {
5
+ "type": "string"
6
+ },
7
+ "outDir": {
8
+ "type": "string",
9
+ "description": "Path to the output directory for the created design tokens"
10
+ },
11
+ "clean": {
12
+ "type": "boolean",
13
+ "description": "Delete the output directory before building or creating tokens"
14
+ },
15
+ "themes": {
16
+ "type": "object",
17
+ "additionalProperties": {
18
+ "type": "object",
19
+ "properties": {
20
+ "colors": {
21
+ "type": "object",
22
+ "properties": {
23
+ "main": {
24
+ "type": "object",
25
+ "additionalProperties": {
26
+ "type": "string",
27
+ "pattern": "^#[0-9a-fA-F]{3}|#[0-9a-fA-F]{4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}$",
28
+ "description": "A hex color, which is used for creating a color scale"
29
+ },
30
+ "description": "One or more color definitions"
31
+ },
32
+ "support": {
33
+ "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main",
34
+ "description": "One or more color definitions",
35
+ "default": {}
36
+ },
37
+ "neutral": {
38
+ "$ref": "#/properties/themes/additionalProperties/properties/colors/properties/main/additionalProperties"
39
+ }
40
+ },
41
+ "required": [
42
+ "main",
43
+ "neutral"
44
+ ],
45
+ "additionalProperties": false,
46
+ "description": "Defines the colors for this theme"
47
+ },
48
+ "typography": {
49
+ "type": "object",
50
+ "properties": {
51
+ "fontFamily": {
52
+ "type": "string",
53
+ "description": "Sets the font-family for this theme"
54
+ }
55
+ },
56
+ "required": [
57
+ "fontFamily"
58
+ ],
59
+ "additionalProperties": false,
60
+ "description": "Defines the typography for a given theme"
61
+ },
62
+ "borderRadius": {
63
+ "type": "number",
64
+ "description": "Defines the border-radius for this theme"
65
+ }
66
+ },
67
+ "required": [
68
+ "colors"
69
+ ],
70
+ "additionalProperties": false,
71
+ "description": "An object defining a theme. The property name holding the object becomes the theme name."
72
+ },
73
+ "description": "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
74
+ }
75
+ },
76
+ "required": [
77
+ "themes"
78
+ ],
79
+ "additionalProperties": false,
80
+ "$schema": "http://json-schema.org/draft-07/schema#"
81
+ }
@@ -0,0 +1,53 @@
1
+ import type { ColorMetadataByName, ColorNumber, CssColor, GlobalColors } from './types.js';
2
+ export declare const baseColors: Record<GlobalColors, CssColor>;
3
+ export declare const colorMetadata: ColorMetadataByName;
4
+ export declare const getColorMetadataByNumber: (number: ColorNumber) => ({
5
+ name: "background-default";
6
+ number: 1;
7
+ } & import("./types.js").ColorMetadata) | ({
8
+ name: "background-tinted";
9
+ number: 2;
10
+ } & import("./types.js").ColorMetadata) | ({
11
+ name: "surface-default";
12
+ number: 3;
13
+ } & import("./types.js").ColorMetadata) | ({
14
+ name: "surface-tinted";
15
+ number: 4;
16
+ } & import("./types.js").ColorMetadata) | ({
17
+ name: "surface-hover";
18
+ number: 5;
19
+ } & import("./types.js").ColorMetadata) | ({
20
+ name: "surface-active";
21
+ number: 6;
22
+ } & import("./types.js").ColorMetadata) | ({
23
+ name: "border-subtle";
24
+ number: 7;
25
+ } & import("./types.js").ColorMetadata) | ({
26
+ name: "border-default";
27
+ number: 8;
28
+ } & import("./types.js").ColorMetadata) | ({
29
+ name: "border-strong";
30
+ number: 9;
31
+ } & import("./types.js").ColorMetadata) | ({
32
+ name: "text-subtle";
33
+ number: 10;
34
+ } & import("./types.js").ColorMetadata) | ({
35
+ name: "text-default";
36
+ number: 11;
37
+ } & import("./types.js").ColorMetadata) | ({
38
+ name: "base-default";
39
+ number: 12;
40
+ } & import("./types.js").ColorMetadata) | ({
41
+ name: "base-hover";
42
+ number: 13;
43
+ } & import("./types.js").ColorMetadata) | ({
44
+ name: "base-active";
45
+ number: 14;
46
+ } & import("./types.js").ColorMetadata) | ({
47
+ name: "base-contrast-subtle";
48
+ number: 15;
49
+ } & import("./types.js").ColorMetadata) | ({
50
+ name: "base-contrast-default";
51
+ number: 16;
52
+ } & import("./types.js").ColorMetadata);
53
+ //# sourceMappingURL=colorMetadata.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"colorMetadata.d.ts","sourceRoot":"","sources":["../../../src/colors/colorMetadata.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAMrD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,mBAsM3B,CAAC;AAIF,eAAO,MAAM,wBAAwB,WAAY,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAE3D,CAAC"}