jekyll-v4-theme-primer 0.11.0 → 0.12.0

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

@@ -1,593 +0,0 @@
-// 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

@@ -1,118 +0,0 @@
-// 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

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