Initial commit

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

@@ -0,0 +1,137 @@
+// 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%);
+
+  .counter {
+    color: saturate(darken($background, 9%), 5%);
+    background: $foreground;
+  }
+
+  &: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%);
+  }
+
+  &: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);
+  }
+
+  &.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%);
+      box-shadow: none;
+    }
+  }
+}
+
+// Button color generator for default-y buttons with grey bgs and colored text, like btn-danger
+
+@mixin inverse-hover-btn($foreground: $text-gray-dark) {
+  color: $foreground;
+
+  &:hover {
+    color: $text-white;
+    background-color: $foreground;
+    background-image: linear-gradient(lighten($foreground, 30%), lighten($foreground, 10%));
+    border-color: $foreground;
+  }
+
+  &:active,
+  &.selected {
+    color: $text-white;
+    background-color: darken($foreground, 5%);
+    background-image: none;
+    border-color: darken($foreground, 8%);
+  }
+
+  &.selected:hover {
+    background-color: darken($foreground, 5%);
+  }
+
+  &: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;
+    }
+  }
+}
+
+// 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) {
+  color: $text-color;
+  background-color: $bg-color;
+  background-image: none;
+  border: 1px solid $border-gray;
+
+  .counter {
+    background-color: rgba(0, 0, 0, 0.07);
+  }
+
+  &:hover,
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: $bg-color;
+    background-color: $text-color;
+    background-image: none;
+    border-color: $text-color;
+
+    .counter {
+      color: $text-color;
+      background-color: $bg-color;
+    }
+  }
+
+  &.selected:hover {
+    background-color: darken($text-color, 5%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: $text-gray;
+      background-color: $bg-white;
+      background-image: none;
+      border-color: $border-gray;
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+// 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 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.";
+  }
+}
+
+// Retina media query
+
+@mixin retina-media-query {
+  @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-moz-min-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    @content;
+  }
+}
+
+// Clearfix
+//
+// Clears floats via mixin.
+
+@mixin clearfix {
+  &::before {
+    display: table;
+    content: "";
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}

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

@@ -0,0 +1,29 @@
+// Generate a two-color caret for any element.
+@mixin double-caret($foreground: #fff, $background: #ddd) {
+  &::after,
+  &::before {
+    position: absolute;
+    top: 11px;
+    right: 100%;
+    left: -16px;
+    display: block;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: " ";
+    border-color: transparent;
+    border-style: solid solid outset;
+  }
+
+  &::after {
+    margin-top: 1px;
+    margin-left: 2px;
+    border-width: 7px;
+    border-right-color: $foreground;
+  }
+
+  &::before {
+    border-width: 8px;
+    border-right-color: $background;
+  }
+}

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

@@ -0,0 +1,76 @@
+// Text hiding for image based text replacement.
+// Higher performance than -9999px because it only renders
+// the size of the actual text, not a full 9999px box.
+@mixin hide-text() {
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+// Heading mixins for use within components
+// These match heading utilities in utilities/typography
+@mixin h1 {
+  font-size: $h1-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h2 {
+  font-size: $h2-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h3 {
+  font-size: $h3-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h4 {
+  font-size: $h4-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h5 {
+  font-size: $h5-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h6 {
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+}
+
+// Responsive heading mixins
+// There are no responsive mixins for h5 and h6 because they are small
+// and don't need to be smaller on mobile.
+@mixin h1-reponsive {
+  font-size: 26px;
+  font-weight: $font-weight-bold;
+
+  // Up to 32px in future
+  @include breakpoint(md) { font-size: 30px; }
+
+}
+
+@mixin h2-responsive {
+  font-size: 20px;
+  font-weight: $font-weight-bold;
+
+  // Up to 22px or 24px in future
+  @include breakpoint(md) { font-size: 21px; }
+}
+
+@mixin h3-responsive {
+  font-size: 14px;
+  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.scss

@@ -0,0 +1,201 @@
+// 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 => 12px
+//    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-1: nth($spacers, 2) !default; // 4px
+$spacer-2: nth($spacers, 3) !default; // 8px
+$spacer-3: nth($spacers, 4) !default; // 12px
+$spacer-4: nth($spacers, 5) !default; // 24px
+$spacer-5: nth($spacers, 6) !default; // 32px
+$spacer-6: nth($spacers, 7) !default; // 40px
+
+$container-width: 980px !default;
+$grid-gutter:     10px !default;
+
+// breakpoints
+$width-xs: 0;
+$width-sm: 544px;
+$width-md: 768px;
+$width-lg: 1012px;
+$width-xl: 1280px;
+
+// New responsive container-width
+$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 + (12 * 2)) <= container + gutters
+  lg: $width-lg,
+  // Extra large screen / wide desktop
+  xl: $width-xl
+) !default;
+
+// ---- Colors ----
+
+// Brand
+$blue:              #4078c0 !default;
+$gray-dark:         #333    !default;
+$gray-light:        #999    !default;
+$gray:              #767676 !default;
+$green:             #6cc644 !default;
+$orange:            #c9510c !default;
+$purple:            #6e5494 !default;
+$red:               #bd2c00 !default;
+$yellow:            #ffd36b !default;
+$white:             #fff !default;
+
+// State indicators.
+$status-renamed:    #fffa5d !default;
+$status-pending:    #cea61b !default;
+
+// Repository type colors
+$repo-private-text: #4c4a42 !default;
+$repo-private-bg:   #fff9ea !default;
+$repo-private-icon: #e9dba5 !default;
+
+// Alerts
+$flash-border-blue: #bac6d3 !default;
+$flash-bg-blue: #e2eef9 !default;
+$flash-text-blue: #246 !default;
+
+$flash-border-yellow: #dfd8c2 !default;
+$flash-bg-yellow: #fff9ea !default;
+$flash-text-yellow: #4c4a42 !default;
+
+$flash-border-red: #d2b2b2 !default;
+$flash-bg-red:     #fcdede !default;
+$flash-text-red:   #911 !default;
+
+$flash-border-green: #bad3be !default;
+$flash-bg-green:     #e2f9e5 !default;
+$flash-text-green:   #22662c !default;
+
+// Border colors
+$border-blue:       #c5d5dd !default;
+$border-blue-light: #c9e6f2 !default;
+$border-blue-dark:  $blue !default;
+$border-red:        $flash-border-red !default;
+$border-red-dark:   $red !default;
+$border-gray-dark:  #ddd !default;
+$border-gray-darker: #444 !default;
+$border-gray-light: #eee !default;
+$border-gray:       #e5e5e5 !default;
+
+// Background colors
+$bg-blue-light:     #f2f8fa !default;
+$bg-blue:           $blue !default;
+$bg-gray-dark:      $gray-dark !default;
+$bg-gray-light:     #fafafa !default;
+$bg-gray:           #f5f5f5 !default;
+$bg-green:          $green !default;
+$bg-green-light:    #eaffea !default;
+$bg-orange:         $orange !default;
+$bg-purple:         $purple !default;
+$bg-red:            $red !default;
+$bg-red-light:      #fcdede !default;
+$bg-white:          $white !default;
+$bg-yellow:         $yellow !default;
+$bg-yellow-light:   #fff9ea !default; // same as $flash-bg-yellow and $repo-private-bg
+
+// Text colors
+$text-blue:         $blue !default;
+$text-gray-dark:    $gray-dark !default;
+$text-gray-light:   $gray-light !default;
+$text-gray:         $gray !default;
+$text-green:        darken($green, 10%) !default;
+$text-orange:       $orange !default;
+$text-purple:       $purple !default;
+$text-red:          $red !default;
+$text-white:        $white !default;
+
+// 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;
+
+// Box shadow
+$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !default;
+$box-shadow-medium: 0 1px 5px rgba(0, 0, 0, 0.15) !default;
+$box-shadow-large: 0 1px 15px rgba(0, 0, 0, 0.15) !default;
+
+// Heading sizes
+$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-weight-bold: 600 !default;
+$font-weight-semibold: 500 !default;
+$font-weight-normal: 400 !default;
+$font-weight-light: 300 !default;
+
+$font-size-small: 12px !default;
+
+$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: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+
+// The base body size
+$body-font-size: 14px !default;
+$body-line-height: $lh-default !default;
+
+// Tooltips
+$tooltip-max-width: 250px !default;
+$tooltip-background-color: rgba(0, 0, 0, 0.8) !default;
+$tooltip-text-color: #fff !default;
+$tooltip-delay: 0.4s !default;
+$tooltip-duration: 0.1s !default;
+
+$blob-inner-border: #eee;
+
+$commitBackgroundColor: #f2f9fc;
+
+$conversationListBorderColor: #eee;
+
+$exploregrid-item-border-radius: 4px;
+
+$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;