@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

package/layout/grid.scss

@@ -1,32 +1,32 @@
 // GRID
 
 // Columns
-.col-1 { width: (1 / 12 * 100%); }
-.col-2 { width: (2 / 12 * 100%); }
-.col-3 { width: (3 / 12 * 100%); }
-.col-4 { width: (4 / 12 * 100%); }
-.col-5 { width: (5 / 12 * 100%); }
-.col-6 { width: (6 / 12 * 100%); }
-.col-7 { width: (7 / 12 * 100%); }
-.col-8 { width: (8 / 12 * 100%); }
-.col-9 { width: (9 / 12 * 100%); }
-.col-10 { width: (10 / 12 * 100%); }
-.col-11 { width: (11 / 12 * 100%); }
+.col-1 { width: (1 * 0.0833333333 * 100%); }
+.col-2 { width: (2 * 0.0833333333 * 100%); }
+.col-3 { width: (3 * 0.0833333333 * 100%); }
+.col-4 { width: (4 * 0.0833333333 * 100%); }
+.col-5 { width: (5 * 0.0833333333 * 100%); }
+.col-6 { width: (6 * 0.0833333333 * 100%); }
+.col-7 { width: (7 * 0.0833333333 * 100%); }
+.col-8 { width: (8 * 0.0833333333 * 100%); }
+.col-9 { width: (9 * 0.0833333333 * 100%); }
+.col-10 { width: (10 * 0.0833333333 * 100%); }
+.col-11 { width: (11 * 0.0833333333 * 100%); }
 .col-12 { width: 100%; }
 
 @each $breakpoint in map-keys($breakpoints) {
   @include breakpoint($breakpoint) {
-    .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
-    .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
-    .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
-    .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
-    .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
-    .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
-    .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
-    .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
-    .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
-    .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
-    .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
+    .col-#{$breakpoint}-1 { width: ( 1 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-2 { width: ( 2 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-3 { width: ( 3 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-4 { width: ( 4 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-5 { width: ( 5 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-6 { width: ( 6 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-7 { width: ( 7 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-8 { width: ( 8 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-9 { width: ( 9 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-10 { width: ( 10 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-11 { width: ( 11 * 0.0833333333 * 100%); }
     .col-#{$breakpoint}-12 { width: 100%; }
   }
 }
@@ -37,7 +37,7 @@
   margin-right: -$gutter-width;
   margin-left: -$gutter-width;
 
-  > [class*="col-"] {
+  > [class*='col-'] {
     padding-right: $gutter-width !important;
     padding-left: $gutter-width !important;
   }

package/layout/index.scss

@@ -1,4 +1,7 @@
-@import "../support/index.scss";
-@import "./container.scss";
-@import "./grid.scss";
-@import "./grid-offset.scss";
+@import '../support/index.scss';
+@import './mixins.scss';
+
+@import './container.scss';
+@import './grid.scss';
+@import './grid-offset.scss';
+@import './layout.scss';

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/{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';