@primer/css 20.0.0-rc.b5fee637 → 20.0.0-rc.f7fbc78b

package/markdown/footnotes.scss

@@ -1,37 +1,49 @@
 // stylelint-disable selector-max-type
 // stylelint-disable selector-max-compound-selectors
 
-.markdown-body .footnotes {
-  font-size: $h6-size;
-  color: var(--color-fg-muted);
-  border-top: $border;
+.markdown-body {
+  [data-footnote-ref] {
+    &::before {
+      content: '[';
+    }
 
-  ol {
-    padding-left: $spacer-3;
+    &::after {
+      content: ']';
+    }
   }
 
-  li {
-    position: relative;
-  }
+  .footnotes {
+    font-size: $h6-size;
+    color: var(--color-fg-muted);
+    border-top: $border;
 
-  li:target::before {
-    position: absolute;
-    top: -$spacer-2;
-    right: -$spacer-2;
-    bottom: -$spacer-2;
-    left: -$spacer-4;
-    pointer-events: none;
-    content: '';
-    // stylelint-disable-next-line primer/borders
-    border: 2px $border-style var(--color-accent-emphasis);
-    border-radius: $border-radius;
-  }
+    ol {
+      padding-left: $spacer-3;
+    }
 
-  li:target {
-    color: var(--color-fg-default);
-  }
+    li {
+      position: relative;
+    }
+
+    li:target::before {
+      position: absolute;
+      top: -$spacer-2;
+      right: -$spacer-2;
+      bottom: -$spacer-2;
+      left: -$spacer-4;
+      pointer-events: none;
+      content: '';
+      // stylelint-disable-next-line primer/borders
+      border: 2px $border-style var(--color-accent-emphasis);
+      border-radius: $border-radius;
+    }
+
+    li:target {
+      color: var(--color-fg-default);
+    }
 
-  .data-footnote-backref g-emoji {
-    font-family: monospace;
+    .data-footnote-backref g-emoji {
+      font-family: monospace;
+    }
   }
 }

package/markdown/headings.scss

@@ -71,4 +71,21 @@
     font-size: 0.85em;
     color: var(--color-fg-muted);
   }
+
+  summary {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      display: inline-block;
+    }
+
+    h1,
+    h2 {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+  }
 }

package/markdown/images.scss

@@ -10,12 +10,12 @@
     box-sizing: content-box;
     background-color: var(--color-canvas-default);
 
-    &[align=right] {
+    &[align='right'] {
       // stylelint-disable-next-line primer/spacing
       padding-left: 20px;
     }
 
-    &[align=left] {
+    &[align='left'] {
       // stylelint-disable-next-line primer/spacing
       padding-right: 20px;
     }
@@ -24,7 +24,7 @@
   .emoji {
     max-width: none;
     vertical-align: text-top;
-    // Override `<img>` styles so Emjois don't clash with zebra striping in our tables
+    // Override `<img>` styles so Emojis don't clash with zebra striping in our tables
     background-color: transparent;
   }
 

package/markdown/markdown-body.scss

@@ -93,12 +93,4 @@
       margin-bottom: 0;
     }
   }
-
-  sup > a::before {
-    content: '[';
-  }
-
-  sup > a::after {
-    content: ']';
-  }
 }

package/marketing/buttons/button.scss

@@ -13,11 +13,13 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), var(--color-mktg-btn-bg) !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+    var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 0.375rem;
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, outline 0.2s ease;
   appearance: none !important;
 
   &::before {
@@ -42,29 +44,32 @@
     box-shadow: var(--color-mktg-btn-shadow-hover) !important;
   }
 
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
-  }
-
   &:hover,
   &:focus,
+  &:focus-visible,
   &.focus {
     &::before {
       opacity: 1;
     }
+  }
+
+  // fallback :focus state
+  &:focus {
+    @include focusOutline(2px, var(--color-accent-fg));
 
-    &:disabled {
-      box-shadow: none !important;
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
     }
   }
 
-  &:active {
-    outline: none;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 transparent;
+  // default focus state
+  &:focus-visible {
+    @include focusOutline(2px, var(--color-accent-fg));
+  }
 
+  &:active {
     &::before {
       opacity: 0.5 !important;
     }
@@ -91,11 +96,6 @@
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
 
-  &:focus,
-  &.focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
-
   &:active {
     // stylelint-disable-next-line primer/box-shadow
     box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
@@ -119,11 +119,6 @@
   &:hover {
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
-
-  &:focus,
-  .focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
 }
 
 .btn-signup-mktg {
@@ -137,9 +132,20 @@
     background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
   }
 
+  // fallback :focus state
   &:focus {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
+    @include focusOutline(2px, var(--color-accent-fg));
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline(2px, var(--color-accent-fg));
   }
 }
 

package/marketing/links/link.scss

@@ -6,10 +6,6 @@
     text-decoration: none;
   }
 
-  &:active {
-    outline: none;
-  }
-
   &::after,
   &.link-emphasis-mktg::before {
     position: absolute;
@@ -35,13 +31,17 @@
   }
 
   &:hover,
-  &:focus,
   &:active {
     &::after {
       transform: scaleX(1);
     }
   }
 
+  &:focus,
+  &:focus-visible {
+    outline-offset: 2px;
+  }
+
   &.arrow-target-mktg {
     .arrow-symbol-mktg {
       margin-left: -$em-spacer-3;

package/marketing/type/typography.scss

@@ -15,17 +15,25 @@
 
 @each $header, $sizes in $mktg-headers {
   .h#{$header}-mktg {
+    // stylelint-disable-next-line function-no-unknown
     $pairing: map-get($mktg-header-pairings, nth($sizes, 1));
+    // stylelint-disable-next-line function-no-unknown
     $pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
+    // stylelint-disable-next-line function-no-unknown
     $pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
 
+    // stylelint-disable-next-line function-no-unknown
     font-size: map-get($pairing, 'size') !important;
+    // stylelint-disable-next-line function-no-unknown
     line-height: map-get($pairing, 'lh') !important;
+
     @if (map-get($pairing, 'size') >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
 
     @if (nth($sizes, 1) != nth($sizes, 2)) {
       @include breakpoint(md) {
+        // stylelint-disable-next-line function-no-unknown
         font-size: map-get($pairing-md, 'size') !important;
+        // stylelint-disable-next-line function-no-unknown
         line-height: map-get($pairing-md, 'lh') !important;
 
         @if (map-get($pairing-md, 'size') >= $mktg-header-spacing-threshold and map-get($pairing, 'size') < $mktg-header-spacing-threshold) {
@@ -40,7 +48,9 @@
 
     @if (nth($sizes, 2) != nth($sizes, 3)) {
       @include breakpoint(lg) {
+        // stylelint-disable-next-line function-no-unknown
         font-size: map-get($pairing-lg, 'size') !important;
+        // stylelint-disable-next-line function-no-unknown
         line-height: map-get($pairing-lg, 'lh') !important;
 
         @if (map-get($pairing-lg, 'size') >= $mktg-header-spacing-threshold and map-get($pairing-md, 'size') < $mktg-header-spacing-threshold) {
@@ -69,18 +79,27 @@
 
 @each $body, $sizes in $mktg-bodies {
   .f#{$body}-mktg {
+    // stylelint-disable-next-line function-no-unknown
     $pairing: map-get($mktg-body-pairings, nth($sizes, 1));
+    // stylelint-disable-next-line function-no-unknown
     $pairing-md: map-get($mktg-body-pairings, nth($sizes, 2));
+    // stylelint-disable-next-line function-no-unknown
     $pairing-lg: map-get($mktg-body-pairings, nth($sizes, 3));
 
+    // stylelint-disable-next-line function-no-unknown
     font-size: map-get($pairing, 'size') !important;
+    // stylelint-disable-next-line function-no-unknown
     line-height: map-get($pairing, 'lh') !important;
+
     @if (map-get($pairing, 'size') >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large !important; }
+
     @if (map-get($pairing, 'size') >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; }
 
     @if (nth($sizes, 1) != nth($sizes, 2)) {
       @include breakpoint(md) {
+        // stylelint-disable-next-line function-no-unknown
         font-size: map-get($pairing-md, 'size') !important;
+        // stylelint-disable-next-line function-no-unknown
         line-height: map-get($pairing-md, 'lh') !important;
 
         @if (map-get($pairing-md, 'size') >= $mktg-body-spacing-threshold and map-get($pairing, 'size') < $mktg-body-spacing-threshold) {
@@ -95,7 +114,9 @@
 
     @if (nth($sizes, 2) != nth($sizes, 3)) {
       @include breakpoint(lg) {
+        // stylelint-disable-next-line function-no-unknown
         font-size: map-get($pairing-lg, 'size') !important;
+        // stylelint-disable-next-line function-no-unknown
         line-height: map-get($pairing-lg, 'lh') !important;
 
         @if (map-get($pairing-lg, 'size') >= $mktg-body-spacing-threshold and map-get($pairing-md, 'size') < $mktg-body-spacing-threshold) {

package/marketing/utilities/layout.scss

@@ -27,6 +27,7 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @for $offset from 1 through 7 {
+      // stylelint-disable-next-line primer/spacing, function-no-unknown
       .offset#{$variant}-n#{$offset} { margin-left: -($offset * 0.0833333333 * 100%); }
     }
   }

package/navigation/filter-list.scss

@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Filters list
 //
 // A vertical list of filters.
@@ -41,10 +43,26 @@
   }
 
   &.selected,
-  &[aria-selected=true],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   .count {

package/navigation/menu.scss

@@ -22,7 +22,9 @@
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
 
-    &::before { border-top-left-radius: $border-radius; }
+    &::before {
+      border-top-left-radius: $border-radius;
+    }
   }
 
   &:last-child {
@@ -30,13 +32,9 @@
     border-bottom-right-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 
-    &::before { border-bottom-left-radius: $border-radius; }
-  }
-
-  &:focus {
-    z-index: 1;
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
+    &::before {
+      border-bottom-left-radius: $border-radius;
+    }
   }
 
   &:hover {
@@ -49,8 +47,8 @@
   }
 
   &.selected,
-  &[aria-selected=true],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
     cursor: default;
     background-color: var(--color-menu-bg-active);
 

package/navigation/sidenav.scss

@@ -43,23 +43,16 @@
 
 // States
 
-.SideNav-item:focus {
-  z-index: 1;
-  outline: none;
-  box-shadow: var(--color-primer-shadow-focus);
-}
-
 .SideNav-item:hover {
   text-decoration: none;
   background-color: var(--color-neutral-subtle);
-  outline: none;
 }
 
 .SideNav-item:active {
   background-color: var(--color-canvas-subtle);
 }
 
-.SideNav-item[aria-current]:not([aria-current=false]),
+.SideNav-item[aria-current]:not([aria-current='false']),
 .SideNav-item[aria-selected='true'] {
   background-color: var(--color-sidenav-selected-bg);
 
@@ -94,14 +87,12 @@
   border: 0;
 }
 
-.SideNav-subItem:hover,
-.SideNav-subItem:focus {
+.SideNav-subItem:hover {
   color: var(--color-fg-default);
   text-decoration: none;
-  outline: none;
 }
 
-.SideNav-subItem[aria-current]:not([aria-current=false]),
+.SideNav-subItem[aria-current]:not([aria-current='false']),
 .SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
   color: var(--color-fg-default);

package/navigation/subnav.scss

@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Needs refactoring
 // Sub nav
 .subnav {
@@ -40,12 +42,28 @@
   }
 
   &.selected,
-  &[aria-selected=true],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
     z-index: 2;
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
     border-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   &:first-child {
@@ -72,6 +90,7 @@
 }
 
 .subnav-search-input-wide {
+  // stylelint-disable-next-line primer/responsive-widths
   width: 500px;
 }
 

package/navigation/tabnav.scss

@@ -28,8 +28,8 @@
   transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
   &.selected,
-  &[aria-selected=true],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
     color: var(--color-fg-default);
     background-color: var(--color-canvas-default); // cover bottom border
     border-color: var(--color-border-default);
@@ -40,13 +40,18 @@
     }
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: var(--color-fg-default);
     text-decoration: none;
     transition-duration: 0.1s;
   }
 
+  &:focus,
+  &:focus-visible {
+    border-radius: $border-radius $border-radius 0 0 !important;
+    outline-offset: -6px;
+  }
+
   &:active {
     color: var(--color-fg-muted);
   }

package/navigation/underline-nav.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-max-specificity
 $nav-height: $spacer-3 * 3 !default; // 48px
 
 .UnderlineNav {
@@ -34,56 +35,61 @@ $nav-height: $spacer-3 * 3 !default; // 48px
   border-radius: $border-radius;
   align-items: center;
 
-  // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
-  [data-content]::before {
-    display: block;
-    height: 0;
-    font-weight: $font-weight-bold;
-    visibility: hidden;
-    content: attr(data-content);
-  }
-
-  // increase touch target area
-  &::before {
-    @include minTouchTarget($min-height: $nav-height);
-  }
-
-  // hover state was "sticking" on mobile after click
-  @media (pointer: fine) {
-    &:hover {
-      color: var(--color-fg-default);
-      text-decoration: none;
-      background: var(--color-action-list-item-default-hover-bg);
-      transition: background 0.12s ease-out;
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    border-bottom-color: var(--color-neutral-muted);
+    outline-offset: -8px;
+    transition: border-bottom-color 0.12s ease-out;
+
+    // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
+    [data-content]::before {
+      display: block;
+      height: 0;
+      font-weight: $font-weight-bold;
+      visibility: hidden;
+      content: attr(data-content);
     }
-  }
 
-  &.selected,
-  &[role='tab'][aria-selected='true'],
-  &[aria-current]:not([aria-current='false']) {
-    font-weight: $font-weight-bold;
-    color: var(--color-fg-default);
+    // increase touch target area
+    &::before {
+      @include minTouchTarget($min-height: $nav-height);
+    }
 
-    // current/selected underline
-    &::after {
-      position: absolute;
-      right: 50%;
-      // 48px total height / 2 (24px) + 1px
-      bottom: calc(50% - 25px);
-      width: 100%;
-      height: 2px;
-      content: '';
-      background: var(--color-primer-border-active);
-      border-radius: $border-radius;
-      transform: translate(50%, -50%);
+    // hover state was "sticking" on mobile after click
+    @media (pointer: fine) {
+      &:hover {
+        color: var(--color-fg-default);
+        text-decoration: none;
+        background: var(--color-action-list-item-default-hover-bg);
+        transition: background 0.12s ease-out;
+      }
     }
-  }
 
-  // remove when global focus state is merged
-  &.focus,
-  &:focus {
-    @include focusOutline;
-    outline-offset: -2px;
+    &.selected,
+    &[role='tab'][aria-selected='true'],
+    &[aria-current]:not([aria-current='false']) {
+      font-weight: $font-weight-bold;
+      color: var(--color-fg-default);
+      border-bottom-color: var(--color-primer-border-active);
+      outline-offset: -8px;
+
+      // current/selected underline
+      &::after {
+        position: absolute;
+        right: 50%;
+        // 48px total height / 2 (24px) + 1px
+        bottom: calc(50% - 25px);
+        width: 100%;
+        height: 2px;
+        content: '';
+        background: var(--color-primer-border-active);
+        border-radius: $border-radius;
+        transform: translate(50%, -50%);
+      }
+    }
   }
 
   .Counter {