@primer/css 0.0.0-1ea75fe → 0.0.0-202110100305

package/loaders/loaders.scss

@@ -0,0 +1,19 @@
+// Loaders
+
+// Animated Ellipsis
+
+.AnimatedEllipsis {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  &::after {
+    display: inline-block;
+    content: '...';
+    animation: AnimatedEllipsis-keyframes 1.2s steps(4, jump-none) infinite;
+  }
+
+  @keyframes AnimatedEllipsis-keyframes {
+    0% { transform: translateX(-100%); }
+  }
+}

package/markdown/README.md

@@ -1,37 +1,25 @@
-# Primer Markdown
+---
+bundle: "markdown"
+generated: true
+---
 
-> Stylesheets for rendering GitHub Flavored Markdown and syntax highlighted code snippets.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `markdown` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+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-markdown/index.scss";
+@import "@primer/css/markdown/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/markdown](https://primer.style/css/components/markdown).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/markdown.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/markdown/blob-csv.scss

@@ -2,6 +2,7 @@
 .markdown-body .csv-data {
   td,
   th {
+    // stylelint-disable-next-line primer/spacing
     padding: 5px;
     overflow: hidden;
     font-size: $font-size-small;
@@ -11,9 +12,10 @@
   }
 
   .blob-num {
+    // stylelint-disable-next-line primer/spacing
     padding: 10px $spacer-2 9px;
     text-align: right;
-    background: $bg-white;
+    background: var(--color-canvas-default);
     border: 0;
   }
 
@@ -21,7 +23,7 @@
 
   th {
     font-weight: $font-weight-bold;
-    background: $gray-100;
+    background: var(--color-canvas-subtle);
     border-top: 0;
   }
 }

package/markdown/code.scss

@@ -3,10 +3,12 @@
   // Inline code snippets
   code,
   tt {
+    // stylelint-disable-next-line primer/spacing
     padding: 0.2em 0.4em;
     margin: 0;
+    // stylelint-disable-next-line primer/typography
     font-size: 85%;
-    background-color: rgba($black, 0.05);
+    background-color: var(--color-neutral-muted);
     border-radius: $border-radius;
 
     br { display: none; }
@@ -17,11 +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;
-      font-size: 100%;
       word-break: normal;
       white-space: pre;
       background: transparent;
@@ -42,9 +48,11 @@
   pre {
     padding: $spacer-3;
     overflow: auto;
+    // stylelint-disable-next-line primer/typography
     font-size: 85%;
+    // stylelint-disable-next-line primer/typography
     line-height: 1.45;
-    background-color: $gray-100;
+    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: $black;
+      color: var(--color-fg-default);
       vertical-align: middle;
       visibility: hidden;
     }
@@ -30,23 +30,30 @@
 
     tt,
     code {
+      // stylelint-disable-next-line primer/spacing
+      padding: 0 0.2em;
       font-size: inherit;
     }
   }
 
   h1 {
+    // stylelint-disable-next-line primer/spacing
     padding-bottom: 0.3em;
+    // stylelint-disable-next-line primer/typography
     font-size: 2em;
-    border-bottom: 1px solid lighten($gray-200, 3%);
+    border-bottom: $border-width $border-style var(--color-border-muted);
   }
 
   h2 {
+    // stylelint-disable-next-line primer/spacing
     padding-bottom: 0.3em;
+    // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
-    border-bottom: 1px solid lighten($gray-200, 3%);
+    border-bottom: $border-width $border-style var(--color-border-muted);
   }
 
   h3 {
+    // stylelint-disable-next-line primer/typography
     font-size: 1.25em;
   }
 
@@ -55,11 +62,13 @@
   }
 
   h5 {
+    // stylelint-disable-next-line primer/typography
     font-size: 0.875em;
   }
 
   h6 {
+    // stylelint-disable-next-line primer/typography
     font-size: 0.85em;
-    color: $gray-500;
+    color: var(--color-fg-muted);
   }
 }

package/markdown/images.scss

@@ -1,5 +1,5 @@
 // Need to target base styles
-// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type, primer/selector-no-utility
+// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type
 // stylelint-disable selector-max-type
 .markdown-body {
   // Images & Stuff
@@ -8,13 +8,15 @@
     // 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
       padding-left: 20px;
     }
 
     &[align=left] {
+      // stylelint-disable-next-line primer/spacing
       padding-right: 20px;
     }
   }
@@ -37,10 +39,12 @@
       display: block;
       float: left;
       width: auto;
+      // stylelint-disable-next-line primer/spacing
       padding: 7px;
+      // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
-      border: 1px solid lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     span img {
@@ -50,9 +54,10 @@
 
     span span {
       display: block;
+      // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: $text-gray-dark;
+      color: var(--color-fg-default);
     }
   }
 
@@ -63,6 +68,7 @@
 
     > span {
       display: block;
+      // stylelint-disable-next-line primer/spacing
       margin: 13px auto 0;
       overflow: hidden;
       text-align: center;
@@ -81,6 +87,7 @@
 
     > span {
       display: block;
+      // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
       text-align: right;
@@ -95,10 +102,12 @@
   span.float-left {
     display: block;
     float: left;
+    // stylelint-disable-next-line primer/spacing
     margin-right: 13px;
     overflow: hidden;
 
     span {
+      // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
     }
   }
@@ -106,11 +115,13 @@
   span.float-right {
     display: block;
     float: right;
+    // stylelint-disable-next-line primer/spacing
     margin-left: 13px;
     overflow: hidden;
 
     > span {
       display: block;
+      // stylelint-disable-next-line primer/spacing
       margin: 13px auto 0;
       overflow: hidden;
       text-align: right;

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,10 +2,10 @@
 // stylelint-disable selector-no-qualifying-type
 // stylelint-disable selector-max-type
 .markdown-body {
-
   // Lists, Blockquotes & Such
   ul,
   ol {
+    // stylelint-disable-next-line primer/spacing
     padding-left: 2em;
 
     &.no-list {
@@ -14,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.
@@ -45,10 +63,6 @@
     margin-bottom: 0;
   }
 
-  li {
-    word-wrap: break-all;
-  }
-
   li > p {
     margin-top: $spacer-3;
   }

package/markdown/markdown-body.scss

@@ -13,13 +13,13 @@
   // Clearfix on the markdown body
   &::before {
     display: table;
-    content: "";
+    content: '';
   }
 
   &::after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 
   > *:first-child {
@@ -43,12 +43,13 @@
 
   // Link Colors
   .absent {
-    color: $red-600;
+    color: var(--color-danger-fg);
   }
 
   .anchor {
     float: left;
     padding-right: $spacer-1;
+    // stylelint-disable-next-line primer/spacing
     margin-left: -20px;
     line-height: $lh-condensed-ultra;
 
@@ -73,14 +74,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
-    background-color: $gray-200;
+    background-color: var(--color-border-default);
     border: 0;
   }
 
   blockquote {
+    // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: $gray-500;
-    border-left: 0.25em solid lighten($gray-300, 5%);
+    color: var(--color-fg-muted);
+    // stylelint-disable-next-line primer/borders
+    border-left: 0.25em $border-style var(--color-border-default);
 
     > :first-child {
       margin-top: 0;
@@ -91,17 +94,11 @@
     }
   }
 
-  kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: $gray-700;
-    vertical-align: middle;
-    background-color: $gray-000;
-    border: solid 1px darken($gray-300, 4%);
-    border-bottom-color: $gray-400;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 $gray-400;
+  sup > a::before {
+    content: '[';
+  }
+
+  sup > a::after {
+    content: ']';
   }
 }

package/markdown/tables.scss

@@ -4,7 +4,9 @@
   // Tables
   table {
     display: block;
-    width: 100%;
+    width: 100%; // keep for backwards compatibility
+    width: max-content;
+    max-width: 100%;
     overflow: auto;
 
     th {
@@ -13,16 +15,17 @@
 
     th,
     td {
+      // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      border: 1px solid lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     tr {
-      background-color: $bg-white;
-      border-top: 1px solid 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: $gray-100;
+        background-color: var(--color-canvas-subtle);
       }
     }
 

package/marketing/README.md

@@ -1,37 +1,25 @@
-# Primer marketing
+---
+bundle: "marketing"
+generated: true
+---
 
-> Primer marketing is one of 3 meta-packages that belong to the Primer framework. Primer marketing contains packages that are used on GitHub marketing websites.
-
-This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm.
+# Primer CSS: `marketing` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+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-marketing/index.scss";
+@import "@primer/css/marketing/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-You can read more about primer in the [docs][docs].
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/marketing.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss