mod-base 1.0.24 → 1.0.26-beta.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.
- package/CHANGELOG.md +8 -0
- package/package.json +1 -1
- package/src/styles/templates/_dark-mode.scss +124 -72
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.26
|
|
4
|
+
|
|
5
|
+
- Changing background color for body, partners and footer sections. Making background image darker and using a lighter charcoal gray for text instead of white. Also adding logic for value props inversion of text colors, and removing old charcoal colors to replace with new brand colors.
|
|
6
|
+
|
|
7
|
+
## 1.0.25
|
|
8
|
+
|
|
9
|
+
- Adding styles for transfer overlay and missed input field icon error state
|
|
10
|
+
|
|
3
11
|
## 1.0.24
|
|
4
12
|
|
|
5
13
|
- Adding color transition for radio button checkmarks
|
package/package.json
CHANGED
|
@@ -10,12 +10,12 @@ $color-button: null;
|
|
|
10
10
|
|
|
11
11
|
$contact-us-blue-light: #8498E7;
|
|
12
12
|
|
|
13
|
-
@function
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
@function colorContrast($base-color, $light-color, $dark-color) {
|
|
14
|
+
$result: $light-color;
|
|
15
|
+
@if (lightness($base-color) > 45) {
|
|
16
|
+
$result: $dark-color;
|
|
17
|
+
}
|
|
18
|
+
@return $result;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
@mixin btnStyles($color-btn, $color-btn-text) {
|
|
@@ -40,51 +40,52 @@ $contact-us-blue-light: #8498E7;
|
|
|
40
40
|
|
|
41
41
|
@mixin dark-mode(
|
|
42
42
|
$accent-color: null,
|
|
43
|
-
$background: $color-
|
|
43
|
+
$background: $color-charcoal8,
|
|
44
44
|
$base-color: null,
|
|
45
|
-
$bbb-img-filter: grayscale(1) invert(.
|
|
45
|
+
$bbb-img-filter: grayscale(1) invert(.915) brightness(1.5),
|
|
46
46
|
$color-btn: null,
|
|
47
47
|
$color-btn-text: null,
|
|
48
|
-
$footer-background: $color-
|
|
49
|
-
$foreground: $color-
|
|
50
|
-
$form-focus-border-color: $color-
|
|
48
|
+
$footer-background: $color-charcoal9,
|
|
49
|
+
$foreground: $color-grey-300,
|
|
50
|
+
$form-focus-border-color: $color-grey-400,
|
|
51
51
|
$hero-content-box-shadow-mobile: null,
|
|
52
|
-
$interactive-text-color: $color-
|
|
52
|
+
$interactive-text-color: $color-grey-500,
|
|
53
53
|
$interactive-text-color-hover: darken($interactive-text-color, 10%),
|
|
54
54
|
$logo-filter: invert(1) hue-rotate(180deg),
|
|
55
|
+
$partners-logo-filter: grayscale(1) invert(.9),
|
|
55
56
|
$radio-btn-background-color: $background,
|
|
56
|
-
$radio-btn-border-color: $color-
|
|
57
|
+
$radio-btn-border-color: $color-grey-300,
|
|
57
58
|
$radio-btn-checked-background-color: null,
|
|
58
59
|
$radio-btn-checked-border-color: null,
|
|
59
60
|
$radio-btn-checked-icon-background-color: null,
|
|
60
|
-
$radio-btn-checked-icon-color: $color-
|
|
61
|
-
$radio-btn-checked-text-color: $color-
|
|
61
|
+
$radio-btn-checked-icon-color: $color-grey-300,
|
|
62
|
+
$radio-btn-checked-text-color: $color-grey-300,
|
|
62
63
|
$radio-btn-focus-box-shadow: null,
|
|
63
64
|
$radio-btn-icon-background: transparent,
|
|
64
65
|
$radio-btn-icon-color: $background,
|
|
65
|
-
$radio-btn-text-color: $color-
|
|
66
|
+
$radio-btn-text-color: $color-grey-300,
|
|
66
67
|
$value-props-background: null
|
|
67
68
|
) {
|
|
68
69
|
// Theme global variables if required to use after including the mixin
|
|
69
70
|
$background-color: $background !global;
|
|
70
|
-
$background-img-brightness: brightness(
|
|
71
|
+
$background-img-brightness: brightness(60%) !global;
|
|
71
72
|
$base-color: $base-color !global;
|
|
72
73
|
$bbb-img-filter: $bbb-img-filter;
|
|
73
|
-
$box-shadow-color: rgba($color-black,
|
|
74
|
+
$box-shadow-color: rgba($color-black, 60%) !global;
|
|
74
75
|
$button-saturation: saturate(70%) !global;
|
|
75
76
|
$color-button: $color-btn !global;
|
|
76
77
|
$img-filter: invert(1) hue-rotate(180deg) !global;
|
|
77
|
-
$theme: $
|
|
78
|
+
$theme: $base-color !global;
|
|
78
79
|
$text-color: $foreground !global;
|
|
79
80
|
$value-props-background: $value-props-background;
|
|
80
81
|
|
|
81
82
|
@if ($color-btn != null and $color-btn-text == null) {
|
|
82
|
-
$color-btn-text:
|
|
83
|
+
$color-btn-text: colorContrast($color-btn, $foreground, $background);
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
// Most common selectors list
|
|
86
|
-
$content-selectors: 'input,.toggle-wrapper,.
|
|
87
|
-
$background-selectors: '.form,.header,.
|
|
87
|
+
$content-selectors: '.hero__title,.hero__subtitle,input,.toggle-wrapper,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,legend,[class^="loader__"], table tr';
|
|
88
|
+
$background-selectors: '.form,.header,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input:focus,.expand-collapse__icon,.featured-block,table tr';
|
|
88
89
|
|
|
89
90
|
@media (prefers-color-scheme: dark){
|
|
90
91
|
body[data-color-scheme='system'] {
|
|
@@ -102,6 +103,14 @@ $contact-us-blue-light: #8498E7;
|
|
|
102
103
|
color: $text-color;
|
|
103
104
|
}
|
|
104
105
|
|
|
106
|
+
.partners {
|
|
107
|
+
background-color: darken($background, 2%);
|
|
108
|
+
|
|
109
|
+
&__logo img {
|
|
110
|
+
filter: $partners-logo-filter;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
105
114
|
.featured-block__image img,
|
|
106
115
|
.featured-block__media img {
|
|
107
116
|
filter: $background-img-brightness;
|
|
@@ -123,16 +132,16 @@ $contact-us-blue-light: #8498E7;
|
|
|
123
132
|
.secure-text,
|
|
124
133
|
.step__secure-text,
|
|
125
134
|
.modal-subtitle {
|
|
126
|
-
color: $color-
|
|
135
|
+
color: $color-grey-500;
|
|
127
136
|
}
|
|
128
137
|
|
|
129
138
|
.tcpa,
|
|
130
139
|
.tcpa a {
|
|
131
|
-
color: lighten($color-
|
|
140
|
+
color: lighten($color-grey-500, 2%);
|
|
132
141
|
}
|
|
133
142
|
|
|
134
143
|
.icon-close:hover {
|
|
135
|
-
color: $color-
|
|
144
|
+
color: $color-grey-400;
|
|
136
145
|
}
|
|
137
146
|
|
|
138
147
|
.step__header,
|
|
@@ -140,25 +149,54 @@ $contact-us-blue-light: #8498E7;
|
|
|
140
149
|
background-color: $base-color;
|
|
141
150
|
}
|
|
142
151
|
|
|
152
|
+
@if ($base-color != null) {
|
|
153
|
+
.step__header-title,
|
|
154
|
+
.step__supertitle {
|
|
155
|
+
color: colorContrast($base-color, $foreground, $background);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
143
159
|
.value-props {
|
|
144
160
|
background: $value-props-background;
|
|
161
|
+
|
|
162
|
+
@if type_of($value-props-background) == 'color' {
|
|
163
|
+
color: colorContrast($value-props-background, $foreground, $background);
|
|
164
|
+
|
|
165
|
+
@if (lightness($value-props-background) > 45) {
|
|
166
|
+
&__icon {
|
|
167
|
+
filter: invert(1);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
145
171
|
}
|
|
146
172
|
|
|
147
173
|
.progress-bar {
|
|
148
174
|
&__background {
|
|
149
|
-
background-color: $color-
|
|
175
|
+
background-color: lighten($color-grey-700, 10%);
|
|
150
176
|
}
|
|
151
177
|
|
|
152
178
|
&__fill {
|
|
153
|
-
background-color: $
|
|
179
|
+
background-color: $base-color;
|
|
154
180
|
}
|
|
155
181
|
}
|
|
156
182
|
|
|
157
|
-
|
|
158
|
-
|
|
183
|
+
.information,
|
|
184
|
+
.expand-collapse__icon {
|
|
185
|
+
border-color: $color-grey-700;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.expand-collapse__icon {
|
|
189
|
+
color: $color-grey-500;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.expand-collapse__toggle {
|
|
193
|
+
color: $color-grey-500;
|
|
159
194
|
|
|
160
|
-
&:hover
|
|
161
|
-
|
|
195
|
+
&:hover {
|
|
196
|
+
&,
|
|
197
|
+
.expand-collapse__icon {
|
|
198
|
+
color: $color-grey-500;
|
|
199
|
+
}
|
|
162
200
|
}
|
|
163
201
|
}
|
|
164
202
|
|
|
@@ -166,7 +204,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
166
204
|
border: 0;
|
|
167
205
|
|
|
168
206
|
&--inverted {
|
|
169
|
-
box-shadow:
|
|
207
|
+
box-shadow: 0 2px 4px $box-shadow-color;
|
|
170
208
|
}
|
|
171
209
|
}
|
|
172
210
|
|
|
@@ -177,14 +215,14 @@ $contact-us-blue-light: #8498E7;
|
|
|
177
215
|
|
|
178
216
|
&:not(.has-error) {
|
|
179
217
|
.form-group__label-input {
|
|
180
|
-
color: $color-
|
|
218
|
+
color: $color-grey-500;
|
|
181
219
|
z-index: 1;
|
|
182
220
|
}
|
|
183
221
|
|
|
184
222
|
.form-input,
|
|
185
223
|
.form-input-group--icon,
|
|
186
224
|
.form-radio label {
|
|
187
|
-
border-color: $color-
|
|
225
|
+
border-color: $color-grey-500;
|
|
188
226
|
}
|
|
189
227
|
|
|
190
228
|
.form-input-group--icon,
|
|
@@ -207,15 +245,15 @@ $contact-us-blue-light: #8498E7;
|
|
|
207
245
|
|
|
208
246
|
&__tooltip-message {
|
|
209
247
|
color: $color-ivory6;
|
|
210
|
-
border-color: $color-
|
|
211
|
-
box-shadow: 0 4px 8px rgba($color-ivory6,
|
|
248
|
+
border-color: $color-grey-700;
|
|
249
|
+
box-shadow: 0 4px 8px rgba($color-ivory6, 10%);
|
|
212
250
|
|
|
213
251
|
&::after {
|
|
214
252
|
border-bottom-color: $background;
|
|
215
253
|
}
|
|
216
254
|
|
|
217
255
|
&::before {
|
|
218
|
-
border-bottom-color: $color-
|
|
256
|
+
border-bottom-color: $color-grey-700;
|
|
219
257
|
}
|
|
220
258
|
|
|
221
259
|
}
|
|
@@ -224,24 +262,25 @@ $contact-us-blue-light: #8498E7;
|
|
|
224
262
|
.has-error {
|
|
225
263
|
.form-input,
|
|
226
264
|
.form-input:-webkit-autofill {
|
|
227
|
-
border-color: $color-
|
|
228
|
-
color: $color-
|
|
265
|
+
border-color: $color-salmon-500;
|
|
266
|
+
color: $color-salmon-500;
|
|
229
267
|
}
|
|
230
268
|
|
|
231
269
|
.form-input-group__icon,
|
|
232
270
|
.form-group__label-input {
|
|
233
|
-
color: $color-
|
|
271
|
+
color: $color-salmon-500;
|
|
234
272
|
}
|
|
235
273
|
|
|
236
274
|
.form-input-group {
|
|
237
275
|
&--includes-label {
|
|
238
|
-
.form-input:focus
|
|
276
|
+
.form-input:focus,
|
|
277
|
+
.form-input:not(:placeholder-shown) {
|
|
239
278
|
~ .form-input-group__icon {
|
|
240
|
-
color: $color-
|
|
279
|
+
color: $color-salmon-500;
|
|
241
280
|
}
|
|
242
281
|
|
|
243
282
|
+ label {
|
|
244
|
-
color: $color-
|
|
283
|
+
color: $color-salmon-500;
|
|
245
284
|
}
|
|
246
285
|
}
|
|
247
286
|
}
|
|
@@ -249,7 +288,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
249
288
|
}
|
|
250
289
|
|
|
251
290
|
.form-group__error-message {
|
|
252
|
-
color: $color-
|
|
291
|
+
color: $color-salmon-500;
|
|
253
292
|
}
|
|
254
293
|
|
|
255
294
|
.hero__background-image {
|
|
@@ -264,9 +303,9 @@ $contact-us-blue-light: #8498E7;
|
|
|
264
303
|
@include btnStyles($color-btn, $color-btn-text);
|
|
265
304
|
|
|
266
305
|
.btn__spinner::after {
|
|
267
|
-
border: 4px solid
|
|
268
|
-
border-right-color:
|
|
269
|
-
border-top-color:
|
|
306
|
+
border: 4px solid $color-grey-200;
|
|
307
|
+
border-right-color: $background;
|
|
308
|
+
border-top-color: $background;
|
|
270
309
|
}
|
|
271
310
|
}
|
|
272
311
|
}
|
|
@@ -323,8 +362,8 @@ $contact-us-blue-light: #8498E7;
|
|
|
323
362
|
|
|
324
363
|
.reviews-card {
|
|
325
364
|
background-color: $background;
|
|
326
|
-
border-color: $color-
|
|
327
|
-
box-shadow: 0px 8px 16px 0px rgba($color-
|
|
365
|
+
border-color: $color-grey-700;
|
|
366
|
+
box-shadow: 0px 8px 16px 0px rgba($color-grey-500, 10%);
|
|
328
367
|
color: $text-color;
|
|
329
368
|
|
|
330
369
|
&__avatar img {
|
|
@@ -334,7 +373,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
334
373
|
|
|
335
374
|
.matched,
|
|
336
375
|
.unmatched {
|
|
337
|
-
border-color: $color-
|
|
376
|
+
border-color: $color-grey-700;
|
|
338
377
|
}
|
|
339
378
|
|
|
340
379
|
.footer {
|
|
@@ -357,7 +396,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
357
396
|
&:active,
|
|
358
397
|
&:hover,
|
|
359
398
|
&:focus {
|
|
360
|
-
color: $color-
|
|
399
|
+
color: $color-grey-500 !important;
|
|
361
400
|
}
|
|
362
401
|
}
|
|
363
402
|
|
|
@@ -402,7 +441,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
402
441
|
}
|
|
403
442
|
|
|
404
443
|
.field {
|
|
405
|
-
border-color: $color-
|
|
444
|
+
border-color: $color-grey-500;
|
|
406
445
|
|
|
407
446
|
input:checked {
|
|
408
447
|
+ label {
|
|
@@ -414,17 +453,17 @@ $contact-us-blue-light: #8498E7;
|
|
|
414
453
|
}
|
|
415
454
|
|
|
416
455
|
&:hover {
|
|
417
|
-
background-color: rgba($color-
|
|
456
|
+
background-color: rgba($color-grey-200, .2);
|
|
418
457
|
border-color: $text-color;
|
|
419
458
|
}
|
|
420
459
|
|
|
421
460
|
&:focus-within {
|
|
422
|
-
outline-color: $color-
|
|
461
|
+
outline-color: $color-grey-200;
|
|
423
462
|
}
|
|
424
463
|
}
|
|
425
464
|
|
|
426
465
|
.form-control {
|
|
427
|
-
border-color: $color-
|
|
466
|
+
border-color: $color-grey-500;
|
|
428
467
|
|
|
429
468
|
&:hover,
|
|
430
469
|
&:focus {
|
|
@@ -432,7 +471,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
432
471
|
}
|
|
433
472
|
|
|
434
473
|
&:focus {
|
|
435
|
-
background-color: rgba($color-
|
|
474
|
+
background-color: rgba($color-grey-200, .2);
|
|
436
475
|
}
|
|
437
476
|
}
|
|
438
477
|
|
|
@@ -460,6 +499,27 @@ $contact-us-blue-light: #8498E7;
|
|
|
460
499
|
}
|
|
461
500
|
}
|
|
462
501
|
|
|
502
|
+
.loader {
|
|
503
|
+
image {
|
|
504
|
+
filter: invert(1) hue-rotate(180deg) brightness(2);
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
#Circle {
|
|
508
|
+
filter: invert(1);
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
#Left-Arrow,
|
|
512
|
+
#Right-Arrow {
|
|
513
|
+
path {
|
|
514
|
+
fill: $color-lavender-500;
|
|
515
|
+
|
|
516
|
+
&:not(:first-of-type) {
|
|
517
|
+
stroke: $color-lavender-500;
|
|
518
|
+
}
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
|
|
463
523
|
/* Need to overwrite inline styles of double submission block */
|
|
464
524
|
.duplicate-submission {
|
|
465
525
|
background-color: $background-color !important;
|
|
@@ -478,7 +538,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
478
538
|
}
|
|
479
539
|
|
|
480
540
|
.header__back-button {
|
|
481
|
-
border-right-color: $color-
|
|
541
|
+
border-right-color: $color-grey-500;
|
|
482
542
|
}
|
|
483
543
|
|
|
484
544
|
.back-btn,
|
|
@@ -486,34 +546,26 @@ $contact-us-blue-light: #8498E7;
|
|
|
486
546
|
.zip-control__location,
|
|
487
547
|
.zip-control__icon {
|
|
488
548
|
color: $interactive-text-color;
|
|
489
|
-
|
|
490
|
-
&:hover {
|
|
491
|
-
color: $interactive-text-color-hover;
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
&:focus {
|
|
495
|
-
outline-color: $color-charcoal2;
|
|
496
|
-
}
|
|
497
549
|
}
|
|
498
550
|
|
|
551
|
+
.back-btn,
|
|
552
|
+
.btn--back,
|
|
499
553
|
.zip-control__button {
|
|
500
554
|
&:hover,
|
|
501
555
|
&:focus {
|
|
556
|
+
background-color: rgba($color-grey-500, 10%);
|
|
557
|
+
outline-color: $color-grey-500;
|
|
558
|
+
|
|
502
559
|
.zip-control__location,
|
|
503
560
|
.zip-control__icon {
|
|
504
561
|
color: $interactive-text-color-hover;
|
|
505
562
|
}
|
|
506
563
|
}
|
|
507
|
-
|
|
508
|
-
&:focus {
|
|
509
|
-
background-color: rgba($color-charcoal2, 9%);
|
|
510
|
-
outline-color: $color-charcoal2;
|
|
511
|
-
}
|
|
512
564
|
}
|
|
513
565
|
|
|
514
566
|
&.form-in-progress {
|
|
515
567
|
.hero {
|
|
516
|
-
border-color: $color-
|
|
568
|
+
border-color: $color-grey-700;
|
|
517
569
|
}
|
|
518
570
|
}
|
|
519
571
|
|
|
@@ -526,7 +578,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
526
578
|
.form-input:not(:placeholder-shown),
|
|
527
579
|
.form-input:focus {
|
|
528
580
|
+ label {
|
|
529
|
-
color: $color-
|
|
581
|
+
color: $color-grey-200;
|
|
530
582
|
}
|
|
531
583
|
}
|
|
532
584
|
}
|