Updates visual design of Checkbox and Radio inputs (#2701)

* updates checkbox and radio inputs to match PVC

* adds changeset

* fixes minor visual inconsistencies

* updates snapshots

* test(vrt): update snapshots

* styles the indeterminate checkbox state

Co-authored-by: mperrotti <mperrotti@users.noreply.github.com>

.changeset/happy-needles-pump.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updates visual design of the Checkbox and Radio component to match the new direction defined by design.

src/Checkbox.tsx

@@ -6,6 +6,8 @@ import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {FormValidationStatus} from './utils/types/FormValidationStatus'
 import {CheckboxGroupContext} from './CheckboxGroupContext'
 import getGlobalFocusStyles from './_getGlobalFocusStyles'
+import {get} from './constants'
+import {sharedCheckboxAndRadioStyles} from './_sharedCheckboxAndRadioStyles'
 
 export type CheckboxProps = {
   /**
@@ -37,12 +39,97 @@ export type CheckboxProps = {
   SxProp
 
 const StyledCheckbox = styled.input`
-  cursor: pointer;
+  ${sharedCheckboxAndRadioStyles};
+  border-radius: ${get('radii.1')};
+  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
 
-  ${props => props.disabled && `cursor: not-allowed;`}
-  ${getGlobalFocusStyles(0)};
+  &::before {
+    width: var(--base-size-16, 16px);
+    height: var(--base-size-16, 16px);
+    visibility: hidden;
+    content: '';
+    background-color: ${get('colors.fg.onEmphasis')};
+    transition: visibility 0s linear 230ms;
+    clip-path: inset(var(--base-size-16, 16px) 0 0 0);
+    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
+    mask-size: 75%;
+    mask-repeat: no-repeat;
+    mask-position: center;
 
-  ${sx}
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
+    }
+  }
+
+  &:checked,
+  &:indeterminate {
+    background: ${get('colors.accent.fg')};
+    border-color: ${get('colors.accent.fg')};
+
+    &::before {
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+      }
+    }
+  }
+
+  &:checked {
+    transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;
+
+    &::before {
+      visibility: visible;
+      transition: visibility 0s linear 0s;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: ${get('colors.fg.muted')};
+      border-color: ${get('colors.fg.muted')};
+      opacity: 1;
+
+      &::before {
+        background-color: ${get('colors.fg.onEmphasis')};
+      }
+    }
+
+    /* Windows High Contrast mode */
+    @media (forced-colors: active) {
+      background-color: canvastext;
+      border-color: canvastext;
+    }
+  }
+
+  &:indeterminate {
+    background: ${get('colors.accent.fg')};
+    &::before {
+      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+      visibility: visible;
+    }
+  }
+
+  ${getGlobalFocusStyles()};
+
+  ${sx};
+
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(var(--base-size-16, 16px) 0 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(var(--base-size-16, 16px) 0 0 0);
+    }
+  }
 `
 
 /**

src/Radio.tsx

@@ -4,6 +4,8 @@ import sx, {SxProp} from './sx'
 import {FormValidationStatus} from './utils/types/FormValidationStatus'
 import {RadioGroupContext} from './RadioGroup'
 import getGlobalFocusStyles from './_getGlobalFocusStyles'
+import {get} from './constants'
+import {sharedCheckboxAndRadioStyles} from './_sharedCheckboxAndRadioStyles'
 
 export type RadioProps = {
   /**
@@ -39,10 +41,26 @@ export type RadioProps = {
   SxProp
 
 const StyledRadio = styled.input`
-  cursor: pointer;
+  ${sharedCheckboxAndRadioStyles};
+  border-radius: var(--primer-borderRadius-full, 100vh);
+  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
 
-  ${props => props.disabled && `cursor: not-allowed;`}
-  ${getGlobalFocusStyles(0)};
+  &:checked {
+    border-color: ${get('colors.accent.fg')};
+    border-width: var(--base-size-4, 4px);
+
+    &:disabled {
+      cursor: not-allowed;
+      border-color: ${get('colors.fg.muted')};
+    }
+  }
+
+  ${getGlobalFocusStyles()};
+
+  @media (forced-colors: active) {
+    background-color: canvastext;
+    border-color: canvastext;
+  }
 
   ${sx}
 `

src/_InputLabel.tsx

@@ -45,7 +45,7 @@ const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
         fontSize: 1,
         display: 'block',
         color: disabled ? 'fg.muted' : 'fg.default',
-        cursor: disabled ? 'default' : 'pointer',
+        cursor: disabled ? 'not-allowed' : 'pointer',
         alignSelf: 'flex-start',
         ...sx,
       }}

src/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -2,13 +2,92 @@
 
 exports[`Checkbox renders consistently 1`] = `
 .c0 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-color: #6e7781;
+  border-style: solid;
+  border-width: 1px;
   cursor: pointer;
+  display: grid;
+  height: var(--base-size-16,16px);
+  margin: 0;
+  margin-top: 0.125rem;
+  place-content: center;
+  position: relative;
+  width: var(--base-size-16,16px);
+  border-radius: 3px;
+  -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1);
+  transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1);
+}
+
+.c0:disabled {
+  background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
+  border-color: #d0d7de;
+}
+
+.c0::before {
+  width: var(--base-size-16,16px);
+  height: var(--base-size-16,16px);
+  visibility: hidden;
+  content: '';
+  background-color: #ffffff;
+  -webkit-transition: visibility 0s linear 230ms;
+  transition: visibility 0s linear 230ms;
+  -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0);
+  clip-path: inset(var(--base-size-16,16px) 0 0 0);
+  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
+  -webkit-mask-size: 75%;
+  mask-size: 75%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+.c0:checked,
+.c0:indeterminate {
+  background: #0969da;
+  border-color: #0969da;
+}
+
+.c0:checked {
+  -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
+  transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
+}
+
+.c0:checked::before {
+  visibility: visible;
+  -webkit-transition: visibility 0s linear 0s;
+  transition: visibility 0s linear 0s;
+}
+
+.c0:checked:disabled {
+  cursor: not-allowed;
+  background-color: #57606a;
+  border-color: #57606a;
+  opacity: 1;
+}
+
+.c0:checked:disabled::before {
+  background-color: #ffffff;
+}
+
+.c0:indeterminate {
+  background: #0969da;
+}
+
+.c0:indeterminate::before {
+  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+  visibility: visible;
 }
 
 .c0:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
-  outline-offset: 0;
+  outline-offset: 2px;
 }
 
 .c0:focus:not(:disabled):not(:focus-visible) {
@@ -18,7 +97,29 @@ exports[`Checkbox renders consistently 1`] = `
 .c0:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
-  outline-offset: 0;
+  outline-offset: 2px;
+}
+
+@media screen and (prefers-reduced-motion:no-preference) {
+  .c0::before {
+    -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
+    animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
+  }
+}
+
+@media screen and (prefers-reduced-motion:no-preference) {
+  .c0:checked::before,
+  .c0:indeterminate::before {
+    -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
+    animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
+  }
+}
+
+@media (forced-colors:active) {
+  .c0:checked {
+    background-color: canvastext;
+    border-color: canvastext;
+  }
 }
 
 <input