@primer/css 0.0.0-20220120020705 → 0.0.0-2022020193741

package/actionlist/action-list-tree.scss

@@ -1,92 +0,0 @@
-// 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 {
-    // nesting (infinate 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"
-        // stylelint-disable-next-line selector-max-specificity, max-nesting-depth, selector-max-compound-selectors
-        .ActionList-content {
-          // stylelint-disable-next-line primer/spacing
-          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);
-      }
-    }
-
-    &[aria-expanded='false'] {
-      .ActionList-item-collapseIcon {
-        transition: transform 120ms linear;
-        transform: rotate(-90deg);
-      }
-    }
-  }
-
-  // expand/collapse group
-  .ActionList-item--hasSubItem {
-    .ActionList-item--subItem:not(.ActionList-item--hasSubItem) {
-      // stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
-      .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
-        // stylelint-disable-next-line selector-max-specificity, selector-max-type, max-nesting-depth, selector-max-compound-selectors
-        > span:first-child {
-          padding-left: $spacer-4;
-        }
-      }
-    }
-  }
-
-  // first subitem
-  > [aria-level='1'].ActionList-item--hasSubItem {
-    > .ActionList--subGroup {
-      // stylelint-disable-next-line selector-max-specificity
-      &::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 {
-      // stylelint-disable-next-line selector-max-specificity
-      &::before {
-        @include treeConnectingLine(
-          $left: calc(#{$spacer-2} * (var(--ActionList-tree-depth)) + #{$spacer-2 - $border-width})
-        );
-      }
-    }
-  }
-}

package/dist/marketing-links.css

@@ -1,2 +0,0 @@
-.link-mktg{position:relative;display:inline-block}.link-mktg:hover{text-decoration:none}.link-mktg:active{outline:none}.link-mktg::after,.link-mktg.link-emphasis-mktg::before{position:absolute;bottom:-0.15em;left:0;width:calc(100% - 1em);height:2px;pointer-events:none;content:"";background-color:currentColor;transform:scaleX(0);transform-origin:0 0}@media screen and (prefers-reduced-motion: no-preference){.link-mktg::after,.link-mktg.link-emphasis-mktg::before{transition:transform .3s ease}}.link-mktg.link-emphasis-mktg::before{opacity:.2;transform:scaleX(1)}.link-mktg:hover::after,.link-mktg:focus::after,.link-mktg:active::after{transform:scaleX(1)}.link-mktg.arrow-target-mktg .arrow-symbol-mktg{margin-left:-0.25em}
-/*# sourceMappingURL=marketing-links.css.map */

package/dist/marketing-links.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["file:///home/runner/work/css/css/src/marketing/links/index.scss%23sass"],"names":[],"mappings":"AAonBA,WAAA,iBACE,CAAA,oBAAA,CAAA,iBAAA,oBAAA,CAAA,kBAAA,YAAA,CAAA,wDAAA,iBAAA,CAAA,cAAA,CAAA,MAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,6BAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,0DAAA,wDAAA,6BAAA,CAAA,CAAA,sCAAA,UAAA,CAAA,mBAAA,CAAA,yEAAA,mBAAA,CAAA,gDAAA,mBAAA","file":"marketing-links.css"}

package/dist/marketing-links.js

@@ -1 +0,0 @@
-export {cssstats: require('./stats/marketing-links.json')}

package/dist/stats/marketing-links.json

@@ -1 +0,0 @@
-{"size":726,"gzipSize":358,"humanizedSize":"726B","humanizedGzipSize":"358B","rules":{"total":8,"size":{"graph":[2,1,1,10,1,2,1,1],"max":10,"average":2.375},"selectorByRuleSizes":[{"selector":".link-mktg::after,.link-mktg.link-emphasis-mktg::before","declarations":10},{"selector":".link-mktg.link-emphasis-mktg::before","declarations":2},{"selector":".link-mktg","declarations":2},{"selector":".link-mktg.arrow-target-mktg .arrow-symbol-mktg","declarations":1},{"selector":".link-mktg:hover::after,.link-mktg:focus::after,.link-mktg:active::after","declarations":1},{"selector":".link-mktg::after,.link-mktg.link-emphasis-mktg::before","declarations":1},{"selector":".link-mktg:active","declarations":1},{"selector":".link-mktg:hover","declarations":1}]},"selectors":{"total":12,"type":0,"class":12,"id":0,"pseudoClass":5,"pseudoElement":8,"values":[".link-mktg",".link-mktg:hover",".link-mktg:active",".link-mktg::after",".link-mktg.link-emphasis-mktg::before",".link-mktg::after",".link-mktg.link-emphasis-mktg::before",".link-mktg.link-emphasis-mktg::before",".link-mktg:hover::after",".link-mktg:focus::after",".link-mktg:active::after",".link-mktg.arrow-target-mktg .arrow-symbol-mktg"],"specificity":{"max":30,"average":19}},"declarations":{"total":19,"unique":18,"uniqueToTotalRatio":0.9473684210526315,"properties":{"position":["relative","absolute"],"display":["inline-block"],"text-decoration":["none"],"outline":["none"],"bottom":["-0.15em"],"left":["0"],"width":["calc(100% - 1em)"],"height":["2px"],"pointer-events":["none"],"content":["\"\""],"background-color":["currentColor"],"transform":["scaleX(0)","scaleX(1)","scaleX(1)"],"transform-origin":["0 0"],"transition":["transform .3s ease"],"opacity":[".2"],"margin-left":["-0.25em"]}},"mediaQueries":{"total":1,"unique":1,"values":["screen and (prefers-reduced-motion: no-preference)"],"contents":[{"value":"screen and (prefers-reduced-motion: no-preference)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".link-mktg::after,.link-mktg.link-emphasis-mktg::before","declarations":1}]},"selectors":{"total":2,"type":0,"class":2,"id":0,"pseudoClass":0,"pseudoElement":2,"values":[".link-mktg::after",".link-mktg.link-emphasis-mktg::before"],"specificity":{"max":21,"average":16}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"transition":["transform .3s ease"]}}}]}}

package/layout/page-layout.scss

@@ -1,380 +0,0 @@
-// 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
-}
-
-.PageLayout {
-  // 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--isPaneSticky {
-      .PageLayout-pane {
-        position: sticky;
-        top: 0;
-        max-height: 100vh;
-        overflow: auto;
-      }
-    }
-
-    // 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 {
-  display: grid;
-  grid: auto-flow / 1fr;
-  row-gap: var(--Layout-row-gap);
-}
-
-.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);
-}
-
-// 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);
-}
-
-.PageLayout-content {
-  // stylelint-disable primer/spacing
-  padding-right: var(--Layout-inner-spacing-max);
-  padding-left: var(--Layout-inner-spacing-max);
-  // stylelint-enable primer/spacing
-  grid-area: content;
-}
-
-.PageLayout-pane {
-  grid-area: pane;
-}

package/marketing/links/index.scss

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

package/marketing/links/link.scss

@@ -1,50 +0,0 @@
-.link-mktg {
-  position: relative;
-  display: inline-block;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:active {
-    outline: none;
-  }
-
-  &::after,
-  &.link-emphasis-mktg::before {
-    position: absolute;
-    bottom: -0.15em;
-    left: 0;
-    width: calc(100% - 1em);
-    height: 2px;
-    pointer-events: none;
-    content: '';
-    // stylelint-disable-next-line primer/colors
-    background-color: currentColor;
-    transform: scaleX(0);
-    transform-origin: 0 0;
-
-    @media screen and (prefers-reduced-motion: no-preference) {
-      transition: transform 0.3s ease;
-    }
-  }
-
-  &.link-emphasis-mktg::before {
-    opacity: 0.2;
-    transform: scaleX(1);
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    &::after {
-      transform: scaleX(1);
-    }
-  }
-
-  &.arrow-target-mktg {
-    .arrow-symbol-mktg {
-      margin-left: -$em-spacer-3;
-    }
-  }
-}