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

package/popover/popover.scss

@@ -15,21 +15,29 @@
     position: absolute;
     left: 50%;
     display: inline-block;
-    content: "";
+    content: '';
   }
 
   &::before {
     top: -$spacer-3;
+    // stylelint-disable-next-line primer/spacing
     margin-left: -9px;
+    // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: $border-black-fade;
+    border-bottom-color: var(--color-border-default);
   }
 
   &::after {
     top: -14px;
     margin-left: -$spacer-2;
+    // stylelint-disable-next-line primer/borders
     border: 7px $border-style transparent;
-    border-bottom-color: $bg-white;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+
+  // TODO: Refactor so that .Popover is not dependant on .Box
+  &.Box {
+    background-color: var(--color-canvas-overlay);
   }
 }
 
@@ -45,12 +53,12 @@
 
   &::before {
     bottom: -$spacer-3;
-    border-top-color: $border-black-fade;
+    border-top-color: var(--color-border-default);
   }
 
   &::after {
     bottom: -14px;
-    border-top-color: $bg-white;
+    border-top-color: var(--color-canvas-overlay);
   }
 }
 
@@ -108,6 +116,7 @@
   }
 
   &::before {
+    // stylelint-disable-next-line primer/spacing
     margin-top: -($spacer-2 + 1);
   }
 
@@ -122,12 +131,12 @@
 .Popover-message--right-bottom {
   &::before {
     right: -$spacer-3;
-    border-left-color: $border-black-fade;
+    border-left-color: var(--color-border-default);
   }
 
   &::after {
     right: -14px;
-    border-left-color: $bg-white;
+    border-left-color: var(--color-canvas-overlay);
   }
 }
 
@@ -137,12 +146,12 @@
 .Popover-message--left-bottom {
   &::before {
     left: -$spacer-3;
-    border-right-color: $border-black-fade;
+    border-right-color: var(--color-border-default);
   }
 
   &::after {
     left: -14px;
-    border-right-color: $bg-white;
+    border-right-color: var(--color-canvas-overlay);
   }
 }
 

package/postcss.config.cjs

@@ -0,0 +1,22 @@
+const autoprefixer = require('autoprefixer')
+const sass = require('@koddsson/postcss-sass')
+const scss = require('postcss-scss')
+const scssImport = require('postcss-import')
+const {join} = require('path')
+
+module.exports = {
+  map: {
+    sourcesContent: false,
+    annotation: true
+  },
+  customSyntax: scss,
+  parser: scss,
+  plugins: [
+    scssImport,
+    sass({
+      includePaths: [join(__dirname, 'node_modules')],
+      outputStyle: process.env.CSS_MINIFY === '0' ? 'expanded' : 'compressed'
+    }),
+    autoprefixer,
+  ]
+}

package/prettier.config.cjs

@@ -0,0 +1 @@
+module.exports = require('@github/prettier-config')

package/product/README.md

@@ -1,37 +1,25 @@
-# Primer product
+---
+bundle: "product"
+generated: true
+---
 
-> Primer product is one of 3 meta-packages that belong to the Primer framework. Primer product contains packages that are used on GitHub product websites.
-
-This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm.
+# Primer CSS: `product` 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-product/index.scss";
+@import "@primer/css/product/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 primer in the [docs][docs].
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/product.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/product/index.scss

@@ -1,25 +1,27 @@
 /*!
- * Primer-product
- * http://primer.github.io
+ * @primer/css/product
+ * http://primer.style/css
  *
  * Released under MIT license. Copyright (c) 2019 GitHub Inc.
  */
 
-// Primer master file
-//
-// Imports all Primer files in their intended order for easy mass-inclusion.
-// Should you need specific files, you can easily use separate `@import`s.
-
 // Global requirements
-@import "../support/index.scss";
+@import '../support/index.scss';
 
 // Product specific css modules
-@import "../alerts/index.scss";
-@import "../avatars/index.scss";
-@import "../blankslate/index.scss";
-@import "../branch-name/index.scss";
-@import "../labels/index.scss";
-@import "../markdown/index.scss";
-@import "../popover/index.scss";
-@import "../progress/index.scss";
-@import "../subhead/index.scss";
+@import '../alerts/index.scss';
+@import '../autocomplete/index.scss';
+@import '../avatars/index.scss';
+@import '../blankslate/index.scss';
+@import '../branch-name/index.scss';
+@import '../dropdown/index.scss';
+@import '../header/index.scss';
+@import '../labels/index.scss';
+@import '../loaders/index.scss';
+@import '../markdown/index.scss';
+@import '../popover/index.scss';
+@import '../progress/index.scss';
+@import '../select-menu/index.scss';
+@import '../subhead/index.scss';
+@import '../timeline/index.scss';
+@import '../toasts/index.scss'

package/progress/README.md

@@ -1,37 +1,25 @@
-# Primer / Progress
+---
+bundle: "progress"
+generated: true
+---
 
-> Use Progress components to visualize task completion
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `progress` 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-progress/index.scss";
+@import "@primer/css/progress/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/progress](https://primer.style/css/components/progress).
-
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/progress.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/progress/index.scss

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

package/progress/progress.scss

@@ -4,8 +4,9 @@
   display: flex;
   height: 8px;
   overflow: hidden;
-  background-color: $gray-200;
+  background-color: var(--color-neutral-muted);
   border-radius: $border-radius;
+  outline: 1px solid transparent; // Support Firefox custom colors
 }
 
 .Progress--large {
@@ -15,3 +16,12 @@
 .Progress--small {
   height: 5px;
 }
+
+.Progress-item {
+  outline: 2px solid transparent; // Support Firefox custom colors
+}
+
+.Progress-item + .Progress-item {
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 2px;
+}

package/select-menu/README.md

@@ -0,0 +1,25 @@
+---
+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`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/select-menu/index.scss

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