@primer/css 0.0.0-20220114223421 → 0.0.0-20220118010009

package/dropdown/dropdown.scss

@@ -82,10 +82,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  &:focus,
   &:hover {
     color: var(--color-fg-on-emphasis);
     text-decoration: none;
     background-color: var(--color-accent-emphasis);
+    outline: none;
 
     > .octicon {
       color: inherit;

package/forms/form-control.scss

@@ -29,8 +29,16 @@ label {
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
   border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
+  outline: none;
   box-shadow: var(--color-primer-shadow-inset);
 
+  &.focus,
+  &:focus {
+    border-color: var(--color-accent-emphasis);
+    outline: none;
+    box-shadow: var(--color-primer-shadow-focus);
+  }
+
   &[disabled] {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-input-disabled-bg);

package/forms/form-group.scss

@@ -26,17 +26,11 @@
       background-color: var(--color-canvas-default);
     }
 
-    &.shorter {
-      width: 130px;
-    }
+    &.shorter { width: 130px; }
 
-    &.short {
-      width: 250px;
-    }
+    &.short { width: 250px; }
 
-    &.long {
-      width: 100%;
-    }
+    &.long { width: 100%; }
   }
 
   // Textarea
@@ -87,13 +81,9 @@
     h4 {
       margin: $spacer-1 0 0;
 
-      &.is-error {
-        color: var(--color-danger-fg);
-      }
+      &.is-error { color: var(--color-danger-fg); }
 
-      &.is-success {
-        color: var(--color-success-fg);
-      }
+      &.is-success { color: var(--color-success-fg); }
 
       + .note {
         margin-top: 0;
@@ -205,18 +195,13 @@
       background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
       border-color: var(--color-success-muted);
 
-      &::after {
-        border-bottom-color: var(--color-success-subtle);
-      }
-
-      &::before {
-        border-bottom-color: var(--color-success-muted);
-      }
+      &::after { border-bottom-color: var(--color-success-subtle); }
+      &::before { border-bottom-color: var(--color-success-muted); }
     }
   }
 
   &.warn {
-    .form-control:not(:focus, :focus-visible) {
+    .form-control {
       border-color: var(--color-attention-emphasis);
     }
 
@@ -226,18 +211,13 @@
       background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
       border-color: var(--color-attention-muted);
 
-      &::after {
-        border-bottom-color: var(--color-attention-subtle);
-      }
-
-      &::before {
-        border-bottom-color: var(--color-attention-muted);
-      }
+      &::after { border-bottom-color: var(--color-attention-subtle); }
+      &::before { border-bottom-color: var(--color-attention-muted); }
     }
   }
 
   &.errored {
-    .form-control:not(:focus, :focus-visible) {
+    .form-control {
       border-color: var(--color-danger-emphasis);
     }
 
@@ -251,13 +231,8 @@
       background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
       border-color: var(--color-danger-muted);
 
-      &::after {
-        border-bottom-color: var(--color-danger-subtle);
-      }
-
-      &::before {
-        border-bottom-color: var(--color-danger-muted);
-      }
+      &::after { border-bottom-color: var(--color-danger-subtle); }
+      &::before { border-bottom-color: var(--color-danger-muted); }
     }
   }
 }

package/forms/input-group.scss

@@ -18,14 +18,6 @@
   &.inline {
     display: inline-table;
   }
-
-  // within input group, if button exists change focus styles to match input (no offset)
-  &:focus-within {
-    // stylelint-disable-next-line selector-max-type
-    button {
-      outline-offset: 0;
-    }
-  }
 }
 
 .input-group .form-control,

package/marketing/buttons/button.scss

@@ -13,9 +13,7 @@
   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;
@@ -44,16 +42,29 @@
     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;
     }
+
+    &:disabled {
+      box-shadow: none !important;
+    }
   }
 
   &:active {
+    outline: none;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 transparent;
+
     &::before {
       opacity: 0.5 !important;
     }
@@ -80,6 +91,11 @@
     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;
@@ -103,6 +119,11 @@
   &: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 {
@@ -115,6 +136,11 @@
     // stylelint-disable-next-line primer/colors
     background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
   }
+
+  &:focus {
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
+  }
 }
 
 // Size modifiers

package/marketing/links/link.scss

@@ -6,6 +6,10 @@
     text-decoration: none;
   }
 
+  &:active {
+    outline: none;
+  }
+
   &::after,
   &.link-emphasis-mktg::before {
     position: absolute;
@@ -32,7 +36,6 @@
 
   &:hover,
   &:focus,
-  &:focus-visible,
   &:active {
     &::after {
       transform: scaleX(1);

package/navigation/menu.scss

@@ -22,9 +22,7 @@
     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 {
@@ -32,9 +30,13 @@
     border-bottom-right-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 
-    &::before {
-      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);
   }
 
   &:hover {

package/navigation/sidenav.scss

@@ -43,9 +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 {
@@ -87,9 +94,11 @@
   border: 0;
 }
 
-.SideNav-subItem:hover {
+.SideNav-subItem:hover,
+.SideNav-subItem:focus {
   color: var(--color-fg-default);
   text-decoration: none;
+  outline: none;
 }
 
 .SideNav-subItem[aria-current]:not([aria-current='false']),

package/navigation/tabnav.scss

@@ -40,17 +40,13 @@
     }
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: var(--color-fg-default);
     text-decoration: none;
     transition-duration: 0.1s;
   }
 
-  &:focus,
-  &:focus-visible {
-    outline-offset: -6px;
-  }
-
   &:active {
     color: var(--color-fg-muted);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "0.0.0-20220114223421",
+  "version": "0.0.0-20220118010009",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -24,6 +24,7 @@
   ],
   "scripts": {
     "dist": "script/dist.js",
+    "dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
     "stylelint": "stylelint --quiet 'src/**/*.scss'",
     "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
@@ -44,6 +45,7 @@
     "@koddsson/postcss-sass": "5.0.0",
     "@primer/stylelint-config": "12.2.0",
     "autoprefixer": "10.4.1",
+    "chokidar-cli": "3.0.0",
     "cssstats": "4.0.2",
     "eslint": "8.6.0",
     "eslint-plugin-github": "4.3.5",

package/support/mixins/misc.scss

@@ -24,10 +24,3 @@
     background-color: $border;
   }
 }
-
-// global focus styles
-
-@mixin focusOutline {
-  outline: 2px solid var(--color-accent-fg);
-  outline-offset: 2px;
-}

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

@@ -20,46 +20,9 @@
 
 .details-reset {
   // Remove marker added by the display: list-item browser default
-  > summary {
-    list-style: none;
-    // 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;
-    }
-  }
+  > 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 {
-  // 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;
-  }
+  > summary::-webkit-details-marker { display: none; }
 }