@papillonarts/css 0.6.0 → 0.7.0

package/build/primer/navigation/filter-list.scss

@@ -0,0 +1,86 @@
+// stylelint-disable selector-max-specificity
+
+// Filters list
+//
+// A vertical list of filters.
+.filter-list {
+  list-style-type: none;
+
+  &.small .filter-item {
+    // stylelint-disable-next-line primer/spacing
+    padding: 6px 12px;
+    // stylelint-disable-next-line primer/typography
+    font-size: $font-size-small;
+  }
+
+  &.pjax-active .filter-item {
+    color: var(--fgColor-muted, var(--color-fg-muted));
+    background-color: transparent;
+
+    &.pjax-active {
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    }
+  }
+}
+
+.filter-item {
+  position: relative;
+  display: block;
+  padding: var(--base-size-8) var(--base-size-16);
+  margin-bottom: var(--base-size-4);
+  overflow: hidden;
+  // stylelint-disable-next-line primer/typography
+  font-size: $h5-size;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius;
+
+  &:hover {
+    text-decoration: none;
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
+  }
+
+  .count {
+    float: right;
+    // stylelint-disable-next-line primer/typography
+    font-weight: $font-weight-bold;
+  }
+
+  .bar {
+    position: absolute;
+    top: var(--base-size-2);
+    right: 0;
+    bottom: var(--base-size-2);
+    z-index: -1;
+    display: inline-block;
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
+  }
+}

package/build/primer/navigation/index.scss

@@ -0,0 +1,5 @@
+@import '../support/index.scss';
+// Navigation
+@import './filter-list.scss';
+@import './sidenav.scss';
+@import './subnav.scss';

package/build/primer/navigation/sidenav.scss

@@ -0,0 +1,102 @@
+// Side Nav
+//
+// A vertical list of navigational links, typically used on the left side of a page.
+
+.SideNav {
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+}
+
+.SideNav-item {
+  position: relative;
+  display: block;
+  width: 100%;
+  // stylelint-disable-next-line primer/spacing
+  padding: 12px var(--base-size-16);
+  color: var(--fgColor-default, var(--color-fg-default));
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+  &:first-child {
+    border-top: 0;
+  }
+
+  &:last-child {
+    // makes sure there is a "bottom border" in case the list is not long enough
+    // stylelint-disable-next-line primer/box-shadow, declaration-property-value-no-unknown
+    box-shadow: 0 $border-width 0 var(--borderColor-default, var(--color-border-default));
+  }
+
+  // Bar on the left
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 2px;
+    pointer-events: none;
+    content: '';
+  }
+}
+
+// States
+
+.SideNav-item:hover {
+  text-decoration: none;
+  background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
+}
+
+.SideNav-item:active {
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+}
+
+.SideNav-item[aria-current]:not([aria-current='false']),
+.SideNav-item[aria-selected='true'] {
+  background-color: var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg));
+
+  // Bar on the left
+  &::before {
+    // stylelint-disable-next-line primer/colors
+    background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active));
+  }
+}
+
+// Icon
+//
+// Makes sure multiple icons are vertically aligned
+
+.SideNav-icon {
+  width: 16px;
+  margin-right: var(--base-size-8);
+  color: var(--fgColor-muted, var(--color-fg-muted));
+}
+
+// Sub Nav
+//
+// A more lightweight version, suited as a sub nav
+
+.SideNav-subItem {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: var(--base-size-4) 0;
+  color: var(--fgColor-accent, var(--color-accent-fg));
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+}
+
+.SideNav-subItem:hover {
+  color: var(--fgColor-default, var(--color-fg-default));
+  text-decoration: none;
+}
+
+.SideNav-subItem[aria-current]:not([aria-current='false']),
+.SideNav-subItem[aria-selected='true'] {
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-semibold;
+  color: var(--fgColor-default, var(--color-fg-default));
+}

package/build/primer/navigation/subnav.scss

@@ -0,0 +1,154 @@
+// stylelint-disable selector-max-specificity
+
+// Needs refactoring
+// Sub nav
+.subnav {
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 20px;
+
+  @include clearfix();
+}
+
+.subnav-bordered {
+  // stylelint-disable-next-line primer/spacing
+  padding-bottom: 20px;
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+}
+
+.subnav-flush {
+  margin-bottom: 0;
+}
+
+.subnav-item {
+  position: relative;
+  float: left;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px var(--base-size-16);
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: var(--fgColor-default, var(--color-fg-default));
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
+
+  + .subnav-item {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: -1px;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    z-index: 2;
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
+  }
+
+  &:first-child {
+    // stylelint-disable-next-line primer/borders
+    border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child {
+    // stylelint-disable-next-line primer/borders
+    border-top-right-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-right-radius: $border-radius;
+  }
+}
+
+.subnav-search {
+  position: relative;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 12px;
+}
+
+.subnav-search-input {
+  width: 320px;
+  padding-left: var(--base-size-32);
+  color: var(--fgColor-muted, var(--color-fg-muted));
+}
+
+.subnav-search-input-wide {
+  // stylelint-disable-next-line primer/responsive-widths
+  width: 500px;
+}
+
+.subnav-search-icon {
+  position: absolute;
+  // stylelint-disable-next-line primer/spacing
+  top: 9px;
+  left: var(--base-size-8);
+  display: block;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  text-align: center;
+  pointer-events: none;
+}
+
+.subnav-search-context {
+  .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.selected {
+      z-index: 2;
+    }
+  }
+
+  + .subnav-search {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: -1px;
+
+    .subnav-search-input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .select-menu-modal-holder {
+    z-index: 30;
+  }
+
+  .select-menu-modal {
+    width: 220px;
+  }
+
+  .select-menu-item-icon {
+    color: inherit;
+  }
+}
+
+.subnav-spacer-right {
+  // stylelint-disable-next-line primer/spacing
+  padding-right: 12px;
+}

package/build/primer/pagination/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "pagination"
+generated: true
+---
+
+# Primer CSS: `pagination` 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/pagination/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/pagination.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/pagination/index.scss

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

package/build/primer/pagination/pagination.scss

@@ -0,0 +1,157 @@
+// Needs refactoring
+// stylelint-disable selector-max-type
+.pagination {
+  a,
+  span,
+  em {
+    min-width: 32px;
+    // stylelint-disable-next-line primer/spacing
+    padding: 5px 10px;
+    font-style: normal;
+    // stylelint-disable-next-line primer/typography
+    line-height: 20px;
+    color: var(--fgColor-default, var(--color-fg-default));
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    // stylelint-disable-next-line primer/borders, primer/colors
+    border: $border-width $border-style transparent;
+    // stylelint-disable-next-line primer/borders
+    border-radius: $border-radius;
+    transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      border-color: var(--borderColor-default, var(--color-border-default));
+      transition-duration: 0.1s;
+    }
+
+    &:active {
+      border-color: var(--borderColor-muted, var(--color-border-muted));
+      transition: none;
+    }
+  }
+
+  .previous_page,
+  .next_page {
+    color: var(--fgColor-accent, var(--color-accent-fg));
+  }
+
+  .current,
+  .current:hover,
+  [aria-current]:not([aria-current='false']) {
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    border-color: transparent;
+  }
+
+  .gap,
+  .disabled,
+  [aria-disabled='true'],
+  .gap:hover,
+  .disabled:hover,
+  [aria-disabled='true']:hover {
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    cursor: default;
+    border-color: transparent;
+  }
+
+  // chevron icons using clip-path
+  @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
+    .previous_page::before,
+    .next_page::after {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: text-bottom;
+      content: '';
+      background-color: currentColor;
+    }
+
+    // chevron-left
+    .previous_page::before {
+      margin-right: var(--base-size-4);
+      clip-path:
+        polygon(
+          9.8px 12.8px,
+          8.7px 12.8px,
+          4.5px 8.5px,
+          4.5px 7.5px,
+          8.7px 3.2px,
+          9.8px 4.3px,
+          6.1px 8px,
+          9.8px 11.7px,
+          9.8px 12.8px
+        );
+    }
+
+    // chevron-right
+    .next_page::after {
+      margin-left: var(--base-size-4);
+      clip-path:
+        polygon(
+          6.2px 3.2px,
+          7.3px 3.2px,
+          11.5px 7.5px,
+          11.5px 8.5px,
+          7.3px 12.8px,
+          6.2px 11.7px,
+          9.9px 8px,
+          6.2px 4.3px,
+          6.2px 3.2px
+        );
+    }
+  }
+
+  // Responsive
+
+  // Hide everything by default
+  > * {
+    display: none;
+  }
+
+  // 0 -> sm
+  // Only show [Previous] [Next]
+
+  > :first-child,
+  > :last-child,
+  > .previous_page,
+  > .next_page {
+    display: inline-block;
+  }
+
+  // sm -> md
+  // Also show [first] [last] [current number] and [...]
+
+  @include breakpoint(sm) {
+    > :nth-child(2),
+    > :nth-last-child(2),
+    > .current,
+    > .gap {
+      display: inline-block;
+    }
+  }
+
+  // md -> or more
+  // Show everything
+
+  @include breakpoint(md) {
+    > * {
+      display: inline-block;
+    }
+  }
+}
+
+// Unified centered pagination across the site
+.paginate-container {
+  margin-top: var(--base-size-16);
+  margin-bottom: var(--base-size-16);
+  text-align: center;
+
+  .pagination {
+    display: inline-block;
+  }
+}

package/build/primer/primitives/index.scss

@@ -0,0 +1,10 @@
+// https://github.com/primer/primitives
+
+@import '@primer/primitives/dist/css/base/size/size';
+@import '@primer/primitives/dist/css/base/typography/typography';
+@import '@primer/primitives/dist/css/functional/size/border';
+@import '@primer/primitives/dist/css/functional/size/breakpoints';
+@import '@primer/primitives/dist/css/functional/size/size';
+@import '@primer/primitives/dist/css/functional/size/viewport';
+@import '@primer/primitives/dist/css/functional/typography/typography';
+@import './temp-typography-tokens.scss';

package/build/primer/primitives/temp-typography-tokens.scss

@@ -0,0 +1,22 @@
+// Temporary typography vars in rem units variables
+:root {
+  // Heading sizes - mobile
+  // h4-h6 remain the same size on both mobile & desktop
+  --h00-size-mobile: 2.5rem;
+  --h0-size-mobile: 2rem;
+  --h1-size-mobile: 1.625rem;
+  --h2-size-mobile: 1.375rem;
+  --h3-size-mobile: 1.125rem;
+
+  // Heading sizes - desktop
+  --h00-size: 3rem;
+  --h0-size: 2.5rem;
+  --h1-size: 2rem;
+  --h2-size: 1.5rem;
+  --h3-size: 1.25rem;
+  --h4-size: 1rem;
+  --h5-size: 0.875rem;
+  --h6-size: 0.75rem;
+  --body-font-size: 0.875rem;
+  --font-size-small: 0.75rem;
+}

package/build/primer/product/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "product"
+generated: true
+---
+
+# Primer CSS: `product` 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/product/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/product.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/product/index.scss

@@ -0,0 +1,13 @@
+// Global requirements
+@import '../support/index.scss';
+
+// Product specific css modules
+@import '../autocomplete/index.scss';
+@import '../avatars/index.scss';
+@import '../branch-name/index.scss';
+@import '../header/index.scss';
+@import '../labels/index.scss';
+@import '../loaders/index.scss';
+@import '../markdown/index.scss';
+@import '../select-menu/index.scss';
+@import '../toasts/index.scss';

package/build/primer/select-menu/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "select-menu"
+generated: true
+---
+
+# Primer CSS: `select-menu` 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/select-menu/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/select-menu.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/select-menu/index.scss

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