@primer/css 0.0.0-1f16d51 → 0.0.0-2021101014711

package/marketing/utilities/layout.scss

@@ -5,16 +5,20 @@
 // 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

@@ -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/navigation/filter-list.scss

@@ -11,12 +11,12 @@
   }
 
   &.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);
     }
   }
 }
@@ -28,7 +28,7 @@
   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;
@@ -37,14 +37,14 @@
 
   &:hover {
     text-decoration: none;
-    background-color: $bg-gray;
+    background-color: var(--color-canvas-subtle);
   }
 
   &.selected,
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
-    color: $text-white;
-    background-color: $bg-blue;
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
   }
 
   .count {
@@ -59,7 +59,6 @@
     bottom: 2px;
     z-index: -1;
     display: inline-block;
-    // stylelint-disable-next-line primer/colors
-    background-color: darken($gray-100, 2%);
+    background-color: var(--color-neutral-subtle);
   }
 }

package/navigation/index.scss

@@ -1,8 +1,8 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 // Navigation
-@import "./menu.scss";
-@import "./tabnav.scss";
-@import "./filter-list.scss";
-@import "./sidenav.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

@@ -5,8 +5,8 @@
 .menu {
   margin-bottom: $spacer-3;
   list-style: none;
-  background-color: $bg-white;
-  border: $border;
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
 }
 
@@ -14,8 +14,8 @@
   position: relative;
   display: block;
   padding: $spacer-2 $spacer-3;
-  color: $text-black;
-  border-bottom: $border-width $border-style $border-gray-light;
+  color: var(--color-fg-default);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   &:first-child {
     border-top: 0;
@@ -33,22 +33,26 @@
     &::before { border-bottom-left-radius: $border-radius; }
   }
 
-  &:focus,
+  &:focus {
+    z-index: 1;
+    outline: none;
+    box-shadow: var(--color-primer-shadow-focus);
+  }
+
   &:hover {
     text-decoration: none;
-    // stylelint-disable-next-line primer/colors
-    background-color: $gray-100;
-    outline: none;
+    background-color: var(--color-neutral-subtle);
   }
 
   &:active {
-    background-color: $bg-gray-light;
+    background-color: var(--color-canvas-subtle);
   }
 
   &.selected,
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
     cursor: default;
+    background-color: var(--color-menu-bg-active);
 
     &::before {
       position: absolute;
@@ -56,17 +60,15 @@
       bottom: 0;
       left: 0;
       width: 2px;
-      content: "";
-      // stylelint-disable-next-line primer/colors
-      background-color: #f9826c; // custom coral
+      content: '';
+      background-color: var(--color-primer-border-active);
     }
   }
 
   .octicon {
     width: 16px;
     margin-right: $spacer-2;
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    color: var(--color-fg-muted);
     text-align: center;
   }
 
@@ -77,8 +79,7 @@
 
   .menu-warning {
     float: right;
-    // stylelint-disable-next-line primer/colors
-    color: $red-900;
+    color: var(--color-attention-fg);
   }
 
   .avatar {
@@ -88,7 +89,7 @@
 
   &.alert {
     .Counter {
-      color: $text-red;
+      color: var(--color-danger-fg);
     }
   }
 }
@@ -100,8 +101,8 @@
   margin-bottom: 0;
   font-size: inherit;
   font-weight: $font-weight-bold;
-  color: $text-black;
-  border-bottom: $border-width $border-style $border-gray-light;
+  color: var(--color-fg-default);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   &:hover {
     text-decoration: none;

package/navigation/sidenav.scss

@@ -3,7 +3,7 @@
 // A vertical list of navigational links, typically used on the left side of a page.
 
 .SideNav {
-  background-color: $bg-gray-light;
+  background-color: var(--color-canvas-subtle);
 }
 
 .SideNav-item {
@@ -12,11 +12,11 @@
   width: 100%;
   // stylelint-disable-next-line primer/spacing
   padding: 12px $spacer-3;
-  color: $text-black;
+  color: var(--color-fg-default);
   text-align: left;
   background-color: transparent;
   border: 0;
-  border-top: $border-width $border-style $border-gray-light;
+  border-top: $border-width $border-style var(--color-border-muted);
 
   &:first-child {
     border-top: 0;
@@ -25,7 +25,7 @@
   &: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 $border-color;
+    box-shadow: 0 $border-width 0 var(--color-border-default);
   }
 
   // Bar on the left
@@ -37,32 +37,35 @@
     z-index: 1;
     width: 2px;
     pointer-events: none;
-    content: "";
+    content: '';
   }
 }
 
 // States
 
-.SideNav-item:hover,
 .SideNav-item:focus {
+  z-index: 1;
+  outline: none;
+  box-shadow: var(--color-primer-shadow-focus);
+}
+
+.SideNav-item:hover {
   text-decoration: none;
-  // stylelint-disable-next-line primer/colors
-  background-color: $gray-100;
+  background-color: var(--color-neutral-subtle);
   outline: none;
 }
 
 .SideNav-item:active {
-  background-color: $bg-gray-light;
+  background-color: var(--color-canvas-subtle);
 }
 
 .SideNav-item[aria-current]:not([aria-current=false]),
-.SideNav-item[aria-selected="true"] {
-  background-color: $bg-white;
+.SideNav-item[aria-selected='true'] {
+  background-color: var(--color-sidenav-selected-bg);
 
   // Bar on the left
   &::before {
-    // stylelint-disable-next-line primer/colors
-    background-color: #f9826c; // custom coral
+    background-color: var(--color-primer-border-active);
   }
 }
 
@@ -73,7 +76,7 @@
 .SideNav-icon {
   width: 16px;
   margin-right: $spacer-2;
-  color: $text-gray-light;
+  color: var(--color-fg-muted);
 }
 
 // Sub Nav
@@ -85,7 +88,7 @@
   display: block;
   width: 100%;
   padding: $spacer-1 0;
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-align: left;
   background-color: transparent;
   border: 0;
@@ -93,13 +96,13 @@
 
 .SideNav-subItem:hover,
 .SideNav-subItem:focus {
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
   text-decoration: none;
   outline: none;
 }
 
 .SideNav-subItem[aria-current]:not([aria-current=false]),
-.SideNav-subItem[aria-selected="true"] {
+.SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
 }

package/navigation/subnav.scss

@@ -10,7 +10,7 @@
 .subnav-bordered {
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 20px;
-  border-bottom: $border-width $border-style $border-gray-light;
+  border-bottom: $border-width $border-style var(--color-border-muted);
 }
 
 .subnav-flush {
@@ -25,8 +25,8 @@
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $text-gray-dark;
-  border: $border;
+  color: var(--color-fg-default);
+  border: $border-width $border-style var(--color-border-default);
 
   + .subnav-item {
     // stylelint-disable-next-line primer/spacing
@@ -36,17 +36,16 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: $bg-gray;
+    background-color: var(--color-canvas-subtle);
   }
 
   &.selected,
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
     z-index: 2;
-    color: $text-white;
-    background-color: $bg-blue;
-    // stylelint-disable-next-line primer/borders
-    border-color: $blue-600;
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
+    border-color: var(--color-accent-emphasis);
   }
 
   &:first-child {
@@ -69,7 +68,7 @@
 .subnav-search-input {
   width: 320px;
   padding-left: $spacer-5;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 }
 
 .subnav-search-input-wide {
@@ -81,16 +80,13 @@
   top: 9px;
   left: 8px;
   display: block;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-400;
+  color: var(--color-fg-muted);
   text-align: center;
   pointer-events: none;
 }
 
 .subnav-search-context {
   .btn {
-    // stylelint-disable-next-line primer/colors
-    color: $gray-700;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 

package/navigation/tabnav.scss

@@ -3,7 +3,7 @@
 .tabnav {
   margin-top: 0;
   margin-bottom: $spacer-3;
-  border-bottom: $border;
+  border-bottom: $border-width $border-style var(--color-border-default);
 }
 
 .tabnav-tabs {
@@ -20,38 +20,45 @@
   font-size: $h5-size;
   // stylelint-disable-next-line primer/typography
   line-height: 23px;
-  color: $text-gray-dark;
+  color: var(--color-fg-muted);
   text-decoration: none;
   background-color: 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],
   &[aria-current]:not([aria-current=false]) {
-    background-color: $bg-white;
-    border-color: $border-gray;
+    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;
+    color: var(--color-fg-default);
     text-decoration: none;
+    transition-duration: 0.1s;
   }
 
   &:active {
-    color: $text-gray-light;
+    color: var(--color-fg-muted);
   }
 
   .octicon {
     margin-right: $spacer-1;
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    color: var(--color-fg-muted);
   }
 
   .Counter {
     margin-left: $spacer-1;
+    color: inherit;
   }
 }
 
@@ -67,7 +74,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 10px;
   font-size: $font-size-small;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 
   > .octicon {
     // stylelint-disable-next-line primer/spacing
@@ -78,7 +85,7 @@
 // When tabnav-extra are anchors
 // stylelint-disable-next-line selector-no-qualifying-type
 a.tabnav-extra:hover {
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-decoration: none;
 }
 

package/navigation/underline-nav.scss

@@ -3,7 +3,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-color;
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
   justify-content: space-between;
 }
 
@@ -16,36 +16,35 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 30px;
-  color: $text-black;
+  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 rgba($border-gray-dark, 0);
-  transition: border-bottom-color 0.36s ease-in;
+  border-bottom: 2px $border-style transparent;
 
   &:hover,
   &:focus {
+    color: var(--color-fg-default);
     text-decoration: none;
-    border-bottom-color: $border-gray-dark;
-    outline: 1px dotted transparent; // Support Firfox custom colors
+    border-bottom-color: var(--color-neutral-muted);
+    outline: 1px dotted transparent; // Support Firefox custom colors
     outline-offset: -1px;
-    transition-timing-function: ease-out;
-    transition-duration: 0.12s;
+    transition: border-bottom-color 0.12s ease-out;
   }
 
   &.selected,
   &[role=tab][aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
     font-weight: $font-weight-bold;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-color: #f9826c; // custom coral
-    outline: 1px dotted transparent; // Support Firfox custom colors
+    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: $text-gray;
+      color: var(--color-fg-muted);
     }
   }
 }
@@ -68,12 +67,18 @@
 
 .UnderlineNav-octicon {
   margin-right: $spacer-1;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-400;
+  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 {