@impulse-ui-native/theme 11.4.0 → 14.0.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 (37) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/theme/create-avatar-tokens.js +54 -13
  3. package/dist/theme/create-avatar-tokens.js.map +1 -1
  4. package/dist/theme/create-button-tokens.js +206 -56
  5. package/dist/theme/create-button-tokens.js.map +1 -1
  6. package/dist/theme/create-checkbox-tokens.js +198 -55
  7. package/dist/theme/create-checkbox-tokens.js.map +1 -1
  8. package/dist/theme/create-control-tokens.js +522 -86
  9. package/dist/theme/create-control-tokens.js.map +1 -1
  10. package/dist/theme/create-icon-button-tokens.js +206 -56
  11. package/dist/theme/create-icon-button-tokens.js.map +1 -1
  12. package/dist/theme/create-radio-tokens.js +198 -55
  13. package/dist/theme/create-radio-tokens.js.map +1 -1
  14. package/dist/theme/create-segmented-control-tokens.js +219 -64
  15. package/dist/theme/create-segmented-control-tokens.js.map +1 -1
  16. package/dist/theme/create-slider-tokens.js +391 -121
  17. package/dist/theme/create-slider-tokens.js.map +1 -1
  18. package/dist/theme/create-switch-tokens.js +165 -46
  19. package/dist/theme/create-switch-tokens.js.map +1 -1
  20. package/dist/theme/create-tag-tokens.js +38 -0
  21. package/dist/theme/create-tag-tokens.js.map +1 -1
  22. package/dist/types/avatar-tokens.types.d.mts +2 -2
  23. package/dist/types/buttons-tokens.types.d.mts +3 -3
  24. package/dist/types/checkbox-tokens.types.d.mts +2 -2
  25. package/dist/types/components.types.d.mts +5 -2
  26. package/dist/types/control-tokens.types.d.mts +4 -4
  27. package/dist/types/index.d.mts +2 -2
  28. package/dist/types/radio-tokens.types.d.mts +2 -2
  29. package/dist/types/segmented-control-tokens.types.d.mts +3 -2
  30. package/dist/types/slider-tokens.types.d.mts +3 -2
  31. package/dist/types/switch-tokens.types.d.mts +2 -2
  32. package/dist/types/tag-tokens.types.d.mts +4 -4
  33. package/dist/utils/segmented-control-state.utils.js +2 -2
  34. package/dist/utils/segmented-control-state.utils.js.map +1 -1
  35. package/dist/utils/slider-tokens.utils.js +1 -1
  36. package/dist/utils/slider-tokens.utils.js.map +1 -1
  37. package/package.json +2 -2
@@ -1,27 +1,164 @@
1
1
  function createControlAddonTokens(tokens) {
2
+ const primary = tokens.colors.primary.value;
3
+ const primaryContrast = tokens.colors.primary.contrast;
4
+ const secondaryContrast = tokens.colors.secondary.contrast;
5
+ const neutral = tokens.colors.text.secondary;
6
+ const neutralContrast = tokens.colors.text.inverse;
7
+ const disabledColor = tokens.colors.text.disabled;
8
+ const errorColor = tokens.colors.feedback.error.value;
9
+ const errorContrast = tokens.colors.feedback.error.contrast;
2
10
  return {
3
11
  marginHorizontal: tokens.space.xxs,
4
12
  hitSlop: tokens.space.sm,
5
- variants: {
6
- filled: {
7
- default: { iconColor: tokens.colors.text.primary },
8
- error: { iconColor: tokens.colors.text.primary },
9
- disabled: { iconColor: tokens.colors.text.disabled },
10
- disabledError: { iconColor: tokens.colors.text.disabled }
13
+ colors: {
14
+ neutral: {
15
+ outlined: {
16
+ default: {
17
+ iconColor: neutral
18
+ },
19
+ error: {
20
+ iconColor: errorColor
21
+ },
22
+ disabled: {
23
+ iconColor: disabledColor
24
+ },
25
+ disabledError: {
26
+ iconColor: disabledColor
27
+ }
28
+ },
29
+ soft: {
30
+ default: {
31
+ iconColor: neutral
32
+ },
33
+ error: {
34
+ iconColor: errorColor
35
+ },
36
+ disabled: {
37
+ iconColor: disabledColor
38
+ },
39
+ disabledError: {
40
+ iconColor: disabledColor
41
+ }
42
+ },
43
+ filled: {
44
+ default: {
45
+ iconColor: neutralContrast
46
+ },
47
+ error: {
48
+ iconColor: errorContrast
49
+ },
50
+ disabled: {
51
+ iconColor: disabledColor
52
+ },
53
+ disabledError: {
54
+ iconColor: disabledColor
55
+ }
56
+ }
57
+ },
58
+ primary: {
59
+ outlined: {
60
+ default: {
61
+ iconColor: primary
62
+ },
63
+ error: {
64
+ iconColor: errorColor
65
+ },
66
+ disabled: {
67
+ iconColor: disabledColor
68
+ },
69
+ disabledError: {
70
+ iconColor: disabledColor
71
+ }
72
+ },
73
+ soft: {
74
+ default: {
75
+ iconColor: primary
76
+ },
77
+ error: {
78
+ iconColor: errorColor
79
+ },
80
+ disabled: {
81
+ iconColor: disabledColor
82
+ },
83
+ disabledError: {
84
+ iconColor: disabledColor
85
+ }
86
+ },
87
+ filled: {
88
+ default: {
89
+ iconColor: primaryContrast
90
+ },
91
+ error: {
92
+ iconColor: errorContrast
93
+ },
94
+ disabled: {
95
+ iconColor: disabledColor
96
+ },
97
+ disabledError: {
98
+ iconColor: disabledColor
99
+ }
100
+ }
11
101
  },
12
- outlined: {
13
- default: { iconColor: tokens.colors.text.primary },
14
- error: { iconColor: tokens.colors.text.primary },
15
- disabled: { iconColor: tokens.colors.text.disabled },
16
- disabledError: { iconColor: tokens.colors.text.disabled }
102
+ secondary: {
103
+ outlined: {
104
+ default: {
105
+ iconColor: secondaryContrast
106
+ },
107
+ error: {
108
+ iconColor: errorColor
109
+ },
110
+ disabled: {
111
+ iconColor: disabledColor
112
+ },
113
+ disabledError: {
114
+ iconColor: disabledColor
115
+ }
116
+ },
117
+ soft: {
118
+ default: {
119
+ iconColor: secondaryContrast
120
+ },
121
+ error: {
122
+ iconColor: errorColor
123
+ },
124
+ disabled: {
125
+ iconColor: disabledColor
126
+ },
127
+ disabledError: {
128
+ iconColor: disabledColor
129
+ }
130
+ },
131
+ filled: {
132
+ default: {
133
+ iconColor: secondaryContrast
134
+ },
135
+ error: {
136
+ iconColor: errorContrast
137
+ },
138
+ disabled: {
139
+ iconColor: disabledColor
140
+ },
141
+ disabledError: {
142
+ iconColor: disabledColor
143
+ }
144
+ }
17
145
  }
18
146
  }
19
147
  };
20
148
  }
21
149
  function createControlContainerTokens(tokens) {
150
+ const primary = tokens.colors.primary.value;
151
+ const secondary = tokens.colors.secondary.value;
152
+ const secondaryContrast = tokens.colors.secondary.contrast;
153
+ const subtle = tokens.colors.subtle.value;
154
+ const neutral = tokens.colors.text.secondary;
155
+ const disabledBackground = tokens.colors.surface.subtle.value;
156
+ const defaultBorder = tokens.colors.border.default.value;
157
+ const errorColor = tokens.colors.feedback.error.value;
158
+ const errorContrast = tokens.colors.feedback.error.contrast;
22
159
  return {
23
160
  borderWidth: tokens.borderSize.sm,
24
- borderRadius: tokens.radii.sm,
161
+ borderRadius: tokens.radii.md,
25
162
  sizes: {
26
163
  small: {
27
164
  height: 32,
@@ -36,49 +173,209 @@ function createControlContainerTokens(tokens) {
36
173
  paddingHorizontal: tokens.space.xs
37
174
  }
38
175
  },
39
- variants: {
40
- filled: {
41
- default: {
42
- backgroundColor: tokens.colors.surface.default.value,
43
- borderColor: "transparent",
44
- opacity: 1
45
- },
46
- error: {
47
- backgroundColor: tokens.colors.surface.default.value,
48
- borderColor: tokens.colors.feedback.error.value,
49
- opacity: 1
50
- },
51
- disabled: {
52
- backgroundColor: tokens.colors.surface.subtle.value,
53
- borderColor: "transparent",
54
- opacity: 0.7
55
- },
56
- disabledError: {
57
- backgroundColor: tokens.colors.surface.subtle.value,
58
- borderColor: tokens.colors.feedback.error.value,
59
- opacity: 0.7
176
+ colors: {
177
+ neutral: {
178
+ outlined: {
179
+ default: {
180
+ backgroundColor: "transparent",
181
+ borderColor: defaultBorder,
182
+ opacity: 1
183
+ },
184
+ error: {
185
+ backgroundColor: "transparent",
186
+ borderColor: errorColor,
187
+ opacity: 1
188
+ },
189
+ disabled: {
190
+ backgroundColor: "transparent",
191
+ borderColor: defaultBorder,
192
+ opacity: 0.7
193
+ },
194
+ disabledError: {
195
+ backgroundColor: "transparent",
196
+ borderColor: defaultBorder,
197
+ opacity: 0.7
198
+ }
199
+ },
200
+ soft: {
201
+ default: {
202
+ backgroundColor: disabledBackground,
203
+ borderColor: "transparent",
204
+ opacity: 1
205
+ },
206
+ error: {
207
+ backgroundColor: errorContrast,
208
+ borderColor: errorColor,
209
+ opacity: 1
210
+ },
211
+ disabled: {
212
+ backgroundColor: disabledBackground,
213
+ borderColor: "transparent",
214
+ opacity: 0.7
215
+ },
216
+ disabledError: {
217
+ backgroundColor: disabledBackground,
218
+ borderColor: "transparent",
219
+ opacity: 0.7
220
+ }
221
+ },
222
+ filled: {
223
+ default: {
224
+ backgroundColor: neutral,
225
+ borderColor: "transparent",
226
+ opacity: 1
227
+ },
228
+ error: {
229
+ backgroundColor: errorColor,
230
+ borderColor: errorColor,
231
+ opacity: 1
232
+ },
233
+ disabled: {
234
+ backgroundColor: disabledBackground,
235
+ borderColor: "transparent",
236
+ opacity: 0.7
237
+ },
238
+ disabledError: {
239
+ backgroundColor: disabledBackground,
240
+ borderColor: "transparent",
241
+ opacity: 0.7
242
+ }
243
+ }
244
+ },
245
+ primary: {
246
+ outlined: {
247
+ default: {
248
+ backgroundColor: "transparent",
249
+ borderColor: primary,
250
+ opacity: 1
251
+ },
252
+ error: {
253
+ backgroundColor: "transparent",
254
+ borderColor: errorColor,
255
+ opacity: 1
256
+ },
257
+ disabled: {
258
+ backgroundColor: "transparent",
259
+ borderColor: defaultBorder,
260
+ opacity: 0.7
261
+ },
262
+ disabledError: {
263
+ backgroundColor: "transparent",
264
+ borderColor: defaultBorder,
265
+ opacity: 0.7
266
+ }
267
+ },
268
+ soft: {
269
+ default: {
270
+ backgroundColor: secondary,
271
+ borderColor: "transparent",
272
+ opacity: 1
273
+ },
274
+ error: {
275
+ backgroundColor: errorContrast,
276
+ borderColor: errorColor,
277
+ opacity: 1
278
+ },
279
+ disabled: {
280
+ backgroundColor: disabledBackground,
281
+ borderColor: "transparent",
282
+ opacity: 0.7
283
+ },
284
+ disabledError: {
285
+ backgroundColor: disabledBackground,
286
+ borderColor: "transparent",
287
+ opacity: 0.7
288
+ }
289
+ },
290
+ filled: {
291
+ default: {
292
+ backgroundColor: primary,
293
+ borderColor: "transparent",
294
+ opacity: 1
295
+ },
296
+ error: {
297
+ backgroundColor: errorColor,
298
+ borderColor: errorColor,
299
+ opacity: 1
300
+ },
301
+ disabled: {
302
+ backgroundColor: disabledBackground,
303
+ borderColor: "transparent",
304
+ opacity: 0.7
305
+ },
306
+ disabledError: {
307
+ backgroundColor: disabledBackground,
308
+ borderColor: "transparent",
309
+ opacity: 0.7
310
+ }
60
311
  }
61
312
  },
62
- outlined: {
63
- default: {
64
- backgroundColor: "transparent",
65
- borderColor: tokens.colors.border.default.value,
66
- opacity: 1
67
- },
68
- error: {
69
- backgroundColor: "transparent",
70
- borderColor: tokens.colors.feedback.error.value,
71
- opacity: 1
72
- },
73
- disabled: {
74
- backgroundColor: "transparent",
75
- borderColor: tokens.colors.border.default.value,
76
- opacity: 0.7
77
- },
78
- disabledError: {
79
- backgroundColor: "transparent",
80
- borderColor: tokens.colors.feedback.error.value,
81
- opacity: 0.7
313
+ secondary: {
314
+ outlined: {
315
+ default: {
316
+ backgroundColor: "transparent",
317
+ borderColor: secondaryContrast,
318
+ opacity: 1
319
+ },
320
+ error: {
321
+ backgroundColor: "transparent",
322
+ borderColor: errorColor,
323
+ opacity: 1
324
+ },
325
+ disabled: {
326
+ backgroundColor: "transparent",
327
+ borderColor: defaultBorder,
328
+ opacity: 0.7
329
+ },
330
+ disabledError: {
331
+ backgroundColor: "transparent",
332
+ borderColor: defaultBorder,
333
+ opacity: 0.7
334
+ }
335
+ },
336
+ soft: {
337
+ default: {
338
+ backgroundColor: subtle,
339
+ borderColor: "transparent",
340
+ opacity: 1
341
+ },
342
+ error: {
343
+ backgroundColor: errorContrast,
344
+ borderColor: errorColor,
345
+ opacity: 1
346
+ },
347
+ disabled: {
348
+ backgroundColor: disabledBackground,
349
+ borderColor: "transparent",
350
+ opacity: 0.7
351
+ },
352
+ disabledError: {
353
+ backgroundColor: disabledBackground,
354
+ borderColor: "transparent",
355
+ opacity: 0.7
356
+ }
357
+ },
358
+ filled: {
359
+ default: {
360
+ backgroundColor: secondary,
361
+ borderColor: "transparent",
362
+ opacity: 1
363
+ },
364
+ error: {
365
+ backgroundColor: errorColor,
366
+ borderColor: errorColor,
367
+ opacity: 1
368
+ },
369
+ disabled: {
370
+ backgroundColor: disabledBackground,
371
+ borderColor: "transparent",
372
+ opacity: 0.7
373
+ },
374
+ disabledError: {
375
+ backgroundColor: disabledBackground,
376
+ borderColor: "transparent",
377
+ opacity: 0.7
378
+ }
82
379
  }
83
380
  }
84
381
  }
@@ -92,6 +389,13 @@ function createControlErrorTokens(tokens) {
92
389
  };
93
390
  }
94
391
  function createControlInputTokens(tokens) {
392
+ const primaryContrast = tokens.colors.primary.contrast;
393
+ const secondaryContrast = tokens.colors.secondary.contrast;
394
+ const neutralContrast = tokens.colors.text.inverse;
395
+ const textColor = tokens.colors.text.primary;
396
+ const placeholderColor = tokens.colors.text.tertiary;
397
+ const disabledColor = tokens.colors.text.disabled;
398
+ const errorContrast = tokens.colors.feedback.error.contrast;
95
399
  return {
96
400
  flex: 1,
97
401
  fontFamily: tokens.fontFamily.normal[400],
@@ -107,41 +411,173 @@ function createControlInputTokens(tokens) {
107
411
  fontSize: tokens.fontSize.sm
108
412
  }
109
413
  },
110
- variants: {
111
- filled: {
112
- default: {
113
- color: tokens.colors.text.primary,
114
- placeholderColor: tokens.colors.text.tertiary
115
- },
116
- error: {
117
- color: tokens.colors.text.primary,
118
- placeholderColor: tokens.colors.feedback.error.value
119
- },
120
- disabled: {
121
- color: tokens.colors.text.disabled,
122
- placeholderColor: tokens.colors.text.disabled
123
- },
124
- disabledError: {
125
- color: tokens.colors.text.disabled,
126
- placeholderColor: tokens.colors.text.disabled
414
+ colors: {
415
+ neutral: {
416
+ outlined: {
417
+ default: {
418
+ color: textColor,
419
+ placeholderColor
420
+ },
421
+ error: {
422
+ color: textColor,
423
+ placeholderColor
424
+ },
425
+ disabled: {
426
+ color: disabledColor,
427
+ placeholderColor: disabledColor
428
+ },
429
+ disabledError: {
430
+ color: disabledColor,
431
+ placeholderColor: disabledColor
432
+ }
433
+ },
434
+ soft: {
435
+ default: {
436
+ color: textColor,
437
+ placeholderColor
438
+ },
439
+ error: {
440
+ color: textColor,
441
+ placeholderColor
442
+ },
443
+ disabled: {
444
+ color: disabledColor,
445
+ placeholderColor: disabledColor
446
+ },
447
+ disabledError: {
448
+ color: disabledColor,
449
+ placeholderColor: disabledColor
450
+ }
451
+ },
452
+ filled: {
453
+ default: {
454
+ color: neutralContrast,
455
+ placeholderColor: neutralContrast
456
+ },
457
+ error: {
458
+ color: errorContrast,
459
+ placeholderColor: errorContrast
460
+ },
461
+ disabled: {
462
+ color: disabledColor,
463
+ placeholderColor: disabledColor
464
+ },
465
+ disabledError: {
466
+ color: disabledColor,
467
+ placeholderColor: disabledColor
468
+ }
127
469
  }
128
470
  },
129
- outlined: {
130
- default: {
131
- color: tokens.colors.text.primary,
132
- placeholderColor: tokens.colors.text.tertiary
133
- },
134
- error: {
135
- color: tokens.colors.text.primary,
136
- placeholderColor: tokens.colors.feedback.error.value
137
- },
138
- disabled: {
139
- color: tokens.colors.text.disabled,
140
- placeholderColor: tokens.colors.text.disabled
141
- },
142
- disabledError: {
143
- color: tokens.colors.text.disabled,
144
- placeholderColor: tokens.colors.text.disabled
471
+ primary: {
472
+ outlined: {
473
+ default: {
474
+ color: textColor,
475
+ placeholderColor
476
+ },
477
+ error: {
478
+ color: textColor,
479
+ placeholderColor
480
+ },
481
+ disabled: {
482
+ color: disabledColor,
483
+ placeholderColor: disabledColor
484
+ },
485
+ disabledError: {
486
+ color: disabledColor,
487
+ placeholderColor: disabledColor
488
+ }
489
+ },
490
+ soft: {
491
+ default: {
492
+ color: textColor,
493
+ placeholderColor
494
+ },
495
+ error: {
496
+ color: textColor,
497
+ placeholderColor
498
+ },
499
+ disabled: {
500
+ color: disabledColor,
501
+ placeholderColor: disabledColor
502
+ },
503
+ disabledError: {
504
+ color: disabledColor,
505
+ placeholderColor: disabledColor
506
+ }
507
+ },
508
+ filled: {
509
+ default: {
510
+ color: primaryContrast,
511
+ placeholderColor: primaryContrast
512
+ },
513
+ error: {
514
+ color: errorContrast,
515
+ placeholderColor: errorContrast
516
+ },
517
+ disabled: {
518
+ color: disabledColor,
519
+ placeholderColor: disabledColor
520
+ },
521
+ disabledError: {
522
+ color: disabledColor,
523
+ placeholderColor: disabledColor
524
+ }
525
+ }
526
+ },
527
+ secondary: {
528
+ outlined: {
529
+ default: {
530
+ color: textColor,
531
+ placeholderColor
532
+ },
533
+ error: {
534
+ color: textColor,
535
+ placeholderColor
536
+ },
537
+ disabled: {
538
+ color: disabledColor,
539
+ placeholderColor: disabledColor
540
+ },
541
+ disabledError: {
542
+ color: disabledColor,
543
+ placeholderColor: disabledColor
544
+ }
545
+ },
546
+ soft: {
547
+ default: {
548
+ color: textColor,
549
+ placeholderColor
550
+ },
551
+ error: {
552
+ color: textColor,
553
+ placeholderColor
554
+ },
555
+ disabled: {
556
+ color: disabledColor,
557
+ placeholderColor: disabledColor
558
+ },
559
+ disabledError: {
560
+ color: disabledColor,
561
+ placeholderColor: disabledColor
562
+ }
563
+ },
564
+ filled: {
565
+ default: {
566
+ color: secondaryContrast,
567
+ placeholderColor: secondaryContrast
568
+ },
569
+ error: {
570
+ color: errorContrast,
571
+ placeholderColor: errorContrast
572
+ },
573
+ disabled: {
574
+ color: disabledColor,
575
+ placeholderColor: disabledColor
576
+ },
577
+ disabledError: {
578
+ color: disabledColor,
579
+ placeholderColor: disabledColor
580
+ }
145
581
  }
146
582
  }
147
583
  }