@primer/css 0.0.0-1f16d51 → 0.0.0-2021101014711

package/layout/mixins.scss

@@ -0,0 +1,79 @@
+// Layout mixins
+
+@mixin flow-as-row {
+  grid-auto-flow: row;
+  grid-template-columns: 1fr !important;
+
+  .Layout-sidebar,
+  .Layout-divider,
+  .Layout-main {
+      width: 100% !important;
+      grid-column: 1 !important;
+    }
+
+  &.Layout--sidebarPosition-flowRow-start {
+    .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout-main {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-end {
+    .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout-main {
+      grid-row: 1;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-none {
+    .Layout-sidebar {
+      display: none;
+    }
+  }
+
+  &.Layout--divided {
+    @include flow-as-row-divider;
+
+    .Layout-main {
+      grid-row: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-flowRow-end {
+      .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout-main {
+        grid-row: 1;
+      }
+    }
+  }
+}
+
+@mixin flow-as-row-divider {
+  --Layout-gutter: 0;
+
+  .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+
+    &.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    &.Layout-divider--flowRow-shallow {
+      height: 8px;
+      margin-right: 0;
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
+      border-style: solid;
+      border-width: $border-width 0;
+    }
+  }
+}

package/{README.template.md → links/README.md}

@@ -1,25 +1,25 @@
 ---
-bundle: "{bundle}"
+bundle: "links"
 generated: true
 ---
 
-# Primer CSS: `{bundle}` bundle
+# Primer CSS: `links` bundle
 
 ## Usage
 
 Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "@primer/css/{bundle}/index.scss";
+@import "@primer/css/links/index.scss";
 ```
 
 ## Build
 
-The `@primer/css` npm package includes a standalone CSS build of this module in `dist/{bundle}.css`.
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/links.css`.
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/links/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './link.scss';

package/links/link.scss

@@ -0,0 +1,55 @@
+// Links
+
+.Link {
+  color: var(--color-accent-fg);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+.Link--primary {
+  color: var(--color-fg-default) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--secondary {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--muted {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: none;
+  }
+}
+
+// Set the link color only on hover
+// Useful when you want only part of a link to turn blue on hover
+.Link--onHover {
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+// When using a color utility class inside of a link class,
+// color should change with link on hover.
+.Link--secondary,
+.Link--primary,
+.Link--muted {
+  &:hover [class*='color-text'] {
+    color: inherit !important;
+  }
+}

package/loaders/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/loaders/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./loaders.scss";
+@import '../support/index.scss';
+@import './loaders.scss';

package/loaders/loaders.scss

@@ -9,7 +9,7 @@
 
   &::after {
     display: inline-block;
-    content: "...";
+    content: '...';
     animation: AnimatedEllipsis-keyframes 1.2s steps(4, jump-none) infinite;
   }
 

package/markdown/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/markdown/blob-csv.scss

@@ -15,7 +15,7 @@
     // stylelint-disable-next-line primer/spacing
     padding: 10px $spacer-2 9px;
     text-align: right;
-    background: $bg-white;
+    background: var(--color-canvas-default);
     border: 0;
   }
 
@@ -23,7 +23,7 @@
 
   th {
     font-weight: $font-weight-bold;
-    background: $bg-gray;
+    background: var(--color-canvas-subtle);
     border-top: 0;
   }
 }

package/markdown/code.scss

@@ -8,8 +8,7 @@
     margin: 0;
     // stylelint-disable-next-line primer/typography
     font-size: 85%;
-    // stylelint-disable-next-line primer/colors
-    background-color: rgba($black, 0.05);
+    background-color: var(--color-neutral-muted);
     border-radius: $border-radius;
 
     br { display: none; }
@@ -20,12 +19,15 @@
   pre {
     word-wrap: normal;
 
+    code {
+      // stylelint-disable-next-line primer/typography
+      font-size: 100%;
+    }
+
     // Code tags within code blocks (<pre>s)
     > code {
       padding: 0;
       margin: 0;
-      // stylelint-disable-next-line primer/typography
-      font-size: 100%;
       word-break: normal;
       white-space: pre;
       background: transparent;
@@ -50,7 +52,7 @@
     font-size: 85%;
     // stylelint-disable-next-line primer/typography
     line-height: 1.45;
-    background-color: $bg-gray;
+    background-color: var(--color-canvas-subtle);
     border-radius: $border-radius;
   }
 

package/markdown/footnotes.scss

@@ -0,0 +1,37 @@
+// stylelint-disable selector-max-type
+// stylelint-disable selector-max-compound-selectors
+
+.markdown-body .footnotes {
+  font-size: $h6-size;
+  color: var(--color-fg-muted);
+  border-top: $border;
+
+  ol {
+    padding-left: $spacer-3;
+  }
+
+  li {
+    position: relative;
+  }
+
+  li:target::before {
+    position: absolute;
+    top: -$spacer-2;
+    right: -$spacer-2;
+    bottom: -$spacer-2;
+    left: -$spacer-4;
+    pointer-events: none;
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border: 2px $border-style var(--color-accent-emphasis);
+    border-radius: $border-radius;
+  }
+
+  li:target {
+    color: var(--color-fg-default);
+  }
+
+  .data-footnote-backref g-emoji {
+    font-family: monospace;
+  }
+}

package/markdown/headings.scss

@@ -15,7 +15,7 @@
     line-height: $lh-condensed;
 
     .octicon-link {
-      color: $text-black;
+      color: var(--color-fg-default);
       vertical-align: middle;
       visibility: hidden;
     }
@@ -30,6 +30,8 @@
 
     tt,
     code {
+      // stylelint-disable-next-line primer/spacing
+      padding: 0 0.2em;
       font-size: inherit;
     }
   }
@@ -39,7 +41,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
-    border-bottom: $border-width $border-style $border-gray-light;
+    border-bottom: $border-width $border-style var(--color-border-muted);
   }
 
   h2 {
@@ -47,7 +49,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
-    border-bottom: $border-width $border-style $border-gray-light;
+    border-bottom: $border-width $border-style var(--color-border-muted);
   }
 
   h3 {
@@ -67,6 +69,6 @@
   h6 {
     // stylelint-disable-next-line primer/typography
     font-size: 0.85em;
-    color: $text-gray-light;
+    color: var(--color-fg-muted);
   }
 }

package/markdown/images.scss

@@ -8,7 +8,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: var(--color-canvas-default);
 
     &[align=right] {
       // stylelint-disable-next-line primer/spacing
@@ -44,8 +44,7 @@
       // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
-      // stylelint-disable-next-line primer/borders
-      border: $border-width $border-style lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     span img {
@@ -58,7 +57,7 @@
       // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: $text-gray-dark;
+      color: var(--color-fg-default);
     }
   }
 

package/markdown/index.scss

@@ -1,8 +1,9 @@
-@import "../support/index.scss";
-@import "./markdown-body.scss";
-@import "./headings.scss";
-@import "./lists.scss";
-@import "./tables.scss";
-@import "./images.scss";
-@import "./code.scss";
-@import "./blob-csv.scss";
+@import '../support/index.scss';
+@import './markdown-body.scss';
+@import './headings.scss';
+@import './lists.scss';
+@import './tables.scss';
+@import './images.scss';
+@import './code.scss';
+@import './blob-csv.scss';
+@import './footnotes.scss';

package/markdown/lists.scss

@@ -2,7 +2,6 @@
 // stylelint-disable selector-no-qualifying-type
 // stylelint-disable selector-max-type
 .markdown-body {
-
   // Lists, Blockquotes & Such
   ul,
   ol {
@@ -15,6 +14,24 @@
     }
   }
 
+  ol[type='1'] {
+    list-style-type: decimal;
+  }
+
+  ol[type='a'] {
+    list-style-type: lower-alpha;
+  }
+
+  ol[type='i'] {
+    list-style-type: lower-roman;
+  }
+
+  // Reset <ol> style to decimal (HTML default) specifically for AsciiDoc
+  // <div><ol> construction (doesn't affect MarkDown)
+  div > ol:not([type]) {
+    list-style-type: decimal;
+  }
+
   // Did someone complain about list spacing? Encourage them
   // to create the spacing with their markdown formatting.
   // List behavior should be controled by the markup, not the css.
@@ -46,10 +63,6 @@
     margin-bottom: 0;
   }
 
-  li {
-    word-wrap: break-all;
-  }
-
   li > p {
     margin-top: $spacer-3;
   }

package/markdown/markdown-body.scss

@@ -10,18 +10,16 @@
   line-height: $body-line-height;
   word-wrap: break-word;
 
-  @import "../base/kbd.scss"; // adds support for keyboard shortcuts
-
   // Clearfix on the markdown body
   &::before {
     display: table;
-    content: "";
+    content: '';
   }
 
   &::after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 
   > *:first-child {
@@ -45,7 +43,7 @@
 
   // Link Colors
   .absent {
-    color: $text-red;
+    color: var(--color-danger-fg);
   }
 
   .anchor {
@@ -76,17 +74,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
-    // stylelint-disable-next-line primer/colors
-    background-color: $gray-200;
+    background-color: var(--color-border-default);
     border: 0;
   }
 
   blockquote {
     // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: $text-gray-light;
+    color: var(--color-fg-muted);
     // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style lighten($gray-300, 5%);
+    border-left: 0.25em $border-style var(--color-border-default);
 
     > :first-child {
       margin-top: 0;
@@ -96,4 +93,12 @@
       margin-bottom: 0;
     }
   }
+
+  sup > a::before {
+    content: '[';
+  }
+
+  sup > a::after {
+    content: ']';
+  }
 }

package/markdown/tables.scss

@@ -17,17 +17,15 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      // stylelint-disable-next-line primer/borders
-      border: $border-width $border-style lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     tr {
-      background-color: $bg-white;
-      // stylelint-disable-next-line primer/borders
-      border-top: $border-width $border-style darken($gray-300, 4%);
+      background-color: var(--color-canvas-default);
+      border-top: $border-width $border-style var(--color-border-muted);
 
       &:nth-child(2n) {
-        background-color: $bg-gray;
+        background-color: var(--color-canvas-subtle);
       }
     }
 

package/marketing/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss