feat: use design tokens for text-input (#443)

* feat: use tokens for text-input, password-input and number-input

Author: montezume

.eslintrc.yaml

@@ -33,8 +33,8 @@ overrides:
       'react/display-name': 0
   - files: ['*.visualspec.js']
     globals:
-        page: true
-        HOST: true
+      page: true
+      HOST: true
 settings:
   import/ignore:
     # included by default, but replaced if explicitly configured
@@ -49,63 +49,53 @@ settings:
     version: detect
 
 rules:
-    'class-methods-use-this':
-      - 'error'
-      - exceptMethods: [
-          'render',
-          'getInitialState',
-          'getDefaultProps',
-          'getChildContext',
-          'shouldComponentUpdate',
-          'UNSAFE_componentWillMount',
-          'UNSAFE_componentWillReceiveProps',
-          'UNSAFE_componentWillUpdate',
-          'componentWillUnmount',
-          'componentDidMount',
-          'componentDidUpdate',
-        ]
-    'function-paren-newline': 0
-    # ui-kit is a mapped module in bundle tests, so it will not be found
-    # settting ignorePackages will disable the extension warning for it.
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        js: 'never',
-      },
-    ]
-    'import/no-extraneous-dependencies': 0
-    'import/no-named-as-default': 0
-    # ui-kit is a mapped module in bundle tests, so it will not be found
-    # We exclude it from the checks
-    'import/no-unresolved': [2, { ignore: ['ui-kit'] }]
-    'import/first': 0
-    'import/order': 2
-    'no-restricted-globals': ['error', 'find', 'name', 'location']
-    'no-warning-comments': 0
-    'no-use-before-define': [
-      'error',
-      {
-        functions: false,
-      },
-    ]
-    'no-underscore-dangle': 0
-    'jest/no-identical-title': 'warn'
-    'jest/no-focused-tests': 2
-    'react/jsx-uses-vars': 2
-    'react/wrap-multilines': 0
-    'react/no-deprecated': 'error'
-    'react/no-find-dom-node': 0
-    'react/display-name': [
-      1,
-      {
-        ignoreTranspilerName: true,
-      }
-    ]
-    'prefer-object-spread/prefer-object-spread': 2
-    'prefer-destructuring': 0
-    'prefer-promise-reject-errors': 'warn'
-    'react/jsx-no-target-blank': 0
-    'lines-between-class-members': 0
-    # NOTE: The regular rule does not support do-expressions. The equivalent rule of babel does.
-    'no-unused-expressions': 0
+  'class-methods-use-this':
+    - 'error'
+    - exceptMethods:
+        - render
+        - getInitialState
+        - getDefaultProps
+        - getChildContext
+        - shouldComponentUpdate
+        - UNSAFE_componentWillMount
+        - UNSAFE_componentWillReceiveProps
+        - UNSAFE_componentWillUpdate
+        - componentWillUnmount
+        - componentDidMount
+        - componentDidUpdate
+  'function-paren-newline': 0
+  # ui-kit is a mapped module in bundle tests, so it will not be found
+  # settting ignorePackages will disable the extension warning for it.
+  'import/extensions':
+    - error
+    - ignorePackages
+    - js: 'never'
+  'import/no-extraneous-dependencies': 0
+  'import/no-named-as-default': 0
+  # ui-kit is a mapped module in bundle tests, so it will not be found
+  # We exclude it from the checks
+  'import/no-unresolved': [2, { ignore: ['ui-kit'] }]
+  'import/first': 0
+  'import/order': 2
+  'no-restricted-globals': ['error', 'find', 'name', 'location']
+  'no-warning-comments': 0
+  'no-use-before-define':
+    - error
+    - functions: false
+  'no-underscore-dangle': 0
+  'jest/no-identical-title': 'warn'
+  'jest/no-focused-tests': 2
+  'react/jsx-uses-vars': 2
+  'react/wrap-multilines': 0
+  'react/no-deprecated': 'error'
+  'react/no-find-dom-node': 0
+  'react/display-name':
+    - 1
+    - ignoreTranspilerName: true
+  'prefer-object-spread/prefer-object-spread': 2
+  'prefer-destructuring': 0
+  'prefer-promise-reject-errors': 'warn'
+  'react/jsx-no-target-blank': 0
+  'lines-between-class-members': 0
+  # NOTE: The regular rule does not support do-expressions. The equivalent rule of babel does.
+  'no-unused-expressions': 0

lint-staged.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   '*.md': ['yarn format:md', 'git add'],
+  '*.yaml': ['yarn format:yaml', 'git add'],
   '*.js': [
     // NOTE: apparently if you pass some argument that is not a flag AFTER the `reporters`
     // flag, jest does not seem correctly parse the arguments.

materials/custom-properties.css

@@ -35,6 +35,8 @@
   --border-radius-4: 4px;
   --border-radius-6: 6px;
   --border-radius-20: 20px;
+  --font-family-body: 'Open Sans', sans-serif;
+  --font-size-m: 13px;
   --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
@@ -78,6 +80,8 @@
   --background-color-tag-disabled: hsl(0, 0%, 95%);
   --background-color-tag-normal-hover: hsl(0, 0%, 60%);
   --background-color-tag-warning-hover: #f16d0e;
+  --background-color-for-input: #fff;
+  --background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
   --border-color-input-pristine: hsl(0, 0%, 60%);
   --border-color-input-focus: #00b39e;
   --border-color-input-disabled: #ccc;
@@ -89,15 +93,30 @@
   --border-color-tag-focus: #00b39e;
   --border-color-tag-warning-hover: #f16d0e;
   --border-color-separator: #ccc;
+  --border-color-for-input: hsl(0, 0%, 60%);
+  --border-color-for-input-when-focused: #00b39e;
+  --border-color-for-input-when-disabled: #ccc;
+  --border-color-for-input-when-readonly: #ccc;
+  --border-color-for-input-when-error: #e60050;
+  --border-color-for-input-when-warning: #f16d0e;
   --border-radius-input: 6px;
   --border-radius-tag: 2px;
+  --border-radius-for-input: 6px;
   --font-color-default: #1a1a1a;
   --font-color-disabled: hsl(0, 0%, 60%);
   --font-color-error: #e60050;
   --font-color-success: #00b39e;
   --font-color-warning: #f16d0e;
   --font-color-readonly: hsl(0, 0%, 60%);
   --font-color-placeholder: hsl(0, 0%, 60%);
+  --font-color-for-input: #1a1a1a;
+  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
+  --font-color-for-input-when-error: #e60050;
+  --font-color-for-input-when-readonly: hsl(0, 0%, 60%);
+  --font-color-for-input-when-warning: #f16d0e;
+  --font-family: 'Open Sans', sans-serif;
+  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
+  --font-size-for-input: 13px;
   --shadow-box-tag-when-hovered: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   --big-button-height: 32px;
   --small-button-height: 24px;

materials/custom-properties.json

@@ -28,6 +28,8 @@
   "--border-radius-4": "4px",
   "--border-radius-6": "6px",
   "--border-radius-20": "20px",
+  "--font-family-body": "'Open Sans', sans-serif",
+  "--font-size-m": "13px",
   "--shadow-1": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
   "--shadow-2": "0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)",
   "--shadow-3": "0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)",
@@ -71,6 +73,8 @@
   "--background-color-tag-disabled": "hsl(0, 0%, 95%)",
   "--background-color-tag-normal-hover": "hsl(0, 0%, 60%)",
   "--background-color-tag-warning-hover": "#f16d0e",
+  "--background-color-for-input": "#fff",
+  "--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
   "--border-color-input-pristine": "hsl(0, 0%, 60%)",
   "--border-color-input-focus": "#00b39e",
   "--border-color-input-disabled": "#ccc",
@@ -82,15 +86,30 @@
   "--border-color-tag-focus": "#00b39e",
   "--border-color-tag-warning-hover": "#f16d0e",
   "--border-color-separator": "#ccc",
+  "--border-color-for-input": "hsl(0, 0%, 60%)",
+  "--border-color-for-input-when-focused": "#00b39e",
+  "--border-color-for-input-when-disabled": "#ccc",
+  "--border-color-for-input-when-readonly": "#ccc",
+  "--border-color-for-input-when-error": "#e60050",
+  "--border-color-for-input-when-warning": "#f16d0e",
   "--border-radius-input": "6px",
   "--border-radius-tag": "2px",
+  "--border-radius-for-input": "6px",
   "--font-color-default": "#1a1a1a",
   "--font-color-disabled": "hsl(0, 0%, 60%)",
   "--font-color-error": "#e60050",
   "--font-color-success": "#00b39e",
   "--font-color-warning": "#f16d0e",
   "--font-color-readonly": "hsl(0, 0%, 60%)",
   "--font-color-placeholder": "hsl(0, 0%, 60%)",
+  "--font-color-for-input": "#1a1a1a",
+  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
+  "--font-color-for-input-when-error": "#e60050",
+  "--font-color-for-input-when-readonly": "hsl(0, 0%, 60%)",
+  "--font-color-for-input-when-warning": "#f16d0e",
+  "--font-family": "'Open Sans', sans-serif",
+  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
+  "--font-size-for-input": "13px",
   "--shadow-box-tag-when-hovered": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
   "--big-button-height": "32px",
   "--small-button-height": "24px",