@primer/css 20.6.1-rc.ff703ef2 → 20.7.0-rc.5025a8f3

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.7.0-rc.5025a8f3",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",

package/support/variables/layout.scss

@@ -9,16 +9,14 @@ $display-values: (
   inline-flex,
   none,
   table,
-  table-cell
-) !default;
+  table-cell) !default;
 
 // maps edges to respective corners for border-radius
 $edges: (
   top: (top-left, top-right),
   right: (top-right, bottom-right),
   bottom: (bottom-right, bottom-left),
-  left: (bottom-left, top-left)
-) !default;
+  left: (bottom-left, top-left)) !default;
 
 // These are our margin and padding utility spacers. The default step size we
 // use is 8px. This gives us a key of:
@@ -32,13 +30,13 @@ $edges: (
 $spacer: 8px !default;
 
 // Our spacing scale
-$spacer-0: 0 !default;                  // 0
-$spacer-1: $spacer * 0.5 !default;      // 4px
-$spacer-2: $spacer !default;            // 8px
-$spacer-3: $spacer * 2 !default;        // 16px
-$spacer-4: $spacer * 3 !default;        // 24px
-$spacer-5: $spacer * 4 !default;        // 32px
-$spacer-6: $spacer * 5 !default;        // 40px
+$spacer-0: 0 !default; // 0
+$spacer-1: $spacer * 0.5 !default; // 4px
+$spacer-2: $spacer !default; // 8px
+$spacer-3: $spacer * 2 !default; // 16px
+$spacer-4: $spacer * 3 !default; // 24px
+$spacer-5: $spacer * 4 !default; // 32px
+$spacer-6: $spacer * 5 !default; // 40px
 
 // The list of spacer values
 $spacers: (
@@ -66,9 +64,9 @@ $spacer-map: (
 // Increases the core spacing scale first by 8px for $spacer-7, then by 16px
 // increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
 // 80, 96, etc.
-$spacer-7:  $spacer * 6 !default;  // 48px
-$spacer-8:  $spacer * 8 !default;  // 64px
-$spacer-9:  $spacer * 10 !default; // 80px
+$spacer-7: $spacer * 6 !default; // 48px
+$spacer-8: $spacer * 8 !default; // 64px
+$spacer-9: $spacer * 10 !default; // 80px
 $spacer-10: $spacer * 12 !default; // 96px
 $spacer-11: $spacer * 14 !default; // 112px
 $spacer-12: $spacer * 16 !default; // 128px
@@ -83,43 +81,42 @@ $spacers-large: (
 ) !default;
 
 $spacer-map-extended: map-merge(
-  (
-    0: 0,
-    1: $spacer-1,
-    2: $spacer-2,
-    3: $spacer-3,
-    4: $spacer-4,
-    5: $spacer-5,
-    6: $spacer-6,
-  ),
-  $spacers-large,
+  (0: 0,
+  1: $spacer-1,
+  2: $spacer-2,
+  3: $spacer-3,
+  4: $spacer-4,
+  5: $spacer-5,
+  6: $spacer-6,
+),
+$spacers-large,
 ) !default;
 
 // Em spacer variables
 $em-spacer-1: 0.0625em !default; // 1/16
-$em-spacer-2: 0.125em !default;  // 1/8
-$em-spacer-3: 0.25em !default;   // 1/4
-$em-spacer-4: 0.375em !default;  // 3/8
-$em-spacer-5: 0.5em !default;    // 1/2
-$em-spacer-6: 0.75em !default;   // 3/4
+$em-spacer-2: 0.125em !default; // 1/8
+$em-spacer-3: 0.25em !default; // 1/4
+$em-spacer-4: 0.375em !default; // 3/8
+$em-spacer-5: 0.5em !default; // 1/2
+$em-spacer-6: 0.75em !default; // 3/4
 
 // Size scale
 // Used for buttons, inputs, labels, avatars etc.
 $size: 16px !default;
 
 $size-0: 0 !default;
-$size-1: $size !default;           // 16px
-$size-2: $size-1 +  4px !default;  // 20px
-$size-3: $size-2 +  4px !default;  // 24px
-$size-4: $size-3 +  4px !default;  // 28px
-$size-5: $size-4 +  4px !default;  // 32px
-$size-6: $size-5 +  8px !default;  // 40px
-$size-7: $size-6 +  8px !default;  // 48px
-$size-8: $size-7 + 16px !default;  // 64px
+$size-1: $size !default; // 16px
+$size-2: $size-1 + 4px !default; // 20px
+$size-3: $size-2 + 4px !default; // 24px
+$size-4: $size-3 + 4px !default; // 28px
+$size-5: $size-4 + 4px !default; // 32px
+$size-6: $size-5 + 8px !default; // 40px
+$size-7: $size-6 + 8px !default; // 48px
+$size-8: $size-7 + 16px !default; // 64px
 
 // Fixed-width container variables
 $container-width: 980px !default;
-$grid-gutter:     10px !default;
+$grid-gutter: 10px !default;
 
 // Breakpoint widths
 $width-xs: 0 !default;
@@ -143,8 +140,7 @@ $breakpoints: (
   sm: $width-sm,
   md: $width-md,
   lg: $width-lg,
-  xl: $width-xl
-) !default;
+  xl: $width-xl) !default;
 
 // Viewport ranges
 // Soon to be provided by Primer Primitives directly
@@ -170,39 +166,65 @@ $responsive-positions: (
   relative,
   absolute,
   fixed,
-  sticky
-) !default;
+  sticky) !default;
 
 $sidebar-width: (
   sm: 220px,
   md: 256px,
-  lg: 296px
-) !default;
+  lg: 296px) !default;
 
 $sidebar-narrow-width: (
   md: 240px,
-  lg: 256px
-) !default;
+  lg: 256px) !default;
 
 $sidebar-wide-width: (
   lg: 320px,
-  xl: 336px
-) !default;
+  xl: 336px) !default;
 
 $gutter: (
   md: $spacer-3,
   lg: $spacer-4,
-  xl: $spacer-5
-) !default;
+  xl: $spacer-5) !default;
 
 $gutter-condensed: (
   md: $spacer-3,
   lg: $spacer-3,
-  xl: $spacer-4
-) !default;
+  xl: $spacer-4) !default;
 
 $gutter-spacious: (
   md: $spacer-4,
   lg: $spacer-5,
-  xl: $spacer-6
+  xl: $spacer-6) !default;
+
+// rem unit support
+
+$spacer-map-rem: (
+  0: 0,
+  1: var(--base-size-4, 4px),
+  2: var(--base-size-8, 8px),
+  3: var(--base-size-16, 16px),
+  4: var(--base-size-24, 24px),
+  5: var(--base-size-32, 32px),
+  6: var(--base-size-40, 40px),
+) !default;
+
+$spacers-large-rem: (
+  7: var(--base-size-48, 48px),
+  8: var(--base-size-64, 64px),
+  9: var(--base-size-80, 80px),
+  10: var(--base-size-96, 96px),
+  11: var(--base-size-112, 112px),
+  12: var(--base-size-128, 128px),
+) !default;
+
+$spacer-map-rem-extended: map-merge(
+  (0: 0,
+  1: var(--base-size-4, 4px),
+  2: var(--base-size-8, 8px),
+  3: var(--base-size-16, 16px),
+  4: var(--base-size-24, 24px),
+  5: var(--base-size-32, 32px),
+  6: var(--base-size-40, 40px),
+),
+$spacers-large-rem,
 ) !default;

package/utilities/margin.scss

@@ -8,8 +8,8 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @each $scale, $size in $spacer-map-extended {
-      @if ($scale < length($spacer-map)) {
+    @each $scale, $size in $spacer-map-rem-extended {
+      @if ($scale < length($spacer-map-rem)) {
         /* Set a $size margin to all sides at $breakpoint */
         .m#{$variant}-#{$scale}  { margin: $size !important; }
       }
@@ -19,7 +19,7 @@
       /* Set a $size margin on the bottom at $breakpoint */
       .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
 
-      @if ($scale < length($spacer-map)) {
+      @if ($scale < length($spacer-map-rem)) {
         /* Set a $size margin on the right at $breakpoint */
         .mr#{$variant}-#{$scale} { margin-right: $size !important; }
         /* Set a $size margin on the left at $breakpoint */
@@ -28,19 +28,19 @@
 
       @if ($size != 0) {
         /* Set a negative $size margin on top at $breakpoint */
-        .mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
+        .mt#{$variant}-n#{$scale} { margin-top: calc(-1 * $size) !important; }
         /* Set a negative $size margin on the bottom at $breakpoint */
-        .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
+        .mb#{$variant}-n#{$scale} { margin-bottom: calc(-1 * $size) !important; }
 
-        @if ($scale < length($spacer-map)) {
+        @if ($scale < length($spacer-map-rem)) {
           /* Set a negative $size margin on the right at $breakpoint */
-          .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
+          .mr#{$variant}-n#{$scale} { margin-right : calc(-1 * $size) !important; }
           /* Set a negative $size margin on the left at $breakpoint */
-          .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
+          .ml#{$variant}-n#{$scale} { margin-left  : calc(-1 * $size) !important; }
         }
       }
 
-      @if ($scale < length($spacer-map)) {
+      @if ($scale < length($spacer-map-rem)) {
         /* Set a $size margin on the left & right at $breakpoint */
         .mx#{$variant}-#{$scale} {
           margin-right: $size !important;