@dialpad/dialtone 7.10.3 → 7.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.
Files changed (18) hide show
  1. package/lib/build/less/components/button.less +113 -89
  2. package/lib/build/less/components/chip.less +0 -1
  3. package/lib/build/less/components/forms.less +24 -31
  4. package/lib/build/less/components/input.less +68 -30
  5. package/lib/build/less/components/modal.less +40 -24
  6. package/lib/build/less/components/popover.less +54 -47
  7. package/lib/build/less/components/selects.less +71 -83
  8. package/lib/build/less/components/tooltip.less +10 -3
  9. package/lib/build/less/dialtone-reset.less +1 -1
  10. package/lib/build/less/themes/default.less +0 -3
  11. package/lib/build/less/utilities/colors.less +1 -1
  12. package/lib/build/less/utilities/effects.less +3 -0
  13. package/lib/build/less/variables/colors.less +12 -12
  14. package/lib/build/less/variables/sizes.less +21 -38
  15. package/lib/build/less/variables/visual-styles.less +2 -0
  16. package/lib/dist/css/dialtone.css +771 -621
  17. package/lib/dist/css/dialtone.min.css +1 -1
  18. package/package.json +28 -27
package/lib/build/less/components/button.less CHANGED
@@ -17,34 +17,62 @@
17
17
  // ============================================================================
18
18
  // $ BASE STYLE
19
19
  // ----------------------------------------------------------------------------
20
- .d-btn {
20
+
21
+ .d-btn,
22
+ .d-btn--md {
21
23
  // Component specific CSS Vars
22
24
  // ------------------------------------------------------------------------
23
25
  --button-color-text: var(--purple-400);
24
26
  --button-color-background: transparent;
25
27
  --button-color-border: transparent;
26
- --button-radius: var(--size-300);
28
+ --button-gap: calc(var(--button-padding-x) / 2);
29
+ --button-border-radius: var(--size-400);
30
+ --button-border-width: var(--size-100);
31
+ --button-font-size: var(--fs-200);
32
+ --button-font-weight: var(--fw-medium);
33
+ --button-line-height-xs: var(--lh-200); // TODO: these used to vary, remove if all wind up all the same
34
+ --button-line-height-sm: var(--lh-200); // TODO: these used to vary, remove if all wind up all the same
35
+ --button-line-height-md: var(--lh-200); // TODO: these used to vary, remove if all wind up all the same
36
+ --button-line-height-lg: var(--lh-200); // TODO: these used to vary, remove if all wind up all the same
37
+ --button-line-height-xl: var(--lh-200); // TODO: these used to vary, remove if all wind up all the same
38
+ --button-line-height: var(--button-line-height-md);
39
+ --button-padding-y-xs: calc(calc(var(--space-400) - var(--space-100)) - var(--button-border-width)); // ((8 - 1) - border-width)
40
+ --button-padding-x-xs: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
41
+ --button-padding-y-sm: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
42
+ --button-padding-x-sm: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
43
+ --button-padding-y-md: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
44
+ --button-padding-x-md: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
45
+ --button-padding-y-lg: calc((var(--space-400) + var(--space-200)) - var(--button-border-width)); // 10 minus border-width
46
+ --button-padding-x-lg: calc(var(--space-500) - var(--button-border-width)); // 16 minus border-width
47
+ --button-padding-y-xl: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
48
+ --button-padding-x-xl: calc(var(--space-500) - var(--button-border-width)); // 16 minus border-width
49
+ --button-padding-y: var(--button-padding-y-md);
50
+ --button-padding-x: var(--button-padding-x-md);
27
51
 
28
52
  position: relative;
29
53
  display: inline-flex;
54
+ gap: var(--button-gap);
30
55
  align-items: center;
31
56
  justify-content: center;
32
57
  box-sizing: border-box;
33
- padding: calc(var(--space-400) - var(--space-100)); // Subtract border
58
+ padding: var(--button-padding-y) var(--button-padding-x);
34
59
  color: var(--button-color-text);
35
- font-size: var(--fs-200);
60
+ font-weight: var(--button-font-weight);
61
+ font-size: var(--button-font-size);
36
62
  font-family: inherit;
37
- line-height: var(--lh4);
63
+ line-height: var(--button-line-height);
38
64
  text-transform: inherit;
39
65
  text-decoration: none;
40
66
  vertical-align: middle;
41
67
  background-color: var(--button-color-background);
42
- border: var(--size-100) solid var(--button-color-border);
43
- border-radius: var(--button-radius);
68
+ border-color: var(--button-color-border);
69
+ border-style: solid;
70
+ border-width: var(--button-border-width);
71
+ border-radius: var(--button-border-radius);
44
72
  box-shadow: var(--button--bs);
45
73
  cursor: pointer;
46
- transition-timing-function: var(--ttf-in-out);
47
- transition-duration: 75ms;
74
+ transition-timing-function: var(--ttf-out-quint);
75
+ transition-duration: var(--td300);
48
76
  transition-property: background-color, border, box-shadow;
49
77
  user-select: none;
50
78
  fill: currentColor;
@@ -53,14 +81,14 @@
53
81
  // ------------------------------------------------------------------------
54
82
  &:hover {
55
83
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
56
- --button-color-background: hsla(var(--purple-400-hsl) ~' / ' 3%);
84
+ --button-color-background: hsla(var(--purple-400-hsl) ~' / ' 4%);
57
85
  }
58
86
 
59
87
  &:active,
60
88
  &.d-btn--active,
61
89
  &.d-btn--active:active {
62
90
  --button-color-text: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
63
- --button-color-background: hsla(var(--purple-400-hsl) ~' / ' 9%);
91
+ --button-color-background: hsla(var(--purple-400-hsl) ~' / ' 14%);
64
92
  }
65
93
 
66
94
 
@@ -70,9 +98,10 @@
70
98
  }
71
99
 
72
100
  &[disabled] {
73
- color: var(--fc-disabled);
74
- background-color: var(--black-300);
75
- border-color: transparent;
101
+ --button-color-border: transparent;
102
+ --button-color-text: var(--fc-disabled);
103
+ --button-color-background: var(--black-300);
104
+
76
105
  cursor: not-allowed;
77
106
  transition: none;
78
107
  }
@@ -89,8 +118,11 @@
89
118
  // $$ EXTRA SMALL
90
119
  // ----------------------------------------------------------------------------
91
120
  .d-btn--xs {
92
- padding: calc(var(--space-300) + var(--space-100)) calc(var(--space-400) - var(--space-100)); // Subtract border
93
- font-size: var(--fs-100);
121
+ --button-padding-y: var(--button-padding-y-xs);
122
+ --button-padding-x: var(--button-padding-x-xs);
123
+ --button-font-size: var(--fs-100);
124
+ --button-line-height: var(--button-line-height-xs);
125
+ --button-border-radius: var(--size-300);
94
126
 
95
127
  .d-btn__icon .d-svg {
96
128
  width: @icon12;
@@ -101,9 +133,10 @@
101
133
  // $$ SMALL
102
134
  // ----------------------------------------------------------------------------
103
135
  .d-btn--sm {
104
- padding: calc(var(--space-300) + var(--space-100)) calc(var(--space-400) - var(--space-100)); // Subtract border
105
- font-size: var(--fs-200);
106
- line-height: var(--lh6);
136
+ --button-padding-y: var(--button-padding-y-sm);
137
+ --button-padding-x: var(--button-padding-x-sm);
138
+ --button-font-size: var(--fs-100);
139
+ --button-line-height: var(--button-line-height-sm);
107
140
 
108
141
  .d-btn__icon .d-svg {
109
142
  width: @icon14;
@@ -111,11 +144,20 @@
111
144
  }
112
145
  }
113
146
 
147
+ // $$ MEDIUM
148
+ // ----------------
149
+ .d-btn--md {
150
+ //
151
+ }
152
+
114
153
  // $$ LARGE
115
154
  // ----------------------------------------------------------------------------
116
155
  .d-btn--lg {
117
- padding: calc(calc(var(--space-400) + var(--space-300)) - var(--space-100)) calc(var(--space-500) - var(--space-100)); // Subtract border
118
- font-size: var(--fs-300);
156
+ --button-padding-y: var(--button-padding-y-lg);
157
+ --button-padding-x: var(--button-padding-x-lg);
158
+ --button-font-size: var(--fs-300);
159
+ --button-line-height: var(--button-line-height-lg);
160
+ --button-border-radius: calc(var(--size-300) * 3);
119
161
 
120
162
  .d-btn__icon .d-svg {
121
163
  width: @icon20;
@@ -126,9 +168,12 @@
126
168
  // $$ EXTRA LARGE
127
169
  // ----------------------------------------------------------------------------
128
170
  .d-btn--xl {
129
- padding: calc(calc(var(--space-400) + var(--space-300)) - var(--space-100)) calc(var(--space-500) - var(--space-100)); // Subtract border
130
- font-size: var(--fs-300);
131
- line-height: var(--lh8);
171
+ --button-padding-y: var(--button-padding-y-xl);
172
+ --button-padding-x: var(--button-padding-x-xl);
173
+ --button-font-size: var(--fs-400);
174
+ --button-font-weight: var(--fw-normal);
175
+ --button-line-height: var(--button-line-height-xl);
176
+ --button-border-radius: var(--size-500);
132
177
 
133
178
  .d-btn__icon .d-svg {
134
179
  width: @icon24;
@@ -143,6 +188,7 @@
143
188
  display: inline-flex;
144
189
  align-items: center;
145
190
  justify-content: center;
191
+ // background-color: rgba(0,0,0,.5);
146
192
  }
147
193
 
148
194
  // ============================================================================
@@ -154,20 +200,14 @@
154
200
 
155
201
  .d-btn__icon {
156
202
  display: flex;
157
- line-height: 0;
158
- }
203
+ // background-color: rgba(0,0,0,.5);
159
204
 
160
- .d-btn__icon--left,
161
- .d-btn__icon--right {
162
- margin-top: calc(var(--space-300) * -1);
163
- margin-bottom: calc(var(--space-300) * -1);
205
+ .d-icon {
206
+ // outline: 1px solid red;
207
+ // opacity: 0;
208
+ }
164
209
  }
165
210
 
166
- .d-btn__icon--top,
167
- .d-btn__icon--bottom {
168
- margin-right: calc(var(--space-300) * -1);
169
- margin-left: calc(var(--space-300) * -1);
170
- }
171
211
 
172
212
  .d-btn__icon--left,
173
213
  .d-btn__icon--top {
@@ -187,36 +227,17 @@
187
227
  margin-right: calc(var(--space-200) * -1);
188
228
  }
189
229
 
190
- .d-btn__icon--left ~ .d-btn__label,
191
- .d-btn__label ~ .d-btn__icon--right {
192
- margin-left: var(--space-300);
193
- }
194
-
195
- .d-btn__icon--right ~ .d-btn__label,
196
- .d-btn__label ~ .d-btn__icon--left {
197
- margin-right: var(--space-300);
198
- }
199
-
200
- .d-btn__icon--top ~ .d-btn__label,
201
- .d-btn__label ~ .d-btn__icon--bottom {
202
- margin-top: var(--space-300);
203
- }
204
-
205
- .d-btn__icon--bottom ~ .d-btn__label,
206
- .d-btn__label ~ .d-btn__icon--top {
207
- margin-bottom: var(--space-300);
208
- }
209
-
210
230
  // ============================================================================
211
231
  // $ VISUAL STYLES
212
232
  // ----------------------------------------------------------------------------
213
233
  // $$ CIRCLE BUTTONS
214
234
  // ----------------------------------------------------------------------------
215
235
  .d-btn--circle {
236
+ --button-padding-x: var(--button-padding-y-md);
237
+ --button-padding-y: var(--button-padding-y-md);
216
238
  --button-color-text: var(--black-800);
217
- --button-radius: var(--br-circle);
239
+ --button-border-radius: var(--br-circle);
218
240
 
219
- padding: calc(var(--space-400) + var(--space-100));
220
241
  transition-duration: 150ms;
221
242
 
222
243
  &:hover {
@@ -244,32 +265,33 @@
244
265
  }
245
266
 
246
267
  &.d-btn--outlined {
247
- --button-color-border: var(--black-700);
268
+ --button-color-border: var(--black-600);
248
269
  }
249
270
 
250
271
  // Adjust padding based on sizes
251
272
  &.d-btn--xs {
252
- padding: calc(var(--space-400) - var(--space-100));
253
-
254
- --button-radius: var(--br-circle);
273
+ --button-padding-y: var(--button-padding-y-xs);
274
+ --button-padding-x: var(--button-padding-y-xs);
255
275
  }
256
276
 
257
277
  &.d-btn--sm {
258
- padding: var(--space-400);
278
+ --button-padding-y: var(--button-padding-y-sm);
279
+ --button-padding-x: var(--button-padding-y-sm);
280
+ }
259
281
 
260
- --button-radius: var(--br-circle);
282
+ &.d-btn--md {
283
+ --button-padding-x: var(--button-padding-y-md);
284
+ --button-padding-y: var(--button-padding-y-md);
261
285
  }
262
286
 
263
287
  &.d-btn--lg {
264
- padding: calc(calc(var(--space-400) + var(--space-300)) + var(--space-100));
265
-
266
- --button-radius: var(--br-circle);
288
+ --button-padding-x: calc(var(--button-padding-y-lg) + var(--space-100));
289
+ --button-padding-y: calc(var(--button-padding-y-lg) + var(--space-100));
267
290
  }
268
291
 
269
292
  &.d-btn--xl {
270
- padding: calc(var(--space-500) - var(--space-100));
271
-
272
- --button-radius: var(--br-circle);
293
+ --button-padding-x: calc(var(--button-padding-y-xl) + var(--space-300));
294
+ --button-padding-y: calc(var(--button-padding-y-xl) + var(--space-300));
273
295
  }
274
296
  }
275
297
 
@@ -287,14 +309,14 @@
287
309
 
288
310
  &:hover {
289
311
  --button-color-text: var(--white);
290
- --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 5%));
312
+ --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 6%));
291
313
  }
292
314
 
293
315
  &:active,
294
316
  &.d-btn--active,
295
317
  &.d-btn--active:active {
296
318
  --button-color-text: var(--white);
297
- --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 10%));
319
+ --button-color-background: hsl(var(--purple-400-h), var(--purple-400-s), calc(var(--purple-400-l) - 12%));
298
320
  }
299
321
  }
300
322
 
@@ -305,14 +327,14 @@
305
327
 
306
328
  &:hover {
307
329
  --button-color-text: var(--muted-color-hover);
308
- --button-color-background: hsla(var(--black-800-hsl) ~' / ' 3%);
330
+ --button-color-background: hsla(var(--black-800-hsl) ~' / ' 5%);
309
331
  }
310
332
 
311
333
  &:active,
312
334
  &.d-btn--active,
313
335
  &.d-btn--active:active {
314
336
  --button-color-text: var(--muted-color-hover);
315
- --button-color-background: hsla(var(--black-800-hsl) ~' / ' 9%);
337
+ --button-color-background: hsla(var(--black-800-hsl) ~' / ' 10%);
316
338
  }
317
339
 
318
340
  &:focus-visible {
@@ -331,14 +353,14 @@
331
353
 
332
354
  &:hover {
333
355
  --button-color-text: var(--error-color-hover);
334
- --button-color-background: hsla(var(--error-color-hsl) ~' / ' 6%);
356
+ --button-color-background: hsla(var(--error-color-hsl) ~' / ' 3%);
335
357
  }
336
358
 
337
359
  &:active,
338
360
  &.d-btn--active,
339
361
  &.d-btn--active:active {
340
362
  --button-color-text: var(--error-color-hover);
341
- --button-color-background: hsla(var(--error-color-hsl) ~' / ' 20%);
363
+ --button-color-background: hsla(var(--error-color-hsl) ~' / ' 9%);
342
364
  }
343
365
 
344
366
  &:focus-visible {
@@ -355,14 +377,14 @@
355
377
 
356
378
  &:hover {
357
379
  --button-color-text: var(--white);
358
- --button-color-background: hsl(var(--red-300-h), var(--red-300-s), 40%);
380
+ --button-color-background: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 4%));
359
381
  }
360
382
 
361
383
  &:active,
362
384
  &.d-btn--active,
363
385
  &.d-btn--active:active {
364
386
  --button-color-text: var(--white);
365
- --button-color-background: hsl(var(--red-300-h), var(--red-300-s), 27%);
387
+ --button-color-background: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
366
388
  }
367
389
  }
368
390
  }
@@ -417,7 +439,7 @@
417
439
  // $$ ICON ONLY
418
440
  // ----------------------------------------------------------------------------
419
441
  .d-btn--icon-only {
420
- padding: calc(var(--space-400) + var(--space-100));
442
+ // --button-padding: ;
421
443
 
422
444
  .d-btn__icon {
423
445
  margin: unset;
@@ -433,9 +455,10 @@
433
455
  // $$ DISABLED STATE
434
456
  // ----------------------------------------------------------------------------
435
457
  .d-btn--disabled {
436
- color: var(--fc-disabled);
437
- background-color: var(--black-300);
438
- border-color: transparent;
458
+ --button-color-text: var(--fc-disabled);
459
+ --button-color-background: var(--black-300);
460
+ --button-color-border: transparent;
461
+
439
462
  cursor: not-allowed;
440
463
  transition: none;
441
464
  pointer-events: none;
@@ -444,14 +467,15 @@
444
467
  // $$ BRAND BUTTONS
445
468
  // ----------------------------------------------------------------------------
446
469
  .d-btn--brand {
470
+ --button-color-text: var(--white);
471
+ --button-color-background: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
472
+
447
473
  display: flex;
448
- color: var(--white);
449
- background-color: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
450
474
 
451
475
  &:hover,
452
476
  &:active {
453
- color: hsla(var(--white-hsl) ~' / ' 90%);
454
- background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
477
+ --button-color-text: hsla(var(--white-hsl) ~' / ' 90%);
478
+ --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
455
479
  }
456
480
 
457
481
  &:focus-visible {
@@ -459,7 +483,7 @@
459
483
  }
460
484
 
461
485
  &:active {
462
- background-color: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
486
+ --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
463
487
  }
464
488
 
465
489
  .d-btn__icon {
@@ -533,15 +557,15 @@
533
557
  .d-btn-group {
534
558
  display: flex;
535
559
 
536
- &.d-btn-group--start {
560
+ &--start {
537
561
  justify-content: start;
538
562
  }
539
563
 
540
- &.d-btn-group--end {
564
+ &--end {
541
565
  justify-content: end;
542
566
  }
543
567
 
544
- &.d-btn-group--space-between {
568
+ &--space-between {
545
569
  justify-content: space-between;
546
570
  }
547
571
  }
package/lib/build/less/components/chip.less CHANGED
@@ -196,7 +196,6 @@
196
196
  --avatar-size-shape: calc(var(--size-500) + var(--size-300)); // 20
197
197
 
198
198
  margin-right: var(--space-300);
199
- margin-left: calc(var(--space-300) + var(--space-200)); // 6
200
199
  }
201
200
  }
202
201
 
package/lib/build/less/components/forms.less CHANGED
@@ -36,15 +36,14 @@ fieldset {
36
36
  align-items: baseline;
37
37
  justify-content: space-between;
38
38
  box-sizing: border-box;
39
- margin-bottom: calc(var(--space-300) + var(--space-200)); // 6
40
- color: currentColor;
41
- font-weight: @fw-bold;
39
+ margin-bottom: var(--space-300);
40
+ color: var(--fc-secondary);
41
+ font-weight: var(--fw-semibold);
42
42
  font-size: var(--fs-200);
43
43
  font-family: inherit;
44
- line-height: var(--lh4);
44
+ line-height: var(--lh-300);
45
45
  word-break: break-word;
46
46
  overflow-wrap: break-word;
47
- cursor: pointer;
48
47
 
49
48
  legend & { cursor: default; }
50
49
  }
@@ -53,75 +52,68 @@ fieldset {
53
52
  // ----------------------------------------------------------------------------
54
53
  .d-label--xs {
55
54
  font-size: var(--fs-100);
56
- line-height: var(--lh4);
57
55
  }
58
56
 
59
57
  .d-label--sm {
60
58
  font-size: var(--fs-200);
61
- line-height: var(--lh2);
62
59
  }
63
60
 
64
61
  .d-label--lg {
65
62
  font-size: var(--fs-200);
66
- line-height: var(--lh2);
67
63
  }
68
64
 
69
65
  .d-label--xl {
70
66
  font-size: var(--fs-300);
71
- line-height: var(--lh4);
72
67
  }
73
68
 
74
-
75
69
  // ============================================================================
76
70
  // $ DESCRIPTIONS
77
71
  // ----------------------------------------------------------------------------
78
72
  .d-description {
79
73
  display: flex;
80
74
  box-sizing: border-box;
81
- margin-bottom: calc(var(--space-300) + var(--space-200)); // 6
82
- color: var(--black-600);
75
+ color: var(--fc-tertiary);
83
76
  font-size: var(--fs-100);
84
77
  font-family: inherit;
85
- line-height: var(--lh4);
78
+ line-height: var(--lh-400);
86
79
  fill: currentColor;
87
80
  }
88
81
 
89
82
  .d-label + .d-description {
90
- margin-top: calc(calc(var(--space-300) + var(--space-200)) * -1); // -6
83
+ margin-top: calc(var(--space-300) * -1);
84
+ margin-bottom: var(--space-300);
91
85
  }
92
86
 
93
87
  // $$ SIZES
94
88
  // ----------------------------------------------------------------------------
95
89
  .d-description--lg {
96
90
  font-size: var(--fs-200);
97
- line-height: var(--lh6);
98
91
  }
99
92
 
100
93
  .d-description--xl {
101
94
  font-size: var(--fs-200);
102
- line-height: var(--lh6);
103
95
  }
104
96
 
105
97
  // ============================================================================
106
98
  // $ VALIDATION MESSAGES
107
99
  // ----------------------------------------------------------------------------
108
100
  .d-validation-message {
109
- --validation--fc: var(--fc-tertiary);
101
+ --validation-color-text: var(--fc-tertiary);
110
102
 
111
- display: inline-flex;
112
- gap: var(--space-300); // 4
103
+ display: flex;
104
+ gap: var(--space-300);
113
105
  align-items: flex-start;
114
- margin-top: calc(var(--space-300) + var(--space-200)); // 6
115
- color: var(--validation--fc);
116
- font-weight: inherit;
106
+ margin-top: var(--space-400);
107
+ color: var(--validation-color-text);
108
+ font-weight: var(--fw-medium);
117
109
  font-size: var(--fs-100);
118
110
  font-family: inherit;
119
- line-height: var(--lh4);
111
+ line-height: var(--lh-300);
120
112
 
121
113
  // Icon Slot
122
114
  &::before {
123
- width: var(--size-500); // 16
124
- min-width: var(--size-500); // 16
115
+ display: block;
116
+ width: calc(var(--size-500) + var(--size-200)); // 16
125
117
  height: var(--size-500); // 16
126
118
  content: '';
127
119
  }
@@ -129,29 +121,30 @@ fieldset {
129
121
 
130
122
  // $$ VALIDATION STATES
131
123
  // ----------------------------------------------------------------------------
124
+
132
125
  .d-validation-message--warning {
133
- --validation--fc: var(--fc-warning);
126
+ --validation-color-text: var(--fc-warning);
134
127
 
135
128
  &::before {
136
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z' fill='hsl(43 100% 33%)'/%3E%3C/svg%3E");
129
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==');
137
130
  background-repeat: no-repeat;
138
131
  }
139
132
  }
140
133
 
141
134
  .d-validation-message--error {
142
- --validation--fc: var(--fc-error);
135
+ --validation-color-text: var(--fc-error);
143
136
 
144
137
  &::before {
145
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='hsl(0 100% 29%)'/%3E%3C/svg%3E");
138
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=');
146
139
  background-repeat: no-repeat;
147
140
  }
148
141
  }
149
142
 
150
143
  .d-validation-message--success {
151
- --validation--fc: var(--fc-success);
144
+ --validation-color-text: var(--fc-success);
152
145
 
153
146
  &::before {
154
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='hsl(115 94% 18%)'/%3E%3C/svg%3E");
147
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=');
155
148
  background-repeat: no-repeat;
156
149
  }
157
150
  }