jekyll-theme-primer 0.5.3 → 0.5.4

data/_sass/primer-support/docs/color-system.md

@@ -1,392 +0,0 @@
----
-title: Color system
-status_issue: https://github.com/github/design-systems/issues/301
-status: New release
-source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/color-system.scss
----
-
-{:toc}
-
-## Color palette
-
-<div class="markdown-no-margin mb-6 d-flex h5">
-  <div class="gray-500 d-flex color-square mr-2">
-    <p class="p-3 flex-self-end text-white">Gray</p>
-  </div>
-  <div class="blue-500 d-flex color-square mr-2">
-    <p class="p-3 flex-self-end text-white">Blue</p>
-  </div>
-  <div class="green-500 d-flex color-square mr-2">
-    <p class="p-3 flex-self-end text-white">Green</p>
-  </div>
-  <div class="purple-500 d-flex color-square mr-2">
-    <p class="p-3 flex-self-end text-white">Purple</p>
-  </div>
-  <div class="yellow-500 d-flex color-square mr-2">
-    <p class="p-3 flex-self-end">Yellow</p>
-  </div>
-  <div class="orange-500 d-flex color-square mr-2">
-    <p class="p-3 flex-self-end">Orange</p>
-  </div>
-  <div class="red-500 d-flex color-square mr-2">
-    <p class="p-3 flex-self-end text-white">Red</p>
-  </div>
-  <div class="bg-white d-flex color-square border border-gray-dark">
-    <p class="p-3 flex-self-end">White</p>
-  </div>
-</div>
-
-## Color variables
-
-<div class="d-flex flex-wrap gutter">
-
-  <div class="mb-6 flex-column col-6 markdown-no-margin">
-    <h3>Gray</h3>
-    <div class="gray-500 my-2 p-3">
-      <p class="text-white f00-light pb-3">Gray</p>
-      <div class="d-flex text-white">
-        <p class="h4 flex-auto">$gray-500</p>
-        <p class="text-right text-mono flex-auto">#6a737d</p>
-      </div>
-    </div>
-    <div class="gray-000 h4">
-      <p class="p-3">$gray-000</p>
-    </div>
-    <div class="gray-100 h4">
-      <p class="p-3">$gray-100</p>
-    </div>
-    <div class="gray-200 h4">
-      <p class="p-3">$gray-200</p>
-    </div>
-    <div class="gray-300 h4">
-      <p class="p-3">$gray-300</p>
-    </div>
-    <div class="gray-400 h4">
-      <p class="p-3">$gray-400</p>
-    </div>
-    <div class="gray-500 h4">
-      <p class="p-3 text-white">$gray-500</p>
-    </div>
-    <div class="gray-600 h4">
-      <p class="p-3 text-white">$gray-600</p>
-    </div>
-    <div class="gray-700 h4">
-      <p class="p-3 text-white">$gray-700</p>
-    </div>
-    <div class="gray-800 h4">
-      <p class="p-3 text-white">$gray-800</p>
-    </div>
-    <div class="gray-900 h4">
-      <p class="p-3 text-white">$gray-900</p>
-    </div>
-  </div>
-
-  <div class="mb-6 flex-column col-6 markdown-no-margin">
-    <h3>Blue</h3>
-    <div class="blue-500 my-2 p-3">
-      <p class="text-white f00-light pb-3">Blue</p>
-      <div class="d-flex text-white">
-        <p class="h4 flex-auto">$blue-500</p>
-        <p class="text-right text-mono flex-auto">#0366d6</p>
-      </div>
-    </div>
-    <div class="blue-000 h4">
-      <p class="p-3">$blue-000</p>
-    </div>
-    <div class="blue-100 h4">
-      <p class="p-3">$blue-100</p>
-    </div>
-    <div class="blue-200 h4">
-      <p class="p-3">$blue-200</p>
-    </div>
-    <div class="blue-300 h4">
-      <p class="p-3">$blue-300</p>
-    </div>
-    <div class="blue-400 h4">
-      <p class="p-3">$blue-400</p>
-    </div>
-    <div class="blue-500 h4">
-      <p class="p-3 text-white">$blue-500</p>
-    </div>
-    <div class="blue-600 h4">
-      <p class="p-3 text-white">$blue-600</p>
-    </div>
-    <div class="blue-700 h4">
-      <p class="p-3 text-white">$blue-700</p>
-    </div>
-    <div class="blue-800 h4">
-      <p class="p-3 text-white">$blue-800</p>
-    </div>
-    <div class="blue-900 h4">
-      <p class="p-3 text-white">$blue-900</p>
-    </div>
-  </div>
-
-  <div class="mb-6 flex-column col-6 markdown-no-margin">
-    <h3>Green</h3>
-    <div class="green-500 my-2 p-3">
-      <p class="text-white f00-light pb-3">Green</p>
-      <div class="d-flex text-white">
-        <p class="h4 flex-auto">$green-500</p>
-        <p class="text-right text-mono flex-auto">#28a745</p>
-      </div>
-    </div>
-    <div class="green-000 h4">
-      <p class="p-3">$green-000</p>
-    </div>
-    <div class="green-100 h4">
-      <p class="p-3">$green-100</p>
-    </div>
-    <div class="green-200 h4">
-      <p class="p-3">$green-200</p>
-    </div>
-    <div class="green-300 h4">
-      <p class="p-3">$green-300</p>
-    </div>
-    <div class="green-400 h4">
-      <p class="p-3">$green-400</p>
-    </div>
-    <div class="green-500 h4">
-      <p class="p-3 text-white">$green-500</p>
-    </div>
-    <div class="green-600 h4">
-      <p class="p-3 text-white">$green-600</p>
-    </div>
-    <div class="green-700 h4">
-      <p class="p-3 text-white">$green-700</p>
-    </div>
-    <div class="green-800 h4">
-      <p class="p-3 text-white">$green-800</p>
-    </div>
-    <div class="green-900 h4">
-      <p class="p-3 text-white">$green-900</p>
-    </div>
-  </div>
-
-  <div class="mb-6 flex-column col-6 markdown-no-margin">
-    <h3>Purple</h3>
-    <div class="purple-500 text-white my-2 p-3">
-      <p class="f00-light pb-3">Purple</p>
-      <div class="d-flex">
-        <p class="h4 flex-auto">$purple-500</p>
-        <p class="text-right text-mono flex-auto">#6f42c1</p>
-      </div>
-    </div>
-    <div class="purple-000 h4">
-      <p class="p-3">$purple-000</p>
-    </div>
-    <div class="purple-100 h4">
-      <p class="p-3">$purple-100</p>
-    </div>
-    <div class="purple-200 h4">
-      <p class="p-3">$purple-200</p>
-    </div>
-    <div class="purple-300 h4">
-      <p class="p-3">$purple-300</p>
-    </div>
-    <div class="purple-400 h4">
-      <p class="p-3">$purple-400</p>
-    </div>
-    <div class="purple-500 h4">
-      <p class="p-3 text-white">$purple-500</p>
-    </div>
-    <div class="purple-600 h4">
-      <p class="p-3 text-white">$purple-600</p>
-    </div>
-    <div class="purple-700 h4">
-      <p class="p-3 text-white">$purple-700</p>
-    </div>
-    <div class="purple-800 h4">
-      <p class="p-3 text-white">$purple-800</p>
-    </div>
-    <div class="purple-900 h4">
-      <p class="p-3 text-white">$purple-900</p>
-    </div>
-  </div>
-
-  <div class="mb-6 flex-column col-6 markdown-no-margin">
-    <h3>Yellow</h3>
-    <div class="yellow-500 my-2 p-3">
-      <p class="f00-light pb-3">Yellow</p>
-      <div class="d-flex">
-        <p class="h4 flex-auto">$yellow-500</p>
-        <p class="text-right text-mono flex-auto">#ffd93d</p>
-      </div>
-    </div>
-    <div class="yellow-000 h4">
-      <p class="p-3">$yellow-000</p>
-    </div>
-    <div class="yellow-100 h4">
-      <p class="p-3">$yellow-100</p>
-    </div>
-    <div class="yellow-200 h4">
-      <p class="p-3">$yellow-200</p>
-    </div>
-    <div class="yellow-300 h4">
-      <p class="p-3">$yellow-300</p>
-    </div>
-    <div class="yellow-400 h4">
-      <p class="p-3">$yellow-400</p>
-    </div>
-    <div class="yellow-500 h4">
-      <p class="p-3">$yellow-500</p>
-    </div>
-    <div class="yellow-600 h4">
-      <p class="p-3">$yellow-600</p>
-    </div>
-    <div class="yellow-700 h4">
-      <p class="p-3">$yellow-700</p>
-    </div>
-    <div class="yellow-800 h4">
-      <p class="p-3 text-white">$yellow-800</p>
-    </div>
-    <div class="yellow-900 h4">
-      <p class="p-3 text-white">$yellow-900</p>
-    </div>
-  </div>
-
-  <div class="mb-6 flex-column col-6 markdown-no-margin">
-    <h3>Orange</h3>
-    <div class="orange-500 my-2 p-3 text-white">
-      <p class="f00-light pb-3">Orange</p>
-      <div class="d-flex">
-        <p class="h4 flex-auto">$orange-500</p>
-        <p class="text-right text-mono flex-auto">#f66a0a</p>
-      </div>
-    </div>
-    <div class="orange-000 h4">
-      <p class="p-3">$orange-000</p>
-    </div>
-    <div class="orange-100 h4">
-      <p class="p-3">$orange-100</p>
-    </div>
-    <div class="orange-200 h4">
-      <p class="p-3">$orange-200</p>
-    </div>
-    <div class="orange-300 h4">
-      <p class="p-3">$orange-300</p>
-    </div>
-    <div class="orange-400 h4">
-      <p class="p-3">$orange-400</p>
-    </div>
-    <div class="orange-500 h4">
-      <p class="p-3 text-white">$orange-500</p>
-    </div>
-    <div class="orange-600 h4">
-      <p class="p-3 text-white">$orange-600</p>
-    </div>
-    <div class="orange-700 h4">
-      <p class="p-3 text-white">$orange-700</p>
-    </div>
-    <div class="orange-800 h4">
-      <p class="p-3 text-white">$orange-800</p>
-    </div>
-    <div class="orange-900 h4">
-      <p class="p-3 text-white">$orange-900</p>
-    </div>
-  </div>
-
-  <div class="mb-6 flex-column col-6 markdown-no-margin">
-    <h3>Red</h3>
-    <div class="red-500 text-white my-2 p-3">
-      <p class="f00-light pb-3">Red</p>
-      <div class="d-flex">
-        <p class="h4 flex-auto">$red-500</p>
-        <p class="text-right text-mono flex-auto">#dc3545</p>
-      </div>
-    </div>
-    <div class="red-000 h4">
-      <p class="p-3">$red-000</p>
-    </div>
-    <div class="red-100 h4">
-      <p class="p-3">$red-100</p>
-    </div>
-    <div class="red-200 h4">
-      <p class="p-3">$red-200</p>
-    </div>
-    <div class="red-300 h4">
-      <p class="p-3">$red-300</p>
-    </div>
-    <div class="red-400 h4">
-      <p class="p-3">$red-400</p>
-    </div>
-    <div class="red-500 h4">
-      <p class="p-3 text-white">$red-500</p>
-    </div>
-    <div class="red-600 h4">
-      <p class="p-3 text-white">$red-600</p>
-    </div>
-    <div class="red-700 h4">
-      <p class="p-3 text-white">$red-700</p>
-    </div>
-    <div class="red-800 h4">
-      <p class="p-3 text-white">$red-800</p>
-    </div>
-    <div class="red-900 h4">
-      <p class="p-3 text-white">$red-900</p>
-    </div>
-  </div>
-
-<div class="mb-6 flex-column col-6">
-</div>
-  <!-- Gray and fades (headings inside the markup) -->
-
-  <div class="mb-3 flex-column col-6 markdown-no-margin">
-    <h3>Black fades</h3>
-    <div class="black text-white my-2 p-3">
-      <p class="f00-light pb-3">Black</p>
-      <div class="d-flex pb-1">
-        <p class="h4 flex-auto">$black</p>
-        <p class="text-right text-mono flex-auto"><code>rgb(27,31,35)</code> #1b1f23</p>
-      </div>
-      <p class="f5 pt-3 border-top border-white">Black fades apply alpha transparency to the <strong>$black</strong> variable. The black color value has a slight blue hue to match our grays.</p>
-    </div>
-    <div class="black-fade-15">
-      <p class="h4 p-3">$black-fade-15</p>
-    </div>
-    <div class="black-fade-30">
-      <p class="h4 p-3">$black-fade-30</p>
-    </div>
-    <div class="black-fade-50">
-      <p class="h4 p-3">$black-fade-50</p>
-    </div>
-    <div class="black-fade-70">
-      <p class="h4 p-3 text-white">$black-fade-70</p>
-    </div>
-    <div class="black-fade-85">
-      <p class="h4 p-3 text-white">$black-fade-85</p>
-    </div>
-  </div>
-
-  <div class="mb-3 flex-column col-6 markdown-no-margin">
-    <h3>White fades</h3>
-    <div class="bg-white border text-gray-dark my-2 p-3">
-      <p class="f00-light pb-3">White</p>
-      <div class="d-flex pb-1">
-        <p class="h4 flex-auto">$white</p>
-        <p class="text-right text-mono flex-auto"><code>rgb(255, 255, 255)</code> #fff</p>
-      </div>
-      <p class="f5 pt-3 border-top border-white">White fades apply alpha transparency to the <strong>$white</strong> variable, below these are shown overlaid on a dark gray background.</p>
-    </div>
-    <div class="bg-gray-dark pr-4">
-      <div class="white-fade-15">
-        <p class="h4 p-3 text-white">$white-fade-15</p>
-      </div>
-      <div class="white-fade-30">
-        <p class="h4 p-3 text-white">$white-fade-30</p>
-      </div>
-      <div class="white-fade-50">
-        <p class="h4 p-3">$white-fade-50</p>
-      </div>
-      <div class="white-fade-70">
-        <p class="h4 p-3">$white-fade-70</p>
-      </div>
-      <div class="white-fade-85">
-        <p class="h4 p-3">$white-fade-85</p>
-      </div>
-    </div>
-
-
-</div>
-
-</div>

data/_sass/primer-support/docs/spacing.md

@@ -1,40 +0,0 @@
----
-title: Spacing
-status: Stable
-source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/layout.scss
----
-
-{:toc}
-
-## Spacing scale
-The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
-
-| Variable | Scale | Value |
-| --- | --- | --- |
-| $spacer-1 | 0 | 0 |
-| $spacer-1 | 1 | 4px |
-| $spacer-1 | 2 | 8px |
-| $spacer-1 | 3 | 16px |
-| $spacer-1 | 4 | 24px |
-| $spacer-1 | 5 | 32px |
-| $spacer-1 | 6 | 40px |
-
-These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities.
-
-See [primer-marketing-support](../primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../primer-marketing-utilities/docs/margin.md) and [padding](../primer-marketing-utilities/docs/padding.md).
-
-## Em-based spacing
-Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.
-
-We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in <span class="text-red">red</span> below.
-
-| Variable | Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
-| --- | --- | --- | --- | --- |
-| $em-spacer-1 | 1/16 | .0625 | <span class="text-red">22.75</span> | 26 |
-| $em-spacer-2 | 1/8 | .125 | <span class="text-red">24.5</span> | 28 |
-| $em-spacer-3 | 1/4 | .25 | 28 | 32 |
-| $em-spacer-4 | 3/8 | .375 | <span class="text-red">31.5</span> | 36 |
-| $em-spacer-5 | 1/2 | .5 | 35 | 40 |
-| $em-spacer-6 | 3/4 | .75 | 42 | 48 |
-
-The variables listed above are preferred for use within components and custom CSS. To calculate values with other font-sizes or em values, we suggest using [Formula](http://jxnblk.com/formula/).

data/_sass/primer-support/docs/typography.md

@@ -1,90 +0,0 @@
----
-title: Typography
-status_issue: https://github.com/github/design-systems/issues/329
-status: New release
-source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/typography.scss
----
-
-{:toc}
-
-## Type Scale
-
-The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
-
-Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoints) to be larger on desktop.
-
-| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
-| --- | --- | --- | --- | --- |
-| 00 | 40px | 48px | 60 | 72 |
-| 0 | 32px | 40px | 50 | 60 |
-| 1 | 26px | 32px | 40 | 48 |
-| 2 | 22px | 24px | 30 | 36 |
-| 3 | 18px | 20px | 25 | 30 |
-| 4 | 16px | 16px | 20 | 24 |
-| 5 | 14px | 14px | 17.5 | 21 |
-| 6 | 12px | 12px | 15 | 18 |
-
-The typography scale is used to create [typography utilities](./utilities/typography).
-
-## Typography variables
-
-#### Font size variables
-```scss
-// Heading sizes - mobile
-// h4—h6 remain the same size on both mobile & desktop
-$h00-size-mobile: 40px;
-$h0-size-mobile: 32px;
-$h1-size-mobile: 26px;
-$h2-size-mobile: 22px;
-$h3-size-mobile: 18px;
-
-// Heading sizes - desktop
-$h00-size: 48px;
-$h0-size: 40px;
-$h1-size: 32px;
-$h2-size: 24px;
-$h3-size: 20px;
-$h4-size: 16px;
-$h5-size: 14px;
-$h6-size: 12px;
-```
-
-#### Font weight variables
-```scss
-$font-weight-bold: 600 !default;
-$font-weight-light: 300 !default;
-```
-
-#### Line height variables
-```scss
-$lh-condensed-ultra: 1 !default;
-$lh-condensed: 1.25 !default;
-$lh-default: 1.5 !default;
-```
-
-## Typography Mixins
-Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](./utilities/typography#heading-utilities) which requires no additional CSS.
-
-Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
-
-```scss
-.styles {
-  @include h1;
-}
-```
-
-Responsive heading mixins can be used to adjust the font-size between the `sm` and `lg` breakpoint. Only headings 1—3 are responsive. Heading 4—6 are small enough to remain the same between mobile and desktop. Responsive heading mixins include the font-size and font-weight as well as the media query. To use a responsive heading mixin, postfix the heading with `-responsive`:
-
-```scss
-.styles {
-  @include h1-responsive;
-}
-```
-
-Responsive type scale mixins are also available. Type scale mixins apply a font-size that gets slightly bigger at the `lg` breakpoint. They do not apply a font-weight. Like the responsive heading mixins, they are only available for size `f1` to `f3` and are postfixed with `-responsive` as in the example below:
-
-```scss
-.style {
-  @include f1-responsive;
-}
-```