@dialpad/dialtone 7.20.0 → 7.22.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/lib/build/less/components/badge.less +34 -1
- package/lib/build/less/components/chip.less +5 -5
- package/lib/build/less/components/input.less +1 -0
- package/lib/build/less/components/table.less +1 -1
- package/lib/build/less/utilities/colors.less +49 -0
- package/lib/build/less/variables/colors.less +11 -0
- package/lib/build/svg/brand/dialbot.svg +11 -0
- package/lib/dist/css/dialtone.css +411 -5
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/svg/brand/dialbot.svg +1 -0
- package/lib/dist/vue/icons/IconDialbot.vue +3 -0
- package/package.json +2 -2
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
// COMPONENT CSS VARIABLES
|
|
22
22
|
// --------------------------------------------------------------------------
|
|
23
23
|
--badge-color-text: var(--fc-primary);
|
|
24
|
-
--badge-color-background: var(--
|
|
24
|
+
--badge-color-background: var(--bgc-moderate-opaque);
|
|
25
25
|
--badge-color-background-ai: linear-gradient(to bottom right, var(--purple-400) 0%, var(--magenta-300) 100%);
|
|
26
26
|
--badge-radius: var(--size-300);
|
|
27
27
|
--badge-line-height: calc(var(--size-500) + var(--size-200));
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
--badge-padding-y: var(--space-100);
|
|
33
33
|
--badge-padding-x: var(--space-400);
|
|
34
34
|
--badge-text-case: none;
|
|
35
|
+
--badge-decorative-color: var(--black-900);
|
|
35
36
|
|
|
36
37
|
// BASE STYLE
|
|
37
38
|
// --------------------------------------------------------------------------
|
|
@@ -93,11 +94,43 @@
|
|
|
93
94
|
background-image: var(--badge-color-background-ai);
|
|
94
95
|
}
|
|
95
96
|
|
|
97
|
+
&--decorate-black-400 { --badge-decorative-color: var(--black-400); }
|
|
98
|
+
&--decorate-black-500 { --badge-decorative-color: var(--black-500); }
|
|
99
|
+
&--decorate-black-900 { --badge-decorative-color: var(--black-900); }
|
|
100
|
+
&--decorate-red-200 { --badge-decorative-color: var(--red-200); }
|
|
101
|
+
&--decorate-red-300 { --badge-decorative-color: var(--red-300); }
|
|
102
|
+
&--decorate-red-400 { --badge-decorative-color: var(--red-400); }
|
|
103
|
+
&--decorate-purple-200 { --badge-decorative-color: var(--purple-200); }
|
|
104
|
+
&--decorate-purple-300 { --badge-decorative-color: var(--purple-300); }
|
|
105
|
+
&--decorate-purple-400 { --badge-decorative-color: var(--purple-400); }
|
|
106
|
+
&--decorate-purple-500 { --badge-decorative-color: var(--purple-500); }
|
|
107
|
+
&--decorate-blue-200 { --badge-decorative-color: var(--blue-200); }
|
|
108
|
+
&--decorate-blue-300 { --badge-decorative-color: var(--blue-300); }
|
|
109
|
+
&--decorate-blue-400 { --badge-decorative-color: var(--blue-400); }
|
|
110
|
+
&--decorate-green-300 { --badge-decorative-color: var(--green-300); }
|
|
111
|
+
&--decorate-green-400 { --badge-decorative-color: var(--green-400); }
|
|
112
|
+
&--decorate-green-500 { --badge-decorative-color: var(--green-500); }
|
|
113
|
+
&--decorate-gold-300 { --badge-decorative-color: var(--gold-300); }
|
|
114
|
+
&--decorate-gold-400 { --badge-decorative-color: var(--gold-400); }
|
|
115
|
+
&--decorate-gold-500 { --badge-decorative-color: var(--gold-500); }
|
|
116
|
+
&--decorate-magenta-200 { --badge-decorative-color: var(--magenta-200); }
|
|
117
|
+
&--decorate-magenta-300 { --badge-decorative-color: var(--magenta-300); }
|
|
118
|
+
&--decorate-magenta-400 { --badge-decorative-color: var(--magenta-400); }
|
|
119
|
+
|
|
96
120
|
// SLOTS
|
|
97
121
|
// --------------------------------------------------------------------------
|
|
98
122
|
|
|
123
|
+
&__decorative {
|
|
124
|
+
display: inline-flex;
|
|
125
|
+
width: var(--size-400);
|
|
126
|
+
height: var(--size-400);
|
|
127
|
+
background-color: var(--badge-decorative-color);
|
|
128
|
+
border-radius: var(--size-200);
|
|
129
|
+
}
|
|
130
|
+
|
|
99
131
|
&__label {
|
|
100
132
|
display: flex;
|
|
133
|
+
align-items: center;
|
|
101
134
|
}
|
|
102
135
|
|
|
103
136
|
&__icon-left,
|
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
// $ BASE STYLE
|
|
16
16
|
// ----------------------------------------------------------------------------
|
|
17
17
|
.d-chip {
|
|
18
|
+
// Component CSS Vars
|
|
19
|
+
--chip-color-text: var(--fc-primary);
|
|
20
|
+
--chip-color-background: var(--bgc-moderate-opaque);
|
|
21
|
+
--chip-border-radius: var(--br-pill);
|
|
22
|
+
|
|
18
23
|
position: relative;
|
|
19
24
|
display: inline-flex;
|
|
20
25
|
align-items: center;
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
.d-chip__label {
|
|
24
|
-
// Component CSS Vars
|
|
25
|
-
--chip-color-text: var(--fc-primary);
|
|
26
|
-
--chip-color-background: var(--black-200);
|
|
27
|
-
--chip-border-radius: var(--br-pill);
|
|
28
|
-
|
|
29
29
|
display: inline-flex;
|
|
30
30
|
align-items: center;
|
|
31
31
|
justify-content: center;
|
|
@@ -96,12 +96,21 @@
|
|
|
96
96
|
.d-bgc-secondary { &:extend(.d-bgc-black-100); }
|
|
97
97
|
#d-internals #generate-hover-focus(d-bgc-secondary, {.d-bgc-secondary();});
|
|
98
98
|
|
|
99
|
+
.d-bgc-secondary-opaque { background-color: var(--bgc-secondary-opaque); }
|
|
100
|
+
#d-internals #generate-hover-focus(d-bgc-secondary-opaque, {.d-bgc-secondary-opaque();});
|
|
101
|
+
|
|
99
102
|
.d-bgc-moderate { &:extend(.d-bgc-black-200); }
|
|
100
103
|
#d-internals #generate-hover-focus(d-bgc-moderate, {.d-bgc-moderate();});
|
|
101
104
|
|
|
105
|
+
.d-bgc-moderate-opaque { background-color: var(--bgc-moderate-opaque); }
|
|
106
|
+
#d-internals #generate-hover-focus(d-bgc-moderate-opaque, {.d-bgc-moderate-opaque();});
|
|
107
|
+
|
|
102
108
|
.d-bgc-bold { &:extend(.d-bgc-black-300); }
|
|
103
109
|
#d-internals #generate-hover-focus(d-bgc-bold, {.d-bgc-bold();});
|
|
104
110
|
|
|
111
|
+
.d-bgc-bold-opaque { background-color: var(--bgc-bold-opaque); }
|
|
112
|
+
#d-internals #generate-hover-focus(d-bgc-bold-opaque, {.d-bgc-bold-opaque();});
|
|
113
|
+
|
|
105
114
|
.d-bgc-strong { &:extend(.d-bgc-black-600); }
|
|
106
115
|
#d-internals #generate-hover-focus(d-bgc-strong, {.d-bgc-strong();});
|
|
107
116
|
|
|
@@ -110,26 +119,66 @@
|
|
|
110
119
|
|
|
111
120
|
.d-bgc-success { &:extend(.d-bgc-green-100); }
|
|
112
121
|
#d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
|
|
122
|
+
|
|
123
|
+
.d-bgc-success-opaque { background-color: var(--bgc-success-opaque) !important; }
|
|
124
|
+
#d-internals #generate-hover-focus(d-bgc-success-opaque, {.d-bgc-success-opaque();});
|
|
125
|
+
|
|
113
126
|
.d-bgc-success-subtle { background-color: var(--bgc-success-subtle) !important; }
|
|
127
|
+
#d-internals #generate-hover-focus(d-bgc-success-subtle, {.d-bgc-success-subtle();});
|
|
128
|
+
|
|
129
|
+
.d-bgc-success-subtle-opaque { background-color: var(--bgc-success-subtle-opaque) !important; }
|
|
130
|
+
#d-internals #generate-hover-focus(d-bgc-success-subtle-opaque, {.d-bgc-success-subtle-opaque();});
|
|
131
|
+
|
|
114
132
|
.d-bgc-success-strong { background-color: var(--bgc-success-strong) !important; }
|
|
133
|
+
#d-internals #generate-hover-focus(d-bgc-success-strong, {.d-bgc-success-strong();});
|
|
115
134
|
|
|
116
135
|
.d-bgc-warning { &:extend(.d-bgc-gold-100); }
|
|
117
136
|
#d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});
|
|
137
|
+
|
|
138
|
+
.d-bgc-warning-opaque { background-color: var(--bgc-warning-opaque) !important; }
|
|
139
|
+
#d-internals #generate-hover-focus(d-bgc-warning-opaque, {.d-bgc-warning-opaque();});
|
|
140
|
+
|
|
118
141
|
.d-bgc-warning-subtle { background-color: var(--bgc-warning-subtle) !important; }
|
|
142
|
+
#d-internals #generate-hover-focus(d-bgc-warning-subtle, {.d-bgc-warning-subtle();});
|
|
143
|
+
|
|
144
|
+
.d-bgc-warning-subtle-opaque { background-color: var(--bgc-warning-subtle-opaque) !important; }
|
|
145
|
+
#d-internals #generate-hover-focus(d-bgc-warning-subtle-opaque, {.d-bgc-warning-subtle-opaque();});
|
|
146
|
+
|
|
119
147
|
.d-bgc-warning-strong { background-color: var(--bgc-warning-strong) !important; }
|
|
148
|
+
#d-internals #generate-hover-focus(d-bgc-warning-strong, {.d-bgc-warning-strong();});
|
|
120
149
|
|
|
121
150
|
.d-bgc-info { &:extend(.d-bgc-blue-100); }
|
|
122
151
|
#d-internals #generate-hover-focus(d-bgc-info, {.d-bgc-info();});
|
|
152
|
+
|
|
153
|
+
.d-bgc-info-opaque { background-color: var(--bgc-info-opaque) !important; }
|
|
154
|
+
#d-internals #generate-hover-focus(d-bgc-info-opaque, {.d-bgc-info-opaque();});
|
|
155
|
+
|
|
123
156
|
.d-bgc-info-subtle { background-color: var(--bgc-info-subtle) !important; }
|
|
157
|
+
#d-internals #generate-hover-focus(d-bgc-info-subtle, {.d-bgc-info-subtle();});
|
|
158
|
+
|
|
159
|
+
.d-bgc-info-subtle-opaque { background-color: var(--bgc-info-subtle-opaque) !important; }
|
|
160
|
+
#d-internals #generate-hover-focus(d-bgc-info-subtle-opaque, {.d-bgc-info-subtle-opaque();});
|
|
161
|
+
|
|
124
162
|
.d-bgc-info-strong { background-color: var(--bgc-info-strong) !important; }
|
|
163
|
+
#d-internals #generate-hover-focus(d-bgc-info-strong, {.d-bgc-info-strong();});
|
|
125
164
|
|
|
126
165
|
.d-bgc-critical,
|
|
127
166
|
.d-bgc-error,
|
|
128
167
|
.d-bgc-danger { &:extend(.d-bgc-red-100); }
|
|
129
168
|
#d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
|
|
130
169
|
#d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});
|
|
170
|
+
|
|
171
|
+
.d-bgc-critical-opaque { background-color: var(--bgc-critical-opaque) !important; }
|
|
172
|
+
#d-internals #generate-hover-focus(d-bgc-critical-opaque, {.d-bgc-critical-opaque();});
|
|
173
|
+
|
|
131
174
|
.d-bgc-critical-subtle { background-color: var(--bgc-critical-subtle) !important; }
|
|
175
|
+
#d-internals #generate-hover-focus(d-bgc-critical-subtle, {.d-bgc-critical-subtle();});
|
|
176
|
+
|
|
177
|
+
.d-bgc-critical-subtle-opaque { background-color: var(--bgc-critical-subtle-opaque) !important; }
|
|
178
|
+
#d-internals #generate-hover-focus(d-bgc-critical-subtle-opaque, {.d-bgc-critical-subtle-opaque();});
|
|
179
|
+
|
|
132
180
|
.d-bgc-critical-strong { background-color: var(--bgc-critical-strong) !important; }
|
|
181
|
+
#d-internals #generate-hover-focus(d-bgc-critical-strong, {.d-bgc-critical-strong();});
|
|
133
182
|
|
|
134
183
|
.d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
|
|
135
184
|
#d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
|
|
@@ -90,22 +90,30 @@
|
|
|
90
90
|
@surface-colors: {
|
|
91
91
|
bgc-critical: var(--red-100);
|
|
92
92
|
bgc-critical-hsl: var(--red-100-hsl);
|
|
93
|
+
bgc-critical-opaque: hsla(var(--red-300-hsl) / 0.11);
|
|
93
94
|
bgc-critical-subtle: #fff2f3;
|
|
95
|
+
bgc-critical-subtle-opaque:hsla(var(--red-300-hsl) / 0.05);
|
|
94
96
|
bgc-critical-strong: var(--red-400);
|
|
95
97
|
|
|
96
98
|
bgc-info: var(--blue-100);
|
|
97
99
|
bgc-info-hsl: var(--blue-100-hsl);
|
|
100
|
+
bgc-info-opaque: hsla(var(--blue-400-hsl) / 0.09);
|
|
98
101
|
bgc-info-subtle: #f5f9fd;
|
|
102
|
+
bgc-info-subtle-opaque: hsla(var(--blue-400-hsl) / 0.04);
|
|
99
103
|
bgc-info-strong: var(--blue-400);
|
|
100
104
|
|
|
101
105
|
bgc-warning: var(--gold-100);
|
|
102
106
|
bgc-warning-hsl: var(--gold-100-hsl);
|
|
107
|
+
bgc-warning-opaque: hsla(var(--gold-200-hsl) / 0.38);
|
|
103
108
|
bgc-warning-subtle: #fffae5;
|
|
109
|
+
bgc-warning-subtle-opaque: hsla(var(--gold-200-hsl) / 0.18);
|
|
104
110
|
bgc-warning-strong: var(--gold-500);
|
|
105
111
|
|
|
106
112
|
bgc-success: var(--green-100);
|
|
107
113
|
bgc-success-hsl: var(--green-100-hsl);
|
|
114
|
+
bgc-success-opaque: hsla(var(--green-400-hsl) / 0.08);
|
|
108
115
|
bgc-success-subtle: #f8fdf7;
|
|
116
|
+
bgc-success-subtle-opaque: hsla(var(--green-400-hsl) / 0.03);
|
|
109
117
|
bgc-success-strong: var(--green-400);
|
|
110
118
|
|
|
111
119
|
bgc-primary: var(--white);
|
|
@@ -113,12 +121,15 @@
|
|
|
113
121
|
|
|
114
122
|
bgc-secondary: var(--black-100);
|
|
115
123
|
bgc-secondary-hsl: var(--black-100-hsl);
|
|
124
|
+
bgc-secondary-opaque: hsla(var(--black-900-hsl) / 0.02);
|
|
116
125
|
|
|
117
126
|
bgc-moderate: var(--black-200);
|
|
118
127
|
bgc-moderate-hsl: var(--black-200-hsl);
|
|
128
|
+
bgc-moderate-opaque: hsla(var(--black-900-hsl) / 0.09);
|
|
119
129
|
|
|
120
130
|
bgc-bold: var(--black-300);
|
|
121
131
|
bgc-bold-hsl: var(--black-300-hsl);
|
|
132
|
+
bgc-bold-opaque: hsla(var(--black-900-hsl) / 0.18);
|
|
122
133
|
|
|
123
134
|
bgc-strong: var(--black-600);
|
|
124
135
|
bgc-strong-hsl: var(--black-600-hsl);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<circle cx="179" cy="179" r="179" fill="url(#paint0_linear_4_44)"/>
|
|
3
|
+
<path d="M179 268.5L179 256.567L179 268.5ZM265.517 268.5L265.517 280.433L284.825 280.433L276.19 263.163L265.517 268.5ZM248.787 235.041L239.487 227.563L234.69 233.53L238.114 240.378L248.787 235.041ZM179 101.433C221.839 101.433 256.567 136.161 256.567 179L280.433 179C280.433 122.98 235.02 77.5667 179 77.5667L179 101.433ZM101.433 179C101.433 136.161 136.161 101.433 179 101.433L179 77.5667C122.98 77.5667 77.5667 122.98 77.5667 179L101.433 179ZM179 256.567C136.161 256.567 101.433 221.839 101.433 179L77.5667 179C77.5667 235.02 122.98 280.433 179 280.433L179 256.567ZM265.517 256.567L179 256.567L179 280.433L265.517 280.433L265.517 256.567ZM238.114 240.378L254.843 273.837L276.19 263.163L259.461 229.704L238.114 240.378ZM256.567 179C256.567 197.396 250.177 214.268 239.487 227.563L258.087 242.518C272.062 225.138 280.433 203.03 280.433 179L256.567 179Z" fill="white"/>
|
|
4
|
+
<path d="M226.733 202.867C220.206 208.568 212.791 212.977 204.49 216.093C196.188 219.209 187.709 220.767 179.053 220.767C170.326 220.767 161.812 219.209 153.51 216.093C145.209 212.977 137.794 208.568 131.267 202.867L131.267 190.933C135.666 193.585 140.632 195.872 146.167 197.795C151.63 199.784 157.235 201.342 162.982 202.469C168.73 203.596 174.087 204.159 179.053 204.159C184.091 204.159 189.448 203.596 195.124 202.469C200.871 201.342 206.476 199.784 211.94 197.795C217.474 195.872 222.405 193.585 226.733 190.933L226.733 202.867Z" fill="white"/>
|
|
5
|
+
<defs>
|
|
6
|
+
<linearGradient id="paint0_linear_4_44" x1="0" y1="0" x2="358" y2="358" gradientUnits="userSpaceOnUse">
|
|
7
|
+
<stop stop-color="#7C52FF"/>
|
|
8
|
+
<stop offset="1" stop-color="#F9008E"/>
|
|
9
|
+
</linearGradient>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>
|