Merge pull request #968 from primer/stylelint-update

Stylelint update
primer · Nov 4, 2019 · c539fcd · c539fcd
2 parents 8dc9609 + 46c60dc
commit c539fcd
Show file tree

Hide file tree

Showing 62 changed files with 712 additions and 227 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,7 +73,10 @@
     "style-loader": "^0.18.2",
     "styled-components": "4.1.2",
     "stylelint": "^10.1.0",
-    "stylelint-config-primer": "^8.1.0",
+    "stylelint-config-primer": "^9.0.0",
+    "stylelint-disable": "^0.1.5",
+    "stylelint-only": "^1.0.1",
+    "stylelint-scss": "^3.12.0",
     "table": "5.2.3",
     "typographic-base": "^1.0.4",
     "unified": "^7.1.0",

diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss
@@ -3,10 +3,12 @@
 .flash {
   position: relative;
   padding: $spacer-3;
+  // stylelint-disable-next-line primer/colors
   color: $blue-800;
+  // stylelint-disable-next-line primer/colors
   background-color: $blue-100;
-  border: 1px solid $border-black-fade;
-  border-radius: 3px;
+  border: $border-width $border-style $border-black-fade;
+  border-radius: $border-radius;
 
   p:last-child {
     margin-bottom: 0;
@@ -40,6 +42,7 @@
 // Action button
 .flash-action {
   float: right;
+  // stylelint-disable-next-line primer/spacing
   margin-top: -3px;
   margin-left: $spacer-4;
 }
@@ -49,26 +52,31 @@
 //
 
 .flash-warn {
+  // stylelint-disable-next-line primer/colors
   color: $yellow-900;
+  // stylelint-disable-next-line primer/colors
   background-color: $yellow-100;
-  border-color: $black-fade-15;
+  border-color: $border-black-fade;
 }
 
 .flash-error {
+  // stylelint-disable-next-line primer/colors
   color: $red-900;
-  background-color: $red-100;
-  border-color: $black-fade-15;
+  background-color: $bg-red-light;
+  border-color: $border-black-fade;
 }
 
 .flash-success {
+  // stylelint-disable-next-line primer/colors
   color: $green-800;
-  background-color: $green-100;
-  border-color: $black-fade-15;
+  background-color: $bg-green-light;
+  border-color: $border-black-fade;
 }
 
 .flash-full {
+  // stylelint-disable-next-line primer/spacing
   margin-top: -1px;
-  border-width: 1px 0;
+  border-width: $border-width 0;
   border-radius: 0;
 }
 
@@ -87,7 +95,9 @@
 // FIXME deprecate this
 .warning {
   padding: $em-spacer-5;
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: 0.8em;
   font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/colors
   background-color: $yellow-100;
 }
diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss
@@ -11,6 +11,8 @@
   right: -15%;
   bottom: -9%;
   background-color: $bg-white; // For transparent backgrounds
+  // stylelint-disable-next-line primer/borders
   border-radius: 2px;
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: -2px -2px 0 rgba($white, 0.8);
 }
diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss
@@ -30,9 +30,11 @@
     width: 20px;
     height: 20px;
     box-sizing: content-box;
+    // stylelint-disable-next-line primer/spacing
     margin-right: -11px;
     background-color: $bg-white;
-    border-right: $border-width $border-style $white;
+    border-right: $border-width $border-style $border-white;
+    // stylelint-disable-next-line primer/borders
     border-radius: 2px;
     transition: margin 0.1s ease-in-out;
 
@@ -47,6 +49,7 @@
 
     // stylelint-disable selector-max-type
     img {
+      // stylelint-disable-next-line primer/borders
       border-radius: 2px;
     }
     // stylelint-enable selector-max-type
@@ -60,6 +63,7 @@
 
   &:hover {
     .avatar {
+      // stylelint-disable-next-line primer/spacing
       margin-right: 3px;
     }
 
@@ -77,25 +81,28 @@
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
-  background: $gray-100;
+  background: $bg-gray;
 
   &::before,
   &::after {
     position: absolute;
     display: block;
     height: 20px;
     content: "";
+    // stylelint-disable-next-line primer/borders
     border-radius: 2px;
     outline: $border-width $border-style $white;
   }
 
   &::before {
     width: 17px;
+    // stylelint-disable-next-line primer/colors
     background: $gray-200;
   }
 
   &::after {
     width: 14px;
+    // stylelint-disable-next-line primer/colors
     background: $gray-300;
   }
 }
@@ -109,11 +116,13 @@
 
     &:hover .avatar {
       margin-right: 0;
+      // stylelint-disable-next-line primer/spacing
       margin-left: 3px;
     }
   }
 
   .avatar.avatar-more {
+    // stylelint-disable-next-line primer/colors
     background: $gray-300;
 
     &::before {
@@ -122,14 +131,15 @@
 
     &::after {
       width: 2px;
-      background: $gray-100;
+      background: $bg-gray;
     }
   }
 
   .avatar {
     margin-right: 0;
+    // stylelint-disable-next-line primer/spacing
     margin-left: -11px;
     border-right: 0;
-    border-left: $border-width $border-style $white;
+    border-left: $border-width $border-style $border-white;
   }
 }
diff --git a/src/avatars/avatar.scss b/src/avatars/avatar.scss
@@ -3,9 +3,10 @@
   overflow: hidden; // Ensure page layout in Firefox should images fail to load
   line-height: $lh-condensed-ultra;
   vertical-align: middle;
-  border-radius: 3px;
+  border-radius: $border-radius;
 }
 
+// stylelint-disable-next-line primer/borders
 .avatar-small { border-radius: 2px; }
 
 .avatar-link {
@@ -16,5 +17,6 @@
 // User for example on /stars and /user for grids of avatars
 .avatar-group-item {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: 3px;
 }
diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss
@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: $white;
+  background-color: $bg-white;
   border-radius: 50%;
   box-shadow: $box-shadow-medium;
 }
@@ -45,6 +45,7 @@
     left: 0;
     width: 100%;
     content: "";
+    // stylelint-disable-next-line primer/borders
     border-bottom: 2px dashed $border-gray;
   }