Update form text colors (#3296)

* Create ant variables and update form colors

* Remove less extension from imports in ant.less

* Update font-weight for labels

* Add percy snapshot for create data source page

* Remove bold in labels only for checkboxes and radio buttons

client/app/assets/less/ant.less

@@ -1,33 +1,23 @@
-@import '~antd/lib/style/core/iconfont.less';
-@import '~antd/lib/style/core/motion.less';
-@import '~antd/lib/input/style/index.less';
-@import '~antd/lib/input-number/style/index.less';
-@import '~antd/lib/date-picker/style/index.less';
-@import '~antd/lib/modal/style/index.less';
-@import '~antd/lib/tooltip/style/index.less';
-@import '~antd/lib/select/style/index.less';
-@import '~antd/lib/checkbox/style/index.less';
-@import '~antd/lib/upload/style/index.less';
-@import '~antd/lib/form/style/index.less';
-@import '~antd/lib/button/style/index.less';
-@import '~antd/lib/radio/style/index.less';
-@import '~antd/lib/time-picker/style/index.less';
+@import '~antd/lib/style/core/iconfont';
+@import '~antd/lib/style/core/motion';
+@import '~antd/lib/input/style/index';
+@import '~antd/lib/input-number/style/index';
+@import '~antd/lib/date-picker/style/index';
+@import '~antd/lib/modal/style/index';
+@import '~antd/lib/tooltip/style/index';
+@import '~antd/lib/select/style/index';
+@import '~antd/lib/checkbox/style/index';
+@import '~antd/lib/upload/style/index';
+@import '~antd/lib/form/style/index';
+@import '~antd/lib/button/style/index';
+@import '~antd/lib/radio/style/index';
+@import '~antd/lib/time-picker/style/index';
+@import 'inc/ant-variables';
 
-// Overwritting Ant Design defaults to fit into Redash current style
-@redash-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-
-@font-family-no-number  : @redash-font;
-@font-family            : @redash-font;
-@code-family            : @redash-font;
-@font-size-base         : 13px;
-@text-color             : #767676;
-
-@input-height-base      : 35px;
-@input-color            : #9E9E9E;
-@border-radius-base     : 2px;
-@border-color-base      : #e8e8e8;
-
-@primary-color          : #2196F3;
+// Remove bold in labels for Ant checkboxes and radio buttons
+.ant-checkbox-wrapper, .ant-radio-wrapper {
+  font-weight: normal;
+}
 
 // Fix for disabled button styles inside Tooltip component.
 // Tooltip wraps disabled buttons with `<span>` and moves all styles

client/app/assets/less/inc/ant-variables.less

@@ -0,0 +1,29 @@
+/* --------------------------------------------------------
+    Colors
+-----------------------------------------------------------*/
+@primary-color:                        #2196F3;
+
+
+/* --------------------------------------------------------
+    Font
+-----------------------------------------------------------*/
+@redash-font:                          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+@font-family-no-number:                @redash-font;
+@font-family:                          @redash-font;
+@code-family:                          @redash-font;
+@font-size-base:                       13px;
+
+
+/* --------------------------------------------------------
+    Typograpgy
+-----------------------------------------------------------*/
+@text-color:                           #595959;
+
+
+/* --------------------------------------------------------
+    Form
+-----------------------------------------------------------*/
+@input-height-base:                    35px;
+@input-color:                          #595959;
+@border-radius-base: 2px;
+@border-color-base:                    #E8E8E8;

client/app/assets/less/inc/variables.less

@@ -55,7 +55,7 @@
 /* --------------------------------------------------------
     Form
 -----------------------------------------------------------*/
-@input-color:                           #9E9E9E;
+@input-color:                           #595959;
 @input-color-placeholder:               #b4b4b4;
 @input-border:                          #e8e8e8;
 @input-border-radius:                   0;

cypress/integration/data-source/create_data_source_spec.js

@@ -14,5 +14,6 @@ describe('Create Data Source', () => {
     cy.getByTestId('Database Name').type('postgres{enter}');
 
     cy.contains('Saved.');
+    cy.percySnapshot('Create Data Source page');
   });
 });