@dialpad/dialtone-css 8.31.0 → 8.31.2

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.
@@ -35,233 +35,76 @@
35
35
  }
36
36
 
37
37
  .d-tooltip {
38
- // -- COMPONENT CSS VARS
39
- // -----------------------
40
- --tooltip-color-background: var(--dt-color-black-800);
41
- --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
42
- --tooltip-font-weight: var(--dt-font-weight-medium);
43
- --tooltip-line-height: var(--dt-font-line-height-300);
44
- --tooltip-padding-y: var(--dt-space-400); // 8
45
- --tooltip-padding-x: var(--dt-space-450); // 12
46
- --tooltip-border-radius: var(--dt-size-radius-300); // 4
47
-
48
- z-index: var(--zi-tooltip);
49
- max-width: var(--dt-size-875);
50
- padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
51
- color: var(--tooltip-color-text);
52
- font-weight: var(--tooltip-font-weight);
53
- font-size: var(--dt-font-size-100);
54
- line-height: var(--tooltip-line-height);
55
- letter-spacing: calc(var(--dt-space-100) * 0.25);
56
- text-align: center;
57
- background-color: var(--tooltip-color-background);
58
- border-radius: var(--tooltip-border-radius);
59
-
60
- &::after {
61
- position: absolute;
62
- border: var(--dt-size-350) solid transparent;
63
- content: '';
64
- }
38
+ // -- COMPONENT CSS VARS
39
+ // -----------------------
40
+ --tooltip-color-background: var(--dt-color-surface-contrast);
41
+ --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
42
+ --tooltip-font-weight: var(--dt-font-weight-medium);
43
+ --tooltip-line-height: var(--dt-font-line-height-300);
44
+ --tooltip-padding-y: var(--dt-space-400); // 8
45
+ --tooltip-padding-x: var(--dt-space-450); // 12
46
+ --tooltip-border-radius: var(--dt-size-radius-300); // 4
47
+
48
+ z-index: var(--zi-tooltip);
49
+ max-width: var(--dt-size-875);
50
+ padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
51
+ color: var(--tooltip-color-text);
52
+ font-weight: var(--tooltip-font-weight);
53
+ font-size: var(--dt-font-size-100);
54
+ line-height: var(--tooltip-line-height);
55
+ letter-spacing: calc(var(--dt-space-100) * 0.25);
56
+ text-align: center;
57
+ background-color: var(--tooltip-color-background);
58
+ border-radius: var(--tooltip-border-radius);
65
59
  }
66
60
 
67
61
  // ============================================================================
68
62
  // $ INVERTED STYLE
69
63
  // ----------------------------------------------------------------------------
70
64
  .d-tooltip--inverted {
71
- // -- COMPONENT CSS VARS
72
- // -----------------------
73
- --tooltip-color-background: var(--dt-color-black-200);
74
- --tooltip-color-text: var(--dt-color-foreground-secondary);
65
+ // -- COMPONENT CSS VARS
66
+ // -----------------------
67
+ --tooltip-color-background: var(--dt-color-surface-moderate);
68
+ --tooltip-color-text: var(--dt-color-foreground-secondary);
75
69
  }
76
70
 
77
71
  // ============================================================================
78
72
  // $ HIDE STYLE
79
73
  // ----------------------------------------------------------------------------
80
74
  .d-tooltip--hide {
81
- visibility: hidden;
82
- opacity: 0;
83
- transition:
84
- visibility 0s 200ms,
85
- transform 200ms var(--ttf-in-out) 0s,
86
- opacity 200ms var(--ttf-in-out) 0s;
75
+ visibility: hidden;
76
+ opacity: 0;
77
+ transition:
78
+ visibility 0s 200ms,
79
+ transform 200ms var(--ttf-in-out) 0s,
80
+ opacity 200ms var(--ttf-in-out) 0s;
87
81
  }
88
82
 
89
83
  // ============================================================================
90
84
  // $ SHOW STYLE
91
85
  // ----------------------------------------------------------------------------
92
86
  .d-tooltip--show {
93
- transform: translate(0, 0);
94
- visibility: visible;
95
- opacity: 1;
96
- transition:
97
- visibility 0s 0s,
98
- transform 200ms var(--ttf-in-out) 10ms,
99
- opacity 200ms var(--ttf-in-out) 10ms;
87
+ transform: translate(0, 0);
88
+ visibility: visible;
89
+ opacity: 1;
90
+ transition:
91
+ visibility 0s 0s,
92
+ transform 200ms var(--ttf-in-out) 10ms,
93
+ opacity 200ms var(--ttf-in-out) 10ms;
100
94
  }
101
95
 
102
96
  // ============================================================================
103
97
  // $ HOVER AND FOCUS STYLES
104
98
  // ----------------------------------------------------------------------------
105
99
  .d-tooltip--hover {
106
- .d-tooltip {
107
- &:extend(.d-tooltip--hide);
108
- }
109
-
110
- &:hover,
111
- &:focus-visible {
112
- .d-tooltip {
113
- &:extend(.d-tooltip--show);
114
- }
115
- }
116
- }
117
-
118
- // ============================================================================
119
- // $ TOOLTIP DIRECTIONS
120
- // ============================================================================
121
- // $$ TOP
122
- // ----------------------------------------------------------------------------
123
- .d-tooltip__arrow-tippy--bottom-start,
124
- .d-tooltip__arrow-tippy--bottom,
125
- .d-tooltip__arrow-tippy--bottom-end,
126
- .d-tooltip__arrow--top-left,
127
- .d-tooltip__arrow--top-center,
128
- .d-tooltip__arrow--top-right {
129
- top: calc(100% + var(--dt-space-450)); // 100% + 12
130
- transform: translateY(var(--dt-space-500)); // 16
131
-
132
- &::after {
133
- top: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
134
- border-top-width: 0;
135
- border-bottom-color: var(--tooltip-color-background);
136
- }
137
- }
138
-
139
- // $$ BOTTOM
140
- // ----------------------------------------------------------------------------
141
- .d-tooltip__arrow-tippy--top-start,
142
- .d-tooltip__arrow-tippy--top,
143
- .d-tooltip__arrow-tippy--top-end,
144
- .d-tooltip__arrow--bottom-left,
145
- .d-tooltip__arrow--bottom-center,
146
- .d-tooltip__arrow--bottom-right {
147
- bottom: calc(100% + var(--dt-space-450)); // 100% + 12
148
- transform: translateY(var(--dt-space-500-negative)); // -16
149
-
150
- &::after {
151
- bottom: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
152
- border-top-color: var(--tooltip-color-background);
153
- border-bottom-width: 0;
154
- }
155
- }
156
-
157
- // $$ TOP / BOTTOM LEFT
158
- // ----------------------------------------------------------------------------
159
- .d-tooltip__arrow-tippy--bottom-start,
160
- .d-tooltip__arrow-tippy--top-start,
161
- .d-tooltip__arrow--top-left,
162
- .d-tooltip__arrow--bottom-left {
163
- left: var(--dt-space-200-negative); // -2
164
-
165
- &::after {
166
- left: var(--dt-space-500); // 16
167
- }
168
- }
169
-
170
- // $$ TOP / BOTTOM CENTER
171
- // ----------------------------------------------------------------------------
172
- .d-tooltip__arrow-tippy--bottom,
173
- .d-tooltip__arrow-tippy--top,
174
- .d-tooltip__arrow--top-center,
175
- .d-tooltip__arrow--bottom-center {
176
- &::after {
177
- left: 50%;
178
- margin-left: var(--dt-space-350-negative); // -6
179
- }
180
- }
181
-
182
- // $$ TOP / BOTTOM RIGHT
183
- // ----------------------------------------------------------------------------
184
- .d-tooltip__arrow-tippy--bottom-end,
185
- .d-tooltip__arrow-tippy--top-end,
186
- .d-tooltip__arrow--top-right,
187
- .d-tooltip__arrow--bottom-right {
188
- right: var(--dt-space-200-negative); // -2
189
-
190
- &::after {
191
- right: var(--dt-space-500); // 16
192
- }
193
- }
194
-
195
- // $$ RIGHT
196
- // ----------------------------------------------------------------------------
197
- .d-tooltip__arrow-tippy--left-start,
198
- .d-tooltip__arrow-tippy--left,
199
- .d-tooltip__arrow-tippy--left-end,
200
- .d-tooltip__arrow--right-top,
201
- .d-tooltip__arrow--right-center,
202
- .d-tooltip__arrow--right-bottom {
203
- right: calc(100% + var(--dt-space-450)); // 100% + 12
204
- transform: translateX(var(--dt-space-500-negative)); // -16
205
-
206
- &::after {
207
- right: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
208
- border-right-width: 0;
209
- border-left-color: var(--tooltip-color-background);
210
- }
211
- }
212
-
213
- // $$ LEFT
214
- // ----------------------------------------------------------------------------
215
- .d-tooltip__arrow-tippy--right-start,
216
- .d-tooltip__arrow-tippy--right,
217
- .d-tooltip__arrow-tippy--right-end,
218
- .d-tooltip__arrow--left-top,
219
- .d-tooltip__arrow--left-center,
220
- .d-tooltip__arrow--left-bottom {
221
- left: calc(100% + var(--dt-space-450)); // 100% + 12
222
- transform: translateX(var(--dt-space-500)); // 16
223
-
224
- &::after {
225
- left: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
226
- border-right-color: var(--tooltip-color-background);
227
- border-left-width: 0;
100
+ .d-tooltip {
101
+ &:extend(.d-tooltip--hide);
228
102
  }
229
- }
230
-
231
- // $$ RIGHT / LEFT TOP
232
- // ----------------------------------------------------------------------------
233
- .d-tooltip__arrow-tippy--right-start,
234
- .d-tooltip__arrow-tippy--left-start,
235
- .d-tooltip__arrow--right-top,
236
- .d-tooltip__arrow--left-top {
237
- top: var(--dt-space-100-negative); // -1
238
-
239
- &::after {
240
- top: var(--dt-space-400); // 8
241
- }
242
- }
243
-
244
- // $$ RIGHT / LEFT CENTER
245
- // ----------------------------------------------------------------------------
246
- .d-tooltip__arrow-tippy--right,
247
- .d-tooltip__arrow-tippy--left,
248
- .d-tooltip__arrow--right-center,
249
- .d-tooltip__arrow--left-center {
250
- &::after {
251
- top: 50%;
252
- margin-top: var(--dt-space-350-negative); // -6
253
- }
254
- }
255
103
 
256
- // $$ RIGHT / LEFT BOTTOM
257
- // ----------------------------------------------------------------------------
258
- .d-tooltip__arrow-tippy--right-end,
259
- .d-tooltip__arrow-tippy--left-end,
260
- .d-tooltip__arrow--right-bottom,
261
- .d-tooltip__arrow--left-bottom {
262
- bottom: var(--dt-space-100-negative); // -1
263
-
264
- &::after {
265
- bottom: var(--dt-space-400); // 8
104
+ &:hover,
105
+ &:focus-visible {
106
+ .d-tooltip {
107
+ &:extend(.d-tooltip--show);
108
+ }
266
109
  }
267
110
  }
@@ -39,6 +39,14 @@
39
39
  src: url('../fonts/Archivo-SemiBold.woff2') format('woff2');
40
40
  }
41
41
 
42
+ // Define custom font: "Segoe UI Adjusted" to fix some visual issues with the Segoe UI font
43
+ @font-face {
44
+ font-family: "Segoe UI Adjusted";
45
+ src: local(Segoe UI);
46
+ ascent-override: 95%;
47
+ }
48
+
49
+
42
50
  html,
43
51
  body {
44
52
  margin: 0;
@@ -3817,7 +3817,7 @@ legend .d-label {
3817
3817
  justify-content: center;
3818
3818
  }
3819
3819
  .d-tooltip {
3820
- --tooltip-color-background: var(--dt-color-black-800);
3820
+ --tooltip-color-background: var(--dt-color-surface-contrast);
3821
3821
  --tooltip-color-text: var(--dt-color-foreground-primary-inverted);
3822
3822
  --tooltip-font-weight: var(--dt-font-weight-medium);
3823
3823
  --tooltip-line-height: var(--dt-font-line-height-300);
@@ -3836,13 +3836,8 @@ legend .d-label {
3836
3836
  background-color: var(--tooltip-color-background);
3837
3837
  border-radius: var(--tooltip-border-radius);
3838
3838
  }
3839
- .d-tooltip::after {
3840
- position: absolute;
3841
- border: var(--dt-size-350) solid transparent;
3842
- content: '';
3843
- }
3844
3839
  .d-tooltip--inverted {
3845
- --tooltip-color-background: var(--dt-color-black-200);
3840
+ --tooltip-color-background: var(--dt-color-surface-moderate);
3846
3841
  --tooltip-color-text: var(--dt-color-foreground-secondary);
3847
3842
  }
3848
3843
  .d-tooltip--hide,
@@ -3864,148 +3859,6 @@ legend .d-label {
3864
3859
  transition: visibility 0s 0s, transform 200ms var(--ttf-in-out) 10ms, opacity 200ms var(--ttf-in-out) 10ms;
3865
3860
  transition: visibility 0s 0s, transform 200ms var(--ttf-in-out) 10ms, opacity 200ms var(--ttf-in-out) 10ms, -webkit-transform 200ms var(--ttf-in-out) 10ms;
3866
3861
  }
3867
- .d-tooltip__arrow-tippy--bottom-start,
3868
- .d-tooltip__arrow-tippy--bottom,
3869
- .d-tooltip__arrow-tippy--bottom-end,
3870
- .d-tooltip__arrow--top-left,
3871
- .d-tooltip__arrow--top-center,
3872
- .d-tooltip__arrow--top-right {
3873
- top: calc(100% + var(--dt-space-450));
3874
- -webkit-transform: translateY(var(--dt-space-500));
3875
- transform: translateY(var(--dt-space-500));
3876
- }
3877
- .d-tooltip__arrow-tippy--bottom-start::after,
3878
- .d-tooltip__arrow-tippy--bottom::after,
3879
- .d-tooltip__arrow-tippy--bottom-end::after,
3880
- .d-tooltip__arrow--top-left::after,
3881
- .d-tooltip__arrow--top-center::after,
3882
- .d-tooltip__arrow--top-right::after {
3883
- top: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative));
3884
- border-top-width: 0;
3885
- border-bottom-color: var(--tooltip-color-background);
3886
- }
3887
- .d-tooltip__arrow-tippy--top-start,
3888
- .d-tooltip__arrow-tippy--top,
3889
- .d-tooltip__arrow-tippy--top-end,
3890
- .d-tooltip__arrow--bottom-left,
3891
- .d-tooltip__arrow--bottom-center,
3892
- .d-tooltip__arrow--bottom-right {
3893
- bottom: calc(100% + var(--dt-space-450));
3894
- -webkit-transform: translateY(var(--dt-space-500-negative));
3895
- transform: translateY(var(--dt-space-500-negative));
3896
- }
3897
- .d-tooltip__arrow-tippy--top-start::after,
3898
- .d-tooltip__arrow-tippy--top::after,
3899
- .d-tooltip__arrow-tippy--top-end::after,
3900
- .d-tooltip__arrow--bottom-left::after,
3901
- .d-tooltip__arrow--bottom-center::after,
3902
- .d-tooltip__arrow--bottom-right::after {
3903
- bottom: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative));
3904
- border-top-color: var(--tooltip-color-background);
3905
- border-bottom-width: 0;
3906
- }
3907
- .d-tooltip__arrow-tippy--bottom-start,
3908
- .d-tooltip__arrow-tippy--top-start,
3909
- .d-tooltip__arrow--top-left,
3910
- .d-tooltip__arrow--bottom-left {
3911
- left: var(--dt-space-200-negative);
3912
- }
3913
- .d-tooltip__arrow-tippy--bottom-start::after,
3914
- .d-tooltip__arrow-tippy--top-start::after,
3915
- .d-tooltip__arrow--top-left::after,
3916
- .d-tooltip__arrow--bottom-left::after {
3917
- left: var(--dt-space-500);
3918
- }
3919
- .d-tooltip__arrow-tippy--bottom::after,
3920
- .d-tooltip__arrow-tippy--top::after,
3921
- .d-tooltip__arrow--top-center::after,
3922
- .d-tooltip__arrow--bottom-center::after {
3923
- left: 50%;
3924
- margin-left: var(--dt-space-350-negative);
3925
- }
3926
- .d-tooltip__arrow-tippy--bottom-end,
3927
- .d-tooltip__arrow-tippy--top-end,
3928
- .d-tooltip__arrow--top-right,
3929
- .d-tooltip__arrow--bottom-right {
3930
- right: var(--dt-space-200-negative);
3931
- }
3932
- .d-tooltip__arrow-tippy--bottom-end::after,
3933
- .d-tooltip__arrow-tippy--top-end::after,
3934
- .d-tooltip__arrow--top-right::after,
3935
- .d-tooltip__arrow--bottom-right::after {
3936
- right: var(--dt-space-500);
3937
- }
3938
- .d-tooltip__arrow-tippy--left-start,
3939
- .d-tooltip__arrow-tippy--left,
3940
- .d-tooltip__arrow-tippy--left-end,
3941
- .d-tooltip__arrow--right-top,
3942
- .d-tooltip__arrow--right-center,
3943
- .d-tooltip__arrow--right-bottom {
3944
- right: calc(100% + var(--dt-space-450));
3945
- -webkit-transform: translateX(var(--dt-space-500-negative));
3946
- transform: translateX(var(--dt-space-500-negative));
3947
- }
3948
- .d-tooltip__arrow-tippy--left-start::after,
3949
- .d-tooltip__arrow-tippy--left::after,
3950
- .d-tooltip__arrow-tippy--left-end::after,
3951
- .d-tooltip__arrow--right-top::after,
3952
- .d-tooltip__arrow--right-center::after,
3953
- .d-tooltip__arrow--right-bottom::after {
3954
- right: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative));
3955
- border-right-width: 0;
3956
- border-left-color: var(--tooltip-color-background);
3957
- }
3958
- .d-tooltip__arrow-tippy--right-start,
3959
- .d-tooltip__arrow-tippy--right,
3960
- .d-tooltip__arrow-tippy--right-end,
3961
- .d-tooltip__arrow--left-top,
3962
- .d-tooltip__arrow--left-center,
3963
- .d-tooltip__arrow--left-bottom {
3964
- left: calc(100% + var(--dt-space-450));
3965
- -webkit-transform: translateX(var(--dt-space-500));
3966
- transform: translateX(var(--dt-space-500));
3967
- }
3968
- .d-tooltip__arrow-tippy--right-start::after,
3969
- .d-tooltip__arrow-tippy--right::after,
3970
- .d-tooltip__arrow-tippy--right-end::after,
3971
- .d-tooltip__arrow--left-top::after,
3972
- .d-tooltip__arrow--left-center::after,
3973
- .d-tooltip__arrow--left-bottom::after {
3974
- left: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative));
3975
- border-right-color: var(--tooltip-color-background);
3976
- border-left-width: 0;
3977
- }
3978
- .d-tooltip__arrow-tippy--right-start,
3979
- .d-tooltip__arrow-tippy--left-start,
3980
- .d-tooltip__arrow--right-top,
3981
- .d-tooltip__arrow--left-top {
3982
- top: var(--dt-space-100-negative);
3983
- }
3984
- .d-tooltip__arrow-tippy--right-start::after,
3985
- .d-tooltip__arrow-tippy--left-start::after,
3986
- .d-tooltip__arrow--right-top::after,
3987
- .d-tooltip__arrow--left-top::after {
3988
- top: var(--dt-space-400);
3989
- }
3990
- .d-tooltip__arrow-tippy--right::after,
3991
- .d-tooltip__arrow-tippy--left::after,
3992
- .d-tooltip__arrow--right-center::after,
3993
- .d-tooltip__arrow--left-center::after {
3994
- top: 50%;
3995
- margin-top: var(--dt-space-350-negative);
3996
- }
3997
- .d-tooltip__arrow-tippy--right-end,
3998
- .d-tooltip__arrow-tippy--left-end,
3999
- .d-tooltip__arrow--right-bottom,
4000
- .d-tooltip__arrow--left-bottom {
4001
- bottom: var(--dt-space-100-negative);
4002
- }
4003
- .d-tooltip__arrow-tippy--right-end::after,
4004
- .d-tooltip__arrow-tippy--left-end::after,
4005
- .d-tooltip__arrow--right-bottom::after,
4006
- .d-tooltip__arrow--left-bottom::after {
4007
- bottom: var(--dt-space-400);
4008
- }
4009
3862
  .d-toggle {
4010
3863
  --toggle-transition-timing-function: var(--ttf-out-quint);
4011
3864
  --toggle-transition-speed: var(--td300);
@@ -7398,6 +7251,11 @@ ul {
7398
7251
  font-style: normal;
7399
7252
  src: url('./fonts/Archivo-SemiBold.woff2') format('woff2');
7400
7253
  }
7254
+ @font-face {
7255
+ font-family: "Segoe UI Adjusted";
7256
+ src: local(Segoe UI);
7257
+ ascent-override: 95%;
7258
+ }
7401
7259
  html,
7402
7260
  body {
7403
7261
  margin: 0;
@@ -7480,7 +7338,7 @@ body {
7480
7338
  }
7481
7339
  /**
7482
7340
  * Do not edit directly
7483
- * Generated on Fri, 26 Apr 2024 23:50:44 GMT
7341
+ * Generated on Thu, 16 May 2024 22:44:03 GMT
7484
7342
  */
7485
7343
 
7486
7344
  .dialtone-theme-light {
@@ -8297,7 +8155,7 @@ body {
8297
8155
 
8298
8156
  /**
8299
8157
  * Do not edit directly
8300
- * Generated on Fri, 26 Apr 2024 23:50:45 GMT
8158
+ * Generated on Thu, 16 May 2024 22:44:03 GMT
8301
8159
  */
8302
8160
 
8303
8161
  .dialtone-theme-dark {