PWA-623: Update Venia's inputs to match the styleguide's inputs

- update checkbox styles

packages/venia-ui/lib/components/Checkbox/checkbox.css

@@ -1,55 +1,54 @@
 .root {
+    --stroke: var(--venia-global-color-gray-600);
     align-items: center;
-    color: rgb(var(--venia-global-color-text));
-    display: inline-grid;
-    font-size: 1rem;
-    font-weight: 400;
-    gap: 0.5rem;
+    color: rgb(var(--venia-global-color-gray-900));
+    display: grid;
+    gap: 0.75rem;
     grid-auto-flow: column;
-    grid-template-columns: auto;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
     justify-items: center;
-    margin: 0.5rem;
-    vertical-align: top;
+    line-height: 1.5rem;
+}
+
+.input {
+    -webkit-appearance: none;
+    background: none;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    grid-area: input;
+    height: 1.5rem;
+    width: 1.5rem;
 }
 
 .icon {
-    align-items: center;
-    display: inline-flex;
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-    height: 1.25rem;
-    justify-content: center;
+    grid-area: input;
+    height: 1.5rem;
     pointer-events: none;
-    width: 1.25rem;
+    width: 1.5rem;
 }
 
-.input {
-    background: none;
-    border: 1px solid rgb(var(--venia-global-color-text));
-    border-radius: 2px;
-    cursor: pointer;
-    display: inline-flex;
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-    height: 1.25rem;
-    margin: 0;
-    width: 1.25rem;
-    -webkit-appearance: none;
+.icon svg {
+    stroke: rgb(var(--stroke));
+}
+
+.label {
+    font-size: var(--venia-typography-body-S-fontSize);
+    grid-area: label;
+    justify-self: start;
 }
 
 .input:disabled {
     cursor: default;
 }
 
-.input:focus {
-    border-color: rgb(var(--venia-global-color-teal));
-    box-shadow: 0 0 0 2px rgb(var(--venia-global-color-teal-light)),
-        0 0 0.5rem 2px rgb(var(--venia-global-color-teal) / 0.2);
-    outline: none;
+.input:checked + .icon {
+    --stroke: var(--venia-brand-color-1-700);
 }
 
-.label {
-    font-size: 1rem;
-    grid-column: 2 / span 1;
-    grid-row: 1 / span 1;
+.input:active,
+.input:focus {
+    box-shadow: -3px 3px rgb(var(--venia-brand-color-1-900));
+    outline: none;
 }

packages/venia-ui/lib/components/Checkbox/checkbox.js

@@ -5,13 +5,15 @@ import { compose } from 'redux';
 
 import classify from '../../classify';
 import { Message } from '../Field';
-import Icon from '../Icon';
-import { Check as CheckIcon } from 'react-feather';
+import { CheckSquare, Square } from 'react-feather';
 import defaultClasses from './checkbox.css';
 
 /* TODO: change lint config to use `label-has-associated-control` */
 /* eslint-disable jsx-a11y/label-has-for */
 
+const checkedIcon = <CheckSquare />;
+const uncheckedIcon = <Square />;
+
 export class Checkbox extends Component {
     static propTypes = {
         classes: shape({
@@ -33,6 +35,7 @@ export class Checkbox extends Component {
     render() {
         const { classes, fieldState, id, label, message, ...rest } = this.props;
         const { value: checked } = fieldState;
+        const icon = checked ? checkedIcon : uncheckedIcon;
 
         return (
             <Fragment>
@@ -43,9 +46,7 @@ export class Checkbox extends Component {
                         fieldState={fieldState}
                         id={id}
                     />
-                    <span className={classes.icon}>
-                        {checked && <Icon src={CheckIcon} size={18} />}
-                    </span>
+                    <span className={classes.icon}>{icon}</span>
                     <span className={classes.label}>{label}</span>
                 </label>
                 <Message fieldState={fieldState}>{message}</Message>