@primer/css 19.8.2 → 20.0.0-rc.04a33ecf

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,18 +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) {
@@ -41,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) {
@@ -70,11 +79,16 @@
 
 @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; }
@@ -83,7 +97,9 @@
 
     @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) {
@@ -98,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) {
@@ -116,32 +134,3 @@
 .text-medium {
   font-weight: $font-weight-medium !important;
 }
-
-// Pullquote
-
-@mixin pullquote {
-  padding-top: 0;
-  padding-bottom: 0;
-  // stylelint-disable-next-line primer/spacing
-  padding-left: $spacer;
-  margin-bottom: $spacer-4;
-  font-family: $mono-font;
-  font-size: $h4-size;
-  line-height: 1.4;
-  color: var(--color-color-text-secondary);
-  border-left: 3px solid var(--color-border-default);
-
-  @include breakpoint(md) {
-    // stylelint-disable-next-line primer/spacing
-    padding-left: $spacer * 1.5;
-    margin-bottom: $spacer-5;
-    // stylelint-disable-next-line primer/spacing
-    margin-left: (-$spacer * 1.5) - 3px;
-    font-size: 18px;
-    line-height: $lh-default;
-  }
-}
-
-.pullquote {
-  @include pullquote;
-}

package/marketing/utilities/layout.scss

@@ -27,7 +27,7 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @for $offset from 1 through 7 {
-      // stylelint-disable-next-line primer/spacing
+      // 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.
@@ -45,6 +47,22 @@
   &[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 {

package/navigation/sidenav.scss

@@ -43,16 +43,9 @@
 
 // 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 {
@@ -94,11 +87,9 @@
   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']),

package/navigation/subnav.scss

@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Needs refactoring
 // Sub nav
 .subnav {
@@ -46,6 +48,22 @@
     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

@@ -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,50 +1,104 @@
+$nav-height: $spacer-3 * 3 !default; // 48px
+
 .UnderlineNav {
   display: flex;
+  min-height: $nav-height;
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  -webkit-overflow-scrolling: auto;
   justify-content: space-between;
+
+  .Counter {
+    margin-left: $spacer-2;
+    color: var(--color-fg-default);
+    background-color: var(--color-neutral-muted);
+
+    &--primary {
+      color: var(--color-fg-on-emphasis);
+      background-color: var(--color-neutral-emphasis);
+    }
+  }
 }
 
 .UnderlineNav-body {
   display: flex;
+  align-items: center;
+  gap: $spacer-2;
+  list-style: none;
 }
 
 .UnderlineNav-item {
-  padding: $spacer-2 $spacer-3;
+  position: relative;
+  display: flex;
+  padding: 0 $spacer-2;
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 30px;
   color: var(--color-fg-default);
   text-align: center;
   white-space: nowrap;
+  cursor: pointer;
   background-color: transparent;
   border: 0;
-  // stylelint-disable-next-line primer/borders
-  border-bottom: 2px $border-style transparent;
+  border-radius: $border-radius;
+  align-items: center;
 
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-visible {
     color: var(--color-fg-default);
     text-decoration: none;
     border-bottom-color: var(--color-neutral-muted);
-    outline: 1px dotted transparent; // Support Firefox custom colors
-    outline-offset: -1px;
+    outline-offset: -2px;
     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);
+  }
+
+  // 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;
+    }
+  }
+
   &.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: 1px dotted transparent; // Support Firefox custom colors
-    outline-offset: -1px;
+    outline-offset: -8px;
 
-    .UnderlineNav-octicon {
-      color: var(--color-fg-muted);
+    // 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%);
     }
   }
 }
@@ -63,22 +117,18 @@
 
 .UnderlineNav--full {
   display: block;
-}
 
-.UnderlineNav-octicon {
-  margin-right: $spacer-1;
-  color: var(--color-fg-subtle);
+  // required for underline to align with additional wrapper element
+  .UnderlineNav-body {
+    min-height: $nav-height;
+  }
 }
 
-.UnderlineNav .Counter {
-  margin-left: $spacer-1;
-  color: var(--color-fg-default);
-  background-color: var(--color-neutral-muted);
-
-  &--primary {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-neutral-emphasis);
-  }
+.UnderlineNav-octicon {
+  display: inline !important;
+  margin-right: $spacer-2;
+  color: var(--color-fg-muted);
+  fill: var(--color-fg-muted);
 }
 
 .UnderlineNav-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "19.8.2",
+  "version": "20.0.0-rc.04a33ecf",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -23,6 +23,8 @@
     "design-system"
   ],
   "scripts": {
+    "build:docs": "script/build-docs",
+    "build:docs:preview": "script/build-docs preview",
     "dist": "script/dist.js",
     "dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
     "stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
@@ -43,33 +45,33 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.4",
-    "@changesets/cli": "2.20.0",
+    "@changesets/cli": "2.22.0",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
-    "@primer/stylelint-config": "^12.3.3",
-    "autoprefixer": "10.4.2",
+    "@primer/stylelint-config": "^12.4.0",
+    "autoprefixer": "10.4.4",
     "chokidar-cli": "3.0.0",
-    "cssstats": "4.0.2",
-    "eslint": "8.10.0",
-    "eslint-plugin-github": "4.3.5",
+    "cssstats": "4.0.5",
+    "eslint": "8.13.0",
+    "eslint-plugin-github": "4.3.6",
     "eslint-plugin-jest": "26.0.0",
     "eslint-plugin-prettier": "4.0.0",
     "filesize": "8.0.7",
     "front-matter": "4.0.2",
     "fs-extra": "10.0.1",
-    "globby": "13.1.0",
-    "jest": "27.4.7",
+    "globby": "13.1.1",
+    "jest": "27.5.1",
     "js-yaml": "4.1.0",
-    "postcss": "8.4.7",
+    "postcss": "8.4.12",
     "postcss-calc": "8.2.4",
-    "postcss-import": "14.0.2",
-    "postcss-load-config": "3.1.0",
+    "postcss-import": "14.1.0",
+    "postcss-load-config": "3.1.4",
     "postcss-scss": "4.0.3",
     "postcss-simple-vars": "6.0.3",
-    "prettier": "2.5.1",
-    "semver": "7.3.5",
-    "stylelint": "14.5.3",
-    "table": "6.7.5"
+    "prettier": "2.6.2",
+    "semver": "7.3.7",
+    "stylelint": "14.6.1",
+    "table": "6.8.0"
   },
   "jest": {
     "testEnvironment": "node",

package/pagination/pagination.scss

@@ -24,7 +24,6 @@
     &:focus {
       text-decoration: none;
       border-color: var(--color-border-default);
-      outline: 0;
       transition-duration: 0.1s;
     }
 
@@ -74,13 +73,35 @@
     // chevron-left
     .previous_page::before {
       margin-right: $spacer-1;
-      clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px);
+      clip-path:
+        polygon(
+          9.8px 12.8px,
+          8.7px 12.8px,
+          4.5px 8.5px,
+          4.5px 7.5px,
+          8.7px 3.2px,
+          9.8px 4.3px,
+          6.1px 8px,
+          9.8px 11.7px,
+          9.8px 12.8px
+        );
     }
 
     // chevron-right
     .next_page::after {
       margin-left: $spacer-1;
-      clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px);
+      clip-path:
+        polygon(
+          6.2px 3.2px,
+          7.3px 3.2px,
+          11.5px 7.5px,
+          11.5px 8.5px,
+          7.3px 12.8px,
+          6.2px 11.7px,
+          9.9px 8px,
+          6.2px 4.3px,
+          6.2px 3.2px
+        );
     }
   }
 

package/popover/popover.scss

@@ -122,6 +122,7 @@
   }
 
   &::before {
+    // stylelint-disable-next-line function-no-unknown
     margin-top: -($spacer-2 + 1);
   }
 

package/support/mixins/color-modes.scss

@@ -84,10 +84,12 @@
   @each $name, $value in $color-map {
     @each $type, $color in $value {
       @if $type == dark {
+        // stylelint-disable-next-line function-no-unknown
         $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
       }
 
       @else {
+        // stylelint-disable-next-line function-no-unknown
         $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
       }
     }

package/support/mixins/layout.scss

@@ -7,6 +7,7 @@
 
   @else {
     // Retrieves the value from the key
+    // stylelint-disable-next-line function-no-unknown
     $value: map-get($breakpoints, $breakpoint);
 
     // If the key exists in the map