@dialpad/dialtone 7.17.0 → 7.18.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 (8) hide show
  1. package/lib/build/less/components/avatar.less +7 -1
  2. package/lib/build/less/components/badge.less +2 -2
  3. package/lib/build/less/components/input.less +1 -0
  4. package/lib/build/less/components/presence.less +9 -4
  5. package/lib/build/less/themes/default.less +13 -9
  6. package/lib/dist/css/dialtone.css +32 -14
  7. package/lib/dist/css/dialtone.min.css +1 -1
  8. package/package.json +4 -1
package/lib/build/less/components/avatar.less CHANGED
@@ -36,6 +36,7 @@
36
36
  --avatar-size-text: var(--fs-200);
37
37
  --avatar-presence-position-right: calc(var(--space-200) * -1); // -2
38
38
  --avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
39
+ --avatar-count-color-shadow: var(--theme-sidebar-color-background);
39
40
 
40
41
  position: relative;
41
42
  display: inline-flex;
@@ -102,7 +103,12 @@
102
103
  text-align: center;
103
104
  background-color: var(--black-600);
104
105
  border-radius: var(--br-pill);
105
- box-shadow: 0 0 0 var(--size-200) var(--black-100);
106
+ box-shadow: 0 0 0 var(--size-200) var(--avatar-count-color-shadow);
107
+
108
+ .dt-leftbar-row--selected &,
109
+ .dt-leftbar-row__primary:hover & {
110
+ --avatar-count-color-shadow: var(--theme-sidebar-row-color-background-hover);
111
+ }
106
112
  }
107
113
 
108
114
  // -- SIZES
package/lib/build/less/components/badge.less CHANGED
@@ -82,8 +82,8 @@
82
82
  }
83
83
 
84
84
  &--bulletin {
85
- --badge-color-text: var(--white);
86
- --badge-color-background: var(--purple-400);
85
+ --badge-color-text: var(--theme-mention-color-foreground);
86
+ --badge-color-background: var(--theme-mention-color-background);
87
87
  }
88
88
 
89
89
  &--ai {
package/lib/build/less/components/input.less CHANGED
@@ -178,6 +178,7 @@
178
178
  vertical-align: top;
179
179
  border-bottom-right-radius: var(--size-300);
180
180
  resize: vertical;
181
+ scroll-padding-block: var(--input-padding-y);
181
182
  }
182
183
 
183
184
  // $$ SIZES
package/lib/build/less/components/presence.less CHANGED
@@ -9,12 +9,12 @@
9
9
  // visit https://dialpad.design/components/presence
10
10
 
11
11
  .d-presence {
12
- --presence-color-border-base: var(--black-100);
12
+ --presence-color-border-base: var(--theme-sidebar-color-background);
13
13
  --presence-color-border-offline: var(--black-400);
14
14
  --presence-color-background-base: var(--black-400);
15
- --presence-color-background-active: var(--green-400);
16
- --presence-color-background-busy: var(--red-300);
17
- --presence-color-background-away: var(--gold-300);
15
+ --presence-color-background-active: var(--theme-presence-color-background-available);
16
+ --presence-color-background-busy: var(--theme-presence-color-background-busy-unavailable);
17
+ --presence-color-background-away: var(--theme-presence-color-background-busy);
18
18
  --presence-color-background-offline: var(--white);
19
19
  --presence-size: var(--size-200);
20
20
 
@@ -25,6 +25,11 @@
25
25
  border-width: var(--presence-size);
26
26
  border-radius: var(--br-circle);
27
27
 
28
+ .dt-leftbar-row--selected &,
29
+ .dt-leftbar-row__primary:hover & {
30
+ --presence-color-border-base: var(--theme-sidebar-row-color-background-hover);
31
+ }
32
+
28
33
  &__inner {
29
34
  box-sizing: border-box;
30
35
  width: var(--size-400);
package/lib/build/less/themes/default.less CHANGED
@@ -54,23 +54,25 @@
54
54
 
55
55
  theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
56
56
  theme-topbar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
57
- theme-topbar-color-background: var(--black-100);
57
+ theme-topbar-color-background: var(--bgc-secondary);
58
58
 
59
- theme-sidebar-color: hsl(var(--theme-sidebar-color-hsl));
60
- theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
61
- theme-sidebar-color-background: var(--black-100);
59
+ theme-sidebar-color: var(--fc-primary);
60
+ theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
61
+ theme-sidebar-color-background: var(--bgc-secondary);
62
+ theme-sidebar-status-color: var(--fc-tertiary);
62
63
 
63
64
  // theme-sidebar-row-color-background: {UNUSED}
64
- theme-sidebar-row-color-background-hover: var(--purple-100);
65
- theme-sidebar-active-row-color: hsl(var(--theme-sidebar-active-row-color-hsl));
65
+ theme-sidebar-row-color-background-hover: var(--black-300);
66
+ theme-sidebar-active-row-color: var(--fc-primary);
66
67
  theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
67
- theme-sidebar-active-row-color-background: var(--black-200); // DT7 TBD, possibly black-100?
68
+ theme-sidebar-active-row-color-background: var(--black-200);
68
69
 
69
70
  theme-presence-color-background-available: var(--green-400);
70
71
  theme-presence-color-background-busy-unavailable: var(--red-300);
71
72
  theme-presence-color-background-busy: var(--gold-300);
72
73
 
73
74
  theme-mention-color-background: var(--purple-400);
75
+ theme-mention-color-foreground: var(--white);
74
76
  }
75
77
 
76
78
  // ============================================================================
@@ -87,15 +89,17 @@
87
89
  }
88
90
  }
89
91
  .d-theme-topbar-bgc { background-color: var(--theme-topbar-color-background) !important; }
90
- .d-theme-sidebar-fc { color: hsla(var(--theme-sidebar-color-hsl) / var(--fco)) !important; }
92
+ .d-theme-sidebar-fc { color: var(--theme-sidebar-color) !important; }
93
+ .d-theme-sidebar-status-fc { color: var(--theme-sidebar-status-color) !important; }
91
94
  .d-theme-sidebar-bgc { background-color: var(--theme-sidebar-color-background) !important; }
92
95
  .d-theme-sidebar-row-bgc:hover { background-color: var(--theme-sidebar-row-color-background-hover) !important; }
93
- .d-theme-sidebar-row-active-fc { color: hsla(var(--theme-sidebar-active-row-color-hsl) / var(--fco)) !important; }
96
+ .d-theme-sidebar-row-active-fc { color: var(--theme-sidebar-active-row-color) !important; }
94
97
  .d-theme-sidebar-row-active-bgc { background-color: var(--theme-sidebar-active-row-color-background) !important; }
95
98
  .d-theme-presence-available { background-color: var(--theme-presence-color-background-available) !important; }
96
99
  .d-theme-presence-busy-unavailable { background-color: var(--theme-presence-color-background-busy-unavailable) !important; }
97
100
  .d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
98
101
  .d-theme-mention { background-color: var(--theme-mention-color-background) !important; }
102
+ .d-theme-mention-fc { color: var(--theme-mention-color-foreground) !important; }
99
103
 
100
104
 
101
105
  // ============================================================================
package/lib/dist/css/dialtone.css CHANGED
@@ -480,6 +480,7 @@ body {
480
480
  --avatar-size-text: var(--fs-200);
481
481
  --avatar-presence-position-right: calc(var(--space-200) * -1);
482
482
  --avatar-presence-position-bottom: calc(var(--space-200) * -1);
483
+ --avatar-count-color-shadow: var(--theme-sidebar-color-background);
483
484
  position: relative;
484
485
  display: inline-flex;
485
486
  color: var(--avatar-color-text);
@@ -536,7 +537,11 @@ body {
536
537
  text-align: center;
537
538
  background-color: var(--black-600);
538
539
  border-radius: var(--br-pill);
539
- box-shadow: 0 0 0 var(--size-200) var(--black-100);
540
+ box-shadow: 0 0 0 var(--size-200) var(--avatar-count-color-shadow);
541
+ }
542
+ .dt-leftbar-row--selected .d-avatar__count,
543
+ .dt-leftbar-row__primary:hover .d-avatar__count {
544
+ --avatar-count-color-shadow: var(--theme-sidebar-row-color-background-hover);
540
545
  }
541
546
  .d-avatar--xs {
542
547
  --avatar-size-shape: calc(var(--size-500) + var(--size-200));
@@ -621,8 +626,8 @@ body {
621
626
  --badge-color-background: var(--bgc-critical);
622
627
  }
623
628
  .d-badge--bulletin {
624
- --badge-color-text: var(--white);
625
- --badge-color-background: var(--purple-400);
629
+ --badge-color-text: var(--theme-mention-color-foreground);
630
+ --badge-color-background: var(--theme-mention-color-background);
626
631
  }
627
632
  .d-badge--ai {
628
633
  --badge-color-text: var(--white);
@@ -1831,6 +1836,7 @@ legend .d-label {
1831
1836
  vertical-align: top;
1832
1837
  border-bottom-right-radius: var(--size-300);
1833
1838
  resize: vertical;
1839
+ scroll-padding-block: var(--input-padding-y);
1834
1840
  }
1835
1841
  .d-textarea--xs {
1836
1842
  --input-padding-y: calc(calc(var(--space-400) - var(--space-100)) - var(--input-border-width));
@@ -3475,12 +3481,12 @@ legend .d-label {
3475
3481
  gap: var(--space-400);
3476
3482
  }
3477
3483
  .d-presence {
3478
- --presence-color-border-base: var(--black-100);
3484
+ --presence-color-border-base: var(--theme-sidebar-color-background);
3479
3485
  --presence-color-border-offline: var(--black-400);
3480
3486
  --presence-color-background-base: var(--black-400);
3481
- --presence-color-background-active: var(--green-400);
3482
- --presence-color-background-busy: var(--red-300);
3483
- --presence-color-background-away: var(--gold-300);
3487
+ --presence-color-background-active: var(--theme-presence-color-background-available);
3488
+ --presence-color-background-busy: var(--theme-presence-color-background-busy-unavailable);
3489
+ --presence-color-background-away: var(--theme-presence-color-background-busy);
3484
3490
  --presence-color-background-offline: var(--white);
3485
3491
  --presence-size: var(--size-200);
3486
3492
  display: inline-block;
@@ -3490,6 +3496,10 @@ legend .d-label {
3490
3496
  border-width: var(--presence-size);
3491
3497
  border-radius: var(--br-circle);
3492
3498
  }
3499
+ .dt-leftbar-row--selected .d-presence,
3500
+ .dt-leftbar-row__primary:hover .d-presence {
3501
+ --presence-color-border-base: var(--theme-sidebar-row-color-background-hover);
3502
+ }
3493
3503
  .d-presence__inner {
3494
3504
  box-sizing: border-box;
3495
3505
  width: var(--size-400);
@@ -20359,7 +20369,10 @@ body {
20359
20369
  background-color: var(--theme-topbar-color-background) !important;
20360
20370
  }
20361
20371
  .d-theme-sidebar-fc {
20362
- color: hsla(var(--theme-sidebar-color-hsl) / var(--fco)) !important;
20372
+ color: var(--theme-sidebar-color) !important;
20373
+ }
20374
+ .d-theme-sidebar-status-fc {
20375
+ color: var(--theme-sidebar-status-color) !important;
20363
20376
  }
20364
20377
  .d-theme-sidebar-bgc {
20365
20378
  background-color: var(--theme-sidebar-color-background) !important;
@@ -20368,7 +20381,7 @@ body {
20368
20381
  background-color: var(--theme-sidebar-row-color-background-hover) !important;
20369
20382
  }
20370
20383
  .d-theme-sidebar-row-active-fc {
20371
- color: hsla(var(--theme-sidebar-active-row-color-hsl) / var(--fco)) !important;
20384
+ color: var(--theme-sidebar-active-row-color) !important;
20372
20385
  }
20373
20386
  .d-theme-sidebar-row-active-bgc {
20374
20387
  background-color: var(--theme-sidebar-active-row-color-background) !important;
@@ -20385,6 +20398,9 @@ body {
20385
20398
  .d-theme-mention {
20386
20399
  background-color: var(--theme-mention-color-background) !important;
20387
20400
  }
20401
+ .d-theme-mention-fc {
20402
+ color: var(--theme-mention-color-foreground) !important;
20403
+ }
20388
20404
  body {
20389
20405
  --bgo: 100%;
20390
20406
  --bco: 100%;
@@ -20873,18 +20889,20 @@ body {
20873
20889
  --base--corner-radius: 0.25em;
20874
20890
  --theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
20875
20891
  --theme-topbar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20876
- --theme-topbar-color-background: var(--black-100);
20877
- --theme-sidebar-color: hsl(var(--theme-sidebar-color-hsl));
20892
+ --theme-topbar-color-background: var(--bgc-secondary);
20893
+ --theme-sidebar-color: var(--fc-primary);
20878
20894
  --theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20879
- --theme-sidebar-color-background: var(--black-100);
20880
- --theme-sidebar-row-color-background-hover: var(--purple-100);
20881
- --theme-sidebar-active-row-color: hsl(var(--theme-sidebar-active-row-color-hsl));
20895
+ --theme-sidebar-color-background: var(--bgc-secondary);
20896
+ --theme-sidebar-status-color: var(--fc-tertiary);
20897
+ --theme-sidebar-row-color-background-hover: var(--black-300);
20898
+ --theme-sidebar-active-row-color: var(--fc-primary);
20882
20899
  --theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20883
20900
  --theme-sidebar-active-row-color-background: var(--black-200);
20884
20901
  --theme-presence-color-background-available: var(--green-400);
20885
20902
  --theme-presence-color-background-busy-unavailable: var(--red-300);
20886
20903
  --theme-presence-color-background-busy: var(--gold-300);
20887
20904
  --theme-mention-color-background: var(--purple-400);
20905
+ --theme-mention-color-foreground: var(--white);
20888
20906
  }
20889
20907
  body.theme-dark {
20890
20908
  --white-h: 0;