@digdir/designsystemet 0.0.3 → 0.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 (51) hide show
  1. package/dist/build/bin/designsystemet.js +47 -0
  2. package/dist/build/src/codemods/css-var-codemod.js +36 -0
  3. package/dist/build/src/migrations/index.js +8 -0
  4. package/dist/build/src/migrations/light-dark.js +22 -0
  5. package/dist/build/src/migrations/prefix-ds.js +7 -0
  6. package/dist/build/src/migrations/tokens-v2.js +210 -0
  7. package/dist/build/src/tokens/build.js +140 -0
  8. package/dist/build/src/tokens/formatters.js +78 -0
  9. package/dist/build/src/tokens/noCase.js +30 -0
  10. package/dist/build/src/tokens/transformers.js +39 -0
  11. package/dist/build/tsconfig.tsbuildinfo +1 -0
  12. package/dist/types/bin/designsystemet.d.ts +3 -0
  13. package/dist/types/bin/designsystemet.d.ts.map +1 -0
  14. package/dist/types/src/codemods/css-var-codemod.d.ts +7 -0
  15. package/dist/types/src/codemods/css-var-codemod.d.ts.map +1 -0
  16. package/dist/types/src/migrations/index.d.ts +7 -0
  17. package/dist/types/src/migrations/index.d.ts.map +1 -0
  18. package/dist/types/src/migrations/light-dark.d.ts +3 -0
  19. package/dist/types/src/migrations/light-dark.d.ts.map +1 -0
  20. package/dist/types/src/migrations/prefix-ds.d.ts +3 -0
  21. package/dist/types/src/migrations/prefix-ds.d.ts.map +1 -0
  22. package/dist/types/src/migrations/tokens-v2.d.ts +3 -0
  23. package/dist/types/src/migrations/tokens-v2.d.ts.map +1 -0
  24. package/dist/types/src/tokens/build.d.ts +7 -0
  25. package/dist/types/src/tokens/build.d.ts.map +1 -0
  26. package/dist/types/src/tokens/formatters.d.ts +10 -0
  27. package/dist/types/src/tokens/formatters.d.ts.map +1 -0
  28. package/dist/types/src/tokens/noCase.d.ts +11 -0
  29. package/dist/types/src/tokens/noCase.d.ts.map +1 -0
  30. package/dist/types/src/tokens/transformers.d.ts +5 -0
  31. package/dist/types/src/tokens/transformers.d.ts.map +1 -0
  32. package/package.json +6 -4
  33. package/dist/bin/designsystemet.js +0 -43
  34. package/dist/chunk-3INHRMDA.js +0 -30
  35. package/dist/chunk-AFUBGWSA.js +0 -15
  36. package/dist/chunk-AH6WYHXT.js +0 -219
  37. package/dist/chunk-F6JN3G6R.js +0 -33
  38. package/dist/chunk-FSFXGZ5S.js +0 -48
  39. package/dist/chunk-HG7XELK3.js +0 -79
  40. package/dist/chunk-N6YJGJKH.js +0 -38
  41. package/dist/chunk-Q4LKHGOS.js +0 -153
  42. package/dist/chunk-XTBS6KQY.js +0 -20
  43. package/dist/src/codemods/css-var-codemod.js +0 -6
  44. package/dist/src/migrations/index.js +0 -10
  45. package/dist/src/migrations/light-dark.js +0 -7
  46. package/dist/src/migrations/prefix-ds.js +0 -7
  47. package/dist/src/migrations/tokens-v2.js +0 -7
  48. package/dist/src/tokens/build.js +0 -9
  49. package/dist/src/tokens/formatters.js +0 -8
  50. package/dist/src/tokens/noCase.js +0 -6
  51. package/dist/src/tokens/transformers.js +0 -11
@@ -1,30 +0,0 @@
1
- import {
2
- cssVarCodemod
3
- } from "./chunk-N6YJGJKH.js";
4
-
5
- // src/migrations/light-dark.ts
6
- var light_dark_default = (glob) => cssVarCodemod({
7
- globPath: glob,
8
- dictionary: {
9
- "--fds-semantic-surface-first-light": "--fds-semantic-surface-first-subtle",
10
- "--fds-semantic-surface-first-light-hover": "--fds-semantic-surface-first-subtle-hover",
11
- "--fds-semantic-surface-first-light-active": "--fds-semantic-surface-first-subtle-active",
12
- "--fds-semantic-surface-first-dark": "--fds-semantic-surface-first-strong",
13
- "--fds-semantic-surface-second-light": "--fds-semantic-surface-second-subtle",
14
- "--fds-semantic-surface-second-light-hover": "--fds-semantic-surface-second-subtle-hover",
15
- "--fds-semantic-surface-second-light-active": "--fds-semantic-surface-second-subtle-active",
16
- "--fds-semantic-surface-second-dark": "--fds-semantic-surface-second-strong",
17
- "--fds-semantic-surface-third-light": "--fds-semantic-surface-third-subtle",
18
- "--fds-semantic-surface-third-light-hover": "--fds-semantic-surface-third-subtle-hover",
19
- "--fds-semantic-surface-third-light-active": "--fds-semantic-surface-third-subtle-active",
20
- "--fds-semantic-surface-third-dark": "--fds-semantic-surface-third-strong",
21
- "--fds-semantic-surface-neutral-dark": "--fds-semantic-surface-neutral-strong",
22
- "--fds-semantic-surface-neutral-dark-hover": "--fds-semantic-surface-neutral-strong-hover",
23
- "--fds-semantic-border-action-dark": "--fds-semantic-border-action-strong",
24
- "--fds-semantic-border-action-dark-hover": "--fds-semantic-border-action-strong-hover"
25
- }
26
- });
27
-
28
- export {
29
- light_dark_default
30
- };
@@ -1,15 +0,0 @@
1
- import {
2
- cssVarCodemod
3
- } from "./chunk-N6YJGJKH.js";
4
-
5
- // src/migrations/prefix-ds.ts
6
- var prefix_ds_default = (glob) => cssVarCodemod({
7
- globPath: glob,
8
- dictionary: {
9
- "--fds": "--ds"
10
- }
11
- });
12
-
13
- export {
14
- prefix_ds_default
15
- };
@@ -1,219 +0,0 @@
1
- import {
2
- cssVarCodemod
3
- } from "./chunk-N6YJGJKH.js";
4
-
5
- // src/migrations/tokens-v2.ts
6
- var tokens_v2_default = (glob) => cssVarCodemod({
7
- globPath: glob,
8
- dictionary: {
9
- "--fds-semantic-surface-first-light": "--fds-color-brand1-surface-default",
10
- "--fds-semantic-surface-first-light-hover": "--fds-color-brand1-surface-hover",
11
- "--fds-semantic-surface-first-light-active": "--fds-color-brand1-surface-active",
12
- "--fds-semantic-surface-first-dark": "",
13
- "--fds-semantic-surface-second-light": "--fds-color-brand2-surface-default",
14
- "--fds-semantic-surface-second-light-hover": "--fds-color-brand2-surface-hover",
15
- "--fds-semantic-surface-second-light-active": "--fds-color-brand2-surface-active",
16
- "--fds-semantic-surface-second-dark": "",
17
- "--fds-semantic-surface-third-light": "--fds-color-brand3-surface-default",
18
- "--fds-semantic-surface-third-light-hover": "--fds-color-brand3-surface-hover",
19
- "--fds-semantic-surface-third-light-active": "--fds-color-brand3-surface-active",
20
- "--fds-semantic-surface-third-dark": "",
21
- "--fds-semantic-surface-action-first-subtle": "--fds-color-accent-surface-default",
22
- "--fds-semantic-surface-action-first-subtle-hover": "--fds-color-accent-surface-hover",
23
- "--fds-semantic-surface-action-first-default": "--fds-color-accent-base-default",
24
- "--fds-semantic-surface-action-first-hover": "--fds-color-accent-base-hover",
25
- "--fds-semantic-surface-action-first-active": "--fds-color-accent-base-active",
26
- "--fds-semantic-surface-action-first-no_fill": "--fds-color-accent-contrast-first",
27
- "--fds-semantic-surface-action-first-no_fill-hover": "--fds-color-accent-surface-default",
28
- "--fds-semantic-surface-action-first-no_fill-active": "--fds-color-accent-surface-hover",
29
- "--fds-semantic-surface-action-second-subtle": "--fds-color-accent-surface-default",
30
- "--fds-semantic-surface-action-second-subtle-hover": "--fds-color-accent-surface-hover",
31
- "--fds-semantic-surface-action-second-default": "--fds-color-accent-base-default",
32
- "--fds-semantic-surface-action-second-hover": "--fds-color-accent-base-hover",
33
- "--fds-semantic-surface-action-second-active": "--fds-color-accent-base-active",
34
- "--fds-semantic-surface-action-second-no_fill": "--fds-color-accent-contrast-first",
35
- "--fds-semantic-surface-action-second-no_fill-hover": "--fds-color-accent-surface-default",
36
- "--fds-semantic-surface-action-second-no_fill-active": "--fds-color-accent-surface-hover",
37
- "--fds-semantic-surface-action-subtle": "--fds-color-accent-surface-default",
38
- "--fds-semantic-surface-action-subtle-hover": "--fds-color-accent-surface-hover",
39
- "--fds-semantic-surface-action-default": "--fds-color-accent-base-default",
40
- "--fds-semantic-surface-action-hover": "--fds-color-accent-base-hover",
41
- "--fds-semantic-surface-action-active": "--fds-color-accent-base-active",
42
- "--fds-semantic-surface-action-no_fill": "--fds-color-accent-contrast-first",
43
- "--fds-semantic-surface-action-no_fill-hover": "--fds-color-accent-surface-default",
44
- "--fds-semantic-surface-action-no_fill-active": "--fds-color-accent-surface-hover",
45
- "--fds-semantic-surface-action-checked": "--fds-color-accent-base-default",
46
- "--fds-semantic-surface-neutral-default": "--fds-color-neutral-background-default",
47
- "--fds-semantic-surface-neutral-selected": "",
48
- "--fds-semantic-surface-neutral-subtle": "--fds-color-neutral-background-subtle",
49
- "--fds-semantic-surface-neutral-subtle-hover": "--fds-color-neutral-surface-default",
50
- "--fds-semantic-surface-neutral-dark": "--fds-color-neutral-base-default",
51
- "--fds-semantic-surface-neutral-dark-hover": "--fds-color-neutral-base-hover",
52
- "--fds-semantic-surface-neutral-inverted": "",
53
- "--fds-semantic-surface-success-subtle": "--fds-color-success-surface-default",
54
- "--fds-semantic-surface-success-subtle-hover": "--fds-color-success-surface-hover",
55
- "--fds-semantic-surface-success-default": "--fds-color-success-base-default",
56
- "--fds-semantic-surface-success-hover": "--fds-color-success-base-hover",
57
- "--fds-semantic-surface-success-active": "--fds-color-success-base-active",
58
- "--fds-semantic-surface-success-no_fill": "--fds-color-success-contrast-first",
59
- "--fds-semantic-surface-success-no_fill-hover": "--fds-color-success-surface-default",
60
- "--fds-semantic-surface-success-no_fill-active": "--fds-color-success-surface-hover",
61
- "--fds-semantic-surface-warning-subtle": "--fds-color-warning-surface-default",
62
- "--fds-semantic-surface-warning-subtle-hover": "--fds-color-warning-surface-hover",
63
- "--fds-semantic-surface-warning-default": "--fds-color-warning-base-default",
64
- "--fds-semantic-surface-warning-default-hover": "--fds-color-warning-base-hover",
65
- "--fds-semantic-surface-danger-subtle": "--fds-color-danger-surface-default",
66
- "--fds-semantic-surface-danger-subtle-hover": "--fds-color-danger-surface-hover",
67
- "--fds-semantic-surface-danger-default": "--fds-color-danger-base-default",
68
- "--fds-semantic-surface-danger-hover": "--fds-color-danger-base-hover",
69
- "--fds-semantic-surface-danger-active": "--fds-color-danger-base-active",
70
- "--fds-semantic-surface-danger-no_fill": "--fds-color-danger-contrast-first",
71
- "--fds-semantic-surface-danger-no_fill-hover": "--fds-color-danger-surface-default",
72
- "--fds-semantic-surface-danger-no_fill-active": "--fds-color-danger-surface-hover",
73
- "--fds-semantic-surface-info-subtle": "",
74
- "--fds-semantic-surface-info-subtle-hover": "",
75
- "--fds-semantic-surface-on_inverted-default": "",
76
- "--fds-semantic-surface-on_inverted-hover": "",
77
- "--fds-semantic-surface-on_inverted-active": "",
78
- "--fds-semantic-surface-on_inverted-no_fill": "",
79
- "--fds-semantic-surface-on_inverted-no_fill-hover": "",
80
- "--fds-semantic-surface-on_inverted-no_fill-active": "",
81
- "--fds-semantic-surface-focus-default": "",
82
- "--fds-semantic-border-first-default": "",
83
- "--fds-semantic-border-first-hover": "",
84
- "--fds-semantic-border-first-active": "",
85
- "--fds-semantic-border-second-default": "",
86
- "--fds-semantic-border-second-hover": "",
87
- "--fds-semantic-border-second-active": "",
88
- "--fds-semantic-border-third-default": "",
89
- "--fds-semantic-border-third-hover": "",
90
- "--fds-semantic-border-third-active": "",
91
- "--fds-semantic-border-action-first-subtle": "",
92
- "--fds-semantic-border-action-first-subtle-hover": "",
93
- "--fds-semantic-border-action-first-default": "",
94
- "--fds-semantic-border-action-first-hover": "",
95
- "--fds-semantic-border-action-first-active": "",
96
- "--fds-semantic-border-action-second-subtle": "",
97
- "--fds-semantic-border-action-second-subtle-hover": "",
98
- "--fds-semantic-border-action-second-default": "",
99
- "--fds-semantic-border-action-second-hover": "",
100
- "--fds-semantic-border-action-second-active": "",
101
- "--fds-semantic-border-action-subtle": "",
102
- "--fds-semantic-border-action-subtle-hover": "",
103
- "--fds-semantic-border-action-default": "",
104
- "--fds-semantic-border-action-hover": "",
105
- "--fds-semantic-border-action-active": "",
106
- "--fds-semantic-border-action-dark": "",
107
- "--fds-semantic-border-action-dark-hover": "",
108
- "--fds-semantic-border-info-default": "",
109
- "--fds-semantic-border-neutral-default": "",
110
- "--fds-semantic-border-neutral-subtle": "",
111
- "--fds-semantic-border-neutral-strong": "",
112
- "--fds-semantic-border-success-default": "",
113
- "--fds-semantic-border-success-hover": "",
114
- "--fds-semantic-border-success-active": "",
115
- "--fds-semantic-border-warning-default": "",
116
- "--fds-semantic-border-warning-hover": "",
117
- "--fds-semantic-border-warning-active": "",
118
- "--fds-semantic-border-danger-default": "",
119
- "--fds-semantic-border-danger-hover": "",
120
- "--fds-semantic-border-danger-active": "",
121
- "--fds-semantic-border-focus-outline": "",
122
- "--fds-semantic-border-focus-boxshadow": "",
123
- "--fds-semantic-border-on_inverted-default": "",
124
- "--fds-semantic-border-input-default": "",
125
- "--fds-semantic-border-input-hover": "",
126
- "--fds-semantic-border-divider-default": "",
127
- "--fds-semantic-border-divider-subtle": "",
128
- "--fds-semantic-border-divider-strong": "",
129
- "--fds-semantic-text-action-first-default": "",
130
- "--fds-semantic-text-action-first-hover": "",
131
- "--fds-semantic-text-action-first-active": "",
132
- "--fds-semantic-text-action-first-on_action": "",
133
- "--fds-semantic-text-action-second-default": "",
134
- "--fds-semantic-text-action-second-hover": "",
135
- "--fds-semantic-text-action-second-active": "",
136
- "--fds-semantic-text-action-second-on_action": "",
137
- "--fds-semantic-text-action-default": "",
138
- "--fds-semantic-text-action-hover": "",
139
- "--fds-semantic-text-action-active": "",
140
- "--fds-semantic-text-action-on_action": "",
141
- "--fds-semantic-text-success-default": "",
142
- "--fds-semantic-text-success-hover": "",
143
- "--fds-semantic-text-success-active": "",
144
- "--fds-semantic-text-success-on_success": "",
145
- "--fds-semantic-text-success-on_success_subtle": "",
146
- "--fds-semantic-text-neutral-default": "",
147
- "--fds-semantic-text-neutral-subtle": "",
148
- "--fds-semantic-text-neutral-on_inverted": "",
149
- "--fds-semantic-text-warning-default": "",
150
- "--fds-semantic-text-warning-icon_warning": "",
151
- "--fds-semantic-text-warning-on_warning": "",
152
- "--fds-semantic-text-danger-default": "",
153
- "--fds-semantic-text-danger-hover": "",
154
- "--fds-semantic-text-danger-active": "",
155
- "--fds-semantic-text-danger-on_danger": "",
156
- "--fds-semantic-text-danger-on_danger_subtle": "",
157
- "--fds-semantic-text-visited-default": "",
158
- "--fds-semantic-background-default": "",
159
- "--fds-semantic-background-subtle": "",
160
- "--fds-typography-heading-2xlarge": "",
161
- "--fds-typography-heading-xlarge": "",
162
- "--fds-typography-heading-large": "",
163
- "--fds-typography-heading-medium": "",
164
- "--fds-typography-heading-small": "",
165
- "--fds-typography-heading-xsmall": "",
166
- "--fds-typography-heading-xxsmall": "",
167
- "--fds-typography-ingress-large": "",
168
- "--fds-typography-ingress-medium": "",
169
- "--fds-typography-ingress-small": "",
170
- "--fds-typography-ingress-xsmall": "",
171
- "--fds-typography-paragraph-large": "",
172
- "--fds-typography-paragraph-medium": "",
173
- "--fds-typography-paragraph-small": "",
174
- "--fds-typography-paragraph-xsmall": "",
175
- "--fds-typography-paragraph-short-large": "",
176
- "--fds-typography-paragraph-short-medium": "",
177
- "--fds-typography-paragraph-short-small": "",
178
- "--fds-typography-paragraph-short-xsmall": "",
179
- "--fds-typography-paragraph-long-large": "",
180
- "--fds-typography-paragraph-long-medium": "",
181
- "--fds-typography-paragraph-long-small": "",
182
- "--fds-typography-paragraph-long-xsmall": "",
183
- "--fds-typography-label-large": "",
184
- "--fds-typography-label-medium": "",
185
- "--fds-typography-label-small": "",
186
- "--fds-typography-label-xsmall": "",
187
- "--fds-typography-error_message-large": "",
188
- "--fds-typography-error_message-medium": "",
189
- "--fds-typography-error_message-small": "",
190
- "--fds-typography-error_message-xsmall": "",
191
- "--fds-typography-interactive-large": "--fds-typography-paragraph-short-large",
192
- "--fds-typography-interactive-medium": "--fds-typography-paragraph-short-medium",
193
- "--fds-typography-interactive-small": "--fds-typography-paragraph-short-small",
194
- "--fds-border_radius-interactive": "--fds-border-radius-md",
195
- "--fds-border_radius-small": "--fds-border-radius-sm",
196
- "--fds-border_radius-medium": "--fds-border-radius-md",
197
- "--fds-border_radius-large": "--fds-border-radius-lg",
198
- "--fds-border_radius-xlarge": "--fds-border-radius-xl",
199
- "--fds-border_radius-xxlarge": "--fds-border-radius-2xl",
200
- "--fds-border_radius-xxxlarge": "--fds-border-radius-3xl",
201
- "--fds-border_radius-xxxxlarge": "--fds-border-radius-4xl",
202
- "--fds-border_radius-full": "--fds-border-radius-full",
203
- "--fds-base_spacing": "[delete]",
204
- "--fds-base_sizing": "[delete]",
205
- "--fds-border_width-default": "--fds-border-width-default",
206
- "--fds-border_width-active": "--fds-border-width-active",
207
- "--fds-border_width-tab_focus": "--fds-border-width-tab_focus",
208
- // Skulle denne fjernes?
209
- "--fds-shadow-xsmall": "--fds-shadow-xs",
210
- "--fds-shadow-small": "--fds-shadow-sm",
211
- "--fds-shadow-medium": "--fds-shadow-md",
212
- "--fds-shadow-large": "--fds-shadow-lg",
213
- "--fds-shadow-xlarge": "--fds-shadow-xl"
214
- }
215
- });
216
-
217
- export {
218
- tokens_v2_default
219
- };
@@ -1,33 +0,0 @@
1
- // src/tokens/noCase.ts
2
- var lowerCase = (text = "") => text.toLowerCase();
3
- var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
4
- var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
5
- function noCase(input, options = {}) {
6
- const {
7
- splitRegexp = DEFAULT_SPLIT_REGEXP,
8
- stripRegexp = DEFAULT_STRIP_REGEXP,
9
- transform = lowerCase,
10
- delimiter = " "
11
- } = options;
12
- const result = replace(
13
- replace(input, splitRegexp, "$1\0$2"),
14
- stripRegexp,
15
- "\0"
16
- );
17
- let start = 0;
18
- let end = result.length;
19
- while (result.charAt(start) === "\0")
20
- start++;
21
- while (result.charAt(end - 1) === "\0")
22
- end--;
23
- return result.slice(start, end).split("\0").map(transform).join(delimiter);
24
- }
25
- function replace(input, re, value) {
26
- if (re instanceof RegExp)
27
- return input.replace(re, value);
28
- return re.reduce((input2, re2) => input2.replace(re2, value), input);
29
- }
30
-
31
- export {
32
- noCase
33
- };
@@ -1,48 +0,0 @@
1
- import {
2
- noCase
3
- } from "./chunk-F6JN3G6R.js";
4
-
5
- // src/tokens/transformers.ts
6
- var sizeRem = {
7
- name: "fds/size/toRem",
8
- type: "value",
9
- transitive: true,
10
- filter: (token) => ["sizing", "spacing"].includes(token.type) && !token.name.includes("base"),
11
- transform: (token, config) => {
12
- const baseFont = config.basePxFontSize || 16;
13
- const value = parseInt(token.value);
14
- if (value === 0) {
15
- return "0";
16
- }
17
- return `${value / baseFont}rem`;
18
- }
19
- };
20
- var nameKebab = {
21
- name: "name/cti/hierarchical-kebab",
22
- type: "name",
23
- transform: (token, options) => {
24
- return noCase([options?.prefix].concat(token.path).join("-"), {
25
- delimiter: "-",
26
- stripRegexp: /[^A-Z0-9_]+/gi
27
- });
28
- }
29
- };
30
- var typographyShorthand = {
31
- name: "typography/shorthand",
32
- type: "value",
33
- transitive: true,
34
- filter: (token) => token.type === "typography",
35
- transform: (token, config, options) => {
36
- const { usesDtcg } = options;
37
- const typography = usesDtcg ? token.$value : token.value;
38
- const baseFontPx = config.basePxFontSize || 16;
39
- const fontSize = `${parseInt(typography.fontSize) / baseFontPx}rem`;
40
- return `${typography.fontWeight} ${fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;
41
- }
42
- };
43
-
44
- export {
45
- sizeRem,
46
- nameKebab,
47
- typographyShorthand
48
- };
@@ -1,79 +0,0 @@
1
- // src/tokens/formatters.ts
2
- import * as R from "ramda";
3
- import { fileHeader, createPropertyFormatter, usesReferences, getReferences } from "style-dictionary/utils";
4
- var scopedReferenceVariables = {
5
- name: "css/variables-scoped-references",
6
- format: async function({ dictionary, file, options }) {
7
- const { allTokens, unfilteredTokens } = dictionary;
8
- const { usesDtcg, outputReferences } = options;
9
- const includeReferences = options.includeReferences;
10
- let referencedTokens = [];
11
- const format = createPropertyFormatter({
12
- outputReferences,
13
- dictionary,
14
- format: "css"
15
- });
16
- const formatWithReference = createPropertyFormatter({
17
- outputReferences: true,
18
- dictionary,
19
- format: "css"
20
- });
21
- const parseToken = (token, ignoreSource) => {
22
- const originalValue = usesDtcg ? token.original.$value : token.original.value;
23
- if (usesReferences(originalValue) && includeReferences(token)) {
24
- const refs = getReferences(originalValue, unfilteredTokens ? unfilteredTokens : {});
25
- referencedTokens = [...referencedTokens, ...refs.filter((x) => x.isSource)];
26
- return formatWithReference(token);
27
- }
28
- if (ignoreSource && !token.isSource) {
29
- return format(token);
30
- }
31
- };
32
- const tokens = allTokens.map((t) => parseToken(t, true)).filter((x) => x);
33
- const referenceTokens = referencedTokens.reduce((acc, token) => {
34
- if (acc.find((x) => x.name === token.name)) {
35
- return acc;
36
- }
37
- return [...acc, token];
38
- }, []).map((token) => format(token)).filter((formattedValue) => formattedValue);
39
- return fileHeader({ file }).then(
40
- (fileHeaderText) => `
41
- ${fileHeaderText}
42
- :root {
43
- ${referenceTokens.length > 0 ? referenceTokens.join("\n") : ""}
44
- ${tokens.join("\n")}
45
- }
46
- `
47
- );
48
- }
49
- };
50
- var groupByType = R.groupBy((token) => token.type);
51
- var removeUnwatedTokens = R.filter(
52
- (token) => !["fds-base_spacing", "fds-base_sizing"].includes(token.name)
53
- );
54
- var toCssVarName = R.pipe(R.split(":"), R.head, R.trim);
55
- var groupedTokens = {
56
- name: "groupedTokens",
57
- format: async function({ dictionary, file }) {
58
- const format = createPropertyFormatter({
59
- dictionary,
60
- format: "css"
61
- });
62
- const formatTokens = R.map((token) => ({
63
- ...token,
64
- name: toCssVarName(format(token))
65
- }));
66
- const processTokens = R.pipe(removeUnwatedTokens, formatTokens, groupByType);
67
- const tokens = processTokens(dictionary.allTokens);
68
- const content = Object.entries(tokens).map(
69
- ([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
70
- `
71
- ).join("\n");
72
- return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
73
- }
74
- };
75
-
76
- export {
77
- scopedReferenceVariables,
78
- groupedTokens
79
- };
@@ -1,38 +0,0 @@
1
- // src/codemods/css-var-codemod.ts
2
- import fs from "fs";
3
- import * as R from "ramda";
4
- import postcss from "postcss";
5
- import glob from "fast-glob";
6
- var cssVarCodemod = async ({ dictionary, globPath = "./**/*.css" }) => {
7
- const transformPlugin = {
8
- postcssPlugin: "Replaces referenced CSS variables",
9
- Declaration(decl) {
10
- Object.keys(dictionary).forEach((key) => {
11
- const newValue = dictionary[key];
12
- if (R.isEmpty(newValue)) {
13
- }
14
- if (newValue === "[delete]") {
15
- }
16
- if (decl.value.includes(key) && !R.isEmpty(newValue)) {
17
- decl.value = decl.value.replace(key, newValue);
18
- }
19
- });
20
- }
21
- };
22
- const plugins = [transformPlugin];
23
- const processor = postcss(plugins);
24
- const transform = async () => {
25
- const files = await glob(globPath, { ignore: ["node_modules/**"] });
26
- const filePromises = files.map(async (file) => {
27
- const contents = fs.readFileSync(file).toString();
28
- const result = await processor.process(contents, { from: void 0 });
29
- fs.writeFileSync(file, result.css);
30
- });
31
- await Promise.all(filePromises);
32
- };
33
- void transform();
34
- };
35
-
36
- export {
37
- cssVarCodemod
38
- };
@@ -1,153 +0,0 @@
1
- import {
2
- nameKebab,
3
- sizeRem,
4
- typographyShorthand
5
- } from "./chunk-FSFXGZ5S.js";
6
- import {
7
- groupedTokens,
8
- scopedReferenceVariables
9
- } from "./chunk-HG7XELK3.js";
10
-
11
- // src/tokens/build.ts
12
- import path from "path";
13
- import fs from "fs";
14
- import { registerTransforms, permutateThemes } from "@tokens-studio/sd-transforms";
15
- import StyleDictionary from "style-dictionary";
16
- import * as R from "ramda";
17
- void registerTransforms(StyleDictionary);
18
- var prefix = "fds";
19
- var basePxFontSize = 16;
20
- var separator = "_";
21
- var fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
22
- StyleDictionary.registerTransform(sizeRem);
23
- StyleDictionary.registerTransform(nameKebab);
24
- StyleDictionary.registerTransform(typographyShorthand);
25
- StyleDictionary.registerFormat(groupedTokens);
26
- StyleDictionary.registerFormat(scopedReferenceVariables);
27
- StyleDictionary.registerTransformGroup({
28
- name: "fds/css",
29
- transforms: [
30
- `ts/resolveMath`,
31
- nameKebab.name,
32
- sizeRem.name,
33
- typographyShorthand.name,
34
- "ts/color/modifiers",
35
- "ts/color/css/hexrgba",
36
- "ts/size/lineheight",
37
- "ts/size/px",
38
- "ts/shadow/css/shorthand"
39
- ]
40
- });
41
- var processThemeName = R.pipe(R.replace(`${separator}semantic`, ""), R.toLower, R.split(separator));
42
- var getCSSConfig = ({ fileName = "unknown", buildPath = "unknown" }) => {
43
- return {
44
- log: { verbosity: "verbose" },
45
- preprocessors: ["tokens-studio"],
46
- platforms: {
47
- css: {
48
- prefix,
49
- basePxFontSize,
50
- transformGroup: "fds/css",
51
- buildPath,
52
- files: [
53
- {
54
- destination: `${fileName}.css`,
55
- format: scopedReferenceVariables.name
56
- }
57
- ],
58
- options: {
59
- fileHeader,
60
- includeReferences: (token) => {
61
- if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) && R.includes("semantic/color", token.filePath)) {
62
- return true;
63
- }
64
- return false;
65
- }
66
- }
67
- }
68
- }
69
- };
70
- };
71
- var getStorefrontConfig = ({ fileName = "unknown", buildPath = "unknown" }) => {
72
- return {
73
- log: { verbosity: "verbose" },
74
- preprocessors: ["tokens-studio"],
75
- platforms: {
76
- storefront: {
77
- prefix,
78
- basePxFontSize,
79
- transformGroup: "fds/css",
80
- buildPath,
81
- files: [
82
- {
83
- destination: `${fileName}.ts`,
84
- format: groupedTokens.name,
85
- filter: (token) => {
86
- return R.not(R.includes("themes", token.filePath));
87
- }
88
- }
89
- ],
90
- options: {
91
- fileHeader
92
- }
93
- }
94
- }
95
- };
96
- };
97
- var sd = new StyleDictionary();
98
- async function run(options) {
99
- const tokensPath = options.tokens;
100
- const storefrontTokensOutPath = path.resolve("../../apps/storefront/tokens");
101
- const packageTokensOutPath = path.resolve("../../packages/theme/brand");
102
- const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensPath}/$themes.json`), "utf-8"));
103
- const themes = permutateThemes($themes, {
104
- separator
105
- });
106
- const getConfigs = (configCallback, outPath) => Object.entries(themes).map(([name, tokensets]) => {
107
- const updatedSets = tokensets.map((x) => `${tokensPath}/${x}.json`);
108
- const [fileName, folderName] = processThemeName(name);
109
- const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
110
- const [source, include] = R.partition(R.test(paritionPrimitives), updatedSets);
111
- const config_ = configCallback({
112
- fileName,
113
- buildPath: `${outPath}/${folderName}/`
114
- });
115
- const config = {
116
- ...config_,
117
- source,
118
- include
119
- };
120
- console.log(config);
121
- return [`${folderName}: ${fileName}`, config];
122
- }).sort();
123
- const tokenConfigs = getConfigs(getCSSConfig, packageTokensOutPath);
124
- const storefrontConfigs = getConfigs(getStorefrontConfig, storefrontTokensOutPath);
125
- if (tokenConfigs.length > 0) {
126
- console.log("\u{1F371} Staring token builder");
127
- console.log("\u27A1\uFE0F Tokens path: ", tokensPath);
128
- console.log("\n\u{1F3D7}\uFE0F Start building CSS tokens");
129
- await Promise.all(
130
- tokenConfigs.map(async ([name, config]) => {
131
- console.log(`\u{1F477} Processing ${name}`);
132
- const tokensPackageSD = await sd.extend(config);
133
- return tokensPackageSD.buildAllPlatforms();
134
- })
135
- );
136
- console.log("\u{1F3C1} Finished building package tokens!");
137
- }
138
- if (storefrontConfigs.length > 0) {
139
- console.log("\n\u{1F3D7}\uFE0F Started building storefront tokens\u2026");
140
- await Promise.all(
141
- storefrontConfigs.map(async ([name, config]) => {
142
- console.log(`\u{1F477} Processing ${name}`);
143
- const storefrontSD = await sd.extend(config);
144
- return storefrontSD.buildAllPlatforms();
145
- })
146
- );
147
- console.log("\u{1F3C1} Finished building storefront tokens!");
148
- }
149
- }
150
-
151
- export {
152
- run
153
- };
@@ -1,20 +0,0 @@
1
- import {
2
- light_dark_default
3
- } from "./chunk-3INHRMDA.js";
4
- import {
5
- prefix_ds_default
6
- } from "./chunk-AFUBGWSA.js";
7
- import {
8
- tokens_v2_default
9
- } from "./chunk-AH6WYHXT.js";
10
-
11
- // src/migrations/index.ts
12
- var migrations_default = {
13
- "tokens-rename-light-dark": light_dark_default,
14
- "tokens-v2": tokens_v2_default,
15
- "css-prefix-ds": prefix_ds_default
16
- };
17
-
18
- export {
19
- migrations_default
20
- };
@@ -1,6 +0,0 @@
1
- import {
2
- cssVarCodemod
3
- } from "../../chunk-N6YJGJKH.js";
4
- export {
5
- cssVarCodemod
6
- };
@@ -1,10 +0,0 @@
1
- import {
2
- migrations_default
3
- } from "../../chunk-XTBS6KQY.js";
4
- import "../../chunk-3INHRMDA.js";
5
- import "../../chunk-AFUBGWSA.js";
6
- import "../../chunk-AH6WYHXT.js";
7
- import "../../chunk-N6YJGJKH.js";
8
- export {
9
- migrations_default as default
10
- };
@@ -1,7 +0,0 @@
1
- import {
2
- light_dark_default
3
- } from "../../chunk-3INHRMDA.js";
4
- import "../../chunk-N6YJGJKH.js";
5
- export {
6
- light_dark_default as default
7
- };