@dialpad/dialtone-css 8.31.1 → 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
  }
@@ -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);
@@ -7485,7 +7338,7 @@ body {
7485
7338
  }
7486
7339
  /**
7487
7340
  * Do not edit directly
7488
- * Generated on Thu, 09 May 2024 17:09:14 GMT
7341
+ * Generated on Thu, 16 May 2024 22:44:03 GMT
7489
7342
  */
7490
7343
 
7491
7344
  .dialtone-theme-light {
@@ -8302,7 +8155,7 @@ body {
8302
8155
 
8303
8156
  /**
8304
8157
  * Do not edit directly
8305
- * Generated on Thu, 09 May 2024 17:09:15 GMT
8158
+ * Generated on Thu, 16 May 2024 22:44:03 GMT
8306
8159
  */
8307
8160
 
8308
8161
  .dialtone-theme-dark {