@primer/css 0.0.0-20220620061649 → 0.0.0-20220621152621

package/forms/FormControl.scss

@@ -1,4 +1,4 @@
-// stylelint-disable primer/typography, primer/borders, primer/spacing, primer/box-shadow, max-nesting-depth
+// stylelint-disable primer/typography, primer/borders, primer/spacing, max-nesting-depth, selector-max-type, selector-max-specificity, selector-no-qualifying-type
 
 // group label, field, caption and error message
 .FormGroup {
@@ -10,11 +10,6 @@
 // fill container
 .FormGroup--fullWidth {
   display: flex;
-
-  // stretch field to fill container
-  .FormControl-fieldWrap {
-    flex-grow: 1;
-  }
 }
 
 // <label>
@@ -22,6 +17,7 @@
   font-size: var(--primer-text-body-size-medium, 14px);
   font-weight: var(--base-text-weight-semibold, 600);
   line-height: var(--primer-text-body-lineHeight-medium, 20px);
+  color: var(--color-fg-default);
   user-select: none;
 }
 
@@ -44,7 +40,6 @@
   align-items: center;
   gap: var(--base-size-4, 4px);
 
-  // stylelint-disable-next-line selector-max-type
   p {
     margin-bottom: 0;
   }
@@ -57,26 +52,56 @@
 
   &[disabled] {
     color: var(--color-primer-fg-disabled);
+    cursor: not-allowed;
     background-color: var(--color-input-disabled-bg);
     border-color: var(--color-border-default);
-    -webkit-text-fill-color: var(--color-primer-fg-disabled);
     opacity: 1;
+    -webkit-text-fill-color: var(--color-primer-fg-disabled);
   }
 
   &:not(:focus)[invalid] {
     border-color: var(--color-danger-emphasis);
   }
 
+  &:not([type='checkbox']):not([type='radio']):focus {
+    @include focusBoxShadowInset;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      border-color: transparent;
+
+      @include focusBoxShadowInset(1px, transparent);
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusBoxShadowInset;
+  }
+
+  &.FormControl--inset {
+    background-color: var(--color-canvas-inset);
+  }
+
+  &.FormControl--monospace {
+    font-family: var(
+      --primer-fontStack-monospace,
+      'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
+    );
+  }
+
   // <select> and <input>
   &.FormControl--input,
-  &.FormControl--select {
-    height: var(--primer-control-medium-size, 32px);
+  &.FormControl--select,
+  &.FormControl--textarea {
+    width: 100%;
     font-size: var(--primer-text-body-size-medium, 14px);
     line-height: var(--primer-text-body-lineHeight-medium, 20px);
     border-radius: var(--primer-borderRadius-medium, 6px);
-    padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
     transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
     transition-property: color, background-color, box-shadow, border-color;
+    padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
+    padding-block: calc(var(--primer-control-medium-paddingBlock, 6px) - var(--primer-borderWidth-thin, 1px));
 
     &[disabled] {
       &::placeholder {
@@ -90,10 +115,18 @@
     }
   }
 
+  // <select> and <input>
+  &.FormControl--input,
+  &.FormControl--select {
+    height: var(--primer-control-medium-size, 32px);
+  }
+
   // sizes
 
   &.FormControl--small {
     height: var(--primer-control-small-size, 28px);
+    padding-inline: var(--primer-control-small-paddingInline-normal, 8px);
+    padding-block: var(--primer-control-small-paddingBlock, 4px);
     font-size: var(--primer-text-body-size-small, 12px);
   }
 
@@ -104,148 +137,173 @@
   &.FormControl--large {
     height: var(--primer-control-large-size, 40px);
     padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
+    padding-block: var(--primer-control-large-paddingBlock, 10px);
   }
 }
 
-// pseudo input styles to allow for visual and action slots
-// set input styles on -fieldWrap, remove styles from <input>
+// positioning for leading/trailing items
 .FormControl-fieldWrap {
-  display: inline-grid;
-  height: var(--primer-control-medium-size, 32px);
-  background-color: var(--color-canvas-default);
-  border-radius: var(--primer-borderRadius-medium, 6px);
-  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
-  grid-template-rows: auto;
-  gap: var(--primer-controlStack-medium-gap-condensed, 8px);
-  align-items: center;
-  align-content: center;
-  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
-
-  .FormControl {
-    padding: unset;
-    background-color: transparent;
-    border: 0;
+  position: relative;
+  display: grid;
+
+  .FormControl--input-leadingVisualWrap {
+    position: absolute;
+    top: var(--base-size-8, 8px);
+    left: var(--base-size-8, 8px);
+    display: block;
+    width: var(--base-size-16, 16px);
+    height: var(--base-size-16, 16px);
+    color: var(--color-fg-muted);
+    pointer-events: none;
 
-    &:focus-visible,
-    &:focus {
-      outline: none;
-      box-shadow: none;
+    // octicon
+    .FormControl--input-leadingVisual {
+      display: block;
+      user-select: none;
     }
   }
 
-  &:focus-within {
-    @include focusBoxShadowInset(2px, var(--color-accent-fg));
-  }
+  // TODO: replace with new Button component
+  .FormControl--input-trailingAction {
+    position: absolute;
+    top: var(--base-size-4, 4px);
+    right: var(--base-size-4, 4px);
+    z-index: 4;
+    display: grid;
+    width: var(--primer-control-xsmall-size, 24px);
+    height: var(--primer-control-xsmall-size, 24px);
+    padding: 0;
+    color: var(--color-fg-muted);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: var(--primer-borderRadius-small);
+    transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+    transition-property: color, background-color, border-color;
+    align-items: center;
+    justify-content: center;
 
-  &.FormControl-fieldWrap--disabled {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-input-disabled-bg);
-  }
+    svg {
+      user-select: none;
+    }
 
-  &.FormControl-fieldWrap--invalid:not(:focus-within) {
-    box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-danger-emphasis);
-  }
+    &[disabled] {
+      color: var(--color-primer-fg-disabled);
+      pointer-events: none;
+    }
 
-  // if leadingVisual is present
-  &.FormControl-fieldWrap--input-leadingVisual {
-    grid-template-columns: var(--base-size-16, 16px) minmax(0, auto);
+    &:hover {
+      background: var(--color-action-list-item-default-hover-bg);
+    }
 
-    .FormControl--input {
-      padding-inline-start: calc(var(--base-size-16, 16px) + var(--primer-control-medium-paddingInline-condensed, 8px));
+    &:active {
+      background: var(--color-action-list-item-default-active-bg);
     }
 
-    // if leadingVisual and trailingAction are present
-    &.FormControl-fieldWrap--input-trailingAction {
-      grid-template-columns: var(--base-size-16, 16px) minmax(0, auto) min-content;
+    // show vertical divider line between field and button
+    &::before {
+      position: absolute;
+      top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 2);
+      left: calc(var(--base-size-4, 4px) * -1);
+      display: block;
+      width: var(--primer-borderWidth-thin);
+      height: var(--base-size-16);
+      content: '';
+      background: var(--color-border-default);
+    }
 
-      .FormControl--input-trailingAction {
-        grid-column: 3 / 4;
+    &::after {
+      @include minTouchTarget(var(--primer-control-medium-size), var(--primer-control-medium-size));
+
+      @media (pointer: coarse) {
+        min-width: var(--primer-control-minTarget-coarse);
+        min-height: var(--primer-control-minTarget-coarse);
       }
     }
   }
 
-  // if trailingAction is present
-  &.FormControl-fieldWrap--input-trailingAction {
-    grid-template-columns: minmax(0, auto) min-content;
-  }
-
-  &.FormControl-fieldWrap--input {
-    grid-template-rows: max-content;
-
-    .FormControl--input-leadingVisual {
-      grid-column: 1 / 2;
-      grid-row: 1;
+  // if leadingVisual is present
+  &.FormControl-fieldWrap--input-leadingVisual {
+    .FormControl--input {
+      padding-inline-start: calc(
+        var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
+          var(--primer-control-medium-gap, 8px) - var(--primer-borderWidth-thin, 1px)
+      );
     }
+  }
 
-    // <input> spans entire grid
+  // if trailingAction is present
+  &.FormControl-fieldWrap--input-trailingAction {
     .FormControl--input {
-      grid-column: 1 / -1;
-      grid-row: 1;
+      padding-inline-end: calc(
+        var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
+          var(--primer-control-medium-gap, 8px) - var(--primer-borderWidth-thin, 1px)
+      );
     }
+  }
 
-    // TODO: replace with new Button component
-    // trailingAction will auto fill last grid slot
-    .FormControl--input-trailingAction {
-      display: grid;
-      width: calc(var(--primer-control-medium-size, 32px) - var(--base-size-4, 4px));
-      height: calc(var(--primer-control-medium-size, 32px) - var(--base-size-4, 4px));
-      padding: 0;
-      // optically align the icon with field padding
-      margin-right: calc(calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem) * -1);
-      color: var(--color-fg-muted);
-      cursor: pointer;
-      user-select: none;
-      background-color: transparent;
-      border: solid var(--primer-borderWidth-thin, 1px) transparent;
-      border-radius: var(--primer-borderRadius-medium, 6px);
-      transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-      transition-property: color, background-color, border-color;
-      grid-row: 1;
-      place-content: center;
-      place-self: center end;
-      grid-column: 2 / 3;
-
-      &:hover {
-        background-color: var(--color-btn-hover-bg);
-        border: solid var(--primer-borderWidth-thin, 1px) var(--color-btn-hover-bg);
+  // size modifications can be refactored with :has() - FormControl-fieldWrap:has(.FormControl--large)
+  // sizes
+  &.FormControl-fieldWrap--input {
+    &.FormControl--small {
+      .FormControl--input-leadingVisualWrap {
+        top: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
+        left: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
       }
 
-      &[disabled] {
-        color: var(--color-primer-fg-disabled);
-        pointer-events: none;
+      &.FormControl-fieldWrap--input-trailingAction {
+        .FormControl--input.FormControl--small {
+          padding-inline-end: calc(
+            var(----primer-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
+              var(--primer-control-small-gap, 8px) - var(--primer-borderWidth-thin, 1px)
+          ); /* 27px */
+        }
       }
-    }
-
-    // sizes
-
-    // these selectors can be refactored to use :has()
-    &.FormControl--small {
-      height: var(--primer-control-small-size, 28px);
-      font-size: var(--primer-text-body-size-small, 12px);
 
       .FormControl--input-trailingAction {
         width: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
         height: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
+
+        &::before {
+          top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
+        }
       }
     }
 
-    &.FormControl--medium {
-      height: var(--primer-control-medium-size, 32px);
+    &.FormControl--large {
+      .FormControl--input-leadingVisualWrap {
+        top: var(--primer-control-medium-paddingInline-normal, 12px);
+        left: var(--primer-control-medium-paddingInline-normal, 12px);
+      }
 
-      .FormControl--input-trailingAction {
-        width: calc(var(--primer-control-medium-size, 32px) - var(--base-size-8, 8px));
-        height: calc(var(--primer-control-medium-size, 32px) - var(--base-size-8, 8px));
+      &.FormControl-fieldWrap--input-leadingVisual {
+        .FormControl--input.FormControl--large {
+          padding-inline-start: calc(
+            var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
+              var(--primer-control-large-gap, 8px) - var(--primer-borderWidth-thin, 1px)
+          ); /* 31px */
+        }
       }
-    }
 
-    &.FormControl--large {
-      height: var(--primer-control-large-size, 40px);
-      padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
+      &.FormControl-fieldWrap--input-trailingAction {
+        .FormControl--input.FormControl--large {
+          padding-inline-end: calc(
+            var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
+              var(--primer-control-large-gap, 8px)
+          ); /* 36px */
+        }
+      }
 
       .FormControl--input-trailingAction {
-        width: calc(var(--primer-control-large-size, 40px) - var(--base-size-8, 8px));
-        height: calc(var(--primer-control-large-size, 40px) - var(--base-size-8, 8px));
-        margin-right: calc(calc(var(--primer-control-medium-paddingInline-normal, 12px) - 0.125rem) * -1);
+        top: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
+        right: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
+        width: var(--primer-control-small-size, 28px);
+        height: var(--primer-control-small-size, 28px);
+
+        &::before {
+          top: unset;
+          height: var(--base-size-20);
+        }
       }
     }
   }
@@ -253,17 +311,18 @@
 
 .FormControl-fieldWrap--select {
   grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
-  padding-inline-end: var(--primer-control-medium-paddingInline-condensed, 8px);
 
   // mask allows for background-color to respect themes
   &::after {
     width: var(--base-size-16, 16px);
     height: var(--base-size-16, 16px);
+    padding-right: var(--base-size-4, 4px);
     pointer-events: none;
     content: '';
     background-color: var(--color-fg-muted);
     mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
-    mask-size: cover;
+    mask-size: contain;
+    mask-repeat: no-repeat;
     grid-column: 2;
     grid-row: 1;
     place-self: center end;
@@ -274,15 +333,26 @@
     grid-column: 1/-1;
     grid-row: 1;
     appearance: none;
-    padding-right: var(--base-size-16, 16px);
+    padding-right: var(--base-size-20, 20px);
   }
 }
 
-.FormGroup--checkbox {
+// checkbox + radio specific styles
+
+.FormGroup--checkbox,
+.FormGroup--radio {
   display: inline-grid;
   grid-template-areas: 'field label' '. caption';
+  grid-template-columns: min-content auto;
   gap: var(--base-size-8, 8px);
 
+  .FormControl--checkbox-labelWrap,
+  .FormControl--radio-labelWrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base-size-4, 4px);
+  }
+
   .FormControl-label {
     grid-area: label;
   }
@@ -292,91 +362,128 @@
   }
 }
 
-// checkbox + radio specific styles
-
-.FormControl--checkbox,
-.FormControl--radio {
-  position: absolute;
+// these selectors are temporary to override base.scss
+// once FormControl styles are widely adopted, we can adjust this and the global base styles
+input[type='checkbox'].FormControl--checkbox,
+input[type='radio'].FormControl--radio {
+  display: grid;
   width: var(--base-size-16, 16px);
   height: var(--base-size-16, 16px);
-  opacity: 0;
+  margin: 0;
+  margin-top: 0.125rem; // 2px to center align with label (20px line-height)
+  border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
+  border-radius: var(--primer-borderRadius-small, 3px);
+  // stylelint-disable-next-line declaration-property-value-disallowed-list
+  transition: border-color, background 80ms cubic-bezier(0.33, 1, 0.68, 1) 120ms; // checked -> unchecked
+  appearance: none;
+  place-content: center;
+  grid-area: field;
+
+  &::before {
+    width: var(--base-size-16, 16px);
+    height: var(--base-size-16, 16px);
+    visibility: hidden;
+    content: '';
+    background-color: var(--color-fg-on-emphasis);
+    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='); // octicon checkmark image
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; // slightly snappier animation out
+    }
+  }
 
   &:checked {
-    + .FormControl--checkbox-svg {
-      .FormControl--checkbox-background {
-        fill: var(--color-accent-fg);
-        stroke: var(--color-accent-fg);
-      }
+    background: var(--color-accent-fg);
+    border-color: var(--color-accent-fg);
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
+    transition: border-color, background 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; // unchecked -> checked
 
-      .FormControl--checkbox-check {
-        fill: var(--color-fg-on-emphasis);
-        visibility: visible;
+    &::before {
+      visibility: visible;
+      transition: visibility 0s linear 0s;
 
-        @media screen and (prefers-reduced-motion: no-preference) {
-          animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
-        }
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
       }
     }
   }
 
-  &:indeterminate {
-    + .FormControl--checkbox-svg {
-      .FormControl--checkbox-background {
-        fill: var(--color-accent-fg);
-        stroke: var(--color-accent-fg);
-      }
+  &:focus,
+  &:focus-visible {
+    outline-offset: 2px;
+  }
 
-      .FormControl--checkbox-indeterminate {
-        fill: var(--color-fg-on-emphasis);
-        visibility: visible;
-      }
+  &:indeterminate {
+    &::before {
+      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+      visibility: visible;
     }
   }
+}
 
-  @keyframes checkmarkIn {
-    from {
-      clip-path: inset(16px 0 0 0);
-    }
+input[type='radio'].FormControl--radio {
+  border-radius: var(--primer-borderRadius-full, 100vh);
+
+  &::before {
+    clip-path: circle(0%);
+    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgOS4zNzVDNy40MTYyMiA5LjM3NSA5LjM3NSA3LjQxNjIyIDkuMzc1IDVDOS4zNzUgMi41ODM3NiA3LjQxNjIyIDAuNjI1IDUgMC42MjVDMi41ODM3NiAwLjYyNSAwLjYyNSAyLjU4Mzc2IDAuNjI1IDVDMC42MjUgNy40MTYyMiAyLjU4Mzc2IDkuMzc1IDUgOS4zNzVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); // checked circle image
+    mask-size: 65%;
 
-    to {
-      clip-path: inset(0 0 0 0);
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: radioOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; // slightly snappier animation out
     }
   }
 
-  @keyframes checkmarkOut {
-    from {
-      clip-path: inset(0 0 0 0);
+  &:checked {
+    &::before {
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: radioIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+      }
     }
+  }
+}
 
-    to {
-      clip-path: inset(16px 0 0 0);
-    }
+@keyframes checkmarkIn {
+  from {
+    clip-path: inset(var(--base-size-16, 16px) 0 0 0);
+  }
+
+  to {
+    clip-path: inset(0 0 0 0);
   }
 }
 
-.FormControl--checkbox-svg {
-  width: var(--base-size-16, 16px);
-  height: var(--base-size-16, 16px);
-  margin-top: 0.125rem;
-  cursor: pointer;
+@keyframes checkmarkOut {
+  from {
+    clip-path: inset(0 0 0 0);
+  }
+
+  to {
+    clip-path: inset(var(--base-size-16, 16px) 0 0 0);
+  }
+}
 
-  .FormControl--checkbox-background {
-    fill: var(--color-canvas-default);
-    stroke: var(--color-border-default);
+@keyframes radioIn {
+  from {
+    clip-path: circle(0%);
   }
 
-  .FormControl--checkbox-check {
-    visibility: hidden;
-    transition: visibility 0s linear 200ms;
-    clip-path: inset(16px 0 0 0);
+  to {
+    clip-path: circle(100%);
+  }
+}
 
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
-    }
+@keyframes radioOut {
+  from {
+    clip-path: circle(100%);
   }
 
-  .FormControl--checkbox-indeterminate {
-    fill: transparent;
-    visibility: hidden;
+  to {
+    clip-path: circle(0%);
   }
 }