@dialpad/dialtone 7.23.0 → 7.24.1
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.
|
@@ -51,24 +51,42 @@
|
|
|
51
51
|
.d-fc-tertiary-inverted { &:extend(.d-fc-black-300); }
|
|
52
52
|
#d-internals #generate-hover-focus(fc-tertiary-inverted, {.d-fc-tertiary-inverted();});
|
|
53
53
|
|
|
54
|
-
.d-fc-muted { --fco: 50%; &:extend(.d-fc-black-
|
|
54
|
+
.d-fc-muted { --fco: 50%; &:extend(.d-fc-black-800); }
|
|
55
55
|
#d-internals #generate-hover-focus(d-fc-muted, {.d-fc-muted();});
|
|
56
56
|
|
|
57
|
+
.d-fc-muted-inverted { --fco: 60%; &:extend(.d-fc-black-200); }
|
|
58
|
+
#d-internals #generate-hover-focus(d-fc-muted-inverted, {.d-fc-muted-inverted();});
|
|
59
|
+
|
|
57
60
|
.d-fc-placeholder { &:extend(.d-fc-black-500); }
|
|
58
61
|
#d-internals #generate-hover-focus(d-fc-placeholder, {.d-fc-placeholder();});
|
|
59
62
|
|
|
63
|
+
.d-fc-placeholder-inverted { &:extend(.d-fc-black-500); }
|
|
64
|
+
#d-internals #generate-hover-focus(d-fc-placeholder-inverted, {.d-fc-placeholder-inverted();});
|
|
65
|
+
|
|
60
66
|
.d-fc-disabled { &:extend(.d-fc-black-500); }
|
|
61
67
|
#d-internals #generate-hover-focus(d-fc-disabled, {.d-fc-disabled();});
|
|
62
68
|
|
|
69
|
+
.d-fc-disabled-inverted { &:extend(.d-fc-black-500); }
|
|
70
|
+
#d-internals #generate-hover-focus(d-fc-disabled-inverted, {.d-fc-disabled-inverted();});
|
|
71
|
+
|
|
63
72
|
.d-fc-success { &:extend(.d-fc-green-400); }
|
|
64
73
|
#d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
|
|
65
74
|
|
|
75
|
+
.d-fc-success-inverted { &:extend(.d-fc-green-200); }
|
|
76
|
+
#d-internals #generate-hover-focus(d-fc-success-inverted, {.d-fc-success-inverted();});
|
|
77
|
+
|
|
78
|
+
.d-fc-success-strong-inverted { color: var(--fc-success-strong-inverted) }
|
|
79
|
+
#d-internals #generate-hover-focus(d-fc-success-inverted, {.d-fc-success-inverted();});
|
|
80
|
+
|
|
66
81
|
.d-fc-success-strong { &:extend(.d-fc-green-500); }
|
|
67
82
|
#d-internals #generate-hover-focus(d-fc-success-strong, {.d-fc-success-strong();});
|
|
68
83
|
|
|
69
84
|
.d-fc-warning { &:extend(.d-fc-gold-500); }
|
|
70
85
|
#d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
|
|
71
86
|
|
|
87
|
+
.d-fc-warning-inverted { &:extend(.d-fc-gold-100); }
|
|
88
|
+
#d-internals #generate-hover-focus(d-fc-warning-inverted, {.d-fc-warning-inverted();});
|
|
89
|
+
|
|
72
90
|
.d-fc-error { &:extend(.d-fc-red-300); }
|
|
73
91
|
#d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
|
|
74
92
|
|
|
@@ -78,9 +96,15 @@
|
|
|
78
96
|
.d-fc-critical { &:extend(.d-fc-red-300); }
|
|
79
97
|
#d-internals #generate-hover-focus(d-fc-critical, {.d-fc-critical();});
|
|
80
98
|
|
|
99
|
+
.d-fc-critical-inverted { &:extend(.d-fc-red-200); }
|
|
100
|
+
#d-internals #generate-hover-focus(d-fc-critical-inverted, {.d-fc-critical-inverted();});
|
|
101
|
+
|
|
81
102
|
.d-fc-critical-strong { &:extend(.d-fc-red-400); }
|
|
82
103
|
#d-internals #generate-hover-focus(d-fc-critical-strong, {.d-fc-critical-strong();});
|
|
83
104
|
|
|
105
|
+
.d-fc-critical-strong-inverted { color: var(--fc-critical-strong-inverted) }
|
|
106
|
+
#d-internals #generate-hover-focus(d-fc-critical-strong-inverted, {.d-fc-critical-strong-inverted();});
|
|
107
|
+
|
|
84
108
|
.d-fc-current { color: currentColor !important; }
|
|
85
109
|
#d-internals #generate-hover-focus(d-fc-current, {.d-fc-current();});
|
|
86
110
|
|
|
@@ -230,39 +254,78 @@
|
|
|
230
254
|
.d-bc-critical { border-color: var(--bc-critical) !important; }
|
|
231
255
|
#d-internals #generate-hover-focus(d-bc-critical, {.d-bc-critical();});
|
|
232
256
|
|
|
257
|
+
.d-bc-critical-inverted { border-color: var(--bc-critical-inverted) !important; }
|
|
258
|
+
#d-internals #generate-hover-focus(d-bc-critical-inverted, {.d-bc-critical-inverted();});
|
|
259
|
+
|
|
233
260
|
.d-bc-critical-subtle { border-color: var(--bc-critical-subtle) !important; }
|
|
234
261
|
#d-internals #generate-hover-focus(d-bc-critical-subtle, {.d-bc-critical-subtle();});
|
|
235
262
|
|
|
263
|
+
.d-bc-critical-subtle-inverted { border-color: var(--bc-critical-subtle-inverted) !important; }
|
|
264
|
+
#d-internals #generate-hover-focus(d-bc-critical-subtle-inverted, {.d-bc-critical-subtle-inverted();});
|
|
265
|
+
|
|
236
266
|
.d-bc-critical-strong { border-color: var(--bc-critical-strong) !important; }
|
|
237
267
|
#d-internals #generate-hover-focus(d-bc-critical-strong, {.d-bc-critical-strong();});
|
|
238
268
|
|
|
269
|
+
.d-bc-critical-strong-inverted { border-color: var(--bc-critical-strong-inverted) !important; }
|
|
270
|
+
#d-internals #generate-hover-focus(d-bc-critical-strong-inverted, {.d-bc-critical-strong-inverted();});
|
|
271
|
+
|
|
239
272
|
.d-bc-success { border-color: var(--bc-success) !important; }
|
|
240
273
|
#d-internals #generate-hover-focus(d-bc-success, {.d-bc-success();});
|
|
241
274
|
|
|
275
|
+
.d-bc-success-inverted { border-color: var(--bc-success-inverted) !important; }
|
|
276
|
+
#d-internals #generate-hover-focus(d-bc-success-inverted, {.d-bc-success-inverted();});
|
|
277
|
+
|
|
242
278
|
.d-bc-success-subtle { border-color: var(--bc-success-subtle) !important; }
|
|
243
279
|
#d-internals #generate-hover-focus(d-bc-success-subtle, {.d-bc-success-subtle();});
|
|
244
280
|
|
|
281
|
+
.d-bc-success-subtle-inverted { border-color: var(--bc-success-subtle-inverted) !important; }
|
|
282
|
+
#d-internals #generate-hover-focus(d-bc-success-subtle-inverted, {.d-bc-success-subtle-inverted();});
|
|
283
|
+
|
|
245
284
|
.d-bc-success-strong { border-color: var(--bc-success-strong) !important; }
|
|
246
285
|
#d-internals #generate-hover-focus(d-bc-success-strong, {.d-bc-success-strong();});
|
|
247
286
|
|
|
287
|
+
.d-bc-success-strong-inverted { border-color: var(--bc-success-strong-inverted) !important; }
|
|
288
|
+
#d-internals #generate-hover-focus(d-bc-success-strong-inverted, {.d-bc-success-strong-inverted();});
|
|
289
|
+
|
|
248
290
|
.d-bc-warning { border-color: var(--bc-warning) !important; }
|
|
249
291
|
#d-internals #generate-hover-focus(d-bc-warning, {.d-bc-warning();});
|
|
250
292
|
|
|
293
|
+
.d-bc-warning-inverted { border-color: var(--bc-warning-inverted) !important; }
|
|
294
|
+
#d-internals #generate-hover-focus(d-bc-warning-inverted, {.d-bc-warning-inverted();});
|
|
295
|
+
|
|
251
296
|
.d-bc-warning-subtle { border-color: var(--bc-warning-subtle) !important; }
|
|
252
297
|
#d-internals #generate-hover-focus(d-bc-warning-subtle, {.d-bc-warning-subtle();});
|
|
253
298
|
|
|
299
|
+
.d-bc-warning-subtle-inverted { border-color: var(--bc-warning-subtle-inverted) !important; }
|
|
300
|
+
#d-internals #generate-hover-focus(d-bc-warning-subtle-inverted, {.d-bc-warning-subtle-inverted();});
|
|
301
|
+
|
|
254
302
|
.d-bc-warning-strong { border-color: var(--bc-warning-strong) !important; }
|
|
255
303
|
#d-internals #generate-hover-focus(d-bc-warning-strong, {.d-bc-warning-strong();});
|
|
256
304
|
|
|
305
|
+
.d-bc-warning-strong-inverted { border-color: var(--bc-warning-strong-inverted) !important; }
|
|
306
|
+
#d-internals #generate-hover-focus(d-bc-warning-strong-inverted, {.d-bc-warning-strong-inverted();});
|
|
307
|
+
|
|
257
308
|
.d-bc-brand { border-color: var(--bc-brand) !important; }
|
|
258
309
|
#d-internals #generate-hover-focus(d-bc-brand, {.d-bc-brand();});
|
|
259
310
|
|
|
311
|
+
.d-bc-brand-inverted { border-color: var(--bc-brand-inverted) !important; }
|
|
312
|
+
#d-internals #generate-hover-focus(d-bc-brand-inverted, {.d-bc-brand-inverted();});
|
|
313
|
+
|
|
260
314
|
.d-bc-brand-subtle { border-color: var(--bc-brand-subtle) !important; }
|
|
261
315
|
#d-internals #generate-hover-focus(d-bc-brand-subtle, {.d-bc-brand-subtle();});
|
|
262
316
|
|
|
317
|
+
.d-bc-brand-subtle-inverted { border-color: var(--bc-brand-subtle-inverted) !important; }
|
|
318
|
+
#d-internals #generate-hover-focus(d-bc-brand-subtle-inverted, {.d-bc-brand-subtle-inverted();});
|
|
319
|
+
|
|
263
320
|
.d-bc-brand-strong { border-color: var(--bc-brand-strong) !important; }
|
|
264
321
|
#d-internals #generate-hover-focus(d-bc-brand-strong, {.d-bc-brand-strong();});
|
|
265
322
|
|
|
323
|
+
.d-bc-brand-strong-inverted { border-color: var(--bc-brand-strong-inverted) !important; }
|
|
324
|
+
#d-internals #generate-hover-focus(d-bc-brand-strong-inverted, {.d-bc-brand-strong-inverted();});
|
|
325
|
+
|
|
326
|
+
.d-bc-accent { border-color: var(--bc-accent) !important; }
|
|
327
|
+
#d-internals #generate-hover-focus(d-bc-accent, {.d-bc-accent();});
|
|
328
|
+
|
|
266
329
|
// $ OPACITY CLASSES
|
|
267
330
|
// ----------------------------------------------------------------------------
|
|
268
331
|
#d-internals #opacity-classes(100);
|
|
@@ -147,10 +147,6 @@
|
|
|
147
147
|
bc-default: rgba(0, 0, 0, 0.18);
|
|
148
148
|
bc-moderate: rgba(0, 0, 0, 0.34);
|
|
149
149
|
bc-bold: rgba(0, 0, 0, 0.5);
|
|
150
|
-
bc-subtle-inverted: rgba(255, 255, 255, 0.14);
|
|
151
|
-
bc-default-inverted: rgba(255, 255, 255, 0.22);
|
|
152
|
-
bc-moderate-inverted: rgba(255, 255, 255, 0.38);
|
|
153
|
-
bc-bold-inverted: rgba(255, 255, 255, 0.5);
|
|
154
150
|
bc-focus: var(--blue-300);
|
|
155
151
|
bc-critical: var(--red-300);
|
|
156
152
|
bc-critical-subtle: var(--red-200);
|
|
@@ -162,8 +158,25 @@
|
|
|
162
158
|
bc-warning-subtle: var(--gold-200);
|
|
163
159
|
bc-warning-strong: var(--gold-500);
|
|
164
160
|
bc-brand: var(--purple-400);
|
|
161
|
+
bc-accent: var(--magenta-300);
|
|
165
162
|
bc-brand-subtle: var(--purple-200);
|
|
166
163
|
bc-brand-strong: var(--purple-500);
|
|
164
|
+
bc-subtle-inverted: rgba(255, 255, 255, 0.14);
|
|
165
|
+
bc-default-inverted: rgba(255, 255, 255, 0.22);
|
|
166
|
+
bc-moderate-inverted: rgba(255, 255, 255, 0.38);
|
|
167
|
+
bc-bold-inverted: rgba(255, 255, 255, 0.5);
|
|
168
|
+
bc-critical-inverted: var(--red-200);
|
|
169
|
+
bc-critical-subtle-inverted: var(--red-400);
|
|
170
|
+
bc-critical-strong-inverted: var(--red-100);
|
|
171
|
+
bc-success-inverted: var(--green-200);
|
|
172
|
+
bc-success-subtle-inverted: var(--green-400);
|
|
173
|
+
bc-success-strong-inverted: var(--green-100);
|
|
174
|
+
bc-warning-inverted: var(--gold-200);
|
|
175
|
+
bc-warning-subtle-inverted: var(--gold-400);
|
|
176
|
+
bc-warning-strong-inverted: var(--gold-100);
|
|
177
|
+
bc-brand-inverted: var(--purple-400);
|
|
178
|
+
bc-brand-subtle-inverted: var(--purple-500);
|
|
179
|
+
bc-brand-strong-inverted: var(--purple-200);
|
|
167
180
|
}
|
|
168
181
|
|
|
169
182
|
// ============================================================================
|
|
@@ -191,21 +204,34 @@
|
|
|
191
204
|
fc-tertiary-hsl: var(--black-600-hsl);
|
|
192
205
|
|
|
193
206
|
fc-muted: hsla(var(--black-800-hsl) ~' / ' var(--alpha, 50%));
|
|
207
|
+
fc-muted-inverted: hsla(var(--black-200-hsl) ~' / ' var(--alpha, 60%));
|
|
194
208
|
|
|
195
209
|
fc-placeholder: var(--black-500);
|
|
196
210
|
fc-placeholder-hsl: var(--black-500-hsl);
|
|
197
211
|
|
|
212
|
+
fc-placeholder-inverted: var(--black-500);
|
|
213
|
+
fc-placeholder-inverted-hsl:var(--black-500-hsl);
|
|
214
|
+
|
|
198
215
|
fc-disabled: var(--black-500);
|
|
199
216
|
fc-disabled-hsl: var(--black-500-hsl);
|
|
200
217
|
|
|
218
|
+
fc-disabled-inverted: var(--black-500);
|
|
219
|
+
fc-disabled-inverted-hsl: var(--black-500-hsl);
|
|
220
|
+
|
|
201
221
|
fc-critical: var(--red-300);
|
|
202
222
|
fc-critical-strong: var(--red-400);
|
|
203
223
|
fc-critical-hsl: var(--red-300-hsl);
|
|
204
224
|
fc-critical-strong-hsl: var(--red-400-hsl);
|
|
205
225
|
|
|
226
|
+
fc-critical-inverted: var(--red-200);
|
|
227
|
+
fc-critical-strong-inverted:hsl(0deg 100% 82% / 1);
|
|
228
|
+
fc-critical-inverted-hsl: var(--red-200-hsl);
|
|
229
|
+
|
|
206
230
|
fc-error: var(--fc-critical);
|
|
231
|
+
fc-error-inverted: var(--fc-critical-inverted);
|
|
207
232
|
fc-error-strong: var(--fc-critical-strong);
|
|
208
233
|
fc-error-hsl: var(--fc-critical-hsl);
|
|
234
|
+
fc-error-inverted-hsl: var(--fc-critical-inverted-hsl);
|
|
209
235
|
fc-error-strong-hsl: var(--fc-critical-strong-hsl);
|
|
210
236
|
|
|
211
237
|
fc-success: var(--green-400);
|
|
@@ -213,8 +239,14 @@
|
|
|
213
239
|
fc-success-hsl: var(--green-400-hsl);
|
|
214
240
|
fc-success-strong-hsl: var(--green-500-hsl);
|
|
215
241
|
|
|
242
|
+
fc-success-inverted: var(--green-200);
|
|
243
|
+
fc-success-strong-inverted: hsl(113deg 100% 90% / 1);
|
|
244
|
+
fc-success-hsl-inverted: var(--green-200-hsl);
|
|
245
|
+
|
|
216
246
|
fc-warning: var(--gold-500);
|
|
247
|
+
fc-warning-inverted: var(--gold-100);
|
|
217
248
|
fc-warning-hsl: var(--gold-500-hsl);
|
|
249
|
+
fc-warning-inverted-hsl: var(--gold-100-hsl);
|
|
218
250
|
|
|
219
251
|
fc-warning-hover: var(--black-900);
|
|
220
252
|
fc-warning-hover-hsl: var(--black-900-hsl);
|
|
@@ -227,5 +259,17 @@
|
|
|
227
259
|
// $$ DARK HSL BREAKDOWNS
|
|
228
260
|
// ----------------------------------------------------------------------------
|
|
229
261
|
@dark-color-vars: {
|
|
230
|
-
|
|
262
|
+
// Temporary and exploratory, these will be replaced by Design Tokens anyway
|
|
263
|
+
base-color-text: var(--black-800);
|
|
264
|
+
theme-mention-color-foreground: white;
|
|
265
|
+
theme-mention-color-background: var(--purple-300);
|
|
266
|
+
base-color-background: var(--bgc-primary);
|
|
267
|
+
bc-critical: var(--red-400);
|
|
268
|
+
bc-subtle: rgba(255, 255, 255, 0.18);
|
|
269
|
+
bc-default: rgba(255, 255, 255, 0.26);
|
|
270
|
+
bc-moderate: rgba(255, 255, 255, 0.4);
|
|
271
|
+
bc-bold: rgba(255, 255, 255, 0.6);
|
|
272
|
+
bgc-moderate-opaque: var(--bgc-moderate); // temp workaround
|
|
273
|
+
fc-critical: var(--red-400);
|
|
274
|
+
fc-warning: var(--gold-400);
|
|
231
275
|
}
|