@primer/css 0.0.0-20220420163721 → 0.0.0-20220420184728

package/navigation/underline-nav.scss

@@ -1,105 +1,50 @@
-// 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 {
-  position: relative;
-  display: flex;
-  padding: 0 $spacer-2;
+  padding: $spacer-2 $spacer-3;
   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;
-  border-radius: $border-radius;
-  align-items: center;
+  // stylelint-disable-next-line primer/borders
+  border-bottom: 2px $border-style transparent;
 
   &:hover,
-  &:focus,
-  &:focus-visible {
+  &:focus {
     color: var(--color-fg-default);
     text-decoration: none;
     border-bottom-color: var(--color-neutral-muted);
-    outline-offset: -8px;
+    outline: 1px dotted transparent; // Support Firefox custom colors
+    outline-offset: -1px;
     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%);
-      }
-    }
   }
 
-  .Counter {
-    margin-left: $spacer-2;
+  &.selected,
+  &[role='tab'][aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    font-weight: $font-weight-bold;
     color: var(--color-fg-default);
-    background-color: var(--color-neutral-muted);
+    border-bottom-color: var(--color-primer-border-active);
+    outline: 1px dotted transparent; // Support Firefox custom colors
+    outline-offset: -1px;
 
-    &--primary {
-      color: var(--color-fg-on-emphasis);
-      background-color: var(--color-neutral-emphasis);
+    .UnderlineNav-octicon {
+      color: var(--color-fg-muted);
     }
   }
 }
@@ -118,18 +63,22 @@ $nav-height: $spacer-3 * 3 !default; // 48px
 
 .UnderlineNav--full {
   display: block;
-
-  // required for underline to align with additional wrapper element
-  .UnderlineNav-body {
-    min-height: $nav-height;
-  }
 }
 
 .UnderlineNav-octicon {
-  display: inline !important;
-  margin-right: $spacer-2;
-  color: var(--color-fg-muted);
-  fill: var(--color-fg-muted);
+  margin-right: $spacer-1;
+  color: var(--color-fg-subtle);
+}
+
+.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-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "0.0.0-20220420163721",
+  "version": "0.0.0-20220420184728",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -35,7 +35,6 @@
     "prepublishOnly": "script/prepublish",
     "start": "yarn dev",
     "dev": "cd docs && yarn && yarn develop",
-    "postinstall": "cd docs && yarn",
     "pretest": "yarn dist && script/pretest",
     "test": "NODE_OPTIONS=--experimental-vm-modules yarn jest",
     "release": "changeset publish",
@@ -46,13 +45,13 @@
   },
   "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.4",
     "chokidar-cli": "3.0.0",
-    "cssstats": "4.0.2",
+    "cssstats": "4.0.5",
     "eslint": "8.13.0",
     "eslint-plugin-github": "4.3.6",
     "eslint-plugin-jest": "26.0.0",
@@ -65,7 +64,7 @@
     "js-yaml": "4.1.0",
     "postcss": "8.4.12",
     "postcss-calc": "8.2.4",
-    "postcss-import": "14.0.2",
+    "postcss-import": "14.1.0",
     "postcss-load-config": "3.1.4",
     "postcss-scss": "4.0.3",
     "postcss-simple-vars": "6.0.3",

package/pagination/pagination.scss

@@ -24,6 +24,7 @@
     &:focus {
       text-decoration: none;
       border-color: var(--color-border-default);
+      outline: 0;
       transition-duration: 0.1s;
     }
 
@@ -73,35 +74,13 @@
     // 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/support/mixins/misc.scss

@@ -16,7 +16,7 @@
 
   &::after {
     // stylelint-disable-next-line primer/spacing
-    margin-left: 2px;
+    margin-left: 1px;
     background-color: var(--color-canvas-default);
     background-image: linear-gradient($background, $background);
   }
@@ -25,49 +25,3 @@
     background-color: $border;
   }
 }
-
-// global focus styles
-
-// inset box-shadow for form controls
-@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
-  border-color: 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)) {
-  outline: none !important;
-  box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
-}
-
-// outline
-@mixin focusOutline($outlineOffset: -2px, $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)) {
-  outline: 2px solid $outlineColor;
-  outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
-}
-
-// if min-width is undefined, return only min-height
-@mixin minTouchTarget($min-height: 32px, $min-width: '') {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  min-height: $min-height;
-  content: '';
-  transform: translateX(-50%) translateY(-50%);
-
-  @if $min-width != '' {
-    min-width: $min-width;
-  }
-}

package/toasts/toasts.scss

@@ -40,7 +40,9 @@
   background-color: transparent;
   border: 0;
 
+  &:focus,
   &:hover {
+    outline: none;
     opacity: 0.7;
   }
 
@@ -117,11 +119,6 @@
 }
 
 @keyframes Toast--spinner {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }

package/utilities/details.scss

@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type
+// stylelint-disable selector-max-type
 
 .details-overlay[open] > summary::before {
   position: fixed;
@@ -20,86 +20,9 @@
 
 .details-reset {
   // Remove marker added by the display: list-item browser default
-  > summary {
-    list-style: none;
-    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-    transition-property: color, background-color, box-shadow, border-color;
-    // fallback :focus state
-    &:focus {
-      @include focusOutline;
-
-      // remove fallback :focus if :focus-visible is supported
-      &:not(:focus-visible) {
-        outline: solid 1px transparent;
-      }
-    }
-
-    // default focus state
-    &:focus-visible {
-      @include focusOutline;
-    }
-
-    &.btn-primary {
-      // 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;
-      }
-    }
-  }
+  > summary { list-style: none; }
   // Remove marker added by details polyfill
-  > summary::before {
-    display: none;
-  }
+  > summary::before { display: none; }
   // Remove marker added by Chrome
-  > summary::-webkit-details-marker {
-    display: none;
-  }
-}
-
-.details-overlay > summary {
-  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-  transition-property: color, background-color, box-shadow, border-color;
-  // fallback :focus state
-  &:focus {
-    @include focusOutline;
-
-    // remove fallback :focus if :focus-visible is supported
-    &:not(:focus-visible) {
-      outline: solid 1px transparent;
-    }
-  }
-
-  // default focus state
-  &:focus-visible {
-    @include focusOutline;
-  }
-
-  &.btn-primary {
-    // 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;
-    }
-  }
+  > summary::-webkit-details-marker { display: none; }
 }