@dialpad/dialtone-tokens 1.6.5 → 1.8.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 (9) hide show
  1. package/dist/android/java/tokens.kt +235 -61
  2. package/dist/android/res/values/colors.xml +177 -19
  3. package/dist/android/res/values/dimens.xml +85 -38
  4. package/dist/css/variables.css +235 -65
  5. package/dist/doc.json +5471 -2411
  6. package/dist/ios/tokens.swift +235 -61
  7. package/dist/less/variables.less +235 -65
  8. package/dist/tokens.json +236 -66
  9. package/package.json +4 -4
package/dist/less/variables.less CHANGED
@@ -1,55 +1,66 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 31 Jan 2023 17:55:46 GMT
3
+ // Generated on Fri, 14 Apr 2023 23:49:08 GMT
4
4
 
5
- @dt-token-set-order-0: base;
6
- @dt-token-set-order-1: semantic;
7
- @dt-token-set-order-2: components/foo;
8
- @dt-token-set-order-3: components/bar;
9
- @dt-button-color-background-default: transparent;
10
- @dt-button-color-background-primary: #7C52FF;
11
- @dt-button-color-background-danger: #EC0E0E;
12
- @dt-button-color-text-default: #7C52FF;
13
- @dt-button-color-text-primary: #fff;
14
- @dt-button-color-text-danger: #fff;
15
- @dt-button-border-radius-extra-small: 0.7rem;
16
- @dt-button-border-radius-small: 0.75rem;
17
- @dt-button-border-radius-medium: 0.8rem;
18
- @dt-button-border-radius-large: 0.9rem;
19
- @dt-button-border-radius-extra-large: 1rem;
20
- @dt-button-space-gap: 16px;
21
- @dt-button-padding-horizontal-extra-small: 15px;
22
- @dt-button-padding-horizontal-small: 15px;
23
- @dt-button-padding-horizontal-medium: 15px;
24
- @dt-button-padding-horizontal-large: 63px;
25
- @dt-button-padding-horizontal-extra-large: 15px;
26
- @dt-button-padding-vertical-extra-small: 13px;
27
- @dt-button-padding-vertical-small: 13px;
28
- @dt-button-padding-vertical-medium: 15px;
29
- @dt-button-padding-vertical-large: 31px;
30
- @dt-button-padding-vertical-extra-large: 31px;
31
- @dt-button-font-size-extra-small: 1.2rem;
32
- @dt-button-font-size-small: 1.2rem;
33
- @dt-button-font-size-medium: 1.5rem;
34
- @dt-button-font-size-large: 1.9rem;
35
- @dt-button-font-size-extra-large: 2.7rem;
36
- @dt-button-line-height-size-extra-small: 120%;
37
- @dt-button-line-height-size-small: 140%;
38
- @dt-button-line-height-size-medium: 140%;
39
- @dt-button-line-height-size-large: 160%;
40
- @dt-button-line-height-size-extra-large: 160%;
41
- @dt-color-text-primary: #000000;
42
- @dt-color-text-secondary: #3a3a3a;
43
- @dt-color-text-tertiary: #555555;
44
- @dt-color-text-muted: #222222;
45
- @dt-color-text-placeholder: #808080;
46
- @dt-color-text-disabled: #808080;
47
- @dt-color-text-critical: #ec0e0e;
48
- @dt-color-text-success: #1aa340;
49
- @dt-color-text-warning: #815008;
50
- @dt-color-text-inverted-primary: #ffffff;
51
- @dt-color-text-inverted-secondary: #e9e9e9;
52
- @dt-color-text-link-primary: #7c52ff;
5
+ @dt-color-foreground-primary: #000000;
6
+ @dt-color-foreground-secondary: #3a3a3a;
7
+ @dt-color-foreground-tertiary: #555555;
8
+ @dt-color-foreground-muted: #222222;
9
+ @dt-color-foreground-placeholder: #808080;
10
+ @dt-color-foreground-disabled: #808080;
11
+ @dt-color-foreground-critical: #ec0e0e;
12
+ @dt-color-foreground-critical-strong: #b70b0b;
13
+ @dt-color-foreground-success: #1aa340;
14
+ @dt-color-foreground-success-strong: #124620;
15
+ @dt-color-foreground-warning: #815008;
16
+ @dt-color-foreground-primary-inverted: #ffffff;
17
+ @dt-color-foreground-secondary-inverted: #e9e9e9;
18
+ @dt-color-foreground-tertiary-inverted: #d2d2d2;
19
+ @dt-color-foreground-muted-inverted: #e9e9e9;
20
+ @dt-color-foreground-placeholder-inverted: #808080;
21
+ @dt-color-foreground-disabled-inverted: #808080;
22
+ @dt-color-foreground-critical-inverted: #ff8585;
23
+ @dt-color-foreground-critical-strong-inverted: #ffa4a4;
24
+ @dt-color-foreground-success-inverted: #b0ffa3;
25
+ @dt-color-foreground-success-strong-inverted: #d3ffcd;
26
+ @dt-color-foreground-warning-inverted: #fff4cc;
27
+ @dt-color-link-primary: #7c52ff;
28
+ @dt-color-link-critical: #ec0e0e;
29
+ @dt-color-link-success: #1aa340;
30
+ @dt-color-link-warning: #815008;
31
+ @dt-color-link-muted: #222222;
32
+ @dt-color-link-disabled: #808080;
33
+ @dt-color-link-primary-inverted: #ab7eff;
34
+ @dt-color-link-critical-inverted: #ff8585;
35
+ @dt-color-link-success-inverted: #b0ffa3;
36
+ @dt-color-link-warning-inverted: #fff4cc;
37
+ @dt-color-link-muted-inverted: #e9e9e9;
38
+ @dt-color-link-disabled-inverted: #808080;
39
+ @dt-color-link-primary-hover: #3a1d95;
40
+ @dt-color-link-critical-hover: #b70b0b;
41
+ @dt-color-link-success-hover: #124620;
42
+ @dt-color-link-warning-hover: #555555;
43
+ @dt-color-link-muted-hover: #000000;
44
+ @dt-color-link-disabled-hover: #808080;
45
+ @dt-color-link-primary-inverted-hover: #dac7ff;
46
+ @dt-color-link-critical-inverted-hover: #ffa4a4;
47
+ @dt-color-link-success-inverted-hover: #d3ffcd;
48
+ @dt-color-link-warning-inverted-hover: #f9f9f9;
49
+ @dt-color-link-muted-inverted-hover: #f9f9f9;
50
+ @dt-color-link-disabled-inverted-hover: #808080;
51
+ @dt-color-surface-secondary-opaque: #000000;
52
+ @dt-color-surface-moderate-opaque: #000000;
53
+ @dt-color-surface-bold-opaque: #000000;
54
+ @dt-color-surface-strong-opaque: #000000;
55
+ @dt-color-surface-contrast-opaque: #000000;
56
+ @dt-color-surface-critical-opaque: #ec0e0e;
57
+ @dt-color-surface-critical-subtle-opaque: #ec0e0e;
58
+ @dt-color-surface-warning-opaque: #ffdb80;
59
+ @dt-color-surface-warning-subtle-opaque: #ffdb80;
60
+ @dt-color-surface-success-opaque: #1aa341;
61
+ @dt-color-surface-success-subtle-opaque: #1aa341;
62
+ @dt-color-surface-info-opaque: #1769c6;
63
+ @dt-color-surface-info-subtle-opaque: #1769c6;
53
64
  @dt-color-surface-primary: #ffffff;
54
65
  @dt-color-surface-secondary: #f9f9f9;
55
66
  @dt-color-surface-moderate: #e9e9e9;
@@ -57,11 +68,55 @@
57
68
  @dt-color-surface-strong: #555555;
58
69
  @dt-color-surface-contrast: #222222;
59
70
  @dt-color-surface-critical: #ffe5e6;
71
+ @dt-color-surface-critical-subtle: #fff2f3;
72
+ @dt-color-surface-critical-strong: #b70b0b;
60
73
  @dt-color-surface-warning: #fff4cc;
74
+ @dt-color-surface-warning-subtle: #fffae5;
75
+ @dt-color-surface-warning-strong: #ffdb80;
61
76
  @dt-color-surface-success: #edf9eb;
77
+ @dt-color-surface-success-subtle: #f8fdf7;
78
+ @dt-color-surface-success-strong: #1aa340;
62
79
  @dt-color-surface-info: #eaf2fa;
80
+ @dt-color-surface-info-subtle: #f5f9fd;
81
+ @dt-color-surface-info-strong: #1768c6;
82
+ @dt-color-border-subtle: #000000;
83
+ @dt-color-border-default: #000000;
84
+ @dt-color-border-moderate: #000000;
85
+ @dt-color-border-bold: #000000;
86
+ @dt-color-border-subtle-inverted: #ffffff;
87
+ @dt-color-border-default-inverted: #ffffff;
88
+ @dt-color-border-moderate-inverted: #ffffff;
89
+ @dt-color-border-bold-inverted: #ffffff;
90
+ @dt-color-border-focus: #51a0fe;
91
+ @dt-color-border-critical: #ec0e0e;
92
+ @dt-color-border-success: #1aa340;
93
+ @dt-color-border-warning: #d28f2b;
94
+ @dt-color-border-brand: #7c52ff;
95
+ @dt-color-border-ai: #000000;
96
+ @dt-color-border-accent: #f9008e;
97
+ @dt-color-border-critical-subtle: #ff8585;
98
+ @dt-color-border-critical-strong: #b70b0b;
99
+ @dt-color-border-success-subtle: #b0ffa3;
100
+ @dt-color-border-success-strong: #124620;
101
+ @dt-color-border-warning-subtle: #ffdb80;
102
+ @dt-color-border-warning-strong: #674006;
103
+ @dt-color-border-brand-subtle: #dac7ff;
104
+ @dt-color-border-brand-strong: #3a1d95;
105
+ @dt-color-border-critical-inverted: #ff8585;
106
+ @dt-color-border-success-inverted: #b0ffa3;
107
+ @dt-color-border-warning-inverted: #ffdb80;
108
+ @dt-color-border-brand-inverted: #7c52ff;
109
+ @dt-color-border-critical-subtle-inverted: #b70b0b;
110
+ @dt-color-border-critical-strong-inverted: #ffe5e6;
111
+ @dt-color-border-success-subtle-inverted: #1aa340;
112
+ @dt-color-border-success-strong-inverted: #edf9eb;
113
+ @dt-color-border-warning-subtle-inverted: #d28f2b;
114
+ @dt-color-border-warning-strong-inverted: #fff4cc;
115
+ @dt-color-border-brand-subtle-inverted: #3a1d95;
116
+ @dt-color-border-brand-strong-inverted: #dac7ff;
63
117
  @dt-color-neutral-white: #ffffff;
64
118
  @dt-color-neutral-black: #000000;
119
+ @dt-color-neutral-transparent: #000000;
65
120
  @dt-color-black-100: #f9f9f9;
66
121
  @dt-color-black-200: #e9e9e9;
67
122
  @dt-color-black-300: #d2d2d2;
@@ -108,6 +163,8 @@
108
163
  @dt-color-tan-400: #3f3d3c;
109
164
  @dt-color-tan-500: #121212;
110
165
  @dt-color-gradient-magenta-purple: #000000;
166
+ @dt-color-brand-purple: #7c52ff;
167
+ @dt-color-brand-magenta: #f9008e;
111
168
  @dt-typography-body-small-font-family: -apple-system,BlinkMacSystemFont,"SF Pro","Segoe UI Adjusted","Segoe UI",SFMono,"Helvetica Neue",Cantarell,Ubuntu,Roboto,Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
112
169
  @dt-typography-body-small-font-weight: 400;
113
170
  @dt-typography-body-small-line-height: 140%;
@@ -244,35 +301,42 @@
244
301
  @dt-typography-code-base-font-size: 1.5rem;
245
302
  @dt-typography-code-base-text-case: none;
246
303
  @dt-size-0: 0;
304
+ @dt-size-50: 0.05rem;
247
305
  @dt-size-100: 0.1rem;
248
306
  @dt-size-200: 0.2rem;
249
307
  @dt-size-300: 0.4rem;
308
+ @dt-size-350: 0.6rem;
250
309
  @dt-size-400: 0.8rem;
310
+ @dt-size-450: 1.2rem;
251
311
  @dt-size-500: 1.6rem;
312
+ @dt-size-550: 2.4rem;
252
313
  @dt-size-600: 3.2rem;
314
+ @dt-size-650: 4.8rem;
253
315
  @dt-size-700: 6.4rem;
316
+ @dt-size-750: 9.6rem;
254
317
  @dt-size-800: 12.8rem;
255
- @dt-size-icon-100: 1.2rem;
256
- @dt-size-icon-200: 1.4rem;
257
- @dt-size-icon-300: 1.8rem;
258
- @dt-size-icon-400: 2rem;
259
- @dt-size-icon-500: 2.4rem;
260
- @dt-size-icon-600: 3.2rem;
261
- @dt-size-icon-700: 3.8rem;
262
- @dt-size-icon-800: 4.8rem;
263
318
  @dt-size-border-0: 0;
319
+ @dt-size-border-50: 0.05rem;
264
320
  @dt-size-border-100: 0.1rem;
321
+ @dt-size-border-150: 0.15rem;
265
322
  @dt-size-border-200: 0.2rem;
266
323
  @dt-size-border-300: 0.4rem;
267
324
  @dt-size-border-400: 0.8rem;
268
- @dt-size-border-icon-100: 0.1rem;
269
- @dt-size-border-icon-200: 0.125rem;
270
- @dt-size-border-icon-300: 0.15rem;
271
- @dt-size-border-icon-400: 0.175rem;
272
- @dt-size-border-icon-500: 0.175rem;
273
- @dt-size-border-icon-600: 0.25rem;
274
- @dt-size-border-icon-700: 0.275rem;
275
- @dt-size-border-icon-800: 0.35rem;
325
+ @dt-size-border-focus: 0.3rem;
326
+ @dt-size-50-negative: -0.05rem;
327
+ @dt-size-100-negative: -0.1rem;
328
+ @dt-size-200-negative: -0.2rem;
329
+ @dt-size-300-negative: -0.4rem;
330
+ @dt-size-350-negative: -0.6rem;
331
+ @dt-size-400-negative: -0.8rem;
332
+ @dt-size-450-negative: -1.2rem;
333
+ @dt-size-500-negative: -1.6rem;
334
+ @dt-size-550-negative: -2.4rem;
335
+ @dt-size-600-negative: -3.2rem;
336
+ @dt-size-650-negative: -4.8rem;
337
+ @dt-size-700-negative: -6.4rem;
338
+ @dt-size-750-negative: -9.6rem;
339
+ @dt-size-800-negative: -12.8rem;
276
340
  @dt-size-base: 0.8rem;
277
341
  @dt-size-radius-0: 0;
278
342
  @dt-size-radius-100: 0.1rem;
@@ -281,6 +345,92 @@
281
345
  @dt-size-radius-400: 0.8rem;
282
346
  @dt-size-radius-500: 1.6rem;
283
347
  @dt-size-radius-600: 3.2rem;
348
+ @dt-size-radius-pill: 10rem;
349
+ @dt-size-radius-circle: 5rem;
350
+ @dt-inputs-size-border-default: 0.15rem;
351
+ @dt-inputs-size-border-status: 0.2rem;
352
+ @dt-inputs-size-radius-xs: 0.4rem;
353
+ @dt-inputs-size-radius-sm: 0.8rem;
354
+ @dt-inputs-size-radius-md: 0.8rem;
355
+ @dt-inputs-size-radius-lg: 1.2rem;
356
+ @dt-inputs-size-radius-xl: 1.6rem;
357
+ @dt-inputs-line-height-default: 120%;
358
+ @dt-inputs-font-size-xs: 1.2rem;
359
+ @dt-inputs-font-size-sm: 1.2rem;
360
+ @dt-inputs-font-size-md: 1.5rem;
361
+ @dt-inputs-font-size-lg: 1.9rem;
362
+ @dt-inputs-font-size-xl: 2.7rem;
363
+ @dt-inputs-color-foreground-default: #3A3A3A;
364
+ @dt-inputs-color-foreground-placeholder: #808080;
365
+ @dt-inputs-color-foreground-disabled: #808080;
366
+ @dt-inputs-color-border-default: #0000001a;
367
+ @dt-inputs-color-border-focus: #51A0FE;
368
+ @dt-inputs-color-border-critical: #EC0E0E;
369
+ @dt-inputs-color-border-success: #1AA340;
370
+ @dt-inputs-color-border-warning: #D28F2B;
371
+ @dt-inputs-color-border-disabled: transparent;
372
+ @dt-inputs-color-background-default: #00000008;
373
+ @dt-inputs-color-background-focus: #00000003;
374
+ @dt-inputs-color-background-disabled: #0000001f;
375
+ @dt-action-color-foreground-base-default: #7C52FF;
376
+ @dt-action-color-foreground-base-hover: #551FFF;
377
+ @dt-action-color-foreground-base-active: #551FFF;
378
+ @dt-action-color-foreground-base-primary-default: #ffffff;
379
+ @dt-action-color-foreground-critical-default: #EC0E0E;
380
+ @dt-action-color-foreground-critical-hover: #D90D0D;
381
+ @dt-action-color-foreground-critical-active: #D90D0D;
382
+ @dt-action-color-foreground-critical-primary-default: #ffffff;
383
+ @dt-action-color-foreground-inverted-default: #ffffff;
384
+ @dt-action-color-foreground-inverted-hover: #ffffff;
385
+ @dt-action-color-foreground-inverted-active: #ffffff;
386
+ @dt-action-color-foreground-inverted-primary-default: #7C52FF;
387
+ @dt-action-color-foreground-inverted-primary-hover: #3A1D95;
388
+ @dt-action-color-foreground-inverted-primary-active: #3A1D95;
389
+ @dt-action-color-foreground-muted-default: #3A3A3A;
390
+ @dt-action-color-foreground-muted-hover: #3A3A3A;
391
+ @dt-action-color-foreground-muted-active: #3A3A3A;
392
+ @dt-action-color-foreground-disabled-default: #808080;
393
+ @dt-action-color-background-base-default: transparent;
394
+ @dt-action-color-background-base-hover: #7c52ff0a;
395
+ @dt-action-color-background-base-active: #7c52ff24;
396
+ @dt-action-color-background-base-primary-default: #7C52FF;
397
+ @dt-action-color-background-base-primary-hover: #6533FF;
398
+ @dt-action-color-background-base-primary-active: #4D14FF;
399
+ @dt-action-color-background-critical-default: transparent;
400
+ @dt-action-color-background-critical-hover: #ec0e0e08;
401
+ @dt-action-color-background-critical-active: #ec0e0e17;
402
+ @dt-action-color-background-critical-primary-default: #EC0E0E;
403
+ @dt-action-color-background-critical-primary-hover: #D90D0D;
404
+ @dt-action-color-background-critical-primary-active: #C50C0C;
405
+ @dt-action-color-background-inverted-default: transparent;
406
+ @dt-action-color-background-inverted-hover: #ffffff26;
407
+ @dt-action-color-background-inverted-active: #ffffff4d;
408
+ @dt-action-color-background-inverted-primary-default: #ffffff;
409
+ @dt-action-color-background-inverted-primary-hover: #F5F0FF;
410
+ @dt-action-color-background-inverted-primary-active: #E1D1FF;
411
+ @dt-action-color-background-muted-default: transparent;
412
+ @dt-action-color-background-muted-hover: #2222220d;
413
+ @dt-action-color-background-muted-active: #2222221a;
414
+ @dt-action-color-background-disabled-default: #D2D2D2;
415
+ @dt-action-color-border-base-outlined-default: #7C52FF;
416
+ @dt-action-color-border-critical-outlined-default: #EC0E0E;
417
+ @dt-action-color-border-inverted-outlined-default: #F9F9F9;
418
+ @dt-action-color-border-muted-outlined-default: #555555;
419
+ @dt-theme-sidebar-color-foreground: #000000;
420
+ @dt-theme-sidebar-color-background: #F9F9F9;
421
+ @dt-theme-sidebar-icon-color-foreground: #3A3A3A;
422
+ @dt-theme-sidebar-status-color-foreground: #555555;
423
+ @dt-theme-sidebar-row-color-background: transparent;
424
+ @dt-theme-sidebar-row-color-background-hover: #0000001a;
425
+ @dt-theme-sidebar-row-color-background-active: #D2D2D2;
426
+ @dt-theme-sidebar-selected-row-color-foreground: #000000;
427
+ @dt-theme-sidebar-selected-row-color-background: #E9E9E9;
428
+ @dt-theme-presence-color-background-available: #1AA340;
429
+ @dt-theme-presence-color-background-busy-unavailable: #EC0E0E;
430
+ @dt-theme-presence-color-background-busy: #F6AB3C;
431
+ @dt-theme-presence-color-background-offline: #ffffff;
432
+ @dt-theme-mention-color-foreground: #ffffff;
433
+ @dt-theme-mention-color-background: #7C52FF;
284
434
  @dt-opacity-0: 0;
285
435
  @dt-opacity-100: 0.05;
286
436
  @dt-opacity-200: 0.1;
@@ -319,14 +469,34 @@
319
469
  @dt-font-text-case-capitalize: capitalize;
320
470
  @dt-font-text-case-none: none;
321
471
  @dt-space-0: 0px;
472
+ @dt-space-50: 0.5px;
322
473
  @dt-space-100: 1px;
323
474
  @dt-space-200: 2px;
324
475
  @dt-space-300: 4px;
476
+ @dt-space-350: 6px;
325
477
  @dt-space-400: 8px;
478
+ @dt-space-450: 12px;
326
479
  @dt-space-500: 16px;
480
+ @dt-space-550: 24px;
327
481
  @dt-space-600: 32px;
482
+ @dt-space-650: 48px;
328
483
  @dt-space-700: 64px;
484
+ @dt-space-750: 96px;
329
485
  @dt-space-800: 128px;
486
+ @dt-space-50-negative: -0.5px;
487
+ @dt-space-100-negative: -1px;
488
+ @dt-space-200-negative: -2px;
489
+ @dt-space-300-negative: -4px;
490
+ @dt-space-350-negative: -6px;
491
+ @dt-space-400-negative: -8px;
492
+ @dt-space-450-negative: -12px;
493
+ @dt-space-500-negative: -16px;
494
+ @dt-space-550-negative: -24px;
495
+ @dt-space-600-negative: -32px;
496
+ @dt-space-650-negative: -48px;
497
+ @dt-space-700-negative: -64px;
498
+ @dt-space-750-negative: -96px;
499
+ @dt-space-800-negative: -128px;
330
500
  @dt-space-base: 8px;
331
501
  @dt-shadow-small-0-x: 0;
332
502
  @dt-shadow-small-0-y: 0.2rem;