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

package/autocomplete/autocomplete.scss

@@ -1,8 +1,57 @@
+// Stacked label (default)
+.autocomplete-label-stacked {
+  display: block;
+  margin-bottom: $spacer-2 * 0.75;
+}
+
+// Inline label (non-default)
+.autocomplete-label-inline {
+  display: inline;
+  margin-right: $spacer-2 * 0.75;
+}
+
+// Switch to stacked at smaller viewport
+@media (max-width: $width-sm) {
+  .autocomplete-label-inline {
+    display: block;
+    margin-bottom: $spacer-2 * 0.75;
+  }
+}
+
+// Wrapper for the input and result elements to ensure alignment
+.autocomplete-body {
+  position: relative;
+  display: inline;
+}
+
+// Wrapper and conditional styles for when an icon is added
+.autocomplete-embedded-icon-wrap {
+  display: inline-flex;
+  padding: $spacer-1 $spacer-2;
+  align-items: center;
+
+  &:focus-within {
+    border-color: var(--color-accent-fg);
+
+    @include focusBoxShadowInset;
+  }
+
+  .form-control {
+    padding: 0;
+    margin-left: $spacer-2;
+    // stylelint-disable-next-line
+    border: none;
+    box-shadow: none;
+  }
+}
+
 // A pop up list of items used to show autocompleted results
 .autocomplete-results {
   position: absolute;
+  left: 0;
   z-index: 99;
-  width: 100%;
+  width: max-content;
+  min-width: 100%;
   max-height: 20em;
   overflow-y: auto;
   // stylelint-disable-next-line primer/typography
@@ -44,7 +93,7 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
   &.navigation-focus {
     color: var(--color-fg-on-emphasis);
     text-decoration: none;

package/avatars/avatar-stack.scss

@@ -36,6 +36,7 @@
     border-right: $border-width $border-style var(--color-canvas-default);
     // stylelint-disable-next-line primer/borders
     border-radius: $border-radius-1;
+    box-shadow: none;
     transition: margin 0.1s ease-in-out;
 
     &:first-child {

package/base/base.scss

@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type
 * {
   box-sizing: border-box;
 }
@@ -46,6 +46,7 @@ hr,
   background: transparent;
   border: 0;
   border-bottom: $border-width $border-style var(--color-border-muted);
+
   @include clearfix();
 }
 
@@ -76,10 +77,70 @@ button {
 }
 
 details {
-  summary { cursor: pointer; }
+  summary {
+    cursor: pointer;
+  }
 
   &:not([open]) {
     // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) { display: none !important; }
+    > *:not(summary) {
+      display: none !important;
+    }
+  }
+}
+
+// global focus styles
+
+a,
+button,
+[role='button'],
+input[type='radio'],
+input[type='checkbox'] {
+  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;
+  }
+}
+
+a:not([class]),
+input[type='radio'],
+input[type='checkbox'] {
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+// for handling focus conditionally
+.focus {
+  @include focusBoxShadowInset;
+}
+
+// Windows High Contrast mode
+@media (forced-colors: active) {
+  *:focus,
+  *:focus-visible {
+    outline: solid 1px transparent;
+  }
+
+  input:not([type='radio'], [type='checkbox']),
+  textarea,
+  select {
+    &:focus,
+    &:focus-visible {
+      outline-offset: 2px;
+    }
   }
 }

package/base/index.scss

@@ -1,5 +1,4 @@
 @import '../support/index.scss';
-
 @import './normalize.scss';
 @import './base.scss';
 @import './kbd.scss';

package/base/kbd.scss

@@ -3,7 +3,6 @@
 
 kbd {
   display: inline-block;
-  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-1 - 1) ($spacer-1 + 1);
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography

package/base/normalize.scss

@@ -39,7 +39,8 @@ header,
 main, /* 2 */
 menu,
 nav,
-section { /* 1 */
+section {
+  /* 1 */
   display: block;
 }
 
@@ -96,16 +97,6 @@ a {
   background-color: transparent; /* 1 */
 }
 
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -225,7 +216,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -278,7 +269,8 @@ optgroup {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -288,7 +280,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -305,29 +298,6 @@ html [type="button"], /* 1 */
   -webkit-appearance: button; /* 2 */
 }
 
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
@@ -367,8 +337,8 @@ textarea {
  * 2. Remove the padding in IE 10-.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -377,27 +347,17 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

package/base/typography-base.scss

@@ -62,11 +62,12 @@ dd {
   margin-left: 0;
 }
 
-// Code
+// Monospaced
 // --------------------------------------------------
 
 tt,
-code {
+code,
+samp {
   font-family: $mono-font;
   font-size: $font-size-small;
 }

package/blankslate/blankslate.scss

@@ -30,12 +30,31 @@
   color: var(--color-fg-muted);
 }
 
+.blankslate-image {
+  margin-bottom: $spacer-3;
+}
+
+.blankslate-heading {
+  margin-bottom: $spacer-1;
+}
+
+.blankslate-action {
+  margin-top: $spacer-3;
+
+  &:first-of-type {
+    margin-top: $spacer-4;
+  }
+
+  &:last-of-type {
+    margin-bottom: $spacer-2;
+  }
+}
+
 .blankslate-capped {
   border-radius: 0 0 $border-radius $border-radius;
 }
 
 .blankslate-spacious {
-  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-6 * 2) $spacer-6;
 }
 

package/blankslate/index.scss

@@ -1,3 +1,2 @@
 @import '../support/index.scss';
-
 @import './blankslate.scss';

package/box/box.scss

@@ -28,7 +28,6 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-2 $spacer-3;
-      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-2) (-$spacer-3);
       line-height: $lh-condensed;
     }
@@ -60,7 +59,6 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-4;
-      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-4) (-$spacer-4);
     }
   }
@@ -285,7 +283,6 @@
   // Increase specificity when btn-octicon is used because comes after .Box in the cascade
   &.btn-octicon {
     padding: $spacer-3 $spacer-3;
-    // stylelint-disable-next-line primer/spacing
     margin: (-$spacer-3) (-$spacer-3);
     line-height: $lh-default; // override btn-octicon line-height
   }

package/branch-name/branch-name.scss

@@ -8,6 +8,7 @@
   padding: 2px 6px;
   font: 12px $mono-font;
   color: var(--color-fg-muted);
+  word-break: break-all;
   background-color: var(--color-accent-subtle);
   border-radius: $border-radius;
 

package/breadcrumb/breadcrumb.scss

@@ -21,7 +21,7 @@
 }
 
 .breadcrumb-item-selected,
-.breadcrumb-item[aria-current]:not([aria-current=false]) {
+.breadcrumb-item[aria-current]:not([aria-current='false']) {
   &::after {
     content: none;
   }

package/buttons/button-group.scss

@@ -6,6 +6,7 @@
 .BtnGroup {
   display: inline-block;
   vertical-align: middle;
+
   @include clearfix();
 
   // Proper spacing for multiple button groups (a la, gollum editor)
@@ -33,7 +34,7 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
   &:focus,
   &:active,
   &:hover {
@@ -66,7 +67,7 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
   &:focus,
   &:active,
   &:hover {

package/buttons/button.scss

@@ -24,7 +24,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     cursor: default;
   }
 
@@ -66,8 +66,8 @@
   background-color: var(--color-btn-bg);
   border-color: var(--color-btn-border);
   box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
 
   &:hover,
   &.hover,
@@ -84,14 +84,14 @@
   }
 
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     background-color: var(--color-btn-selected-bg);
     box-shadow: var(--color-primer-shadow-inset);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-btn-bg);
     border-color: var(--color-btn-border);
@@ -100,14 +100,6 @@
       color: var(--color-primer-fg-disabled);
     }
   }
-
-  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
-  &:focus,
-  &.focus {
-    border-color: var(--color-btn-focus-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
-  }
 }
 
 // Primary button
@@ -125,16 +117,32 @@
     border-color: var(--color-btn-primary-hover-border);
   }
 
+  // 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;
+  }
+
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     background-color: var(--color-btn-primary-selected-bg);
     box-shadow: var(--color-btn-primary-selected-shadow);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-primary-disabled-text);
     background-color: var(--color-btn-primary-disabled-bg);
     border-color: var(--color-btn-primary-disabled-border);
@@ -144,13 +152,6 @@
     }
   }
 
-  &:focus,
-  &.focus {
-    background-color: var(--color-btn-primary-focus-bg);
-    border-color: var(--color-btn-primary-focus-border);
-    box-shadow: var(--color-btn-primary-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-primary-counter-bg);
@@ -161,6 +162,26 @@
   }
 }
 
+// ensure links styled as button primary gets proper focus style
+// stylelint-disable-next-line selector-no-qualifying-type
+a.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;
+  }
+}
+
 // Outline button
 
 .btn-outline {
@@ -184,16 +205,32 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     color: var(--color-btn-outline-selected-text);
     background-color: var(--color-btn-outline-selected-bg);
     border-color: var(--color-btn-outline-selected-border);
     box-shadow: var(--color-btn-outline-selected-shadow);
+
+    // 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;
+    }
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-outline-disabled-text);
     background-color: var(--color-btn-outline-disabled-bg);
     border-color: var(--color-btn-border);
@@ -204,11 +241,6 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-outline-focus-border);
-    box-shadow: var(--color-btn-outline-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-outline-counter-bg);
@@ -242,7 +274,7 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     color: var(--color-btn-danger-selected-text);
     background-color: var(--color-btn-danger-selected-bg);
     border-color: var(--color-btn-danger-selected-border);
@@ -251,7 +283,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-danger-disabled-text);
     background-color: var(--color-btn-danger-disabled-bg);
     border-color: var(--color-btn-border);
@@ -266,11 +298,6 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-danger-focus-border);
-    box-shadow: var(--color-btn-danger-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-danger-counter-bg);
@@ -294,6 +321,7 @@
 
 // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
 .btn-large {
+  // stylelint-disable-next-line primer/spacing
   padding: $em-spacer-6 1.5em;
   font-size: inherit;
   line-height: $lh-default;