@primer/css 0.0.0-1ea75fe → 0.0.0-202110100305

package/select-menu/select-menu.scss

@@ -0,0 +1,464 @@
+// 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: $spacer-3;
+  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" underneat 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(--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(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-select-menu-backdrop-border);
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius * 2;
+  box-shadow: var(--color-shadow-large);
+  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(-$spacer-3);
+    }
+  }
+
+  @include breakpoint(sm) {
+    width: 300px;
+    height: auto;
+    max-height: $SelectMenu-max-height;
+    margin: $spacer-2 0 $spacer-3 0;
+    font-size: $font-size-small;
+    border-color: var(--color-border-default);
+    border-radius: $border-radius;
+    box-shadow: var(--color-shadow-large);
+    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: $spacer-3;
+  flex: none; // fixes header from getting squeezed in Safari iOS
+  align-items: center;
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/spacing
+    padding: 7px 7px 7px $spacer-3;
+  }
+}
+
+.SelectMenu-title {
+  flex: 1;
+  font-size: $body-font-size;
+  font-weight: $font-weight-bold;
+
+  @include breakpoint(sm) {
+    font-size: inherit;
+  }
+}
+
+.SelectMenu-closeButton {
+  padding: $spacer-3;
+  margin: -$spacer-3;
+  line-height: 1;
+  color: var(--color-fg-muted);
+  background-color: transparent;
+  border: 0;
+
+  @include breakpoint(sm) {
+    padding: $spacer-2;
+    // stylelint-disable-next-line primer/spacing
+    margin: (-$spacer-2) (-7px); // Using -7px fixes a :focus glitch
+  }
+}
+
+// Filter
+//
+// An input to filter a large list
+
+.SelectMenu-filter {
+  padding: $spacer-3;
+  margin: 0;
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  @include breakpoint(sm) {
+    padding: $spacer-2;
+  }
+}
+
+.SelectMenu-input {
+  display: block;
+  width: 100%;
+
+  @include breakpoint(sm) {
+    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(--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: $spacer-3;
+  overflow: hidden;
+  color: var(--color-fg-default);
+  text-align: left;
+  cursor: pointer;
+  background-color: var(--color-canvas-overlay);
+  border: 0;
+  border-bottom: $border-width $border-style 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: $spacer-3; // fixed width to make sure following content aligns
+  margin-right: $spacer-2;
+  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(--color-border-muted);
+  -webkit-overflow-scrolling: touch;
+
+  // Hide scrollbar so it doesn't cover the text
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include breakpoint(sm) {
+    padding: $spacer-2 $spacer-2 0 $spacer-2;
+  }
+}
+
+.SelectMenu-tab {
+  flex: 1;
+  padding: $spacer-2 $spacer-3;
+  font-size: $font-size-small;
+  font-weight: $font-weight-semibold;
+  color: 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(--color-border-muted);
+
+  @include breakpoint(sm) {
+    flex: none;
+    padding: $spacer-1 $spacer-3;
+    border: $border-width $border-style transparent;
+    border-bottom-width: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+  }
+
+  &[aria-selected='true'] {
+    z-index: 1; // Keeps box-shadow visible when hovering
+    color: var(--color-fg-default);
+    cursor: default;
+    background-color: var(--color-canvas-overlay);
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 1px var(--color-border-muted);
+
+    @include breakpoint(sm) {
+      border-color: 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 $spacer-3;
+  text-align: center;
+  background-color: var(--color-canvas-overlay);
+  border-bottom: $border-width $border-style var(--color-border-muted);
+}
+
+// Blankslate and Loading
+//
+// A container used to show a blankslate or the loading animation.
+
+.SelectMenu-blankslate,
+.SelectMenu-loading {
+  padding: $spacer-4 $spacer-3;
+  text-align: center;
+  background-color: var(--color-canvas-overlay);
+}
+
+// Divider
+//
+// Can be used to divide the list into multiple groups
+
+.SelectMenu-divider {
+  padding: $spacer-1 $spacer-3;
+  margin: 0;
+  font-size: $font-size-small;
+  font-weight: $font-weight-semibold;
+  color: var(--color-fg-muted);
+  background-color: var(--color-canvas-subtle);
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  // Borderless
+  .SelectMenu-list--borderless & {
+    border-top: $border-width $border-style 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: $spacer-2 $spacer-3;
+  font-size: $font-size-small;
+  color: var(--color-fg-muted);
+  text-align: center;
+  border-top: $border-width $border-style var(--color-border-muted);
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/spacing
+    padding: 7px $spacer-3;
+  }
+}
+
+// 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: $spacer-2;
+    }
+  }
+}
+
+// States
+//
+// Different states
+
+// Reset outlines
+.SelectMenu-closeButton:focus,
+.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] {
+  font-weight: $font-weight-semibold;
+  color: 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(--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(--color-fg-default);
+  }
+
+  .SelectMenu-closeButton:active {
+    color: var(--color-fg-muted);
+  }
+
+  body:not(.intent-mouse) .SelectMenu-item:focus,
+  .SelectMenu-item:hover {
+    background-color: var(--color-neutral-subtle);
+  }
+
+  .SelectMenu-item:active {
+    background-color: var(--color-canvas-subtle);
+  }
+
+  body:not(.intent-mouse) .SelectMenu-tab:focus {
+    background-color: var(--color-select-menu-tap-focus-bg);
+  }
+
+  .SelectMenu-tab:hover {
+    color: var(--color-fg-default);
+  }
+
+  .SelectMenu-tab:not([aria-selected='true']):active {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+// Can not hover states
+//
+// For touch input
+
+@media (hover: none) {
+  // Android
+  .SelectMenu-item:focus,
+  .SelectMenu-item:active {
+    background-color: 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(--color-select-menu-tap-highlight);
+  }
+}

package/stylelint.config.cjs

@@ -0,0 +1,16 @@
+module.exports = {
+  extends: ['@primer/stylelint-config'],
+  plugins: ['stylelint-scss'],
+  customSyntax: require('postcss-scss'),
+  ignoreFiles: ['src/fonts/**/*'],
+  rules: {
+    'scss/dollar-variable-default': [true, {ignore: 'local'}],
+    'primer/no-override': false,
+    'primer/colors': true,
+    'primer/borders': true,
+    'primer/spacing': true,
+    'primer/typography': true,
+    'primer/box-shadow': true,
+    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
+  }
+}

package/subhead/README.md

@@ -1,39 +1,25 @@
-# Primer / Subhead
-
-> The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.
-
-This repository is a module of the full [primer][primer] repository.
+---
+bundle: "subhead"
+generated: true
+---
 
+# Primer CSS: `subhead` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+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-subhead/index.scss";
+@import "@primer/css/subhead/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/subhead](https://primer.style/css/components/subhead).
-
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/subhead.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/subhead/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./subhead.scss";
+@import '../support/index.scss';
+@import './subhead.scss';

package/subhead/subhead.scss

@@ -3,8 +3,9 @@
   display: flex;
   padding-bottom: $spacer-2;
   margin-bottom: $spacer-3;
-  border-bottom: $border;
+  border-bottom: $border-width $border-style var(--color-border-muted);
   flex-flow: row wrap;
+  justify-content: flex-end; // Keep actions right aligned.
 }
 
 // Modifier class to give a lot of breathing room between sections of content.
@@ -15,25 +16,30 @@
 // <h2> sized heading with normal font weight
 .Subhead-heading {
   font-size: $h2-size;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   flex: 1 1 auto;
 }
 
 // Make the text bold and red for dangerous content
 .Subhead-heading--danger {
   font-weight: $font-weight-bold;
-  color: $text-red;
+  color: var(--color-danger-fg);
 }
 
 // One-liner of supporting text
 .Subhead-description {
   font-size: $body-font-size;
-  color: $text-gray;
+  color: var(--color-fg-muted);
   flex: 1 100%;
 }
 
 // Add 1 or 2 buttons to the right of the heading
 .Subhead-actions {
+  margin: $spacer-1 0 $spacer-1 $spacer-1;
   align-self: center;
   justify-content: flex-end;
+
+  + .Subhead-description {
+    margin-top: $spacer-1;
+  }
 }

package/support/README.md

@@ -1,31 +1,25 @@
-# Primer Support
+---
+bundle: "support"
+generated: true
+---
 
-> Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent.
->
-> Most of the time to include these you'll only need to add `@import "support/support";` to the top of your bundle. If you want only a specific partial you can import them separately.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `support` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+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-support/index.scss";
+@import "@primer/css/support/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
-## Documentation
+## Build
 
-Find further documentation at [primer.style/css/support](https://primer.style/css/support).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/support.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css/support
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/support/index.scss

@@ -1,11 +1,10 @@
 // variables
-@import "./variables/typography.scss";
-@import "./variables/colors.scss";
-@import "./variables/layout.scss";
-@import "./variables/misc.scss";
+@import './variables/typography.scss';
+@import './variables/layout.scss';
+@import './variables/misc.scss';
 
 // mixins
-@import "./mixins/typography.scss";
-@import "./mixins/layout.scss";
-@import "./mixins/buttons.scss";
-@import "./mixins/misc.scss";
+@import './mixins/color-modes.scss';
+@import './mixins/typography.scss';
+@import './mixins/layout.scss';
+@import './mixins/misc.scss';