From b6d7424042678a9eede5dd11e3adf43e203cfbab Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Thu, 30 Dec 2021 02:00:23 +0300
Subject: [PATCH 1/4] fix(core-theming): CB-1458 form controls styles cleanup

---
 .../src/shared/InlineEditor/styles.ts         | 14 ++---
 .../core-blocks/src/FormControls/Combobox.tsx |  1 -
 .../src/FormControls/InputField.tsx           |  1 -
 .../core-blocks/src/FormControls/Textarea.tsx |  3 +-
 .../core-blocks/src/ItemList/styles.ts        |  3 +-
 .../ErrorDetailsDialog/ErrorDetailsDialog.tsx |  6 +--
 .../ErrorDetailsDialog/styles.ts              |  4 +-
 .../src/styles/_form-controls.scss            | 54 ++++---------------
 .../core-theming/src/styles/_theme-dark.scss  | 17 +++---
 .../core-theming/src/styles/_theme-light.scss |  3 ++
 .../core-theming/src/styles/_variables.scss   |  3 ++
 11 files changed, 38 insertions(+), 71 deletions(-)

diff --git a/webapp/packages/core-app/src/shared/InlineEditor/styles.ts b/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
index 7d188606dc..615dd658ef 100644
--- a/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
+++ b/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
@@ -46,19 +46,15 @@ export const InlineEditorStyles = composes(
     position: relative;
     height: 100%;
     flex: 1;
+    display: flex;
 
-    & input {
-      color: inherit;
-      background: inherit;
-      letter-spacing: inherit;
-      outline: none;
+    & input, & input[disabled], & input[readonly] {
       border: none;
-      padding-left: 8px;
-      padding-right: 8px;
-      padding-top: 1px; /* because of -1px top */
-      line-height: 24px;
+      border-radius: unset;
       width: 100%;
       height: 100%;
+      min-height: unset;
+      padding: 0 8px;
     }
   }
   
diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
index 429eb00c22..2fa053745b 100644
--- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
@@ -332,7 +332,6 @@ export const Combobox: ComboboxType = observer(function Combobox({
         )}
         <input
           ref={setInputRef}
-          role='new'
           autoComplete="off"
           name={name}
           title={title}
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
index eeda9371d0..42187d9e63 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -165,7 +165,6 @@ export const InputField: InputFieldType = observer(function InputField({
       <input-container>
         <input
           ref={ref}
-          role='new'
           {...rest}
           type={passwordRevealed ? 'text' : rest.type}
           name={name}
diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
index 7a58070bf8..98be7cace6 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -82,7 +82,7 @@ export const Textarea: TextareaType = observer(function Textarea({
   large,
   mod,
   embedded,
-  onChange = () => {},
+  onChange = () => { },
   ...rest
 }: ControlledProps | ObjectProps<any, any>) {
   const context = useContext(FormContext);
@@ -106,7 +106,6 @@ export const Textarea: TextareaType = observer(function Textarea({
       <field-label as='label' title={rest.title}>{children}</field-label>
       <textarea
         {...rest}
-        role='new'
         value={value ?? ''}
         name={name}
         data-embedded={embedded}
diff --git a/webapp/packages/core-blocks/src/ItemList/styles.ts b/webapp/packages/core-blocks/src/ItemList/styles.ts
index 6cd7f0c688..ce2da32f9b 100644
--- a/webapp/packages/core-blocks/src/ItemList/styles.ts
+++ b/webapp/packages/core-blocks/src/ItemList/styles.ts
@@ -67,7 +67,6 @@ export const ITEM_LIST_STYLES = composes(
       }
 
       & input {
-        padding: 4px 8px;
         padding-right: 32px;
       }
 
@@ -77,7 +76,7 @@ export const ITEM_LIST_STYLES = composes(
         align-items: center;
         height: 100%;
         top: 0;
-        right: 2.5px;
+        right: 4px;
 
         & ListSearchButton {
           position: relative;
diff --git a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
index 9b36028543..9e1cc543dd 100644
--- a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
+++ b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useMemo } from 'react';
 import styled from 'reshadow';
 
-import { useClipboard, Button, Iframe } from '@cloudbeaver/core-blocks';
+import { useClipboard, Button, Iframe, Textarea } from '@cloudbeaver/core-blocks';
 import { CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
@@ -18,7 +18,7 @@ import { useStyles } from '@cloudbeaver/core-theming';
 import { ErrorModel, IErrorInfo } from './ErrorModel';
 import { dialogStyle, styles } from './styles';
 
-function DisplayErrorInfo({ error }: {error: IErrorInfo}) {
+function DisplayErrorInfo({ error }: { error: IErrorInfo }) {
   return styled(useStyles(styles))(
     <>
       <property>
@@ -28,7 +28,7 @@ function DisplayErrorInfo({ error }: {error: IErrorInfo}) {
       </property>
       {error.stackTrace && (
         <property>
-          <textarea readOnly>{error.stackTrace}</textarea>
+          <Textarea value={error.stackTrace} style={styles} readOnly embedded />
         </property>
       )}
     </>
diff --git a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/styles.ts b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/styles.ts
index dcec39a665..2e97825a58 100644
--- a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/styles.ts
+++ b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/styles.ts
@@ -22,9 +22,7 @@ export const styles = css`
     white-space: pre-wrap;
   }
   textarea {
-    width: 100%;
-    min-height: 270px;
-    resize: vertical;
+    min-height: 270px !important;
   }
   message {
     overflow: auto;
diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss
index 60e4e7f21f..dcfcf4ebac 100644
--- a/webapp/packages/core-theming/src/styles/_form-controls.scss
+++ b/webapp/packages/core-theming/src/styles/_form-controls.scss
@@ -17,46 +17,24 @@
     }
   }
 
-  input {
-    @include mdc-theme-prop(color, on-secondary, false);
-    @include mdc-theme-prop(background-color, secondary, false);
-    box-sizing: border-box;
-    padding: 0 4px;
-    overflow: hidden;
-    width: 100%;
-    border: 1px solid;
-    border-radius: 3px;
-    @include mdc-theme-prop(border-color, background, false);
-
-    &:global([type="checkbox"]) {
-      height: 16px;
-      width: 16px;
-    }
-
-    &:global([disabled]),
-    &:not([|select]):global([readonly]) {
-      opacity: 0.8;
-    }
-
-    &[use|mod="surface"] {
-      @include mdc-theme-prop(color, on-surface, false);
-      @include mdc-theme-prop(background-color, surface, false);
-    }
+  input:global([type="checkbox"]) {
+    height: 16px;
+    width: 16px;
   }
 
-  textarea[role="new"] {
+  textarea {
     resize: vertical;
     min-height: 40px;
   }
 
-  input[role="new"] {
+  input {
     overflow: hidden;
     text-overflow: ellipsis;
     min-height: 25px;
   }
 
-  input[role="new"],
-  textarea[role="new"] {
+  input,
+  textarea {
     box-sizing: border-box;
     padding: 7px 12px;
     font-size: 12px;
@@ -65,8 +43,8 @@
     outline: none;
     border-radius: 3px;
 
-    @include mdc-theme-prop(color, on-secondary, false);
-    @include mdc-theme-prop(border-color, background, false);
+    @include mdc-theme-prop(color, input-color, false);
+    @include mdc-theme-prop(border-color, input-border, false);
     @include mdc-theme-prop(background-color, input-background, false);
 
     &:focus,
@@ -91,9 +69,9 @@
     }
 
     &:not([|select]):global([readonly]) {
+      @include mdc-theme-prop(color, input-color-readonly, false);
       @include mdc-theme-prop(border-color, input-border-readonly, false);
       @include mdc-theme-prop(background-color, input-background-readonly, false);
-      /*opacity: 0.8;*/
       opacity: 1;
       &:-internal-autofill-selected,
       &:-internal-autofill-previewed {
@@ -101,9 +79,9 @@
       }
     }
     &:global([disabled]) {
+      @include mdc-theme-prop(color, input-color-disabled, false);
       @include mdc-theme-prop(border-color, input-border-disabled, false);
       @include mdc-theme-prop(background-color, input-background-disabled, false);
-      /*opacity: 0.7;*/
       opacity: 1;
       &:-internal-autofill-selected,
       &:-internal-autofill-previewed {
@@ -133,14 +111,4 @@
       text-decoration: none;
     }
   }
-
-  textarea {
-    box-sizing: border-box;
-    font-size: 14px;
-    padding: 4px;
-    border-radius: 3px;
-    border: solid 1px $input-border;
-    @include mdc-theme-prop(color, on-surface, false);
-    @include mdc-theme-prop(background-color, surface, false);
-  }
 }
diff --git a/webapp/packages/core-theming/src/styles/_theme-dark.scss b/webapp/packages/core-theming/src/styles/_theme-dark.scss
index b60d2fe0d9..0195728b44 100644
--- a/webapp/packages/core-theming/src/styles/_theme-dark.scss
+++ b/webapp/packages/core-theming/src/styles/_theme-dark.scss
@@ -27,6 +27,9 @@ $color-status: #a08600;
 $link-color: $mdc-theme-primary;
 $link-color-focus: #3f96d1;
 
+$input-color: $mdc-theme-on-secondary;
+$input-color-disabled: darken($input-color, 10%);
+$input-color-readonly: darken($input-color, 5%);
 $input-border: #585958;
 $input-border-disabled: darken($input-border, 10%);
 $input-border-readonly: darken($input-border, 5%);
@@ -46,25 +49,25 @@ $mdc-theme-text-colors: (
     primary: rgba(black, 0.87),
     secondary: rgba(black, 0.45),
     hint: rgba(black, 0.45),
-    disabled: rgba(black, 0.20),
+    disabled: rgba(black, 0.2),
     icon: rgba(black, 0.38),
   ),
 );
 
 $mdc-ripple-dark-ink-opacities: (
   hover: 0.04,
-  focus: 0.10,
-  press: 0.10,
+  focus: 0.1,
+  press: 0.1,
   selected: 0.06,
-  activated: 0.10,
+  activated: 0.1,
 ) !default;
 
 $mdc-ripple-light-ink-opacities: (
   hover: 0.04,
-  focus: 0.10,
-  press: 0.10,
+  focus: 0.1,
+  press: 0.1,
   selected: 0.06,
-  activated: 0.10,
+  activated: 0.1,
 ) !default;
 
 $theme-name: "dark";
diff --git a/webapp/packages/core-theming/src/styles/_theme-light.scss b/webapp/packages/core-theming/src/styles/_theme-light.scss
index ab71049b16..c528a09bef 100644
--- a/webapp/packages/core-theming/src/styles/_theme-light.scss
+++ b/webapp/packages/core-theming/src/styles/_theme-light.scss
@@ -26,6 +26,9 @@ $color-status: #ff9900;
 $link-color: $mdc-theme-primary;
 $link-color-focus: #3f96d1;
 
+$input-color: $mdc-theme-on-surface;
+$input-color-disabled: lighten($input-color, 20%);
+$input-color-readonly: $input-color;
 $input-border: #d9d9d9;
 $input-border-disabled: $input-border;
 $input-border-readonly: $input-border;
diff --git a/webapp/packages/core-theming/src/styles/_variables.scss b/webapp/packages/core-theming/src/styles/_variables.scss
index c1accb0897..3085f880ab 100644
--- a/webapp/packages/core-theming/src/styles/_variables.scss
+++ b/webapp/packages/core-theming/src/styles/_variables.scss
@@ -11,6 +11,9 @@ $mdc-theme-extra-property-values: (
   on-positive: $color-on-positive,
   negative: $color-negative,
   status: $color-status,
+  input-color: $input-color,
+  input-color-disabled: $input-color-disabled,
+  input-color-readonly: $input-color-readonly,
   input-border: $input-border,
   input-border-readonly: $input-border-readonly,
   input-border-disabled: $input-border-disabled,

From 77c2c75aad9b06be29d06623b281982d71ce2cd6 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Mon, 10 Jan 2022 12:53:54 +0300
Subject: [PATCH 2/4] fix(core-theming): CB-1458 inherit font size

---
 webapp/packages/core-app/src/shared/InlineEditor/styles.ts | 1 +
 webapp/packages/core-blocks/src/ItemList/styles.ts         | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/webapp/packages/core-app/src/shared/InlineEditor/styles.ts b/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
index 615dd658ef..80ca9ea9d3 100644
--- a/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
+++ b/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
@@ -49,6 +49,7 @@ export const InlineEditorStyles = composes(
     display: flex;
 
     & input, & input[disabled], & input[readonly] {
+      font-size: inherit;
       border: none;
       border-radius: unset;
       width: 100%;
diff --git a/webapp/packages/core-blocks/src/ItemList/styles.ts b/webapp/packages/core-blocks/src/ItemList/styles.ts
index ce2da32f9b..a8e4ccc3c9 100644
--- a/webapp/packages/core-blocks/src/ItemList/styles.ts
+++ b/webapp/packages/core-blocks/src/ItemList/styles.ts
@@ -67,6 +67,9 @@ export const ITEM_LIST_STYLES = composes(
       }
 
       & input {
+        font-size: inherit;
+        padding-top: 4px;
+        padding-bottom: 4px;
         padding-right: 32px;
       }
 
@@ -75,8 +78,9 @@ export const ITEM_LIST_STYLES = composes(
         display: flex;
         align-items: center;
         height: 100%;
-        top: 0;
+        top: 50%;
         right: 4px;
+        transform: translateY(-50%);
 
         & ListSearchButton {
           position: relative;

From c29bb6f2e899c0efa94be48ee57ed3150ca4efd9 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Mon, 10 Jan 2022 15:00:28 +0300
Subject: [PATCH 3/4] fix(core-theming): CB-1458 inehrit font-size
 automatically

---
 .../core-app/src/shared/InlineEditor/InlineEditor.tsx       | 3 +--
 webapp/packages/core-app/src/shared/InlineEditor/styles.ts  | 1 -
 webapp/packages/core-blocks/src/FormControls/Combobox.tsx   | 1 +
 webapp/packages/core-blocks/src/FormControls/InputField.tsx | 3 +++
 webapp/packages/core-blocks/src/FormControls/Textarea.tsx   | 1 +
 webapp/packages/core-blocks/src/ItemList/styles.ts          | 6 ++----
 webapp/packages/core-theming/src/styles/_form-controls.scss | 1 -
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx b/webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx
index 3f9bf84fa7..9db28c3d7c 100644
--- a/webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx
+++ b/webapp/packages/core-app/src/shared/InlineEditor/InlineEditor.tsx
@@ -8,9 +8,8 @@
 
 import { observer } from 'mobx-react-lite';
 import {
-  useEffect, useRef, useCallback, ChangeEvent
+  useEffect, useRef, useCallback, ChangeEvent, useImperativeHandle
 } from 'react';
-import { useImperativeHandle } from 'react';
 import styled, { use } from 'reshadow';
 
 import { Icon, IconOrImage, Loader, useObjectRef } from '@cloudbeaver/core-blocks';
diff --git a/webapp/packages/core-app/src/shared/InlineEditor/styles.ts b/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
index 80ca9ea9d3..615dd658ef 100644
--- a/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
+++ b/webapp/packages/core-app/src/shared/InlineEditor/styles.ts
@@ -49,7 +49,6 @@ export const InlineEditorStyles = composes(
     display: flex;
 
     & input, & input[disabled], & input[readonly] {
-      font-size: inherit;
       border: none;
       border-radius: unset;
       width: 100%;
diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
index 2fa053745b..369a620e92 100644
--- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
@@ -41,6 +41,7 @@ const styles = composes(
       font-weight: 500;
     }
     input {
+      font-size: 12px;
       padding-right: 24px !important;
     }
     MenuButton {
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
index 42187d9e63..f16230613d 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -51,6 +51,9 @@ const INPUT_FIELD_STYLES = composes(
         height: 100%;
       }
     }
+    input {
+      font-size: 12px;
+    }
     input[disabled] + icon-container {
       cursor: auto;
       opacity: 0.8;
diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
index 98be7cace6..4b3bbe4fc2 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -18,6 +18,7 @@ import { FormContext } from './FormContext';
 
 const styles = css`
   textarea {
+    font-size: 12px;
     line-height: 19px;
   }
   field[|embedded] {
diff --git a/webapp/packages/core-blocks/src/ItemList/styles.ts b/webapp/packages/core-blocks/src/ItemList/styles.ts
index a8e4ccc3c9..cbe4cf0562 100644
--- a/webapp/packages/core-blocks/src/ItemList/styles.ts
+++ b/webapp/packages/core-blocks/src/ItemList/styles.ts
@@ -57,6 +57,7 @@ export const ITEM_LIST_STYLES = composes(
       z-index: 1;
     }
     list-search {
+      composes: theme-typography--body1 from global;
       position: sticky;
       top: 0;
       padding: 16px 24px;
@@ -67,10 +68,7 @@ export const ITEM_LIST_STYLES = composes(
       }
 
       & input {
-        font-size: inherit;
-        padding-top: 4px;
-        padding-bottom: 4px;
-        padding-right: 32px;
+        padding: 4px 32px 4px 8px;
       }
 
       & search-button {
diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss
index dcfcf4ebac..3922eb3160 100644
--- a/webapp/packages/core-theming/src/styles/_form-controls.scss
+++ b/webapp/packages/core-theming/src/styles/_form-controls.scss
@@ -37,7 +37,6 @@
   textarea {
     box-sizing: border-box;
     padding: 7px 12px;
-    font-size: 12px;
     width: 100%;
     border: 2px solid;
     outline: none;

From 62eafd580fd346610a6f78b315dcea84a8118aab Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Mon, 10 Jan 2022 15:23:43 +0300
Subject: [PATCH 4/4] fix(core-theming): CB-1458 move font styles to
 baseFormControlStyles

---
 webapp/packages/core-blocks/src/FormControls/Combobox.tsx     | 1 -
 webapp/packages/core-blocks/src/FormControls/InputField.tsx   | 3 ---
 webapp/packages/core-blocks/src/FormControls/Textarea.tsx     | 1 -
 .../core-blocks/src/FormControls/baseFormControlStyles.ts     | 4 ++++
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
index 369a620e92..2fa053745b 100644
--- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
@@ -41,7 +41,6 @@ const styles = composes(
       font-weight: 500;
     }
     input {
-      font-size: 12px;
       padding-right: 24px !important;
     }
     MenuButton {
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
index f16230613d..42187d9e63 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -51,9 +51,6 @@ const INPUT_FIELD_STYLES = composes(
         height: 100%;
       }
     }
-    input {
-      font-size: 12px;
-    }
     input[disabled] + icon-container {
       cursor: auto;
       opacity: 0.8;
diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
index 4b3bbe4fc2..98be7cace6 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -18,7 +18,6 @@ import { FormContext } from './FormContext';
 
 const styles = css`
   textarea {
-    font-size: 12px;
     line-height: 19px;
   }
   field[|embedded] {
diff --git a/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts b/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts
index 14ab9577dd..6e7f46cc10 100644
--- a/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts
+++ b/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts
@@ -42,5 +42,9 @@ export const baseFormControlStyles = composes(
       composes: theme-typography--caption from global;
       padding-top: 4px;
     }
+
+    input, textarea {
+      font-size: 12px;
+    }
   `
 );