jekyll-v4-theme-primer 0.9.0

data/_sass/@primer/css/layout/app-frame.scss

@@ -0,0 +1,156 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable primer/spacing
+// stylelint-disable primer/borders
+
+.AppFrame {
+
+  // AppFrame structure
+  // ===================
+  //
+  // .AppFrame
+  // ├─ .AppFrame-a11yNav
+  // │  ├─ .AppFrame-a11yLink
+  // │
+  // ├─ .AppFrame-main
+  // │  ├─ .AppFrame-header-wrapper
+  // │  │   ├─ .AppFrame-header
+  // │  │   ├─ .AppFrame-subheader
+  // │  │
+  // │  ├─ #start-of-content
+  // │  ├─ .AppFrame-body
+  // │
+  // │  .AppFrame-footer
+
+  // Accessibility navigation
+
+  .AppFrame-a11yNav {
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    width: 100%;
+    padding: var(--base-size-16, 16px);
+    background: var(--color-canvas-inset);
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
+    isolation: isolate;
+    align-items: center;
+    gap: var(--base-size-8, 8px);
+
+    &:not(:focus-within) {
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(1px, 1px, 1px, 1px);
+      border: 0;
+    }
+
+    &:focus-within {
+      top: 0;
+      left: 0;
+
+      // Narrow viewport
+      @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+        justify-content: center;
+      }
+    }
+  }
+
+  .AppFrame-a11yLink {
+    transition: none;
+
+    &:not(:focus) {
+      display: block;
+      width: var(--base-size-8, 8px);
+      height: var(--base-size-8, 8px);
+      overflow: hidden;
+      text-indent: var(--base-size-128, 128px);
+      pointer-events: none;
+      background: var(--color-border-default);
+      border-radius: var(--primer-borderRadius-full, 100vh);
+    }
+
+    &:focus {
+      z-index: 20;
+      display: grid;
+      width: auto;
+      height: auto;
+      min-height: var(--primer-control-medium-size, 32px);
+      padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
+      overflow: auto;
+      color: var(--color-fg-on-emphasis);
+      background: var(--color-accent-emphasis);
+      border-radius: var(--primer-borderRadius-full, 100vh);
+      align-items: center;
+
+      @media (pointer: coarse) {
+        &::after {
+          @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px));
+        }
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        animation: AppFrame-a11yLink-focus 200ms ease-out;
+      }
+
+      @keyframes AppFrame-a11yLink-focus {
+        0% {
+          color: var(--color-accent-emphasis);
+          transform: scale(0.3, 0.25);
+        }
+
+        50% {
+          color: var(--color-accent-emphasis);
+          transform: scale(1, 1);
+        }
+
+        55% {
+          color: var(--color-fg-on-emphasis);
+        }
+
+        100% {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+
+  .AppFrame-main {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+
+    @supports (height: 100dvh) {
+      min-height: 100dvh;
+    }
+  }
+
+  .AppFrame-header-wrapper {
+    position: relative;
+    height: min-content;
+    overflow: visible;
+
+    .AppFrame-header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  .AppFrame-header {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-subheader {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-body {
+    flex: 1 0;
+    height: 100%;
+  }
+
+  .AppFrame-footer {
+    flex: 0 0 auto;
+  }
+}

data/_sass/@primer/css/layout/container.scss

@@ -0,0 +1,30 @@
+// Fixed-width, centered column for site content.
+// Handy container styles that match our breakpoints
+
+// 544px
+.container-sm {
+  max-width: $width-sm;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// 768px
+.container-md {
+  max-width: $container-md;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// 1004px - this matches the current fixed width: 980px + padding: px-3
+.container-lg {
+  max-width: $container-lg;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// 1280px
+.container-xl {
+  max-width: $container-xl;
+  margin-right: auto;
+  margin-left: auto;
+}

data/_sass/@primer/css/layout/grid-offset.scss

@@ -0,0 +1,20 @@
+// Optional offset options to work with grid.scss
+
+// Offset Columns
+
+// stylelint-disable primer/spacing
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    .offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-2 { margin-left: (2 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-3 { margin-left: (3 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-4 { margin-left: (4 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-5 { margin-left: (5 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-6 { margin-left: (6 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-7 { margin-left: (7 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-8 { margin-left: (8 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-9 { margin-left: (9 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-10 { margin-left: (10 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-11 { margin-left: (11 * 0.0833333333 * 100%) !important; }
+  }
+}

data/_sass/@primer/css/layout/grid.scss

@@ -0,0 +1,65 @@
+// GRID
+
+// Columns
+.col-1 { width: (1 * 0.0833333333 * 100%); }
+.col-2 { width: (2 * 0.0833333333 * 100%); }
+.col-3 { width: (3 * 0.0833333333 * 100%); }
+.col-4 { width: (4 * 0.0833333333 * 100%); }
+.col-5 { width: (5 * 0.0833333333 * 100%); }
+.col-6 { width: (6 * 0.0833333333 * 100%); }
+.col-7 { width: (7 * 0.0833333333 * 100%); }
+.col-8 { width: (8 * 0.0833333333 * 100%); }
+.col-9 { width: (9 * 0.0833333333 * 100%); }
+.col-10 { width: (10 * 0.0833333333 * 100%); }
+.col-11 { width: (11 * 0.0833333333 * 100%); }
+.col-12 { width: 100%; }
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .col-#{$breakpoint}-1 { width: ( 1 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-2 { width: ( 2 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-3 { width: ( 3 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-4 { width: ( 4 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-5 { width: ( 5 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-6 { width: ( 6 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-7 { width: ( 7 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-8 { width: ( 8 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-9 { width: ( 9 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-10 { width: ( 10 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-11 { width: ( 11 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-12 { width: 100%; }
+  }
+}
+
+// Gutters
+// Apply padding and a negative margin to the outside of the container
+// stylelint-disable primer/spacing
+@mixin gutters ($gutter-width: $spacer-3) {
+  margin-right: -$gutter-width;
+  margin-left: -$gutter-width;
+
+  > [class*='col-'] {
+    padding-right: $gutter-width !important;
+    padding-left: $gutter-width !important;
+  }
+}
+
+.gutter {
+  @include gutters($spacer-3);
+}
+
+.gutter-condensed {
+  @include gutters($spacer-2);
+}
+
+.gutter-spacious {
+  @include gutters($spacer-4);
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .gutter-#{$breakpoint} { @include gutters($spacer-3); }
+    .gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); }
+    .gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); }
+  }
+}

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

@@ -0,0 +1,8 @@
+@import '../support/index.scss';
+@import './app-frame.scss';
+@import './container.scss';
+@import './grid.scss';
+@import './grid-offset.scss';
+@import './layout.scss';
+@import './page-layout.scss';
+@import './stack.scss';

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

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

data/_sass/@primer/css/layout/page-layout.scss

@@ -0,0 +1,413 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable selector-max-specificity
+// stylelint-disable no-duplicate-selectors
+
+$Layout-divider-color: var(--color-border-default) !default;
+$Layout-responsive-variant-max-breakpoint: 'md' !default;
+
+:root {
+  --Layout-pane-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-content-width: 100%;
+  --Layout-template-columns: 1fr var(--Layout-pane-width);
+  --Layout-template-areas: 'content pane';
+  --Layout-column-gap: #{$spacer-3};
+  --Layout-row-gap: #{$spacer-3};
+
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  // stylelint-disable length-zero-no-unit
+  --Layout-outer-spacing-x: 0px; // wrapper margin x
+  --Layout-outer-spacing-y: 0px; // wrapper margin y
+  --Layout-inner-spacing-min: 0px; // default region padding
+  --Layout-inner-spacing-max: 0px; // relaxed content horizontal padding
+  // stylelint-enable length-zero-no-unit
+}
+
+// Layout beta mixins
+
+// responsive region dividers
+
+@mixin Layout-line-divider {
+  position: absolute;
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: 1px;
+  content: '';
+  background-color: $Layout-divider-color;
+}
+
+@mixin Layout-filled-divider {
+  position: absolute;
+  bottom: calc(#{$spacer-2} * -1); // -8px
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: #{$spacer-2}; // 8px
+  content: '';
+  background-color: var(--color-canvas-inset);
+  box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
+}
+
+.PageLayout {
+  display: block;
+  // stylelint-disable-next-line primer/spacing
+  margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x);
+
+  // multi-column desktop-friendly layout
+
+  @include breakpoint($Layout-responsive-variant-max-breakpoint) {
+
+    // Set a `content` region width, to work with loading states when
+    // `pane` is not yet loaded. See https://github.com/primer/css/pull/1818
+    $Layout-content-full-width: minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap)));
+
+    &.PageLayout--panePos-start {
+      --Layout-template-columns: var(--Layout-pane-width) #{$Layout-content-full-width};
+      --Layout-template-areas: 'pane content';
+    }
+
+    &.PageLayout--panePos-end {
+      --Layout-template-columns: #{$Layout-content-full-width} var(--Layout-pane-width);
+      --Layout-template-areas: 'content pane';
+    }
+
+    // header divider
+
+    .PageLayout-header--hasDivider {
+      // stylelint-disable-next-line primer/spacing
+      padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+      // stylelint-disable-next-line primer/borders
+      border-bottom: $border-width solid $Layout-divider-color;
+    }
+
+    // footer divider
+
+    .PageLayout-footer--hasDivider {
+      // stylelint-disable-next-line primer/spacing
+      padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+      // stylelint-disable-next-line primer/borders
+      border-top: $border-width solid $Layout-divider-color;
+    }
+
+    // pane divider
+
+    &.PageLayout--hasPaneDivider {
+      &.PageLayout--panePos-start {
+        .PageLayout-pane {
+          // stylelint-disable-next-line primer/borders
+          border-right: $border-width solid $Layout-divider-color;
+        }
+
+        &:not(.PageLayout--columnGap-none) {
+          .PageLayout-pane {
+            // stylelint-disable-next-line primer/spacing
+            padding-right: calc(var(--Layout-column-gap) - #{$border-width});
+            // stylelint-disable-next-line primer/spacing
+            margin-right: calc(var(--Layout-column-gap) * -1);
+          }
+
+          .PageLayout-content {
+            // stylelint-disable-next-line primer/spacing
+            margin-left: var(--Layout-column-gap);
+          }
+        }
+      }
+
+      &.PageLayout--panePos-end {
+        .PageLayout-pane {
+          // stylelint-disable-next-line primer/borders
+          border-left: $border-width solid $Layout-divider-color;
+        }
+
+        &:not(.PageLayout--columnGap-none) {
+          .PageLayout-pane {
+            // stylelint-disable-next-line primer/spacing
+            padding-left: calc(var(--Layout-column-gap) - #{$border-width});
+            // stylelint-disable-next-line primer/spacing
+            margin-left: calc(var(--Layout-column-gap) * -1);
+          }
+
+          .PageLayout-content {
+            // stylelint-disable-next-line primer/spacing
+            margin-right: var(--Layout-column-gap);
+          }
+        }
+      }
+    }
+
+    // sticky pane
+
+    .PageLayout-pane--sticky {
+      position: sticky;
+      top: 0;
+      max-height: 100vh;
+      overflow: auto;
+      scrollbar-width: thin;
+
+      @supports (max-height: 100dvh) {
+        max-height: 100dvh;
+      }
+    }
+
+    // content width
+
+    [class^='PageLayout-content-centered-'] {
+      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &.PageLayout--hasPaneDivider {
+      [class^='PageLayout-content-centered-'] {
+        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + (var(--Layout-column-gap) * 2));
+      }
+    }
+
+    &.PageLayout--panePos-start {
+      [class^='PageLayout-content-centered-'] > [class^='container-'] {
+        margin-left: 0;
+      }
+    }
+
+    &.PageLayout--panePos-end {
+      [class^='PageLayout-content-centered-'] > [class^='container-'] {
+        margin-right: 0;
+      }
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+      .PageLayout-content-centered-#{$breakpoint} {
+        --Layout-content-width: #{map-get($breakpoints, $breakpoint)};
+      }
+    }
+
+    // pane width
+
+    @each $breakpoint in map-keys($sidebar-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-pane-width: #{map-get($sidebar-width, $breakpoint)};
+      }
+    }
+
+    &.PageLayout--paneWidth-narrow {
+      @each $breakpoint in map-keys($sidebar-narrow-width) {
+        @include breakpoint($breakpoint) {
+          --Layout-pane-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+        }
+      }
+    }
+
+    &.PageLayout--paneWidth-wide {
+      @each $breakpoint in map-keys($sidebar-wide-width) {
+        @include breakpoint($breakpoint) {
+          --Layout-pane-width: #{map-get($sidebar-wide-width, $breakpoint)};
+        }
+      }
+    }
+  }
+
+  // responsive behaviors on narrow viewports
+
+  @media (max-width: #{map-get($breakpoints, $Layout-responsive-variant-max-breakpoint) - 0.02px}) {
+
+    // variant: stackRegions
+
+    &.PageLayout--responsive-stackRegions {
+      --Layout-template-columns: 1fr;
+
+      // responsive-panePos: end (default)
+      --Layout-template-areas: 'content' 'pane';
+
+      // responsive-panePos: start
+      &.PageLayout--responsive-panePos-start {
+        --Layout-template-areas: 'pane' 'content';
+      }
+    }
+
+    // variant: separateRegions
+
+    &.PageLayout--responsive-separateRegions {
+      --Layout-template-columns: 1fr;
+      --Layout-template-areas: 'content';
+
+      &.PageLayout--responsive-primary-content {
+        --Layout-template-areas: 'content';
+
+        .PageLayout-pane {
+          display: none;
+        }
+      }
+
+      &.PageLayout--responsive-primary-pane {
+        --Layout-template-areas: 'pane';
+
+        .PageLayout-content {
+          display: none;
+        }
+      }
+    }
+
+    // region dividers on narrow viewports
+
+    .PageLayout-region--dividerNarrow-line-before {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-top: var(--Layout-row-gap);
+
+      &::before {
+        @include Layout-line-divider;
+
+        top: calc(#{$border-width * -1} - var(--Layout-row-gap));
+      }
+    }
+
+    .PageLayout-region--dividerNarrow-line-after {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-bottom: var(--Layout-row-gap);
+
+      &::after {
+        @include Layout-line-divider;
+
+        bottom: calc(#{$border-width * -1} - var(--Layout-row-gap));
+      }
+    }
+
+    .PageLayout-region--dividerNarrow-filled-before {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
+
+      &::after {
+        @include Layout-filled-divider;
+
+        top: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
+      }
+    }
+
+    .PageLayout-region--dividerNarrow-filled-after {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
+
+      &::before {
+        @include Layout-filled-divider;
+
+        bottom: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
+      }
+    }
+  }
+}
+
+// PageLayout-wrapper bundles header, footer, pane, and content regions
+.PageLayout-wrapper {
+  display: grid;
+  grid: auto-flow / 1fr;
+  row-gap: var(--Layout-row-gap);
+}
+
+// PageLayout-columns wrap pane and content regions
+// If layout has no pane, PageLayout-columns is not present
+.PageLayout-columns {
+  display: grid;
+  column-gap: var(--Layout-column-gap);
+  row-gap: var(--Layout-row-gap);
+  grid-template-columns: var(--Layout-template-columns);
+  grid-template-rows: 1fr;
+  grid-template-areas: var(--Layout-template-areas);
+
+  .PageLayout-content {
+    // stylelint-disable-next-line primer/spacing
+    padding-right: var(--Layout-inner-spacing-max);
+    // stylelint-disable-next-line primer/spacing
+    padding-left: var(--Layout-inner-spacing-max);
+    grid-area: content;
+  }
+
+  .PageLayout-pane {
+    grid-area: pane;
+  }
+}
+
+// outer spacing
+
+.PageLayout--outerSpacing-normal {
+  --Layout-outer-spacing-x: #{$spacer-3};
+  --Layout-outer-spacing-y: #{$spacer-3};
+
+  @include breakpoint(lg) {
+    --Layout-outer-spacing-x: #{$spacer-4};
+    --Layout-outer-spacing-y: #{$spacer-4};
+  }
+}
+
+.PageLayout--outerSpacing-condensed {
+  --Layout-outer-spacing-x: #{$spacer-3};
+  --Layout-outer-spacing-y: #{$spacer-3};
+}
+
+// inner spacing
+
+.PageLayout--innerSpacing-normal {
+  --Layout-inner-spacing-min: #{$spacer-3};
+  --Layout-inner-spacing-max: #{$spacer-3};
+
+  @include breakpoint(lg) {
+    --Layout-inner-spacing-max: #{$spacer-4};
+  }
+}
+
+.PageLayout--innerSpacing-condensed {
+  --Layout-inner-spacing-min: #{$spacer-3};
+  --Layout-inner-spacing-max: #{$spacer-3};
+}
+
+// column gap
+
+.PageLayout--columnGap-normal {
+  --Layout-column-gap: #{$spacer-3};
+
+  @include breakpoint(lg) {
+    --Layout-column-gap: #{$spacer-4};
+  }
+}
+
+.PageLayout--columnGap-condensed {
+  --Layout-column-gap: #{$spacer-3};
+}
+
+.PageLayout--columnGap-none {
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  // stylelint-disable-next-line length-zero-no-unit
+  --Layout-column-gap: 0px;
+}
+
+// row gap
+
+.PageLayout--rowGap-normal {
+  --Layout-row-gap: #{$spacer-3};
+
+  @include breakpoint(lg) {
+    --Layout-row-gap: #{$spacer-4};
+  }
+}
+
+.PageLayout--rowGap-none {
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  // stylelint-disable length-zero-no-unit
+  --Layout-row-gap: 0px;
+}
+
+.PageLayout--rowGap-condensed {
+  --Layout-row-gap: #{$spacer-3};
+}
+
+// regions
+
+.PageLayout-header,
+.PageLayout-content,
+.PageLayout-pane,
+.PageLayout-footer {
+  // stylelint-disable-next-line primer/spacing
+  padding: var(--Layout-inner-spacing-min);
+}