@dialpad/dialtone 6.10.0 → 6.11.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 +14 -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/internals.less +23 -0
- package/lib/build/svg/spot/file-upload.svg +56 -0
- package/lib/dist/css/dialtone.css +4680 -21
- 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 +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [6.11.0](https://github.com/dialpad/dialtone/compare/v6.10.0...v6.11.0) (2022-01-04)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* generate missing hover/focus classes ([#522](https://github.com/dialpad/dialtone/issues/522)) ([0cc761b](https://github.com/dialpad/dialtone/commit/0cc761b5b6ee86746dfbd54e48400652b819348c))
|
|
7
|
+
* responsive variations not working ([#526](https://github.com/dialpad/dialtone/issues/526)) ([c29d53d](https://github.com/dialpad/dialtone/commit/c29d53dc1c3c89a839d3c9724380f5b2e27e0cc2))
|
|
8
|
+
* svg sizes showing up as NaN in svg utility class page ([#525](https://github.com/dialpad/dialtone/issues/525)) ([67c2b26](https://github.com/dialpad/dialtone/commit/67c2b26704e0bfe1209f578cfcec222645cfc549))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* add file upload spot illustration ([#527](https://github.com/dialpad/dialtone/issues/527)) ([e1533e8](https://github.com/dialpad/dialtone/commit/e1533e856f570688aa5ffc3dd37ae05c3a842987))
|
|
14
|
+
|
|
1
15
|
# [6.10.0](https://github.com/dialpad/dialtone/compare/v6.9.0...v6.10.0) (2021-12-15)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -117,7 +117,9 @@
|
|
|
117
117
|
.d-bgg-radial { background-image: radial-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
|
|
118
118
|
.d-bgg-conic { background-image: conic-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
|
|
119
119
|
.d-bgg-none { background-image: none !important; }
|
|
120
|
+
#d-internals #generate-hover-focus(d-bgg-none, {.d-bgg-none();});
|
|
120
121
|
.d-bgg-unset { background-image: unset !important; }
|
|
122
|
+
#d-internals #generate-hover-focus(d-bgg-unset, {.d-bgg-unset();});
|
|
121
123
|
|
|
122
124
|
|
|
123
125
|
// ============================================================================
|
|
@@ -38,70 +38,85 @@
|
|
|
38
38
|
#d-internals #color-classes(green-700);
|
|
39
39
|
#d-internals #color-classes(red-700);
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
.d-fc-primary,
|
|
43
|
-
.h\:d-fc-primary:hover,
|
|
44
|
-
.f\:d-fc-primary:focus {
|
|
41
|
+
.d-fc-primary {
|
|
45
42
|
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~' / ' var(--fco)) !important;
|
|
46
43
|
}
|
|
47
|
-
|
|
48
|
-
.f\:d-fc-primary:focus-within {
|
|
49
|
-
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~' / ' var(--fco)) !important;
|
|
50
|
-
}
|
|
44
|
+
#d-internals #generate-hover-focus(d-fc-primary, {.d-fc-primary();});
|
|
51
45
|
|
|
52
46
|
// $$ TEXT COLORS
|
|
53
47
|
// ----------------------------------------------------------------------------
|
|
54
48
|
.d-fc-dark { &:extend(.d-fc-black-900); }
|
|
55
|
-
|
|
56
|
-
.f\:d-fc-dark:focus { &:extend(.f\:d-fc-black-900:focus); }
|
|
57
|
-
.f\:d-fc-dark:focus-within { &:extend(.f\:d-fc-black-900:focus-within); }
|
|
49
|
+
#d-internals #generate-hover-focus(d-fc-dark, {.d-fc-dark();});
|
|
58
50
|
|
|
59
51
|
.d-fc-medium { &:extend(.d-fc-black-800); }
|
|
60
|
-
|
|
61
|
-
.f\:d-fc-medium:focus { &:extend(.f\:d-fc-black-800:focus); }
|
|
62
|
-
.f\:d-fc-medium:focus-within { &:extend(.f\:d-fc-black-800:focus-within); }
|
|
52
|
+
#d-internals #generate-hover-focus(d-fc-medium, {.d-fc-medium();});
|
|
63
53
|
|
|
64
54
|
.d-fc-light { &:extend(.d-fc-black-700); }
|
|
65
|
-
|
|
66
|
-
.f\:d-fc-light:focus { &:extend(.f\:d-fc-black-700:focus); }
|
|
67
|
-
.f\:d-fc-light:focus-within { &:extend(.f\:d-fc-black-700:focus-within); }
|
|
55
|
+
#d-internals #generate-hover-focus(d-fc-light, {.d-fc-light();});
|
|
68
56
|
|
|
69
57
|
.d-fc-lighter { &:extend(.d-fc-black-600); }
|
|
58
|
+
#d-internals #generate-hover-focus(d-fc-lighter, {.d-fc-lighter();});
|
|
59
|
+
|
|
70
60
|
.d-fc-purple { &:extend(.d-fc-purple-500); }
|
|
61
|
+
#d-internals #generate-hover-focus(d-fc-purple, {.d-fc-purple();});
|
|
62
|
+
|
|
71
63
|
.d-fc-orange { &:extend(.d-fc-orange-600); }
|
|
64
|
+
#d-internals #generate-hover-focus(d-fc-orange, {.d-fc-orange();});
|
|
65
|
+
|
|
72
66
|
.d-fc-pink { &:extend(.d-fc-pink-600); }
|
|
67
|
+
#d-internals #generate-hover-focus(d-fc-pink, {.d-fc-pink();});
|
|
73
68
|
|
|
74
69
|
.d-fc-green,
|
|
75
70
|
.d-fc-success { &:extend(.d-fc-green-600); }
|
|
71
|
+
#d-internals #generate-hover-focus(d-fc-green, {.d-fc-green();});
|
|
72
|
+
#d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
|
|
76
73
|
|
|
77
74
|
.d-fc-yellow,
|
|
78
75
|
.d-fc-warning { &:extend(.d-fc-yellow-600); }
|
|
76
|
+
#d-internals #generate-hover-focus(d-fc-yellow, {.d-fc-yellow();});
|
|
77
|
+
#d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
|
|
79
78
|
|
|
80
79
|
.d-fc-red,
|
|
81
80
|
.d-fc-error,
|
|
82
81
|
.d-fc-danger { &:extend(.d-fc-red-600); }
|
|
82
|
+
#d-internals #generate-hover-focus(d-fc-red, {.d-fc-red();});
|
|
83
|
+
#d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
|
|
84
|
+
#d-internals #generate-hover-focus(d-fc-danger, {.d-fc-danger();});
|
|
83
85
|
|
|
84
86
|
.d-fc-current { color: currentColor !important; }
|
|
87
|
+
#d-internals #generate-hover-focus(d-fc-current, {.d-fc-current();});
|
|
85
88
|
.d-fc-transparent { color: transparent !important; }
|
|
89
|
+
#d-internals #generate-hover-focus(d-fc-transparent, {.d-fc-transparent();});
|
|
86
90
|
.d-fc-unset { color: unset !important; }
|
|
91
|
+
#d-internals #generate-hover-focus(d-fc-unset, {.d-fc-unset();});
|
|
87
92
|
|
|
88
93
|
|
|
89
94
|
// $$ BACKGROUND COLORS
|
|
90
95
|
// ----------------------------------------------------------------------------
|
|
91
96
|
.d-bgc-success { &:extend(.d-bgc-green-500); }
|
|
97
|
+
#d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
|
|
92
98
|
.d-bgc-warning { &:extend(.d-bgc-yellow-500); }
|
|
99
|
+
#d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});
|
|
93
100
|
|
|
94
101
|
.d-bgc-error,
|
|
95
102
|
.d-bgc-danger { &:extend(.d-bgc-red-500); }
|
|
103
|
+
#d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
|
|
104
|
+
#d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});
|
|
105
|
+
|
|
96
106
|
.d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
|
|
107
|
+
#d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
|
|
97
108
|
.d-bgc-unset { background-color: unset !important; background-image: unset !important; }
|
|
109
|
+
#d-internals #generate-hover-focus(d-bgc-unset, {.d-bgc-unset();});
|
|
98
110
|
|
|
99
111
|
|
|
100
112
|
// $$ BORDER COLORS
|
|
101
113
|
// ----------------------------------------------------------------------------
|
|
102
114
|
.d-bc-transparent { border-color: transparent !important; }
|
|
115
|
+
#d-internals #generate-hover-focus(d-bc-transparent, {.d-bc-transparent();});
|
|
103
116
|
.d-bc-current { border-color: currentColor !important; }
|
|
117
|
+
#d-internals #generate-hover-focus(d-bc-current , {.d-bc-current();});
|
|
104
118
|
.d-bc-unset { border-color: unset !important; }
|
|
119
|
+
#d-internals #generate-hover-focus(d-bc-unset, {.d-bc-unset();});
|
|
105
120
|
|
|
106
121
|
|
|
107
122
|
// $ OPACITY CLASSES
|
|
@@ -142,12 +142,19 @@
|
|
|
142
142
|
// $ BOX SHADOW
|
|
143
143
|
// ----------------------------------------------------------------------------
|
|
144
144
|
.d-bs-sm { box-shadow: var(--bs-sm) !important; }
|
|
145
|
+
#d-internals #generate-hover-focus(d-bs-sm, {.d-bs-sm();});
|
|
145
146
|
.d-bs-md { box-shadow: var(--bs-md) !important; }
|
|
147
|
+
#d-internals #generate-hover-focus(d-bs-md, {.d-bs-md ();});
|
|
146
148
|
.d-bs-lg { box-shadow: var(--bs-lg) !important; }
|
|
149
|
+
#d-internals #generate-hover-focus(d-bs-lg, {.d-bs-lg();});
|
|
147
150
|
.d-bs-xl { box-shadow: var(--bs-xl) !important; }
|
|
151
|
+
#d-internals #generate-hover-focus(d-bs-xl, {.d-bs-xl();});
|
|
148
152
|
.d-bs-card { box-shadow: var(--bs-card) !important; }
|
|
153
|
+
#d-internals #generate-hover-focus(d-bs-card, {.d-bs-card();});
|
|
149
154
|
.d-bs-none { box-shadow: none !important; }
|
|
155
|
+
#d-internals #generate-hover-focus(d-bs-none, {.d-bs-none();});
|
|
150
156
|
.d-bs-unset { box-shadow: unset !important; }
|
|
157
|
+
#d-internals #generate-hover-focus(d-bs-unset, {.d-bs-unset();});
|
|
151
158
|
|
|
152
159
|
|
|
153
160
|
// ============================================================================
|
|
@@ -120,6 +120,29 @@
|
|
|
120
120
|
#d-internals #color-classes(~'@{color}-100');
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
+
// ========================================================================
|
|
124
|
+
// $ HOVER / FOCUS GENERATOR
|
|
125
|
+
// Pass a class name and mixin with the properties to copy into this function
|
|
126
|
+
// to generate hover / focus copies of it prefixed with h: and f:.
|
|
127
|
+
// Many of the class generators in this file will already do this,
|
|
128
|
+
// so this mixin is meant more for one off exceptions.
|
|
129
|
+
//
|
|
130
|
+
// USAGE:
|
|
131
|
+
// #d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
|
|
132
|
+
//
|
|
133
|
+
// ------------------------------------------------------------------------
|
|
134
|
+
#generate-hover-focus(@className, @mixin) {
|
|
135
|
+
.h\:@{className}:hover {
|
|
136
|
+
@mixin();
|
|
137
|
+
}
|
|
138
|
+
.f\:@{className}:focus {
|
|
139
|
+
@mixin();
|
|
140
|
+
}
|
|
141
|
+
.f\:@{className}:focus-within {
|
|
142
|
+
@mixin();
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
123
146
|
// ========================================================================
|
|
124
147
|
// $ OPACITY CLASS GENERATOR
|
|
125
148
|
// Creates opacity classes for font, background, and border colors.
|
|
@@ -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>
|