@primer/css 0.0.0-20220420170139 → 0.0.0-20220420193352

package/CHANGELOG.md

@@ -1,16 +1,10 @@
 # @primer/css
 
-## 0.0.0-20220420170139
+## 0.0.0-20220420193352
 
-### Major Changes
-
-- [#1744](https://github.com/primer/css/pull/1744) [`942f65a4`](https://github.com/primer/css/commit/942f65a45a18b7042ba1ce2703688b62d874cf18) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles
-
-* [#1767](https://github.com/primer/css/pull/1767) [`7e01db97`](https://github.com/primer/css/commit/7e01db97f3f2b9d9383f66385ca16f0bdc06abd1) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Remove unused pullquote selector
+### Minor Changes
 
-- [#1821](https://github.com/primer/css/pull/1821) [`daa2685c`](https://github.com/primer/css/commit/daa2685c596d894b3bae1896bf97c3319cd9816c) Thanks [@jonrohan](https://github.com/jonrohan)! - UnderlineNav `:focus` styles
-  Refactor selected state and spacing
-  Add selected bold state override from github/github
+- [#1979](https://github.com/primer/css/pull/1979) [`753e7db2`](https://github.com/primer/css/commit/753e7db2dbdafa34dbd68bfdbe809f1d3b05ad6f) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add new flash alert `.Banner` to replace `.flash`.
 
 ### Patch Changes
 

package/actionlist/action-list-item.scss

@@ -1,5 +1,12 @@
 // stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
 
+@mixin focusOutline {
+  position: relative;
+  z-index: 1;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
+}
+
 @mixin activeIndicatorLine {
   position: absolute;
   top: calc(50% - 12px);
@@ -307,16 +314,6 @@
     text-decoration: none;
   }
 
-  &: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;
   }

package/alerts/banner.scss

@@ -0,0 +1,142 @@
+// stylelint-disable selector-max-type
+
+// Banner alert
+
+.Banner {
+  position: relative;
+  display: grid;
+  padding: $spacer-2;
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border: $border-width $border-style var(--color-accent-muted);
+  border-radius: $border-radius;
+  grid-auto-flow: column;
+  grid-template-areas: 'visual message actions close';
+  grid-template-columns: min-content 1fr min-content min-content;
+  grid-template-rows: min-content;
+
+  // `sm` breakpoint variantion
+  @media (max-width: #{map-get($breakpoints, 'sm') - 0.02px}) {
+    grid-template-areas:
+      'visual message close'
+      '  .    actions actions';
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
+
+    .Banner-actions {
+      margin: $spacer-2 0 0 $spacer-2;
+    }
+  }
+
+  // Elements
+
+  .Banner-visual {
+    display: grid;
+    // Migrate to design tokens when available
+    // calc((var(--gh-control-medium-size) - var(--gh-text-body-medium-lineBoxHeight)) / 2)
+    // stylelint-disable-next-line primer/spacing
+    padding: calc((#{$spacer-5} - 20px) / 2) $spacer-2;
+    grid-area: visual;
+    align-self: start;
+
+    > .octicon {
+      margin-block: calc((#{$spacer-1}) / 2);
+    }
+
+    > * {
+      align-self: center;
+    }
+  }
+
+  .Banner-message {
+    // Migrate to design tokens when available
+    // calc((var(--gh-control-medium-size) - var(--gh-text-body-medium-lineBoxHeight)) / 2)
+    // stylelint-disable-next-line primer/spacing
+    padding: calc((#{$spacer-5} - 20px) / 2) $spacer-2;
+    grid-area: message;
+    align-self: center;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+
+    .Banner-title:not(:only-child) {
+      margin-bottom: 0;
+      font-weight: $font-weight-bold;
+    }
+  }
+
+  .Banner-actions {
+    grid-area: actions;
+
+    &:last-child {
+      align-self: end;
+    }
+  }
+
+  .Banner-close {
+    grid-area: close;
+    margin: 0 0 0 $spacer-2;
+
+    button {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+  }
+
+  .Banner-visual .octicon {
+    color: var(--color-accent-fg);
+  }
+
+  &.Banner--warning {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+    border-color: var(--color-attention-muted);
+
+    .Banner-visual .octicon {
+      color: var(--color-attention-fg);
+    }
+  }
+
+  &.Banner--error {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+    border-color: var(--color-danger-muted);
+
+    .Banner-visual .octicon {
+      color: var(--color-danger-fg);
+    }
+  }
+
+  &.Banner--success {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+    border-color: var(--color-success-muted);
+
+    .Banner-visual .octicon {
+      color: var(--color-success-fg);
+    }
+  }
+
+  // Full-width
+
+  &.Banner--full {
+    // stylelint-disable-next-line primer/spacing
+    margin-top: ($border-width * -1);
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+  // Replace with Primitives' Narrow viewport range
+  @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+    &.Banner--full-whenNarrow {
+      // stylelint-disable-next-line primer/spacing
+      margin-top: ($border-width * -1);
+      border-right: 0;
+      border-left: 0;
+      border-radius: 0;
+    }
+  }
+}

package/alerts/index.scss

@@ -1,3 +1,4 @@
 // support files
 @import '../support/index.scss';
 @import './flash.scss';
+@import './banner.scss';

package/autocomplete/autocomplete.scss

@@ -31,9 +31,9 @@
   align-items: center;
 
   &:focus-within {
-    border-color: var(--color-accent-fg);
-
-    @include focusBoxShadowInset;
+    border-color: var(--color-accent-emphasis);
+    outline: none;
+    box-shadow: var(--color-primer-shadow-focus);
   }
 
   .form-control {
@@ -42,6 +42,10 @@
     // stylelint-disable-next-line
     border: none;
     box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
   }
 }
 

package/base/base.scss

@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type, selector-no-qualifying-type
+// stylelint-disable selector-max-type
 * {
   box-sizing: border-box;
 }
@@ -77,70 +77,10 @@ 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;
-    }
-  }
-}
-
-// 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;
-    }
+    > *:not(summary) { display: none !important; }
   }
 }

package/base/normalize.scss

@@ -39,8 +39,7 @@ header,
 main, /* 2 */
 menu,
 nav,
-section {
-  /* 1 */
+section { /* 1 */
   display: block;
 }
 
@@ -97,6 +96,16 @@ 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
    ========================================================================== */
 
@@ -269,8 +278,7 @@ optgroup {
  */
 
 button,
-input {
-  /* 1 */
+input { /* 1 */
   overflow: visible;
 }
 
@@ -280,8 +288,7 @@ input {
  */
 
 button,
-select {
-  /* 1 */
+select { /* 1 */
   text-transform: none;
 }
 
@@ -298,6 +305,29 @@ 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).
  */
@@ -337,8 +367,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 */
 }
@@ -347,17 +377,27 @@ 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/buttons/button.scss

@@ -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: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-  transition-property: color, background-color, box-shadow, border-color;
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
 
   &:hover,
   &.hover,
@@ -100,6 +100,14 @@
       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
@@ -117,22 +125,6 @@
     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'] {
@@ -152,6 +144,13 @@
     }
   }
 
+  &: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);
@@ -162,26 +161,6 @@
   }
 }
 
-// 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 {
@@ -210,22 +189,6 @@ a.btn-primary {
     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,
@@ -241,6 +204,11 @@ a.btn-primary {
     }
   }
 
+  &: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);
@@ -298,6 +266,11 @@ a.btn-primary {
     }
   }
 
+  &: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);

package/buttons/misc.scss

@@ -28,14 +28,6 @@
       cursor: default;
     }
   }
-
-  &:not(.dropdown-item) {
-    &:focus,
-    &:focus-visible {
-      border-radius: $border-radius;
-      outline-offset: 0;
-    }
-  }
 }
 
 // Invisible button
@@ -45,7 +37,6 @@
   color: var(--color-accent-fg);
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
-  border-radius: $border-radius;
   box-shadow: none;
 
   &:hover,
@@ -57,14 +48,15 @@
   }
 
   &:active,
+  &:focus,
   &.selected,
   &[aria-selected='true'],
   &.zeroclipboard-is-active {
     color: var(--color-accent-fg);
-    background: none;
+    background-color: none;
     border-color: var(--color-btn-active-border);
-
-    @include focusOutline;
+    outline: none;
+    box-shadow: var(--color-btn-focus-shadow);
   }
 
   &:active &.zeroclipboard-is-active {
@@ -97,23 +89,14 @@
   border: 0;
   box-shadow: none;
 
-  &:hover {
-    color: var(--color-accent-fg);
-  }
-
-  &:focus,
-  &:focus-visible {
-    border-radius: $border-radius;
-  }
+  &:hover { color: var(--color-accent-fg); }
 
   &.disabled,
   &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     cursor: default;
 
-    &:hover {
-      color: var(--color-primer-fg-disabled);
-    }
+    &:hover { color: var(--color-primer-fg-disabled); }
   }
 }
 
@@ -129,13 +112,18 @@
   color: var(--color-fg-muted);
   background: transparent;
   border: 0;
+  outline: none;
 
   &:hover {
     color: var(--color-fg-default);
   }
 
-  &:active {
-    @include focusOutline;
+  &:active,
+  &:focus {
+    color: var(--color-fg-muted);
+    border-color: var(--color-btn-active-border);
+    outline: none;
+    box-shadow: var(--color-btn-focus-shadow);
   }
 }
 
@@ -228,4 +216,10 @@
     color: var(--color-accent-fg);
     cursor: pointer;
   }
+
+  &:focus {
+    z-index: 1;
+    outline: 0;
+    box-shadow: var(--color-primer-shadow-focus);
+  }
 }