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; }
-
 }

node_modules/primer-support/lib/variables/color-system.scss

@@ -0,0 +1,114 @@
+//
+//
+// -------- Grays --------
+$gray-000:        #fafbfc !default;
+$gray-100:        #f6f8fa !default;
+$gray-200:        #e1e4e8 !default;
+$gray-300:        #d1d5da !default;
+$gray-400:        #959da5 !default;
+$gray-500:        #6a737d !default;
+$gray-600:        #586069 !default;
+$gray-700:        #444d56 !default;
+$gray-800:        #2f363d !default;
+$gray-900:        #24292e !default; // body font color
+
+// -------- Blue --------
+$blue-000:        #f1f8ff !default;
+$blue-100:        #dbedff !default;
+$blue-200:        #c8e1ff !default;
+$blue-300:        #79b8ff !default;
+$blue-400:        #2188ff !default;
+$blue-500:        #0366d6 !default; // Default: Passes AA with #fff
+$blue-600:        #005cc5 !default;
+$blue-700:        #044289 !default;
+$blue-800:        #032f62 !default;
+$blue-900:        #05264c !default; // Passes with 1/2/300 blues
+
+// -------- Green --------
+$green-000:       #f0fff4 !default;
+$green-100:       #dcffe4 !default;
+$green-200:       #bef5cb !default;
+$green-300:       #85e89d !default;
+$green-400:       #34d058 !default;
+$green-500:       #28a745 !default; // Default. passes AA Large
+$green-600:       #22863a !default; // Text green, passes AA on #fff
+$green-700:       #176f2c !default;
+$green-800:       #165c26 !default;
+$green-900:       #144620 !default;
+
+// -------- Yellow --------
+$yellow-000:      #fffdef !default;
+$yellow-100:      #fffbdd !default;
+$yellow-200:      #fff5b1 !default;
+$yellow-300:      #ffea7f !default;
+$yellow-400:      #ffdf5d !default;
+$yellow-500:      #ffd33d !default;
+$yellow-600:      #f9c513 !default;
+$yellow-700:      #dbab09 !default;
+$yellow-800:      #b08800 !default;
+$yellow-900:      #735c0f !default;
+
+// -------- Orange --------
+$orange-000:      #fff8f2 !default;
+$orange-100:      #ffebda !default;
+$orange-200:      #ffd1ac !default;
+$orange-300:      #ffab70 !default;
+$orange-400:      #fb8532 !default;
+$orange-500:      #f66a0a !default; // Default. passes AA Large with #fff
+$orange-600:      #e36209 !default;
+$orange-700:      #d15704 !default;
+$orange-800:      #c24e00 !default;
+$orange-900:      #a04100 !default;
+
+// -------- Red --------
+$red-000:         #ffeef0 !default;
+$red-100:         #ffdce0 !default;
+$red-200:         #fdaeb7 !default;
+$red-300:         #f97583 !default;
+$red-400:         #ea4a5a !default;
+$red-500:         #d73a49 !default; // Default. passes AA
+$red-600:         #cb2431 !default;
+$red-700:         #b31d28 !default;
+$red-800:         #9e1c23 !default;
+$red-900:         #86181d !default;
+
+// -------- Purple --------
+$purple-000:      #f5f0ff !default;
+$purple-100:      #e6dcfd !default;
+$purple-200:      #d1bcf9 !default;
+$purple-300:      #b392f0 !default;
+$purple-400:      #8a63d2 !default;
+$purple-500:      #6f42c1 !default; // passes AA with #fff
+$purple-600:      #5a32a3 !default;
+$purple-700:      #4c2889 !default;
+$purple-800:      #3a1d6e !default;
+$purple-900:      #29134e !default;
+
+// -------- Fades --------
+// Black based on same hue as $gray-900
+$black: #1b1f23 !default;
+$white: #fff !default;
+
+$black-fade-15:      rgba($black, 0.15) !default;
+$black-fade-30:      rgba($black, 0.3) !default;
+$black-fade-50:      rgba($black, 0.5) !default;
+$black-fade-70:      rgba($black, 0.7) !default;
+$black-fade-85:      rgba($black, 0.85) !default;
+
+$white-fade-15:      rgba($white, 0.15) !default;
+$white-fade-30:      rgba($white, 0.3) !default;
+$white-fade-50:      rgba($white, 0.5) !default;
+$white-fade-70:      rgba($white, 0.7) !default;
+$white-fade-85:      rgba($white, 0.85) !default;
+
+// -------- Color defaults --------
+$red:         $red-500 !default;
+$purple:      $purple-500 !default;
+$blue:        $blue-500 !default;
+$green:       $green-500 !default;
+$yellow:      $yellow-500 !default;
+$orange:      $orange-500 !default;
+
+$gray-dark:   $gray-900 !default;
+$gray-light:  $gray-400 !default;
+$gray:        $gray-500 !default;

node_modules/primer-support/lib/variables/colors.scss

@@ -0,0 +1,67 @@
+@import "color-system.scss";
+// Color variables
+// stylelint-disable declaration-bang-space-before
+
+// State indicators.
+$status-pending:    desaturate($yellow-700, 15%) !default;
+
+// Repository type colors
+// Should be able to deprecate these in future
+$repo-private-text: $black-fade-70 !default;
+$repo-private-bg:   $yellow-000 !default;
+$repo-private-icon: transparentize($yellow-900, 0.5) !default;
+
+// Highlight used for things like search
+$highlight-yellow: rgba(255, 247, 140, 0.5);
+
+// Border colors
+$border-black-fade:  $black-fade-15 !default;
+
+$border-blue:        $blue-500 !default;
+$border-blue-light:  $blue-200 !default;
+
+$border-green:       $green-400 !default;
+$border-green-light: desaturate($green-300, 40%) !default;
+
+$border-purple:      $purple !default;
+
+$border-red:         $red !default;
+$border-red-light:   desaturate($red-300, 60%) !default;
+
+$border-purple:      $purple !default;
+
+$border-yellow:      desaturate($yellow-300, 60%) !default;
+
+$border-gray-dark:   $gray-300 !default;
+$border-gray-darker: $gray-700 !default;
+$border-gray-light:  lighten($gray-200, 3%) !default;
+$border-gray:        $gray-200 !default;
+
+// Background colors
+$bg-blue-light:     $blue-000 !default;
+$bg-blue:           $blue-500 !default;
+$bg-gray-dark:      $gray-900 !default;
+$bg-gray-light:     $gray-000 !default;
+$bg-gray:           $gray-100 !default;
+$bg-green:          $green-500 !default;
+$bg-green-light:    $green-100 !default;
+$bg-orange:         $orange-700 !default;
+$bg-purple:         $purple-500 !default;
+$bg-purple-light:   $purple-000 !default;
+$bg-red:            $red-500 !default;
+$bg-red-light:      $red-100 !default;
+$bg-white:          $white !default;
+$bg-yellow:         $yellow-500 !default;
+$bg-yellow-light:   $yellow-200 !default;
+
+// Text colors
+$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-orange:       $orange-900 !default;
+$text-orange-light: $orange-600 !default;
+$text-purple:       $purple !default;
+$text-red:          $red-600 !default;
+$text-white:        $white !default;

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

@@ -0,0 +1,72 @@
+// Layout variables
+// stylelint-disable declaration-bang-space-before
+
+// These are our margin and padding utility spacers. The default step size we
+// use is 8px. This gives us a key of:
+//    0 => 0px
+//    1 => 4px
+//    2 => 8px
+//    3 => 16px
+//    4 => 24px
+//    5 => 32px
+//    6 => 40px
+$spacer: 8px !default;
+$spacers: (
+  0,
+  round($spacer / 2),
+  $spacer,
+  $spacer * 2,
+  $spacer * 3,
+  $spacer * 4,
+  $spacer * 5
+) !default;
+
+// Aliases for easy use
+$spacer-0: nth($spacers, 1) !default; // 0
+$spacer-1: nth($spacers, 2) !default; // 4px
+$spacer-2: nth($spacers, 3) !default; // 8px
+$spacer-3: nth($spacers, 4) !default; // 16px
+$spacer-4: nth($spacers, 5) !default; // 24px
+$spacer-5: nth($spacers, 6) !default; // 32px
+$spacer-6: nth($spacers, 7) !default; // 40px
+
+// Em spacer variables
+$em-spacer-1: 0.0625em !default; // 1/16
+$em-spacer-2: 0.125em !default;  // 1/8
+$em-spacer-3: 0.25em !default;   // 1/4
+$em-spacer-4: 0.375em !default;  // 3/8
+$em-spacer-5: 0.5em !default;    // 1/2
+$em-spacer-6: 0.75em !default;   // 3/4
+
+// Fixed-width container variables
+$container-width: 980px !default;
+$grid-gutter:     10px !default;
+
+// Breakpoint widths
+$width-xs: 0;
+$width-sm: 544px;
+$width-md: 768px;
+$width-lg: 1012px;
+$width-xl: 1280px;
+
+// Responsive container widths
+$container-md: $width-md !default;
+$container-lg: $width-lg !default;
+$container-xl: $width-xl !default;
+
+// Breakpoints
+$breakpoints: (
+  // Small screen / phone
+  sm: $width-sm,
+  // Medium screen / tablet
+  md: $width-md,
+  // Large screen / desktop (980 + (16 * 2)) <= container + gutters
+  lg: $width-lg,
+  // Extra large screen / wide desktop
+  xl: $width-xl
+) !default;
+
+$responsive-variants: ("": "");
+@each $key in map-keys($breakpoints) {
+  $responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
+}

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

@@ -0,0 +1,40 @@
+// Miscellaneous variables
+// stylelint-disable declaration-bang-space-before
+
+// Border size
+$border-width: 1px !default;
+$border-color: $border-gray !default;
+$border-style: solid !default;
+$border: $border-width $border-color $border-style !default;
+$border-radius: 3px !default;
+
+// Custom explore grid border
+$exploregrid-item-border-radius: 4px;
+
+// Box shadow
+$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
+$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
+$box-shadow-large: 0 1px 15px $black-fade-15 !default;
+$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
+
+// Tooltips
+$tooltip-max-width: 250px !default;
+$tooltip-background-color: $black;
+$tooltip-text-color: $white !default;
+$tooltip-delay: 0.4s !default;
+$tooltip-duration: 0.1s !default;
+
+// Should be moved into custom github css
+$stats-switcher-py: 10px;
+// Future proof this `height` value by finding the computed line-height, then
+// adding the total value of the vertical padding. This var is used to toggle
+// between the stats bar and language breakdown.
+$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
+
+$min_tab_size: 1;
+$max_tab_size: 12;
+
+// Button and form variables
+$form-control-shadow: inset 0 1px 2px rgba($black, 0.075);
+$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3);
+$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15;

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

@@ -0,0 +1,43 @@
+// Typography variables
+// stylelint-disable declaration-bang-space-before
+
+// Heading sizes - mobile
+// h4—h6 remain the same size on both mobile & desktop
+$h00-size-mobile: 40px !default;
+$h0-size-mobile: 32px !default;
+$h1-size-mobile: 26px !default;
+$h2-size-mobile: 22px !default;
+$h3-size-mobile: 18px !default;
+
+// Heading sizes - desktop
+$h00-size: 48px !default;
+$h0-size: 40px !default;
+$h1-size: 32px !default;
+$h2-size: 24px !default;
+$h3-size: 20px !default;
+$h4-size: 16px !default;
+$h5-size: 14px !default;
+$h6-size: 12px !default;
+
+$font-size-small: 12px !default;
+
+// Font weights
+$font-weight-bold: 600 !default;
+$font-weight-semibold: 500 !default;
+$font-weight-normal: 400 !default;
+$font-weight-light: 300 !default;
+
+// Line heights
+$lh-condensed-ultra: 1 !default;
+$lh-condensed: 1.25 !default;
+$lh-default: 1.5 !default;
+
+// Font stacks
+$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Monospace font stack
+$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+
+// The base body size
+$body-font-size: 14px !default;
+$body-line-height: $lh-default !default;