fix(Label): Darken inactive label color

heydoctor · Sep 18, 2019 · d5a52ac · d5a52ac
1 parent 333abae
commit d5a52ac
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/Form/Label.js b/src/Form/Label.js
@@ -17,9 +17,10 @@ const Label = createComponent({
         line-height: 14px;
         left: 9px;
         font-size: ${isFloating ? 12 : 16}px;
+        font-weight: 400;
         top: ${isFloating ? '6px' : '50%'};
         transform: ${isFloating ? 'none' : 'translateY(-50%)'};
-        color: ${theme.colors.greyDarker};
+        color: ${theme.colors.greyDarkest};
         user-select: none;
 
         &:hover {

diff --git a/src/Form/Select.js b/src/Form/Select.js
@@ -12,7 +12,7 @@ import { createComponent } from '../utils';
 const SelectContainer = createComponent({
   name: 'SelectContainer',
   as: Flex,
-  style: ({ theme, value }) => css`
+  style: ({ theme }) => css`
     background: white;
     border: 1px solid ${theme.colors.greyLight};
     height: 48px;
@@ -25,10 +25,6 @@ const SelectContainer = createComponent({
     font-family: inherit;
     font-size: ${theme.typography.fontSize}px;
     vertical-align: middle;
-
-    select {
-      color: ${value ? theme.typography.color : theme.colors.greyDarker};
-    }
   `,
 });
 
@@ -43,14 +39,16 @@ const IconContainer = styled(Flex)`
 const SelectInput = createComponent({
   name: 'Select',
   tag: 'select',
-  style: ({ theme, isFloating }) => css`
+  style: ({ theme, value, isFloating }) => css`
     position: relative;
     z-index: 2;
     padding: 0 8px;
     outline: none;
     width: 100%;
     font-size: ${theme.typography.fontSize}px;
+    font-family: inherit;
     background: transparent;
+    color: ${value ? theme.typography.color : theme.colors.greyDarkest};
     border: none;
     -webkit-appearance: none;