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

package/marketing/utilities/layout.scss

@@ -1,20 +1,24 @@
 // Layout utilities
-// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before
 
 // Responsive utilities to position content
 // No utilities for sm and xl breakpoints
 @each $breakpoint, $variant in $marketing-position-variants {
   @include breakpoint($breakpoint) {
-    @each $scale, $size in $marketing-all-spacers {
-      .top#{$variant}-#{$scale}     { top: $size !important; }
-      .right#{$variant}-#{$scale}   { right: $size !important; }
-      .bottom#{$variant}-#{$scale}  { bottom: $size !important; }
-      .left#{$variant}-#{$scale}    { left: $size !important; }
+    @each $scale, $size in $spacer-map-extended {
+      @if ($size != 0 or $variant != "") {
+        .top#{$variant}-#{$scale}     { top: $size !important; }
+        .right#{$variant}-#{$scale}   { right: $size !important; }
+        .bottom#{$variant}-#{$scale}  { bottom: $size !important; }
+        .left#{$variant}-#{$scale}    { left: $size !important; }
+      }
 
-      .top#{$variant}-n#{$scale}     { top: -$size !important; }
-      .right#{$variant}-n#{$scale}   { right: -$size !important; }
-      .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
-      .left#{$variant}-n#{$scale}    { left: -$size !important; }
+      @if ($size != 0) {
+        .top#{$variant}-n#{$scale}     { top: -$size !important; }
+        .right#{$variant}-n#{$scale}   { right: -$size !important; }
+        .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
+        .left#{$variant}-n#{$scale}    { left: -$size !important; }
+      }
     }
   }
 }
@@ -23,7 +27,24 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @for $offset from 1 through 7 {
-      .offset#{$variant}-n#{$offset} { margin-left: -($offset / 12 * 100%); }
+      .offset#{$variant}-n#{$offset} { margin-left: -($offset * 0.0833333333 * 100%); }
     }
   }
 }
+
+// Width and height utilities, especially needed when the
+// dimensions of an image are set in HTML
+.width-auto { width: auto !important; }
+.height-auto { height: auto !important; }
+
+// Make an object fill its parent
+.object-fit-cover { object-fit: cover !important; }
+
+// Handling z-index
+.z-1 { z-index: 1 !important; }
+.z-2 { z-index: 2 !important; }
+.z-3 { z-index: 3 !important; }
+
+// Negative z-index
+.z-n1 { z-index: -1 !important; }
+.z-n2 { z-index: -2 !important; }

package/navigation/README.md

@@ -1,37 +1,25 @@
-# Primer Navigation
+---
+bundle: "navigation"
+generated: true
+---
 
-> Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `navigation` 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-navigation/index.scss";
+@import "@primer/css/navigation/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/navigation](https://primer.style/css/components/navigation).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/navigation.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/navigation/filter-list.scss

@@ -5,18 +5,18 @@
   list-style-type: none;
 
   &.small .filter-item {
-    padding: $spacer-1 10px;
-    margin: 0 0 2px;
+    // stylelint-disable-next-line primer/spacing
+    padding: 6px 12px;
     font-size: $font-size-small;
   }
 
   &.pjax-active .filter-item {
-    color: $text-gray;
+    color: var(--color-fg-muted);
     background-color: transparent;
 
     &.pjax-active {
-      color: $text-white;
-      background-color: $bg-blue;
+      color: var(--color-fg-on-emphasis);
+      background-color: var(--color-accent-emphasis);
     }
   }
 }
@@ -24,25 +24,27 @@
 .filter-item {
   position: relative;
   display: block;
-  padding: $spacer-2 10px;
-  margin-bottom: 5px;
+  padding: $spacer-2 $spacer-3;
+  margin-bottom: $spacer-1;
   overflow: hidden;
   font-size: $h5-size;
-  color: $text-gray;
+  color: var(--color-fg-muted);
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  border-radius: 3px;
+  border-radius: $border-radius;
 
   &:hover {
     text-decoration: none;
-    background-color: lighten($gray-200, 3%);
+    background-color: var(--color-canvas-subtle);
   }
 
-  &.selected {
-    color: $text-white;
-    background-color: $bg-blue;
+  &.selected,
+  &[aria-selected=true],
+  &[aria-current]:not([aria-current=false]) {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
   }
 
   .count {
@@ -57,6 +59,6 @@
     bottom: 2px;
     z-index: -1;
     display: inline-block;
-    background-color: darken($gray-100, 2%);
+    background-color: var(--color-neutral-subtle);
   }
 }

package/navigation/index.scss

@@ -1,7 +1,8 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 // Navigation
-@import "./menu.scss";
-@import "./tabnav.scss";
-@import "./filter-list.scss";
-@import "./subnav.scss";
-@import "./underline-nav.scss";
+@import './menu.scss';
+@import './tabnav.scss';
+@import './filter-list.scss';
+@import './sidenav.scss';
+@import './subnav.scss';
+@import './underline-nav.scss';

package/navigation/menu.scss

@@ -3,45 +3,56 @@
 // A menu on the side of a page, defaults to left side. e.g. github.com/about
 
 .menu {
-  margin-bottom: 15px;
+  margin-bottom: $spacer-3;
   list-style: none;
-  background-color: $bg-white;
-  border: 1px solid $gray-300;
-  border-radius: 3px;
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
 }
 
 .menu-item {
   position: relative;
   display: block;
-  padding: $spacer-2 10px;
-  border-bottom: 1px solid $gray-200;
+  padding: $spacer-2 $spacer-3;
+  color: var(--color-fg-default);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   &:first-child {
     border-top: 0;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
 
-    &::before { border-top-left-radius: 2px; }
+    &::before { border-top-left-radius: $border-radius; }
   }
 
   &:last-child {
     border-bottom: 0;
-    border-bottom-right-radius: 2px;
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
 
-    &::before { border-bottom-left-radius: 2px; }
+    &::before { border-bottom-left-radius: $border-radius; }
+  }
+
+  &:focus {
+    z-index: 1;
+    outline: none;
+    box-shadow: var(--color-primer-shadow-focus);
   }
 
   &:hover {
     text-decoration: none;
-    background-color: $gray-100;
+    background-color: var(--color-neutral-subtle);
+  }
+
+  &:active {
+    background-color: var(--color-canvas-subtle);
   }
 
-  &.selected {
-    font-weight: $font-weight-bold;
-    color: $text-gray-dark;
+  &.selected,
+  &[aria-selected=true],
+  &[aria-current]:not([aria-current=false]) {
     cursor: default;
-    background-color: $bg-white;
+    background-color: var(--color-menu-bg-active);
 
     &::before {
       position: absolute;
@@ -49,64 +60,62 @@
       bottom: 0;
       left: 0;
       width: 2px;
-      content: "";
-      background-color: $orange-600;
+      content: '';
+      background-color: var(--color-primer-border-active);
     }
   }
 
   .octicon {
     width: 16px;
-    margin-right: 5px;
-    color: $text-gray-dark;
+    margin-right: $spacer-2;
+    color: var(--color-fg-muted);
     text-align: center;
   }
 
   .Counter {
     float: right;
-    margin-left: 5px;
+    margin-left: $spacer-1;
   }
 
   .menu-warning {
     float: right;
-    color: $red-900;
+    color: var(--color-attention-fg);
   }
 
   .avatar {
     float: left;
-    margin-right: 5px;
+    margin-right: $spacer-1;
   }
 
   &.alert {
     .Counter {
-      color: $text-red;
+      color: var(--color-danger-fg);
     }
   }
 }
 
 .menu-heading {
   display: block;
-  padding: $spacer-2 10px;
+  padding: $spacer-2 $spacer-3;
   margin-top: 0;
   margin-bottom: 0;
-  font-size: 13px;
+  font-size: inherit;
   font-weight: $font-weight-bold;
-  line-height: 20px;
-  color: $gray-600;
-  background-color: darken($gray-100, 1%);
-  border-bottom: 1px solid $gray-200;
+  color: var(--color-fg-default);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   &:hover {
     text-decoration: none;
   }
 
   &:first-child {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
   }
 
   &:last-child {
     border-bottom: 0;
-    border-bottom-right-radius: 2px;
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 }

package/navigation/sidenav.scss

@@ -0,0 +1,108 @@
+// Side Nav
+//
+// A vertical list of navigational links, typically used on the left side of a page.
+
+.SideNav {
+  background-color: var(--color-canvas-subtle);
+}
+
+.SideNav-item {
+  position: relative;
+  display: block;
+  width: 100%;
+  // stylelint-disable-next-line primer/spacing
+  padding: 12px $spacer-3;
+  color: var(--color-fg-default);
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+  border-top: $border-width $border-style var(--color-border-muted);
+
+  &:first-child {
+    border-top: 0;
+  }
+
+  &:last-child {
+    // makes sure there is a "bottom border" in case the list is not long enough
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 $border-width 0 var(--color-border-default);
+  }
+
+  // Bar on the left
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 2px;
+    pointer-events: none;
+    content: '';
+  }
+}
+
+// States
+
+.SideNav-item:focus {
+  z-index: 1;
+  outline: none;
+  box-shadow: var(--color-primer-shadow-focus);
+}
+
+.SideNav-item:hover {
+  text-decoration: none;
+  background-color: var(--color-neutral-subtle);
+  outline: none;
+}
+
+.SideNav-item:active {
+  background-color: var(--color-canvas-subtle);
+}
+
+.SideNav-item[aria-current]:not([aria-current=false]),
+.SideNav-item[aria-selected='true'] {
+  background-color: var(--color-sidenav-selected-bg);
+
+  // Bar on the left
+  &::before {
+    background-color: var(--color-primer-border-active);
+  }
+}
+
+// Icon
+//
+// Makes sure multiple icons are vertically aligned
+
+.SideNav-icon {
+  width: 16px;
+  margin-right: $spacer-2;
+  color: var(--color-fg-muted);
+}
+
+// Sub Nav
+//
+// A more lightweight version, suited as a sub nav
+
+.SideNav-subItem {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: $spacer-1 0;
+  color: var(--color-accent-fg);
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+}
+
+.SideNav-subItem:hover,
+.SideNav-subItem:focus {
+  color: var(--color-fg-default);
+  text-decoration: none;
+  outline: none;
+}
+
+.SideNav-subItem[aria-current]:not([aria-current=false]),
+.SideNav-subItem[aria-selected='true'] {
+  font-weight: $font-weight-semibold;
+  color: var(--color-fg-default);
+}

package/navigation/subnav.scss

@@ -1,14 +1,16 @@
 // Needs refactoring
 // Sub nav
 .subnav {
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: 20px;
 
   @include clearfix();
 }
 
 .subnav-bordered {
+  // stylelint-disable-next-line primer/spacing
   padding-bottom: 20px;
-  border-bottom: 1px solid lighten($gray-200, 3%);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 }
 
 .subnav-flush {
@@ -18,51 +20,55 @@
 .subnav-item {
   position: relative;
   float: left;
-  padding: 6px 14px;
-  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px $spacer-3;
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $gray-600;
-  border: 1px solid $gray-200;
+  color: var(--color-fg-default);
+  border: $border-width $border-style var(--color-border-default);
 
   + .subnav-item {
+    // stylelint-disable-next-line primer/spacing
     margin-left: -1px;
   }
 
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: $gray-100;
+    background-color: var(--color-canvas-subtle);
   }
 
   &.selected,
-  &.selected:hover,
-  &.selected:focus {
+  &[aria-selected=true],
+  &[aria-current]:not([aria-current=false]) {
     z-index: 2;
-    color: $text-white;
-    background-color: $bg-blue;
-    border-color: $blue;
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
+    border-color: var(--color-accent-emphasis);
   }
 
   &:first-child {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 
   &:last-child {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
   }
 }
 
 .subnav-search {
   position: relative;
-  margin-left: 10px;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 12px;
 }
 
 .subnav-search-input {
   width: 320px;
-  padding-left: 30px;
-  color: $text-gray;
+  padding-left: $spacer-5;
+  color: var(--color-fg-muted);
 }
 
 .subnav-search-input-wide {
@@ -74,14 +80,13 @@
   top: 9px;
   left: 8px;
   display: block;
-  color: darken($gray-300, 4%);
+  color: var(--color-fg-muted);
   text-align: center;
   pointer-events: none;
 }
 
 .subnav-search-context {
   .btn {
-    color: $gray-700;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
@@ -94,6 +99,7 @@
   }
 
   + .subnav-search {
+    // stylelint-disable-next-line primer/spacing
     margin-left: -1px;
 
     .subnav-search-input {
@@ -116,5 +122,6 @@
 }
 
 .subnav-spacer-right {
-  padding-right: 10px;
+  // stylelint-disable-next-line primer/spacing
+  padding-right: 12px;
 }