@primer/css 20.0.0-rc.8702fd9a → 20.0.0-rc.e6f567ec

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

@@ -21,6 +21,7 @@
 
     font-size: map-get($pairing, 'size') !important;
     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)) {
@@ -75,7 +76,9 @@
 
     font-size: map-get($pairing, 'size') !important;
     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)) {

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
       .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 {

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,50 +1,105 @@
+// stylelint-disable selector-max-specificity
+$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;
 }
 
 .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: -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);
+    }
+
+    // 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-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%);
+      }
+    }
   }
 
-  &.selected,
-  &[role=tab][aria-selected=true],
-  &[aria-current]:not([aria-current=false]) {
-    font-weight: $font-weight-bold;
+  .Counter {
+    margin-left: $spacer-2;
     color: var(--color-fg-default);
-    border-bottom-color: var(--color-primer-border-active);
-    outline: 1px dotted transparent; // Support Firefox custom colors
-    outline-offset: -1px;
+    background-color: var(--color-neutral-muted);
 
-    .UnderlineNav-octicon {
-      color: var(--color-fg-muted);
+    &--primary {
+      color: var(--color-fg-on-emphasis);
+      background-color: var(--color-neutral-emphasis);
     }
   }
 }
@@ -63,22 +118,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": "20.0.0-rc.8702fd9a",
+  "version": "20.0.0-rc.e6f567ec",
   "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,37 +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.1.1",
-    "autoprefixer": "10.4.0",
-    "cssstats": "4.0.2",
-    "eslint": "8.4.0",
-    "eslint-plugin-github": "4.3.5",
-    "eslint-plugin-jest": "25.3.0",
+    "@koddsson/postcss-sass": "5.0.1",
+    "@primer/stylelint-config": "^12.3.3",
+    "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.3",
+    "fs-extra": "10.0.1",
+    "globby": "13.1.1",
+    "jest": "27.5.1",
     "js-yaml": "4.1.0",
-    "postcss": "8.4.4",
-    "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",
-    "stylelint-scss": "4.0.0",
-    "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

@@ -4,7 +4,6 @@
   a,
   span,
   em {
-    display: inline-block;
     min-width: 32px;
     // stylelint-disable-next-line primer/spacing
     padding: 5px 10px;
@@ -25,7 +24,6 @@
     &:focus {
       text-decoration: none;
       border-color: var(--color-border-default);
-      outline: 0;
       transition-duration: 0.1s;
     }
 
@@ -42,7 +40,7 @@
 
   .current,
   .current:hover,
-  [aria-current]:not([aria-current=false]) {
+  [aria-current]:not([aria-current='false']) {
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
     border-color: transparent;
@@ -50,10 +48,10 @@
 
   .gap,
   .disabled,
-  [aria-disabled=true],
+  [aria-disabled='true'],
   .gap:hover,
   .disabled:hover,
-  [aria-disabled=true]:hover {
+  [aria-disabled='true']:hover {
     color: var(--color-primer-fg-disabled);
     cursor: default;
     border-color: transparent;
@@ -75,13 +73,73 @@
     // 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
+        );
+    }
+  }
+
+  // Responsive
+
+  // Hide everything by default
+  > * {
+    display: none;
+  }
+
+  // 0 -> sm
+  // Only show [Previous] [Next]
+
+  > :first-child,
+  > :last-child,
+  > .previous_page,
+  > .next_page {
+    display: inline-block;
+  }
+
+  // sm -> md
+  // Also show [first] [last] [current number] and [...]
+
+  @include breakpoint(sm) {
+    > :nth-child(2),
+    > :nth-last-child(2),
+    > .current,
+    > .gap {
+      display: inline-block;
+    }
+  }
+
+  // md -> or more
+  // Show everything
+
+  @include breakpoint(md) {
+    > * {
+      display: inline-block;
     }
   }
 }

package/popover/popover.scss

@@ -122,7 +122,6 @@
   }
 
   &::before {
-    // stylelint-disable-next-line primer/spacing
     margin-top: -($spacer-2 + 1);
   }
 
@@ -196,7 +195,7 @@
 // Responsive Popover
 // For < md it will show full-width anchored to the bottom
 
-@media (max-width: ($width-md - 1px)) {
+@media (max-width: ($width-md - 0.02px)) {
   .Popover {
     position: fixed;
     top: auto !important;

package/select-menu/select-menu.scss

@@ -31,7 +31,7 @@ $SelectMenu-max-height: 480px !default;
 
 // Backdrop
 //
-// Adds a dark, semi transparent "cover" underneat the modal. Only visible for xs.
+// Adds a dark, semi transparent "cover" underneath the modal. Only visible for xs.
 
 .SelectMenu::before {
   position: absolute;
@@ -386,7 +386,7 @@ $SelectMenu-max-height: 480px !default;
 //
 // Visible when a user clicks/taps on a list item
 
-.SelectMenu-item[aria-checked=true] {
+.SelectMenu-item[aria-checked='true'] {
   font-weight: $font-weight-semibold;
   color: var(--color-fg-default);
 
@@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
 // Prevent list items to be selected
 
 .SelectMenu-item:disabled,
-.SelectMenu-item[aria-disabled=true] {
+.SelectMenu-item[aria-disabled='true'] {
   color: var(--color-primer-fg-disabled);
   pointer-events: none;
 }

package/stylelint.config.cjs

@@ -1,16 +1,7 @@
 module.exports = {
   extends: ['@primer/stylelint-config'],
-  plugins: ['stylelint-scss'],
-  customSyntax: require('postcss-scss'),
-  ignoreFiles: ['src/fonts/**/*'],
+  ignoreFiles: ['**/*.js', '**/*.cjs'],
   rules: {
-    'scss/dollar-variable-default': [true, {ignore: 'local'}],
-    'primer/no-override': false,
-    'primer/colors': true,
-    'primer/borders': true,
-    'primer/spacing': true,
-    'primer/typography': true,
-    'primer/box-shadow': true,
-    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
+    'primer/no-override': false
   }
 }

package/subhead/subhead.scss

@@ -18,6 +18,7 @@
   font-size: $h2-size;
   font-weight: $font-weight-normal;
   flex: 1 1 auto;
+  order: 0;
 }
 
 // Make the text bold and red for dangerous content
@@ -31,6 +32,7 @@
   font-size: $body-font-size;
   color: var(--color-fg-muted);
   flex: 1 100%;
+  order: 2;
 }
 
 // Add 1 or 2 buttons to the right of the heading
@@ -38,6 +40,7 @@
   margin: $spacer-1 0 $spacer-1 $spacer-1;
   align-self: center;
   justify-content: flex-end;
+  order: 1;
 
   + .Subhead-description {
     margin-top: $spacer-1;