@dialpad/dialtone-css 8.50.5 → 8.51.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/tooltip.less +1 -0
  2. package/lib/build/less/recipes/callbox.less +23 -16
  3. package/lib/dist/dialtone-default-theme.css +24 -17
  4. package/lib/dist/dialtone-default-theme.min.css +1 -1
  5. package/lib/dist/dialtone.css +24 -17
  6. package/lib/dist/dialtone.min.css +1 -1
  7. package/package.json +1 -1
package/lib/build/less/components/tooltip.less CHANGED
@@ -74,6 +74,7 @@
74
74
  line-height: var(--tooltip-line-height);
75
75
  letter-spacing: calc(var(--dt-space-100) * 0.25);
76
76
  text-align: center;
77
+ overflow-wrap: break-word;
77
78
  background-color: var(--tooltip-color-background);
78
79
  border-radius: var(--tooltip-border-radius);
79
80
 
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
@@ -4484,6 +4484,7 @@ legend .d-label--md {
4484
4484
  line-height: var(--tooltip-line-height);
4485
4485
  letter-spacing: calc(var(--dt-space-100) * 0.25);
4486
4486
  text-align: center;
4487
+ overflow-wrap: break-word;
4487
4488
  background-color: var(--tooltip-color-background);
4488
4489
  border-radius: var(--tooltip-border-radius);
4489
4490
  }
@@ -8280,19 +8281,23 @@ ul {
8280
8281
  padding: 0;
8281
8282
  color: var(--dt-color-foreground-primary);
8282
8283
  background-color: var(--dt-color-surface-primary);
8283
- border-radius: var(--dt-size-radius-300);
8284
+ border-radius: var(--dt-size-radius-400);
8284
8285
  }
8285
8286
  .d-recipe-callbox__video {
8286
8287
  display: flex;
8287
- margin-bottom: var(--dt-space-300-negative);
8288
8288
  overflow: clip;
8289
- border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
8289
+ border-radius: var(--dt-size-radius-400) var(--dt-size-radius-400) 0 0;
8290
8290
  }
8291
8291
  .d-recipe-callbox__main-content {
8292
8292
  align-items: stretch;
8293
8293
  padding: 0;
8294
8294
  border: var(--dt-size-border-100) solid transparent;
8295
- border-radius: var(--dt-size-radius-300);
8295
+ border-radius: var(--dt-size-radius-400);
8296
+ }
8297
+ .d-recipe-callbox__video + .d-recipe-callbox__main-content {
8298
+ border-start-start-radius: 0;
8299
+ border-start-end-radius: 0;
8300
+ border-block-start-width: 0;
8296
8301
  }
8297
8302
  .d-recipe-callbox__main-content.d-recipe-callbox__border-default {
8298
8303
  border-color: var(--dt-color-border-default);
@@ -8301,24 +8306,29 @@ ul {
8301
8306
  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;
8302
8307
  }
8303
8308
  .d-recipe-callbox__main-content.d-recipe-callbox__border-critical {
8304
- background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, radial-gradient(circle, #E7301D, #F78B23) border-box;
8309
+ 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;
8310
+ }
8311
+ .d-recipe-callbox__avatar {
8312
+ -webkit-margin-start: var(--dt-space-200);
8313
+ margin-inline-start: var(--dt-space-200);
8305
8314
  }
8306
8315
  .d-recipe-callbox__main-content-top {
8307
8316
  display: flex;
8317
+ gap: var(--dt-space-350);
8308
8318
  align-items: center;
8309
- padding: var(--dt-space-350) var(--dt-space-400);
8319
+ padding: var(--dt-space-400) var(--dt-space-350) var(--dt-space-350) var(--dt-space-400);
8310
8320
  }
8311
8321
  .d-recipe-callbox__main-content-bottom {
8312
- border-top: 1px solid var(--dt-color-border-subtle);
8313
- }
8314
- .d-recipe-callbox__avatar {
8315
- margin-right: var(--dt-space-400);
8322
+ border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
8316
8323
  }
8317
8324
  .d-recipe-callbox__content {
8318
8325
  display: flex;
8319
8326
  flex: 1 0 auto;
8320
8327
  flex-direction: column;
8328
+ gap: var(--dt-space-300);
8321
8329
  min-width: 0;
8330
+ -webkit-padding-start: var(--dt-space-200);
8331
+ padding-inline-start: var(--dt-space-200);
8322
8332
  }
8323
8333
  .d-recipe-callbox__content-title {
8324
8334
  width: 0;
@@ -8326,16 +8336,13 @@ ul {
8326
8336
  padding: 0;
8327
8337
  overflow: clip;
8328
8338
  color: var(--dt-color-foreground-primary);
8329
- font-weight: var(--dt-font-weight-bold);
8330
- line-height: normal;
8339
+ font: var(--dt-typography-headline-md);
8340
+ line-height: var(--dt-font-line-height-100);
8331
8341
  white-space: nowrap;
8332
8342
  text-align: left;
8333
8343
  text-overflow: ellipsis;
8334
8344
  background-color: var(--dt-color-surface-primary);
8335
8345
  border: none;
8336
- -webkit-user-select: text;
8337
- -ms-user-select: text;
8338
- user-select: text;
8339
8346
  }
8340
8347
  .d-recipe-callbox__content-badge {
8341
8348
  line-height: normal;
@@ -8346,8 +8353,7 @@ ul {
8346
8353
  padding: 0;
8347
8354
  overflow: hidden;
8348
8355
  color: var(--dt-color-foreground-tertiary);
8349
- font-size: var(--dt-font-size-100);
8350
- line-height: normal;
8356
+ font: var(--dt-typography-body-sm-compact);
8351
8357
  }
8352
8358
  .d-recipe-callbox__right {
8353
8359
  display: flex;
@@ -8366,6 +8372,7 @@ ul {
8366
8372
  }
8367
8373
  .d-recipe-callbox--clickable .d-recipe-callbox__content-title:hover,
8368
8374
  .d-recipe-callbox--clickable .d-recipe-callbox__content-title:active {
8375
+ color: var(--dt-color-link-primary-hover);
8369
8376
  text-decoration: underline;
8370
8377
  }
8371
8378
  .d-recipe-callbox__badge--warning {