feat: make text in the disabled input gray

src/components/Form/FormSectionTitle.js

@@ -14,6 +14,7 @@ const name = 'formSectionTitle';
 const [FormSectionTitleTag, theme] = createThemeTag(name, ({ FONTS }: *) => ({
   root: {
     ...FONTS.H5,
+    letterSpacing: '0.5px',
   },
   modifiers: {},
   defaults: {},

src/components/Input/Input.stories.js

@@ -104,3 +104,9 @@ export const withKindUnderline = () => (
 withKindUnderline.story = {
   name: 'with kind="underline"',
 };
+
+export const disabledStory = () => <Input value="hello@8base.com" name="input" onChange={ () => null } disabled />;
+
+disabledStory.story = {
+  name: 'with disabled=true',
+};

src/components/Input/Input.theme.js

@@ -9,7 +9,8 @@ const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES, FONTS }: *
   root: props => ({
     width: props.width ? `${props.width}rem` : props.stretch ? '100%' : SIZES.FIELD_WIDTH,
     outline: 'none',
-    paddingLeft: props.hasLeftIcon ? '36px' : '8px',
+    paddingTop: '1px',
+    paddingLeft: props.hasLeftIcon ? '36px' : '15px',
     paddingRight: props.hasRightIcon || (props.type === 'number' && !props.hideNumberArrows) ? '48px' : '16px',
 
     backgroundColor: (props.disabled || props.readOnly)
@@ -38,6 +39,7 @@ const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES, FONTS }: *
     },
 
     ...FONTS.BODY_1,
+    color: props.disabled ? COLORS.LIGHT_TEXT_COLOR : COLORS.PRIMARY_TEXT_COLOR,
     height: '36px',
     transition: 'all .15s ease-in-out',
 

src/components/InputField/InputField.stories.js

@@ -97,6 +97,11 @@ export const common = () => (
           mask="999-999"
           stretch={ false }
         />
+        <InputField
+          label="Email"
+          disabled
+          input={{ name: 'input', value: 'hello@8base.com', onChange }}
+        />
       </Column>
     </Grid.Box>
     <Grid.Box>