@mmb-digital/design-system-web 0.1.4 → 0.1.6

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 (53) hide show
  1. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  2. package/.idea/design-system-web_2023-02-07.iml +8 -0
  3. package/.idea/inspectionProfiles/Project_Default.xml +7 -0
  4. package/.idea/modules.xml +8 -0
  5. package/.idea/php.xml +19 -0
  6. package/.idea/prettier.xml +6 -0
  7. package/.idea/vcs.xml +6 -0
  8. package/dist/jest.config.d.ts +7 -0
  9. package/package.json +1 -2
  10. package/rollup.config.js +1 -3
  11. package/tsconfig.json +1 -2
  12. package/src/@types/json.d.ts +0 -5
  13. package/src/@types/styledComponentCssProps.d.ts +0 -11
  14. package/src/@types/styledComponentTheme.d.ts +0 -9
  15. package/src/components/button/button.stories.tsx +0 -97
  16. package/src/components/button/button.styles.ts +0 -162
  17. package/src/components/button/button.test.tsx +0 -25
  18. package/src/components/button/button.tsx +0 -31
  19. package/src/components/button/button.types.ts +0 -33
  20. package/src/components/button/index.ts +0 -3
  21. package/src/components/form/hint/formHint.style.ts +0 -10
  22. package/src/components/form/hint/formHint.tsx +0 -13
  23. package/src/components/form/hint/formHint.types.ts +0 -5
  24. package/src/components/slider/slider/slider.stories.tsx +0 -176
  25. package/src/components/slider/slider/slider.style.ts +0 -29
  26. package/src/components/slider/slider/slider.tsx +0 -136
  27. package/src/components/slider/slider/slider.types.ts +0 -58
  28. package/src/components/slider/slider/sliderFunction/default/sliderFunctionDefault.ts +0 -21
  29. package/src/components/slider/slider/sliderFunction/default/sliderStep.test.ts +0 -90
  30. package/src/components/slider/slider/sliderFunction/default/sliderStep.ts +0 -18
  31. package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderFunctionLinearVisualSteps.ts +0 -28
  32. package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderMax.test.ts +0 -83
  33. package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderMax.ts +0 -34
  34. package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue.test.ts +0 -249
  35. package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue.ts +0 -41
  36. package/src/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue.test.ts +0 -204
  37. package/src/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue.ts +0 -35
  38. package/src/components/slider/slider/sliderHandleSvgHandler.ts +0 -26
  39. package/src/components/storeButton/assets/androidSvg.tsx +0 -159
  40. package/src/components/storeButton/assets/appleSvg.tsx +0 -31
  41. package/src/components/storeButton/storeButton.stories.tsx +0 -67
  42. package/src/components/storeButton/storeButton.styles.ts +0 -36
  43. package/src/components/storeButton/storeButton.test.tsx +0 -22
  44. package/src/components/storeButton/storeButton.tsx +0 -30
  45. package/src/components/storeButton/storeButton.types.tsx +0 -15
  46. package/src/icons/systemIcon.tsx +0 -26
  47. package/src/index.ts +0 -2
  48. package/src/provider/storybook/storybookProvider.tsx +0 -11
  49. package/src/provider/storybook/storybookProvider.types.ts +0 -5
  50. package/src/provider/styledComponents/theme/styledComponentsThemeProvider.tsx +0 -14
  51. package/src/provider/styledComponents/theme/styledComponentsThemeProvider.types..ts +0 -5
  52. package/src/style/styledComponents/mmb_variables-5224.json +0 -958
  53. package/src/style/styledComponents/theme.ts +0 -450
package/src/style/styledComponents/theme.ts DELETED
@@ -1,450 +0,0 @@
1
- import variables from './mmb_variables-5224.json';
2
-
3
- export const theme = {
4
- // PALETTE
5
- palette: {
6
- gold100: variables._primitives.colors.gold['100'].value,
7
- gold200: variables._primitives.colors.gold['200'].value,
8
- gold500: variables._primitives.colors.gold['500'].value,
9
- gold600: variables._primitives.colors.gold['600'].value,
10
- gold700: variables._primitives.colors.gold['700'].value,
11
- gold800: variables._primitives.colors.gold['800'].value,
12
- pink100: variables._primitives.colors.pink['100'].value,
13
- pink200: variables._primitives.colors.pink['200'].value,
14
- pink300: variables._primitives.colors.pink['300'].value,
15
- pink400: variables._primitives.colors.pink['400'].value,
16
- pink500: variables._primitives.colors.pink['500'].value,
17
- pink600: variables._primitives.colors.pink['600'].value,
18
- pink700: variables._primitives.colors.pink['700'].value,
19
- pink800: variables._primitives.colors.pink['800'].value,
20
- pink900: variables._primitives.colors.pink['900'].value,
21
- pink1000: variables._primitives.colors.pink['1000'].value,
22
- grey100: variables._primitives.colors.grey['100'].value,
23
- grey200: variables._primitives.colors.grey['200'].value,
24
- grey300: variables._primitives.colors.grey['300'].value,
25
- grey400: variables._primitives.colors.grey['400'].value,
26
- grey500: variables._primitives.colors.grey['500'].value,
27
- grey600: variables._primitives.colors.grey['600'].value,
28
- grey700: variables._primitives.colors.grey['700'].value,
29
- grey800: variables._primitives.colors.grey['800'].value,
30
- grey900: variables._primitives.colors.grey['900'].value,
31
- grey1000: variables._primitives.colors.grey['1000'].value,
32
- black: variables._primitives.colors.black.value,
33
- white: variables._primitives.colors.white.value,
34
- transparent: variables._primitives.colors.transparent.value,
35
- yellow100: variables._primitives.colors.yellow['100'].value,
36
- yellow200: variables._primitives.colors.yellow['200'].value,
37
- yellow300: variables._primitives.colors.yellow['300'].value,
38
- yellow400: variables._primitives.colors.yellow['400'].value,
39
- yellow500: variables._primitives.colors.yellow['500'].value,
40
- yellow600: variables._primitives.colors.yellow['600'].value,
41
- yellow700: variables._primitives.colors.yellow['700'].value,
42
- yellow800: variables._primitives.colors.yellow['800'].value,
43
- yellow900: variables._primitives.colors.yellow['900'].value,
44
- yellow1000: variables._primitives.colors.yellow['1000'].value,
45
- green100: variables._primitives.colors.green['100'].value,
46
- green200: variables._primitives.colors.green['200'].value,
47
- green300: variables._primitives.colors.green['300'].value,
48
- green400: variables._primitives.colors.green['400'].value,
49
- green500: variables._primitives.colors.green['500'].value,
50
- green600: variables._primitives.colors.green['600'].value,
51
- green700: variables._primitives.colors.green['700'].value,
52
- green800: variables._primitives.colors.green['800'].value,
53
- green900: variables._primitives.colors.green['900'].value,
54
- green1000: variables._primitives.colors.green['1000'].value,
55
- red100: variables._primitives.colors.red['100'].value,
56
- red200: variables._primitives.colors.red['200'].value,
57
- red300: variables._primitives.colors.red['300'].value,
58
- red400: variables._primitives.colors.red['400'].value,
59
- red500: variables._primitives.colors.red['500'].value,
60
- red600: variables._primitives.colors.red['600'].value,
61
- red700: variables._primitives.colors.red['700'].value,
62
- red800: variables._primitives.colors.red['800'].value,
63
- red900: variables._primitives.colors.red['900'].value,
64
- red1000: variables._primitives.colors.red['1000'].value,
65
- blue100: variables._primitives.colors.blue['100'].value,
66
- blue200: variables._primitives.colors.blue['200'].value,
67
- blue300: variables._primitives.colors.blue['300'].value,
68
- blue400: variables._primitives.colors.blue['400'].value,
69
- blue500: variables._primitives.colors.blue['500'].value,
70
- blue600: variables._primitives.colors.blue['600'].value,
71
- blue700: variables._primitives.colors.blue['700'].value,
72
- blue800: variables._primitives.colors.blue['800'].value,
73
- blue900: variables._primitives.colors.blue['900'].value,
74
- blue1000: variables._primitives.colors.blue['1000'].value,
75
- },
76
-
77
- // COLORS
78
- colors: {
79
- fg: {
80
- neutral: {
81
- default: {
82
- light: variables.tokens.light.color.fg.neutral.default.value,
83
- dark: variables.tokens.dark.color.fg.neutral.default.value,
84
- },
85
- subtle: {
86
- light: variables.tokens.light.color.fg.neutral.subtle.value,
87
- dark: variables.tokens.dark.color.fg.neutral.subtle.value,
88
- },
89
- subtlest: {
90
- light: variables.tokens.light.color.fg.neutral.subtlest.value,
91
- dark: variables.tokens.dark.color.fg.neutral.subtlest.value,
92
- },
93
- white: {
94
- light: variables.tokens.light.color.fg.neutral.white.value,
95
- dark: variables.tokens.dark.color.fg.neutral.white.value,
96
- },
97
- },
98
- disabled: {
99
- light: variables.tokens.light.color.fg.disabled.default.value,
100
- dark: variables.tokens.dark.color.fg.disabled.default.value,
101
- },
102
- inverse: {
103
- light: variables.tokens.light.color.fg.inverse.default.value,
104
- dark: variables.tokens.dark.color.fg.inverse.default.value,
105
- },
106
- link: {
107
- default: {
108
- light: variables.tokens.light.color.fg.link.default.value,
109
- dark: variables.tokens.dark.color.fg.link.default.value,
110
- },
111
- hover: {
112
- light: variables.tokens.light.color.fg.link.hover.value,
113
- dark: variables.tokens.dark.color.fg.link.hover.value,
114
- },
115
- pressed: {
116
- light: variables.tokens.light.color.fg.link.pressed.value,
117
- dark: variables.tokens.dark.color.fg.link.pressed.value,
118
- },
119
- },
120
- success: {
121
- light: variables.tokens.light.color.fg.success.default.value,
122
- dark: variables.tokens.dark.color.fg.success.default.value,
123
- },
124
- warning: {
125
- light: variables.tokens.light.color.fg.warning.default.value,
126
- dark: variables.tokens.dark.color.fg.warning.default.value,
127
- },
128
- error: {
129
- light: variables.tokens.light.color.fg.error.default.value,
130
- dark: variables.tokens.dark.color.fg.error.default.value,
131
- },
132
- info: {
133
- light: variables.tokens.light.color.fg.info.default.value,
134
- dark: variables.tokens.dark.color.fg.info.default.value,
135
- },
136
- promo: {
137
- light: variables.tokens.light.color.fg.promo.default.value,
138
- dark: variables.tokens.dark.color.fg.promo.default.value,
139
- },
140
- brand: {
141
- default: {
142
- light: variables.tokens.light.color.fg.brand.default.value,
143
- dark: variables.tokens.dark.color.fg.brand.default.value,
144
- },
145
- bold: {
146
- light: variables.tokens.light.color.fg.brand.bold.value,
147
- dark: variables.tokens.dark.color.fg.brand.bold.value,
148
- },
149
- },
150
- accent: {
151
- default: {
152
- light: variables.tokens.light.color.fg.accent.default.value,
153
- dark: variables.tokens.dark.color.fg.accent.default.value,
154
- },
155
- bold: {
156
- light: variables.tokens.light.color.fg.accent.bold.value,
157
- dark: variables.tokens.dark.color.fg.accent.bold.value,
158
- },
159
- },
160
- },
161
- bg: {
162
- neutral: {
163
- default: {
164
- light: variables.tokens.light.color.bg.neutral.default.value,
165
- dark: variables.tokens.dark.color.bg.neutral.default.value,
166
- },
167
- subtle: {
168
- light: variables.tokens.light.color.bg.neutral.subtle.value,
169
- dark: variables.tokens.dark.color.bg.neutral.subtle.value,
170
- },
171
- subtlest: {
172
- light: variables.tokens.light.color.bg.neutral.subtlest.value,
173
- dark: variables.tokens.dark.color.bg.neutral.subtlest.value,
174
- },
175
- white: {
176
- light: variables.tokens.light.color.bg.neutral.white.value,
177
- dark: variables.tokens.dark.color.bg.neutral.white.value,
178
- },
179
- },
180
- disabled: {
181
- light: variables.tokens.light.color.bg.disabled.default.value,
182
- dark: variables.tokens.dark.color.bg.disabled.default.value,
183
- },
184
- promo: {
185
- default: {
186
- light: variables.tokens.light.color.bg.promo.default.value,
187
- dark: variables.tokens.dark.color.bg.promo.default.value,
188
- },
189
- bold: {
190
- light: variables.tokens.light.color.bg.promo.bold.value,
191
- dark: variables.tokens.dark.color.bg.promo.bold.value,
192
- },
193
- },
194
- error: {
195
- default: {
196
- light: variables.tokens.light.color.bg.error.default.value,
197
- dark: variables.tokens.dark.color.bg.error.default.value,
198
- },
199
- bold: {
200
- light: variables.tokens.light.color.bg.error.bold.value,
201
- dark: variables.tokens.dark.color.bg.error.bold.value,
202
- },
203
- },
204
- warning: {
205
- default: {
206
- light: variables.tokens.light.color.bg.warning.default.value,
207
- dark: variables.tokens.dark.color.bg.warning.default.value,
208
- },
209
- bold: {
210
- light: variables.tokens.light.color.bg.warning.bold.value,
211
- dark: variables.tokens.dark.color.bg.warning.bold.value,
212
- },
213
- },
214
- inverse: {
215
- light: variables.tokens.light.color.bg.inverse.default.value,
216
- dark: variables.tokens.dark.color.bg.inverse.default.value,
217
- },
218
- success: {
219
- default: {
220
- light: variables.tokens.light.color.bg.success.default.value,
221
- dark: variables.tokens.dark.color.bg.success.default.value,
222
- },
223
- bold: {
224
- light: variables.tokens.light.color.bg.success.bold.value,
225
- dark: variables.tokens.dark.color.bg.success.bold.value,
226
- },
227
- },
228
- info: {
229
- default: {
230
- light: variables.tokens.light.color.bg.info.default.value,
231
- dark: variables.tokens.dark.color.bg.info.default.value,
232
- },
233
- bold: {
234
- light: variables.tokens.light.color.bg.info.bold.value,
235
- dark: variables.tokens.dark.color.bg.info.bold.value,
236
- },
237
- },
238
- accent: {
239
- light: variables.tokens.light.color.bg.accent.default.value,
240
- dark: variables.tokens.dark.color.bg.accent.default.value,
241
- },
242
- brand: {
243
- default: {
244
- light: variables.tokens.light.color.bg.brand.default.value,
245
- dark: variables.tokens.dark.color.bg.brand.default.value,
246
- hover: {
247
- light: variables.tokens.light.color.bg.brand.default.hover.value,
248
- dark: variables.tokens.dark.color.bg.brand.default.hover.value,
249
- },
250
- pressed: {
251
- light: variables.tokens.light.color.bg.brand.default.pressed.value,
252
- dark: variables.tokens.dark.color.bg.brand.default.pressed.value,
253
- },
254
- },
255
- bold: {
256
- light: variables.tokens.light.color.bg.brand.bold.value,
257
- dark: variables.tokens.dark.color.bg.brand.bold.value,
258
- hover: {
259
- light: variables.tokens.light.color.bg.brand.bold.hover.value,
260
- dark: variables.tokens.dark.color.bg.brand.bold.hover.value,
261
- },
262
- pressed: {
263
- light: variables.tokens.light.color.bg.brand.bold.pressed.value,
264
- dark: variables.tokens.dark.color.bg.brand.bold.pressed.value,
265
- },
266
- },
267
- },
268
- },
269
- surface: {
270
- overlay: {
271
- light: variables.tokens.light.color.surface.overlay.value,
272
- dark: variables.tokens.dark.color.surface.overlay.value,
273
- },
274
- risen: {
275
- light: variables.tokens.light.color.surface.risen.value,
276
- dark: variables.tokens.dark.color.surface.risen.value,
277
- },
278
- default: {
279
- light: variables.tokens.light.color.surface.default.value,
280
- dark: variables.tokens.dark.color.surface.default.value,
281
- },
282
- sunken: {
283
- light: variables.tokens.light.color.surface.sunken.value,
284
- dark: variables.tokens.dark.color.surface.sunken.value,
285
- },
286
- },
287
- border: {
288
- neutral: {
289
- default: {
290
- light: variables.tokens.light.color.border.neutral.default.value,
291
- dark: variables.tokens.dark.color.border.neutral.default.value,
292
- },
293
- subtle: {
294
- light: variables.tokens.light.color.border.neutral.subtle.value,
295
- dark: variables.tokens.dark.color.border.neutral.subtle.value,
296
- },
297
- subtlest: {
298
- light: variables.tokens.light.color.border.neutral.subtlest.value,
299
- dark: variables.tokens.dark.color.border.neutral.subtlest.value,
300
- },
301
- },
302
- disabled: {
303
- light: variables.tokens.light.color.border.disabled.default.value,
304
- dark: variables.tokens.dark.color.border.disabled.default.value,
305
- },
306
- success: {
307
- light: variables.tokens.light.color.border.success.default.value,
308
- dark: variables.tokens.dark.color.border.success.default.value,
309
- },
310
- warning: {
311
- light: variables.tokens.light.color.border.warning.default.value,
312
- dark: variables.tokens.dark.color.border.warning.default.value,
313
- },
314
- error: {
315
- light: variables.tokens.light.color.border.error.default.value,
316
- dark: variables.tokens.dark.color.border.error.default.value,
317
- },
318
- promo: {
319
- light: variables.tokens.light.color.border.promo.bold.value,
320
- dark: variables.tokens.dark.color.border.promo.bold.value,
321
- },
322
- brand: {
323
- bold: {
324
- light: variables.tokens.light.color.border.brand.bold.value,
325
- dark: variables.tokens.dark.color.border.brand.bold.value,
326
- },
327
- default: {
328
- light: variables.tokens.light.color.border.brand.default.value,
329
- dark: variables.tokens.dark.color.border.brand.default.value,
330
- },
331
- subtle: {
332
- light: variables.tokens.light.color.border.brand.suble.value,
333
- dark: variables.tokens.dark.color.border.brand.suble.value,
334
- },
335
- subtlest: {
336
- light: variables.tokens.light.color.border.brand.subtlest.value,
337
- dark: variables.tokens.dark.color.border.brand.subtlest.value,
338
- },
339
- },
340
- inverse: {
341
- light: variables.tokens.light.color.border.inverse.subtle.value,
342
- dark: variables.tokens.dark.color.border.inverse.subtle.value,
343
- },
344
- accent: {
345
- light: variables.tokens.light.color.border.accent.default.value,
346
- dark: variables.tokens.dark.color.border.accent.default.value,
347
- },
348
- },
349
- icon: {
350
- bg: {
351
- light: variables.tokens.light.color.icon.background.default.value,
352
- dark: variables.tokens.dark.color.icon.background.default.value,
353
- },
354
- brand: {
355
- light: variables.tokens.light.color.icon.brand.default.value,
356
- dark: variables.tokens.dark.color.icon.brand.default.value,
357
- },
358
- neutral: {
359
- light: variables.tokens.light.color.icon.neutral.default.value,
360
- dark: variables.tokens.dark.color.icon.neutral.default.value,
361
- },
362
- inverse: {
363
- light: variables.tokens.light.color.icon.inverse.default.value,
364
- dark: variables.tokens.dark.color.icon.inverse.default.value,
365
- },
366
- disabled: {
367
- light: variables.tokens.light.color.icon.disabled.default.value,
368
- dark: variables.tokens.dark.color.icon.disabled.default.value,
369
- },
370
- error: {
371
- light: variables.tokens.light.color.icon.error.default.value,
372
- dark: variables.tokens.dark.color.icon.error.default.value,
373
- },
374
- },
375
- shadow: {
376
- buttonFocus: '0px 0px 0px 2px #FFF, 0px 0px 0px 5px #024BE3',
377
- },
378
- },
379
-
380
- // FONT
381
- font: {
382
- size: {
383
- body: {
384
- xs: '12px',
385
- sm: '14px',
386
- md: '16px',
387
- lg: '18px',
388
- },
389
- },
390
- lineHeight: {
391
- body: {
392
- xs: '16px',
393
- sm: '20px',
394
- md: '24px',
395
- lg: '28px',
396
- },
397
- },
398
- weight: {
399
- thin: 100,
400
- extraLight: 200,
401
- light: 300,
402
- normal: 400,
403
- medium: 500,
404
- semiBold: 600,
405
- bold: 700,
406
- extraBold: 800,
407
- heavy: 900,
408
- ultra: 950,
409
- },
410
- letterSpacing: {
411
- body: {
412
- md: '-0.2px',
413
- },
414
- },
415
- },
416
-
417
- // LAYOUT
418
- spacing: {
419
- xxs: variables.tokens.light.layout.spacing.xxs.value,
420
- xs: variables.tokens.light.layout.spacing.xs.value,
421
- sm: variables.tokens.light.layout.spacing.sm.value,
422
- md: variables.tokens.light.layout.spacing.md.value,
423
- lg: variables.tokens.light.layout.spacing.lg.value,
424
- xl: variables.tokens.light.layout.spacing.xl.value,
425
- xxl: variables.tokens.light.layout.spacing['2xl'].value,
426
- xxxl: variables.tokens.light.layout.spacing['3xl'].value,
427
- xxxxl: variables.tokens.light.layout.spacing['4xl'].value,
428
- xxxxxl: variables.tokens.light.layout.spacing['5xl'].value,
429
- },
430
- borderRadius: {
431
- xxs: variables.tokens.light.layout['border-radius'].xxs.value,
432
- xs: variables.tokens.light.layout['border-radius'].xs.value,
433
- sm: variables.tokens.light.layout['border-radius'].sm.value,
434
- md: variables.tokens.light.layout['border-radius'].md.value,
435
- lg: variables.tokens.light.layout['border-radius'].lg.value,
436
- xl: variables.tokens.light.layout['border-radius'].xl.value,
437
- full: variables.tokens.light.layout['border-radius'].full.value,
438
- },
439
- container: {
440
- xl: variables.tokens.light.layout.container.xl.value,
441
- },
442
- breakpoints: {
443
- xs: variables.tokens.light.layout.breakpoint.xs.value,
444
- sm: variables.tokens.light.layout.breakpoint.sm.value,
445
- md: variables.tokens.light.layout.breakpoint.md.value,
446
- lg: variables.tokens.light.layout.breakpoint.lg.value,
447
- xl: variables.tokens.light.layout.breakpoint.xl.value,
448
- xxl: variables.tokens.light.layout.breakpoint['2xl'].value,
449
- },
450
- };