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

package/marketing/type/typography.scss

@@ -1,81 +1,119 @@
 // Headings
-
-.h000-mktg,
-.h00-mktg,
 .h0-mktg,
 .h1-mktg,
 .h2-mktg,
 .h3-mktg,
 .h4-mktg,
 .h5-mktg,
-.h6-mktg,
-.lead-mktg {
+.h6-mktg {
   font-family: $font-mktg;
-  font-weight: $font-weight-semibold;
-}
-
-@mixin h000-mktg {
-  font-size: $h000-size-mobile !important;
-  @include breakpoint(md) { font-size: $h000-size !important; }
-}
-
-.h000-mktg { @include h000-mktg; }
-
-@mixin h00-mktg {
-  font-size: $h00-size-mobile !important;
-  @include breakpoint(md) { font-size: $h00-size !important; }
+  font-feature-settings: $mktg-font-feature-settings;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $mktg-header-weight-default !important;
+  letter-spacing: $mktg-header-spacing-default !important;
 }
 
-.h00-mktg { @include h00-mktg; }
-
-@mixin h0-mktg {
-  font-size: $h0-size-mobile !important;
-  @include breakpoint(md) { font-size: $h0-size !important; }
-}
-
-.h0-mktg { @include h0-mktg; }
-
-@mixin h1-mktg {
-  font-size: $h1-size-mobile !important;
-  @include breakpoint(md) { font-size: $h1-size !important; }
-}
-
-.h1-mktg { @include h1-mktg; }
-
-@mixin h2-mktg {
-  font-size: $h2-size-mobile !important;
-  @include breakpoint(md) { font-size: $h2-size !important; }
-}
-
-.h2-mktg { @include h2-mktg; }
-
-@mixin h3-mktg {
-  font-size: $h3-size-mobile !important;
-  @include breakpoint(md) { font-size: $h3-size !important; }
-}
-
-.h3-mktg { @include h3-mktg; }
-
-.h4-mktg {
-  font-size: $h4-size !important;
+@each $header, $sizes in $mktg-headers {
+  .h#{$header}-mktg {
+    $pairing: map-get($mktg-header-pairings, nth($sizes, 1));
+    $pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
+    $pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
+
+    font-size: map-get($pairing, "size") !important;
+    line-height: map-get($pairing, "lh") !important;
+    @if (map-get($pairing, "size") >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
+
+    @if (nth($sizes, 1) != nth($sizes, 2)) {
+      @include breakpoint(md) {
+        font-size: map-get($pairing-md, "size") !important;
+        line-height: map-get($pairing-md, "lh") !important;
+
+        @if (map-get($pairing-md, "size") >= $mktg-header-spacing-threshold and map-get($pairing, "size") < $mktg-header-spacing-threshold) {
+          letter-spacing: $mktg-header-spacing-large !important;
+        }
+
+        @if (map-get($pairing-md, "size") >= $mktg-header-weight-threshold and map-get($pairing, "size") < $mktg-header-weight-threshold) {
+          font-weight: $mktg-header-weight-large !important;
+        }
+      }
+    }
+
+    @if (nth($sizes, 2) != nth($sizes, 3)) {
+      @include breakpoint(lg) {
+        font-size: map-get($pairing-lg, "size") !important;
+        line-height: map-get($pairing-lg, "lh") !important;
+
+        @if (map-get($pairing-lg, "size") >= $mktg-header-spacing-threshold and map-get($pairing-md, "size") < $mktg-header-spacing-threshold) {
+          letter-spacing: $mktg-header-spacing-large !important;
+        }
+
+        @if (map-get($pairing-lg, "size") >= $mktg-header-weight-threshold and map-get($pairing-md, "size") < $mktg-header-weight-threshold) {
+          font-weight: $mktg-header-weight-large !important;
+        }
+      }
+    }
+  }
 }
 
-.h5-mktg {
-  font-size: $h5-size !important;
+.f0-mktg,
+.f1-mktg,
+.f2-mktg,
+.f3-mktg,
+.f4-mktg,
+.f5-mktg,
+.f6-mktg {
+  font-family: $font-mktg;
+  font-feature-settings: $mktg-font-feature-settings;
+  font-weight: $font-weight-normal;
 }
 
-.h6-mktg {
-  font-size: $h6-size !important;
+@each $body, $sizes in $mktg-bodies {
+  .f#{$body}-mktg {
+    $pairing: map-get($mktg-body-pairings, nth($sizes, 1));
+    $pairing-md: map-get($mktg-body-pairings, nth($sizes, 2));
+    $pairing-lg: map-get($mktg-body-pairings, nth($sizes, 3));
+
+    font-size: map-get($pairing, "size") !important;
+    line-height: map-get($pairing, "lh") !important;
+    @if (map-get($pairing, "size") >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large !important; }
+    @if (map-get($pairing, "size") >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; }
+
+    @if (nth($sizes, 1) != nth($sizes, 2)) {
+      @include breakpoint(md) {
+        font-size: map-get($pairing-md, "size") !important;
+        line-height: map-get($pairing-md, "lh") !important;
+
+        @if (map-get($pairing-md, "size") >= $mktg-body-spacing-threshold and map-get($pairing, "size") < $mktg-body-spacing-threshold) {
+          letter-spacing: $mktg-body-spacing-large !important;
+        }
+
+        @if (map-get($pairing-md, "size") >= $mktg-body-weight-threshold and map-get($pairing, "size") < $mktg-body-weight-threshold) {
+          font-weight: $font-weight-medium;
+        }
+      }
+    }
+
+    @if (nth($sizes, 2) != nth($sizes, 3)) {
+      @include breakpoint(lg) {
+        font-size: map-get($pairing-lg, "size") !important;
+        line-height: map-get($pairing-lg, "lh") !important;
+
+        @if (map-get($pairing-lg, "size") >= $mktg-body-spacing-threshold and map-get($pairing-md, "size") < $mktg-body-spacing-threshold) {
+          letter-spacing: $mktg-body-spacing-large !important;
+        }
+
+        @if (map-get($pairing-lg, "size") >= $mktg-body-weight-threshold and map-get($pairing-md, "size") < $mktg-body-weight-threshold) {
+          font-weight: $font-weight-medium;
+        }
+      }
+    }
+  }
 }
 
-// Big opening paragraphs
-@mixin lead-mktg {
-  font-size: $h3-size;
-  font-weight: $font-weight-normal;
+.text-medium {
+  font-weight: $font-weight-medium !important;
 }
 
-.lead-mktg { @include lead-mktg; }
-
 // Pullquote
 
 @mixin pullquote {
@@ -86,8 +124,8 @@
   font-family: $mono-font;
   font-size: $h4-size;
   line-height: 1.4;
-  color: $text-gray;
-  border-left: 3px solid $border-color;
+  color: var(--color-color-text-secondary);
+  border-left: 3px solid var(--color-border-default);
 
   @include breakpoint(md) {
     padding-left: $spacer * 1.5;

package/marketing/utilities/animations.scss

@@ -0,0 +1,9 @@
+// Animation utilities for marketing
+
+.hover-grow-mktg {
+  transition: transform 0.4s $ease-mktg;
+
+  &:hover {
+    transform: scale3d(1.025, 1.025, 1.025);
+  }
+}

package/marketing/utilities/index.scss

@@ -1,7 +1,6 @@
 @import "../support/index.scss";
 // utilities
-@import "./filters.scss";
+@import "./animations.scss";
 @import "./borders.scss";
+@import "./filters.scss";
 @import "./layout.scss";
-@import "./margin.scss";
-@import "./padding.scss";

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,15 +14,17 @@
   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;
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
 
-    &::before { border-top-left-radius: $border-radius; }
+    &::before {
+      border-top-left-radius: $border-radius;
+    }
   }
 
   &:last-child {
@@ -30,25 +32,25 @@
     border-bottom-right-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 
-    &::before { border-bottom-left-radius: $border-radius; }
+    &::before {
+      border-bottom-left-radius: $border-radius;
+    }
   }
 
-  &: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]) {
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
     cursor: default;
+    background-color: var(--color-menu-bg-active);
 
     &::before {
       position: absolute;
@@ -56,17 +58,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 +77,7 @@
 
   .menu-warning {
     float: right;
-    // stylelint-disable-next-line primer/colors
-    color: $red-900;
+    color: var(--color-attention-fg);
   }
 
   .avatar {
@@ -88,7 +87,7 @@
 
   &.alert {
     .Counter {
-      color: $text-red;
+      color: var(--color-danger-fg);
     }
   }
 }
@@ -100,8 +99,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,28 @@
     z-index: 1;
     width: 2px;
     pointer-events: none;
-    content: "";
+    content: '';
   }
 }
 
 // States
 
-.SideNav-item:hover,
-.SideNav-item:focus {
+.SideNav-item:hover {
   text-decoration: none;
-  // stylelint-disable-next-line primer/colors
-  background-color: $gray-100;
-  outline: none;
+  background-color: var(--color-neutral-subtle);
 }
 
 .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-current]:not([aria-current='false']),
+.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 +69,7 @@
 .SideNav-icon {
   width: 16px;
   margin-right: $spacer-2;
-  color: $text-gray-light;
+  color: var(--color-fg-muted);
 }
 
 // Sub Nav
@@ -85,21 +81,19 @@
   display: block;
   width: 100%;
   padding: $spacer-1 0;
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-align: left;
   background-color: transparent;
   border: 0;
 }
 
-.SideNav-subItem:hover,
-.SideNav-subItem:focus {
-  color: $text-gray-dark;
+.SideNav-subItem:hover {
+  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-current]:not([aria-current='false']),
+.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;