@dialpad/dialtone 6.9.0 → 6.13.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.
- package/CHANGELOG.md +47 -0
- package/lib/build/less/components/button.less +11 -14
- package/lib/build/less/components/link.less +6 -6
- package/lib/build/less/components/radio-checkbox.less +25 -25
- package/lib/build/less/components/selects.less +6 -6
- package/lib/build/less/components/skeleton.less +43 -0
- package/lib/build/less/components/tabs.less +1 -1
- package/lib/build/less/components/toggle.less +96 -0
- package/lib/build/less/components/tooltip.less +2 -2
- package/lib/build/less/dialtone-globals.less +10 -0
- package/lib/build/less/dialtone.less +2 -0
- package/lib/build/less/utilities/backgrounds.less +2 -0
- package/lib/build/less/utilities/colors.less +32 -17
- package/lib/build/less/utilities/effects.less +7 -0
- package/lib/build/less/utilities/grid.less +1 -1
- package/lib/build/less/utilities/internals.less +62 -0
- package/lib/build/less/utilities/layout.less +15 -15
- package/lib/build/less/variables/colors.less +3 -3
- package/lib/build/svg/spot/file-upload.svg +56 -0
- package/lib/dist/css/dialtone.css +7799 -106
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/svg/spot/file-upload.svg +1 -0
- package/lib/dist/vue/spot/SpotFileUpload.vue +3 -0
- package/package.json +6 -4
|
@@ -52,6 +52,10 @@
|
|
|
52
52
|
--fco: 100%;
|
|
53
53
|
color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
|
|
54
54
|
}
|
|
55
|
+
.fv\:d-fc-@{color-name}:focus-visible {
|
|
56
|
+
--fco: 100%;
|
|
57
|
+
color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
|
|
58
|
+
}
|
|
55
59
|
#d-internals #dark-mode('.d\:d-fc-@{color-name}', {
|
|
56
60
|
--fco: 100%;
|
|
57
61
|
color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
|
|
@@ -69,6 +73,10 @@
|
|
|
69
73
|
--bco: 100%;
|
|
70
74
|
border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
|
|
71
75
|
}
|
|
76
|
+
.fv\:d-bc-@{color-name}:focus-visible {
|
|
77
|
+
--bco: 100%;
|
|
78
|
+
border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
|
|
79
|
+
}
|
|
72
80
|
#d-internals #dark-mode('.d\:d-bc-@{color-name}', {
|
|
73
81
|
--bco: 100%;
|
|
74
82
|
border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
|
|
@@ -95,6 +103,10 @@
|
|
|
95
103
|
--bgo: 100%;
|
|
96
104
|
background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
|
|
97
105
|
}
|
|
106
|
+
.fv\:d-bgc-@{color-name}:focus-visible {
|
|
107
|
+
--bgo: 100%;
|
|
108
|
+
background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
|
|
109
|
+
}
|
|
98
110
|
#d-internals #dark-mode('.d\:d-bgc-@{color-name}', {
|
|
99
111
|
--bgo: 100%;
|
|
100
112
|
background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
|
|
@@ -120,6 +132,32 @@
|
|
|
120
132
|
#d-internals #color-classes(~'@{color}-100');
|
|
121
133
|
}
|
|
122
134
|
|
|
135
|
+
// ========================================================================
|
|
136
|
+
// $ HOVER / FOCUS GENERATOR
|
|
137
|
+
// Pass a class name and mixin with the properties to copy into this function
|
|
138
|
+
// to generate hover / focus copies of it prefixed with h: and f:.
|
|
139
|
+
// Many of the class generators in this file will already do this,
|
|
140
|
+
// so this mixin is meant more for one off exceptions.
|
|
141
|
+
//
|
|
142
|
+
// USAGE:
|
|
143
|
+
// #d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
|
|
144
|
+
//
|
|
145
|
+
// ------------------------------------------------------------------------
|
|
146
|
+
#generate-hover-focus(@className, @mixin) {
|
|
147
|
+
.h\:@{className}:hover {
|
|
148
|
+
@mixin();
|
|
149
|
+
}
|
|
150
|
+
.f\:@{className}:focus {
|
|
151
|
+
@mixin();
|
|
152
|
+
}
|
|
153
|
+
.f\:@{className}:focus-within {
|
|
154
|
+
@mixin();
|
|
155
|
+
}
|
|
156
|
+
.fv\:@{className}:focus-visible {
|
|
157
|
+
@mixin();
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
123
161
|
// ========================================================================
|
|
124
162
|
// $ OPACITY CLASS GENERATOR
|
|
125
163
|
// Creates opacity classes for font, background, and border colors.
|
|
@@ -138,6 +176,9 @@
|
|
|
138
176
|
.f\:d-fco@{opacity}:focus-within {
|
|
139
177
|
--fco: ~'@{opacity}%' !important;
|
|
140
178
|
}
|
|
179
|
+
.fv\:d-fco@{opacity}:focus-visible {
|
|
180
|
+
--fco: ~'@{opacity}%' !important;
|
|
181
|
+
}
|
|
141
182
|
#d-internals #dark-mode('.d\:d-fco@{opacity}', {
|
|
142
183
|
--fco: ~'@{opacity}%' !important;
|
|
143
184
|
});
|
|
@@ -152,6 +193,9 @@
|
|
|
152
193
|
.f\:d-bco@{opacity}:focus-within {
|
|
153
194
|
--bco: ~'@{opacity}%' !important;
|
|
154
195
|
}
|
|
196
|
+
.fv\:d-bco@{opacity}:focus-visible {
|
|
197
|
+
--bco: ~'@{opacity}%' !important;
|
|
198
|
+
}
|
|
155
199
|
#d-internals #dark-mode('.d\:d-bco@{opacity}', {
|
|
156
200
|
--bco: ~'@{opacity}%' !important;
|
|
157
201
|
});
|
|
@@ -173,6 +217,9 @@
|
|
|
173
217
|
.f\:d-bgo@{opacity}:focus-within {
|
|
174
218
|
--bgo: ~'@{opacity}%' !important;
|
|
175
219
|
}
|
|
220
|
+
.fv\:d-bgo@{opacity}:focus-visible {
|
|
221
|
+
--bgo: ~'@{opacity}%' !important;
|
|
222
|
+
}
|
|
176
223
|
#d-internals #dark-mode('.d\:d-bgo@{opacity}', {
|
|
177
224
|
--bgo: ~'@{opacity}%' !important;
|
|
178
225
|
});
|
|
@@ -186,6 +233,9 @@
|
|
|
186
233
|
.f\:d-bgg-from-@{opacity}:focus-within {
|
|
187
234
|
--bgg-from-opacity: ~'@{opacity}%' !important;
|
|
188
235
|
}
|
|
236
|
+
.fv\:d-bgg-from-@{opacity}:focus-visible {
|
|
237
|
+
--bgg-from-opacity: ~'@{opacity}%' !important;
|
|
238
|
+
}
|
|
189
239
|
#d-internals #dark-mode('.d\:d-bgg-from-@{opacity}', {
|
|
190
240
|
--bgg-from-opacity: ~'@{opacity}%' !important;
|
|
191
241
|
});
|
|
@@ -199,6 +249,9 @@
|
|
|
199
249
|
.f\:d-bgg-to-@{opacity}:focus-within {
|
|
200
250
|
--bgg-to-opacity: ~'@{opacity}%' !important;
|
|
201
251
|
}
|
|
252
|
+
.fv\:d-bgg-to-@{opacity}:focus-visible {
|
|
253
|
+
--bgg-to-opacity: ~'@{opacity}%' !important;
|
|
254
|
+
}
|
|
202
255
|
#d-internals #dark-mode('.d\:d-bgg-to-@{opacity}', {
|
|
203
256
|
--bgg-to-opacity: ~'@{opacity}%' !important;
|
|
204
257
|
});
|
|
@@ -354,6 +407,11 @@
|
|
|
354
407
|
--bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
|
|
355
408
|
--bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " 0%);
|
|
356
409
|
}
|
|
410
|
+
.fv\:d-bgg-from-@{color}:focus-visible {
|
|
411
|
+
--bgg-from-opacity: 100%;
|
|
412
|
+
--bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
|
|
413
|
+
--bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " 0%);
|
|
414
|
+
}
|
|
357
415
|
#d-internals #dark-mode('.d\:d-bgg-from-@{color}', {
|
|
358
416
|
--bgg-from-opacity: 100%;
|
|
359
417
|
--bgg-from: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-from-opacity));
|
|
@@ -371,6 +429,10 @@
|
|
|
371
429
|
--bgg-to-opacity: 100%;
|
|
372
430
|
--bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
|
|
373
431
|
}
|
|
432
|
+
.fv\:d-bgg-to-@{color}:focus-visible {
|
|
433
|
+
--bgg-to-opacity: 100%;
|
|
434
|
+
--bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
|
|
435
|
+
}
|
|
374
436
|
#d-internals #dark-mode('.d\:d-bgg-to-@{color}', {
|
|
375
437
|
--bgg-to-opacity: 100%;
|
|
376
438
|
--bgg-to: hsla(var(~"--@{color}-h") var(~"--@{color}-s") var(~"--@{color}-l") ~" / " var(--bgg-to-opacity)) !important;
|
|
@@ -120,15 +120,15 @@
|
|
|
120
120
|
// ============================================================================
|
|
121
121
|
// $ DISPLAY
|
|
122
122
|
// ----------------------------------------------------------------------------
|
|
123
|
-
.d-d-block { display: block !important; }
|
|
124
|
-
.d-d-flex { display: flex !important; }
|
|
125
|
-
.d-d-grid { display: grid !important; }
|
|
126
|
-
.d-d-inline { display: inline !important; }
|
|
127
|
-
.d-d-inline-block { display: inline-block !important; }
|
|
128
|
-
.d-d-inline-flex { display: inline-flex !important; }
|
|
129
|
-
.d-d-inline-grid { display: inline-grid !important; }
|
|
130
|
-
.d-d-none { display: none !important; }
|
|
131
|
-
.d-d-unset { display: unset !important; }
|
|
123
|
+
.d-d-block { display: block !important; }
|
|
124
|
+
.d-d-flex { display: flex !important; }
|
|
125
|
+
.d-d-grid { display: grid !important; }
|
|
126
|
+
.d-d-inline { display: inline !important; }
|
|
127
|
+
.d-d-inline-block { display: inline-block !important; }
|
|
128
|
+
.d-d-inline-flex { display: inline-flex !important; }
|
|
129
|
+
.d-d-inline-grid { display: inline-grid !important; }
|
|
130
|
+
.d-d-none { display: none !important; }
|
|
131
|
+
.d-d-unset { display: unset !important; }
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
// ============================================================================
|
|
@@ -152,12 +152,12 @@
|
|
|
152
152
|
// ============================================================================
|
|
153
153
|
// $ POSITION
|
|
154
154
|
// ----------------------------------------------------------------------------
|
|
155
|
-
.d-ps-static { position: static !important; }
|
|
156
|
-
.d-ps-relative { position: relative !important; }
|
|
157
|
-
.d-ps-absolute { position: absolute !important; }
|
|
158
|
-
.d-ps-fixed { position: fixed !important; }
|
|
159
|
-
.d-ps-sticky { position: sticky !important; }
|
|
160
|
-
.d-ps-unset { position: unset !important; }
|
|
155
|
+
.d-ps-static { position: static !important; }
|
|
156
|
+
.d-ps-relative { position: relative !important; }
|
|
157
|
+
.d-ps-absolute { position: absolute !important; }
|
|
158
|
+
.d-ps-fixed { position: fixed !important; }
|
|
159
|
+
.d-ps-sticky { position: sticky !important; }
|
|
160
|
+
.d-ps-unset { position: unset !important; }
|
|
161
161
|
|
|
162
162
|
|
|
163
163
|
// ============================================================================
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
success-color-hsl: var(--green-500-hsl);
|
|
93
93
|
success-color-hover: var(--green-600);
|
|
94
94
|
|
|
95
|
-
muted-color: var(--black-
|
|
96
|
-
muted-color-hsl: var(--black-
|
|
95
|
+
muted-color: var(--black-800);
|
|
96
|
+
muted-color-hsl: var(--black-800-hsl);
|
|
97
97
|
muted-color-hover: var(--black-800);
|
|
98
98
|
|
|
99
99
|
inverted-color: var(--black-025);
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
focus-ring-success: hsla(var(--success-color-hsl) ~' / ' 75%);
|
|
111
111
|
focus-ring-warning: hsla(var(--warning-color-hsl) ~' / ' 75%);
|
|
112
112
|
focus-ring-error: hsla(var(--error-color-hsl) ~' / ' 75%);
|
|
113
|
-
focus-ring-muted: hsla(var(--muted-color-hsl) ~' / '
|
|
113
|
+
focus-ring-muted: hsla(var(--muted-color-hsl) ~' / ' 25%);
|
|
114
114
|
focus-ring-inverted: hsla(var(--inverted-color-hsl) ~' / ' 50%);
|
|
115
115
|
}
|
|
116
116
|
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.9695 7L33 7V71.3445H86.2232V24.2538L68.9695 7Z" fill="#EAE9EF"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 33H79.2222V31.4012H42V33Z" fill="#6C3DFF"/>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9999 39.3827H79.2222V37.7839H41.9999V39.3827Z" fill="#6C3DFF"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9999 45.011H79.2222V43.3223H41.9999V45.011Z" fill="#6C3DFF"/>
|
|
6
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.334 63.1294H79.2222V61.5306H46.334V63.1294Z" fill="#6C3DFF"/>
|
|
7
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9999 51.1566L79.2222 51.1566V49.5578L41.9999 49.5578V51.1566Z" fill="#6C3DFF"/>
|
|
8
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5507 57.077H79.2222V55.4782H43.5507V57.077Z" fill="#6C3DFF"/>
|
|
9
|
+
<g opacity="0.2">
|
|
10
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 33H79.2222V31.4012H42V33Z" fill="white"/>
|
|
11
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9999 39.3827H79.2222V37.7839H41.9999V39.3827Z" fill="white"/>
|
|
12
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9999 45.011H79.2222V43.3223H41.9999V45.011Z" fill="white"/>
|
|
13
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.334 63.1294H79.2222V61.5306H46.334V63.1294Z" fill="white"/>
|
|
14
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9999 51.1566L79.2222 51.1566V49.5578L41.9999 49.5578V51.1566Z" fill="white"/>
|
|
15
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5507 57.077H79.2222V55.4782H43.5507V57.077Z" fill="white"/>
|
|
16
|
+
</g>
|
|
17
|
+
<g filter="url(#filter0_d_203_10)">
|
|
18
|
+
<path d="M68.97 24.25H86.22L68.97 7L68.97 24.25Z" fill="white"/>
|
|
19
|
+
</g>
|
|
20
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.9695 18.1213H19V82.4658H72.2232V35.375L54.9695 18.1213Z" fill="#F7F7F9"/>
|
|
21
|
+
<g clip-path="url(#clip0_203_10)">
|
|
22
|
+
<rect x="31.4585" y="44.9688" width="28.3062" height="19.7763" fill="#6C3DFF"/>
|
|
23
|
+
<rect opacity="0.7" x="31.4585" y="44.9688" width="28.3062" height="19.7763" fill="white"/>
|
|
24
|
+
<path d="M40.0327 55.635L32.1991 64.745C39.5815 64.7398 59.7602 64.75 59.7602 64.75V57.3915L53.1808 51.8323L46.1054 59.6772L40.0327 55.635Z" fill="#6C3DFF"/>
|
|
25
|
+
<path opacity="0.3" d="M40.0327 55.635L32.1991 64.745C39.5815 64.7398 59.7602 64.75 59.7602 64.75V57.3915L53.1808 51.8323L46.1054 59.6772L40.0327 55.635Z" fill="white"/>
|
|
26
|
+
<path d="M37.3324 53.5362C37.7672 53.4194 38.1575 53.1762 38.4541 52.8376C38.7507 52.4989 38.9402 52.0799 38.9986 51.6335C39.0571 51.1872 38.9819 50.7335 38.7825 50.3299C38.5831 49.9263 38.2685 49.5909 37.8785 49.3661C37.4884 49.1412 37.0405 49.0371 36.5913 49.0669C36.1421 49.0967 35.7119 49.2589 35.3549 49.5332C34.9979 49.8075 34.7304 50.1815 34.5859 50.6079C34.4415 51.0343 34.4268 51.4939 34.5436 51.9287C34.6212 52.2173 34.7549 52.4879 34.937 52.7249C35.1191 52.9619 35.3461 53.1607 35.6051 53.31C35.8641 53.4593 36.1499 53.5561 36.4463 53.5949C36.7427 53.6337 37.0438 53.6137 37.3324 53.5362Z" fill="#F7F7F9"/>
|
|
27
|
+
</g>
|
|
28
|
+
<g filter="url(#filter1_d_203_10)">
|
|
29
|
+
<path d="M54.97 35.38H72.22L54.97 18.12L54.97 35.38Z" fill="white"/>
|
|
30
|
+
</g>
|
|
31
|
+
<path d="M29 80C29 85.5228 24.5228 90 19 90C13.4772 90 9 85.5228 9 80C9 74.4772 13.4772 70 19 70C24.5228 70 29 74.4772 29 80Z" fill="#6C3DFF"/>
|
|
32
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7244 74.6066C19.0068 74.3242 19.4647 74.3242 19.7471 74.6066L24.3489 79.2084C24.6313 79.4908 24.6313 79.9486 24.3489 80.231C24.0665 80.5134 23.6086 80.5134 23.3262 80.231L19.9588 76.8636L19.9588 84.8419L18.5126 84.8419L18.5126 76.8636L15.1452 80.231C14.8628 80.5134 14.405 80.5134 14.1226 80.231C13.8402 79.9486 13.8402 79.4908 14.1226 79.2084L18.7244 74.6066Z" fill="white"/>
|
|
33
|
+
<defs>
|
|
34
|
+
<filter id="filter0_d_203_10" x="61.2427" y="2.85999" width="32.7045" height="32.7045" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
35
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
36
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
37
|
+
<feOffset dy="3.58726"/>
|
|
38
|
+
<feGaussianBlur stdDeviation="3.86364"/>
|
|
39
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
|
|
40
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_203_10"/>
|
|
41
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_203_10" result="shape"/>
|
|
42
|
+
</filter>
|
|
43
|
+
<filter id="filter1_d_203_10" x="47.1973" y="13.9556" width="32.7954" height="32.8054" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
44
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
45
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
46
|
+
<feOffset dy="3.60836"/>
|
|
47
|
+
<feGaussianBlur stdDeviation="3.88636"/>
|
|
48
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
|
|
49
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_203_10"/>
|
|
50
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_203_10" result="shape"/>
|
|
51
|
+
</filter>
|
|
52
|
+
<clipPath id="clip0_203_10">
|
|
53
|
+
<rect width="28.3062" height="19.7812" fill="white" transform="translate(31.4585 44.9688)"/>
|
|
54
|
+
</clipPath>
|
|
55
|
+
</defs>
|
|
56
|
+
</svg>
|