jekyll-v4-theme-primer 0.9.0

data/_sass/@primer/css/marketing/type/typography.scss

@@ -0,0 +1,118 @@
+// Headings
+.h0-mktg,
+.h1-mktg,
+.h2-mktg,
+.h3-mktg,
+.h4-mktg,
+.h5-mktg,
+.h6-mktg {
+  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 !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;
+        }
+      }
+    }
+  }
+}
+
+.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;
+}
+
+@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;
+        }
+      }
+    }
+  }
+}
+
+.text-medium {
+  font-weight: $font-weight-medium !important;
+}

data/_sass/@primer/css/marketing/utilities/animations.scss

@@ -0,0 +1,51 @@
+// Animation utilities for marketing
+
+.hover-grow-mktg {
+  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);
+      }
+    }
+  }
+}

data/_sass/@primer/css/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

data/_sass/@primer/css/marketing/utilities/filters.scss

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

data/_sass/@primer/css/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';

data/_sass/@primer/css/marketing/utilities/layout.scss

@@ -0,0 +1,51 @@
+// Layout utilities
+// 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 $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; }
+      }
+
+      @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; }
+      }
+    }
+  }
+}
+
+// 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; }

data/_sass/@primer/css/navigation/filter-list.scss

@@ -0,0 +1,82 @@
+// stylelint-disable selector-max-specificity
+
+// Filters list
+//
+// A vertical list of filters.
+.filter-list {
+  list-style-type: none;
+
+  &.small .filter-item {
+    // stylelint-disable-next-line primer/spacing
+    padding: 6px 12px;
+    font-size: $font-size-small;
+  }
+
+  &.pjax-active .filter-item {
+    color: var(--color-fg-muted);
+    background-color: transparent;
+
+    &.pjax-active {
+      color: var(--color-fg-on-emphasis);
+      background-color: var(--color-accent-emphasis);
+    }
+  }
+}
+
+.filter-item {
+  position: relative;
+  display: block;
+  padding: $spacer-2 $spacer-3;
+  margin-bottom: $spacer-1;
+  overflow: hidden;
+  font-size: $h5-size;
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: $border-radius;
+
+  &:hover {
+    text-decoration: none;
+    background-color: var(--color-canvas-subtle);
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
+  }
+
+  .count {
+    float: right;
+    font-weight: $font-weight-bold;
+  }
+
+  .bar {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    bottom: 2px;
+    z-index: -1;
+    display: inline-block;
+    background-color: var(--color-neutral-subtle);
+  }
+}

data/_sass/@primer/css/navigation/index.scss

@@ -0,0 +1,8 @@
+@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';

data/_sass/@primer/css/navigation/menu.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/menu';

data/_sass/@primer/css/navigation/sidenav.scss

@@ -0,0 +1,99 @@
+// 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:hover {
+  text-decoration: none;
+  background-color: var(--color-neutral-subtle);
+}
+
+.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 {
+  color: var(--color-fg-default);
+  text-decoration: none;
+}
+
+.SideNav-subItem[aria-current]:not([aria-current='false']),
+.SideNav-subItem[aria-selected='true'] {
+  font-weight: $font-weight-semibold;
+  color: var(--color-fg-default);
+}

data/_sass/@primer/css/navigation/subnav.scss

@@ -0,0 +1,146 @@
+// stylelint-disable selector-max-specificity
+
+// 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: $border-width $border-style var(--color-border-muted);
+}
+
+.subnav-flush {
+  margin-bottom: 0;
+}
+
+.subnav-item {
+  position: relative;
+  float: left;
+  // 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: 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: var(--color-canvas-subtle);
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    z-index: 2;
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
+    border-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
+  }
+
+  &:first-child {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+}
+
+.subnav-search {
+  position: relative;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 12px;
+}
+
+.subnav-search-input {
+  width: 320px;
+  padding-left: $spacer-5;
+  color: var(--color-fg-muted);
+}
+
+.subnav-search-input-wide {
+  // stylelint-disable-next-line primer/responsive-widths
+  width: 500px;
+}
+
+.subnav-search-icon {
+  position: absolute;
+  top: 9px;
+  left: 8px;
+  display: block;
+  color: var(--color-fg-muted);
+  text-align: center;
+  pointer-events: none;
+}
+
+.subnav-search-context {
+  .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.selected {
+      z-index: 2;
+    }
+  }
+
+  + .subnav-search {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: -1px;
+
+    .subnav-search-input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .select-menu-modal-holder {
+    z-index: 30;
+  }
+
+  .select-menu-modal {
+    width: 220px;
+  }
+
+  .select-menu-item-icon {
+    color: inherit;
+  }
+}
+
+.subnav-spacer-right {
+  // stylelint-disable-next-line primer/spacing
+  padding-right: 12px;
+}

data/_sass/@primer/css/navigation/tabnav.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/tab_nav';

data/_sass/@primer/css/navigation/underline-nav.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/underline_nav';

data/_sass/@primer/css/overlay/index.scss

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

data/_sass/@primer/css/overlay/overlay.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/dialog';

data/_sass/@primer/css/pagination/index.scss

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