@dialpad/dialtone 7.6.0 → 7.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 (6) hide show
  1. package/lib/build/less/components/avatar.less +59 -167
  2. package/lib/build/less/components/chip.less +2 -2
  3. package/lib/build/less/components/presence.less +19 -19
  4. package/lib/dist/css/dialtone.css +73 -143
  5. package/lib/dist/css/dialtone.min.css +1 -1
  6. package/package.json +3 -2
package/lib/build/less/components/avatar.less CHANGED
@@ -10,7 +10,6 @@
10
10
  // • BASE STYLE
11
11
  // • SIZES
12
12
  // • COLORS
13
- // • ALTERNATE STYLES
14
13
  //
15
14
  // ============================================================================
16
15
  // $ BASE STYLE
@@ -18,193 +17,86 @@
18
17
  .d-avatar {
19
18
  // Component CSS Vars
20
19
  // ------------------------------------------------------------------------
21
- --avatar--fc: var(--fc-tertiary);
22
- --avatar--bgc: var(--fc-primary);
23
- --avatar--size: var(--su24);
24
- --presence-position-right: var(--sun2);
25
- --presence-position-bottom: var(--sun2);
20
+ --avatar-color-background: var(--gold-100);
21
+ --avatar-color-text: var(--fc-secondary);
22
+ --avatar-gradient-angle: 180deg;
23
+ --avatar-gradient-stop-1: var(--gold-100);
24
+ --avatar-gradient-stop-2: var(--magenta-100);
25
+ --avatar-gradient-stop-3: var(--blue-200);
26
+ --avatar-gradient:
27
+ conic-gradient(
28
+ from var(--avatar-gradient-angle) at 50% 50%,
29
+ var(--avatar-gradient-stop-1) 0deg,
30
+ var(--avatar-gradient-stop-2) 180deg,
31
+ var(--avatar-gradient-stop-3) 360deg
32
+ );
33
+ --avatar-size-shape: var(--size-600);
34
+ --avatar-size-text: var(--fs-200);
35
+ --avatar-presence-position-right: var(--sun2);
36
+ --avatar-presence-position-bottom: var(--sun2);
26
37
 
27
38
  position: relative;
28
- width: var(--avatar--size);
29
- height: var(--avatar--size);
30
- color: var(--avatar--fc);
31
- background-color: var(--avatar--bgc);
32
- border-radius: 50%;
33
-
34
- img {
35
- width: var(--avatar--size);
36
- height: var(--avatar--size);
39
+ display: flex;
40
+ align-items: center;
41
+ justify-content: center;
42
+ width: var(--avatar-size-shape);
43
+ height: var(--avatar-size-shape);
44
+ color: var(--avatar-color-text);
45
+ font-weight: var(--fw-bold);
46
+ font-size: var(--avatar-size-text);
47
+ line-height: var(--lh-100);
48
+ background-color: var(--avatar-color-background);
49
+ background-image: var(--avatar-gradient);
50
+ border-radius: var(--br-pill);
51
+
52
+ &__image {
53
+ width: 100%;
54
+ height: 100%;
37
55
  object-fit: cover;
38
56
  border-radius: inherit;
39
57
  }
40
58
 
41
59
  &__presence {
42
60
  position: absolute;
43
- right: var(--presence-position-right);
44
- bottom: var(--presence-position-bottom);
61
+ right: var(--avatar-presence-position-right);
62
+ bottom: var(--avatar-presence-position-bottom);
45
63
  display: flex;
46
64
  }
47
65
 
48
66
  // -- SIZES
49
67
  // ------------------------------------------------------------------------
50
- //&--sm {}
51
-
52
- &--md {
53
- --avatar--size: var(--su32);
54
- --presence-position-right: var(--sun1);
55
- --presence-position-bottom: var(--sun1);
56
- }
57
-
58
- &--lg {
59
- --avatar--size: var(--su48);
60
- --presence-position-right: var(--su1);
61
- --presence-position-bottom: var(--su1);
62
- }
63
-
64
- // -- COLORS
65
- // ------------------------------------------------------------------------
66
- &--purple-600 {
67
- --avatar--fc: var(--white);
68
- --avatar--bgc: var(--purple-600);
69
- }
70
-
71
- &--purple-500 {
72
- --avatar--fc: var(--white);
73
- --avatar--bgc: var(--purple-500);
74
- }
75
-
76
- &--purple-400 {
77
- --avatar--fc: var(--white);
78
- --avatar--bgc: var(--purple-400);
79
- }
80
-
81
- &--purple-300 {
82
- --avatar--fc: var(--purple-600);
83
- --avatar--bgc: var(--purple-300);
84
- }
85
-
86
- &--purple-200 {
87
- --avatar--fc: var(--purple-600);
88
- --avatar--bgc: var(--purple-200);
89
- }
90
-
91
- &--orange-500 {
92
- --avatar--fc: var(--white);
93
- --avatar--bgc: var(--orange-500);
94
- }
95
-
96
- &--orange-400 {
97
- --avatar--fc: var(--orange-600);
98
- --avatar--bgc: var(--orange-400);
99
- }
100
-
101
- &--orange-300 {
102
- --avatar--fc: var(--orange-600);
103
- --avatar--bgc: var(--orange-300);
104
- }
105
-
106
- &--orange-200 {
107
- --avatar--fc: var(--orange-600);
108
- --avatar--bgc: var(--orange-200);
109
- }
110
-
111
- &--magenta-400 {
112
- --avatar--fc: var(--white);
113
- --avatar--bgc: var(--magenta-400);
114
- }
115
-
116
- &--magenta-300 {
117
- --avatar--fc: var(--white);
118
- --avatar--bgc: var(--magenta-300);
119
- }
120
-
121
- &--magenta-200 {
122
- --avatar--fc: var(--magenta-500);
123
- --avatar--bgc: var(--magenta-200);
124
- }
125
-
126
- &--magenta-100 {
127
- --avatar--fc: var(--magenta-500);
128
- --avatar--bgc: var(--magenta-100);
129
- }
130
-
131
- &--gold-500 {
132
- --avatar--fc: var(--white);
133
- --avatar--bgc: var(--gold-500);
134
- }
135
-
136
- &--gold-300 {
137
- --avatar--fc: var(--gold-500);
138
- --avatar--bgc: var(--gold-300);
139
- }
140
-
141
- &--gold-200 {
142
- --avatar--fc: var(--gold-500);
143
- --avatar--bgc: var(--gold-200);
144
- }
145
-
146
- &--gold-100 {
147
- --avatar--fc: var(--gold-500);
148
- --avatar--bgc: var(--gold-100);
149
- }
150
- }
151
-
152
-
153
- // ============================================================================
154
- // $ ALTERNATE STYLES
155
- // ============================================================================
156
- // $$ INITIALS
157
- // ----------------------------------------------------------------------------
158
- .d-avatar--initials {
159
- display: flex;
160
- align-items: center;
161
- justify-content: center;
162
- font-weight: var(--fw-bold);
163
- font-family: inherit;
164
- text-align: center;
165
-
166
- // -- SIZES
167
- // ------------------------------------------------------------------------
168
- &.d-avatar--sm {
169
- font-size: var(--fs-100);
170
- }
171
68
 
172
- &.d-avatar--md {
173
- font-size: var(--fs-200);
69
+ &--xs {
70
+ --avatar-size-shape: calc(var(--size-500) + var(--size-200));
71
+ --avatar-presence-position-right: var(--sun4);
72
+ --avatar-presence-position-bottom: var(--sun4);
174
73
  }
175
74
 
176
- &.d-avatar--lg {
177
- font-size: var(--fs-300);
75
+ &--sm {
76
+ --avatar-size-shape: calc(var(--size-500) + var(--size-400));
77
+ --avatar-size-text: var(--fs-100);
78
+ --avatar-presence-position-right: var(--sun2);
79
+ --avatar-presence-position-bottom: var(--sun2);
178
80
  }
179
- }
180
81
 
181
- // $$ ICON
182
- // ----------------------------------------------------------------------------
183
- .d-avatar--icon {
184
- display: flex;
185
- align-items: center;
186
- justify-content: center;
187
-
188
- // -- SIZES
189
- // ------------------------------------------------------------------------
190
- &.d-avatar--sm {
191
- .d-svg {
192
- width: var(--su16);
193
- height: var(--su16);
194
- }
82
+ &--md {
83
+ --avatar-size-shape: var(--size-600);
84
+ --avatar-size-text: var(--fs-200);
85
+ --avatar-presence-position-right: var(--sun1);
86
+ --avatar-presence-position-bottom: var(--sun1);
195
87
  }
196
88
 
197
- &.d-avatar--md {
198
- .d-svg {
199
- width: var(--su24);
200
- height: var(--su24);
201
- }
89
+ &--lg {
90
+ --avatar-size-shape: calc(var(--size-600) + var(--size-500));
91
+ --avatar-size-text: var(--fs-300);
92
+ --avatar-presence-position-right: var(--su1);
93
+ --avatar-presence-position-bottom: var(--su1);
202
94
  }
203
95
 
204
- &.d-avatar--lg {
205
- .d-svg {
206
- width: var(--su32);
207
- height: var(--su32);
208
- }
96
+ &--xl {
97
+ --avatar-size-shape: var(--size-700);
98
+ --avatar-size-text: var(--fs-400);
99
+ --avatar-presence-position-right: var(--su4);
100
+ --avatar-presence-position-bottom: var(--su4);
209
101
  }
210
102
  }
package/lib/build/less/components/chip.less CHANGED
@@ -144,7 +144,7 @@
144
144
 
145
145
  // reserves space within the chip for the close button, since the close button is
146
146
  // not nested within the chip.
147
- &::after {
147
+ &:not(:only-child)::after {
148
148
  flex-shrink: 0;
149
149
  width: var(--su12);
150
150
  height: var(--su12);
@@ -187,7 +187,7 @@
187
187
 
188
188
  // reserves space within the chip for the close button, since the close button is
189
189
  // not nested within the chip.
190
- &::after {
190
+ &:not(:only-child)::after {
191
191
  flex-shrink: 0;
192
192
  width: calc(var(--su12) + var(--su2));
193
193
  height: calc(var(--su12) + var(--su2));
package/lib/build/less/components/presence.less CHANGED
@@ -9,46 +9,46 @@
9
9
  // visit https://dialpad.design/components/presence
10
10
 
11
11
  .d-presence {
12
- --color-border-base: var(--black-100);
13
- --color-border-offline: var(--black-400);
14
- --color-background-base: var(--white);
15
- --color-background-active: var(--green-400);
16
- --color-background-busy: var(--red-300);
17
- --color-background-away: var(--gold-200);
18
- --color-background-offline: var(--white);
12
+ --presence-color-border-base: var(--black-100);
13
+ --presence-color-border-offline: var(--black-400);
14
+ --presence-color-background-base: var(--white);
15
+ --presence-color-background-active: var(--green-400);
16
+ --presence-color-background-busy: var(--red-300);
17
+ --presence-color-background-away: var(--gold-300);
18
+ --presence-color-background-offline: var(--white);
19
19
 
20
20
  display: inline-block;
21
21
  box-sizing: border-box;
22
- border-color: var(--color-border-base);
22
+ border-color: var(--presence-color-border-base);
23
23
  border-style: solid;
24
- border-width: var(--su2);
25
- border-radius: 50%;
24
+ border-width: var(--size-200);
25
+ border-radius: var(--br-circle);
26
26
 
27
27
  &__inner {
28
28
  box-sizing: border-box;
29
- width: var(--su8);
30
- height: var(--su8);
31
- background-color: var(--color-background-base);
29
+ width: var(--size-400);
30
+ height: var(--size-400);
31
+ background-color: var(--presence-color-background-base);
32
32
  border: none;
33
33
  border-radius: 50%;
34
34
  }
35
35
 
36
36
  &__inner--active {
37
- background-color: var(--color-background-active);
37
+ background-color: var(--presence-color-background-active);
38
38
  }
39
39
 
40
40
  &__inner--busy {
41
- background-color: var(--color-background-busy);
41
+ background-color: var(--presence-color-background-busy);
42
42
  }
43
43
 
44
44
  &__inner--away {
45
- background-color: var(--color-background-away);
45
+ background-color: var(--presence-color-background-away);
46
46
  }
47
47
 
48
48
  &__inner--offline {
49
- background-color: var(--color-background-offline);
50
- border-color: var(--color-border-offline);
49
+ background-color: var(--presence-color-background-offline);
50
+ border-color: var(--presence-color-border-offline);
51
51
  border-style: solid;
52
- border-width: var(--su2);
52
+ border-width: var(--size-200);
53
53
  }
54
54
  }
package/lib/dist/css/dialtone.css CHANGED
@@ -447,141 +447,71 @@ body {
447
447
  --size-800-128: calc(12.8rem * 16);
448
448
  }
449
449
  .d-avatar {
450
- --avatar--fc: var(--fc-tertiary);
451
- --avatar--bgc: var(--fc-primary);
452
- --avatar--size: var(--su24);
453
- --presence-position-right: var(--sun2);
454
- --presence-position-bottom: var(--sun2);
450
+ --avatar-color-background: var(--gold-100);
451
+ --avatar-color-text: var(--fc-secondary);
452
+ --avatar-gradient-angle: 180deg;
453
+ --avatar-gradient-stop-1: var(--gold-100);
454
+ --avatar-gradient-stop-2: var(--magenta-100);
455
+ --avatar-gradient-stop-3: var(--blue-200);
456
+ --avatar-gradient: conic-gradient(from var(--avatar-gradient-angle) at 50% 50%, var(--avatar-gradient-stop-1) 0deg, var(--avatar-gradient-stop-2) 180deg, var(--avatar-gradient-stop-3) 360deg);
457
+ --avatar-size-shape: var(--size-600);
458
+ --avatar-size-text: var(--fs-200);
459
+ --avatar-presence-position-right: var(--sun2);
460
+ --avatar-presence-position-bottom: var(--sun2);
455
461
  position: relative;
456
- width: var(--avatar--size);
457
- height: var(--avatar--size);
458
- color: var(--avatar--fc);
459
- background-color: var(--avatar--bgc);
460
- border-radius: 50%;
462
+ display: flex;
463
+ align-items: center;
464
+ justify-content: center;
465
+ width: var(--avatar-size-shape);
466
+ height: var(--avatar-size-shape);
467
+ color: var(--avatar-color-text);
468
+ font-weight: var(--fw-bold);
469
+ font-size: var(--avatar-size-text);
470
+ line-height: var(--lh-100);
471
+ background-color: var(--avatar-color-background);
472
+ background-image: var(--avatar-gradient);
473
+ border-radius: var(--br-pill);
461
474
  }
462
- .d-avatar img {
463
- width: var(--avatar--size);
464
- height: var(--avatar--size);
475
+ .d-avatar__image {
476
+ width: 100%;
477
+ height: 100%;
465
478
  object-fit: cover;
466
479
  border-radius: inherit;
467
480
  }
468
481
  .d-avatar__presence {
469
482
  position: absolute;
470
- right: var(--presence-position-right);
471
- bottom: var(--presence-position-bottom);
472
- display: flex;
473
- }
474
- .d-avatar--md {
475
- --avatar--size: var(--su32);
476
- --presence-position-right: var(--sun1);
477
- --presence-position-bottom: var(--sun1);
478
- }
479
- .d-avatar--lg {
480
- --avatar--size: var(--su48);
481
- --presence-position-right: var(--su1);
482
- --presence-position-bottom: var(--su1);
483
- }
484
- .d-avatar--purple-600 {
485
- --avatar--fc: var(--white);
486
- --avatar--bgc: var(--purple-600);
487
- }
488
- .d-avatar--purple-500 {
489
- --avatar--fc: var(--white);
490
- --avatar--bgc: var(--purple-500);
491
- }
492
- .d-avatar--purple-400 {
493
- --avatar--fc: var(--white);
494
- --avatar--bgc: var(--purple-400);
495
- }
496
- .d-avatar--purple-300 {
497
- --avatar--fc: var(--purple-600);
498
- --avatar--bgc: var(--purple-300);
499
- }
500
- .d-avatar--purple-200 {
501
- --avatar--fc: var(--purple-600);
502
- --avatar--bgc: var(--purple-200);
503
- }
504
- .d-avatar--orange-500 {
505
- --avatar--fc: var(--white);
506
- --avatar--bgc: var(--orange-500);
507
- }
508
- .d-avatar--orange-400 {
509
- --avatar--fc: var(--orange-600);
510
- --avatar--bgc: var(--orange-400);
511
- }
512
- .d-avatar--orange-300 {
513
- --avatar--fc: var(--orange-600);
514
- --avatar--bgc: var(--orange-300);
515
- }
516
- .d-avatar--orange-200 {
517
- --avatar--fc: var(--orange-600);
518
- --avatar--bgc: var(--orange-200);
519
- }
520
- .d-avatar--magenta-400 {
521
- --avatar--fc: var(--white);
522
- --avatar--bgc: var(--magenta-400);
523
- }
524
- .d-avatar--magenta-300 {
525
- --avatar--fc: var(--white);
526
- --avatar--bgc: var(--magenta-300);
527
- }
528
- .d-avatar--magenta-200 {
529
- --avatar--fc: var(--magenta-500);
530
- --avatar--bgc: var(--magenta-200);
531
- }
532
- .d-avatar--magenta-100 {
533
- --avatar--fc: var(--magenta-500);
534
- --avatar--bgc: var(--magenta-100);
535
- }
536
- .d-avatar--gold-500 {
537
- --avatar--fc: var(--white);
538
- --avatar--bgc: var(--gold-500);
539
- }
540
- .d-avatar--gold-300 {
541
- --avatar--fc: var(--gold-500);
542
- --avatar--bgc: var(--gold-300);
543
- }
544
- .d-avatar--gold-200 {
545
- --avatar--fc: var(--gold-500);
546
- --avatar--bgc: var(--gold-200);
547
- }
548
- .d-avatar--gold-100 {
549
- --avatar--fc: var(--gold-500);
550
- --avatar--bgc: var(--gold-100);
551
- }
552
- .d-avatar--initials {
483
+ right: var(--avatar-presence-position-right);
484
+ bottom: var(--avatar-presence-position-bottom);
553
485
  display: flex;
554
- align-items: center;
555
- justify-content: center;
556
- font-weight: var(--fw-bold);
557
- font-family: inherit;
558
- text-align: center;
559
- }
560
- .d-avatar--initials.d-avatar--sm {
561
- font-size: var(--fs-100);
562
- }
563
- .d-avatar--initials.d-avatar--md {
564
- font-size: var(--fs-200);
565
486
  }
566
- .d-avatar--initials.d-avatar--lg {
567
- font-size: var(--fs-300);
487
+ .d-avatar--xs {
488
+ --avatar-size-shape: calc(var(--size-500) + var(--size-200));
489
+ --avatar-presence-position-right: var(--sun4);
490
+ --avatar-presence-position-bottom: var(--sun4);
568
491
  }
569
- .d-avatar--icon {
570
- display: flex;
571
- align-items: center;
572
- justify-content: center;
492
+ .d-avatar--sm {
493
+ --avatar-size-shape: calc(var(--size-500) + var(--size-400));
494
+ --avatar-size-text: var(--fs-100);
495
+ --avatar-presence-position-right: var(--sun2);
496
+ --avatar-presence-position-bottom: var(--sun2);
573
497
  }
574
- .d-avatar--icon.d-avatar--sm .d-svg {
575
- width: var(--su16);
576
- height: var(--su16);
498
+ .d-avatar--md {
499
+ --avatar-size-shape: var(--size-600);
500
+ --avatar-size-text: var(--fs-200);
501
+ --avatar-presence-position-right: var(--sun1);
502
+ --avatar-presence-position-bottom: var(--sun1);
577
503
  }
578
- .d-avatar--icon.d-avatar--md .d-svg {
579
- width: var(--su24);
580
- height: var(--su24);
504
+ .d-avatar--lg {
505
+ --avatar-size-shape: calc(var(--size-600) + var(--size-500));
506
+ --avatar-size-text: var(--fs-300);
507
+ --avatar-presence-position-right: var(--su1);
508
+ --avatar-presence-position-bottom: var(--su1);
581
509
  }
582
- .d-avatar--icon.d-avatar--lg .d-svg {
583
- width: var(--su32);
584
- height: var(--su32);
510
+ .d-avatar--xl {
511
+ --avatar-size-shape: var(--size-700);
512
+ --avatar-size-text: var(--fs-400);
513
+ --avatar-presence-position-right: var(--su4);
514
+ --avatar-presence-position-bottom: var(--su4);
585
515
  }
586
516
  .d-badge {
587
517
  --badge--fc: var(--fc-primary);
@@ -1402,7 +1332,7 @@ body {
1402
1332
  width: 1.4rem;
1403
1333
  height: 1.4rem;
1404
1334
  }
1405
- .d-chip__label--xs::after {
1335
+ .d-chip__label--xs:not(:only-child)::after {
1406
1336
  flex-shrink: 0;
1407
1337
  width: var(--su12);
1408
1338
  height: var(--su12);
@@ -1432,7 +1362,7 @@ body {
1432
1362
  width: 1.6rem;
1433
1363
  height: 1.6rem;
1434
1364
  }
1435
- .d-chip__label--sm::after {
1365
+ .d-chip__label--sm:not(:only-child)::after {
1436
1366
  flex-shrink: 0;
1437
1367
  width: calc(var(--su12) + var(--su2));
1438
1368
  height: calc(var(--su12) + var(--su2));
@@ -3427,42 +3357,42 @@ legend .d-label {
3427
3357
  gap: var(--su8);
3428
3358
  }
3429
3359
  .d-presence {
3430
- --color-border-base: var(--black-100);
3431
- --color-border-offline: var(--black-400);
3432
- --color-background-base: var(--white);
3433
- --color-background-active: var(--green-400);
3434
- --color-background-busy: var(--red-300);
3435
- --color-background-away: var(--gold-200);
3436
- --color-background-offline: var(--white);
3360
+ --presence-color-border-base: var(--black-100);
3361
+ --presence-color-border-offline: var(--black-400);
3362
+ --presence-color-background-base: var(--white);
3363
+ --presence-color-background-active: var(--green-400);
3364
+ --presence-color-background-busy: var(--red-300);
3365
+ --presence-color-background-away: var(--gold-300);
3366
+ --presence-color-background-offline: var(--white);
3437
3367
  display: inline-block;
3438
3368
  box-sizing: border-box;
3439
- border-color: var(--color-border-base);
3369
+ border-color: var(--presence-color-border-base);
3440
3370
  border-style: solid;
3441
- border-width: var(--su2);
3442
- border-radius: 50%;
3371
+ border-width: var(--size-200);
3372
+ border-radius: var(--br-circle);
3443
3373
  }
3444
3374
  .d-presence__inner {
3445
3375
  box-sizing: border-box;
3446
- width: var(--su8);
3447
- height: var(--su8);
3448
- background-color: var(--color-background-base);
3376
+ width: var(--size-400);
3377
+ height: var(--size-400);
3378
+ background-color: var(--presence-color-background-base);
3449
3379
  border: none;
3450
3380
  border-radius: 50%;
3451
3381
  }
3452
3382
  .d-presence__inner--active {
3453
- background-color: var(--color-background-active);
3383
+ background-color: var(--presence-color-background-active);
3454
3384
  }
3455
3385
  .d-presence__inner--busy {
3456
- background-color: var(--color-background-busy);
3386
+ background-color: var(--presence-color-background-busy);
3457
3387
  }
3458
3388
  .d-presence__inner--away {
3459
- background-color: var(--color-background-away);
3389
+ background-color: var(--presence-color-background-away);
3460
3390
  }
3461
3391
  .d-presence__inner--offline {
3462
- background-color: var(--color-background-offline);
3463
- border-color: var(--color-border-offline);
3392
+ background-color: var(--presence-color-background-offline);
3393
+ border-color: var(--presence-color-border-offline);
3464
3394
  border-style: solid;
3465
- border-width: var(--su2);
3395
+ border-width: var(--size-200);
3466
3396
  }
3467
3397
  .d-icon {
3468
3398
  --icon-base-scale: 0.8rem;