@papillonarts/css 0.5.0 → 0.7.0

package/build/primer/layout/page-layout.scss

@@ -0,0 +1,417 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable selector-max-specificity
+// stylelint-disable no-duplicate-selectors
+
+$Layout-divider-color: var(--borderColor-default, 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: var(--base-size-16);
+  --Layout-row-gap: var(--base-size-16);
+
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  --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
+}
+
+// Layout beta mixins
+
+// responsive region dividers
+
+@mixin Layout-line-divider {
+  position: absolute;
+  // stylelint-disable-next-line primer/spacing
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: 1px;
+  content: '';
+  // stylelint-disable-next-line primer/colors
+  background-color: $Layout-divider-color;
+}
+
+@mixin Layout-filled-divider {
+  position: absolute;
+  bottom: calc(var(--base-size-8) * -1);
+  // stylelint-disable-next-line primer/spacing
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: var(--base-size-8);
+  content: '';
+  background-color: var(--bgColor-inset, var(--color-canvas-inset));
+  // stylelint-disable-next-line primer/box-shadow
+  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, primer/colors
+      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, primer/colors
+      border-top: $border-width solid $Layout-divider-color;
+    }
+
+    // pane divider
+
+    &.PageLayout--hasPaneDivider {
+      &.PageLayout--panePos-start {
+        .PageLayout-pane {
+          // stylelint-disable-next-line primer/borders, primer/colors
+          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, primer/colors
+          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;
+
+        // stylelint-disable-next-line primer/spacing
+        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;
+
+        // stylelint-disable-next-line primer/spacing
+        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(var(--base-size-8) + var(--Layout-row-gap));
+
+      &::after {
+        @include Layout-filled-divider;
+
+        // stylelint-disable-next-line primer/spacing
+        top: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
+      }
+    }
+
+    .PageLayout-region--dividerNarrow-filled-after {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-bottom: calc(var(--base-size-8) + var(--Layout-row-gap));
+
+      &::before {
+        @include Layout-filled-divider;
+
+        // stylelint-disable-next-line primer/spacing
+        bottom: calc(calc(var(--base-size-8) * -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: var(--base-size-16);
+  --Layout-outer-spacing-y: var(--base-size-16);
+
+  @include breakpoint(lg) {
+    --Layout-outer-spacing-x: var(--base-size-24);
+    --Layout-outer-spacing-y: var(--base-size-24);
+  }
+}
+
+.PageLayout--outerSpacing-condensed {
+  --Layout-outer-spacing-x: var(--base-size-16);
+  --Layout-outer-spacing-y: var(--base-size-16);
+}
+
+// inner spacing
+
+.PageLayout--innerSpacing-normal {
+  --Layout-inner-spacing-min: var(--base-size-16);
+  --Layout-inner-spacing-max: var(--base-size-16);
+
+  @include breakpoint(lg) {
+    --Layout-inner-spacing-max: var(--base-size-24);
+  }
+}
+
+.PageLayout--innerSpacing-condensed {
+  --Layout-inner-spacing-min: var(--base-size-16);
+  --Layout-inner-spacing-max: var(--base-size-16);
+}
+
+// column gap
+
+.PageLayout--columnGap-normal {
+  --Layout-column-gap: var(--base-size-16);
+
+  @include breakpoint(lg) {
+    --Layout-column-gap: var(--base-size-24);
+  }
+}
+
+.PageLayout--columnGap-condensed {
+  --Layout-column-gap: var(--base-size-16);
+}
+
+.PageLayout--columnGap-none {
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  --Layout-column-gap: 0px;
+}
+
+// row gap
+
+.PageLayout--rowGap-normal {
+  --Layout-row-gap: var(--base-size-16);
+
+  @include breakpoint(lg) {
+    --Layout-row-gap: var(--base-size-24);
+  }
+}
+
+.PageLayout--rowGap-none {
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  --Layout-row-gap: 0px;
+}
+
+.PageLayout--rowGap-condensed {
+  --Layout-row-gap: var(--base-size-16);
+}
+
+// regions
+
+.PageLayout-header,
+.PageLayout-content,
+.PageLayout-pane,
+.PageLayout-footer {
+  // stylelint-disable-next-line primer/spacing
+  padding: var(--Layout-inner-spacing-min);
+}

package/build/primer/layout/stack.scss

@@ -0,0 +1,220 @@
+// Stack layout helper component
+
+.Stack {
+
+  // A Stack component lays elements horizontally or vertically on the page.
+  //
+  // Stack is a simple abstraction of CSS' Flexbox. Use it to structure elements
+  // that are visually grouped, following the same direction.
+  //
+  // Markup structure
+  // ================
+  //
+  // .Stack
+  // ├─ &.Stack--dir-[ inline | block ]-[ whenNarrow | whenRegular | whenWide ]
+  // ├─ &.Stack--gap-[ none | condensed | normal | spacious ]-[ whenNarrow | whenRegular | whenWide ]
+  // ├─ &.Stack--align-[ start | center | end | baseline ]-[ whenNarrow | whenRegular | whenWide ]
+  // ├─ &.Stack--alignWrap-[ start | center | end | distribute | distributeEvenly ]-[ whenNarrow | whenRegular | whenWide ]
+  // ├─ &.Stack--spread-[ start | center | end | distribute | distributeEvenly ]-[ whenNarrow | whenRegular | whenWide ]
+  // ├─ &.Stack--wrap-[ whenNarrow | whenRegular | whenWide ]
+  // ├─ &.Stack--nowrap-[ whenNarrow | whenRegular | whenWide ]
+  // ├─ &.Stack--showDividers-[ whenNarrow | whenRegular | whenWide ]
+  // │
+  // ├─ .Stack-divider
+  // ├─ .Stack-item
+  // │  ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
+  // │  ├─ &.Stack-item--keepSize-[ whenNarrow | whenRegular | whenWide ]
+
+  $Stack-gap-default: var(--stack-gap-normal, 16px);
+
+  --Stack-gap-whenRegular: #{$Stack-gap-default};
+  --Stack-gap-whenNarrow: #{$Stack-gap-default};
+  --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
+  --Stack-divider-color: var(--borderColor-default, var(--color-border-default));
+
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: var(--Stack-gap-whenRegular);
+
+  @media ($viewport-narrow) {
+    gap: var(--Stack-gap-whenNarrow);
+  }
+
+  @media ($viewport-wide) {
+    gap: var(--Stack-gap-whenWide);
+  }
+}
+
+@mixin Stack--modifiers($viewportRange: '') {
+  // direction
+
+  .Stack--dir-inline#{$viewportRange} {
+    flex-flow: row;
+  }
+
+  .Stack--dir-block#{$viewportRange} {
+    flex-flow: column;
+  }
+
+  // gap
+
+  .Stack--gap-none#{$viewportRange} {
+    --Stack-gap#{$viewportRange}: 0;
+  }
+
+  .Stack--gap-condensed#{$viewportRange} {
+    --Stack-gap#{$viewportRange}: var(--stack-gap-condensed, 8px);
+  }
+
+  .Stack--gap-normal#{$viewportRange} {
+    --Stack-gap#{$viewportRange}: var(--stack-gap-normal, 16px);
+  }
+
+  // There's no .Stack--gap-spacious-whenNarrow
+  // Narrow viewports render `spacious` gap as `normal`
+  @if $viewportRange != '-whenNarrow' {
+    .Stack--gap-spacious#{$viewportRange} {
+      --Stack-gap#{$viewportRange}: var(--stack-gap-spacious, 24px);
+    }
+  }
+
+  // align
+
+  .Stack--align-start#{$viewportRange} {
+    align-items: flex-start;
+  }
+
+  .Stack--align-center#{$viewportRange} {
+    align-items: center;
+  }
+
+  .Stack--align-end#{$viewportRange} {
+    align-items: flex-end;
+  }
+
+  .Stack--align-baseline#{$viewportRange} {
+    align-items: baseline;
+  }
+
+  // alignWrap
+
+  .Stack--alignWrap-start#{$viewportRange} {
+    align-content: flex-start;
+  }
+
+  .Stack--alignWrap-center#{$viewportRange} {
+    align-content: center;
+  }
+
+  .Stack--alignWrap-end#{$viewportRange} {
+    align-content: flex-end;
+  }
+
+  .Stack--alignWrap-distribute#{$viewportRange} {
+    align-content: space-between;
+  }
+
+  .Stack--alignWrap-distributeEvenly#{$viewportRange} {
+    align-content: space-evenly;
+  }
+
+  // spread
+
+  .Stack--spread-start#{$viewportRange} {
+    justify-content: flex-start;
+  }
+
+  .Stack--spread-center#{$viewportRange} {
+    justify-content: center;
+  }
+
+  .Stack--spread-end#{$viewportRange} {
+    justify-content: flex-end;
+  }
+
+  .Stack--spread-distribute#{$viewportRange} {
+    justify-content: space-between;
+  }
+
+  .Stack--spread-distributeEvenly#{$viewportRange} {
+    justify-content: space-evenly;
+  }
+
+  // wrap
+
+  .Stack--wrap#{$viewportRange} {
+    flex-wrap: wrap;
+  }
+
+  .Stack--nowrap#{$viewportRange} {
+    flex-wrap: nowrap;
+  }
+
+  // showDividers
+
+  .Stack--showDividers#{$viewportRange} > .Stack-divider,
+  .Stack--showDividers#{$viewportRange} > .Stack-item > .Stack-divider {
+    display: block;
+  }
+
+  :not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
+  :not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
+    border-block-end: var(--borderWidth-thin, var(--borderWidth-thin)) solid var(--Stack-divider-color);
+    inline-size: auto;
+    block-size: 0;
+  }
+
+  .Stack--dir-inline#{$viewportRange} > .Stack-divider,
+  .Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
+    border-inline-end: var(--borderWidth-thin, var(--borderWidth-thin)) solid var(--Stack-divider-color);
+    inline-size: 0;
+    block-size: auto;
+  }
+}
+
+// Stack-divider
+
+.Stack-divider {
+  display: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  align-self: stretch;
+}
+
+// Stack-item
+
+.Stack-item {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+}
+
+@mixin Stack-item--modifiers($viewportRange: '') {
+
+  .Stack-item--expand#{$viewportRange} {
+    flex-grow: 1;
+  }
+
+  .Stack-item--keepSize#{$viewportRange} {
+    flex-shrink: 0;
+  }
+}
+
+// Responsive composition
+
+@media ($viewport-narrow) {
+  @include Stack--modifiers('-whenNarrow');
+  @include Stack-item--modifiers('-whenNarrow');
+}
+
+@media ($viewport-regular) {
+  @include Stack--modifiers('-whenRegular');
+  @include Stack-item--modifiers('-whenRegular');
+}
+
+@media ($viewport-wide) {
+  @include Stack--modifiers('-whenWide');
+  @include Stack-item--modifiers('-whenWide');
+}

package/build/primer/loaders/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "loaders"
+generated: true
+---
+
+# Primer CSS: `loaders` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/loaders/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/loaders.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/loaders/index.scss

@@ -0,0 +1,2 @@
+@import '../support/index.scss';
+@import './loaders.scss';

package/build/primer/loaders/loaders.scss

@@ -0,0 +1,19 @@
+// Loaders
+
+// Animated Ellipsis
+
+.AnimatedEllipsis {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  &::after {
+    display: inline-block;
+    content: '...';
+    animation: AnimatedEllipsis-keyframes 1.2s steps(4, jump-none) infinite;
+  }
+
+  @keyframes AnimatedEllipsis-keyframes {
+    0% { transform: translateX(-100%); }
+  }
+}

package/build/primer/markdown/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "markdown"
+generated: true
+---
+
+# Primer CSS: `markdown` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/markdown/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/markdown.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss