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

package/marketing/support/variables.scss

@@ -1,67 +1,126 @@
-$marketing-font-path: "/primer-marketing-support/fonts/" !default;
+// stylelint-disable unit-no-unknown
+// Typography
+$marketing-font-path: "/fonts/" !default;
 
-// Type
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: $font-weight-normal;
-  src: local("Inter"), local("Inter-Regular"), url("#{$marketing-font-path}Inter-Regular.woff") format("woff");
-}
+$font-mktg: $body-font !default;
+$font-weight-medium: 450 !default;
+$font-weight-extrabold: 800 !default;
 
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: $font-weight-semibold;
-  src: local("Inter Medium"), local("Inter-Medium"), url("#{$marketing-font-path}Inter-Medium.woff") format("woff");
-}
+$mktg-font-feature-settings: 'ss02' on, 'ss01' on !default;
+$mktg-header-spacing-large: -0.03em !default;
+$mktg-header-spacing-default: -0.01em !default;
+$mktg-header-spacing-threshold: 48px !default;
+$mktg-header-weight-large: $font-weight-extrabold !default;
+$mktg-header-weight-default: $font-weight-bold !default;
+$mktg-header-weight-threshold: 24px !default;
 
-$font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+// Header size steps
+$mktg-h-size-0:  96px !default;
+$mktg-h-size-1:  72px !default;
+$mktg-h-size-2:  64px !default;
+$mktg-h-size-3:  56px !default;
+$mktg-h-size-4:  48px !default;
+$mktg-h-size-5:  40px !default;
+$mktg-h-size-6:  32px !default;
+$mktg-h-size-7:  28px !default;
+$mktg-h-size-8:  24px !default;
+$mktg-h-size-9:  20px !default;
+$mktg-h-size-10: 16px !default;
 
-// Builds upon primer-support/variables/typography.scss
-$h000-size: 64px !default;
-$h000-size-mobile: 48px !default;
+// Header Line-height steps
+$mktg-h-lh-0:  100px !default;
+$mktg-h-lh-1:  76px !default;
+$mktg-h-lh-2:  68px !default;
+$mktg-h-lh-3:  60px !default;
+$mktg-h-lh-4:  52px !default;
+$mktg-h-lh-5:  44px !default;
+$mktg-h-lh-6:  36px !default;
+$mktg-h-lh-7:  32px !default;
+$mktg-h-lh-8:  28px !default;
+$mktg-h-lh-9:  24px !default;
+$mktg-h-lh-10: 20px !default;
 
-// Colors
-$green-mktg: mix($green-500, $green-400, 50%);
-$blue-mktg: mix($blue-400, $blue-500, 42%);
+$mktg-header-pairings: (
+  0:  (size: $mktg-h-size-0,  lh: $mktg-h-lh-0),
+  1:  (size: $mktg-h-size-1,  lh: $mktg-h-lh-1),
+  2:  (size: $mktg-h-size-2,  lh: $mktg-h-lh-2),
+  3:  (size: $mktg-h-size-3,  lh: $mktg-h-lh-3),
+  4:  (size: $mktg-h-size-4,  lh: $mktg-h-lh-4),
+  5:  (size: $mktg-h-size-5,  lh: $mktg-h-lh-5),
+  6:  (size: $mktg-h-size-6,  lh: $mktg-h-lh-6),
+  7:  (size: $mktg-h-size-7,  lh: $mktg-h-lh-7),
+  8:  (size: $mktg-h-size-8,  lh: $mktg-h-lh-8),
+  9:  (size: $mktg-h-size-9,  lh: $mktg-h-lh-9),
+  10: (size: $mktg-h-size-10, lh: $mktg-h-lh-10)
+) !default;
 
-// Animations
-$transition-time: 0.4s;
+// Responsive headers, where first number is mobile (default), second is tablet/md, and third is desktop/lg
+$mktg-headers: (
+  0: [4, 1, 0],
+  1: [5, 3, 1],
+  2: [6, 4, 2],
+  3: [7, 5, 4],
+  4: [8, 7, 6],
+  5: [9, 8, 8],
+  6: [10, 9, 9]
+) !default;
+
+// Body content
+$mktg-body-spacing-threshold: 28px !default;
+$mktg-body-weight-threshold: 24px !default;
+$mktg-body-spacing-large: -0.01em !default;
 
-// Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
-// i.e. After 40px, we have 48, 64, 80, 96, etc.
-$spacer-7:  $spacer * 6 !default;  // 48px
-$spacer-8:  $spacer * 8 !default;  // 64px
-$spacer-9:  $spacer * 10 !default; // 80px
-$spacer-10: $spacer * 12 !default; // 96px
-$spacer-11: $spacer * 14 !default; // 112px
-$spacer-12: $spacer * 16 !default; // 128px
+// Body size steps
+$mktg-body-size-0:  48px !default;
+$mktg-body-size-1:  40px !default;
+$mktg-body-size-2:  32px !default;
+$mktg-body-size-3:  28px !default;
+$mktg-body-size-4:  24px !default;
+$mktg-body-size-5:  20px !default;
+$mktg-body-size-6:  16px !default;
+$mktg-body-size-7:  14px !default;
+$mktg-body-size-8:  12px !default;
 
-$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
-$allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
+// Body line-height steps
+$mktg-body-lh-0:  64px !default;
+$mktg-body-lh-1:  52px !default;
+$mktg-body-lh-2:  44px !default;
+$mktg-body-lh-3:  40px !default;
+$mktg-body-lh-4:  32px !default;
+$mktg-body-lh-5:  28px !default;
+$mktg-body-lh-6:  24px !default;
+$mktg-body-lh-7:  20px !default;
+$mktg-body-lh-8:  20px !default;
 
-$marketing-spacers: (
-  7: $spacer-7,
-  8: $spacer-8,
-  9: $spacer-9,
-  10: $spacer-10,
-  11: $spacer-11,
-  12: $spacer-12,
+$mktg-body-pairings: (
+  0:  (size: $mktg-body-size-0,  lh: $mktg-body-lh-0),
+  1:  (size: $mktg-body-size-1,  lh: $mktg-body-lh-1),
+  2:  (size: $mktg-body-size-2,  lh: $mktg-body-lh-2),
+  3:  (size: $mktg-body-size-3,  lh: $mktg-body-lh-3),
+  4:  (size: $mktg-body-size-4,  lh: $mktg-body-lh-4),
+  5:  (size: $mktg-body-size-5,  lh: $mktg-body-lh-5),
+  6:  (size: $mktg-body-size-6,  lh: $mktg-body-lh-6),
+  7:  (size: $mktg-body-size-7,  lh: $mktg-body-lh-7),
+  8:  (size: $mktg-body-size-8,  lh: $mktg-body-lh-8)
 ) !default;
 
-$marketing-all-spacers: map-merge(
-  (
-    0: 0,
-    1: $spacer-1,
-    2: $spacer-2,
-    3: $spacer-3,
-    4: $spacer-4,
-    5: $spacer-5,
-    6: $spacer-6,
-  ),
-  $marketing-spacers,
+// Responsive body content, where first number is mobile (default), second is tablet/md, and third is desktop/lg
+$mktg-body-spacing-large: -0.01em !default;
+
+$mktg-bodies: (
+  0: [3, 1, 0],
+  1: [4, 3, 2],
+  2: [5, 5, 4],
+  3: [6, 5, 5],
+  4: [6, 6, 6],
+  5: [7, 7, 7],
+  6: [8, 8, 8]
 ) !default;
 
+// Animations
+$transition-time: 0.4s !default;
+$ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default;
+
 $marketing-position-variants: (
   "": "",
   md: "-md",

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/filters.scss

@@ -1,4 +1,3 @@
-// stylelint-disable no-unsupported-browser-features
 .grayscale {
   filter: grayscale(100%);
 }

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

@@ -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';