@dialpad/dialtone 7.18.0 → 7.19.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 (10) hide show
  1. package/lib/build/less/components/input.less +1 -1
  2. package/lib/build/less/components/link.less +14 -4
  3. package/lib/build/less/components/popover.less +4 -1
  4. package/lib/build/less/components/presence.less +4 -1
  5. package/lib/build/less/components/table.less +2 -2
  6. package/lib/build/less/components/tabs.less +5 -1
  7. package/lib/build/less/themes/default.less +12 -7
  8. package/lib/dist/css/dialtone.css +42 -19
  9. package/lib/dist/css/dialtone.min.css +1 -1
  10. package/package.json +5 -5
package/lib/build/less/components/input.less CHANGED
@@ -29,7 +29,7 @@
29
29
  .d-input__wrapper {
30
30
  // Component CSS Vars
31
31
  // ------------------------------------------------------------------------
32
- --input-color-border: hsla(var(--black-900-hsl) / 0.09);
32
+ --input-color-border: hsla(var(--black-900-hsl) / 0.1);
33
33
  --input-color-background: hsla(var(--black-900-hsl) / 0.03);
34
34
  --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
35
35
  --input-color-text: var(--fc-secondary);
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/popover.less CHANGED
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  display: grid;
41
- grid-template-rows: 1fr;
41
+ grid-template-rows: min-content 1fr min-content;
42
42
  overflow: auto;
43
43
  background-color: var(--popover-color-background);
44
44
  background-clip: padding-box;
@@ -55,6 +55,7 @@
55
55
  // $$ DIALOG CONTENT
56
56
  // ----------------------------------------------------------------------------
57
57
  &__content {
58
+ grid-row: 2;
58
59
  overflow: auto;
59
60
  }
60
61
 
@@ -76,10 +77,12 @@
76
77
  }
77
78
 
78
79
  &__header {
80
+ grid-row: 1;
79
81
  border-bottom: var(--popover-border-width) solid var(--popover-color-border);
80
82
  }
81
83
 
82
84
  &__footer {
85
+ grid-row: 3;
83
86
  border-top: var(--popover-border-width) solid var(--popover-color-border);
84
87
  }
85
88
  }
package/lib/build/less/components/presence.less CHANGED
@@ -25,7 +25,10 @@
25
25
  border-width: var(--presence-size);
26
26
  border-radius: var(--br-circle);
27
27
 
28
- .dt-leftbar-row--selected &,
28
+ .dt-leftbar-row--selected & {
29
+ --presence-color-border-base: var(--theme-sidebar-selected-row-color-background);
30
+ }
31
+
29
32
  .dt-leftbar-row__primary:hover & {
30
33
  --presence-color-border-base: var(--theme-sidebar-row-color-background-hover);
31
34
  }
package/lib/build/less/components/table.less CHANGED
@@ -17,7 +17,7 @@
17
17
  .d-table {
18
18
  // Component CSS Vars
19
19
  // ------------------------------------------------------------------------
20
- --table-color-border: var(--black-300);
20
+ --table-color-border: hsla(var(--black-900-hsl) / 0.18);
21
21
  --table-th-color-text: var(--fc-secondary);
22
22
  --table-td-color-text: var(--fc-tertiary);
23
23
  --table-font-size: var(--fs-200);
@@ -99,7 +99,7 @@
99
99
  .d-table--inverted {
100
100
  --table-th-color-text: var(--fc-secondary-inverted);
101
101
  --table-td-color-text: var(--black-400);
102
- --table-color-border: var(--black-500);
102
+ --table-color-border: hsla(var(--white-hsl) / 0.18);
103
103
  }
104
104
 
105
105
  // ============================================================================
package/lib/build/less/components/tabs.less CHANGED
@@ -33,7 +33,7 @@
33
33
  left: 0;
34
34
  z-index: var(--zi-base1);
35
35
  height: var(--size-100);
36
- background-color: var(--black-400);
36
+ background-color: hsla(var(--black-900-hsl) / 0.34);
37
37
  content: '';
38
38
  }
39
39
 
@@ -183,6 +183,10 @@
183
183
  background-color: hsla(var(--purple-600-hsl) / 0.5);
184
184
  }
185
185
 
186
+ &:not(.d-tablist--no-border)::after {
187
+ background-color: hsla(var(--white-hsl) / 0.34);
188
+ }
189
+
186
190
  .d-tab {
187
191
  --tab-color-text: var(--fc-secondary-inverted);
188
192
 
package/lib/build/less/themes/default.less CHANGED
@@ -59,13 +59,16 @@
59
59
  theme-sidebar-color: var(--fc-primary);
60
60
  theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
61
61
  theme-sidebar-color-background: var(--bgc-secondary);
62
+
63
+ theme-sidebar-icon-color: var(--fc-secondary);
62
64
  theme-sidebar-status-color: var(--fc-tertiary);
63
65
 
64
- // theme-sidebar-row-color-background: {UNUSED}
65
- theme-sidebar-row-color-background-hover: var(--black-300);
66
- theme-sidebar-active-row-color: var(--fc-primary);
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
68
- theme-sidebar-active-row-color-background: var(--black-200);
66
+ theme-sidebar-row-color-background: transparent;
67
+ theme-sidebar-row-color-background-hover: hsla(var(--black-900-hsl) / 0.1);
68
+ theme-sidebar-row-color-background-active: var(--black-300);
69
+ theme-sidebar-selected-row-color: var(--fc-primary);
70
+ theme-sidebar-selected-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
71
+ theme-sidebar-selected-row-color-background: var(--black-200);
69
72
 
70
73
  theme-presence-color-background-available: var(--green-400);
71
74
  theme-presence-color-background-busy-unavailable: var(--red-300);
@@ -91,10 +94,12 @@
91
94
  .d-theme-topbar-bgc { background-color: var(--theme-topbar-color-background) !important; }
92
95
  .d-theme-sidebar-fc { color: var(--theme-sidebar-color) !important; }
93
96
  .d-theme-sidebar-status-fc { color: var(--theme-sidebar-status-color) !important; }
97
+ .d-theme-sidebar-icon-fc { color: var(--theme-sidebar-icon-color) !important; }
94
98
  .d-theme-sidebar-bgc { background-color: var(--theme-sidebar-color-background) !important; }
95
99
  .d-theme-sidebar-row-bgc:hover { background-color: var(--theme-sidebar-row-color-background-hover) !important; }
96
- .d-theme-sidebar-row-active-fc { color: var(--theme-sidebar-active-row-color) !important; }
97
- .d-theme-sidebar-row-active-bgc { background-color: var(--theme-sidebar-active-row-color-background) !important; }
100
+ .d-theme-sidebar-row-bgc:active { background-color: var(--theme-sidebar-row-color-background-active) !important; }
101
+ .d-theme-sidebar-row-selected-fc { color: var(--theme-sidebar-selected-row-color) !important; }
102
+ .d-theme-sidebar-row-selected-bgc { background-color: var(--theme-sidebar-selected-row-color-background) !important; }
98
103
  .d-theme-presence-available { background-color: var(--theme-presence-color-background-available) !important; }
99
104
  .d-theme-presence-busy-unavailable { background-color: var(--theme-presence-color-background-busy-unavailable) !important; }
100
105
  .d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
package/lib/dist/css/dialtone.css CHANGED
@@ -1610,7 +1610,7 @@ legend .d-label {
1610
1610
  .d-textarea--md,
1611
1611
  .d-input__wrapper--md,
1612
1612
  .d-input__wrapper {
1613
- --input-color-border: hsla(var(--black-900-hsl) / 0.09);
1613
+ --input-color-border: hsla(var(--black-900-hsl) / 0.1);
1614
1614
  --input-color-background: hsla(var(--black-900-hsl) / 0.03);
1615
1615
  --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
1616
1616
  --input-color-text: var(--fc-secondary);
@@ -1933,6 +1933,7 @@ legend .d-label {
1933
1933
  .d-link {
1934
1934
  --link-color-default: var(--purple-400);
1935
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;
1936
1937
  position: relative;
1937
1938
  display: inline-flex;
1938
1939
  gap: var(--space-300);
@@ -1943,7 +1944,7 @@ legend .d-label {
1943
1944
  padding: 0;
1944
1945
  color: var(--link-color-default);
1945
1946
  font: inherit;
1946
- text-decoration: none;
1947
+ text-decoration: var(--link-text-decoration);
1947
1948
  background-color: transparent;
1948
1949
  border: 0;
1949
1950
  transition-timing-function: var(--ttf-out-quint);
@@ -1955,8 +1956,8 @@ legend .d-label {
1955
1956
  fill: currentColor;
1956
1957
  }
1957
1958
  .d-link:hover {
1959
+ --link-text-decoration: underline;
1958
1960
  color: var(--link-color-default-hover);
1959
- text-decoration: underline;
1960
1961
  cursor: pointer;
1961
1962
  }
1962
1963
  .d-link.focus-visible.js-focus-visible, .js-focus-visible .d-link.focus-visible {
@@ -1967,6 +1968,11 @@ legend .d-label {
1967
1968
  outline: none;
1968
1969
  box-shadow: var(--bs-focus-ring);
1969
1970
  }
1971
+ .d-banner .d-link,
1972
+ .d-toast .d-link,
1973
+ .d-notice .d-link {
1974
+ --link-text-decoration: underline;
1975
+ }
1970
1976
  .d-link--warning {
1971
1977
  --link-color-default: var(--fc-warning);
1972
1978
  --link-color-default-hover: var(--fc-warning-hover);
@@ -1990,7 +1996,7 @@ legend .d-label {
1990
1996
  }
1991
1997
  .d-link[disabled]:hover,
1992
1998
  .d-link--disabled:hover {
1993
- text-decoration: none;
1999
+ --link-text-decoration: none;
1994
2000
  cursor: not-allowed;
1995
2001
  }
1996
2002
  .d-link--inverted {
@@ -2002,7 +2008,7 @@ legend .d-label {
2002
2008
  --link-color-default-hover: var(--link-color-default);
2003
2009
  }
2004
2010
  .d-link--inverted-disabled:hover {
2005
- text-decoration: none;
2011
+ --link-text-decoration: none;
2006
2012
  cursor: not-allowed;
2007
2013
  }
2008
2014
  .d-list-group,
@@ -2521,7 +2527,7 @@ legend .d-label {
2521
2527
  --popover-color-border: hsla(var(--black-900-hsl) / 0.1);
2522
2528
  --popover-shadow: var(--bs-card);
2523
2529
  display: grid;
2524
- grid-template-rows: 1fr;
2530
+ grid-template-rows: min-content 1fr min-content;
2525
2531
  overflow: auto;
2526
2532
  background-color: var(--popover-color-background);
2527
2533
  background-clip: padding-box;
@@ -2539,6 +2545,7 @@ legend .d-label {
2539
2545
  z-index: var(--zi-modal-element);
2540
2546
  }
2541
2547
  .d-popover__content {
2548
+ grid-row: 2;
2542
2549
  overflow: auto;
2543
2550
  }
2544
2551
  .d-popover__header,
@@ -2555,9 +2562,11 @@ legend .d-label {
2555
2562
  font-size: var(--fs-200);
2556
2563
  }
2557
2564
  .d-popover__header {
2565
+ grid-row: 1;
2558
2566
  border-bottom: var(--popover-border-width) solid var(--popover-color-border);
2559
2567
  }
2560
2568
  .d-popover__footer {
2569
+ grid-row: 3;
2561
2570
  border-top: var(--popover-border-width) solid var(--popover-color-border);
2562
2571
  }
2563
2572
  .d-checkbox,
@@ -2765,7 +2774,7 @@ legend .d-label {
2765
2774
  .d-select__input {
2766
2775
  --select-color-border: var(--input-color-border);
2767
2776
  --select-notch-padding-right: calc(var(--space-300) * 6);
2768
- --input-color-border: hsla(var(--black-900-hsl) / 0.09);
2777
+ --input-color-border: hsla(var(--black-900-hsl) / 0.1);
2769
2778
  --input-color-background: hsla(var(--black-900-hsl) / 0.03);
2770
2779
  --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
2771
2780
  --input-color-text: var(--fc-secondary);
@@ -2951,7 +2960,7 @@ legend .d-label {
2951
2960
  }
2952
2961
  }
2953
2962
  .d-table {
2954
- --table-color-border: var(--black-300);
2963
+ --table-color-border: hsla(var(--black-900-hsl) / 0.18);
2955
2964
  --table-th-color-text: var(--fc-secondary);
2956
2965
  --table-td-color-text: var(--fc-tertiary);
2957
2966
  --table-font-size: var(--fs-200);
@@ -3006,7 +3015,7 @@ legend .d-label {
3006
3015
  .d-table--inverted {
3007
3016
  --table-th-color-text: var(--fc-secondary-inverted);
3008
3017
  --table-td-color-text: var(--black-400);
3009
- --table-color-border: var(--black-500);
3018
+ --table-color-border: hsla(var(--white-hsl) / 0.18);
3010
3019
  }
3011
3020
  .d-table--striped tr:nth-child(even) {
3012
3021
  background-color: hsla(var(--bgc-bold-hsl) / 0.1);
@@ -3032,7 +3041,7 @@ legend .d-label {
3032
3041
  left: 0;
3033
3042
  z-index: var(--zi-base1);
3034
3043
  height: var(--size-100);
3035
- background-color: var(--black-400);
3044
+ background-color: hsla(var(--black-900-hsl) / 0.34);
3036
3045
  content: '';
3037
3046
  }
3038
3047
  .d-tablist--sm {
@@ -3147,6 +3156,9 @@ legend .d-label {
3147
3156
  .d-tablist--inverted::after {
3148
3157
  background-color: hsla(var(--purple-600-hsl) / 0.5);
3149
3158
  }
3159
+ .d-tablist--inverted:not(.d-tablist--no-border)::after {
3160
+ background-color: hsla(var(--white-hsl) / 0.34);
3161
+ }
3150
3162
  .d-tablist--inverted .d-tab {
3151
3163
  --tab-color-text: var(--fc-secondary-inverted);
3152
3164
  }
@@ -3496,7 +3508,9 @@ legend .d-label {
3496
3508
  border-width: var(--presence-size);
3497
3509
  border-radius: var(--br-circle);
3498
3510
  }
3499
- .dt-leftbar-row--selected .d-presence,
3511
+ .dt-leftbar-row--selected .d-presence {
3512
+ --presence-color-border-base: var(--theme-sidebar-selected-row-color-background);
3513
+ }
3500
3514
  .dt-leftbar-row__primary:hover .d-presence {
3501
3515
  --presence-color-border-base: var(--theme-sidebar-row-color-background-hover);
3502
3516
  }
@@ -20374,17 +20388,23 @@ body {
20374
20388
  .d-theme-sidebar-status-fc {
20375
20389
  color: var(--theme-sidebar-status-color) !important;
20376
20390
  }
20391
+ .d-theme-sidebar-icon-fc {
20392
+ color: var(--theme-sidebar-icon-color) !important;
20393
+ }
20377
20394
  .d-theme-sidebar-bgc {
20378
20395
  background-color: var(--theme-sidebar-color-background) !important;
20379
20396
  }
20380
20397
  .d-theme-sidebar-row-bgc:hover {
20381
20398
  background-color: var(--theme-sidebar-row-color-background-hover) !important;
20382
20399
  }
20383
- .d-theme-sidebar-row-active-fc {
20384
- color: var(--theme-sidebar-active-row-color) !important;
20400
+ .d-theme-sidebar-row-bgc:active {
20401
+ background-color: var(--theme-sidebar-row-color-background-active) !important;
20402
+ }
20403
+ .d-theme-sidebar-row-selected-fc {
20404
+ color: var(--theme-sidebar-selected-row-color) !important;
20385
20405
  }
20386
- .d-theme-sidebar-row-active-bgc {
20387
- background-color: var(--theme-sidebar-active-row-color-background) !important;
20406
+ .d-theme-sidebar-row-selected-bgc {
20407
+ background-color: var(--theme-sidebar-selected-row-color-background) !important;
20388
20408
  }
20389
20409
  .d-theme-presence-available {
20390
20410
  background-color: var(--theme-presence-color-background-available) !important;
@@ -20893,11 +20913,14 @@ body {
20893
20913
  --theme-sidebar-color: var(--fc-primary);
20894
20914
  --theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20895
20915
  --theme-sidebar-color-background: var(--bgc-secondary);
20916
+ --theme-sidebar-icon-color: var(--fc-secondary);
20896
20917
  --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);
20899
- --theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20900
- --theme-sidebar-active-row-color-background: var(--black-200);
20918
+ --theme-sidebar-row-color-background: transparent;
20919
+ --theme-sidebar-row-color-background-hover: hsla(var(--black-900-hsl) / 0.1);
20920
+ --theme-sidebar-row-color-background-active: var(--black-300);
20921
+ --theme-sidebar-selected-row-color: var(--fc-primary);
20922
+ --theme-sidebar-selected-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
20923
+ --theme-sidebar-selected-row-color-background: var(--black-200);
20901
20924
  --theme-presence-color-background-available: var(--green-400);
20902
20925
  --theme-presence-color-background-busy-unavailable: var(--red-300);
20903
20926
  --theme-presence-color-background-busy: var(--gold-300);