Ignore node modules

node_modules/primer-support/lib/mixins/buttons.scss

@@ -1,137 +1,160 @@
+// stylelint-disable block-closing-brace-newline-after
+
 // Button color generator for primary and themed buttons
 
-@mixin solid-btn($foreground: $text-gray-dark, $background: #eee) {
-  color: $foreground;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
-  background-color: $background;
-  background-image: linear-gradient(saturate(lighten($background, 13%), 8%), saturate(darken($background, 9%), 5%));
-  border: 1px solid darken($background, 8%);
+// New button hotness
+@mixin btn-solid($color, $bg, $bg2) {
+  color: $color;
+  background-color: $bg2;
+  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
 
-  .counter {
-    color: saturate(darken($background, 9%), 5%);
-    background: $foreground;
-  }
+  @if $bg == $gray-000 {
+    &:focus,
+    &.focus {
+      box-shadow: $btn-input-focus-shadow;
+    }
 
-  &:hover,
-  &:active,
-  &.zeroclipboard-is-hover,
-  &.zeroclipboard-is-active {
-    background-color: darken($background, 10%);
-    background-image: linear-gradient(lighten($background, 8%), darken($background, 13%));
-    border-color: darken($background, 12%);
-  }
+    &:hover,
+    &.hover {
+      background-color: darken($bg2, 3%);
+      background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
+      background-position: 0 -$em-spacer-5;
+      border-color: rgba($black, 0.35);
+    }
 
-  &:active,
-  &.selected,
-  &.zeroclipboard-is-active {
-    background-color: darken($background, 15%);
-    background-image: none;
-    border-color: darken($background, 20%);
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
-  }
+    &:active,
+    &.selected,
+    [open] > & {
+      background-color: darken(desaturate($bg, 10%), 6%);
+      background-image: none;
+      border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
+      box-shadow: $btn-active-shadow;
+    }
 
-  &.selected:hover {
-    background-color: darken($background, 20%);
-  }
-
-  &:disabled,
-  &.disabled {
-    &,
-    &:hover {
-      color: $foreground;
-      cursor: default;
-      background-color: mix(#fff, $background, 50%);
-      background-image: linear-gradient(mix(#fff, $background, 60%), mix(#fff, darken($background, 5%), 45%));
-      border-color: mix(#fff, $background, 40%);
+    &:disabled,
+    &.disabled {
+      color: rgba($color, 0.4);
+      background-color: $bg2;
+      background-image: none;
+      border-color: transparentize($black, 0.8); // back to default .btn
       box-shadow: none;
     }
+
+  } @else {
+    &:focus,
+    &.focus {
+      box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
+    }
+
+    &:hover,
+    &.hover {
+      background-color: darken($bg2, 2%);
+      background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
+      background-position: 0 -$em-spacer-5;
+      border-color: $black-fade-50;
+    }
+
+    &:active,
+    &.selected,
+    [open] > & {
+      background-color: darken(mix($bg, $bg2, 50%), 7%);
+      background-image: none;
+      border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
+      box-shadow: $btn-active-shadow;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: rgba($color, 0.75);
+      background-color: mix($bg2, $white, 50%);
+      background-image: none;
+      border-color: transparentize($black, 0.8); // repeat .btn default to avoid shift on click-drag off of button
+      box-shadow: none;
+    }
+
+    .Counter {
+      color: darken($bg, 8%);
+      background-color: $white;
+    }
   }
 }
 
-// Button color generator for default-y buttons with grey bgs and colored text, like btn-danger
+// Inverse button hover style
+@mixin btn-inverse($color, $bg, $bg2) {
+  color: $color;
+  background-color: $bg;
+  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
 
-@mixin inverse-hover-btn($foreground: $text-gray-dark) {
-  color: $foreground;
+  &:focus {
+    box-shadow: 0 0 0 0.2em rgba($color, 0.4);
+  }
 
   &:hover {
     color: $text-white;
-    background-color: $foreground;
-    background-image: linear-gradient(lighten($foreground, 30%), lighten($foreground, 10%));
-    border-color: $foreground;
+    background-color: $color;
+    background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
+    border-color: $black-fade-50;
+
+    .Counter {
+      color: $text-white;
+    }
   }
 
   &:active,
-  &.selected {
+  &.selected,
+  [open] > & {
     color: $text-white;
-    background-color: darken($foreground, 5%);
+    background-color: darken($color, 5%);
     background-image: none;
-    border-color: darken($foreground, 8%);
-  }
-
-  &.selected:hover {
-    background-color: darken($foreground, 5%);
+    border-color: $black-fade-50;
+    box-shadow: $btn-active-shadow;
   }
 
   &:disabled,
   &.disabled {
-    &,
-    &:hover {
-      color: mix(#fff, $foreground, 50%);
-      background-color: #efefef;
-      background-image: linear-gradient(#fefefe, #efefef);
-      border-color: #e1e1e1;
-    }
-  }
-
-  &:hover,
-  &:active,
-  &.selected {
-    .counter {
-      color: $text-white;
-    }
+    color: rgba($color, 0.4);
+    background-color: $bg2;
+    background-image: none;
+    border-color: transparentize($black, 0.8); // back to default .btn
+    box-shadow: none;
   }
 }
 
 // Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
-
-@mixin outline-btn($text-color: $text-blue, $bg-color: $bg-white) {
+@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
   color: $text-color;
   background-color: $bg-color;
   background-image: none;
-  border: 1px solid $border-gray;
 
-  .counter {
-    background-color: rgba(0, 0, 0, 0.07);
+  .Counter {
+    background-color: rgba($black, 0.07);
   }
 
   &:hover,
   &:active,
   &.selected,
-  &.zeroclipboard-is-hover,
-  &.zeroclipboard-is-active {
+  [open] > & {
     color: $bg-color;
     background-color: $text-color;
     background-image: none;
     border-color: $text-color;
 
-    .counter {
+    .Counter {
       color: $text-color;
       background-color: $bg-color;
     }
   }
 
-  &.selected:hover {
-    background-color: darken($text-color, 5%);
+  &:focus {
+    border-color: $text-color;
+    box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
   }
 
   &:disabled,
   &.disabled {
-    &,
-    &:hover {
-      color: $text-gray;
-      background-color: $bg-white;
-      background-image: none;
-      border-color: $border-gray;
-    }
+    color: $black-fade-30;
+    background-color: $bg-white;
+    border-color: $black-fade-15;
+    box-shadow: none;
   }
 }

node_modules/primer-support/lib/mixins/layout.scss

@@ -1,21 +1,27 @@
 // Responsive media queries
 
 @mixin breakpoint($breakpoint) {
-  // Retrieves the value from the key
-  $value: map-get($breakpoints, $breakpoint);
-
-  // If the key exists in the map
-  @if $value != null {
-    // Prints a media query based on the value
-    @media (min-width: $value) {
-      @content;
-    }
+  @if $breakpoint == "" {
+    @content;
   }
 
-  // If the key doesn't exist in the map
   @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Please make sure it is defined in `$breakpoints` map.";
+    // Retrieves the value from the key
+    $value: map-get($breakpoints, $breakpoint);
+
+    // If the key exists in the map
+    @if $value != null {
+      // Prints a media query based on the value
+      @media (min-width: $value) {
+        @content;
+      }
+    }
+
+    // If the key doesn't exist in the map
+    @else {
+      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Please make sure it is defined in `$breakpoints` map.";
+    }
   }
 }
 

node_modules/primer-support/lib/mixins/misc.scss

@@ -1,5 +1,5 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($foreground: #fff, $background: #ddd) {
+@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
   &::after,
   &::before {
     position: absolute;

node_modules/primer-support/lib/mixins/typography.scss

@@ -40,37 +40,45 @@
 }
 
 // Responsive heading mixins
-// There are no responsive mixins for h5 and h6 because they are small
+// There are no responsive mixins for h4—h6 because they are small
 // and don't need to be smaller on mobile.
-@mixin h1-reponsive {
-  font-size: 26px;
+@mixin f1-responsive {
+  font-size: $h1-size-mobile;
+
+  // 32px on desktop
+  @include breakpoint(md) { font-size: $h1-size; }
+
+}
+
+@mixin f2-responsive {
+  font-size: $h2-size-mobile;
+
+  // 24px on desktop
+  @include breakpoint(md) { font-size: $h2-size; }
+}
+
+@mixin f3-responsive {
+  font-size: $h3-size-mobile;
+
+  // 20px on desktop
+  @include breakpoint(md) { font-size: $h3-size; }
+
+}
+
+// These use the mixins from above for responsive heading sizes.
+// The following mixins can be used where it's convenient or necessary to
+// couple the responsive font-size with the font-weight.
+@mixin h1-responsive {
+  @include f1-responsive;
   font-weight: $font-weight-bold;
-
-  // Up to 32px in future
-  @include breakpoint(md) { font-size: 30px; }
-
 }
 
 @mixin h2-responsive {
-  font-size: 20px;
+  @include f2-responsive;
   font-weight: $font-weight-bold;
-
-  // Up to 22px or 24px in future
-  @include breakpoint(md) { font-size: 21px; }
 }
 
 @mixin h3-responsive {
-  font-size: 14px;
+  @include f3-responsive;
   font-weight: $font-weight-bold;
-
-  @include breakpoint(md) { font-size: 16px; }
-
-}
-
-@mixin h4-responsive {
-  font-size: 13px;
-  font-weight: $font-weight-bold;
-
-  @include breakpoint(md) { font-size: 14px; }
-
 }