Merge branch 'main' into markdown-img-bg

dylanatsmith · web-flow · commit c57737e1f334 · 2024-09-17T15:52:11.000+01:00
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,8 +41,8 @@
     "build:storybook": "cd docs && npm i && npm run build:storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^8.2.0",
-    "@primer/view-components": "^0.30.0"
+    "@primer/primitives": "^9.0.3",
+    "@primer/view-components": "^0.33.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
@@ -12,14 +12,17 @@
   list-style: none;
   cursor: pointer;
   background: var(--overlay-bgColor, var(--color-canvas-overlay));
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
   box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
 
   li {
     display: block;
     padding: var(--base-size-4) var(--base-size-8);
     font-weight: $font-weight-semibold;
+    // stylelint-disable-next-line primer/borders
     border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
     small {
@@ -29,12 +32,16 @@
 
     &:last-child {
       border-bottom: 0;
+      // stylelint-disable-next-line primer/borders
       border-bottom-right-radius: $border-radius;
+      // stylelint-disable-next-line primer/borders
       border-bottom-left-radius: $border-radius;
     }
 
     &:first-child {
+      // stylelint-disable-next-line primer/borders
       border-top-left-radius: $border-radius;
+      // stylelint-disable-next-line primer/borders
       border-top-right-radius: $border-radius;
     }
 
diff --git a/src/base/base.scss b/src/base/base.scss
@@ -61,6 +61,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
+  // stylelint-disable-next-line primer/borders
   border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include clearfix();
@@ -72,6 +73,7 @@ hr,
 
 table {
   border-spacing: 0;
+  // stylelint-disable-next-line primer/borders
   border-collapse: collapse;
 }
 
diff --git a/src/base/kbd.scss b/src/base/kbd.scss
@@ -13,6 +13,7 @@ kbd {
   // stylelint-disable-next-line primer/borders
   border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
   border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
diff --git a/src/box/box-overlay.scss b/src/box/box-overlay.scss
@@ -12,8 +12,11 @@
   .Box-header {
     margin: 0;
     border-width: 0;
+    // stylelint-disable-next-line primer/borders
     border-bottom-width: $border-width;
+    // stylelint-disable-next-line primer/borders
     border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-top-right-radius: $border-radius;
   }
 }
diff --git a/src/branch-name/branch-name.scss b/src/branch-name/branch-name.scss
@@ -10,6 +10,7 @@
   color: var(--fgColor-muted, var(--color-fg-muted));
   word-break: break-all;
   background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
 
   .octicon {
diff --git a/src/buttons/button-group.scss b/src/buttons/button-group.scss
@@ -23,13 +23,18 @@
   border-radius: 0;
 
   &:first-child {
+    // stylelint-disable-next-line primer/borders
     border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-left-radius: $border-radius;
   }
 
   &:last-child {
+    // stylelint-disable-next-line primer/borders
     border-right-width: $border-width;
+    // stylelint-disable-next-line primer/borders
     border-top-right-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-right-radius: $border-radius;
   }
 
@@ -38,6 +43,7 @@
   &:focus,
   &:active,
   &:hover {
+    // stylelint-disable-next-line primer/borders
     border-right-width: $border-width;
 
     + .BtnGroup-item,
@@ -51,13 +57,18 @@
   float: left;
 
   &:first-child .BtnGroup-item {
+    // stylelint-disable-next-line primer/borders
     border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-left-radius: $border-radius;
   }
 
   &:last-child .BtnGroup-item {
+    // stylelint-disable-next-line primer/borders
     border-right-width: $border-width;
+    // stylelint-disable-next-line primer/borders
     border-top-right-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-right-radius: $border-radius;
   }
 
@@ -72,6 +83,7 @@
   &:active,
   &:hover {
     .BtnGroup-item {
+      // stylelint-disable-next-line primer/borders
       border-right-width: $border-width;
     }
 
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
@@ -14,7 +14,9 @@
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style;
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
   appearance: none; // Corrects inability to style clickable `input` types in iOS.
 
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
@@ -32,6 +32,7 @@
   &:not(.dropdown-item) {
     &:focus,
     &:focus-visible {
+      // stylelint-disable-next-line primer/borders
       border-radius: $border-radius;
       outline-offset: 0;
     }
@@ -45,6 +46,7 @@
   color: var(--fgColor-accent, var(--color-accent-fg));
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
   box-shadow: none;
 
@@ -103,6 +105,7 @@
 
   &:focus,
   &:focus-visible {
+    // stylelint-disable-next-line primer/borders
     border-radius: $border-radius;
   }
 
@@ -214,9 +217,12 @@
   color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
   background-color: var(--bgColor-default, var(--color-canvas-default));
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border));
   border-left: 0;
+  // stylelint-disable-next-line primer/borders
   border-top-right-radius: $border-radius;
+  // stylelint-disable-next-line primer/borders
   border-bottom-right-radius: $border-radius;
   box-shadow: var(--shadow-resting-small, var(--color-shadow-small)), var(--shadow-highlight, var(--color-primer-shadow-highlight));
 
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
@@ -17,7 +17,9 @@
   background-color: var(--bgColor-default, var(--color-canvas-default));
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
   box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
@@ -43,6 +45,7 @@
   &.border-0 {
     &:focus,
     &:focus-visible {
+      // stylelint-disable-next-line primer/borders
       border: $border-width $border-style var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important;
     }
   }
@@ -143,6 +146,7 @@ textarea.form-control {
       padding: 2px var(--base-size-4);
       font-style: normal;
       background: var(--bgColor-attention-muted, var(--color-attention-subtle));
+      // stylelint-disable-next-line primer/borders
       border-radius: $border-radius;
     }
   }
@@ -254,7 +258,9 @@ input::-webkit-inner-spin-button {
   font-size: $h5-size;
   color: var(--fgColor-attention, var(--color-attention-fg));
   background: var(--bgColor-attention-muted, var(--color-attention-subtle));
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
 
   p {
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
@@ -176,8 +176,11 @@
       margin: var(--base-size-8) 0 0;
       font-size: $font-size-small;
       font-weight: $font-weight-normal;
+      // stylelint-disable-next-line primer/borders
       border-style: $border-style;
+      // stylelint-disable-next-line primer/borders
       border-width: $border-width;
+      // stylelint-disable-next-line primer/borders
       border-radius: $border-radius;
 
       &::after,
diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss
@@ -15,6 +15,7 @@
   line-height: 20px; // Specifically not inherit our `<body>` default
   color: var(--fgColor-default, var(--color-fg-default));
   cursor: pointer;
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
 
   :checked + & {
@@ -25,12 +26,16 @@
 
   &:first-of-type {
     margin-left: 0;
+    // stylelint-disable-next-line primer/borders
     border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-left-radius: $border-radius;
   }
 
   &:last-of-type {
+    // stylelint-disable-next-line primer/borders
     border-top-right-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-right-radius: $border-radius;
   }
 
diff --git a/src/header/header.scss b/src/header/header.scss
@@ -37,6 +37,7 @@
 .Header-input {
   color: var(--header-fgColor-default, var(--color-header-text));
   background-color: var(--headerSearch-bgColor, var(--color-header-search-bg));
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border));
   box-shadow: none;
 
diff --git a/src/labels/mixins.scss b/src/labels/mixins.scss
@@ -12,7 +12,9 @@
   font-weight: $font-weight-semibold;
   line-height: 18px;
   white-space: nowrap;
+  // stylelint-disable-next-line primer/borders
   border: $border-width $border-style transparent;
+  // stylelint-disable-next-line primer/borders
   border-radius: 2em;
 }
 
diff --git a/src/layout/app-frame.scss b/src/layout/app-frame.scss
@@ -1,6 +1,5 @@
 // stylelint-disable max-nesting-depth
 // stylelint-disable primer/spacing
-// stylelint-disable primer/borders
 
 .AppFrame {
 
diff --git a/src/layout/stack.scss b/src/layout/stack.scss
@@ -161,14 +161,14 @@
 
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
-    border-block-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-block-end: var(--borderWidth-thin, var(--borderWidth-thin)) solid var(--Stack-divider-color);
     inline-size: auto;
     block-size: 0;
   }
 
   .Stack--dir-inline#{$viewportRange} > .Stack-divider,
   .Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
-    border-inline-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-inline-end: var(--borderWidth-thin, var(--borderWidth-thin)) solid var(--Stack-divider-color);
     inline-size: 0;
     block-size: auto;
   }
diff --git a/src/markdown/code.scss b/src/markdown/code.scss
@@ -10,6 +10,7 @@
     font-size: 85%;
     white-space: break-spaces; // keeps rendering spaces, but breaks them onto multiple lines
     background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
+    // stylelint-disable-next-line primer/borders
     border-radius: $border-radius;
 
     br { display: none; }
@@ -60,6 +61,7 @@
     line-height: 1.45;
     color: var(--fgColor-default, var(--color-fg-default));
     background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+    // stylelint-disable-next-line primer/borders
     border-radius: $border-radius;
   }
 
diff --git a/src/markdown/footnotes.scss b/src/markdown/footnotes.scss
@@ -15,6 +15,7 @@
   .footnotes {
     font-size: $h6-size;
     color: var(--fgColor-muted, var(--color-fg-muted));
+    // stylelint-disable-next-line primer/borders
     border-top: $border;
 
     ol {
@@ -41,6 +42,7 @@
       content: '';
       // stylelint-disable-next-line primer/borders
       border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+      // stylelint-disable-next-line primer/borders
       border-radius: $border-radius;
     }
 
diff --git a/src/markdown/headings.scss b/src/markdown/headings.scss
@@ -41,6 +41,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
+    // stylelint-disable-next-line primer/borders
     border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
@@ -49,6 +50,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
+    // stylelint-disable-next-line primer/borders
     border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
diff --git a/src/markdown/images.scss b/src/markdown/images.scss
@@ -43,6 +43,7 @@
       // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
+      // stylelint-disable-next-line primer/borders
       border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
diff --git a/src/markdown/tables.scss b/src/markdown/tables.scss
@@ -17,6 +17,7 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
+      // stylelint-disable-next-line primer/borders
       border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
@@ -28,6 +29,7 @@
 
     tr {
       background-color: var(--bgColor-default, var(--color-canvas-default));
+      // stylelint-disable-next-line primer/borders
       border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
       &:nth-child(2n) {
diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
@@ -35,6 +35,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
 
   &:hover {
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
@@ -16,6 +16,7 @@
   text-align: left;
   background-color: transparent;
   border: 0;
+  // stylelint-disable-next-line primer/borders
   border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   &:first-child {
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss
diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss

Original file line number	Diff line number	Diff line change
`@@ -12,8 +12,11 @@`
`12`	`12`	`.Box-header {`
`13`	`13`	`margin: 0;`
`14`	`14`	`border-width: 0;`
	`15`	`+ // stylelint-disable-next-line primer/borders`
`15`	`16`	`border-bottom-width: $border-width;`
	`17`	`+ // stylelint-disable-next-line primer/borders`
`16`	`18`	`border-top-left-radius: $border-radius;`
	`19`	`+ // stylelint-disable-next-line primer/borders`
`17`	`20`	`border-top-right-radius: $border-radius;`
`18`	`21`	`}`
`19`	`22`	`}`