@primer/css 20.6.1-rc.ff703ef2 → 20.6.1

package/dropdown/dropdown.scss

@@ -92,7 +92,7 @@
       opacity: 1;
     }
 
-    [class*='color-text-'] {
+    [class*='color-fg-'] {
       color: inherit !important;
     }
 

package/forms/FormControl.scss

@@ -50,7 +50,7 @@
 @mixin Field {
   color: var(--color-fg-default);
   background-color: var(--color-canvas-default);
-  border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
 
   &[disabled] {
     color: var(--color-primer-fg-disabled);
@@ -77,7 +77,7 @@
   }
 
   // default focus state
-  &:focus-visible {
+  &:not([type='checkbox']):not([type='radio']):focus-visible {
     @include focusBoxShadowInset;
   }
 }
@@ -520,8 +520,7 @@
 
 // these selectors are temporary to override base.scss
 // once Field styles are widely adopted, we can adjust this and the global base styles
-input[type='checkbox'].FormControl-checkbox,
-input[type='radio'].FormControl-radio {
+input[type='checkbox'].FormControl-checkbox {
   @include Field;
 
   position: relative;
@@ -531,7 +530,7 @@ input[type='radio'].FormControl-radio {
   margin: 0;
   margin-top: 0.125rem; // 2px to center align with label (20px line-height)
   cursor: pointer;
-  border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
+  border-color: var(--color-neutral-emphasis);
   border-radius: var(--primer-borderRadius-small, 3px);
   transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out
   appearance: none;
@@ -604,9 +603,8 @@ input[type='radio'].FormControl-radio {
     // stylelint-enable primer/colors
   }
 
-  &:focus,
   &:focus-visible {
-    outline-offset: 2px;
+    @include focusOutline(2px);
   }
 
   &:indeterminate {
@@ -618,31 +616,44 @@ input[type='radio'].FormControl-radio {
 }
 
 input[type='radio'].FormControl-radio {
-  border-radius: var(--primer-borderRadius-full, 100vh);
+  @include Field;
 
-  &::before {
-    clip-path: circle(0%);
-    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgOS4zNzVDNy40MTYyMiA5LjM3NSA5LjM3NSA3LjQxNjIyIDkuMzc1IDVDOS4zNzUgMi41ODM3NiA3LjQxNjIyIDAuNjI1IDUgMC42MjVDMi41ODM3NiAwLjYyNSAwLjYyNSAyLjU4Mzc2IDAuNjI1IDVDMC42MjUgNy40MTYyMiAyLjU4Mzc2IDkuMzc1IDUgOS4zNzVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); // checked circle image
-    mask-size: 65%;
+  position: relative;
+  width: var(--base-size-16, 16px);
+  height: var(--base-size-16, 16px);
+  margin: 0;
+  margin-top: 0.125rem; // 2px to center align with label (20px line-height)
+  cursor: pointer;
+  border-color: var(--color-neutral-emphasis);
+  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
+  appearance: none;
 
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: radioOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; // slightly snappier animation out
-    }
+  &::after {
+    @include minTouchTarget(var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px));
   }
 
   &:checked {
-    &::before {
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: radioIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
-      }
+    border-color: var(--color-accent-fg);
+    border-width: var(--base-size-4, 4px);
+
+    &:disabled {
+      cursor: not-allowed;
+      border-color: var(--color-primer-fg-disabled);
     }
   }
 
-  &:indeterminate {
-    &::before {
-      visibility: hidden;
-    }
+  &:focus-visible {
+    @include focusOutline(2px);
+  }
+
+  // Windows High Contrast mode
+  // stylelint-disable primer/colors
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+    border-color: CanvasText;
   }
+  // stylelint-enable primer/colors
 }
 
 @keyframes checkmarkIn {
@@ -664,23 +675,3 @@ input[type='radio'].FormControl-radio {
     clip-path: inset(var(--base-size-16, 16px) 0 0 0);
   }
 }
-
-@keyframes radioIn {
-  from {
-    clip-path: circle(0%);
-  }
-
-  to {
-    clip-path: circle(100%);
-  }
-}
-
-@keyframes radioOut {
-  from {
-    clip-path: circle(100%);
-  }
-
-  to {
-    clip-path: circle(0%);
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.6.1-rc.ff703ef2",
+  "version": "20.6.1",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",