mod-base 1.0.23-beta.5 → 1.0.23
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 +25 -22
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.23
|
|
4
|
+
|
|
5
|
+
- Adding customization to cover all radio button different HTML structures, value props to have gradients as background, input fields active/focus states, back and edit zip code button colors, box shadow for mobile forms, bbb logo filters
|
|
6
|
+
|
|
3
7
|
## 1.0.20
|
|
4
8
|
|
|
5
9
|
- Adding stroke icons for vanity, tree services, basement, foundation
|
package/package.json
CHANGED
|
@@ -39,44 +39,44 @@ $contact-us-blue-light: #8498E7;
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
@mixin dark-mode(
|
|
42
|
-
$background: $color-charcoal7,
|
|
43
|
-
$foreground: $color-white,
|
|
44
42
|
$accent-color: null,
|
|
45
|
-
$color-
|
|
43
|
+
$background: $color-charcoal7,
|
|
46
44
|
$base-color: null,
|
|
45
|
+
$bbb-img-filter: grayscale(1) invert(.9) brightness(2),
|
|
46
|
+
$color-btn: null,
|
|
47
47
|
$color-btn-text: null,
|
|
48
|
+
$footer-background: $color-charcoal8,
|
|
49
|
+
$foreground: $color-white,
|
|
50
|
+
$form-focus-border-color: $color-charcoal1,
|
|
51
|
+
$hero-content-box-shadow-mobile: null,
|
|
48
52
|
$interactive-text-color: $color-charcoal2,
|
|
49
53
|
$interactive-text-color-hover: darken($interactive-text-color, 10%),
|
|
50
|
-
$bbb-img-filter: grayscale(1) invert(.9) brightness(2),
|
|
51
54
|
$logo-filter: invert(1) hue-rotate(180deg),
|
|
52
|
-
$hero-content-box-shadow-mobile: null,
|
|
53
|
-
$value-props-background: null,
|
|
54
55
|
$radio-btn-background-color: $background,
|
|
55
|
-
$radio-btn-text-color: $color-white,
|
|
56
|
-
$radio-btn-icon-color: $color-white,
|
|
57
56
|
$radio-btn-border-color: $color-white,
|
|
58
|
-
$radio-btn-icon-background: transparent,
|
|
59
57
|
$radio-btn-checked-background-color: null,
|
|
60
58
|
$radio-btn-checked-border-color: null,
|
|
61
|
-
$radio-btn-checked-icon-color: $color-white,
|
|
62
59
|
$radio-btn-checked-icon-background-color: null,
|
|
60
|
+
$radio-btn-checked-icon-color: $color-white,
|
|
63
61
|
$radio-btn-checked-text-color: $color-white,
|
|
64
|
-
$form-focus-border-color: $color-charcoal1,
|
|
65
62
|
$radio-btn-focus-box-shadow: null,
|
|
66
|
-
$
|
|
63
|
+
$radio-btn-icon-background: transparent,
|
|
64
|
+
$radio-btn-icon-color: $background,
|
|
65
|
+
$radio-btn-text-color: $color-white,
|
|
66
|
+
$value-props-background: null
|
|
67
67
|
) {
|
|
68
68
|
// Theme global variables if required to use after including the mixin
|
|
69
69
|
$background-color: $background !global;
|
|
70
|
-
$
|
|
71
|
-
$theme: $accent-color !global;
|
|
70
|
+
$background-img-brightness: brightness(75%) !global;
|
|
72
71
|
$base-color: $base-color !global;
|
|
73
|
-
$
|
|
72
|
+
$bbb-img-filter: $bbb-img-filter;
|
|
74
73
|
$box-shadow-color: rgba($color-black, 60%) !global;
|
|
75
|
-
$background-img-brightness: brightness(85%) !global;
|
|
76
|
-
$img-filter: invert(1) hue-rotate(180deg) !global;
|
|
77
74
|
$button-saturation: saturate(70%) !global;
|
|
78
|
-
$bbb-img-filter: $bbb-img-filter;
|
|
79
75
|
$color-button: $color-btn !global;
|
|
76
|
+
$img-filter: invert(1) hue-rotate(180deg) !global;
|
|
77
|
+
$theme: $accent-color !global;
|
|
78
|
+
$text-color: $foreground !global;
|
|
79
|
+
$value-props-background: $value-props-background;
|
|
80
80
|
|
|
81
81
|
@if ($color-btn != null and $color-btn-text == null) {
|
|
82
82
|
$color-btn-text: btnColorContrast($color-btn, $foreground, $background);
|
|
@@ -84,7 +84,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
84
84
|
|
|
85
85
|
// Most common selectors list
|
|
86
86
|
$content-selectors: 'input,.toggle-wrapper,.step__header-title,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,legend,[class^="loader__"], table tr';
|
|
87
|
-
$background-selectors: '.form,.header,.partners,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input
|
|
87
|
+
$background-selectors: '.form,.header,.partners,.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
88
|
|
|
89
89
|
@media (prefers-color-scheme: dark){
|
|
90
90
|
body[data-color-scheme='system'] {
|
|
@@ -112,6 +112,10 @@ $contact-us-blue-light: #8498E7;
|
|
|
112
112
|
filter: $logo-filter;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
+
.form-input-group__icon {
|
|
116
|
+
background-color: transparent;
|
|
117
|
+
}
|
|
118
|
+
|
|
115
119
|
.icon-close,
|
|
116
120
|
.progress-bar__title,
|
|
117
121
|
.header__back-button,
|
|
@@ -260,7 +264,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
260
264
|
@include btnStyles($color-btn, $color-btn-text);
|
|
261
265
|
|
|
262
266
|
.btn__spinner::after {
|
|
263
|
-
border: 4px solid darken($color-btn,
|
|
267
|
+
border: 4px solid darken($color-btn, 5%);
|
|
264
268
|
border-right-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
|
|
265
269
|
border-top-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
|
|
266
270
|
}
|
|
@@ -345,8 +349,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
345
349
|
|
|
346
350
|
&__links li a,
|
|
347
351
|
&__head-link a {
|
|
348
|
-
|
|
349
|
-
|
|
352
|
+
&,
|
|
350
353
|
&:visited {
|
|
351
354
|
color: $text-color !important;
|
|
352
355
|
}
|