github-docs 0.0.5 → 0.0.6

data/assets/css/cherry/_variables-computed.scss

@@ -0,0 +1,79 @@
+// Base color variations
+$orange-invert:       findColorInvert($orange) !default;
+$yellow-invert:       findColorInvert($yellow) !default;
+$green-invert:        findColorInvert($green) !default;
+$turquoise-invert:    findColorInvert($turquoise) !default;
+$cyan-invert:         findColorInvert($cyan) !default;
+$blue-invert:         findColorInvert($blue) !default;
+$purple-invert:       findColorInvert($purple) !default;
+$red-invert:          findColorInvert($red) !default;
+
+// App color variations
+$primary-invert:      findColorInvert($primary) !default;
+$primary-light:       findLightColor($primary) !default;
+$primary-dark:        findDarkColor($primary) !default;
+$secondary-invert:    findColorInvert($secondary) !default;
+$secondary-light:     findLightColor($secondary) !default;
+$secondary-dark:      findDarkColor($secondary) !default;
+$success-invert:      findColorInvert($success) !default;
+$success-light:       findLightColor($success) !default;
+$success-dark:        findDarkColor($success) !default;
+$info-invert:         findColorInvert($info) !default;
+$info-light:          findLightColor($info) !default;
+$info-dark:           findDarkColor($info) !default;
+$warning-invert:      findColorInvert($warning) !default;
+$warning-light:       findLightColor($warning) !default;
+$warning-dark:        findDarkColor($warning) !default;
+$danger-invert:       findColorInvert($danger) !default;
+$danger-light:        findLightColor($danger) !default;
+$danger-dark:         findDarkColor($danger) !default;
+$text-invert:         findColorInvert($text) !default;
+$text-light-invert:   findColorInvert($text-light) !default;
+$text-lighter-invert: findColorInvert($text-lighter) !default;
+$text-strong-invert:  findColorInvert($text-strong) !default;
+$link-invert:         findColorInvert($link) !default;
+$link--hover-invert:  findColorInvert($link--hover) !default;
+$link--focus-invert:  findColorInvert($link--focus) !default;
+
+// Lists and maps
+$custom-gradients: ("grad1": (160deg, $primary, darken($primary, 10%), darken($primary, 15%))) !default;
+$custom-colors: (/* E.g. "COLOR_NAME": (#000, #fff), ... */) !default;
+$forms: (/* E.g. ("input-background": #000), ... */) !default;
+
+// Convert gradients into colors.
+@each $name, $gradient in $custom-gradients {
+  // $gradient is a non-bracketed list which is confusing when debugging
+  $value: getColorVariations([getFirstColor($gradient), $gradient]);
+  $custom-colors: map-merge($custom-colors, ($name: $value));
+}
+
+$app-colors: mergeColorMaps((
+  "white": ($white, $black, null, null, null),
+  "black": ($black, $white, null, null, null),
+  "primary": ($primary, $primary-invert, $primary-light, $primary-dark, null),
+  "secondary": ($secondary, $secondary-invert, $secondary-light, $secondary-dark, null),
+  "info": ($info, $info-invert, $info-light, $info-dark, null),
+  "success": ($success, $success-invert, $success-light, $success-dark, null),
+  "warning": ($warning, $warning-invert, $warning-light, $warning-dark, null),
+  "danger": ($danger, $danger-invert, $danger-light, $danger-dark, null),
+  "text": ($text, $text-invert, null, null, null),
+  "light": ($text-light, $text-light-invert, null, null, null),
+  "lighter": ($text-lighter, $text-lighter-invert, null, null, null),
+  "strong": ($text-strong, $text-strong-invert, null, null, null),
+  "link": ($link, $link-invert, null, null, null),
+  "link--hover": ($link--hover, $link--hover-invert, null, null, null),
+  "link--focus": ($link--focus, $link--focus-invert, null, null, null),
+), $custom-colors) !default;
+
+$shades: (
+  "black-light": $black-light,
+  "black-lighter": $black-lighter,
+  "black-lightest": $black-lightest,
+  "grey": $grey,
+  "grey-light": $grey-light,
+  "grey-lighter": $grey-lighter,
+  "grey-lightest": $grey-lightest,
+  "white-dark": $white-dark,
+  "white-darker": $white-darker,
+  "white-darkest": $white-darkest
+) !default;

data/assets/css/cherry/_variables.scss

@@ -0,0 +1,48 @@
+@import "functions.scss";
+
+// Base colors
+$black:            hsl(0, 0%, 0%) !default;
+$black-light:      hsl(0, 0%, 7%) !default;
+$black-lighter:    hsl(0, 0%, 13%) !default;
+$black-lightest:   hsl(0, 0%, 17%) !default;
+
+$grey:             hsl(0, 0%, 27%) !default;
+$grey-light:       hsl(0, 0%, 47%) !default;
+$grey-lighter:     hsl(0, 0%, 73%) !default;
+$grey-lightest:    hsl(0, 0%, 91%) !default;
+
+$white-darkest:    hsl(0, 0%, 94%) !default;
+$white-darker:     hsl(0, 0%, 96%) !default;
+$white-dark:       hsl(0, 0%, 98%) !default;
+$white:            hsl(0, 0%, 100%) !default;
+
+$orange:           hsl(14,  100%, 53%) !default;
+$yellow:           hsl(48,  100%, 67%) !default;
+$green:            hsl(141, 53%,  53%) !default;
+$turquoise:        hsl(171, 100%, 41%) !default;
+$cyan:             hsl(204, 71%,  53%) !default;
+$blue:             hsl(217, 71%,  53%) !default;
+$violet:           hsl(259, 100%, 67%) !default;
+$purple:           hsl(271, 100%, 71%) !default;
+$red:              hsl(348, 86%, 61%) !default;
+
+// App colors
+$primary:          $violet !default;
+$secondary:        $blue !default;
+$success:          $green !default;
+$info:             $blue !default;
+$warning:          $yellow !default;
+$danger:           $red !default;
+$text:             $black-light !default;
+$text-light:       $grey !default;
+$text-lighter:     $grey-light !default;
+$text-strong:      $black !default;
+$link:             $black-light !default;
+$link--hover:      $blue !default;
+$link--focus:      $blue !default;
+
+// Breakpoints
+$breakpoint-lg: 1023px !default; /*desktop*/
+$breakpoint-md: 768px !default; /*tablet*/
+$breakpoint-sm: 590px !default; /*mobile*/
+$breakpoint-xs: 589px !default; /*mobile*/

data/assets/css/index.scss

@@ -2,15 +2,17 @@
 # this ensures Jekyll reads the file to be transformed into CSS later
 # only Main files contain this front matter, not partials.
 ---
+@charset "utf-8";
 
 {% if site.logo %}
   $logo: "{{ site.logo | absolute_url }}";
 {% endif %}
 
-@import "primer-support/index.scss";
-@import "primer-base/index.scss";
-@import "primer-utilities/index.scss";
-@import "primer-layout/index.scss";
-@import "primer-markdown/index.scss";
-@import "github-docs";
-@import "rouge";
+// Cherry variables
+$body-font-size: 14px;
+$body-line-height: 1.65em;
+$family-primary: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,
+  "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+
+// Load modules
+@import "primer-markdown", "cherry", "main", "rouge";

data/{_sass/github-docs.scss → assets/css/main.scss}

@@ -9,11 +9,19 @@ $menu-color: #483973;
     max-width: 1400px;
     margin: 0 auto;
   }
-  .content {
+  .main {
     display: block;
     margin-left: $sidebar-width;
   }
-  .content-edit-md {
+  .main-body {
+    display: block;
+    max-width: 910px;
+    margin: 0 auto;
+    padding: 40px;
+    padding-top: 50px;
+    padding-bottom: 60px;
+  }
+  .main-edit-pencil {
     float: right;
     display: block;
     margin-top: 24px !important;
@@ -28,6 +36,7 @@ $menu-color: #483973;
       fill: #6a737d;
     }
     &:hover,
+    &:focus,
     &:active {
       background-color: #F3F4F6;
       border-color: #1b1f2326;
@@ -35,21 +44,15 @@ $menu-color: #483973;
     }
   }
   .markdown-body {
-    > .content-edit-md + * {
+    > .main-edit-pencil + * {
       margin-top: 0 !important;
     }
   }
-  .content-heading {
-    display: block;
-  }
-  .content-body {
+  .main-heading {
     display: block;
-    max-width: 890px;
-    margin: 0 auto;
-    padding-top: 3em !important;
   }
   @media (max-width: 800px) {
-    .content {
+    .main {
       margin-left: 0;
     }
   }
@@ -94,12 +97,14 @@ $menu-color: #483973;
     padding: 9px 25px;
     font-size: 14px;
     font-weight: 600;
+    line-height: 1.5em;
     color: #fff;
     background-color: #483973;
     border-radius: 3px;
     border: 0;
     box-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08);
     transition: box-shadow 0.2s ease;
+    cursor: pointer;
   }
   .sidebar-heading button:hover {
     box-shadow: 0 4px 6px rgba(50,50,93,0.3), 0 1px 3px rgba(0,0,0,0.3);
@@ -131,9 +136,6 @@ $menu-color: #483973;
   .sidebar-close img {
     width: 22px;
     margin-left: -2px;
-  }
-  .sidebar-close:hover {
-
   }
   @media (max-width: 800px) {
     .sidebar {
@@ -204,10 +206,11 @@ $menu-color: #483973;
     padding-bottom: 5px;
     color: $menu-color;
     font-size: 1.1em;
+    text-decoration: none !important;
   }
   .navigation-list-link.active,
   .navigation-list-link:hover {
-    text-decoration: none;
+    text-decoration: none !important;
     color: darken($menu-color, 40%);
   }
   .navigation-list-link:before {

data/assets/css/primer-markdown/blob-csv.scss

@@ -0,0 +1,25 @@
+.markdown-body {
+  .csv-data {
+    td,
+    th {
+      padding: 5px;
+      overflow: hidden;
+      font-size: $markdown-font-size-small;
+      line-height: 1em;
+      text-align: left;
+      white-space: nowrap;
+    }
+    .blob-num {
+      padding: 10px $markdown-spacer-2 9px;
+      text-align: right;
+      background: #fff;
+      border: 0;
+    }
+    tr { border-top: 0; }
+    th {
+      font-weight: $markdown-font-weight-bold;
+      background: $gray-100;
+      border-top: 0;
+    }
+  }
+}

data/assets/css/primer-markdown/code.scss

@@ -0,0 +1,49 @@
+.markdown-body {
+  // Inline code snippets
+  code,
+  tt {
+    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
+    // font-size: 85%;
+    padding: 0.2em 0.4em;
+    margin: 0;
+    background-color: rgba(#000, 0.05);
+    border-radius: 4px;
+    br { display: none; }
+  }
+  // Code blocks
+  pre {
+    padding: $markdown-spacer-3;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.4;
+    background-color: $gray-100;
+    border-radius: 6px;
+    word-wrap: normal;
+    // Code tags within code blocks
+    > code {
+      padding: 0;
+      margin: 0;
+      font-size: 100%;
+      word-break: normal;
+      white-space: pre;
+      background: transparent;
+      border: 0;
+    }
+    code,
+    tt {
+      display: inline;
+      max-width: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      line-height: inherit;
+      word-wrap: normal;
+      background-color: transparent;
+      border: 0;
+    }
+  }
+  .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+  }
+}

data/{_sass → assets/css}/primer-markdown/headings.scss

@@ -1,63 +1,49 @@
-// Needs refactoring
-// stylelint-disable selector-max-compound-selectors, selector-max-specificity
-// stylelint-disable selector-max-type
 .markdown-body {
-  // Headings
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    margin-top: $spacer-4;
-    margin-bottom: $spacer-3;
-    font-weight: $font-weight-bold;
-    line-height: $lh-condensed;
-
+    margin-top: $markdown-spacer-4;
+    margin-bottom: $markdown-spacer-3;
+    font-weight: $markdown-font-weight-bold;
+    line-height: 1.25em;
     .octicon-link {
-      color: $black;
+      color: #000;
       vertical-align: middle;
       visibility: hidden;
     }
-
     &:hover .anchor {
       text-decoration: none;
-
       .octicon-link {
         visibility: visible;
       }
     }
-
     tt,
     code {
       font-size: inherit;
     }
   }
-
   h1 {
     padding-bottom: 0.3em;
     font-size: 2em;
     border-bottom: 1px solid lighten($gray-200, 3%);
   }
-
   h2 {
     padding-bottom: 0.3em;
     font-size: 1.5em;
     border-bottom: 1px solid lighten($gray-200, 3%);
   }
-
   h3 {
     font-size: 1.25em;
   }
-
   h4 {
     font-size: 1em;
   }
-
   h5 {
     font-size: 0.875em;
   }
-
   h6 {
     font-size: 0.85em;
     color: $gray-500;

data/{_sass → assets/css}/primer-markdown/images.scss

@@ -1,6 +1,3 @@
-// Need to target base styles
-// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type, primer/selector-no-utility
-// stylelint-disable selector-max-type
 .markdown-body {
   // Images & Stuff
   img {
@@ -8,7 +5,7 @@
     // because we put padding on the images to hide header lines, and some people
     // specify the width of their images in their markdown.
     box-sizing: content-box;
-    background-color: $bg-white;
+    background-color: #fff;
 
     &[align=right] {
       padding-left: 20px;
@@ -18,7 +15,6 @@
       padding-right: 20px;
     }
   }
-
   .emoji {
     max-width: none;
     vertical-align: text-top;
@@ -32,7 +28,6 @@
   span.frame {
     display: block;
     overflow: hidden;
-
     > span {
       display: block;
       float: left;
@@ -42,73 +37,60 @@
       overflow: hidden;
       border: 1px solid lighten($gray-300, 5%);
     }
-
     span img {
       display: block;
       float: left;
     }
-
     span span {
       display: block;
       padding: 5px 0 0;
       clear: both;
-      color: $text-gray-dark;
     }
   }
-
   span.align-center {
     display: block;
     overflow: hidden;
     clear: both;
-
     > span {
       display: block;
       margin: 13px auto 0;
       overflow: hidden;
       text-align: center;
     }
-
     span img {
       margin: 0 auto;
       text-align: center;
     }
   }
-
   span.align-right {
     display: block;
     overflow: hidden;
     clear: both;
-
     > span {
       display: block;
       margin: 13px 0 0;
       overflow: hidden;
       text-align: right;
     }
-
     span img {
       margin: 0;
       text-align: right;
     }
   }
-
   span.float-left {
     display: block;
     float: left;
     margin-right: 13px;
     overflow: hidden;
-
     span {
       margin: 13px 0 0;
     }
   }
-
   span.float-right {
     display: block;
     float: right;
     margin-left: 13px;
     overflow: hidden;
-
     > span {
       display: block;
       margin: 13px auto 0;