Merge pull request #1116 from primer/next-10

Component refresh tweaks 10

Author: simurai

docs/content/components/progress.md

@@ -6,11 +6,11 @@ source: 'https://github.com/primer/css/tree/master/src/progress'
 bundle: progress
 ---
 
-Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
+Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children (`Progress-item`) should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
 
 ```html live
 <span class="Progress">
-  <span class="bg-green" style="width: 50%;"></span>
+  <span class="Progress-item bg-green" style="width: 50%;"></span>
 </span>
 ```
 
@@ -20,7 +20,7 @@ Large progress bars are slightly taller than the default.
 
 ```html live
 <span class="Progress Progress--large">
-  <span class="bg-green" style="width: 50%;"></span>
+  <span class="Progress-item bg-green" style="width: 50%;"></span>
 </span>
 ```
 
@@ -30,7 +30,7 @@ Large progress bars are shorter than the default.
 
 ```html live
 <span class="Progress Progress--small">
-  <span class="bg-green" style="width: 50%;"></span>
+  <span class="Progress-item bg-green" style="width: 50%;"></span>
 </span>
 ```
 
@@ -41,7 +41,7 @@ For inline progress indicators, use the `Progress` and `d-inline-flex` with an i
 ```html live
 <span class="text-small text-gray mr-2">4 of 16</span>
 <span class="Progress d-inline-flex" style="width: 160px">
-  <div class="bg-green" style="width: 25%"></div>
+  <div class="Progress-item bg-green" style="width: 25%"></div>
 </span>
 ```
 
@@ -52,7 +52,7 @@ In cases where it's not possible to describe the progress in text, provide an `a
 ```html live
 <div aria-label="tasks: 8 of 10 complete">
   <span class="Progress">
-    <span class="bg-green" style="width: 80%;"></span>
+    <span class="Progress-item bg-green" style="width: 80%;"></span>
   </span>
 </div>
 ```

docs/content/utilities/colors.mdx

@@ -82,7 +82,6 @@ You can set the color inheritance on an element by using the `text-inherit` clas
 </div>
 <div class="text-green mb-2">
   .text-green
-  <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
 </div>
 <div class="text-purple mb-2">
   .text-purple

src/buttons/button.scss

@@ -22,10 +22,6 @@
     text-decoration: none;
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   &:disabled,
   &.disabled,
   &[aria-disabled=true] {
@@ -109,6 +105,8 @@
   // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
   &:focus,
   &.focus {
+    outline: 1px dotted transparent; // Support Firfox custom colors
+    outline-offset: 2px;
     box-shadow: $box-shadow-focus;
   }
 }

src/forms/form-control.scss

@@ -91,6 +91,7 @@ textarea.form-control {
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
   color: $text-gray-light;
+  opacity: 1; // override opacity in normalize.css
 }
 
 // Mini inputs, to match .minibutton

src/labels/counters.scss

@@ -7,11 +7,12 @@
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
-  line-height: $size-2;
+  line-height: $size-2 - 2px; // remove borders
   color: $text-gray-dark;
   text-align: center;
   // stylelint-disable-next-line primer/colors
   background-color: rgba($gray-300, 0.5);
+  border: $border-width $border-style transparent; // Support Firfox custom colors
   // stylelint-disable-next-line primer/borders
   border-radius: 2em;
 

src/labels/diffstat.scss

@@ -18,16 +18,20 @@
   height: $spacer-2;
   // stylelint-disable-next-line primer/spacing
   margin-left: 1px;
+  outline-offset: -1px; // Support Firfox custom colors
 }
 
 .diffstat-block-deleted {
   background-color: $bg-diffstat-deleted;
+  outline: 1px dashed transparent; // Support Firfox custom colors
 }
 
 .diffstat-block-added {
   background-color: $bg-diffstat-added;
+  outline: 1px solid transparent; // Support Firfox custom colors
 }
 
 .diffstat-block-neutral {
   background-color: $bg-diffstat-neutral;
+  outline: 1px dotted transparent; // Support Firfox custom colors
 }

src/labels/states.scss

@@ -13,7 +13,7 @@
 .State {
   display: inline-block;
   // stylelint-disable-next-line primer/spacing
-  padding: 6px 12px;
+  padding: 5px 12px;
   font-size: $body-font-size;
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
@@ -23,6 +23,7 @@
   white-space: nowrap;
   // stylelint-disable-next-line primer/colors
   background-color: $gray-500;
+  border: $border-width $border-style transparent; // Support Firfox custom colors
   // stylelint-disable-next-line primer/borders
   border-radius: 2em;
 }

src/navigation/underline-nav.scss

@@ -29,6 +29,8 @@
   &:focus {
     text-decoration: none;
     border-bottom-color: $border-gray-dark;
+    outline: 1px dotted transparent; // Support Firfox custom colors
+    outline-offset: -1px;
     transition-timing-function: ease-out;
     transition-duration: 0.12s;
   }
@@ -39,6 +41,8 @@
     font-weight: $font-weight-bold;
     // stylelint-disable-next-line primer/borders
     border-bottom-color: #f9826c; // custom coral
+    outline: 1px dotted transparent; // Support Firfox custom colors
+    outline-offset: -1px;
 
     .UnderlineNav-octicon {
       color: $text-gray;

src/progress/progress.scss

@@ -7,6 +7,7 @@
   // stylelint-disable-next-line primer/colors
   background-color: $gray-200;
   border-radius: $border-radius;
+  outline: 1px solid transparent; // Support Firfox custom colors
 }
 
 .Progress--large {
@@ -17,6 +18,10 @@
   height: 5px;
 }
 
+.Progress-item {
+  outline: 2px solid transparent; // Support Firfox custom colors
+}
+
 .Progress-item + .Progress-item {
   // stylelint-disable-next-line primer/spacing
   margin-left: 2px;

src/support/variables/colors.scss

@@ -46,7 +46,7 @@ $text-blue:         $blue-500 !default;
 $text-gray-dark:    $gray-900 !default;
 $text-gray-light:   $gray-500 !default;
 $text-gray:         $gray-600 !default;
-$text-green:        $green-500 !default;
+$text-green:        $green-600 !default;
 $text-orange:       $orange-900 !default;
 $text-orange-light: $orange-600 !default;
 $text-purple:       $purple !default;