@primer/css 20.0.0-rc.645e2ab2 → 20.0.0-rc.7b88bc5d

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

@@ -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,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) {

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.
@@ -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,3 +1,4 @@
+// stylelint-disable selector-max-specificity
 $nav-height: $spacer-3 * 3 !default; // 48px
 
 .UnderlineNav {
@@ -34,57 +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;
-    }
-  }
-
-  &.selected,
-  &[role='tab'][aria-selected='true'],
-  &[aria-current]:not([aria-current='false']) {
-    font-weight: $font-weight-bold;
+  &: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);
+    }
 
-    // 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%);
+    // increase touch target area
+    &::before {
+      @include minTouchTarget($min-height: $nav-height);
     }
-  }
 
-  // remove when global focus state is merged
-  &.focus,
-  &:focus {
-    @include focusOutline;
+    // 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;
+      }
+    }
 
-    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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.0.0-rc.645e2ab2",
+  "version": "20.0.0-rc.7b88bc5d",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -23,8 +23,14 @@
     "design-system"
   ],
   "scripts": {
+    "build:docs": "script/build-docs",
+    "build:docs:preview": "script/build-docs preview",
     "dist": "script/dist.js",
-    "stylelint": "stylelint --quiet 'src/**/*.scss'",
+    "dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
+    "stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
+    "stylelint:fix": "yarn stylelint -- --fix",
+    "stylelint:remove-disables": "script/stylelint-remove-disables.js 'src/**/*.scss'",
+    "stylelint:add-disables": "script/stylelint-add-disables.js 'src/**/*.scss'",
     "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
     "start": "yarn dev",
@@ -35,36 +41,37 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.2.0"
+    "@primer/primitives": "^7.7.0"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "0.4.2",
-    "@changesets/cli": "2.18.1",
+    "@changesets/changelog-github": "0.4.4",
+    "@changesets/cli": "2.22.0",
     "@github/prettier-config": "0.0.4",
-    "@koddsson/postcss-sass": "5.0.0",
-    "@primer/stylelint-config": "12.2.0",
-    "autoprefixer": "10.4.0",
-    "cssstats": "4.0.2",
-    "eslint": "8.4.1",
-    "eslint-plugin-github": "4.3.5",
-    "eslint-plugin-jest": "25.3.0",
+    "@koddsson/postcss-sass": "5.0.1",
+    "@primer/stylelint-config": "^12.4.0",
+    "autoprefixer": "10.4.4",
+    "chokidar-cli": "3.0.0",
+    "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.6",
+    "filesize": "8.0.7",
     "front-matter": "4.0.2",
-    "fs-extra": "10.0.0",
-    "globby": "12.0.2",
-    "jest": "27.4.4",
+    "fs-extra": "10.0.1",
+    "globby": "13.1.1",
+    "jest": "27.5.1",
     "js-yaml": "4.1.0",
-    "postcss": "8.4.5",
-    "postcss-calc": "8.0.0",
-    "postcss-import": "14.0.2",
-    "postcss-load-config": "3.1.0",
-    "postcss-scss": "4.0.2",
+    "postcss": "8.4.12",
+    "postcss-calc": "8.2.4",
+    "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.1.0",
-    "table": "6.7.5"
+    "prettier": "2.6.2",
+    "semver": "7.3.7",
+    "stylelint": "14.6.1",
+    "table": "6.8.0"
   },
   "jest": {
     "testEnvironment": "node",