jekyll-theme-primer 0.1.7 → 0.1.8

data/_sass/primer-utilities/lib/borders.scss

@@ -0,0 +1,61 @@
+// Border utilities
+// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
+
+/* Add a gray border */
+.border        { border: $border !important; }
+/* Add a gray border to the top */
+.border-top    { border-top: $border !important; }
+/* Add a gray border to the right */
+.border-right  { border-right: $border !important; }
+/* Add a gray border to the bottom */
+.border-bottom { border-bottom: $border !important; }
+/* Add a gray border to the left */
+.border-left   { border-left: $border !important; }
+/* Add a gray border to the left and right */
+.border-y {
+  border-top: $border !important;
+  border-bottom: $border !important;
+}
+
+.border-dashed { border-style: dashed !important; }
+
+/* Use with .border to turn the border blue */
+.border-blue       { border-color: $border-blue !important; }
+/* Use with .border to turn the border blue-light */
+.border-blue-light  { border-color: $border-blue-light !important; }
+/* Use with .border to turn the border green */
+.border-green        { border-color: $border-green !important; }
+/* Use with .border to turn the border green light */
+.border-green-light { border-color: $border-green-light !important; }
+/* Use with .border to turn the border red */
+.border-red        { border-color: $border-red !important; }
+/* Use with .border to turn the border red-light */
+.border-red-light   { border-color: $border-red-light !important; }
+/* Use with .border to turn the border yellow */
+.border-yellow  { border-color: $border-yellow !important; }
+/* Use with .border to turn the border gray-light */
+.border-gray-light { border-color: $border-gray-light !important; }
+/* Use with .border to turn the border gray-dark */
+.border-gray-dark  { border-color: $border-gray-dark !important; }
+/* Use with .border to turn the border rgba black 0.15 */
+.border-black-fade { border-color: $border-black-fade !important; }
+
+// Without borders
+/* Remove all borders */
+.border-0        { border: 0 !important; }
+/* Remove the top border */
+.border-top-0    { border-top: 0 !important; }
+/* Remove the right border */
+.border-right-0  { border-right: 0 !important; }
+/* Remove the bottom border */
+.border-bottom-0 { border-bottom: 0 !important; }
+/* Remove the left border */
+.border-left-0   { border-left: 0 !important; }
+
+// Rounded corners
+/* Remove the border-radius */
+.rounded-0 { border-radius: 0 !important; }
+/* Add a border-radius to all corners */
+.rounded-1 { border-radius: $border-radius !important; }
+/* Add a 2x border-radius to all corners */
+.rounded-2 { border-radius: $border-radius * 2 !important; }

data/_sass/primer-utilities/lib/box-shadow.scss

@@ -0,0 +1,26 @@
+// Box shadow utilities
+// stylelint-disable primer/selector-no-utility
+
+// Box shadows
+
+.box-shadow {
+  box-shadow: $box-shadow !important;
+}
+
+.box-shadow-medium {
+  box-shadow: $box-shadow-medium !important;
+}
+
+.box-shadow-large {
+  box-shadow: $box-shadow-large !important;
+}
+
+.box-shadow-extra-large {
+  box-shadow: $box-shadow-extra-large !important;
+}
+
+// Turn off box shadow
+
+.box-shadow-none {
+  box-shadow: none !important;
+}

data/_sass/primer-utilities/lib/colors.scss

@@ -1,40 +1,102 @@
 // Color utilities
-// stylelint-disable block-opening-brace-space-before, block-closing-brace-newline-before, block-opening-brace-newline-after, selector-list-comma-newline-after, block-opening-brace-space-after, primer/selector-no-utility, rule-non-nested-empty-line-before
+// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
+// stylelint-disable comment-empty-line-before
 
 // background colors
+/* Set the background to $bg-white */
 .bg-white      { background-color: $bg-white !important; }
+/* Set the background to $bg-blue */
 .bg-blue       { background-color: $bg-blue !important; }
+/* Set the background to $bg-blue-light */
 .bg-blue-light { background-color: $bg-blue-light !important; }
+/* Set the background to $bg-gray-dark */
 .bg-gray-dark  { background-color: $bg-gray-dark !important; }
+/* Set the background to $bg-gray */
 .bg-gray       { background-color: $bg-gray !important; }
+/* Set the background to $bg-gray-light */
 .bg-gray-light { background-color: $bg-gray-light !important; }
+/* Set the background to $bg-green */
 .bg-green      { background-color: $bg-green !important; }
+/* Set the background to $bg-green-light */
+.bg-green-light     { background-color: $bg-green-light !important; }
+/* Set the background to $bg-red */
 .bg-red        { background-color: $bg-red !important; }
+/* Set the background to $bg-red-light */
+.bg-red-light  { background-color: $bg-red-light !important; }
+/* Set the background to $bg-yellow */
+.bg-yellow     { background-color: $bg-yellow !important; }
+/* Set the background to $bg-yellow-light */
+.bg-yellow-light     { background-color: $bg-yellow-light !important; }
+/* Set the background to $bg-purple */
+.bg-purple     { background-color: $bg-purple !important; }
+/* Set the background to $bg-purple-light */
+.bg-purple-light     { background-color: $bg-purple-light !important; }
+
+.bg-shade-gradient {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.065), rgba(0, 0, 0, 0)) !important;
+  background-repeat: no-repeat !important;
+  background-size: 100% 200px !important;
+}
 
 // text colors
+/* Set the text color to $text-blue */
 .text-blue          { color: $text-blue !important; }
+/* Set the text color to $text-red */
 .text-red           { color: $text-red !important; }
+/* Set the text color to $text-gray-light */
 .text-gray-light    { color: $text-gray-light !important; }
+/* Set the text color to $text-gray */
 .text-gray          { color: $text-gray !important; }
+/* Set the text color to $text-gray-dark */
 .text-gray-dark     { color: $text-gray-dark !important; }
+/* Set the text color to $text-green */
 .text-green         { color: $text-green !important; }
+/* Set the text color to $text-orange */
 .text-orange        { color: $text-orange !important; }
+/* Set the text color to $text-orange-light */
+.text-orange-light        { color: $text-orange-light !important; }
+/* Set the text color to $text-purple */
 .text-purple        { color: $text-purple !important; }
+/* Set the text color to $text-white */
 .text-white         { color: $text-white !important; }
+/* Set the text color to inherit */
 .text-inherit       { color: inherit !important; }
 
-// link colors
-.link-blue      { color: $text-blue !important; }
-.link-gray-dark { color: $text-gray-dark !important; }
-.link-gray      { color: $text-gray !important; }
-
 // Text states
+// These can probably all be regular utilities
 .text-renamed { color: $status-renamed !important; }
-.text-pending { color: $status-pending !important; }
+.text-pending { color: $yellow-800 !important; }
+// Separate text and background colors in future to improve a11y
+.bg-pending { color: $yellow-700 !important; }
+
+// Link colors
+// Sets the links color to $text-gray and $text-blue on hover
+.link-gray {
+  color: $text-gray !important;
+
+  &:hover {
+    color: $text-blue !important;
+  }
+}
+
+// Sets the links color to $text-gray-dark and $text-blue on hover
+.link-gray-dark {
+  color: $text-gray-dark !important;
+
+  &:hover {
+    color: $text-blue !important;
+  }
+}
+
+/* Set the link color to $text-blue on hover
+  Useful when you want only part of a link to turn blue on hover */
+.link-hover-blue {
+  &:hover {
+    color: $text-blue !important;
+  }
+}
 
-// Muted link
-//
-// Have a link you need to be gray to start, and blue on hover? Use this.
+/* Make a link $text-gray, then $text-blue on hover and removes the underline */
 .muted-link {
   color: $text-gray !important;
 

data/_sass/primer-utilities/lib/flexbox.scss

@@ -0,0 +1,80 @@
+// Flex utility classes
+
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
+// stylelint-disable comment-empty-line-before
+
+// - - - - - - - - - - - - - - - - - - - - - - -
+// This is a template for generating the flex utility classes.
+// A version of each class will be generated without a breakpoint,
+// along with a variant for each breakpoint.
+// - - - - - - - - - - - - - - - - - - - - - - -
+
+@mixin flexUtility($breakpoint: 0) {
+
+  // This is the breakpoint that will be inserted into class names
+  $breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
+
+  // If there's no breakpoint, the $breakstring value will be blank.
+  @if $breakpoint == 0 {
+    $breakstring: ""; // example: `.d-flex`
+  }
+
+  // Flexbox classes
+  // Container
+
+  .flex#{$breakstring}-row         { flex-direction: row !important; }
+  .flex#{$breakstring}-row-reverse { flex-direction: row-reverse !important; }
+  .flex#{$breakstring}-column      { flex-direction: column !important; }
+
+  .flex#{$breakstring}-wrap     { flex-wrap: wrap !important; }
+  .flex#{$breakstring}-nowrap   { flex-wrap: nowrap !important; }
+
+  .flex#{$breakstring}-justify-start    { justify-content: flex-start !important; }
+  .flex#{$breakstring}-justify-end      { justify-content: flex-end !important; }
+  .flex#{$breakstring}-justify-center   { justify-content: center !important; }
+  .flex#{$breakstring}-justify-between  { justify-content: space-between !important; }
+  .flex#{$breakstring}-justify-around   { justify-content: space-around !important; }
+
+  .flex#{$breakstring}-items-start      { align-items: flex-start !important; }
+  .flex#{$breakstring}-items-end        { align-items: flex-end !important; }
+  .flex#{$breakstring}-items-center     { align-items: center !important; }
+  .flex#{$breakstring}-items-baseline   { align-items: baseline !important; }
+  .flex#{$breakstring}-items-stretch    { align-items: stretch !important; }
+
+  .flex#{$breakstring}-content-start    { align-content: flex-start !important; }
+  .flex#{$breakstring}-content-end      { align-content: flex-end !important; }
+  .flex#{$breakstring}-content-center   { align-content: center !important; }
+  .flex#{$breakstring}-content-between  { align-content: space-between !important; }
+  .flex#{$breakstring}-content-around   { align-content: space-around !important; }
+  .flex#{$breakstring}-content-stretch  { align-content: stretch !important; }
+
+  // Item
+  .flex#{$breakstring}-auto { flex: 1 1 auto !important; }
+  .flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
+
+  .flex#{$breakstring}-self-auto        { align-self: auto !important; }
+  .flex#{$breakstring}-self-start       { align-self: flex-start !important; }
+  .flex#{$breakstring}-self-end         { align-self: flex-end !important; }
+  .flex#{$breakstring}-self-center      { align-self: center !important; }
+  .flex#{$breakstring}-self-baseline    { align-self: baseline !important; }
+  .flex#{$breakstring}-self-stretch     { align-self: stretch !important; }
+
+  // Shorthand for equal width and height cols
+  .flex#{$breakstring}-item-equal {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+}
+
+// Generate basic flexbox classes
+@include flexUtility();
+
+// Loop through the breakpoint values to create responsive classes
+@each $breakpoint in map-keys($breakpoints) {
+
+  // Loop through the spacer values
+  @include breakpoint($breakpoint) {
+    @include flexUtility($breakpoint);
+  }
+
+}

data/_sass/primer-utilities/lib/layout.scss

@@ -1,109 +1,96 @@
 // Layout
 // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
-// stylelint-disable block-closing-brace-newline-before, block-opening-brace-newline-after
-// stylelint-disable rule-non-nested-empty-line-before
+// stylelint-disable comment-empty-line-before
 
-// position utilites
+/* Set position to static */
 .position-static   { position: static !important; }
+/* Set position to relative */
 .position-relative { position: relative !important; }
+/* Set position to absolute */
 .position-absolute { position: absolute !important; }
+/* Set position to fixed */
 .position-fixed    { position: fixed !important; }
 
+/* Set top 0 */
 .top-0    { top: 0 !important; }
+/* Set right 0 */
 .right-0  { right: 0 !important; }
+/* Set bottom 0 */
 .bottom-0 { bottom: 0 !important; }
+/* Set left 0 */
 .left-0   { left: 0 !important; }
 
-// Vertical alignment
+/* Vertical align middle */
 .v-align-middle      { vertical-align: middle !important; }
+/* Vertical align top */
 .v-align-top         { vertical-align: top !important; }
+/* Vertical align bottom */
 .v-align-bottom      { vertical-align: bottom !important; }
+/* Vertical align to the top of the text */
 .v-align-text-top    { vertical-align: text-top !important; }
+/* Vertical align to the bottom of the text */
 .v-align-text-bottom { vertical-align: text-bottom !important; }
 
 // Overflow utilities
 // overflow-hidden can also be used to create a new
 // block formatting context or clear floats.
+/* Set the overflow hidden */
 .overflow-hidden { overflow: hidden !important; }
+/* Set the overflow scroll */
 .overflow-scroll { overflow: scroll !important; }
+/* Set the overflow auto */
 .overflow-auto   { overflow: auto !important; }
 
 // Clear floats
+/* Clear floats around the element */
 .clearfix {
   @include clearfix;
 }
 
 // Floats
+/* Float to the right */
 .float-right { float: right !important; }
+/* Float to the left */
 .float-left { float: left !important; }
+/* Don't float left or right */
+.float-none { float: none !important; }
 
 // Responsive float utlities
 // .float-md-left, .float-lg-right, ...
 @each $breakpoint in map-keys($breakpoints) {
   @include breakpoint($breakpoint) {
+    /* Float to the left at the #{$breakpoint} breakpoint */
     .float-#{$breakpoint}-left  { float: left !important; }
+    /* Float to the right at the #{$breakpoint} breakpoint */
     .float-#{$breakpoint}-right  { float: right !important; }
+    /* No float at the #{$breakpoint} breakpoint */
+    .float-#{$breakpoint}-none { float: none !important; }
   }
 }
 
 // Width and height utilities, helpful in combination
 // with display-table utilities and images
+/* Max width 100% */
 .width-fit   { max-width: 100% !important; }
+/* Set the width to 100% */
 .width-full  { width: 100% !important; }
+/* Set the height to 100% */
 .height-full { height: 100% !important; }
 
-// Remove min-width from element
+/* Remove min-width from element */
 .min-width-0 { min-width: 0 !important; }
 
-// Visibility utilities
-.v-hidden { visibility: hidden !important; }
-.v-visible { visibility: visible !important; }
+// Direction utilities
 
-// Display utilites
-.d-table      { display: table !important; }
-.d-table-cell { display: table-cell !important; }
-.table-fixed { table-layout: fixed !important; }
+.direction-rtl { direction: rtl !important; }
 
-.d-block        { display: block !important; }
-.d-inline       { display: inline !important; }
-.d-inline-block { display: inline-block !important; }
-.d-none         { display: none !important; }
+.direction-ltr { direction: ltr !important; }
 
-// Responsive display utlities
-// .d-sm-none, .d-lg-inline, ...
 @each $breakpoint in map-keys($breakpoints) {
   @include breakpoint($breakpoint) {
-    .d-#{$breakpoint}-table      { display: table !important; }
-    .d-#{$breakpoint}-table-cell { display: table-cell !important; }
-    .d-#{$breakpoint}-block  { display: block !important; }
-    .d-#{$breakpoint}-inline  { display: inline !important; }
-    .d-#{$breakpoint}-inline-block  { display: inline-block !important; }
-    .d-#{$breakpoint}-none  { display: none !important; }
-  }
-}
-
-// Hide utilities for each breakpoint
-// Each hide utility only applies to one breakpoint range.
-@media (max-width: $width-sm) {
-  .hide-sm {
-    display: none !important;
-  }
-}
-
-@media (min-width: $width-sm) and (max-width: $width-md) {
-  .hide-md {
-    display: none !important;
-  }
-}
-
-@media (min-width: $width-md) and (max-width: $width-lg) {
-  .hide-lg {
-    display: none !important;
-  }
-}
-
-@media (min-width: $width-lg) {
-  .hide-xl {
-    display: none !important;
+    /* Set the direction to ltr at the #{$breakpoint} breakpoint */
+    .direction-#{$breakpoint}-rtl { direction: rtl !important; }
+    /* Set the direction to ltr at the #{$breakpoint} breakpoint */
+    .direction-#{$breakpoint}-ltr { direction: ltr !important; }
   }
 }

data/_sass/primer-utilities/lib/margin.scss

@@ -1,27 +1,47 @@
 // Margin spacer utilities
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
 @for $i from 1 through length($spacers) {
   $size: #{nth($spacers, $i)};
   $scale: #{$i - 1};
 
-  // .m-0, .m-1, .m-2...
+  /* Set a #{$size} margin to all sides */
   .m-#{$scale}  { margin       : #{$size} !important; }
+  /* Set a #{$size} margin on the top */
   .mt-#{$scale} { margin-top   : #{$size} !important; }
+  /* Set a #{$size} margin on the right */
   .mr-#{$scale} { margin-right : #{$size} !important; }
+  /* Set a #{$size} margin on the bottom */
   .mb-#{$scale} { margin-bottom: #{$size} !important; }
+  /* Set a #{$size} margin on the left */
   .ml-#{$scale} { margin-left  : #{$size} !important; }
+  /* Set a negative #{$size} margin on top */
+  .mt-n#{$scale} { margin-top   : -#{$size} !important; }
+  /* Set a negative #{$size} margin on the right */
+  .mr-n#{$scale} { margin-right : -#{$size} !important; }
+  /* Set a negative #{$size} margin on the bottom */
+  .mb-n#{$scale} { margin-bottom: -#{$size} !important; }
+  /* Set a negative #{$size} margin on the left */
+  .ml-n#{$scale} { margin-left  : -#{$size} !important; }
 
+  /* Set a #{$size} margin on the left & right */
   .mx-#{$scale} {
     margin-right: #{$size} !important;
     margin-left : #{$size} !important;
   }
 
+  /* Set a #{$size} margin on the top & bottom */
   .my-#{$scale} {
     margin-top   : #{$size} !important;
     margin-bottom: #{$size} !important;
   }
 }
 
+/* Set an auto margin on left & right */
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
 // Loop through the breakpoint values
 @each $breakpoint in map-keys($breakpoints) {
 
@@ -31,18 +51,32 @@
       $size: #{nth($spacers, $i)}; // sm, md, lg, xl
       $scale: #{$i - 1};  // 0, 1, 2, 3, 4, 5, 6
 
-      // .m-sm-0, .m-md-1, .m-lg-2...
+      /* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
       .m-#{$breakpoint}-#{$scale}  { margin: #{$size} !important; }
+      /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
       .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
+      /* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
       .mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
+      /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
       .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
+      /* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
       .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
+      /* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */
+      .mt-#{$breakpoint}-n#{$scale} { margin-top   : -#{$size} !important; }
+      /* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */
+      .mr-#{$breakpoint}-n#{$scale} { margin-right : -#{$size} !important; }
+      /* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
+      .mb-#{$breakpoint}-n#{$scale} { margin-bottom: -#{$size} !important; }
+      /* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */
+      .ml-#{$breakpoint}-n#{$scale} { margin-left  : -#{$size} !important; }
 
+      /* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
       .mx-#{$breakpoint}-#{$scale} {
         margin-right: #{$size} !important;
         margin-left: #{$size} !important;
       }
 
+      /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
       .my-#{$breakpoint}-#{$scale} {
         margin-top: #{$size} !important;
         margin-bottom: #{$size} !important;
@@ -50,9 +84,3 @@
     }
   }
 }
-
-// Auto
-.mx-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
-}