jekyll-theme-primer 0.1.7 → 0.1.8

data/_sass/primer-support/README.md

@@ -1,7 +1,7 @@
 # Primer CSS Support
 
 [![NPM version](http://img.shields.io/npm/v/primer-support.svg)](https://www.npmjs.org/package/primer-support)
-[![Build Status](https://travis-ci.org/primer/support.svg?branch=master)](https://travis-ci.org/primer/support)
+[![Build Status](https://travis-ci.org/primer/primer-support.svg?branch=master)](https://travis-ci.org/primer/primer-support)
 
 > Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent.
 >

data/_sass/primer-support/index.scss

@@ -1,7 +1,11 @@
 // variables
-@import "./lib/variables.scss";
+@import "./lib/variables/typography.scss";
+@import "./lib/variables/colors.scss";
+@import "./lib/variables/layout.scss";
+@import "./lib/variables/misc.scss";
 
 // mixins
 @import "./lib/mixins/typography.scss";
 @import "./lib/mixins/layout.scss";
+@import "./lib/mixins/buttons.scss";
 @import "./lib/mixins/misc.scss";

data/_sass/primer-support/lib/mixins/buttons.scss

@@ -0,0 +1,156 @@
+// stylelint-disable block-closing-brace-newline-after
+
+// Button color generator for primary and themed buttons
+
+// New button hotness
+@mixin btn-solid($color, $bg, $bg2) {
+  color: $color;
+  background-color: $bg2;
+  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
+
+  @if $bg == $gray-000 {
+    &:focus,
+    &.focus {
+      box-shadow: $btn-input-focus-shadow;
+    }
+
+    &:hover,
+    &.hover {
+      background-color: darken($bg2, 3%);
+      background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
+      background-position: 0 -0.5em;
+      border-color: rgba($black, 0.35);
+    }
+
+    &:active,
+    &.selected {
+      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;
+    }
+
+    &: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.3);
+    }
+
+    &:hover,
+    &.hover {
+      background-color: darken($bg2, 2%);
+      background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
+      background-position: 0 -0.5em;
+      border-color: $black-fade-50;
+    }
+
+    &:active,
+    &.selected {
+      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;
+    }
+  }
+}
+
+// Inverse button hover style
+@mixin btn-inverse($color, $bg, $bg2) {
+  color: $color;
+  background-color: $bg;
+  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
+
+  &:focus {
+    box-shadow: 0 0 0 0.2em rgba($color, 0.3);
+  }
+
+  &:hover {
+    color: $text-white;
+    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 {
+    color: $text-white;
+    background-color: darken($color, 5%);
+    background-image: none;
+    border-color: $black-fade-50;
+    box-shadow: $btn-active-shadow;
+  }
+
+  &: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;
+  }
+}
+
+// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
+@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
+  color: $text-color;
+  background-color: $bg-color;
+  background-image: none;
+
+  .counter {
+    background-color: rgba(0, 0, 0, 0.07);
+  }
+
+  &:hover,
+  &:active,
+  &.selected {
+    color: $bg-color;
+    background-color: $text-color;
+    background-image: none;
+    border-color: $text-color;
+
+    .counter {
+      color: $text-color;
+      background-color: $bg-color;
+    }
+  }
+
+  &:focus {
+    border-color: $text-color;
+    box-shadow: 0 0 0 0.2em rgba($text-color, 0.3);
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $black-fade-30;
+    background-color: $bg-white;
+    border-color: rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+}

data/_sass/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;

data/_sass/primer-support/lib/mixins/typography.scss

@@ -44,7 +44,7 @@
 // and don't need to be smaller on mobile.
 @mixin h1-reponsive {
   font-size: 26px;
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 
   // Up to 32px in future
   @include breakpoint(md) { font-size: 30px; }
@@ -53,7 +53,7 @@
 
 @mixin h2-responsive {
   font-size: 20px;
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 
   // Up to 22px or 24px in future
   @include breakpoint(md) { font-size: 21px; }
@@ -61,7 +61,7 @@
 
 @mixin h3-responsive {
   font-size: 14px;
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 
   @include breakpoint(md) { font-size: 16px; }
 
@@ -69,7 +69,7 @@
 
 @mixin h4-responsive {
   font-size: 13px;
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 
   @include breakpoint(md) { font-size: 14px; }
 

data/_sass/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:      transparentize($black, 0.85) !default;
+$black-fade-30:      transparentize($black, 0.7) !default;
+$black-fade-50:      transparentize($black, 0.5) !default;
+$black-fade-70:      transparentize($black, 0.3) !default;
+$black-fade-85:      transparentize($black, 0.15) !default;
+
+$white-fade-15:      transparentize($white, 0.85) !default;
+$white-fade-30:      transparentize($white, 0.7) !default;
+$white-fade-50:      transparentize($white, 0.5) !default;
+$white-fade-70:      transparentize($white, 0.3) !default;
+$white-fade-85:      transparentize($white, 0.15) !default;
+
+// -------- Color System --------
+$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;

data/_sass/primer-support/lib/variables/colors.scss

@@ -0,0 +1,64 @@
+@import "color-system.scss";
+// Color variables
+// stylelint-disable declaration-bang-space-before
+
+// State indicators.
+$status-renamed:    $yellow-500 !default;
+$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-red:         $red !default;
+$border-red-light:   desaturate($red-300, 60%) !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;

data/_sass/primer-support/lib/variables/layout.scss

@@ -0,0 +1,58 @@
+// 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 => 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
+
+// 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 + (12 * 2)) <= container + gutters
+  lg: $width-lg,
+  // Extra large screen / wide desktop
+  xl: $width-xl
+) !default;