jekyll-v4-theme-primer 0.12.0 → 0.13.0

data/_sass/@primer/css/select-menu/select-menu.scss

@@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
   left: 0;
   pointer-events: none;
   content: '';
-  background-color: var(--color-primer-canvas-backdrop);
+  background-color: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
 
   @include breakpoint(sm) {
     display: none;
@@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
   overflow: hidden; // Enables border radius on scrollable child elements
   pointer-events: auto;
   flex-direction: column;
-  background-color: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-select-menu-backdrop-border);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
-  box-shadow: var(--color-shadow-large);
+  box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
   animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
 
   @keyframes SelectMenu-modal-animation {
@@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
     max-height: $SelectMenu-max-height;
     margin: $spacer-2 0 $spacer-3 0;
     font-size: $font-size-small;
-    border-color: var(--color-border-default);
+    border-color: var(--borderColor-default, var(--color-border-default));
     border-radius: $border-radius;
-    box-shadow: var(--color-shadow-large);
+    box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
     animation-name: SelectMenu-modal-animation--sm;
   }
 }
@@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -126,7 +126,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   margin: -$spacer-3;
   line-height: 1;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   background-color: transparent;
   border: 0;
 
@@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
   padding: $spacer-3;
   margin: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     padding: $spacer-2;
@@ -173,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 }
 
@@ -187,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
   padding: $spacer-3;
   overflow: hidden;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-align: left;
   cursor: pointer;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
   -webkit-overflow-scrolling: touch;
 
   // Hide scrollbar so it doesn't cover the text
@@ -252,12 +252,12 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
   background-color: transparent;
   border: 0;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     flex: none;
@@ -270,14 +270,14 @@ $SelectMenu-max-height: 480px !default;
 
   &[aria-selected='true'] {
     z-index: 1; // Keeps box-shadow visible when hovering
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
     cursor: default;
-    background-color: var(--color-canvas-overlay);
+    background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 1px var(--color-border-muted);
+    box-shadow: 0 0 0 1px var(--borderColor-muted, var(--color-border-muted));
 
     @include breakpoint(sm) {
-      border-color: var(--color-border-muted);
+      border-color: var(--borderColor-muted, var(--color-border-muted));
       box-shadow: none;
     }
   }
@@ -291,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
   // stylelint-disable-next-line primer/spacing
   padding: 7px $spacer-3;
   text-align: center;
-  background-color: var(--color-canvas-overlay);
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 }
 
 // Blankslate and Loading
@@ -303,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-loading {
   padding: $spacer-4 $spacer-3;
   text-align: center;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
 }
 
 // Divider
@@ -315,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
   margin: 0;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-muted);
-  background-color: var(--color-canvas-subtle);
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   // Borderless
   .SelectMenu-list--borderless & {
-    border-top: $border-width $border-style var(--color-border-muted);
+    border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
     &:empty {
       padding: 0;
@@ -338,9 +338,9 @@ $SelectMenu-max-height: 480px !default;
   z-index: 0; // Avoid top border from getting covered by the negative margin of the list
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
-  border-top: $border-width $border-style var(--color-border-muted);
+  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -387,7 +387,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item[aria-checked='true'] {
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
 
   .SelectMenu-icon--check {
     visibility: visible;
@@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item:disabled,
 .SelectMenu-item[aria-disabled='true'] {
-  color: var(--color-primer-fg-disabled);
+  color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
   pointer-events: none;
 }
 
@@ -413,33 +413,33 @@ $SelectMenu-max-height: 480px !default;
 @media (hover: hover) {
   body:not(.intent-mouse) .SelectMenu-closeButton:focus,
   .SelectMenu-closeButton:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
   }
 
   .SelectMenu-closeButton:active {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 
   body:not(.intent-mouse) .SelectMenu-item:focus,
   .SelectMenu-item:hover {
-    background-color: var(--color-neutral-subtle);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
   }
 
   .SelectMenu-item:active {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   body:not(.intent-mouse) .SelectMenu-tab:focus {
-    background-color: var(--color-select-menu-tap-focus-bg);
+    background-color: var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg));
   }
 
   .SelectMenu-tab:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
   }
 
   .SelectMenu-tab:not([aria-selected='true']):active {
-    color: var(--color-fg-default);
-    background-color: var(--color-canvas-subtle);
+    color: var(--fgColor-default, var(--color-fg-default));
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 }
 
@@ -451,13 +451,13 @@ $SelectMenu-max-height: 480px !default;
   // Android
   .SelectMenu-item:focus,
   .SelectMenu-item:active {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   // iOS Safari
   // :active would work if ontouchstart is added to the button
   // Instead this tweaks the "native" highlight color
   .SelectMenu-item {
-    -webkit-tap-highlight-color: var(--color-select-menu-tap-highlight);
+    -webkit-tap-highlight-color: var(--control-bgColor-active, var(--color-select-menu-tap-highlight));
   }
 }

data/_sass/@primer/css/support/mixins/color-modes.scss

@@ -1,34 +1,122 @@
+// This mixin is used to output the tokens/variables from Primitives
+//
+// Example:
+//
+// @include color-mode-theme(dark) {
+//   --color: black;
+// }
+//
+// Warning!!!
+// Don't use this mixin with a class. E.g.
+// @include color-mode-theme(dark) {
+//   .my-class {
+//     color: red;
+//   }
+// }
+//
+// The outputted `::selection .my-class` will make the selector invalid and the entire ruleset is disregarded.
+// At some point we hopefully can remove the need for `&, &::selection {}` again (once the spec/implementation changes).
+
 @mixin color-mode-theme($theme-name, $include-root: false) {
   @if $include-root {
     :root,
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
-      @content;
+      &,
+      &::selection {
+        @content;
+      }
 
       /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
     }
+
+    ::backdrop,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
+      @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
+    }
   }
 
   @else {
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    ::backdrop,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 
   @media (prefers-color-scheme: light) {
     [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 
   @media (prefers-color-scheme: dark) {
     [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 }
 
+// This mixin wraps styles with light or dark mode selectors
+// If possible, use a color variable instead.
+//
+// Example:
+//
+// @include color-mode('dark') {
+//   .my-class {
+//     color: red;
+//   }
+// }
+//
+// Returns:
+//
+// [data-color-mode=light][data-light-theme*=dark] .my-class,
+// [data-color-mode=dark][data-dark-theme*=dark] .my-class {
+//   color: red;
+// }
+//
+// @media (prefers-color-scheme: light) {
+//   [data-color-mode=auto][data-light-theme*=dark] .my-class {
+//     color: red;
+//   }
+// }
+// @media (prefers-color-scheme: dark) {
+//   [data-color-mode=auto][data-dark-theme*=dark] .my-class {
+//     color: red;
+//   }
+// }
+
 @mixin color-mode($mode) {
   @if $mode == light {
     :root,

data/_sass/@primer/css/support/mixins/misc.scss

@@ -1,5 +1,5 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
+@mixin double-caret($background: var(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) {
   &::after,
   &::before {
     position: absolute;
@@ -17,7 +17,7 @@
   &::after {
     // stylelint-disable-next-line primer/spacing
     margin-left: 2px;
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
     background-image: linear-gradient($background, $background);
   }
 
@@ -29,31 +29,31 @@
 // global focus styles
 
 // inset box-shadow for form controls
-@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
-  border-color: var(--color-accent-fg);
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
+  border-color: var(--focus-outlineColor, var(--color-accent-fg));
   outline: none;
   box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
 }
 
 // box-shadow for :target styles (no inset)
 // !important to override PCSS utilities
-@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: none !important;
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }
 
 // outline
-@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: none;
 }
 
 // outline with fg box-shadow for buttons
-@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
 }
 
 // if min-width is undefined, return only min-height

data/_sass/@primer/css/support/variables/misc.scss

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

data/_sass/@primer/css/support/variables/typography.scss

@@ -36,7 +36,7 @@ $body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetic
 
 // Monospace font stack
 // Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome
-$mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !default;
+$mono-font: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace) !default;
 
 // The base body size
 $body-font-size: 14px !default;

data/_sass/@primer/css/toasts/toasts.scss

@@ -3,10 +3,10 @@
 .Toast {
   display: flex;
   margin: $spacer-2;
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   border-radius: $border-radius;
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
 
   @include breakpoint(sm) {
     width: max-content;
@@ -21,8 +21,8 @@
   justify-content: center;
   width: $spacer-3 * 3;
   flex-shrink: 0;
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-accent-emphasis);
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
   border: $border-width $border-style transparent;
   border-right: 0;
   border-top-left-radius: inherit;
@@ -52,38 +52,38 @@
 // Modifier
 
 .Toast--loading {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
 
   .Toast-icon {
-    background-color: var(--color-neutral-emphasis);
+    background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
   }
 }
 
 .Toast--error {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
 
   .Toast-icon {
-    background-color: var(--color-danger-emphasis);
+    background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
   }
 }
 
 .Toast--warning {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
 
   .Toast-icon {
-    background-color: var(--color-attention-emphasis);
+    background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
   }
 }
 
 .Toast--success {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
 
   .Toast-icon {
-    background-color: var(--color-success-emphasis);
+    background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));
   }
 }
 

data/_sass/@primer/css/tooltips/tooltips.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable primer/spacing */
+
 .tooltipped {
   position: relative;
 }
@@ -7,10 +9,10 @@
   position: absolute;
   z-index: 1000000;
   display: none;
-  padding: $em-spacer-5 $em-spacer-6;
-  font: normal normal 11px/1.5 $body-font;
+  padding: var(--overlay-paddingBlock-condensed, 0.25rem) var(--overlay-padding-condensed, 0.5rem);
+  font: var(--text-body-shorthand-small, normal normal 11px/1.5 $body-font);
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--color-fg-on-emphasis);
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
   text-align: center;
   text-decoration: none;
   text-shadow: none;
@@ -20,23 +22,9 @@
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: var(--color-neutral-emphasis-plus);
-  border-radius: $border-radius;
-  opacity: 0;
-}
-
-// This is the tooltip arrow
-.tooltipped::before {
-  position: absolute;
-  z-index: 1000001;
-  display: none;
-  width: 0;
-  height: 0;
-  color: var(--color-neutral-emphasis-plus);
-  pointer-events: none;
-  content: '';
+  background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   // stylelint-disable-next-line primer/borders
-  border: 6px $border-style transparent;
+  border-radius: var(--borderRadius-medium);
   opacity: 0;
 }
 
@@ -63,7 +51,6 @@
     animation-duration: $tooltip-duration;
     animation-fill-mode: forwards;
     animation-timing-function: ease-in;
-    animation-delay: $tooltip-delay;
   }
 }
 
@@ -91,18 +78,8 @@
   &::after {
     top: 100%;
     right: 50%;
-    // stylelint-disable-next-line primer/spacing
     margin-top: 6px;
   }
-
-  &::before {
-    top: auto;
-    right: 50%;
-    bottom: -7px;
-    // stylelint-disable-next-line primer/spacing
-    margin-right: -6px;
-    border-bottom-color: var(--color-neutral-emphasis-plus);
-  }
 }
 
 .tooltipped-se {
@@ -124,18 +101,8 @@
   &::after {
     right: 50%;
     bottom: 100%;
-    // stylelint-disable-next-line primer/spacing
     margin-bottom: 6px;
   }
-
-  &::before {
-    top: -7px;
-    right: 50%;
-    bottom: auto;
-    // stylelint-disable-next-line primer/spacing
-    margin-right: -6px;
-    border-top-color: var(--color-neutral-emphasis-plus);
-  }
 }
 
 .tooltipped-ne {
@@ -161,19 +128,9 @@
   &::after {
     right: 100%;
     bottom: 50%;
-    // stylelint-disable-next-line primer/spacing
     margin-right: 6px;
     transform: translateY(50%);
   }
-
-  &::before {
-    top: 50%;
-    bottom: 50%;
-    left: -7px;
-    // stylelint-disable-next-line primer/spacing
-    margin-top: -6px;
-    border-left-color: var(--color-neutral-emphasis-plus);
-  }
 }
 
 // tooltipped to the right
@@ -181,19 +138,9 @@
   &::after {
     bottom: 50%;
     left: 100%;
-    // stylelint-disable-next-line primer/spacing
     margin-left: 6px;
     transform: translateY(50%);
   }
-
-  &::before {
-    top: 50%;
-    right: -7px;
-    bottom: 50%;
-    // stylelint-disable-next-line primer/spacing
-    margin-top: -6px;
-    border-right-color: var(--color-neutral-emphasis-plus);
-  }
 }
 
 // Tooltip align right and left
@@ -218,7 +165,7 @@
 }
 
 .tooltipped-align-left-1,
-.tooltipped-align-left-2, {
+.tooltipped-align-left-2 {
   &::after {
     left: 0;
     margin-left: 0;
@@ -245,7 +192,7 @@
 .tooltipped-multiline {
   &::after {
     width: max-content;
-    max-width: $tooltip-max-width;
+    max-width: var(--overlay-width-small, 20rem);
     word-wrap: break-word;
     white-space: pre-line;
     border-collapse: separate;

data/_sass/@primer/css/utilities/borders.scss

@@ -1,5 +1,5 @@
 // Core border utilities
-// stylelint-disable block-opening-brace-space-before, primer/borders
+// stylelint-disable primer/borders
 
 /* Add a gray border to the left and right */
 .border-x {