@dialpad/dialtone 7.17.1 → 7.18.1

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 (9) 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/link.less +14 -4
  5. package/lib/build/less/components/presence.less +9 -4
  6. package/lib/build/less/themes/default.less +16 -9
  7. package/lib/dist/css/dialtone.css +46 -18
  8. package/lib/dist/css/dialtone.min.css +1 -1
  9. package/package.json +2 -2
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/link.less CHANGED
@@ -16,6 +16,7 @@
16
16
  .d-link {
17
17
  --link-color-default: var(--purple-400);
18
18
  --link-color-default-hover: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
19
+ --link-text-decoration: none;
19
20
 
20
21
  position: relative;
21
22
  display: inline-flex;
@@ -27,7 +28,7 @@
27
28
  padding: 0;
28
29
  color: var(--link-color-default);
29
30
  font: inherit;
30
- text-decoration: none;
31
+ text-decoration: var(--link-text-decoration);
31
32
  background-color: transparent;
32
33
  border: 0;
33
34
  transition-timing-function: var(--ttf-out-quint);
@@ -41,8 +42,9 @@
41
42
  fill: currentColor;
42
43
 
43
44
  &:hover {
45
+ --link-text-decoration: underline;
46
+
44
47
  color: var(--link-color-default-hover);
45
- text-decoration: underline;
46
48
  cursor: pointer;
47
49
  }
48
50
 
@@ -51,6 +53,12 @@
51
53
  box-shadow: var(--bs-focus-ring);
52
54
  }
53
55
 
56
+ .d-banner &,
57
+ .d-toast &,
58
+ .d-notice & {
59
+ --link-text-decoration: underline;
60
+ }
61
+
54
62
  // ============================================================================
55
63
  // $ ALTERNATE STYLES
56
64
  // ============================================================================
@@ -92,7 +100,8 @@
92
100
  --link-color-default-hover: var(--link-color-default);
93
101
 
94
102
  &:hover {
95
- text-decoration: none;
103
+ --link-text-decoration: none;
104
+
96
105
  cursor: not-allowed;
97
106
  }
98
107
  }
@@ -113,7 +122,8 @@
113
122
  --link-color-default-hover: var(--link-color-default);
114
123
 
115
124
  &:hover {
116
- text-decoration: none;
125
+ --link-text-decoration: none;
126
+
117
127
  cursor: not-allowed;
118
128
  }
119
129
  }
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,27 @@
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
+
63
+ theme-sidebar-icon-color: var(--fc-secondary);
64
+ theme-sidebar-status-color: var(--fc-tertiary);
62
65
 
63
66
  // 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));
67
+ theme-sidebar-row-color-background-hover: var(--black-300);
68
+ theme-sidebar-active-row-color: var(--fc-primary);
66
69
  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?
70
+ theme-sidebar-active-row-color-background: var(--black-200);
68
71
 
69
72
  theme-presence-color-background-available: var(--green-400);
70
73
  theme-presence-color-background-busy-unavailable: var(--red-300);
71
74
  theme-presence-color-background-busy: var(--gold-300);
72
75
 
73
76
  theme-mention-color-background: var(--purple-400);
77
+ theme-mention-color-foreground: var(--white);
74
78
  }
75
79
 
76
80
  // ============================================================================
@@ -87,15 +91,18 @@
87
91
  }
88
92
  }
89
93
  .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; }
94
+ .d-theme-sidebar-fc { color: var(--theme-sidebar-color) !important; }
95
+ .d-theme-sidebar-status-fc { color: var(--theme-sidebar-status-color) !important; }
96
+ .d-theme-sidebar-icon-fc { color: var(--theme-sidebar-icon-color) !important; }
91
97
  .d-theme-sidebar-bgc { background-color: var(--theme-sidebar-color-background) !important; }
92
98
  .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; }
99
+ .d-theme-sidebar-row-active-fc { color: var(--theme-sidebar-active-row-color) !important; }
94
100
  .d-theme-sidebar-row-active-bgc { background-color: var(--theme-sidebar-active-row-color-background) !important; }
95
101
  .d-theme-presence-available { background-color: var(--theme-presence-color-background-available) !important; }
96
102
  .d-theme-presence-busy-unavailable { background-color: var(--theme-presence-color-background-busy-unavailable) !important; }
97
103
  .d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
98
104
  .d-theme-mention { background-color: var(--theme-mention-color-background) !important; }
105
+ .d-theme-mention-fc { color: var(--theme-mention-color-foreground) !important; }
99
106
 
100
107
 
101
108
  // ============================================================================
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));
@@ -1927,6 +1933,7 @@ legend .d-label {
1927
1933
  .d-link {
1928
1934
  --link-color-default: var(--purple-400);
1929
1935
  --link-color-default-hover: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1936
+ --link-text-decoration: none;
1930
1937
  position: relative;
1931
1938
  display: inline-flex;
1932
1939
  gap: var(--space-300);
@@ -1937,7 +1944,7 @@ legend .d-label {
1937
1944
  padding: 0;
1938
1945
  color: var(--link-color-default);
1939
1946
  font: inherit;
1940
- text-decoration: none;
1947
+ text-decoration: var(--link-text-decoration);
1941
1948
  background-color: transparent;
1942
1949
  border: 0;
1943
1950
  transition-timing-function: var(--ttf-out-quint);
@@ -1949,8 +1956,8 @@ legend .d-label {
1949
1956
  fill: currentColor;
1950
1957
  }
1951
1958
  .d-link:hover {
1959
+ --link-text-decoration: underline;
1952
1960
  color: var(--link-color-default-hover);
1953
- text-decoration: underline;
1954
1961
  cursor: pointer;
1955
1962
  }
1956
1963
  .d-link.focus-visible.js-focus-visible, .js-focus-visible .d-link.focus-visible {
@@ -1961,6 +1968,11 @@ legend .d-label {
1961
1968
  outline: none;
1962
1969
  box-shadow: var(--bs-focus-ring);
1963
1970
  }
1971
+ .d-banner .d-link,
1972
+ .d-toast .d-link,
1973
+ .d-notice .d-link {
1974
+ --link-text-decoration: underline;
1975
+ }
1964
1976
  .d-link--warning {
1965
1977
  --link-color-default: var(--fc-warning);
1966
1978
  --link-color-default-hover: var(--fc-warning-hover);
@@ -1984,7 +1996,7 @@ legend .d-label {
1984
1996
  }
1985
1997
  .d-link[disabled]:hover,
1986
1998
  .d-link--disabled:hover {
1987
- text-decoration: none;
1999
+ --link-text-decoration: none;
1988
2000
  cursor: not-allowed;
1989
2001
  }
1990
2002
  .d-link--inverted {
@@ -1996,7 +2008,7 @@ legend .d-label {
1996
2008
  --link-color-default-hover: var(--link-color-default);
1997
2009
  }
1998
2010
  .d-link--inverted-disabled:hover {
1999
- text-decoration: none;
2011
+ --link-text-decoration: none;
2000
2012
  cursor: not-allowed;
2001
2013
  }
2002
2014
  .d-list-group,
@@ -3475,12 +3487,12 @@ legend .d-label {
3475
3487
  gap: var(--space-400);
3476
3488
  }
3477
3489
  .d-presence {
3478
- --presence-color-border-base: var(--black-100);
3490
+ --presence-color-border-base: var(--theme-sidebar-color-background);
3479
3491
  --presence-color-border-offline: var(--black-400);
3480
3492
  --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);
3493
+ --presence-color-background-active: var(--theme-presence-color-background-available);
3494
+ --presence-color-background-busy: var(--theme-presence-color-background-busy-unavailable);
3495
+ --presence-color-background-away: var(--theme-presence-color-background-busy);
3484
3496
  --presence-color-background-offline: var(--white);
3485
3497
  --presence-size: var(--size-200);
3486
3498
  display: inline-block;
@@ -3490,6 +3502,10 @@ legend .d-label {
3490
3502
  border-width: var(--presence-size);
3491
3503
  border-radius: var(--br-circle);
3492
3504
  }
3505
+ .dt-leftbar-row--selected .d-presence,
3506
+ .dt-leftbar-row__primary:hover .d-presence {
3507
+ --presence-color-border-base: var(--theme-sidebar-row-color-background-hover);
3508
+ }
3493
3509
  .d-presence__inner {
3494
3510
  box-sizing: border-box;
3495
3511
  width: var(--size-400);
@@ -20359,7 +20375,13 @@ body {
20359
20375
  background-color: var(--theme-topbar-color-background) !important;
20360
20376
  }
20361
20377
  .d-theme-sidebar-fc {
20362
- color: hsla(var(--theme-sidebar-color-hsl) / var(--fco)) !important;
20378
+ color: var(--theme-sidebar-color) !important;
20379
+ }
20380
+ .d-theme-sidebar-status-fc {
20381
+ color: var(--theme-sidebar-status-color) !important;
20382
+ }
20383
+ .d-theme-sidebar-icon-fc {
20384
+ color: var(--theme-sidebar-icon-color) !important;
20363
20385
  }
20364
20386
  .d-theme-sidebar-bgc {
20365
20387
  background-color: var(--theme-sidebar-color-background) !important;
@@ -20368,7 +20390,7 @@ body {
20368
20390
  background-color: var(--theme-sidebar-row-color-background-hover) !important;
20369
20391
  }
20370
20392
  .d-theme-sidebar-row-active-fc {
20371
- color: hsla(var(--theme-sidebar-active-row-color-hsl) / var(--fco)) !important;
20393
+ color: var(--theme-sidebar-active-row-color) !important;
20372
20394
  }
20373
20395
  .d-theme-sidebar-row-active-bgc {
20374
20396
  background-color: var(--theme-sidebar-active-row-color-background) !important;
@@ -20385,6 +20407,9 @@ body {
20385
20407
  .d-theme-mention {
20386
20408
  background-color: var(--theme-mention-color-background) !important;
20387
20409
  }
20410
+ .d-theme-mention-fc {
20411
+ color: var(--theme-mention-color-foreground) !important;
20412
+ }
20388
20413
  body {
20389
20414
  --bgo: 100%;
20390
20415
  --bco: 100%;
@@ -20873,18 +20898,21 @@ body {
20873
20898
  --base--corner-radius: 0.25em;
20874
20899
  --theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
20875
20900
  --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));
20901
+ --theme-topbar-color-background: var(--bgc-secondary);
20902
+ --theme-sidebar-color: var(--fc-primary);
20878
20903
  --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));
20904
+ --theme-sidebar-color-background: var(--bgc-secondary);
20905
+ --theme-sidebar-icon-color: var(--fc-secondary);
20906
+ --theme-sidebar-status-color: var(--fc-tertiary);
20907
+ --theme-sidebar-row-color-background-hover: var(--black-300);
20908
+ --theme-sidebar-active-row-color: var(--fc-primary);
20882
20909
  --theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20883
20910
  --theme-sidebar-active-row-color-background: var(--black-200);
20884
20911
  --theme-presence-color-background-available: var(--green-400);
20885
20912
  --theme-presence-color-background-busy-unavailable: var(--red-300);
20886
20913
  --theme-presence-color-background-busy: var(--gold-300);
20887
20914
  --theme-mention-color-background: var(--purple-400);
20915
+ --theme-mention-color-foreground: var(--white);
20888
20916
  }
20889
20917
  body.theme-dark {
20890
20918
  --white-h: 0;