@dialpad/dialtone-css 8.50.6 → 8.52.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 (7) hide show
  1. package/lib/build/less/components/stack.less +35 -1
  2. package/lib/build/less/recipes/callbox.less +23 -16
  3. package/lib/dist/dialtone-default-theme.css +128 -17
  4. package/lib/dist/dialtone-default-theme.min.css +1 -1
  5. package/lib/dist/dialtone.css +128 -17
  6. package/lib/dist/dialtone.min.css +1 -1
  7. package/package.json +1 -1
package/lib/build/less/components/stack.less CHANGED
@@ -43,6 +43,10 @@
43
43
  }
44
44
 
45
45
  .gap-options() {
46
+ &-gap-50 {
47
+ .d-stack--gap-50();
48
+ }
49
+
46
50
  &-gap-100 {
47
51
  .d-stack--gap-100();
48
52
  }
@@ -55,6 +59,10 @@
55
59
  .d-stack--gap-300();
56
60
  }
57
61
 
62
+ &-gap-350 {
63
+ .d-stack--gap-350();
64
+ }
65
+
58
66
  &-gap-400 {
59
67
  .d-stack--gap-400();
60
68
  }
@@ -67,9 +75,29 @@
67
75
  .d-stack--gap-500();
68
76
  }
69
77
 
78
+ &-gap-525 {
79
+ .d-stack--gap-525();
80
+ }
81
+
82
+ &-gap-550 {
83
+ .d-stack--gap-550();
84
+ }
85
+
70
86
  &-gap-600 {
71
87
  .d-stack--gap-600();
72
88
  }
89
+
90
+ &-gap-625 {
91
+ .d-stack--gap-625();
92
+ }
93
+
94
+ &-gap-650 {
95
+ .d-stack--gap-650();
96
+ }
97
+
98
+ &-gap-700 {
99
+ .d-stack--gap-700();
100
+ }
73
101
  }
74
102
 
75
103
  .d-stack {
@@ -116,14 +144,20 @@
116
144
  // ============================================================================
117
145
  // $ SIZES
118
146
  // ----------------------------------------------------------------------------
147
+ .d-stack--gap-50 { --stack-gap: var(--dt-space-50); }
119
148
  .d-stack--gap-100 { --stack-gap: var(--dt-space-100); }
120
149
  .d-stack--gap-200 { --stack-gap: var(--dt-space-200); }
121
150
  .d-stack--gap-300 { --stack-gap: var(--dt-space-300); }
151
+ .d-stack--gap-350 { --stack-gap: var(--dt-space-350); }
122
152
  .d-stack--gap-400 { --stack-gap: var(--dt-space-400); }
123
153
  .d-stack--gap-450 { --stack-gap: var(--dt-space-450); }
124
154
  .d-stack--gap-500 { --stack-gap: var(--dt-space-500); }
155
+ .d-stack--gap-525 { --stack-gap: var(--dt-space-525); }
156
+ .d-stack--gap-550 { --stack-gap: var(--dt-space-550); }
125
157
  .d-stack--gap-600 { --stack-gap: var(--dt-space-600); }
126
-
158
+ .d-stack--gap-625 { --stack-gap: var(--dt-space-625); }
159
+ .d-stack--gap-650 { --stack-gap: var(--dt-space-650); }
160
+ .d-stack--gap-700 { --stack-gap: var(--dt-space-700); }
127
161
 
128
162
  // ============================================================================
129
163
  // $ RESPONSIVE
package/lib/build/less/recipes/callbox.less CHANGED
@@ -2,21 +2,26 @@
2
2
  padding: 0;
3
3
  color: var(--dt-color-foreground-primary);
4
4
  background-color: var(--dt-color-surface-primary);
5
- border-radius: var(--dt-size-radius-300);
5
+ border-radius: var(--dt-size-radius-400);
6
6
  }
7
7
 
8
8
  .d-recipe-callbox__video {
9
9
  display: flex;
10
- margin-bottom: var(--dt-space-300-negative);
11
10
  overflow: clip;
12
- border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
11
+ border-radius: var(--dt-size-radius-400) var(--dt-size-radius-400) 0 0;
13
12
  }
14
13
 
15
14
  .d-recipe-callbox__main-content {
16
15
  align-items: stretch;
17
16
  padding: 0;
18
17
  border: var(--dt-size-border-100) solid transparent;
19
- border-radius: var(--dt-size-radius-300);
18
+ border-radius: var(--dt-size-radius-400);
19
+
20
+ .d-recipe-callbox__video + & {
21
+ border-start-start-radius: 0;
22
+ border-start-end-radius: 0;
23
+ border-block-start-width: 0;
24
+ }
20
25
 
21
26
  &.d-recipe-callbox__border-default {
22
27
  border-color: var(--dt-color-border-default);
@@ -29,29 +34,32 @@
29
34
 
30
35
  &.d-recipe-callbox__border-critical {
31
36
  background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
32
- radial-gradient(circle, #E7301D, #F78B23) border-box;
37
+ radial-gradient(circle, var(--dt-color-border-critical-strong), var(--dt-color-border-critical)) border-box;
33
38
  }
34
39
  }
35
40
 
41
+ .d-recipe-callbox__avatar {
42
+ margin-inline-start: var(--dt-space-200);
43
+ }
44
+
36
45
  .d-recipe-callbox__main-content-top {
37
46
  display: flex;
47
+ gap: var(--dt-space-350);
38
48
  align-items: center;
39
- padding: var(--dt-space-350) var(--dt-space-400);
49
+ padding: var(--dt-space-400) var(--dt-space-350) var(--dt-space-350) var(--dt-space-400);
40
50
  }
41
51
 
42
52
  .d-recipe-callbox__main-content-bottom {
43
- border-top: 1px solid var(--dt-color-border-subtle);
44
- }
45
-
46
- .d-recipe-callbox__avatar {
47
- margin-right: var(--dt-space-400);
53
+ border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
48
54
  }
49
55
 
50
56
  .d-recipe-callbox__content {
51
57
  display: flex;
52
58
  flex: 1 0 auto;
53
59
  flex-direction: column;
60
+ gap: var(--dt-space-300);
54
61
  min-width: 0;
62
+ padding-inline-start: var(--dt-space-200);
55
63
  }
56
64
 
57
65
  .d-recipe-callbox__content-title {
@@ -60,14 +68,13 @@
60
68
  padding: 0;
61
69
  overflow: clip;
62
70
  color: var(--dt-color-foreground-primary);
63
- font-weight: var(--dt-font-weight-bold);
64
- line-height: normal;
71
+ font: var(--dt-typography-headline-md);
72
+ line-height: var(--dt-font-line-height-100);
65
73
  white-space: nowrap;
66
74
  text-align: left;
67
75
  text-overflow: ellipsis;
68
76
  background-color: var(--dt-color-surface-primary);
69
77
  border: none;
70
- user-select: text;
71
78
  }
72
79
 
73
80
  .d-recipe-callbox__content-badge {
@@ -80,8 +87,7 @@
80
87
  padding: 0;
81
88
  overflow: hidden;
82
89
  color: var(--dt-color-foreground-tertiary);
83
- font-size: var(--dt-font-size-100);
84
- line-height: normal;
90
+ font: var(--dt-typography-body-sm-compact);
85
91
  }
86
92
 
87
93
  .d-recipe-callbox__right {
@@ -101,6 +107,7 @@
101
107
  }
102
108
 
103
109
  &:hover, &:active {
110
+ color: var(--dt-color-link-primary-hover);
104
111
  text-decoration: underline;
105
112
  }
106
113
  }
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -618,6 +618,9 @@ template {
618
618
  align-items: center;
619
619
  justify-content: normal;
620
620
  }
621
+ .d-stack--gap-50 {
622
+ --stack-gap: var(--dt-space-50);
623
+ }
621
624
  .d-stack--gap-100 {
622
625
  --stack-gap: var(--dt-space-100);
623
626
  }
@@ -627,6 +630,9 @@ template {
627
630
  .d-stack--gap-300 {
628
631
  --stack-gap: var(--dt-space-300);
629
632
  }
633
+ .d-stack--gap-350 {
634
+ --stack-gap: var(--dt-space-350);
635
+ }
630
636
  .d-stack--gap-400 {
631
637
  --stack-gap: var(--dt-space-400);
632
638
  }
@@ -636,9 +642,24 @@ template {
636
642
  .d-stack--gap-500 {
637
643
  --stack-gap: var(--dt-space-500);
638
644
  }
645
+ .d-stack--gap-525 {
646
+ --stack-gap: var(--dt-space-525);
647
+ }
648
+ .d-stack--gap-550 {
649
+ --stack-gap: var(--dt-space-550);
650
+ }
639
651
  .d-stack--gap-600 {
640
652
  --stack-gap: var(--dt-space-600);
641
653
  }
654
+ .d-stack--gap-625 {
655
+ --stack-gap: var(--dt-space-625);
656
+ }
657
+ .d-stack--gap-650 {
658
+ --stack-gap: var(--dt-space-650);
659
+ }
660
+ .d-stack--gap-700 {
661
+ --stack-gap: var(--dt-space-700);
662
+ }
642
663
  @media screen and (max-width: 1264px) {
643
664
  .d-stack--xl-column {
644
665
  --stack-direction: column;
@@ -658,6 +679,9 @@ template {
658
679
  align-items: center;
659
680
  justify-content: normal;
660
681
  }
682
+ .d-stack--xl-gap-50 {
683
+ --stack-gap: var(--dt-space-50);
684
+ }
661
685
  .d-stack--xl-gap-100 {
662
686
  --stack-gap: var(--dt-space-100);
663
687
  }
@@ -667,6 +691,9 @@ template {
667
691
  .d-stack--xl-gap-300 {
668
692
  --stack-gap: var(--dt-space-300);
669
693
  }
694
+ .d-stack--xl-gap-350 {
695
+ --stack-gap: var(--dt-space-350);
696
+ }
670
697
  .d-stack--xl-gap-400 {
671
698
  --stack-gap: var(--dt-space-400);
672
699
  }
@@ -676,9 +703,24 @@ template {
676
703
  .d-stack--xl-gap-500 {
677
704
  --stack-gap: var(--dt-space-500);
678
705
  }
706
+ .d-stack--xl-gap-525 {
707
+ --stack-gap: var(--dt-space-525);
708
+ }
709
+ .d-stack--xl-gap-550 {
710
+ --stack-gap: var(--dt-space-550);
711
+ }
679
712
  .d-stack--xl-gap-600 {
680
713
  --stack-gap: var(--dt-space-600);
681
714
  }
715
+ .d-stack--xl-gap-625 {
716
+ --stack-gap: var(--dt-space-625);
717
+ }
718
+ .d-stack--xl-gap-650 {
719
+ --stack-gap: var(--dt-space-650);
720
+ }
721
+ .d-stack--xl-gap-700 {
722
+ --stack-gap: var(--dt-space-700);
723
+ }
682
724
  }
683
725
  @media screen and (max-width: 980px) {
684
726
  .d-stack--lg-column {
@@ -699,6 +741,9 @@ template {
699
741
  align-items: center;
700
742
  justify-content: normal;
701
743
  }
744
+ .d-stack--lg-gap-50 {
745
+ --stack-gap: var(--dt-space-50);
746
+ }
702
747
  .d-stack--lg-gap-100 {
703
748
  --stack-gap: var(--dt-space-100);
704
749
  }
@@ -708,6 +753,9 @@ template {
708
753
  .d-stack--lg-gap-300 {
709
754
  --stack-gap: var(--dt-space-300);
710
755
  }
756
+ .d-stack--lg-gap-350 {
757
+ --stack-gap: var(--dt-space-350);
758
+ }
711
759
  .d-stack--lg-gap-400 {
712
760
  --stack-gap: var(--dt-space-400);
713
761
  }
@@ -717,9 +765,24 @@ template {
717
765
  .d-stack--lg-gap-500 {
718
766
  --stack-gap: var(--dt-space-500);
719
767
  }
768
+ .d-stack--lg-gap-525 {
769
+ --stack-gap: var(--dt-space-525);
770
+ }
771
+ .d-stack--lg-gap-550 {
772
+ --stack-gap: var(--dt-space-550);
773
+ }
720
774
  .d-stack--lg-gap-600 {
721
775
  --stack-gap: var(--dt-space-600);
722
776
  }
777
+ .d-stack--lg-gap-625 {
778
+ --stack-gap: var(--dt-space-625);
779
+ }
780
+ .d-stack--lg-gap-650 {
781
+ --stack-gap: var(--dt-space-650);
782
+ }
783
+ .d-stack--lg-gap-700 {
784
+ --stack-gap: var(--dt-space-700);
785
+ }
723
786
  }
724
787
  @media screen and (max-width: 640px) {
725
788
  .d-stack--md-column {
@@ -740,6 +803,9 @@ template {
740
803
  align-items: center;
741
804
  justify-content: normal;
742
805
  }
806
+ .d-stack--md-gap-50 {
807
+ --stack-gap: var(--dt-space-50);
808
+ }
743
809
  .d-stack--md-gap-100 {
744
810
  --stack-gap: var(--dt-space-100);
745
811
  }
@@ -749,6 +815,9 @@ template {
749
815
  .d-stack--md-gap-300 {
750
816
  --stack-gap: var(--dt-space-300);
751
817
  }
818
+ .d-stack--md-gap-350 {
819
+ --stack-gap: var(--dt-space-350);
820
+ }
752
821
  .d-stack--md-gap-400 {
753
822
  --stack-gap: var(--dt-space-400);
754
823
  }
@@ -758,9 +827,24 @@ template {
758
827
  .d-stack--md-gap-500 {
759
828
  --stack-gap: var(--dt-space-500);
760
829
  }
830
+ .d-stack--md-gap-525 {
831
+ --stack-gap: var(--dt-space-525);
832
+ }
833
+ .d-stack--md-gap-550 {
834
+ --stack-gap: var(--dt-space-550);
835
+ }
761
836
  .d-stack--md-gap-600 {
762
837
  --stack-gap: var(--dt-space-600);
763
838
  }
839
+ .d-stack--md-gap-625 {
840
+ --stack-gap: var(--dt-space-625);
841
+ }
842
+ .d-stack--md-gap-650 {
843
+ --stack-gap: var(--dt-space-650);
844
+ }
845
+ .d-stack--md-gap-700 {
846
+ --stack-gap: var(--dt-space-700);
847
+ }
764
848
  }
765
849
  @media screen and (max-width: 480px) {
766
850
  .d-stack--sm-column {
@@ -781,6 +865,9 @@ template {
781
865
  align-items: center;
782
866
  justify-content: normal;
783
867
  }
868
+ .d-stack--sm-gap-50 {
869
+ --stack-gap: var(--dt-space-50);
870
+ }
784
871
  .d-stack--sm-gap-100 {
785
872
  --stack-gap: var(--dt-space-100);
786
873
  }
@@ -790,6 +877,9 @@ template {
790
877
  .d-stack--sm-gap-300 {
791
878
  --stack-gap: var(--dt-space-300);
792
879
  }
880
+ .d-stack--sm-gap-350 {
881
+ --stack-gap: var(--dt-space-350);
882
+ }
793
883
  .d-stack--sm-gap-400 {
794
884
  --stack-gap: var(--dt-space-400);
795
885
  }
@@ -799,9 +889,24 @@ template {
799
889
  .d-stack--sm-gap-500 {
800
890
  --stack-gap: var(--dt-space-500);
801
891
  }
892
+ .d-stack--sm-gap-525 {
893
+ --stack-gap: var(--dt-space-525);
894
+ }
895
+ .d-stack--sm-gap-550 {
896
+ --stack-gap: var(--dt-space-550);
897
+ }
802
898
  .d-stack--sm-gap-600 {
803
899
  --stack-gap: var(--dt-space-600);
804
900
  }
901
+ .d-stack--sm-gap-625 {
902
+ --stack-gap: var(--dt-space-625);
903
+ }
904
+ .d-stack--sm-gap-650 {
905
+ --stack-gap: var(--dt-space-650);
906
+ }
907
+ .d-stack--sm-gap-700 {
908
+ --stack-gap: var(--dt-space-700);
909
+ }
805
910
  }
806
911
  .d-item-layout {
807
912
  display: flex;
@@ -8281,19 +8386,23 @@ ul {
8281
8386
  padding: 0;
8282
8387
  color: var(--dt-color-foreground-primary);
8283
8388
  background-color: var(--dt-color-surface-primary);
8284
- border-radius: var(--dt-size-radius-300);
8389
+ border-radius: var(--dt-size-radius-400);
8285
8390
  }
8286
8391
  .d-recipe-callbox__video {
8287
8392
  display: flex;
8288
- margin-bottom: var(--dt-space-300-negative);
8289
8393
  overflow: clip;
8290
- border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
8394
+ border-radius: var(--dt-size-radius-400) var(--dt-size-radius-400) 0 0;
8291
8395
  }
8292
8396
  .d-recipe-callbox__main-content {
8293
8397
  align-items: stretch;
8294
8398
  padding: 0;
8295
8399
  border: var(--dt-size-border-100) solid transparent;
8296
- border-radius: var(--dt-size-radius-300);
8400
+ border-radius: var(--dt-size-radius-400);
8401
+ }
8402
+ .d-recipe-callbox__video + .d-recipe-callbox__main-content {
8403
+ border-start-start-radius: 0;
8404
+ border-start-end-radius: 0;
8405
+ border-block-start-width: 0;
8297
8406
  }
8298
8407
  .d-recipe-callbox__main-content.d-recipe-callbox__border-default {
8299
8408
  border-color: var(--dt-color-border-default);
@@ -8302,24 +8411,29 @@ ul {
8302
8411
  background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;
8303
8412
  }
8304
8413
  .d-recipe-callbox__main-content.d-recipe-callbox__border-critical {
8305
- background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, radial-gradient(circle, #E7301D, #F78B23) border-box;
8414
+ background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, radial-gradient(circle, var(--dt-color-border-critical-strong), var(--dt-color-border-critical)) border-box;
8415
+ }
8416
+ .d-recipe-callbox__avatar {
8417
+ -webkit-margin-start: var(--dt-space-200);
8418
+ margin-inline-start: var(--dt-space-200);
8306
8419
  }
8307
8420
  .d-recipe-callbox__main-content-top {
8308
8421
  display: flex;
8422
+ gap: var(--dt-space-350);
8309
8423
  align-items: center;
8310
- padding: var(--dt-space-350) var(--dt-space-400);
8424
+ padding: var(--dt-space-400) var(--dt-space-350) var(--dt-space-350) var(--dt-space-400);
8311
8425
  }
8312
8426
  .d-recipe-callbox__main-content-bottom {
8313
- border-top: 1px solid var(--dt-color-border-subtle);
8314
- }
8315
- .d-recipe-callbox__avatar {
8316
- margin-right: var(--dt-space-400);
8427
+ border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
8317
8428
  }
8318
8429
  .d-recipe-callbox__content {
8319
8430
  display: flex;
8320
8431
  flex: 1 0 auto;
8321
8432
  flex-direction: column;
8433
+ gap: var(--dt-space-300);
8322
8434
  min-width: 0;
8435
+ -webkit-padding-start: var(--dt-space-200);
8436
+ padding-inline-start: var(--dt-space-200);
8323
8437
  }
8324
8438
  .d-recipe-callbox__content-title {
8325
8439
  width: 0;
@@ -8327,16 +8441,13 @@ ul {
8327
8441
  padding: 0;
8328
8442
  overflow: clip;
8329
8443
  color: var(--dt-color-foreground-primary);
8330
- font-weight: var(--dt-font-weight-bold);
8331
- line-height: normal;
8444
+ font: var(--dt-typography-headline-md);
8445
+ line-height: var(--dt-font-line-height-100);
8332
8446
  white-space: nowrap;
8333
8447
  text-align: left;
8334
8448
  text-overflow: ellipsis;
8335
8449
  background-color: var(--dt-color-surface-primary);
8336
8450
  border: none;
8337
- -webkit-user-select: text;
8338
- -ms-user-select: text;
8339
- user-select: text;
8340
8451
  }
8341
8452
  .d-recipe-callbox__content-badge {
8342
8453
  line-height: normal;
@@ -8347,8 +8458,7 @@ ul {
8347
8458
  padding: 0;
8348
8459
  overflow: hidden;
8349
8460
  color: var(--dt-color-foreground-tertiary);
8350
- font-size: var(--dt-font-size-100);
8351
- line-height: normal;
8461
+ font: var(--dt-typography-body-sm-compact);
8352
8462
  }
8353
8463
  .d-recipe-callbox__right {
8354
8464
  display: flex;
@@ -8367,6 +8477,7 @@ ul {
8367
8477
  }
8368
8478
  .d-recipe-callbox--clickable .d-recipe-callbox__content-title:hover,
8369
8479
  .d-recipe-callbox--clickable .d-recipe-callbox__content-title:active {
8480
+ color: var(--dt-color-link-primary-hover);
8370
8481
  text-decoration: underline;
8371
8482
  }
8372
8483
  .d-recipe-callbox__badge--warning {