jekyll-v4-theme-primer 0.9.0

data/_sass/@primer/css/actionlist/action-list.scss

@@ -0,0 +1,67 @@
+// <ul>
+.ActionList {
+  padding: $spacer-2;
+}
+
+// full bleed
+.ActionList--full {
+  padding: 0;
+}
+
+// nested list within main ActionList
+.ActionList--subGroup {
+  padding: 0;
+}
+
+// dividers
+
+.ActionList--divided {
+  .ActionList-item-label::before {
+    position: absolute;
+    top: -$actionList-item-padding-vertical;
+    display: block;
+    width: 100%;
+    height: 1px;
+    content: '';
+    background: var(--color-action-list-item-inline-divider);
+  }
+
+  // if descriptionWrap--inline exists, move pseudo divider to wrapper
+  .ActionList-item-descriptionWrap--inline {
+    &::before {
+      position: absolute;
+      top: -$actionList-item-padding-vertical;
+      display: block;
+      width: 100%;
+      height: $border-width;
+      content: '';
+      background: var(--color-action-list-item-inline-divider);
+    }
+
+    // unset the default label pseudo
+    .ActionList-item-label::before {
+      content: unset;
+    }
+  }
+
+  // hide divider if item is active
+  .ActionList-item--navActive {
+    // stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
+    .ActionList-item-label::before,
+    + .ActionList-item .ActionList-item-label::before {
+      visibility: hidden;
+    }
+  }
+}
+
+// hide if item is first of type with label::before, or is the first item after a sectionDivider
+.ActionList-item:first-of-type .ActionList-item-label::before,
+.ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before {
+  visibility: hidden;
+}
+
+// hide if item is first of type with label::before, or is the first item after a sectionDivider
+.ActionList-item:first-of-type .ActionList-item-descriptionWrap--inline::before,
+.ActionList-sectionDivider + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
+  visibility: hidden;
+}

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

@@ -0,0 +1,6 @@
+@import '../support/index.scss';
+@import './action-list-variables.scss';
+@import './action-list.scss';
+@import './action-list-tree.scss';
+@import './action-list-item.scss';
+@import './action-list-item-divider.scss';

data/_sass/@primer/css/alerts/flash.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/flash';

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

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

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

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

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

@@ -0,0 +1,4 @@
+// support files
+@import '../support/index.scss';
+@import './autocomplete.scss';
+@import './suggester.scss';

data/_sass/@primer/css/autocomplete/suggester.scss

@@ -0,0 +1,92 @@
+// Needs refactoring
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+.suggester {
+  position: relative;
+  top: 0;
+  left: 0;
+  min-width: 180px;
+  padding: 0;
+  margin: 0;
+  margin-top: $spacer-4;
+  list-style: none;
+  cursor: pointer;
+  background: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
+  box-shadow: var(--color-shadow-medium);
+
+  li {
+    display: block;
+    padding: $spacer-1 $spacer-2;
+    font-weight: $font-weight-semibold;
+    border-bottom: $border-width $border-style var(--color-border-muted);
+
+    small {
+      font-weight: $font-weight-normal;
+      color: var(--color-fg-muted);
+    }
+
+    &:last-child {
+      border-bottom: 0;
+      border-bottom-right-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+
+    &:hover {
+      color: var(--color-fg-on-emphasis);
+      text-decoration: none;
+      background: var(--color-accent-emphasis);
+
+      small {
+        color: var(--color-fg-on-emphasis);
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+
+    &[aria-selected='true'],
+    &.navigation-focus {
+      color: var(--color-fg-on-emphasis);
+      text-decoration: none;
+      background: var(--color-accent-emphasis);
+
+      small {
+        color: var(--color-fg-on-emphasis);
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+  }
+}
+
+.suggester-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+}
+
+// Responsive
+
+.page-responsive {
+  @media (max-width: $width-sm) {
+    .suggester-container {
+      right: $spacer-2 !important;
+      left: $spacer-2 !important;
+    }
+
+    .suggester li {
+      padding: $spacer-2 $spacer-3;
+    }
+  }
+}

data/_sass/@primer/css/avatars/avatar-parent-child.scss

@@ -0,0 +1,17 @@
+// .avatar-parent-child is when you see a small avatar at the bottom right
+// corner of a larger avatar.
+//
+// No Styleguide version
+.avatar-parent-child {
+  position: relative;
+}
+
+.avatar-child {
+  position: absolute;
+  right: -15%;
+  bottom: -9%;
+  background-color: var(--color-canvas-default); // For transparent backgrounds
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius-1;
+  box-shadow: var(--color-avatar-child-shadow);
+}

data/_sass/@primer/css/avatars/avatar-stack.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/avatar_stack';

data/_sass/@primer/css/avatars/avatar.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/avatar';

data/_sass/@primer/css/avatars/circle-badge.scss

@@ -0,0 +1,55 @@
+// Circle badge icon with drop shadow for icons and logos
+
+.CircleBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-canvas-default);
+  border-radius: 50%;
+  box-shadow: var(--color-shadow-medium);
+}
+
+.CircleBadge-icon {
+  max-width: 60% !important;
+  height: auto !important;
+  max-height: 55% !important;
+}
+
+// Small badge
+.CircleBadge--small {
+  width: 56px;
+  height: 56px;
+}
+
+// Medium badge
+.CircleBadge--medium {
+  width: 96px;
+  height: 96px;
+}
+
+// Large badge
+.CircleBadge--large {
+  width: 128px;
+  height: 128px;
+}
+
+// Dashed line that connects badges..
+// Wrap around 2 or more badges to create a horizonal line:
+
+.DashedConnection {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border-bottom: 2px dashed var(--color-border-default);
+  }
+
+  .CircleBadge {
+    position: relative;
+  }
+}

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

@@ -0,0 +1,7 @@
+@import '../support/index.scss';
+
+// Avatars
+@import './avatar.scss';
+@import './avatar-parent-child.scss';
+@import './avatar-stack.scss';
+@import './circle-badge.scss';

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

@@ -0,0 +1,160 @@
+// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography
+* {
+  box-sizing: border-box;
+}
+
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+body {
+  font-family: $body-font;
+  font-size: var(--body-font-size, $body-font-size);
+  line-height: $body-line-height;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+}
+
+a {
+  color: var(--color-accent-fg);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+b,
+strong {
+  font-weight: $font-weight-bold;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+label {
+  font-weight: $font-weight-bold;
+}
+
+// Custom styling for HTML5 validation bubbles (WebKit only)
+::placeholder {
+  color: var(--color-fg-subtle);
+  opacity: 1; // override opacity in normalize.css
+}
+
+// Horizontal lines
+//
+// TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s
+hr,
+.rule {
+  height: 0;
+  // stylelint-disable-next-line primer/spacing
+  margin: 15px 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  @include clearfix();
+}
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+button {
+  cursor: pointer;
+  // Remove border radius added by Chrome macOS
+  border-radius: 0;
+}
+
+// increase the selector specificity for [hidden]
+// so that it always overrides utility classes (.d-block, etc.)
+[hidden][hidden] {
+  display: none !important;
+}
+
+details {
+  summary {
+    cursor: pointer;
+  }
+
+  &:not([open]) {
+    // Set details content hidden by default for browsers that don't do this
+    > *:not(summary) {
+      display: none !important;
+    }
+  }
+}
+
+// global focus styles
+
+a,
+button,
+[role='button'],
+input[type='radio'],
+input[type='checkbox'] {
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline;
+  }
+}
+
+a:not([class]),
+input[type='radio'],
+input[type='checkbox'] {
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+// for handling focus conditionally
+.focus {
+  @include focusBoxShadowInset;
+}
+
+// Windows High Contrast mode
+@media (forced-colors: active) {
+  *:focus,
+  *:focus-visible {
+    outline: solid 1px transparent;
+  }
+
+  input:not([type='radio'], [type='checkbox']),
+  textarea,
+  select {
+    &:focus,
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+@import '../support/index.scss';
+@import './normalize.scss';
+@import './base.scss';
+@import './kbd.scss';
+@import './typography-base.scss';
+@import './octicons.scss';

data/_sass/@primer/css/base/kbd.scss

@@ -0,0 +1,19 @@
+// Keyboard shortcuts
+// stylelint-disable selector-max-type
+
+kbd {
+  display: inline-block;
+  padding: ($spacer-1 - 1) ($spacer-1 + 1);
+  font: 11px $mono-font;
+  // stylelint-disable-next-line primer/typography
+  line-height: 10px;
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  background-color: var(--color-canvas-subtle);
+  // stylelint-disable-next-line primer/borders
+  border: $border-style $border-width var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
+  border-radius: $border-radius;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+}