@payfit/unity-themes 2.24.1 → 2.25.0

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 (57) hide show
  1. package/dist/css/unity.css +1653 -543
  2. package/dist/esm/components/unity-theme-provider.d.ts +25 -0
  3. package/dist/esm/components/unity-theme-provider.js +34 -0
  4. package/dist/esm/components/unity-theme-provider.test.d.ts +1 -0
  5. package/dist/esm/index.d.ts +1 -0
  6. package/dist/esm/index.js +8 -5
  7. package/dist/esm/scripts/actions/compose-multi-theme.d.ts +15 -0
  8. package/dist/esm/scripts/transforms/tailwind-color-token.d.ts +4 -3
  9. package/dist/esm/scripts/transforms/tailwind-grid-token.d.ts +2 -1
  10. package/dist/esm/scripts/transforms/tailwind-spacing-token.d.ts +1 -1
  11. package/dist/esm/scripts/transforms/tailwind-text-token.d.ts +1 -1
  12. package/dist/esm/scripts/transforms/tailwind-typography-token.d.ts +1 -4
  13. package/dist/esm/scripts/utils/prefix-transform.d.ts +4 -0
  14. package/dist/esm/utils/cn.d.ts +4 -3
  15. package/package.json +3 -2
  16. package/src/components/unity-theme-provider.stories.tsx +532 -0
  17. package/src/components/unity-theme-provider.test.tsx +150 -0
  18. package/src/components/unity-theme-provider.tsx +72 -0
  19. package/src/index.ts +8 -0
  20. package/src/scripts/actions/compose-multi-theme.ts +59 -0
  21. package/src/scripts/build.ts +261 -55
  22. package/src/scripts/formats/unity-theme.test.ts +180 -253
  23. package/src/scripts/formats/unity-theme.ts +27 -64
  24. package/src/scripts/transforms/tailwind-color-token.test.ts +18 -0
  25. package/src/scripts/transforms/tailwind-color-token.ts +7 -3
  26. package/src/scripts/transforms/tailwind-grid-token.test.ts +22 -0
  27. package/src/scripts/transforms/tailwind-grid-token.ts +7 -3
  28. package/src/scripts/transforms/tailwind-spacing-token.test.ts +9 -0
  29. package/src/scripts/transforms/tailwind-spacing-token.ts +15 -2
  30. package/src/scripts/transforms/tailwind-text-token.test.ts +18 -0
  31. package/src/scripts/transforms/tailwind-text-token.ts +15 -2
  32. package/src/scripts/transforms/tailwind-typography-token.test.ts +8 -2
  33. package/src/scripts/transforms/tailwind-typography-token.ts +5 -1
  34. package/src/scripts/utils/prefix-transform.test.ts +137 -0
  35. package/src/scripts/utils/prefix-transform.ts +16 -0
  36. package/src/utils/cn.ts +2 -2
  37. package/tokens/common/aspect-ratios.json +11 -0
  38. package/tokens/common/breakpoints.json +18 -0
  39. package/tokens/{text.json → common/font-sizes.json} +0 -28
  40. package/tokens/common/font-weights.json +18 -0
  41. package/tokens/{radii.json → common/radii.json} +0 -15
  42. package/tokens/{spacings.json → common/spacings.json} +0 -25
  43. package/tokens/legacy/radii.json +21 -0
  44. package/tokens/legacy/text.json +14 -0
  45. package/tokens/rebrand/colors.json +1400 -0
  46. package/tokens/rebrand/radii.json +21 -0
  47. package/tokens/rebrand/shadows.json +81 -0
  48. package/tokens/rebrand/text.json +14 -0
  49. package/tokens/rebrand/typography.json +329 -0
  50. package/dist/esm/scripts/formats/generators/header-generator.d.ts +0 -2
  51. package/src/scripts/formats/generators/header-generator.ts +0 -32
  52. /package/tokens/{animations.json → common/animations.json} +0 -0
  53. /package/tokens/{layout.json → common/layout.json} +0 -0
  54. /package/tokens/{sizes.json → common/sizes.json} +0 -0
  55. /package/tokens/{colors.json → legacy/colors.json} +0 -0
  56. /package/tokens/{shadows.json → legacy/shadows.json} +0 -0
  57. /package/tokens/{typography.json → legacy/typography.json} +0 -0
package/tokens/rebrand/radii.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "radius": {
3
+ "$type": "dimension",
4
+ "$description": "Semantic Corner radius scale for the design system",
5
+ "xs": {
6
+ "$value": "{radius.50}"
7
+ },
8
+ "sm": {
9
+ "$value": "{radius.75}"
10
+ },
11
+ "md": {
12
+ "$value": "{radius.100}"
13
+ },
14
+ "lg": {
15
+ "$value": "{radius.200}"
16
+ },
17
+ "xl": {
18
+ "$value": "{radius.300}"
19
+ }
20
+ }
21
+ }
package/tokens/rebrand/shadows.json ADDED
@@ -0,0 +1,81 @@
1
+ {
2
+ "shadow": {
3
+ "$type": "shadow",
4
+ "$description": "Base Shadow tokens for the design system",
5
+ "canvas": {
6
+ "$value": "none"
7
+ },
8
+ "100": {
9
+ "$value": {
10
+ "color": "{color.utility.shadow.100}",
11
+ "offsetX": "0px",
12
+ "offsetY": "1px",
13
+ "blur": "4px",
14
+ "spread": "1px"
15
+ }
16
+ },
17
+ "200": {
18
+ "$value": {
19
+ "color": "{color.utility.shadow.200}",
20
+ "offsetX": "0px",
21
+ "offsetY": "2px",
22
+ "blur": "8px",
23
+ "spread": "1px"
24
+ }
25
+ },
26
+ "300": {
27
+ "$value": {
28
+ "color": "{color.utility.shadow.300}",
29
+ "offsetX": "0px",
30
+ "offsetY": "5px",
31
+ "blur": "10px",
32
+ "spread": "1px"
33
+ }
34
+ },
35
+ "400": {
36
+ "$value": {
37
+ "color": "{color.utility.shadow.400}",
38
+ "offsetX": "0px",
39
+ "offsetY": "8px",
40
+ "blur": "18px",
41
+ "spread": "2px"
42
+ }
43
+ },
44
+ "500": {
45
+ "$value": {
46
+ "color": "{color.utility.shadow.500}",
47
+ "offsetX": "0px",
48
+ "offsetY": "8px",
49
+ "blur": "24px",
50
+ "spread": "4px"
51
+ }
52
+ },
53
+ "600": {
54
+ "$value": {
55
+ "color": "{color.utility.shadow.600}",
56
+ "offsetX": "0px",
57
+ "offsetY": "15px",
58
+ "blur": "30px",
59
+ "spread": "5px"
60
+ }
61
+ },
62
+ "raising": {
63
+ "$value": "{shadow.100}"
64
+ },
65
+ "floating": {
66
+ "$value": "{shadow.200}"
67
+ },
68
+ "levitating": {
69
+ "$value": "{shadow.300}"
70
+ },
71
+ "flying": {
72
+ "$value": "{shadow.400}"
73
+ },
74
+ "soaring": {
75
+ "$value": "{shadow.500}"
76
+ },
77
+ "summit": {
78
+ "$value": "{shadow.600}"
79
+ }
80
+ }
81
+ }
package/tokens/rebrand/text.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "font": {
3
+ "$type": "fontFamily",
4
+ "serif": {
5
+ "$value": ["Source Serif 4", "serif"]
6
+ },
7
+ "sans": {
8
+ "$value": ["Inter", "sans-serif"]
9
+ },
10
+ "mono": {
11
+ "$value": ["Roboto Mono", "monospace"]
12
+ }
13
+ }
14
+ }
package/tokens/rebrand/typography.json ADDED
@@ -0,0 +1,329 @@
1
+ {
2
+ "typography": {
3
+ "$type": "typography",
4
+ "display-heading": {
5
+ "default": {
6
+ "$value": {
7
+ "fontFamily": "{font.serif}",
8
+ "fontSize": "{text.1000}",
9
+ "fontWeight": "{font-weight.semibold}",
10
+ "lineHeight": 1.25
11
+ }
12
+ },
13
+ "sm": {
14
+ "$value": {
15
+ "fontFamily": "{font.serif}",
16
+ "fontSize": "{text.1000}",
17
+ "fontWeight": "{font-weight.semibold}",
18
+ "lineHeight": 1.25
19
+ }
20
+ }
21
+ },
22
+ "h1": {
23
+ "default": {
24
+ "$value": {
25
+ "fontFamily": "{font.serif}",
26
+ "fontSize": "{text.800}",
27
+ "fontWeight": "{font-weight.semibold}",
28
+ "lineHeight": 1.2
29
+ }
30
+ },
31
+ "sm": {
32
+ "$value": {
33
+ "fontFamily": "{font.serif}",
34
+ "fontWeight": "{font-weight.semibold}",
35
+ "lineHeight": 1.286,
36
+ "fontSize": "{text.600}"
37
+ }
38
+ }
39
+ },
40
+ "h2": {
41
+ "default": {
42
+ "$value": {
43
+ "fontFamily": "{font.sans}",
44
+ "fontSize": "{text.400}",
45
+ "fontWeight": "{font-weight.semibold}",
46
+ "lineHeight": 1.273
47
+ }
48
+ },
49
+ "sm": {
50
+ "$value": {
51
+ "fontFamily": "{font.sans}",
52
+ "fontWeight": "{font-weight.semibold}",
53
+ "lineHeight": 1.333,
54
+ "fontSize": "{text.500}"
55
+ }
56
+ }
57
+ },
58
+ "h3": {
59
+ "default": {
60
+ "$value": {
61
+ "fontFamily": "{font.sans}",
62
+ "fontSize": "{text.200}",
63
+ "fontWeight": "{font-weight.semibold}",
64
+ "lineHeight": 1.333
65
+ }
66
+ },
67
+ "sm": {
68
+ "$value": {
69
+ "fontFamily": "{font.sans}",
70
+ "fontWeight": "{font-weight.semibold}",
71
+ "lineHeight": 1.2,
72
+ "fontSize": "{text.300}"
73
+ }
74
+ }
75
+ },
76
+ "h4": {
77
+ "default": {
78
+ "$value": {
79
+ "fontFamily": "{font.sans}",
80
+ "fontSize": "{text.100}",
81
+ "fontWeight": "{font-weight.semibold}",
82
+ "lineHeight": 1.125
83
+ }
84
+ },
85
+ "sm": {
86
+ "$value": {
87
+ "fontFamily": "{font.sans}",
88
+ "fontWeight": "{font-weight.semibold}",
89
+ "lineHeight": 1.333,
90
+ "fontSize": "{text.200}"
91
+ }
92
+ }
93
+ },
94
+ "overline": {
95
+ "default": {
96
+ "$value": {
97
+ "fontFamily": "{font.sans}",
98
+ "fontSize": "{text.100}",
99
+ "fontWeight": "{font-weight.medium}",
100
+ "lineHeight": 1.5
101
+ }
102
+ },
103
+ "sm": {
104
+ "$value": {
105
+ "fontFamily": "{font.sans}",
106
+ "fontWeight": "{font-weight.medium}",
107
+ "lineHeight": 1.5,
108
+ "fontSize": "{text.100}"
109
+ }
110
+ }
111
+ },
112
+ "subtitle": {
113
+ "default": {
114
+ "$value": {
115
+ "fontFamily": "{font.sans}",
116
+ "fontSize": "{text.100}",
117
+ "fontWeight": "{font-weight.regular}",
118
+ "lineHeight": 1.5
119
+ }
120
+ },
121
+ "sm": {
122
+ "$value": {
123
+ "fontFamily": "{font.sans}",
124
+ "fontWeight": "{font-weight.regular}",
125
+ "lineHeight": 1.333,
126
+ "fontSize": "{text.100}"
127
+ }
128
+ }
129
+ },
130
+ "display-title": {
131
+ "default": {
132
+ "$value": {
133
+ "fontFamily": "{font.sans}",
134
+ "fontSize": "{text.300}",
135
+ "fontWeight": "{font-weight.semibold}",
136
+ "lineHeight": 1.4
137
+ }
138
+ },
139
+ "sm": {
140
+ "$value": {
141
+ "fontFamily": "{font.sans}",
142
+ "fontWeight": "{font-weight.semibold}",
143
+ "lineHeight": 1.333,
144
+ "fontSize": "{text.500}"
145
+ }
146
+ }
147
+ },
148
+ "display-body": {
149
+ "default": {
150
+ "$value": {
151
+ "fontFamily": "{font.sans}",
152
+ "fontSize": "{text.100}",
153
+ "fontWeight": "{font-weight.regular}",
154
+ "lineHeight": 1.5
155
+ }
156
+ },
157
+ "sm": {
158
+ "$value": {
159
+ "fontFamily": "{font.sans}",
160
+ "fontWeight": "{font-weight.regular}",
161
+ "lineHeight": 1.556,
162
+ "fontSize": "{text.200}"
163
+ }
164
+ }
165
+ },
166
+ "body": {
167
+ "default": {
168
+ "$value": {
169
+ "fontFamily": "{font.sans}",
170
+ "fontSize": "{text.100}",
171
+ "fontWeight": "{font-weight.regular}",
172
+ "lineHeight": 1.5
173
+ }
174
+ },
175
+ "sm": {
176
+ "$value": {
177
+ "fontFamily": "{font.sans}",
178
+ "fontWeight": "{font-weight.regular}",
179
+ "lineHeight": 1.571,
180
+ "fontSize": "{text.75}"
181
+ }
182
+ }
183
+ },
184
+ "body-strong": {
185
+ "default": {
186
+ "$value": {
187
+ "fontFamily": "{font.sans}",
188
+ "fontSize": "{text.100}",
189
+ "fontWeight": "{font-weight.medium}",
190
+ "lineHeight": 1.5
191
+ }
192
+ },
193
+ "sm": {
194
+ "$value": {
195
+ "fontFamily": "{font.sans}",
196
+ "fontWeight": "{font-weight.medium}",
197
+ "lineHeight": 1.571,
198
+ "fontSize": "{text.75}"
199
+ }
200
+ }
201
+ },
202
+ "body-small": {
203
+ "default": {
204
+ "$value": {
205
+ "fontFamily": "{font.sans}",
206
+ "fontSize": "{text.50}",
207
+ "fontWeight": "{font-weight.regular}",
208
+ "lineHeight": 1.667
209
+ }
210
+ },
211
+ "sm": {
212
+ "$value": {
213
+ "fontFamily": "{font.sans}",
214
+ "fontWeight": "{font-weight.regular}",
215
+ "lineHeight": 1.667,
216
+ "fontSize": "{text.50}"
217
+ }
218
+ }
219
+ },
220
+ "body-small-strong": {
221
+ "default": {
222
+ "$value": {
223
+ "fontFamily": "{font.sans}",
224
+ "fontSize": "{text.50}",
225
+ "fontWeight": "{font-weight.medium}",
226
+ "lineHeight": 1.667
227
+ }
228
+ },
229
+ "sm": {
230
+ "$value": {
231
+ "fontFamily": "{font.sans}",
232
+ "fontWeight": "{font-weight.medium}",
233
+ "lineHeight": 1.667,
234
+ "fontSize": "{text.50}"
235
+ }
236
+ }
237
+ },
238
+ "body-large": {
239
+ "default": {
240
+ "$value": {
241
+ "fontFamily": "{font.sans}",
242
+ "fontSize": "{text.200}",
243
+ "fontWeight": "{font-weight.regular}",
244
+ "lineHeight": 1.556
245
+ }
246
+ },
247
+ "sm": {
248
+ "$value": {
249
+ "fontFamily": "{font.sans}",
250
+ "fontWeight": "{font-weight.regular}",
251
+ "lineHeight": 1.5,
252
+ "fontSize": "{text.100}"
253
+ }
254
+ }
255
+ },
256
+ "body-large-strong": {
257
+ "default": {
258
+ "$value": {
259
+ "fontFamily": "{font.sans}",
260
+ "fontSize": "{text.200}",
261
+ "fontWeight": "{font-weight.medium}",
262
+ "lineHeight": 1.556
263
+ }
264
+ },
265
+ "sm": {
266
+ "$value": {
267
+ "fontFamily": "{font.sans}",
268
+ "fontWeight": "{font-weight.medium}",
269
+ "lineHeight": 1.5,
270
+ "fontSize": "{text.100}"
271
+ }
272
+ }
273
+ },
274
+ "action": {
275
+ "default": {
276
+ "$value": {
277
+ "fontFamily": "{font.sans}",
278
+ "fontSize": "{text.100}",
279
+ "fontWeight": "{font-weight.medium}",
280
+ "lineHeight": 1.5
281
+ }
282
+ },
283
+ "sm": {
284
+ "$value": {
285
+ "fontFamily": "{font.sans}",
286
+ "fontWeight": "{font-weight.medium}",
287
+ "lineHeight": 1.571,
288
+ "fontSize": "{text.75}"
289
+ }
290
+ }
291
+ },
292
+ "action-small": {
293
+ "default": {
294
+ "$value": {
295
+ "fontFamily": "{font.sans}",
296
+ "fontSize": "{text.50}",
297
+ "fontWeight": "{font-weight.medium}",
298
+ "lineHeight": 1.667
299
+ }
300
+ },
301
+ "sm": {
302
+ "$value": {
303
+ "fontFamily": "{font.sans}",
304
+ "fontWeight": "{font-weight.medium}",
305
+ "lineHeight": 1.667,
306
+ "fontSize": "{text.50}"
307
+ }
308
+ }
309
+ },
310
+ "action-large": {
311
+ "default": {
312
+ "$value": {
313
+ "fontFamily": "{font.sans}",
314
+ "fontSize": "{text.200}",
315
+ "fontWeight": "{font-weight.medium}",
316
+ "lineHeight": 1.556
317
+ }
318
+ },
319
+ "sm": {
320
+ "$value": {
321
+ "fontFamily": "{font.sans}",
322
+ "fontWeight": "{font-weight.medium}",
323
+ "lineHeight": 1.5,
324
+ "fontSize": "{text.100}"
325
+ }
326
+ }
327
+ }
328
+ }
329
+ }
package/dist/esm/scripts/formats/generators/header-generator.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { FormatFnArguments } from 'style-dictionary/types';
2
- export declare function generateThemeHeader(args: FormatFnArguments): Promise<string>;
package/src/scripts/formats/generators/header-generator.ts DELETED
@@ -1,32 +0,0 @@
1
- import type { FormatFnArguments } from 'style-dictionary/types'
2
-
3
- import { fileHeader } from 'style-dictionary/utils'
4
-
5
- export async function generateThemeHeader(
6
- args: FormatFnArguments,
7
- ): Promise<string> {
8
- const { file, options } = args
9
- const themeHeader = await fileHeader({ file })
10
-
11
- const fontImports = [
12
- '@import "@fontsource/inter";',
13
- '@import "@fontsource/inter/500.css";',
14
- '@import "@fontsource/inter/600.css";',
15
- '@import "@fontsource/inter/700.css";',
16
- '@import "@fontsource/source-serif-4";',
17
- '@import "@fontsource/source-serif-4/500.css";',
18
- '@import "@fontsource/source-serif-4/600.css";',
19
- '@import "@fontsource/source-serif-4/700.css";',
20
- '@import "@fontsource/roboto-mono";',
21
- ].join('\n')
22
-
23
- const tailwindImport = options.prefix
24
- ? `@import "tailwindcss" prefix(${options.prefix});`
25
- : '@import "tailwindcss";'
26
-
27
- return `
28
- ${themeHeader}
29
- ${fontImports}
30
- ${tailwindImport}
31
- `
32
- }
/package/tokens/{layout.json → common/layout.json} RENAMED
File without changes
/package/tokens/{sizes.json → common/sizes.json} RENAMED
File without changes
/package/tokens/{colors.json → legacy/colors.json} RENAMED
File without changes
/package/tokens/{shadows.json → legacy/shadows.json} RENAMED
File without changes