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

package/layout/layout.scss

@@ -0,0 +1,185 @@
+// Layout component
+
+.Layout {
+  display: grid;
+  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-gutter: 16px;
+
+  @media (max-width: calc(#{$width-sm} - 1px)) {
+    @include flow-as-row;
+  }
+
+  &.Layout--flowRow-until-md {
+    @media (max-width: calc(#{$width-md} - 1px)) {
+      @include flow-as-row;
+    }
+  }
+
+  &.Layout--flowRow-until-lg {
+    @media (max-width: calc(#{$width-lg} - 1px)) {
+      @include flow-as-row;
+    }
+  }
+
+  // Flow as column
+
+  grid-auto-flow: column;
+  grid-template-columns: auto 0 1fr; // sidebar column, separator, main column
+  // stylelint-disable-next-line primer/no-undefined-vars
+  grid-gap: var(--Layout-gutter);
+
+  .Layout-sidebar {
+    grid-column: 1;
+  }
+
+  .Layout-divider {
+    display: none;
+  }
+
+  .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+  // Gutter spacing
+
+  @include breakpoint(lg) {
+    --Layout-gutter: 24px;
+  }
+
+  &.Layout--gutter-none {
+    --Layout-gutter: 0;
+  }
+
+  &.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+  &.Layout--gutter-spacious {
+    @include breakpoint(lg) {
+      --Layout-gutter: 32px;
+    }
+
+    @include breakpoint(xl) {
+      --Layout-gutter: 40px;
+    }
+  }
+
+  // Sidebar width
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
+    }
+  }
+
+  &.Layout--sidebar-narrow {
+    @each $breakpoint in map-keys($sidebar-narrow-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+      }
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @each $breakpoint in map-keys($sidebar-wide-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
+      }
+    }
+  }
+
+  // Sidebar position
+
+  &.Layout--sidebarPosition-start {
+    .Layout-sidebar {
+      grid-column: 1;
+    }
+
+    .Layout-main {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-end {
+    grid-template-columns: 1fr 0 auto;
+
+    .Layout-main {
+      grid-column: 1;
+    }
+
+    .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  // Sidebar divider
+
+  &.Layout--divided {
+    .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      // stylelint-disable-next-line primer/spacing
+      margin-right: -1px;
+      background: var(--color-border-default);
+    }
+
+    .Layout-main {
+      grid-column: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-end {
+      .Layout-sidebar {
+        grid-column: 3 / span 1;
+      }
+
+      .Layout-main {
+        grid-column: 1;
+      }
+    }
+  }
+}
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  // stylelint-disable-next-line primer/no-undefined-vars
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+  min-width: 0;
+
+  // Centered main column
+  // FIXME: right-aligned sidebar
+  .Layout-main-centered-md,
+  .Layout-main-centered-lg,
+  .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+
+    > .container-md,
+    > .container-lg,
+    > .container-xl {
+      margin-left: 0;
+    }
+  }
+
+  .Layout-main-centered-md {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  .Layout-main-centered-lg {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+
+  .Layout-main-centered-xl {
+    // stylelint-disable-next-line primer/no-undefined-vars
+    max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
+  }
+}

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/links/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "links"
+generated: true
+---
+
+# 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/links/index.scss";
+```
+
+## Build
+
+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/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

@@ -0,0 +1,25 @@
+---
+bundle: "loaders"
+generated: true
+---
+
+# Primer CSS: `loaders` 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/loaders/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/loaders.css`.
+
+## License
+
+[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

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

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);
   }
 }