jekyll-theme-primer 0.1.1

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

@@ -0,0 +1,29 @@
+// Border utilities
+// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
+.border        { border: $border !important; }
+.border-top    { border-top: $border !important; }
+.border-right  { border-right: $border !important; }
+.border-bottom { border-bottom: $border !important; }
+.border-left   { border-left: $border !important; }
+
+.border-y {
+  border-top: $border !important;
+  border-bottom: $border !important;
+}
+
+// Border colors
+.border-blue       { border-color: $border-blue !important; }
+.border-gray-light { border-color: $border-gray-light !important; }
+.border-gray-dark  { border-color: $border-gray-dark !important; }
+
+// Without borders
+.border-0        { border: 0 !important; }
+.border-top-0    { border-top: 0 !important; }
+.border-right-0  { border-right: 0 !important; }
+.border-bottom-0 { border-bottom: 0 !important; }
+.border-left-0   { border-left: 0 !important; }
+
+// Rounded corners
+.rounded-0 { border-radius: 0 !important; }
+.rounded-1 { border-radius: $border-radius !important; }
+.rounded-2 { border-radius: $border-radius * 2 !important; }

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

@@ -0,0 +1,45 @@
+// 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
+
+// background colors
+.bg-white      { background-color: $bg-white !important; }
+.bg-blue       { background-color: $bg-blue !important; }
+.bg-blue-light { background-color: $bg-blue-light !important; }
+.bg-gray-dark  { background-color: $bg-gray-dark !important; }
+.bg-gray       { background-color: $bg-gray !important; }
+.bg-gray-light { background-color: $bg-gray-light !important; }
+.bg-green      { background-color: $bg-green !important; }
+.bg-red        { background-color: $bg-red !important; }
+
+// text colors
+.text-blue          { color: $text-blue !important; }
+.text-red           { color: $text-red !important; }
+.text-gray-light    { color: $text-gray-light !important; }
+.text-gray          { color: $text-gray !important; }
+.text-gray-dark     { color: $text-gray-dark !important; }
+.text-green         { color: $text-green !important; }
+.text-orange        { color: $text-orange !important; }
+.text-purple        { color: $text-purple !important; }
+.text-white         { color: $text-white !important; }
+.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
+.text-renamed { color: $status-renamed !important; }
+.text-pending { color: $status-pending !important; }
+
+// Muted link
+//
+// Have a link you need to be gray to start, and blue on hover? Use this.
+.muted-link {
+  color: $text-gray !important;
+
+  &:hover {
+    color: $text-blue !important;
+    text-decoration: none;
+  }
+}

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

@@ -0,0 +1,109 @@
+// 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
+
+// position utilites
+.position-static   { position: static !important; }
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed    { position: fixed !important; }
+
+.top-0    { top: 0 !important; }
+.right-0  { right: 0 !important; }
+.bottom-0 { bottom: 0 !important; }
+.left-0   { left: 0 !important; }
+
+// Vertical alignment
+.v-align-middle      { vertical-align: middle !important; }
+.v-align-top         { vertical-align: top !important; }
+.v-align-bottom      { vertical-align: bottom !important; }
+.v-align-text-top    { vertical-align: text-top !important; }
+.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.
+.overflow-hidden { overflow: hidden !important; }
+.overflow-scroll { overflow: scroll !important; }
+.overflow-auto   { overflow: auto !important; }
+
+// Clear floats
+.clearfix {
+  @include clearfix;
+}
+
+// Floats
+.float-right { float: right !important; }
+.float-left { float: left !important; }
+
+// Responsive float utlities
+// .float-md-left, .float-lg-right, ...
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .float-#{$breakpoint}-left  { float: left !important; }
+    .float-#{$breakpoint}-right  { float: right !important; }
+  }
+}
+
+// Width and height utilities, helpful in combination
+// with display-table utilities and images
+.width-fit   { max-width: 100% !important; }
+.width-full  { width: 100% !important; }
+.height-full { height: 100% !important; }
+
+// Remove min-width from element
+.min-width-0 { min-width: 0 !important; }
+
+// Visibility utilities
+.v-hidden { visibility: hidden !important; }
+.v-visible { visibility: visible !important; }
+
+// Display utilites
+.d-table      { display: table !important; }
+.d-table-cell { display: table-cell !important; }
+.table-fixed { table-layout: fixed !important; }
+
+.d-block        { display: block !important; }
+.d-inline       { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-none         { display: none !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;
+  }
+}

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

@@ -0,0 +1,58 @@
+// Margin spacer utilities
+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
+@for $i from 1 through length($spacers) {
+  $size: #{nth($spacers, $i)};
+  $scale: #{$i - 1};
+
+  // .m-0, .m-1, .m-2...
+  .m-#{$scale}  { margin       : #{$size} !important; }
+  .mt-#{$scale} { margin-top   : #{$size} !important; }
+  .mr-#{$scale} { margin-right : #{$size} !important; }
+  .mb-#{$scale} { margin-bottom: #{$size} !important; }
+  .ml-#{$scale} { margin-left  : #{$size} !important; }
+
+  .mx-#{$scale} {
+    margin-right: #{$size} !important;
+    margin-left : #{$size} !important;
+  }
+
+  .my-#{$scale} {
+    margin-top   : #{$size} !important;
+    margin-bottom: #{$size} !important;
+  }
+}
+
+// Loop through the breakpoint values
+@each $breakpoint in map-keys($breakpoints) {
+
+  // Loop through the spacer values
+  @for $i from 1 through length($spacers) {
+    @include breakpoint($breakpoint) {
+      $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...
+      .m-#{$breakpoint}-#{$scale}  { margin: #{$size} !important; }
+      .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
+      .mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
+      .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
+      .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
+
+      .mx-#{$breakpoint}-#{$scale} {
+        margin-right: #{$size} !important;
+        margin-left: #{$size} !important;
+      }
+
+      .my-#{$breakpoint}-#{$scale} {
+        margin-top: #{$size} !important;
+        margin-bottom: #{$size} !important;
+      }
+    }
+  }
+}
+
+// Auto
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}

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

@@ -0,0 +1,54 @@
+// Padding spacer utilities
+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
+@for $i from 1 through length($spacers) {
+  $size: #{nth($spacers, $i)};
+  $scale: #{$i - 1};
+
+  // .p-0, .p-1, .p-2...
+  .p-#{$scale}   { padding       : #{$size} !important; }
+  .pt-#{$scale}  { padding-top   : #{$size} !important; }
+  .pr-#{$scale}  { padding-right : #{$size} !important; }
+  .pb-#{$scale}  { padding-bottom: #{$size} !important; }
+  .pl-#{$scale}  { padding-left  : #{$size} !important; }
+
+  .px-#{$scale} {
+    padding-right: #{$size} !important;
+    padding-left: #{$size} !important;
+  }
+
+  .py-#{$scale} {
+    padding-top: #{$size} !important;
+    padding-bottom: #{$size} !important;
+  }
+}
+
+// Responsive padding spacer utilities
+
+// Loop through the breakpoint values
+@each $breakpoint in map-keys($breakpoints) {
+
+  // Loop through the spacer values
+  @for $i from 1 through length($spacers) {
+    @include breakpoint($breakpoint) {
+      $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
+      $scale: #{$i - 1};  // 0, 1, 2, 3, 4, 5, 6
+
+      // .p-sm-0, .p-md-1, .p-lg-2...
+      .p-#{$breakpoint}-#{$scale}  { padding: #{$size} !important; }
+      .pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
+      .pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
+      .pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
+      .pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
+
+      .px-#{$breakpoint}-#{$scale} {
+        padding-right: #{$size} !important;
+        padding-left: #{$size} !important;
+      }
+
+      .py-#{$breakpoint}-#{$scale} {
+        padding-top: #{$size} !important;
+        padding-bottom: #{$size} !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,155 @@
+// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after, declaration-block-semicolon-newline-after, declaration-block-single-line-max-declarations
+// Type scale variables found in primer-support/lib/variables.scss
+// $h00-size: 48px;
+// $h0-size: 40px;
+// $h1-size: 32px;
+// $h2-size: 24px;
+// $h3-size: 20px;
+// $h4-size: 16px;
+// $h5-size: 14px;
+// $h6-size: 12px;
+
+// Heading utilities
+.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; }
+
+.h1 {
+  font-size: 26px !important;
+
+  @include breakpoint(md) { font-size: $h1-size !important; }
+
+}
+
+.h2 {
+  font-size: 22px !important;
+
+  @include breakpoint(md) { font-size: $h2-size !important; }
+}
+
+.h3 {
+  font-size: 18px !important;
+
+  @include breakpoint(md) { font-size: $h3-size !important; }
+
+}
+
+.h4 {
+  font-size: 16px !important;
+
+  @include breakpoint(md) { font-size: $h4-size !important; }
+
+}
+
+.h5 { font-size: $h5-size !important; }
+
+// Does not include color property like typography base
+// styles, color should be applied with color utilities.
+.h6 { font-size: $h6-size !important; }
+
+// Type utilities that match type sale
+.f1 {
+  font-size: 26px !important;
+
+  @include breakpoint(md) { font-size: $h1-size !important; }
+
+}
+
+.f2 {
+  font-size: 22px !important;
+
+  @include breakpoint(md) { font-size: $h2-size !important; }
+}
+
+.f3 {
+  font-size: 18px !important;
+
+  @include breakpoint(md) { font-size: $h3-size !important; }
+
+}
+
+.f4 {
+  font-size: 16px !important;
+
+  @include breakpoint(md) { font-size: $h4-size !important; }
+
+}
+
+.f5 { font-size: $h5-size !important; }
+.f6 { font-size: $h6-size !important; }
+
+// Type utils with light weight that match type scale
+.f00-light {
+  font-size: 40px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h00-size !important; }
+
+}
+
+.f0-light {
+  font-size: 32px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h0-size !important; }
+
+}
+
+.f1-light {
+  font-size: 26px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h1-size !important; }
+
+}
+
+.f2-light {
+  font-size: 22px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h2-size !important; }
+
+}
+// Same size and weight as .lead but without color property
+.f3-light {
+  font-size: 18px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h3-size !important; }
+
+}
+
+// Smallest text size
+.text-small { font-size: $h6-size !important; } // 12px
+
+// Large leading paragraphs
+.lead {
+  margin-bottom: 30px;
+  font-size: $h3-size;
+  font-weight: $font-weight-light;
+  color: #555;
+}
+
+// Line-height variations
+// Close to commonly used line-heights. Most line-heights
+// combined with type size equate to whole pixels.
+// Will be improved with future typography scale updates.
+.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
+.lh-condensed { line-height: $lh-condensed !important; }
+.lh-default { line-height: $lh-default !important; }
+
+// Text alignments
+.text-right { text-align: right !important; }
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important; }
+
+// Text styles
+.text-normal { font-weight: normal !important; }
+.text-bold { font-weight: $font-weight-bold !important;}
+.text-italic { font-style: italic !important;}
+.text-uppercase { text-transform: uppercase !important; }
+.no-underline { text-decoration: none !important; }
+.no-wrap { white-space: nowrap !important;}
+
+.text-emphasized {
+  font-weight: $font-weight-bold;
+  color: $text-gray-dark;
+}