jekyll-v4-theme-primer 0.9.0

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

@@ -0,0 +1,593 @@
+// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
+
+@mixin activeIndicatorLine($padding-left: -$actionList-item-padding-horizontal) {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: $padding-left;
+  width: $spacer-1;
+  height: $spacer-4;
+  content: '';
+  background: var(--color-accent-fg);
+  border-radius: $border-radius;
+}
+
+// <li>
+.ActionList-item {
+  position: relative;
+  list-style: none;
+  background-color: transparent;
+  border-radius: $border-radius;
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+  }
+
+  // only hover li without list as children
+  &:not(.ActionList-item--hasSubItem),
+  // target contents of first child li if sub-item (li wraps item label + nested ul)
+  &.ActionList-item--hasSubItem > .ActionList-content {
+    @media (hover: hover) {
+      &:hover {
+        cursor: pointer;
+        background-color: var(--color-action-list-item-default-hover-bg);
+
+        &:not(.ActionList-item--navActive):not(:focus-visible) {
+          // Support for "Windows high contrast mode"
+          outline: $border-style $border-width transparent;
+          outline-offset: -$border-width;
+          // stylelint-disable-next-line primer/box-shadow
+          box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
+        }
+      }
+    }
+
+    &:active {
+      background: var(--color-action-list-item-default-active-bg);
+
+      &:not(.ActionList-item--navActive) {
+        // Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
+        outline: $border-style $border-width transparent;
+        outline-offset: -$border-width;
+        // stylelint-disable-next-line primer/box-shadow
+        box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
+      }
+    }
+
+    // hide dividers
+
+    @media (hover: hover) {
+      &:hover {
+        .ActionList-item-label::before,
+        + .ActionList-item .ActionList-item-label::before {
+          visibility: hidden;
+        }
+
+        .ActionList-item-descriptionWrap--inline::before,
+        + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
+          visibility: hidden;
+        }
+      }
+    }
+    // stylelint-disable-next-line no-duplicate-selectors
+    &:active {
+      .ActionList-item-label::before,
+      + .ActionList-item .ActionList-item-label::before {
+        visibility: hidden;
+      }
+    }
+  }
+
+  // target contents of li if sub-item (li wraps item label + nested ul)
+  // collapse styles here
+  &.ActionList-item--hasSubItem {
+    // first child
+    > .ActionList-content {
+      z-index: 1;
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--color-action-list-item-default-hover-bg);
+        }
+      }
+
+      &:active {
+        background-color: var(--color-action-list-item-default-active-bg);
+      }
+    }
+  }
+
+  // Make sure that the first visible item isn't a divider
+  &[hidden] + .ActionList-sectionDivider {
+    display: none;
+  }
+
+  // Autocomplete [aria-selected] items
+
+  &[aria-selected='true'] {
+    font-weight: $font-weight-normal;
+    background: var(--color-action-list-item-default-selected-bg);
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+
+    &::before,
+    + .ActionList-item::before {
+      visibility: hidden;
+    }
+
+    // blue accent line
+    &::after {
+      @include activeIndicatorLine(-$spacer-1);
+    }
+  }
+
+  // active state [aria-current]
+
+  &.ActionList-item--navActive {
+    &:not(.ActionList-item--subItem) {
+      .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
+    }
+
+    &:not(.ActionList-item--danger) {
+      background: var(--color-action-list-item-default-selected-bg);
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--color-action-list-item-default-hover-bg);
+        }
+      }
+
+      &::before,
+      + .ActionList-item::before {
+        visibility: hidden;
+      }
+
+      // blue accent line
+      &::after {
+        @include activeIndicatorLine;
+      }
+    }
+  }
+
+  // checkbox item [aria-checked]
+  // listbox [aria-selected]
+
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
+    // multiselect checkmark
+    .ActionList-item-multiSelectCheckmark {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
+    }
+
+    // singleselect checkmark
+    .ActionList-item-singleSelectCheckmark {
+      visibility: visible;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+      }
+    }
+
+    // checkbox
+    .ActionList-item-multiSelectIcon {
+      .ActionList-item-multiSelectIconRect {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+        stroke-width: $border-width;
+      }
+
+      .ActionList-item-multiSelectCheckmark {
+        fill: var(--color-fg-on-emphasis);
+      }
+    }
+  }
+
+  &[aria-checked='false'],
+  &[aria-selected='false'] {
+    // multiselect checkmark
+    .ActionList-item-multiSelectCheckmark {
+      visibility: hidden;
+      opacity: 0;
+      transition:
+        visibility 0 linear $actionList-item-checkmark-transition-timing,
+        opacity $actionList-item-checkmark-transition-timing;
+    }
+
+    // singleselect checkmark
+    .ActionList-item-singleSelectCheckmark {
+      visibility: hidden;
+      transition: visibility 0s linear 200ms;
+      clip-path: inset(16px 0 0 0);
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+      }
+    }
+
+    // checkbox
+    .ActionList-item-multiSelectIcon {
+      .ActionList-item-multiSelectIconRect {
+        fill: var(--color-canvas-default);
+        stroke: var(--color-border-default);
+        stroke-width: $border-width;
+      }
+    }
+
+    .ActionList-item-multiSelectIconRect {
+      fill: var(--color-canvas-default);
+      border: $border-width $border-style var(--color-border-default);
+    }
+  }
+
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(16px 0 0 0);
+    }
+  }
+
+  // disabled
+  &[aria-disabled='true'] {
+    .ActionList-content {
+      .ActionList-item-label,
+      .ActionList-item-description {
+        color: var(--color-primer-fg-disabled);
+      }
+
+      .ActionList-item-visual {
+        fill: var(--color-primer-fg-disabled);
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+  }
+
+  // variants
+
+  // danger
+  &.ActionList-item--danger {
+    .ActionList-item-label {
+      color: var(--color-danger-fg);
+    }
+
+    .ActionList-item-visual {
+      color: var(--color-danger-fg);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background: var(--color-action-list-item-danger-hover-bg);
+
+        .ActionList-item-label {
+          color: var(--color-action-list-item-danger-hover-text);
+        }
+      }
+    }
+
+    .ActionList-content {
+      &:active {
+        background: var(--color-action-list-item-danger-active-bg);
+      }
+    }
+  }
+
+  // if nested list exists, remove default padding
+  .ActionList {
+    // stylelint-disable-next-line primer/spacing
+    padding: unset;
+  }
+}
+
+// button or a href
+.ActionList-content {
+  position: relative;
+  display: grid;
+  width: 100%;
+  // stylelint-disable-next-line primer/spacing
+  padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
+  font-size: $body-font-size;
+  font-weight: $font-weight-normal;
+  color: var(--color-fg-default);
+  text-align: left;
+  user-select: none;
+  background-color: transparent;
+  // stylelint-disable-next-line declaration-property-value-disallowed-list
+  border: none;
+  border-radius: $border-radius;
+  transition: $actionList-item-bg-transition;
+  touch-action: manipulation;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  grid-template-rows: min-content;
+  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
+  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
+  align-items: start;
+
+  // column-gap persists with empty grid-areas, margin applies only when children exist
+  > :not(:last-child) {
+    margin-right: $spacer-2;
+  }
+
+  // state
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &: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;
+  }
+
+  // disabled
+  &[aria-disabled='true'] {
+    .ActionList-item-label,
+    .ActionList-item-description {
+      color: var(--color-primer-fg-disabled);
+    }
+
+    .ActionList-item-visual {
+      fill: var(--color-primer-fg-disabled);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+  }
+
+  // collapsible item [aria-expanded]
+
+  // nesting (single level)
+  // target items inside expanded subgroups
+  &[aria-expanded] {
+    + .ActionList--subGroup {
+      @media screen and (prefers-reduced-motion: no-preference) {
+        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
+      }
+
+      .ActionList-content {
+        padding-left: $spacer-4;
+      }
+    }
+
+    // has 16px leading visual
+    &.ActionList-content--visual16 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-5;
+      }
+    }
+
+    // has 20px leading visual
+    &.ActionList-content--visual20 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-2 * 4.5; // 36px
+      }
+    }
+
+    // has 24px leading visual
+    &.ActionList-content--visual24 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-6;
+      }
+    }
+  }
+
+  &[aria-expanded='true'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(-1);
+    }
+
+    + .ActionList--subGroup {
+      height: auto;
+      overflow: visible;
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &.ActionList-content--hasActiveSubItem {
+      > .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+
+  &[aria-expanded='false'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(1);
+    }
+
+    + .ActionList--subGroup {
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-$spacer-3);
+    }
+
+    // show active indicator on parent collapse if child is active
+    &.ActionList-content--hasActiveSubItem {
+      background: var(--color-action-list-item-default-selected-bg);
+
+      .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
+
+      &::before,
+      + .ActionList-item::before {
+        visibility: hidden;
+      }
+
+      // blue accent line
+      &::after {
+        @include activeIndicatorLine;
+      }
+    }
+  }
+
+  // sizes
+
+  &.ActionList-content--sizeMedium {
+    // 44px total height
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
+  }
+
+  &.ActionList-content--sizeLarge {
+    // 48px total height
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
+  }
+
+  &.ActionList-content--fontSmall {
+    font-size: $font-size-small;
+  }
+
+  // On pointer:coarse (mobile), all list items are large
+  @media (pointer: coarse) {
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
+  }
+
+  &.ActionList-content--blockDescription {
+    // if leading/trailing visual, align with first line of content
+    .ActionList-item-visual {
+      place-self: start;
+    }
+  }
+}
+
+// place children on grid
+
+.ActionList-item-action--leading {
+  grid-area: leadingAction;
+}
+
+.ActionList-item-visual--leading {
+  grid-area: leadingVisual;
+}
+
+.ActionList-item-label {
+  grid-area: label;
+}
+
+.ActionList-item-visual--trailing {
+  grid-area: trailingVisual;
+}
+
+.ActionList-item-action--trailing {
+  grid-area: trailingAction;
+}
+
+// wrapper span
+// default block
+.ActionList-item-descriptionWrap {
+  grid-area: label;
+  display: flex;
+  flex-direction: column;
+
+  .ActionList-item-description {
+    margin-top: $spacer-1;
+  }
+
+  .ActionList-item-label {
+    font-weight: $font-weight-bold;
+  }
+}
+
+// inline
+.ActionList-item-descriptionWrap--inline {
+  position: relative;
+  flex-direction: row;
+  align-items: baseline;
+
+  .ActionList-item-description {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: $actionList-item-padding-horizontal;
+  }
+}
+
+// description
+.ActionList-item-description {
+  font-size: $font-size-small;
+  font-weight: $font-weight-normal;
+  line-height: $lh-default;
+  color: var(--color-fg-muted);
+}
+
+// helper for grid alignment with multi-line content
+// span wrapping svg or text
+.ActionList-item-visual,
+.ActionList-item-action {
+  display: flex;
+  min-height: $actionList-item-height-sm;
+  color: var(--color-fg-muted); // if visual is text
+  pointer-events: none;
+  fill: var(--color-fg-muted);
+  align-items: center;
+}
+
+// text
+// stylelint-disable-next-line no-duplicate-selectors
+.ActionList-item-label {
+  position: relative; // for pseudo dividers
+  font-weight: $font-weight-normal;
+  // we need a strict value here for grid alignment
+  // stylelint-disable-next-line primer/typography
+  line-height: $actionList-item-label-line-height;
+  color: var(--color-fg-default);
+}
+
+.ActionList-item-label--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// nested lists (only supports 1 level currently)
+// target ActionList-item--subItem for padding-left to maintain :active :after state
+
+// TODO: remove with PVC implementation
+.ActionList-item--subItem > .ActionList-content {
+  font-size: $font-size-small;
+}

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

@@ -0,0 +1,118 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, selector-max-type, primer/spacing
+// tree-view variant
+// renders ActionList with default styling for tree-view
+// collapse/expand icons presents as leadingActions, rotate 90deg
+// connecting vertical lines between collapse groups
+// consistent font-size between nested groups
+
+@mixin treeConnectingLine($left) {
+  position: absolute;
+  left: $left;
+  width: 1px;
+  height: 100%;
+  content: '';
+  background: var(--color-action-list-item-inline-divider);
+}
+
+.ActionList--tree {
+  --ActionList-tree-depth: 1;
+  // TODO: remove with PVC implementation
+  .ActionList-item--subItem > .ActionList-content {
+    font-size: $body-font-size;
+  }
+
+  .ActionList-item {
+    // class for single tree items not within a group
+    &.ActionList-item--singleton {
+      .ActionList-content {
+        padding-left: $spacer-5;
+      }
+    }
+
+    // normal font-weight for any active item
+    &.ActionList-item--navActive {
+      &:not(.ActionList-item--subItem) {
+        .ActionList-item-label {
+          font-weight: $font-weight-normal;
+        }
+      }
+    }
+  }
+
+  .ActionList-content {
+    // nesting (infinite levels)
+    // target items inside expanded subgroup
+    &[aria-expanded] {
+      + .ActionList--subGroup {
+        position: relative;
+
+        // --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
+        .ActionList-content {
+          padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
+        }
+      }
+    }
+
+    // tree-view specific collapse icon positioning/animation
+    &[aria-expanded='true'] {
+      .ActionList-item-collapseIcon {
+        transition: transform 120ms linear;
+        transform: rotate(0deg);
+      }
+
+      // normal weight for parent folder containing active child
+      &.ActionList-content--hasActiveSubItem {
+        > .ActionList-item-label {
+          font-weight: $font-weight-normal;
+        }
+      }
+    }
+
+    &[aria-expanded='false'] {
+      .ActionList-item-collapseIcon {
+        transition: transform 120ms linear;
+        transform: rotate(-90deg);
+      }
+
+      &.ActionList-content--hasActiveSubItem {
+        > .ActionList-item-label {
+          font-weight: $font-weight-normal;
+        }
+      }
+    }
+  }
+
+  // expand/collapse group
+  .ActionList-item--hasSubItem {
+    .ActionList-item--subItem:not(.ActionList-item--hasSubItem) {
+      .ActionList-content {
+        // increase child padding by targeting content first child span (add to ActionList-content padding, not replace)
+        // creates a slight indent of child items
+        > span:first-child {
+          padding-left: $spacer-4;
+        }
+      }
+    }
+  }
+
+  // first subitem
+  > [aria-level='1'].ActionList-item--hasSubItem {
+    > .ActionList--subGroup {
+      &::before {
+        @include treeConnectingLine($left: $spacer-3);
+      }
+    }
+  }
+
+  // all other subitems
+  // center connecting line with parent (line is 1px (8px - 1px)
+  .ActionList-item--hasSubItem:not([aria-level='1']) {
+    > .ActionList--subGroup {
+      &::before {
+        @include treeConnectingLine(
+          $left: calc(#{$spacer-2} * (var(--ActionList-tree-depth)) + #{$spacer-2 - $border-width})
+        );
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+$actionList-item-height-sm: $spacer-2 * 2.5 !default;
+$actionList-item-label-line-height: $spacer-2 * 2.5 !default;
+$actionList-item-padding-vertical-md: $spacer-2 * 1.25 !default;
+$actionList-item-padding-vertical-lg: $spacer-2 * 1.75 !default;
+$actionList-item-padding-vertical: $spacer-1 * 1.5 !default;
+$actionList-item-padding-horizontal: $spacer-2 !default;
+$actionList-item-bg-transition: background 33.333ms linear !default; // 2 frames on a 60hz monitor
+$actionList-item-checkmark-transition-timing: 50ms !default;