@papillonarts/css 0.5.0 → 0.7.0

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

@@ -0,0 +1,486 @@
+// stylelint-disable selector-max-type
+// selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles.
+
+$SelectMenu-max-height: 480px !default;
+
+// Select Menu
+//
+// A more advanced menu with support for navigation, filtering, and more.
+
+.SelectMenu {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  display: flex;
+  padding: var(--base-size-16);
+  pointer-events: none;
+  flex-direction: column;
+
+  @include breakpoint(sm) {
+    position: absolute;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    padding: 0;
+  }
+}
+
+// Backdrop
+//
+// Adds a dark, semi transparent "cover" underneath the modal. Only visible for xs.
+
+.SelectMenu::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: '';
+  background-color: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
+
+  @include breakpoint(sm) {
+    display: none;
+  }
+}
+
+// Modal
+//
+// The main "box" that contains the content
+
+.SelectMenu-modal {
+  position: relative;
+  z-index: 99; // Needs to be higher than .details-overlay's z-index: 80.
+  display: flex;
+  max-height: 66%;
+  margin: auto 0;
+  overflow: hidden; // Enables border radius on scrollable child elements
+  pointer-events: auto;
+  flex-direction: column;
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius * 2;
+  box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
+  animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
+
+  @keyframes SelectMenu-modal-animation {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes SelectMenu-modal-animation--sm {
+    0% {
+      opacity: 0;
+      transform: translateY(calc(var(--base-size-16) * -1));
+    }
+  }
+
+  @include breakpoint(sm) {
+    width: 300px;
+    height: auto;
+    max-height: $SelectMenu-max-height;
+    margin: var(--base-size-8) 0 var(--base-size-16) 0;
+    // stylelint-disable-next-line primer/typography
+    font-size: $font-size-small;
+    border-color: var(--borderColor-default, var(--color-border-default));
+    // stylelint-disable-next-line primer/borders
+    border-radius: $border-radius;
+    box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
+    animation-name: SelectMenu-modal-animation--sm;
+  }
+}
+
+// Header
+//
+// Used for showing a title and the close button. Close button is only visible for xs.
+
+.SelectMenu-header {
+  display: flex;
+  padding: var(--base-size-16);
+  flex: none; // fixes header from getting squeezed in Safari iOS
+  align-items: center;
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/spacing
+    padding: 7px 7px 7px var(--base-size-16);
+  }
+}
+
+.SelectMenu-title {
+  flex: 1;
+  // stylelint-disable-next-line primer/typography
+  font-size: $body-font-size;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-bold;
+
+  @include breakpoint(sm) {
+    font-size: inherit;
+  }
+}
+
+.SelectMenu-closeButton {
+  padding: var(--base-size-16);
+  margin: calc(var(--base-size-16) * -1);
+  // stylelint-disable-next-line primer/typography
+  line-height: 1;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  background-color: transparent;
+  border: 0;
+
+  @include breakpoint(sm) {
+    padding: var(--base-size-8);
+    // stylelint-disable-next-line primer/spacing
+    margin: calc(var(--base-size-8) * -1) (-7px); // Using -7px fixes a :focus glitch
+  }
+}
+
+// Filter
+//
+// An input to filter a large list
+
+.SelectMenu-filter {
+  padding: var(--base-size-16);
+  margin: 0;
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+  @include breakpoint(sm) {
+    padding: var(--base-size-8);
+  }
+}
+
+.SelectMenu-input {
+  display: block;
+  width: 100%;
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/typography
+    font-size: $h5-size;
+  }
+}
+
+// List
+//
+// The container that holds all the list items. Starts scrolling when the list gets too long.
+
+.SelectMenu-list {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: -$border-width; // Hides the last border in the list
+  flex: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
+}
+
+// List Item
+//
+// The interactive element used to make a selection
+
+.SelectMenu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--base-size-16);
+  overflow: hidden;
+  color: var(--fgColor-default, var(--color-fg-default));
+  text-align: left;
+  cursor: pointer;
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border: 0;
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/spacing
+    padding-top: 7px;
+    // stylelint-disable-next-line primer/spacing
+    padding-bottom: 7px;
+  }
+
+  // Borderless
+  .SelectMenu-list--borderless & {
+    border-bottom: 0;
+  }
+}
+
+// Icon
+//
+// Icon shown on the left of a list item.
+
+.SelectMenu-icon {
+  width: var(--base-size-16); // fixed width to make sure following content aligns
+  margin-right: var(--base-size-8);
+  flex-shrink: 0;
+}
+
+// Check icon
+.SelectMenu-icon--check {
+  visibility: hidden;
+  transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
+  transform: scale(0);
+}
+
+// Tabs
+//
+// Allows switching between multiple lists
+
+.SelectMenu-tabs {
+  display: flex;
+  flex-shrink: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
+  -webkit-overflow-scrolling: touch;
+
+  // Hide scrollbar so it doesn't cover the text
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include breakpoint(sm) {
+    padding: var(--base-size-8) var(--base-size-8) 0 var(--base-size-8);
+  }
+}
+
+.SelectMenu-tab {
+  flex: 1;
+  padding: var(--base-size-8) var(--base-size-16);
+  // stylelint-disable-next-line primer/typography
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-semibold;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
+
+  @include breakpoint(sm) {
+    flex: none;
+    padding: var(--base-size-4) var(--base-size-16);
+    // stylelint-disable-next-line primer/borders, primer/colors
+    border: $border-width $border-style transparent;
+    border-bottom-width: 0;
+    // stylelint-disable-next-line primer/borders
+    border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
+    border-top-right-radius: $border-radius;
+  }
+
+  &[aria-selected='true'] {
+    z-index: 1; // Keeps box-shadow visible when hovering
+    color: var(--fgColor-default, var(--color-fg-default));
+    cursor: default;
+    background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 1px var(--borderColor-muted, var(--color-border-muted));
+
+    @include breakpoint(sm) {
+      border-color: var(--borderColor-muted, var(--color-border-muted));
+      box-shadow: none;
+    }
+  }
+}
+
+// Message
+//
+// A container used to show different kinds of text messages.
+
+.SelectMenu-message {
+  // stylelint-disable-next-line primer/spacing
+  padding: 7px var(--base-size-16);
+  text-align: center;
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+}
+
+// Blankslate and Loading
+//
+// A container used to show a blankslate or the loading animation.
+
+.SelectMenu-blankslate,
+.SelectMenu-loading {
+  padding: var(--base-size-24) var(--base-size-16);
+  text-align: center;
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+}
+
+// Divider
+//
+// Can be used to divide the list into multiple groups
+
+.SelectMenu-divider {
+  padding: var(--base-size-4) var(--base-size-16);
+  margin: 0;
+  // stylelint-disable-next-line primer/typography
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-semibold;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+  // Borderless
+  .SelectMenu-list--borderless & {
+    // stylelint-disable-next-line primer/borders, primer/colors
+    border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+    &:empty {
+      padding: 0;
+      border-top: 0;
+    }
+  }
+}
+
+// Footer
+//
+// A container at the bottom.
+
+.SelectMenu-footer {
+  z-index: 0; // Avoid top border from getting covered by the negative margin of the list
+  padding: var(--base-size-8) var(--base-size-16);
+  // stylelint-disable-next-line primer/typography
+  font-size: $font-size-small;
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  text-align: center;
+  // stylelint-disable-next-line primer/borders, primer/colors
+  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/spacing
+    padding: 7px var(--base-size-16);
+  }
+}
+
+// Has Filter (modifier)
+//
+// Makes sure that the filter input keeps a fixed position at the top while typing. Only visible for xs.
+
+.SelectMenu--hasFilter {
+  .SelectMenu-modal {
+    height: 80%;
+    max-height: none;
+    margin-top: 0;
+
+    @include breakpoint(sm) {
+      height: auto;
+      max-height: $SelectMenu-max-height;
+      margin-top: var(--base-size-8);
+    }
+  }
+}
+
+// States
+//
+// Different states
+
+// Reset outlines
+.SelectMenu-tab:focus,
+.SelectMenu-item:focus {
+  outline: 0;
+}
+
+// Reset <a> elements
+.SelectMenu-item:hover {
+  text-decoration: none;
+}
+
+// Selected
+//
+// Visible when a user clicks/taps on a list item
+
+.SelectMenu-item[aria-checked='true'] {
+  // stylelint-disable-next-line primer/typography
+  font-weight: $font-weight-semibold;
+  color: var(--fgColor-default, var(--color-fg-default));
+
+  .SelectMenu-icon--check {
+    visibility: visible;
+    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
+    transform: scale(1);
+  }
+}
+
+// Disabled
+//
+// Prevent list items to be selected
+
+.SelectMenu-item:disabled,
+.SelectMenu-item[aria-disabled='true'] {
+  color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+  pointer-events: none;
+}
+
+// Can hover states
+//
+// For mouse/keyboard input
+
+@media (hover: hover) {
+  body:not(.intent-mouse) .SelectMenu-closeButton:focus,
+  .SelectMenu-closeButton:hover {
+    color: var(--fgColor-default, var(--color-fg-default));
+  }
+
+  .SelectMenu-closeButton:active {
+    color: var(--fgColor-muted, var(--color-fg-muted));
+  }
+
+  body:not(.intent-mouse) .SelectMenu-item:focus,
+  .SelectMenu-item:hover {
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
+  }
+
+  .SelectMenu-item:active {
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  }
+
+  body:not(.intent-mouse) .SelectMenu-tab:focus {
+    background-color: var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg));
+  }
+
+  .SelectMenu-tab:hover {
+    color: var(--fgColor-default, var(--color-fg-default));
+  }
+
+  .SelectMenu-tab:not([aria-selected='true']):active {
+    color: var(--fgColor-default, var(--color-fg-default));
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  }
+}
+
+// Can not hover states
+//
+// For touch input
+
+@media (hover: none) {
+  // Android
+  .SelectMenu-item:focus,
+  .SelectMenu-item:active {
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  }
+
+  // iOS Safari
+  // :active would work if ontouchstart is added to the button
+  // Instead this tweaks the "native" highlight color
+  .SelectMenu-item {
+    -webkit-tap-highlight-color: var(--control-bgColor-active, var(--color-select-menu-tap-highlight));
+  }
+}

package/build/primer/support/README.md

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

package/build/primer/support/mixins/color-modes.scss

@@ -1,34 +1,122 @@
+// This mixin is used to output the tokens/variables from Primitives
+//
+// Example:
+//
+// @include color-mode-theme(dark) {
+//   --color: black;
+// }
+//
+// Warning!!!
+// Don't use this mixin with a class. E.g.
+// @include color-mode-theme(dark) {
+//   .my-class {
+//     color: red;
+//   }
+// }
+//
+// The outputted `::selection .my-class` will make the selector invalid and the entire ruleset is disregarded.
+// At some point we hopefully can remove the need for `&, &::selection {}` again (once the spec/implementation changes).
+
 @mixin color-mode-theme($theme-name, $include-root: false) {
   @if $include-root {
     :root,
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
-      @content;
+      &,
+      &::selection {
+        @content;
+      }
 
       /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
     }
+
+    ::backdrop,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
+      @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
+    }
   }
 
   @else {
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    ::backdrop,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 
   @media (prefers-color-scheme: light) {
     [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 
   @media (prefers-color-scheme: dark) {
     [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 }
 
+// This mixin wraps styles with light or dark mode selectors
+// If possible, use a color variable instead.
+//
+// Example:
+//
+// @include color-mode('dark') {
+//   .my-class {
+//     color: red;
+//   }
+// }
+//
+// Returns:
+//
+// [data-color-mode=light][data-light-theme*=dark] .my-class,
+// [data-color-mode=dark][data-dark-theme*=dark] .my-class {
+//   color: red;
+// }
+//
+// @media (prefers-color-scheme: light) {
+//   [data-color-mode=auto][data-light-theme*=dark] .my-class {
+//     color: red;
+//   }
+// }
+// @media (prefers-color-scheme: dark) {
+//   [data-color-mode=auto][data-dark-theme*=dark] .my-class {
+//     color: red;
+//   }
+// }
+
 @mixin color-mode($mode) {
   @if $mode == light {
     :root,
@@ -84,12 +172,10 @@
   @each $name, $value in $color-map {
     @each $type, $color in $value {
       @if $type == dark {
-        // stylelint-disable-next-line function-no-unknown
         $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
       }
 
       @else {
-        // stylelint-disable-next-line function-no-unknown
         $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
       }
     }

package/build/primer/support/mixins/layout.scss

@@ -1,4 +1,4 @@
-@import "../variables/layout.scss";
+@import '../variables/layout.scss';
 
 // Responsive media queries
 
@@ -9,7 +9,6 @@
 
   @else {
     // Retrieves the value from the key
-    // stylelint-disable-next-line function-no-unknown
     $value: map-get($breakpoints, $breakpoint);
 
     // If the key exists in the map