@papillonarts/css 0.5.0 → 0.7.0

package/build/primer/marketing/buttons/button.scss

@@ -0,0 +1,171 @@
+.btn-mktg {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.9rem 1.5rem 1.1rem;
+  // stylelint-disable-next-line primer/typography
+  font-size: 1rem;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 1;
+  // stylelint-disable-next-line primer/colors
+  color: var(--bgColor-default, var(--color-canvas-default));
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), // stylelint-disable-line primer/colors
+    var(--color-mktg-btn-bg) !important;
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 0.375rem;
+  transition: box-shadow 0.2s, outline 0.2s ease;
+  appearance: none !important;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    content: '';
+    // stylelint-disable-next-line primer/colors
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
+    border-radius: inherit;
+    opacity: 0;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-blend-mode: normal;
+  }
+
+  &:hover {
+    text-decoration: none;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--color-mktg-btn-shadow-hover) !important;
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-visible,
+  &.focus {
+    &::before {
+      opacity: 1;
+    }
+  }
+
+  // fallback :focus state
+  &:focus {
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
+  }
+
+  &:active {
+    &::before {
+      opacity: 0.5 !important;
+    }
+  }
+
+  &.disabled,
+  &[disabled] {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
+}
+
+.btn-muted-mktg {
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
+  background: none !important;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: var(--color-mktg-btn-shadow-outline);
+
+  &::before {
+    display: none;
+  }
+
+  &:hover {
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+  &:active {
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--fgColor-default, var(--color-fg-default)) 0 0 0 3px inset !important;
+  }
+
+  &:disabled {
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--fgColor-muted, var(--color-fg-subtle)) 0 0 0 1px inset !important;
+  }
+}
+
+.btn-subtle-mktg {
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
+  background: none !important;
+  box-shadow: none !important;
+
+  &::before {
+    background: none !important;
+  }
+
+  &:hover {
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+}
+
+.btn-signup-mktg {
+  // stylelint-disable-next-line primer/colors
+  color: #fff;
+  // stylelint-disable-next-line primer/colors
+  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
+
+  &::before {
+    // stylelint-disable-next-line primer/colors
+    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
+  }
+
+  // fallback :focus state
+  &:focus {
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
+  }
+}
+
+// Size modifiers
+
+.btn-small-mktg {
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.625rem 1rem 0.8125rem;
+}
+
+.btn-large-mktg {
+  // stylelint-disable-next-line primer/spacing
+  padding: 16px 30px 20px !important;
+  // stylelint-disable-next-line primer/typography
+  font-size: 1.25rem;
+}

package/build/primer/marketing/buttons/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './button.scss';

package/build/primer/marketing/index.scss

@@ -0,0 +1,8 @@
+// Global requirements
+@import './support/index.scss';
+
+// marketing specific css modules
+@import './type/index.scss';
+@import './buttons/index.scss';
+@import './links/index.scss';
+@import './utilities/index.scss';

package/build/primer/marketing/links/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './link.scss';

package/build/primer/marketing/links/link.scss

@@ -0,0 +1,51 @@
+.link-mktg {
+  position: relative;
+  display: inline-block;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &::after,
+  &.link-emphasis-mktg::before {
+    position: absolute;
+    // stylelint-disable-next-line primer/spacing
+    bottom: -0.15em;
+    left: 0;
+    width: calc(100% - 1em);
+    height: 2px;
+    pointer-events: none;
+    content: '';
+    background-color: currentColor;
+    transform: scaleX(0);
+    transform-origin: 0 0;
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      transition: transform 0.3s ease;
+    }
+  }
+
+  &.link-emphasis-mktg::before {
+    opacity: 0.2;
+    transform: scaleX(1);
+  }
+
+  &:hover,
+  &:active {
+    &::after {
+      transform: scaleX(1);
+    }
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 2px;
+  }
+
+  &.arrow-target-mktg {
+    .arrow-symbol-mktg {
+      // stylelint-disable-next-line primer/spacing
+      margin-left: -$em-spacer-3;
+    }
+  }
+}

package/build/primer/marketing/support/index.scss

@@ -0,0 +1,2 @@
+@import '../../support/index.scss';
+@import './variables.scss';

package/build/primer/marketing/support/variables.scss

@@ -0,0 +1,140 @@
+// Typography
+$marketing-font-path: '/fonts/' !default;
+
+$font-mktg: $body-font !default;
+$font-weight-medium: 450 !default;
+$font-weight-extrabold: 800 !default;
+
+$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;
+
+// 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;
+
+// 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;
+
+$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;
+
+// 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;
+
+// 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;
+
+// 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;
+
+$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;
+
+// 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',
+  lg: '-lg',
+) !default;
+
+$mktg-btn-shadow-hover-light: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+$mktg-btn-shadow-hover-dark: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+
+@include color-variables(
+  (
+    (mktg-btn-shadow-outline, (light: rgb(0,0,0,0.15) 0 0 0 1px inset, dark: rgb(255,255,255,0.25) 0 0 0 1px inset)),
+    (mktg-btn-bg, (light: #1b1f23, dark: #f6f8fa)),
+    (mktg-btn-shadow-focus, (light: rgb(0 0 0 / 15%) 0 0 0 4px, dark: rgb(255 255 255 / 25%) 0 0 0 4px)),
+    (mktg-btn-shadow-hover, (light: $mktg-btn-shadow-hover-light, dark: $mktg-btn-shadow-hover-dark)),
+    (mktg-btn-shadow-hover-muted, (light: rgb(0 0 0 / 70%) 0 0 0 2px inset, dark: rgb(255 255 255) 0 0 0 2px inset)),
+  )
+);

package/build/primer/marketing/type/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './typography.scss';

package/build/primer/marketing/type/typography.scss

@@ -0,0 +1,140 @@
+// Headings
+.h0-mktg,
+.h1-mktg,
+.h2-mktg,
+.h3-mktg,
+.h4-mktg,
+.h5-mktg,
+.h6-mktg {
+  // stylelint-disable-next-line primer/typography
+  font-family: $font-mktg;
+  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;
+}
+
+@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));
+
+    // stylelint-disable-next-line primer/typography
+    font-size: map-get($pairing, 'size') !important;
+    // stylelint-disable-next-line primer/typography
+    line-height: map-get($pairing, 'lh') !important;
+
+    // stylelint-disable-next-line primer/typography
+    @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) {
+        // stylelint-disable-next-line primer/typography
+        font-size: map-get($pairing-md, 'size') !important;
+        // stylelint-disable-next-line primer/typography
+        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;
+        }
+
+        @if (map-get($pairing-md, 'size') >= $mktg-header-weight-threshold and map-get($pairing, 'size') < $mktg-header-weight-threshold) {
+          // stylelint-disable-next-line primer/typography
+          font-weight: $mktg-header-weight-large !important;
+        }
+      }
+    }
+
+    @if (nth($sizes, 2) != nth($sizes, 3)) {
+      @include breakpoint(lg) {
+        // stylelint-disable-next-line primer/typography
+        font-size: map-get($pairing-lg, 'size') !important;
+        // stylelint-disable-next-line primer/typography
+        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;
+        }
+
+        @if (map-get($pairing-lg, 'size') >= $mktg-header-weight-threshold and map-get($pairing-md, 'size') < $mktg-header-weight-threshold) {
+          // stylelint-disable-next-line primer/typography
+          font-weight: $mktg-header-weight-large !important;
+        }
+      }
+    }
+  }
+}
+
+.f0-mktg,
+.f1-mktg,
+.f2-mktg,
+.f3-mktg,
+.f4-mktg,
+.f5-mktg,
+.f6-mktg {
+  // stylelint-disable-next-line primer/typography
+  font-family: $font-mktg;
+  font-feature-settings: $mktg-font-feature-settings;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-normal;
+}
+
+@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));
+
+    // stylelint-disable-next-line primer/typography
+    font-size: map-get($pairing, 'size') !important;
+    // stylelint-disable-next-line primer/typography
+    line-height: map-get($pairing, 'lh') !important;
+
+    @if (map-get($pairing, 'size') >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large; }
+
+    // stylelint-disable-next-line primer/typography
+    @if (map-get($pairing, 'size') >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; }
+
+    @if (nth($sizes, 1) != nth($sizes, 2)) {
+      @include breakpoint(md) {
+        // stylelint-disable-next-line primer/typography
+        font-size: map-get($pairing-md, 'size') !important;
+        // stylelint-disable-next-line primer/typography
+        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;
+        }
+
+        @if (map-get($pairing-md, 'size') >= $mktg-body-weight-threshold and map-get($pairing, 'size') < $mktg-body-weight-threshold) {
+          // stylelint-disable-next-line primer/typography
+          font-weight: $font-weight-medium;
+        }
+      }
+    }
+
+    @if (nth($sizes, 2) != nth($sizes, 3)) {
+      @include breakpoint(lg) {
+        // stylelint-disable-next-line primer/typography
+        font-size: map-get($pairing-lg, 'size') !important;
+        // stylelint-disable-next-line primer/typography
+        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;
+        }
+
+        @if (map-get($pairing-lg, 'size') >= $mktg-body-weight-threshold and map-get($pairing-md, 'size') < $mktg-body-weight-threshold) {
+          // stylelint-disable-next-line primer/typography
+          font-weight: $font-weight-medium;
+        }
+      }
+    }
+  }
+}
+
+.text-medium {
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-medium !important;
+}

package/build/primer/marketing/utilities/animations.scss

@@ -0,0 +1,52 @@
+// Animation utilities for marketing
+
+.hover-grow-mktg {
+  // stylelint-disable-next-line declaration-property-value-no-unknown
+  transition: transform 0.4s $ease-mktg;
+
+  &:hover {
+    transform: scale3d(1.025, 1.025, 1.025);
+  }
+}
+
+// Animated arrow symbol, used in marketing links, buttons, etc.
+.btn-mktg,
+.link-mktg,
+.arrow-target-mktg {
+  .octicon {
+    width: 1em;
+    height: 1em;
+  }
+
+  .arrow-symbol-mktg {
+    transition: transform 0.2s;
+    transform: translateX(0);
+
+    // stylelint-disable-next-line selector-max-type
+    path:last-child {
+      stroke-dasharray: 10;
+      stroke-dashoffset: 10;
+      transition: stroke-dashoffset 0.2s;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    &:hover,
+    &:focus {
+      .arrow-symbol-mktg {
+        transform: translateX(4px);
+
+        // stylelint-disable-next-line selector-max-type, selector-max-specificity, max-nesting-depth
+        path:last-child {
+          stroke-dashoffset: 20;
+        }
+      }
+    }
+
+    &:active {
+      .arrow-symbol-mktg {
+        transform: translateX(6px);
+      }
+    }
+  }
+}

package/build/primer/marketing/utilities/borders.scss

@@ -0,0 +1,4 @@
+// Marketing border utilities
+
+// XXX If you're looking for responsive border utilities, they've moved to
+// ../../utilities/borders.scss

package/build/primer/marketing/utilities/filters.scss

@@ -0,0 +1,3 @@
+.grayscale {
+  filter: grayscale(100%);
+}

package/build/primer/marketing/utilities/index.scss

@@ -0,0 +1,6 @@
+@import '../support/index.scss';
+// utilities
+@import './animations.scss';
+@import './borders.scss';
+@import './filters.scss';
+@import './layout.scss';

package/build/primer/marketing/utilities/layout.scss

@@ -0,0 +1,58 @@
+// Layout utilities
+
+// 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 $spacer-map-extended {
+      @if ($size != 0 or $variant != '') {
+        // stylelint-disable-next-line primer/spacing
+        .top#{$variant}-#{$scale}     { top: $size !important; }
+        // stylelint-disable-next-line primer/spacing
+        .right#{$variant}-#{$scale}   { right: $size !important; }
+        // stylelint-disable-next-line primer/spacing
+        .bottom#{$variant}-#{$scale}  { bottom: $size !important; }
+        // stylelint-disable-next-line primer/spacing
+        .left#{$variant}-#{$scale}    { left: $size !important; }
+      }
+
+      @if ($size != 0) {
+        // stylelint-disable-next-line primer/spacing
+        .top#{$variant}-n#{$scale}     { top: -$size !important; }
+        // stylelint-disable-next-line primer/spacing
+        .right#{$variant}-n#{$scale}   { right: -$size !important; }
+        // stylelint-disable-next-line primer/spacing
+        .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
+        // stylelint-disable-next-line primer/spacing
+        .left#{$variant}-n#{$scale}    { left: -$size !important; }
+      }
+    }
+  }
+}
+
+// Negative offset columns
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @for $offset from 1 through 7 {
+      // stylelint-disable-next-line primer/spacing
+      .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/build/primer/navigation/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "navigation"
+generated: true
+---
+
+# Primer CSS: `navigation` bundle
+
+## Usage
+
+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/css/navigation/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/navigation.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss