Revert "Convert padding and border utilities to rem units with fallbacks (#2315)"

This reverts commit 15ef15b.

Author: langermank

src/support/variables/misc.scss

@@ -4,7 +4,6 @@
 $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;

src/utilities/borders.scss

@@ -1,41 +1,41 @@
 // Core border utilities
-// stylelint-disable block-opening-brace-space-before, primer/borders
+// stylelint-disable block-opening-brace-space-before
 
 /* Add a gray border to the left and right */
 .border-x {
-  border-right: $border-rem !important;
-  border-left: $border-rem !important;
+  border-right: $border !important;
+  border-left: $border !important;
 }
 
 /* Add a gray border to the top and bottom */
 .border-y {
-  border-top: $border-rem !important;
-  border-bottom: $border-rem !important;
+  border-top: $border !important;
+  border-bottom: $border !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-rem !important; }
+    .border#{$variant}        { border: $border !important; }
     .border#{$variant}-0      { border: 0 !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    { 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-0    { border-top: 0 !important; }
     .border#{$variant}-right-0  { border-right: 0 !important; }
     .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
     .border#{$variant}-left-0   { border-left: 0 !important; }
 
     // Rounded corners
-    .rounded#{$variant}   { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}   { border-radius: $border-radius !important; }
     .rounded#{$variant}-0 { border-radius: 0 !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; }
+    .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; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
@@ -46,29 +46,30 @@
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
+          border-#{$corner}-radius: $border-radius-1 !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
+          border-#{$corner}-radius: $border-radius-2 !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
+          border-#{$corner}-radius: $border-radius-3 !important;
         }
       }
     }
   }
 }
 
 /* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
+.circle { border-radius: 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;
 }

src/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-rem-extended {
-      @if ($scale < length($spacer-map-rem)) {
+    @each $scale, $size in $spacer-map-extended {
+      @if ($scale < length($spacer-map)) {
         /* 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-rem)) {
+      @if ($scale < length($spacer-map)) {
         /* 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: var(--base-size-16, $spacer-3) !important;
-  padding-left: var(--base-size-16, $spacer-3) !important;
+  padding-right: $spacer-3 !important;
+  padding-left: $spacer-3 !important;
 
   @include breakpoint(sm) {
-    padding-right: var(--base-size-40, $spacer-6) !important;
-    padding-left: var(--base-size-40, $spacer-6) !important;
+    padding-right: $spacer-6 !important;
+    padding-left: $spacer-6 !important;
   }
 
   @include breakpoint(lg) {
-    padding-right: var(--base-size-16, $spacer-3) !important;
-    padding-left: var(--base-size-16, $spacer-3) !important;
+    padding-right: $spacer-3 !important;
+    padding-left: $spacer-3 !important;
   }
 }