From 2349823b96d32f71b85ed2abd3e7fb86a5185950 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 15 Nov 2022 08:50:00 -0800
Subject: [PATCH 1/8] add rem units

---
 src/support/variables/layout.scss | 140 +++++++++++++++++-------------
 src/utilities/margin.scss         |  10 +--
 2 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/src/support/variables/layout.scss b/src/support/variables/layout.scss
index 15abe59e82..b5db766f50 100644
--- a/src/support/variables/layout.scss
+++ b/src/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: (
@@ -49,7 +47,7 @@ $spacers: (
   $spacer-4,
   $spacer-5,
   $spacer-6,
-) !default;
+  ) !default;
 
 // And the map of spacers, for easier looping:
 // @each $scale, $length in $spacer-map { ... }
@@ -61,14 +59,14 @@ $spacer-map: (
   4: $spacer-4,
   5: $spacer-5,
   6: $spacer-6,
-) !default;
+  ) !default;
 
 // 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
@@ -80,46 +78,44 @@ $spacers-large: (
   10: $spacer-10,
   11: $spacer-11,
   12: $spacer-12,
-) !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,
-) !default;
+  ) !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,
+  ) !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 +139,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
@@ -162,7 +157,7 @@ $responsive-variants: (
   md: '-md',
   lg: '-lg',
   xl: '-xl',
-) !default;
+  ) !default;
 
 // responsive utility position values
 $responsive-positions: (
@@ -170,39 +165,64 @@ $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: 0px,
+  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;
diff --git a/src/utilities/margin.scss b/src/utilities/margin.scss
index 798c3781f9..70edf3182a 100644
--- a/src/utilities/margin.scss
+++ b/src/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 */
@@ -32,7 +32,7 @@
         /* Set a negative $size margin on the bottom at $breakpoint */
         .mb#{$variant}-n#{$scale} { margin-bottom: -$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; }
           /* Set a negative $size margin on the left at $breakpoint */
@@ -40,7 +40,7 @@
         }
       }
 
-      @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;

From bc4194952cc88d0f8a3121d778d94a569107ead1 Mon Sep 17 00:00:00 2001
From: Actions Auto Build <actions@github.com>
Date: Tue, 15 Nov 2022 16:51:56 +0000
Subject: [PATCH 2/8] Stylelint auto-fixes

---
 src/support/variables/layout.scss | 52 ++++++++++++++++---------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/support/variables/layout.scss b/src/support/variables/layout.scss
index b5db766f50..cda10d4e16 100644
--- a/src/support/variables/layout.scss
+++ b/src/support/variables/layout.scss
@@ -47,7 +47,7 @@ $spacers: (
   $spacer-4,
   $spacer-5,
   $spacer-6,
-  ) !default;
+) !default;
 
 // And the map of spacers, for easier looping:
 // @each $scale, $length in $spacer-map { ... }
@@ -59,7 +59,7 @@ $spacer-map: (
   4: $spacer-4,
   5: $spacer-5,
   6: $spacer-6,
-  ) !default;
+) !default;
 
 // 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,
@@ -78,18 +78,19 @@ $spacers-large: (
   10: $spacer-10,
   11: $spacer-11,
   12: $spacer-12,
-  ) !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,
-  ) !default;
+) !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,
+) !default;
 
 // Em spacer variables
 $em-spacer-1: 0.0625em !default; // 1/16
@@ -157,7 +158,7 @@ $responsive-variants: (
   md: '-md',
   lg: '-lg',
   xl: '-xl',
-  ) !default;
+) !default;
 
 // responsive utility position values
 $responsive-positions: (
@@ -198,7 +199,7 @@ $gutter-spacious: (
 // rem unit support
 
 $spacer-map-rem: (
-  0: 0px,
+  0: 0,
   1: var(--base-size-4, 4px),
   2: var(--base-size-8, 8px),
   3: var(--base-size-16, 16px),
@@ -216,13 +217,14 @@ $spacers-large-rem: (
   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,
+$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;

From 2f6ca34cdc39a512a4b4343d9ddc3429a592ad61 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Wed, 16 Nov 2022 17:02:09 -0800
Subject: [PATCH 3/8] Create beige-dragons-appear.md

---
 .changeset/beige-dragons-appear.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/beige-dragons-appear.md

diff --git a/.changeset/beige-dragons-appear.md b/.changeset/beige-dragons-appear.md
new file mode 100644
index 0000000000..bd1656c3f1
--- /dev/null
+++ b/.changeset/beige-dragons-appear.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+[WIP] Convert margin utilities to rem units with fallbacks

From e8d6ffe9bf54d65630abf1bcf01f17dd6b0c8b02 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 16 Nov 2022 17:07:22 -0800
Subject: [PATCH 4/8] use rem

---
 src/utilities/padding.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/utilities/padding.scss b/src/utilities/padding.scss
index 8c73063c36..28309819c6 100644
--- a/src/utilities/padding.scss
+++ b/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-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;
   }
 }

From 796d323d87379fc8ace2cda8c670bfaa9284e981 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 16 Nov 2022 17:14:58 -0800
Subject: [PATCH 5/8] borders

---
 src/support/variables/misc.scss |  1 +
 src/utilities/borders.scss      | 34 ++++++++++++++++-----------------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
index bdda59f19e..9e3c5b0d93 100644
--- a/src/support/variables/misc.scss
+++ b/src/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;
diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index 6acf8faba7..a017ddcf97 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -3,27 +3,27 @@
 
 /* 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-medium,  $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,7 +66,7 @@
 }
 
 /* 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 {

From 7a296d11363269f75c7797262f6478ec9f3d8c5b Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Mon, 21 Nov 2022 09:38:36 -0800
Subject: [PATCH 6/8] change from medium to large radius

---
 src/utilities/borders.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index a017ddcf97..8c9f8f6538 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -35,7 +35,7 @@
     .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-medium,  $border-radius-3) !important; }
+    .rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large,  $border-radius-3) !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {

From 57de26087ee9e71b1452ea972e20b3d4d78e3f83 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Mon, 21 Nov 2022 13:13:50 -0800
Subject: [PATCH 7/8] lint

---
 src/utilities/borders.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index 8c9f8f6538..c6383504aa 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -1,5 +1,5 @@
 // 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 {
@@ -31,11 +31,11 @@
     .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: var(--primer-borderRadius-medium, $border-radius-2) !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: 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: var(--primer-borderRadius-small,  $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: var(--primer-borderRadius-medium,  $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: var(--primer-borderRadius-medium,  $border-radius-3) !important;
+          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
         }
       }
     }

From 09731d72616a4639d3c85950e6db6cddaa912955 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Mon, 21 Nov 2022 13:21:56 -0800
Subject: [PATCH 8/8] lint

---
 src/utilities/borders.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index c6383504aa..8e958da267 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -70,6 +70,5 @@
 
 /* Change the border style to dashed, in conjunction with another utility */
 .border-dashed {
-  // stylelint-disable-next-line primer/borders
   border-style: dashed !important;
 }