mod-base 1.0.23-beta.1 → 1.0.23-beta.3

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles/templates/_dark-mode.scss +24 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mod-base",
3
- "version": "1.0.23-beta.1",
3
+ "version": "1.0.23-beta.3",
4
4
  "description": "Base Styles for S3 Sites",
5
5
  "author": "",
6
6
  "license": "ISC"
package/src/styles/templates/_dark-mode.scss CHANGED
@@ -10,9 +10,9 @@ $color-button: null;
10
10
 
11
11
  $contact-us-blue-light: #8498E7;
12
12
 
13
- @function contrastText($base-color, $light-color, $dark-color) {
13
+ @function btnColorContrast($base-color, $light-color, $dark-color) {
14
14
  $result: $light-color;
15
- @if (lightness($base-color) > 50) {
15
+ @if (lightness($base-color) > 45) {
16
16
  $result: $dark-color;
17
17
  }
18
18
  @return $result;
@@ -43,7 +43,8 @@ $contact-us-blue-light: #8498E7;
43
43
  $foreground: $color-white,
44
44
  $accent-color: null,
45
45
  $color-btn: null,
46
- $color-btn-text: contrastText($color-btn, $foreground, $background),
46
+ $base-color: null,
47
+ $color-btn-text: null,
47
48
  $interactive-text-color: $color-charcoal2,
48
49
  $interactive-text-color-hover: darken($interactive-text-color, 10%),
49
50
  $bbb-img-filter: grayscale(1) invert(.9) brightness(2),
@@ -52,6 +53,7 @@ $contact-us-blue-light: #8498E7;
52
53
  $radio-btn-background-color: $background,
53
54
  $radio-btn-text-color: $color-white,
54
55
  $radio-btn-icon-color: $color-white,
56
+ $radio-btn-border-color: null,
55
57
  $radio-btn-icon-background: transparent,
56
58
  $radio-btn-checked-background-color: null,
57
59
  $radio-btn-checked-border-color: null,
@@ -66,6 +68,7 @@ $contact-us-blue-light: #8498E7;
66
68
  $background-color: $background !global;
67
69
  $text-color: $foreground !global;
68
70
  $theme: $accent-color !global;
71
+ $base-color: $base-color !global;
69
72
  $value-props-background: $value-props-background;
70
73
  $box-shadow-color: rgba($color-black, 60%) !global;
71
74
  $background-img-brightness: brightness(85%) !global;
@@ -74,9 +77,13 @@ $contact-us-blue-light: #8498E7;
74
77
  $bbb-img-filter: $bbb-img-filter;
75
78
  $color-button: $color-btn !global;
76
79
 
80
+ @if ($color-btn != null and $color-btn-text == null) {
81
+ $color-btn-text: btnColorContrast($color-btn, $foreground, $background);
82
+ }
83
+
77
84
  // Most common selectors list
78
85
  $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';
79
- $background-selectors: '.form,.header,.partners,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input-group__icon,.form-input:focus,.expand-collapse__icon,.featured-block,table tr';
86
+ $background-selectors: '.hero--full,.form,.header,.partners,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input-group__icon,.form-input:focus,.expand-collapse__icon,.featured-block,table tr';
80
87
 
81
88
  @media (prefers-color-scheme: dark){
82
89
  body[data-color-scheme='system'] {
@@ -125,7 +132,7 @@ $contact-us-blue-light: #8498E7;
125
132
 
126
133
  .step__header,
127
134
  .step__supertitle {
128
- background-color: $theme;
135
+ background-color: $base-color;
129
136
  }
130
137
 
131
138
  .value-props {
@@ -238,16 +245,18 @@ $contact-us-blue-light: #8498E7;
238
245
  filter: $background-img-brightness;
239
246
  }
240
247
 
241
- .btn--primary,
242
- .btn-primary,
243
- .btn-next,
244
- .featured-block__btn {
245
- @include btnStyles($color-btn, $color-btn-text);
248
+ @if $color-btn != null {
249
+ .btn--primary,
250
+ .btn-primary,
251
+ .btn-next,
252
+ .featured-block__btn {
253
+ @include btnStyles($color-btn, $color-btn-text);
246
254
 
247
- .btn__spinner::after {
248
- border: 4px solid darken($color-btn, 20%);
249
- border-right-color: contrastText($color-btn, $color-white, $color-charcoal7);
250
- border-top-color: contrastText($color-btn, $color-white, $color-charcoal7);
255
+ .btn__spinner::after {
256
+ border: 4px solid darken($color-btn, 20%);
257
+ border-right-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
258
+ border-top-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
259
+ }
251
260
  }
252
261
  }
253
262
 
@@ -543,7 +552,7 @@ $contact-us-blue-light: #8498E7;
543
552
 
544
553
  &::before {
545
554
  background-color: $background;
546
- border-color: $radio-btn-text-color;
555
+ border-color: $radio-btn-border-color;
547
556
  }
548
557
 
549
558
  // Icon