Color palette and placeholder text color updates (#434)

* updated color palette values * adjust placeholder text color * adjusted input disabled color
Kajabi · Oct 1, 2020 · b47a9af · b47a9af
1 parent f5a12cd
commit b47a9af
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/lib/sage-frontend/stylesheets/system/patterns/elements/_form_input.scss b/lib/sage-frontend/stylesheets/system/patterns/elements/_form_input.scss
@@ -87,7 +87,7 @@
   transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 
   @include placeholder {
-    color: inherit;
+    color: sage-color(charcoal, 100);
   }
 
   &:hover:not(:disabled) {
@@ -139,6 +139,9 @@
     color: $sage-inputfield-color-disabled;
     background-color: $sage-inputfield-bg-disabled;
     cursor: not-allowed;
+    @include placeholder {
+      color: sage-color(grey, 400);
+    }
   }
 }
 

diff --git a/lib/sage-frontend/stylesheets/system/patterns/elements/_form_textarea.scss b/lib/sage-frontend/stylesheets/system/patterns/elements/_form_textarea.scss
@@ -61,7 +61,7 @@
   transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 
   @include placeholder {
-    color: inherit;
+    color: sage-color(charcoal, 100);
   }
 
   &:hover:not(:active):not(:focus),

diff --git a/lib/sage-frontend/stylesheets/system/tokens/_color_palette.scss b/lib/sage-frontend/stylesheets/system/tokens/_color_palette.scss
@@ -22,8 +22,8 @@ $sage-colors: (
     100: #fcf8e8,
     200: #fdf0b9,
     300: #f0c024,
-    400: #946a00,
-    500: #472d00,
+    400: #8d5c2f,
+    500: #5c381e,
   ),
   red: (
     100: #fcf3f3,
@@ -54,8 +54,8 @@ $sage-colors: (
     500: #94a6b8,
   ),
   charcoal: (
-    100: #8c9bab,
-    200: #556577,
+    100: #65778b,
+    200: #526275,
     300: #465462,
     400: #304050,
     500: #263240,