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

package/autocomplete/autocomplete.scss

@@ -0,0 +1,58 @@
+// A pop up list of items used to show autocompleted results
+.autocomplete-results {
+  position: absolute;
+  z-index: 99;
+  width: 100%;
+  max-height: 20em;
+  overflow-y: auto;
+  // stylelint-disable-next-line primer/typography
+  font-size: 13px;
+  list-style: none;
+  background: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
+  box-shadow: var(--color-shadow-medium);
+}
+
+// One of the items that appears within an autocomplete group
+// Bold black text on white background
+
+.autocomplete-item {
+  display: block;
+  width: 100%;
+  padding: $spacer-1 $spacer-2;
+  overflow: hidden;
+  font-weight: $font-weight-bold;
+  color: var(--color-fg-default);
+  text-align: left;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: var(--color-canvas-overlay);
+  border: 0;
+
+  &:hover {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+
+    // Inherit color on all child elements to ensure enough contrast
+    * {
+      color: inherit !important;
+    }
+  }
+
+  &.selected,
+  &[aria-selected=true],
+  &.navigation-focus {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+
+    // Inherit color on all child elements to ensure enough contrast
+    * {
+      color: inherit !important;
+    }
+  }
+}

package/autocomplete/index.scss

@@ -0,0 +1,4 @@
+// support files
+@import '../support/index.scss';
+@import './autocomplete.scss';
+@import './suggester.scss';

package/autocomplete/suggester.scss

@@ -0,0 +1,92 @@
+// Needs refactoring
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+.suggester {
+  position: relative;
+  top: 0;
+  left: 0;
+  min-width: 180px;
+  padding: 0;
+  margin: 0;
+  margin-top: $spacer-4;
+  list-style: none;
+  cursor: pointer;
+  background: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
+  border-radius: $border-radius;
+  box-shadow: var(--color-shadow-medium);
+
+  li {
+    display: block;
+    padding: $spacer-1 $spacer-2;
+    font-weight: $font-weight-semibold;
+    border-bottom: $border-width $border-style var(--color-border-muted);
+
+    small {
+      font-weight: $font-weight-normal;
+      color: var(--color-fg-muted);
+    }
+
+    &:last-child {
+      border-bottom: 0;
+      border-bottom-right-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+
+    &:hover {
+      color: var(--color-fg-on-emphasis);
+      text-decoration: none;
+      background: var(--color-accent-emphasis);
+
+      small {
+        color: var(--color-fg-on-emphasis);
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+
+    &[aria-selected='true'],
+    &.navigation-focus {
+      color: var(--color-fg-on-emphasis);
+      text-decoration: none;
+      background: var(--color-accent-emphasis);
+
+      small {
+        color: var(--color-fg-on-emphasis);
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+  }
+}
+
+.suggester-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+}
+
+// Responsive
+
+.page-responsive {
+  @media (max-width: $width-sm) {
+    .suggester-container {
+      right: $spacer-2 !important;
+      left: $spacer-2 !important;
+    }
+
+    .suggester li {
+      padding: $spacer-2 $spacer-3;
+    }
+  }
+}

package/avatars/README.md

@@ -1,37 +1,25 @@
-# Primer Avatars
+---
+bundle: "avatars"
+generated: true
+---
 
-> Avatars are images that users can set as their profile picture. On GitHub, they’re always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `avatars` 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-avatars/index.scss";
+@import "@primer/css/avatars/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, a 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/avatars](https://primer.style/css/components/avatars).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/avatars.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/avatars/avatar-parent-child.scss

@@ -10,7 +10,8 @@
   position: absolute;
   right: -15%;
   bottom: -9%;
-  background-color: $bg-white; // For transparent backgrounds
-  border-radius: 2px;
-  box-shadow: -2px -2px 0 rgba($white, 0.8);
+  background-color: var(--color-canvas-default); // For transparent backgrounds
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius-1;
+  box-shadow: var(--color-avatar-child-shadow);
 }

package/avatars/avatar-stack.scss

@@ -21,7 +21,7 @@
 
 .AvatarStack-body {
   display: flex;
-  background: $bg-white;
+  background: var(--color-canvas-default);
 
   .avatar {
     position: relative;
@@ -30,10 +30,12 @@
     width: 20px;
     height: 20px;
     box-sizing: content-box;
+    // stylelint-disable-next-line primer/spacing
     margin-right: -11px;
-    background-color: $bg-white;
-    border-right: $border-width $border-style $white;
-    border-radius: 2px;
+    background-color: var(--color-canvas-default);
+    border-right: $border-width $border-style var(--color-canvas-default);
+    // stylelint-disable-next-line primer/borders
+    border-radius: $border-radius-1;
     transition: margin 0.1s ease-in-out;
 
     &:first-child {
@@ -47,7 +49,8 @@
 
     // stylelint-disable selector-max-type
     img {
-      border-radius: 2px;
+      // stylelint-disable-next-line primer/borders
+      border-radius: $border-radius-1;
     }
     // stylelint-enable selector-max-type
 
@@ -60,9 +63,11 @@
 
   &:hover {
     .avatar {
+      // stylelint-disable-next-line primer/spacing
       margin-right: 3px;
     }
 
+    // stylelint-disable-next-line selector-max-specificity
     .avatar:nth-child(n+4) {
       display: flex;
       opacity: 1;
@@ -77,26 +82,27 @@
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
-  background: $gray-100;
+  background: var(--color-canvas-subtle);
 
   &::before,
   &::after {
     position: absolute;
     display: block;
     height: 20px;
-    content: "";
+    content: '';
+    // stylelint-disable-next-line primer/borders
     border-radius: 2px;
-    outline: $border-width $border-style $white;
+    outline: $border-width $border-style var(--color-canvas-default);
   }
 
   &::before {
     width: 17px;
-    background: $gray-200;
+    background: var(--color-avatar-stack-fade-more);
   }
 
   &::after {
     width: 14px;
-    background: $gray-300;
+    background: var(--color-avatar-stack-fade);
   }
 }
 
@@ -109,12 +115,13 @@
 
     &:hover .avatar {
       margin-right: 0;
+      // stylelint-disable-next-line primer/spacing
       margin-left: 3px;
     }
   }
 
   .avatar.avatar-more {
-    background: $gray-300;
+    background: var(--color-avatar-stack-fade);
 
     &::before {
       width: 5px;
@@ -122,14 +129,15 @@
 
     &::after {
       width: 2px;
-      background: $gray-100;
+      background: var(--color-canvas-subtle);
     }
   }
 
   .avatar {
     margin-right: 0;
+    // stylelint-disable-next-line primer/spacing
     margin-left: -11px;
     border-right: 0;
-    border-left: $border-width $border-style $white;
+    border-left: $border-width $border-style var(--color-canvas-default);
   }
 }

package/avatars/avatar.scss

@@ -3,11 +3,13 @@
   overflow: hidden; // Ensure page layout in Firefox should images fail to load
   line-height: $lh-condensed-ultra;
   vertical-align: middle;
-  border-radius: 3px;
+  background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars
+  border-radius: $border-radius;
+  flex-shrink: 0;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: 0 0 0 1px var(--color-avatar-border);
 }
 
-.avatar-small { border-radius: 2px; }
-
 .avatar-link {
   float: left;
   line-height: $lh-condensed-ultra;
@@ -16,5 +18,31 @@
 // User for example on /stars and /user for grids of avatars
 .avatar-group-item {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: 3px;
 }
+
+// Border radius
+
+.avatar-1,
+.avatar-2,
+.avatar-small {
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius-1;
+}
+
+// Sizes
+
+@mixin avatar-size( $size ) {
+  width: $size;
+  height: $size;
+}
+
+.avatar-1 { @include avatar-size( $size-1 ); }
+.avatar-2 { @include avatar-size( $size-2 ); }
+.avatar-3 { @include avatar-size( $size-3 ); }
+.avatar-4 { @include avatar-size( $size-4 ); }
+.avatar-5 { @include avatar-size( $size-5 ); }
+.avatar-6 { @include avatar-size( $size-6 ); }
+.avatar-7 { @include avatar-size( $size-7 ); }
+.avatar-8 { @include avatar-size( $size-8 ); }

package/avatars/circle-badge.scss

@@ -4,9 +4,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: $white;
+  background-color: var(--color-canvas-default);
   border-radius: 50%;
-  box-shadow: $box-shadow-medium;
+  box-shadow: var(--color-shadow-medium);
 }
 
 .CircleBadge-icon {
@@ -44,8 +44,9 @@
     top: 50%;
     left: 0;
     width: 100%;
-    content: "";
-    border-bottom: 2px dashed $border-gray;
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border-bottom: 2px dashed var(--color-border-default);
   }
 
   .CircleBadge {

package/avatars/index.scss

@@ -1,7 +1,7 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 
 // Avatars
-@import "./avatar.scss";
-@import "./avatar-parent-child.scss";
-@import "./avatar-stack.scss";
-@import "./circle-badge.scss";
+@import './avatar.scss';
+@import './avatar-parent-child.scss';
+@import './avatar-stack.scss';
+@import './circle-badge.scss';

package/base/README.md

@@ -1,36 +1,25 @@
-# Primer Base
-> GitHub's CSS to reset the browsers default styles. Built on top of normalize.css
+---
+bundle: "base"
+generated: true
+---
 
-This repository is a module of the full [primer][primer] repository. And is built off of [normalize.css](https://github.com/necolas/normalize.css/)
+# Primer CSS: `base` 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-base/index.scss";
+@import "@primer/css/base/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, a 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
-
-You can read more about base in the [docs][docs].
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/base.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/base/base.scss

@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: $body-font-size;
   line-height: $body-line-height;
-  color: $text-gray-dark;
-  background-color: $bg-white;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
 }
 
 a {
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-decoration: none;
 
   &:hover {
@@ -40,11 +40,12 @@ strong {
 hr,
 .rule {
   height: 0;
+  // stylelint-disable-next-line primer/spacing
   margin: 15px 0;
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid lighten($gray-300, 5%);
+  border-bottom: $border-width $border-style var(--color-border-muted);
   @include clearfix();
 }
 

package/base/index.scss

@@ -1,5 +1,7 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 
-@import "./normalize.scss";
-@import "./base.scss";
-@import "./typography-base.scss";
+@import './normalize.scss';
+@import './base.scss';
+@import './kbd.scss';
+@import './typography-base.scss';
+@import './octicons.scss';

package/base/kbd.scss

@@ -0,0 +1,20 @@
+// Keyboard shortcuts
+// stylelint-disable selector-max-type
+
+kbd {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: ($spacer-1 - 1) ($spacer-1 + 1);
+  font: 11px $mono-font;
+  // stylelint-disable-next-line primer/typography
+  line-height: 10px;
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  background-color: var(--color-canvas-subtle);
+  // stylelint-disable-next-line primer/borders
+  border: $border-style $border-width var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
+  border-radius: $border-radius;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+}

package/base/normalize.scss

@@ -162,7 +162,7 @@ h1 {
 
 mark {
   background-color: #ff0;
-  color: #000;
+  color: var(--color-text-primary);
 }
 
 /**
@@ -234,7 +234,7 @@ samp {
  */
 
 figure {
-  margin: 1em 40px;
+  margin: 1em $spacer-6;
 }
 
 /**
@@ -269,7 +269,7 @@ textarea {
  */
 
 optgroup {
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 /**
@@ -333,9 +333,9 @@ button:-moz-focusring,
  */
 
 fieldset {
-  border: 1px solid #c0c0c0;
+  border: $border-width $border-style #c0c0c0;
   margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  padding: 0.35em 0.625em $em-spacer-6;
 }
 
 /**

package/base/octicons.scss

@@ -0,0 +1,6 @@
+.octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}

package/base/typography-base.scss

@@ -23,10 +23,12 @@ h6 { @include h6; }
 
 p {
   margin-top: 0;
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: 10px;
 }
 
 small {
+  // stylelint-disable-next-line primer/typography
   font-size: 90%;
 }
 

package/blankslate/README.md

@@ -1,37 +1,25 @@
-# Primer Blankslate
+---
+bundle: "blankslate"
+generated: true
+---
 
-> Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `blankslate` 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-blankslate/index.scss";
+@import "@primer/css/blankslate/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, a 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/blankslate](https://primer.style/css/components/blankslate).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/blankslate.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