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

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

package/navigation/tabnav.scss

@@ -2,41 +2,63 @@
 // stylelint-disable selector-max-type
 .tabnav {
   margin-top: 0;
-  margin-bottom: 15px;
-  border-bottom: 1px solid $gray-300;
-
-  .Counter {
-    margin-left: 5px;
-  }
+  margin-bottom: $spacer-3;
+  border-bottom: $border-width $border-style var(--color-border-default);
 }
 
 .tabnav-tabs {
+  display: flex;
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: -1px;
+  overflow: auto;
 }
 
 .tabnav-tab {
   display: inline-block;
-  padding: $spacer-2 12px;
+  flex-shrink: 0;
+  padding: $spacer-2 $spacer-3;
   font-size: $h5-size;
-  line-height: 20px;
-  color: $gray-600;
+  // stylelint-disable-next-line primer/typography
+  line-height: 23px;
+  color: var(--color-fg-muted);
   text-decoration: none;
   background-color: transparent;
-  border: 1px solid transparent;
+  border: $border-width $border-style transparent;
   border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
+  &.selected,
   &[aria-selected=true],
-  &.selected {
-    color: $text-gray-dark;
-    background-color: $bg-white;
-    border-color: $gray-300;
-    border-radius: 3px 3px 0 0;
+  &[aria-current]:not([aria-current=false]) {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default); // cover bottom border
+    border-color: var(--color-border-default);
+    border-radius: $border-radius $border-radius 0 0;
+
+    .octicon {
+      color: inherit;
+    }
   }
 
   &:hover,
   &:focus {
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
     text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+  &:active {
+    color: var(--color-fg-muted);
+  }
+
+  .octicon {
+    margin-right: $spacer-1;
+    color: var(--color-fg-muted);
+  }
+
+  .Counter {
+    margin-left: $spacer-1;
+    color: inherit;
   }
 }
 
@@ -47,23 +69,25 @@
 
 .tabnav-extra {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   padding-top: 10px;
+  // stylelint-disable-next-line primer/spacing
   margin-left: 10px;
   font-size: $font-size-small;
-  color: $gray-600;
+  color: var(--color-fg-muted);
 
   > .octicon {
+    // stylelint-disable-next-line primer/spacing
     margin-right: 2px;
   }
 }
 
 // When tabnav-extra are anchors
-// stylelint-disable selector-no-qualifying-type
+// stylelint-disable-next-line selector-no-qualifying-type
 a.tabnav-extra:hover {
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-decoration: none;
 }
-// stylelint-enable selector-no-qualifying-type
 
 // Tabnav buttons
 //
@@ -71,5 +95,5 @@ a.tabnav-extra:hover {
 // the buttons to be floated or inline-block.
 
 .tabnav-btn {
-  margin-left: 10px;
+  margin-left: $spacer-2;
 }

package/navigation/underline-nav.scss

@@ -2,7 +2,8 @@
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
-  border-bottom: $border;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
   justify-content: space-between;
 }
 
@@ -11,33 +12,39 @@
 }
 
 .UnderlineNav-item {
-  padding: $spacer-3 $spacer-2;
-  margin-right: $spacer-3;
+  padding: $spacer-2 $spacer-3;
   font-size: $body-font-size;
-  line-height: $lh-default;
-  color: $text-gray;
+  // stylelint-disable-next-line primer/typography
+  line-height: 30px;
+  color: var(--color-fg-default);
   text-align: center;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  // stylelint-disable-next-line primer/borders
   border-bottom: 2px $border-style transparent;
 
   &:hover,
   &:focus {
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
     text-decoration: none;
-    border-bottom-color: $gray-300;
-    transition: 0.2s ease;
-
-    .UnderlineNav-octicon {
-      color: $gray-500;
-    }
+    border-bottom-color: var(--color-neutral-muted);
+    outline: 1px dotted transparent; // Support Firefox custom colors
+    outline-offset: -1px;
+    transition: border-bottom-color 0.12s ease-out;
   }
 
-  &.selected {
+  &.selected,
+  &[role=tab][aria-selected=true],
+  &[aria-current]:not([aria-current=false]) {
     font-weight: $font-weight-bold;
-    color: $text-gray-dark;
-    border-bottom-color: $orange-600;
+    color: var(--color-fg-default);
+    border-bottom-color: var(--color-primer-border-active);
+    outline: 1px dotted transparent; // Support Firefox custom colors
+    outline-offset: -1px;
 
     .UnderlineNav-octicon {
-      color: $gray-500;
+      color: var(--color-fg-muted);
     }
   }
 }
@@ -45,11 +52,6 @@
 .UnderlineNav--right {
   justify-content: flex-end;
 
-  .UnderlineNav-item {
-    margin-right: 0;
-    margin-left: $spacer-3;
-  }
-
   .UnderlineNav-actions {
     flex: 1 1 auto;
   }
@@ -64,7 +66,19 @@
 }
 
 .UnderlineNav-octicon {
-  color: $gray-400;
+  margin-right: $spacer-1;
+  color: var(--color-fg-subtle);
+}
+
+.UnderlineNav .Counter {
+  margin-left: $spacer-1;
+  color: var(--color-fg-default);
+  background-color: var(--color-neutral-muted);
+
+  &--primary {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-neutral-emphasis);
+  }
 }
 
 .UnderlineNav-container {