mod-base 1.0.25 → 1.0.26
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 +4 -0
- package/package.json +1 -1
- package/src/styles/templates/_dark-mode.scss +101 -71
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
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
|
+
|
|
3
7
|
## 1.0.25
|
|
4
8
|
|
|
5
9
|
- Adding styles for transfer overlay and missed input field icon error state
|
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,13 +262,13 @@ $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 {
|
|
@@ -238,11 +276,11 @@ $contact-us-blue-light: #8498E7;
|
|
|
238
276
|
.form-input:focus,
|
|
239
277
|
.form-input:not(:placeholder-shown) {
|
|
240
278
|
~ .form-input-group__icon {
|
|
241
|
-
color: $color-
|
|
279
|
+
color: $color-salmon-500;
|
|
242
280
|
}
|
|
243
281
|
|
|
244
282
|
+ label {
|
|
245
|
-
color: $color-
|
|
283
|
+
color: $color-salmon-500;
|
|
246
284
|
}
|
|
247
285
|
}
|
|
248
286
|
}
|
|
@@ -250,7 +288,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
250
288
|
}
|
|
251
289
|
|
|
252
290
|
.form-group__error-message {
|
|
253
|
-
color: $color-
|
|
291
|
+
color: $color-salmon-500;
|
|
254
292
|
}
|
|
255
293
|
|
|
256
294
|
.hero__background-image {
|
|
@@ -265,9 +303,9 @@ $contact-us-blue-light: #8498E7;
|
|
|
265
303
|
@include btnStyles($color-btn, $color-btn-text);
|
|
266
304
|
|
|
267
305
|
.btn__spinner::after {
|
|
268
|
-
border: 4px solid
|
|
269
|
-
border-right-color:
|
|
270
|
-
border-top-color:
|
|
306
|
+
border: 4px solid $color-grey-200;
|
|
307
|
+
border-right-color: $background;
|
|
308
|
+
border-top-color: $background;
|
|
271
309
|
}
|
|
272
310
|
}
|
|
273
311
|
}
|
|
@@ -324,8 +362,8 @@ $contact-us-blue-light: #8498E7;
|
|
|
324
362
|
|
|
325
363
|
.reviews-card {
|
|
326
364
|
background-color: $background;
|
|
327
|
-
border-color: $color-
|
|
328
|
-
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%);
|
|
329
367
|
color: $text-color;
|
|
330
368
|
|
|
331
369
|
&__avatar img {
|
|
@@ -335,7 +373,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
335
373
|
|
|
336
374
|
.matched,
|
|
337
375
|
.unmatched {
|
|
338
|
-
border-color: $color-
|
|
376
|
+
border-color: $color-grey-700;
|
|
339
377
|
}
|
|
340
378
|
|
|
341
379
|
.footer {
|
|
@@ -358,7 +396,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
358
396
|
&:active,
|
|
359
397
|
&:hover,
|
|
360
398
|
&:focus {
|
|
361
|
-
color: $color-
|
|
399
|
+
color: $color-grey-500 !important;
|
|
362
400
|
}
|
|
363
401
|
}
|
|
364
402
|
|
|
@@ -403,7 +441,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
403
441
|
}
|
|
404
442
|
|
|
405
443
|
.field {
|
|
406
|
-
border-color: $color-
|
|
444
|
+
border-color: $color-grey-500;
|
|
407
445
|
|
|
408
446
|
input:checked {
|
|
409
447
|
+ label {
|
|
@@ -415,17 +453,17 @@ $contact-us-blue-light: #8498E7;
|
|
|
415
453
|
}
|
|
416
454
|
|
|
417
455
|
&:hover {
|
|
418
|
-
background-color: rgba($color-
|
|
456
|
+
background-color: rgba($color-grey-200, .2);
|
|
419
457
|
border-color: $text-color;
|
|
420
458
|
}
|
|
421
459
|
|
|
422
460
|
&:focus-within {
|
|
423
|
-
outline-color: $color-
|
|
461
|
+
outline-color: $color-grey-200;
|
|
424
462
|
}
|
|
425
463
|
}
|
|
426
464
|
|
|
427
465
|
.form-control {
|
|
428
|
-
border-color: $color-
|
|
466
|
+
border-color: $color-grey-500;
|
|
429
467
|
|
|
430
468
|
&:hover,
|
|
431
469
|
&:focus {
|
|
@@ -433,7 +471,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
433
471
|
}
|
|
434
472
|
|
|
435
473
|
&:focus {
|
|
436
|
-
background-color: rgba($color-
|
|
474
|
+
background-color: rgba($color-grey-200, .2);
|
|
437
475
|
}
|
|
438
476
|
}
|
|
439
477
|
|
|
@@ -500,7 +538,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
500
538
|
}
|
|
501
539
|
|
|
502
540
|
.header__back-button {
|
|
503
|
-
border-right-color: $color-
|
|
541
|
+
border-right-color: $color-grey-500;
|
|
504
542
|
}
|
|
505
543
|
|
|
506
544
|
.back-btn,
|
|
@@ -508,34 +546,26 @@ $contact-us-blue-light: #8498E7;
|
|
|
508
546
|
.zip-control__location,
|
|
509
547
|
.zip-control__icon {
|
|
510
548
|
color: $interactive-text-color;
|
|
511
|
-
|
|
512
|
-
&:hover {
|
|
513
|
-
color: $interactive-text-color-hover;
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
&:focus {
|
|
517
|
-
outline-color: $color-charcoal2;
|
|
518
|
-
}
|
|
519
549
|
}
|
|
520
550
|
|
|
551
|
+
.back-btn,
|
|
552
|
+
.btn--back,
|
|
521
553
|
.zip-control__button {
|
|
522
554
|
&:hover,
|
|
523
555
|
&:focus {
|
|
556
|
+
background-color: rgba($color-grey-500, 10%);
|
|
557
|
+
outline-color: $color-grey-500;
|
|
558
|
+
|
|
524
559
|
.zip-control__location,
|
|
525
560
|
.zip-control__icon {
|
|
526
561
|
color: $interactive-text-color-hover;
|
|
527
562
|
}
|
|
528
563
|
}
|
|
529
|
-
|
|
530
|
-
&:focus {
|
|
531
|
-
background-color: rgba($color-charcoal2, 9%);
|
|
532
|
-
outline-color: $color-charcoal2;
|
|
533
|
-
}
|
|
534
564
|
}
|
|
535
565
|
|
|
536
566
|
&.form-in-progress {
|
|
537
567
|
.hero {
|
|
538
|
-
border-color: $color-
|
|
568
|
+
border-color: $color-grey-700;
|
|
539
569
|
}
|
|
540
570
|
}
|
|
541
571
|
|
|
@@ -548,7 +578,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
548
578
|
.form-input:not(:placeholder-shown),
|
|
549
579
|
.form-input:focus {
|
|
550
580
|
+ label {
|
|
551
|
-
color: $color-
|
|
581
|
+
color: $color-grey-200;
|
|
552
582
|
}
|
|
553
583
|
}
|
|
554
584
|
}
|