@dialpad/dialtone 7.15.2 → 7.16.0-alpha.2

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 (5) hide show
  1. package/lib/build/less/components/avatar.less +72 -21
  2. package/lib/build/less/components/radio-checkbox.less +1 -38
  3. package/lib/dist/css/dialtone.css +50 -45
  4. package/lib/dist/css/dialtone.min.css +1 -1
  5. package/package.json +1 -1
package/lib/build/less/components/avatar.less CHANGED
@@ -8,8 +8,9 @@
8
8
  //
9
9
  // TABLE OF CONTENTS
10
10
  // • BASE STYLE
11
+ // • CHILDREN
11
12
  // • SIZES
12
- // • COLORS
13
+ // • VARIANTS
13
14
  //
14
15
  // ============================================================================
15
16
  // $ BASE STYLE
@@ -17,12 +18,12 @@
17
18
  .d-avatar {
18
19
  // Component CSS Vars
19
20
  // ------------------------------------------------------------------------
20
- --avatar-color-background: var(--gold-100);
21
+ --avatar-color-background: var(--bgc-moderate);
21
22
  --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);
23
+ --avatar-gradient-angle: -180deg;
24
+ --avatar-gradient-stop-1: var(--blue-200);
25
+ --avatar-gradient-stop-2: var(--purple-100);
26
+ --avatar-gradient-stop-3: var(--gold-100);
26
27
  --avatar-gradient:
27
28
  conic-gradient(
28
29
  from var(--avatar-gradient-angle) at 50% 50%,
@@ -31,30 +32,50 @@
31
32
  var(--avatar-gradient-stop-3) 360deg
32
33
  );
33
34
  --avatar-size-shape: var(--size-600);
35
+ --avatar-size-image: 100%;
34
36
  --avatar-size-text: var(--fs-200);
35
37
  --avatar-presence-position-right: calc(var(--space-200) * -1); // -2
36
38
  --avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
37
39
 
38
40
  position: relative;
39
- display: flex;
40
- align-items: center;
41
- justify-content: center;
42
- width: var(--avatar-size-shape);
43
- height: var(--avatar-size-shape);
41
+ display: inline-flex;
44
42
  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
- text-transform: uppercase;
49
- background-color: var(--avatar-color-background);
50
- background-image: var(--avatar-gradient);
51
- border-radius: var(--br-pill);
43
+
44
+ // -- CHILDREN
45
+ // ------------------------------------------------------------------------
46
+
47
+ &__canvas {
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ width: var(--avatar-size-shape);
52
+ height: var(--avatar-size-shape);
53
+ overflow: hidden;
54
+ background-color: var(--avatar-color-background);
55
+ background-image: var(--avatar-gradient);
56
+ border-radius: var(--br-pill);
57
+
58
+ .d-avatar--no-gradient & {
59
+ background-image: none;
60
+ }
61
+ }
52
62
 
53
63
  &__image {
54
- width: 100%;
55
- height: 100%;
64
+ width: var(--avatar-size-image);
65
+ height: var(--avatar-size-image);
56
66
  object-fit: cover;
57
- border-radius: inherit;
67
+ border-radius: var(--br-pill);
68
+ }
69
+
70
+ &__initials {
71
+ font-weight: var(--fw-bold);
72
+ font-size: var(--avatar-size-text);
73
+ line-height: var(--lh-100);
74
+ text-transform: uppercase;
75
+ }
76
+
77
+ &__icon {
78
+ display: flex;
58
79
  }
59
80
 
60
81
  &__presence {
@@ -64,6 +85,26 @@
64
85
  display: flex;
65
86
  }
66
87
 
88
+ &__count {
89
+ position: absolute;
90
+ right: 0;
91
+ bottom: 0;
92
+ display: inline-flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ box-sizing: border-box;
96
+ min-width: calc(var(--size-300) * 3.5);
97
+ padding: var(--space-200) calc(var(--space-200) + var(--space-100));
98
+ color: var(--fc-primary-inverted);
99
+ font-weight: var(--fw-bold);
100
+ font-size: calc(var(--fs-100) - var(--size-200));
101
+ line-height: var(--lh-100);
102
+ text-align: center;
103
+ background-color: var(--black-600);
104
+ border-radius: var(--br-pill);
105
+ box-shadow: 0 0 0 var(--size-200) var(--black-100);
106
+ }
107
+
67
108
  // -- SIZES
68
109
  // ------------------------------------------------------------------------
69
110
 
@@ -100,4 +141,14 @@
100
141
  --avatar-presence-position-right: var(--space-300); // 4
101
142
  --avatar-presence-position-bottom: var(--space-300); // 4
102
143
  }
144
+
145
+ // -- GROUP
146
+ // ------------------------------------------------------------------------
147
+
148
+ &--group {
149
+ --avatar-size-shape: calc(var(--size-300) * 4.5);
150
+
151
+ width: calc(var(--size-300) * 6);
152
+ height: calc(var(--size-300) * 6);
153
+ }
103
154
  }
package/lib/build/less/components/radio-checkbox.less CHANGED
@@ -139,6 +139,7 @@
139
139
  cursor: pointer;
140
140
  }
141
141
 
142
+
142
143
  // ============================================================================
143
144
  // $ CHECKBOXES
144
145
  // ----------------------------------------------------------------------------
@@ -206,41 +207,3 @@
206
207
  }
207
208
  }
208
209
  }
209
-
210
- // ============================================================================
211
- // $ RADIOS
212
- // ----------------------------------------------------------------------------
213
- .d-radio {
214
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
215
- border-radius: var(--br-circle);
216
-
217
- // Disabled
218
- &[disabled],
219
- &--disabled {
220
- --check-radio-color: var(--fc-disabled);
221
- --check-radio-color-border: var(--check-radio-color-border-disabled);
222
- --check-radio-color-background: var(--check-radio-color-background-disabled);
223
- }
224
-
225
- &:focus-visible,
226
- &:checked:focus-visible {
227
- box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
228
- }
229
-
230
- &:checked {
231
- --check-radio-color-background: var(--check-radio-color);
232
-
233
- box-shadow: inset 0 0 0 var(--size-200) var(--white);
234
-
235
- // Disabled
236
- &[disabled] {
237
- --check-radio-color-background: var(--black-400);
238
- }
239
- }
240
-
241
- &--disabled:checked {
242
- --check-radio-color-border: var(--check-radio-color-border-disabled);
243
- --check-radio-color-background: var(--black-400);
244
- }
245
- }
246
- }
package/lib/dist/css/dialtone.css CHANGED
@@ -468,37 +468,50 @@ body {
468
468
  --size-800-128: calc(12.8rem * 16);
469
469
  }
470
470
  .d-avatar {
471
- --avatar-color-background: var(--gold-100);
471
+ --avatar-color-background: var(--bgc-moderate);
472
472
  --avatar-color-text: var(--fc-secondary);
473
- --avatar-gradient-angle: 180deg;
474
- --avatar-gradient-stop-1: var(--gold-100);
475
- --avatar-gradient-stop-2: var(--magenta-100);
476
- --avatar-gradient-stop-3: var(--blue-200);
473
+ --avatar-gradient-angle: -180deg;
474
+ --avatar-gradient-stop-1: var(--blue-200);
475
+ --avatar-gradient-stop-2: var(--purple-100);
476
+ --avatar-gradient-stop-3: var(--gold-100);
477
477
  --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);
478
478
  --avatar-size-shape: var(--size-600);
479
+ --avatar-size-image: 100%;
479
480
  --avatar-size-text: var(--fs-200);
480
481
  --avatar-presence-position-right: calc(var(--space-200) * -1);
481
482
  --avatar-presence-position-bottom: calc(var(--space-200) * -1);
482
483
  position: relative;
484
+ display: inline-flex;
485
+ color: var(--avatar-color-text);
486
+ }
487
+ .d-avatar__canvas {
483
488
  display: flex;
484
489
  align-items: center;
485
490
  justify-content: center;
486
491
  width: var(--avatar-size-shape);
487
492
  height: var(--avatar-size-shape);
488
- color: var(--avatar-color-text);
489
- font-weight: var(--fw-bold);
490
- font-size: var(--avatar-size-text);
491
- line-height: var(--lh-100);
492
- text-transform: uppercase;
493
+ overflow: hidden;
493
494
  background-color: var(--avatar-color-background);
494
495
  background-image: var(--avatar-gradient);
495
496
  border-radius: var(--br-pill);
496
497
  }
498
+ .d-avatar--no-gradient .d-avatar__canvas {
499
+ background-image: none;
500
+ }
497
501
  .d-avatar__image {
498
- width: 100%;
499
- height: 100%;
502
+ width: var(--avatar-size-image);
503
+ height: var(--avatar-size-image);
500
504
  object-fit: cover;
501
- border-radius: inherit;
505
+ border-radius: var(--br-pill);
506
+ }
507
+ .d-avatar__initials {
508
+ font-weight: var(--fw-bold);
509
+ font-size: var(--avatar-size-text);
510
+ line-height: var(--lh-100);
511
+ text-transform: uppercase;
512
+ }
513
+ .d-avatar__icon {
514
+ display: flex;
502
515
  }
503
516
  .d-avatar__presence {
504
517
  position: absolute;
@@ -506,6 +519,25 @@ body {
506
519
  bottom: var(--avatar-presence-position-bottom);
507
520
  display: flex;
508
521
  }
522
+ .d-avatar__count {
523
+ position: absolute;
524
+ right: 0;
525
+ bottom: 0;
526
+ display: inline-flex;
527
+ align-items: center;
528
+ justify-content: center;
529
+ box-sizing: border-box;
530
+ min-width: calc(var(--size-300) * 3.5);
531
+ padding: var(--space-200) calc(var(--space-200) + var(--space-100));
532
+ color: var(--fc-primary-inverted);
533
+ font-weight: var(--fw-bold);
534
+ font-size: calc(var(--fs-100) - var(--size-200));
535
+ line-height: var(--lh-100);
536
+ text-align: center;
537
+ background-color: var(--black-600);
538
+ border-radius: var(--br-pill);
539
+ box-shadow: 0 0 0 var(--size-200) var(--black-100);
540
+ }
509
541
  .d-avatar--xs {
510
542
  --avatar-size-shape: calc(var(--size-500) + var(--size-200));
511
543
  --avatar-presence-position-right: calc(var(--space-300) * -1);
@@ -535,6 +567,11 @@ body {
535
567
  --avatar-presence-position-right: var(--space-300);
536
568
  --avatar-presence-position-bottom: var(--space-300);
537
569
  }
570
+ .d-avatar--group {
571
+ --avatar-size-shape: calc(var(--size-300) * 4.5);
572
+ width: calc(var(--size-300) * 6);
573
+ height: calc(var(--size-300) * 6);
574
+ }
538
575
  .d-badge {
539
576
  --badge-color-text: var(--fc-primary);
540
577
  --badge-color-background: var(--black-200);
@@ -2661,38 +2698,6 @@ body {
2661
2698
  --check-radio-color-background: var(--check-radio-color-background-disabled);
2662
2699
  }
2663
2700
  }
2664
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2665
- .d-radio {
2666
- border-radius: var(--br-circle);
2667
- }
2668
- .d-radio[disabled],
2669
- .d-radio--disabled {
2670
- --check-radio-color: var(--fc-disabled);
2671
- --check-radio-color-border: var(--check-radio-color-border-disabled);
2672
- --check-radio-color-background: var(--check-radio-color-background-disabled);
2673
- }
2674
- .d-radio.focus-visible.js-focus-visible,
2675
- .js-focus-visible .d-radio.focus-visible,
2676
- .d-radio:checked.focus-visible.js-focus-visible,
2677
- .js-focus-visible .d-radio:checked.focus-visible {
2678
- box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
2679
- }
2680
- .d-radio:focus-visible,
2681
- .d-radio:checked:focus-visible {
2682
- box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
2683
- }
2684
- .d-radio:checked {
2685
- --check-radio-color-background: var(--check-radio-color);
2686
- box-shadow: inset 0 0 0 var(--size-200) var(--white);
2687
- }
2688
- .d-radio:checked[disabled] {
2689
- --check-radio-color-background: var(--black-400);
2690
- }
2691
- .d-radio--disabled:checked {
2692
- --check-radio-color-border: var(--check-radio-color-border-disabled);
2693
- --check-radio-color-background: var(--black-400);
2694
- }
2695
- }
2696
2701
  .d-select {
2697
2702
  --select-color-border: var(--black-500);
2698
2703
  --select-notch-position-right: calc(var(--size-300) * 2);