mod-base 1.0.70 → 1.0.72-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 CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.0.72
4
+
5
+ - Adding dark mode support for the input component when the input is active or focused.
6
+
3
7
  ## 1.0.70
4
8
 
5
9
  - Adding support for custom background color and fill on progress bars in dark mode.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mod-base",
3
- "version": "1.0.70",
3
+ "version": "1.0.72-beta.1",
4
4
  "description": "Base Styles for S3 Sites",
5
5
  "author": "",
6
6
  "license": "ISC"
@@ -58,6 +58,7 @@ $contact-us-blue-light: #8498E7;
58
58
  $checkbox-label-color: null,
59
59
  $footer-background: $color-charcoal9,
60
60
  $foreground: $color-grey-300,
61
+ $form-input-border-color: $color-grey-400,
61
62
  $form-focus-border-color: $color-grey-400,
62
63
  $hero-content-box-shadow-mobile: null,
63
64
  $interactive-text-color: $color-grey-500,
@@ -454,8 +455,24 @@ $contact-us-blue-light: #8498E7;
454
455
  .form-input-group--icon,
455
456
  .form-input {
456
457
  &:-webkit-autofill,
457
- &:not(:placeholder-shown),
458
- &:focus {
458
+ &:not(:placeholder-shown){
459
+ border-color: $form-input-border-color;
460
+
461
+ + label {
462
+ color: $form-input-border-color;
463
+ }
464
+
465
+ ~ .form-input-group__icon {
466
+ color: $form-input-border-color;
467
+
468
+ svg {
469
+ fill: $form-input-border-color;
470
+ }
471
+ }
472
+ }
473
+
474
+ &:focus,
475
+ &:valid {
459
476
  border-color: $form-focus-border-color;
460
477
 
461
478
  + label {