@primer/css 19.8.1 → 20.0.0-rc.04a33ecf

package/support/mixins/misc.scss

@@ -16,7 +16,7 @@
 
   &::after {
     // stylelint-disable-next-line primer/spacing
-    margin-left: 1px;
+    margin-left: 2px;
     background-color: var(--color-canvas-default);
     background-image: linear-gradient($background, $background);
   }
@@ -25,3 +25,49 @@
     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/support/variables/layout.scss

@@ -82,6 +82,7 @@ $spacers-large: (
   12: $spacer-12,
 ) !default;
 
+// stylelint-disable-next-line function-no-unknown
 $spacer-map-extended: map-merge(
   (
     0: 0,

package/timeline/timeline-item.scss

@@ -57,6 +57,7 @@
 
 .TimelineItem-avatar {
   position: absolute;
+  // stylelint-disable-next-line function-no-unknown
   left: -($spacer-6 + $spacer-5);
   z-index: 1;
 }
@@ -67,6 +68,7 @@
   height: $spacer-4;
   margin: 0;
   margin-bottom: -$spacer-3;
+  // stylelint-disable-next-line function-no-unknown
   margin-left: -($spacer-6 + $spacer-3);
   background-color: var(--color-canvas-default);
   border: 0;

package/toasts/toasts.scss

@@ -40,9 +40,7 @@
   background-color: transparent;
   border: 0;
 
-  &:focus,
   &:hover {
-    outline: none;
     opacity: 0.7;
   }
 
@@ -119,6 +117,11 @@
 }
 
 @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
+// stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type
 
 .details-overlay[open] > summary::before {
   position: fixed;
@@ -20,9 +20,86 @@
 
 .details-reset {
   // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
+  > 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;
+      }
+    }
+  }
   // 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; }
+  > 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;
+    }
+  }
 }