styles the checkbox and removes input shadow extend variables in favor of mixins to remove duplicate styles

src/client/components/forms/Error/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/client/scss/styles';
+@import '../../../scss/styles';
 
 .field-error {
   .tooltip {

src/client/components/forms/field-types/Checkbox/StyledCheckbox/index.js

@@ -3,14 +3,29 @@ import PropTypes from 'prop-types';
 
 import './index.scss';
 
-const StyledCheckbox = ({ onClick, isChecked }) => {
+const baseClass = 'styled-checkbox';
+
+const StyledCheckbox = ({
+  onClick, isChecked, label, name, isDisabled,
+}) => {
+  const classes = [
+    baseClass,
+    isChecked && `${baseClass}--is-checked`,
+    isDisabled && `${baseClass}--is-disabled`,
+  ].filter(Boolean).join(' ');
+
   return (
     <button
-      className="styled-checkbox"
-      onClick={() => onClick(!isChecked)}
+      className={classes}
+      onClick={() => (onClick && !isDisabled) && onClick(!isChecked)}
       type="button"
+      title={label}
+      role="checkbox"
+      aria-checked={isChecked}
+      aria-labelledby={name}
+      tabIndex={0}
     >
-      {isChecked ? 'X' : '-'}
+      <span className="checked-symbol">x</span>
     </button>
   );
 };
@@ -18,11 +33,16 @@ const StyledCheckbox = ({ onClick, isChecked }) => {
 StyledCheckbox.defaultProps = {
   onClick: null,
   isChecked: false,
+  label: 'Checkbox',
+  isDisabled: false,
 };
 
 StyledCheckbox.propTypes = {
   onClick: PropTypes.func,
   isChecked: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  isDisabled: PropTypes.bool,
 };
 
 export default StyledCheckbox;

src/client/components/forms/field-types/Checkbox/StyledCheckbox/index.scss

@@ -1,10 +1,25 @@
-@import '../../../../../scss/styles.scss';
-
+@import '../../shared';
 
 .styled-checkbox {
-  @extend %btn-reset;
-  outline: none;
+  @include formInput;
+  padding: 0;
   cursor: pointer;
-  padding: 30px;
-  box-shadow: $shadow-sm;
+  max-width: base(1.75);
+  font-size: base(1);
+  font-family: $font-body;
+  align-items: center;
+  justify-content: center;
+
+  .checked-symbol {
+    opacity: 0;
+    line-height: 0;
+    position: relative;
+    top: -2px;
+  }
+
+  &--is-checked {
+    .checked-symbol {
+      opacity: 1;
+    }
+  }
 }

src/client/components/forms/field-types/Checkbox/index.js

@@ -1,12 +1,10 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
 import StyledCheckbox from './StyledCheckbox';
 
-import './index.scss';
-
 const defaultError = 'Checkbox is required';
 const defaultValidate = value => Boolean(value);
 
@@ -34,19 +32,14 @@ const Checkbox = (props) => {
     validate,
   });
 
-  const checkboxRef = useRef(null);
-
   const classes = [
     'field-type',
     'checkbox',
-    value && 'checkbox--is-checked',
     showError && 'error',
   ].filter(Boolean).join(' ');
 
   const fieldWidth = width ? `${width}%` : undefined;
 
-  const formatFieldChangeValue = () => onFieldChange(checkboxRef.current.checked);
-
   return (
     <div
       className={classes}
@@ -64,20 +57,12 @@ const Checkbox = (props) => {
         label={label}
         required={required}
       />
-      <input
-        className="checkbox__input"
-        ref={checkboxRef}
-        value={value}
-        onChange={formatFieldChangeValue}
-        disabled={formProcessing ? 'disabled' : undefined}
-        type="checkbox"
-        id={name}
-        name={name}
-        checked={value}
-      />
       <StyledCheckbox
         onClick={onFieldChange}
-        isChecked={value}
+        isChecked={value || false}
+        name={name}
+        label={label}
+        isDisabled={formProcessing}
       />
     </div>
   );

src/client/components/forms/field-types/Checkbox/index.scss

@@ -1,6 +0,0 @@
-.checkbox {
-  &__input {
-    visibility: hidden;
-    display: none;
-  }
-}

src/client/components/forms/field-types/Email/index.scss

@@ -1,4 +1,3 @@
-@import '../../../../scss/styles.scss';
 @import '../shared';
 
 .field-type.email {

src/client/components/forms/field-types/Number/index.scss

@@ -1,4 +1,3 @@
-@import '../../../../scss/styles.scss';
 @import '../shared';
 
 .field-type.number {

src/client/components/forms/field-types/Password/index.scss

@@ -1,4 +1,3 @@
-@import '../../../../scss/styles.scss';
 @import '../shared';
 
 .field-type.password {

src/client/components/forms/field-types/Relationship/index.scss

@@ -1,4 +1,3 @@
-@import '../../../../scss/styles';
 @import '../shared';
 
 .field-type.relationship {

src/client/components/forms/field-types/Select/index.scss

@@ -1,4 +1,3 @@
-@import '../../../../scss/styles';
 @import '../shared';
 
 .field-type.select {

src/client/components/forms/field-types/Text/index.scss

@@ -1,4 +1,3 @@
-@import '../../../../scss/styles.scss';
 @import '../shared';
 
 .field-type.text {

src/client/components/forms/field-types/Textarea/index.scss

@@ -1,4 +1,3 @@
-@import '../../../../scss/styles.scss';
 @import '../shared';
 
 .field-type.textarea {

src/client/components/forms/field-types/shared.scss

@@ -1,7 +1,7 @@
 @import '../../../scss/styles';
 
 @mixin formInput () {
-    @extend %inputShadow;
+    @include inputShadow;
     font-family: $font-brand;
     width: 100%;
     border: 1px solid $light-gray;

src/client/components/layout/Section/index.scss

@@ -1,7 +1,7 @@
 @import '../../../scss/styles.scss';
 
 section.section {
-  @extend %shadow;
+  @include shadow;
   margin: base(1) 0;
 
   header,

src/client/components/layout/Table/index.scss

@@ -16,7 +16,7 @@ table {
   }
 
   tbody {
-    @extend %shadow-sm;
+    @include shadow-sm;
   }
 
   tr:nth-child(even) {

src/client/components/modules/Paginator/index.scss

@@ -10,7 +10,7 @@
     @extend %btn-reset;
     line-height: 1;
     outline: 0;
-    box-shadow: $shadow-sm;
+    @include shadow-sm;
     padding: base(.5) base(.65);
     margin-right: base(.45);
     cursor: pointer;

src/client/components/modules/ReactSelect/index.scss

@@ -44,7 +44,7 @@ div.react-select {
 
   .rs__menu {
     border-radius: 0;
-    @extend %inputShadowActive;
+    @include inputShadowActive;
   }
 
   .rs__group-heading {

src/client/scss/vars.scss

@@ -51,23 +51,21 @@ $radius-sm    : 5px;
 $radius-lrg   : 10px;
 $stroke-width : 1px;
 
-$shadow-sm: 0 2px 4px 0 rgba(0,2,4,.1),0 2px 20px 0 rgba(0,2,4,.04);
-
-%shadow-sm {
-	box-shadow: $shadow-sm
+@mixin shadow-sm {
+  box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),0 2px 20px 0 rgba(0,2,4,.04);
 }
 
-%shadow {
+@mixin shadow {
 	box-shadow: 0 22px 65px rgba(0,0,0,.07);
 }
 
-%inputShadowActive {
-  box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),
+@mixin inputShadowActive {
+	box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),
 					0 10px 20px 0 rgba(0,2,4,.08);
 }
 
-%inputShadow {
-  @extend %shadow-sm;
+@mixin inputShadow {
+	@include shadow-sm;
 
   &:hover {
 		box-shadow: 0 2px 4px 0 rgba(0,2,4,.1), 0 5px 20px 0 rgba(0,2,4,.06);