@primer/css 20.6.1 → 20.7.0-rc.434deca0

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/support/variables/misc.scss

@@ -4,6 +4,7 @@
 $border-width: 1px !default;
 $border-style: solid !default;
 $border: $border-width $border-style var(--color-border-default) !default;
+$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;

package/support/variables/typography.scss

@@ -21,10 +21,10 @@ $h6-size: 12px !default;
 $font-size-small: 12px !default;
 
 // Font weights
-$font-weight-bold: 600 !default;
-$font-weight-semibold: 500 !default;
-$font-weight-normal: 400 !default;
-$font-weight-light: 300 !default;
+$font-weight-bold: var(--base-text-weight-medium, 600) !default;
+$font-weight-semibold: var(--base-text-weight-semibold, 500) !default;
+$font-weight-normal: var(--base-text-weight-normal, 400) !default;
+$font-weight-light: var(--base-text-weight-light, 300) !default;
 
 // Line heights
 $lh-condensed-ultra: 1 !default;

package/utilities/borders.scss

@@ -1,29 +1,29 @@
 // Core border utilities
-// stylelint-disable block-opening-brace-space-before
+// stylelint-disable block-opening-brace-space-before, primer/borders
 
 /* Add a gray border to the left and right */
 .border-x {
-  border-right: $border !important;
-  border-left: $border !important;
+  border-right: $border-rem !important;
+  border-left: $border-rem !important;
 }
 
 /* Add a gray border to the top and bottom */
 .border-y {
-  border-top: $border !important;
-  border-bottom: $border !important;
+  border-top: $border-rem !important;
+  border-bottom: $border-rem !important;
 }
 
 /* Responsive gray borders */
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     /* Add a gray border on all sides at/above this breakpoint */
-    .border#{$variant}        { border: $border !important; }
+    .border#{$variant}        { border: $border-rem !important; }
     .border#{$variant}-0      { border: 0 !important; }
 
-    .border#{$variant}-top    { border-top: $border !important; }
-    .border#{$variant}-right  { border-right: $border !important; }
-    .border#{$variant}-bottom { border-bottom: $border !important; }
-    .border#{$variant}-left   { border-left: $border !important; }
+    .border#{$variant}-top    { border-top: $border-rem !important; }
+    .border#{$variant}-right  { border-right: $border-rem !important; }
+    .border#{$variant}-bottom { border-bottom: $border-rem !important; }
+    .border#{$variant}-left   { border-left: $border-rem !important; }
 
     .border#{$variant}-top-0    { border-top: 0 !important; }
     .border#{$variant}-right-0  { border-right: 0 !important; }
@@ -31,11 +31,11 @@
     .border#{$variant}-left-0   { border-left: 0 !important; }
 
     // Rounded corners
-    .rounded#{$variant}   { border-radius: $border-radius !important; }
+    .rounded#{$variant}   { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
     .rounded#{$variant}-0 { border-radius: 0 !important; }
-    .rounded#{$variant}-1 { border-radius: $border-radius-1 !important; }
-    .rounded#{$variant}-2 { border-radius: $border-radius-2 !important; }
-    .rounded#{$variant}-3 { border-radius: $border-radius-3 !important; }
+    .rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
+    .rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
@@ -46,19 +46,19 @@
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius-1 !important;
+          border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius-2 !important;
+          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius-3 !important;
+          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
         }
       }
     }
@@ -66,10 +66,9 @@
 }
 
 /* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: 50% !important; }
+.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
 
 /* Change the border style to dashed, in conjunction with another utility */
 .border-dashed {
-  // stylelint-disable-next-line primer/borders
   border-style: dashed !important;
 }

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;

package/utilities/padding.scss

@@ -7,8 +7,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 padding to all sides at $breakpoint */
         .p#{$variant}-#{$scale}  { padding: $size !important; }
       }
@@ -22,7 +22,7 @@
       /* Set a $size padding to the left at $breakpoint */
       .pl#{$variant}-#{$scale} { padding-left: $size !important; }
 
-      @if ($scale < length($spacer-map)) {
+      @if ($scale < length($spacer-map-rem)) {
         /* Set a $size padding to the left & right at $breakpoint */
         .px#{$variant}-#{$scale} {
           padding-right: $size !important;
@@ -41,16 +41,16 @@
 
 // responsive padding for containers
 .p-responsive {
-  padding-right: $spacer-3 !important;
-  padding-left: $spacer-3 !important;
+  padding-right: var(--base-size-16, $spacer-3) !important;
+  padding-left: var(--base-size-16, $spacer-3) !important;
 
   @include breakpoint(sm) {
-    padding-right: $spacer-6 !important;
-    padding-left: $spacer-6 !important;
+    padding-right: var(--base-size-40, $spacer-6) !important;
+    padding-left: var(--base-size-40, $spacer-6) !important;
   }
 
   @include breakpoint(lg) {
-    padding-right: $spacer-3 !important;
-    padding-left: $spacer-3 !important;
+    padding-right: var(--base-size-16, $spacer-3) !important;
+    padding-left: var(--base-size-16, $spacer-3) !important;
   }
 }