use proper text contrast for input labels

Materialize has _weird_ defaults Closes #79
derf · Aug 6, 2023 · 3456350 · 3456350
1 parent f43082f
commit 3456350
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 3 deletions.
diff --git a/sass/components/_variables.scss b/sass/components/_variables.scss
@@ -165,6 +165,7 @@ $dropdown-item-height: 50px !default;
 // Text Inputs + Textarea
 $input-height: 3rem !default;
 $input-border-color: color("grey", "base") !default;
+$input-label-color: color("grey", "base") !default;
 $input-border: 1px solid $input-border-color !default;
 $input-background: #fff !default;
 $input-error-color: $error-color !default;

diff --git a/sass/components/forms/_forms.scss b/sass/components/forms/_forms.scss
@@ -10,7 +10,7 @@ button:focus {
 
 label {
   font-size: $label-font-size;
-  color: $input-border-color;
+  color: $input-label-color;
 }
 
 @import 'input-fields';

diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss
@@ -176,7 +176,7 @@ textarea.materialize-textarea {
   margin-bottom: 1rem;
 
   & > label {
-    color: $input-border-color;
+    color: $input-label-color;
     position: absolute;
     top: 0;
     left: 0;

diff --git a/sass/src/dark/_variables.scss b/sass/src/dark/_variables.scss
@@ -11,7 +11,7 @@ $secondary-color: color('cyan', 'darken-2');
 $link-color: color('light-blue', 'darken-1');
 $success-color: color('green', 'darken-2');
 $error-color: color('red', 'darken-2');
-$input-border-color: $off-black;
+$input-label-color: $off-black;
 $collection-border-color: color('grey', 'darken-3');
 $collection-link-color: color('shades', 'white');
 $collection-hover-bg-color: color('grey', 'darken-4');

diff --git a/sass/src/light/_variables.scss b/sass/src/light/_variables.scss
@@ -5,3 +5,4 @@ $card-link-color: $link-color;
 $collection-link-color: color('shades', 'black');
 $card-bg-color: color('blue-grey', 'lighten-5');
 $inactive-color: color('grey', 'darken-2');
+$input-label-color: color('shades', 'black');