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

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@primer/css",
-  "version": "0.0.0-1ea75fe",
-  "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
+  "version": "0.0.0-202110118627",
+  "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
+  "engines": {
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+  },
   "license": "MIT",
   "style": "dist/primer.css",
   "sass": "index.scss",
+  "type": "module",
   "main": "dist/primer.js",
   "repository": "https://github.com/primer/css",
   "bugs": {
@@ -18,114 +22,81 @@
     "github",
     "design-system"
   ],
-  "bin": {
-    "primer-migrate": "bin/primer-migrate"
-  },
   "scripts": {
-    "fresh": "rm -rf node_modules; npm install",
-    "dist": "script/dist",
-    "check-links": "script/check-links http://localhost:3000/css -v",
-    "lint": "npm-run-all -s lint-css lint-js",
-    "lint-css": "stylelint --quiet --syntax scss src/**/*.scss",
-    "lint-js": "eslint lib docs .storybook",
-    "now-build": "npm run dist && next build",
-    "now-start": "next start",
-    "now-test": "npm-run-all -s now-build now-start",
-    "postpublish": "script/postpublish",
+    "dist": "script/dist.js",
+    "stylelint": "stylelint --quiet src/**/*.scss",
+    "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
-    "publish-storybook": "script/publish-storybook",
-    "start": "next dev",
-    "dev": "next dev",
-    "start-storybook": "start-storybook -p 8001",
-    "build-storybook": "build-storybook -o .storybuild",
-    "test": "npm-run-all -s test-urls test-migrate",
-    "test-urls": "node docs-test/urls.js",
-    "test-migrate": "script/test-migrate"
+    "start": "yarn dev",
+    "dev": "cd docs && yarn && yarn develop",
+    "pretest": "yarn dist && script/pretest",
+    "test": "NODE_OPTIONS=--experimental-vm-modules yarn jest",
+    "release": "changeset publish",
+    "storybook": "cd docs && yarn && yarn storybook"
+  },
+  "dependencies": {
+    "@primer/primitives": "6.1.0-rc.9f1f534"
   },
   "devDependencies": {
-    "@githubprimer/octicons-react": "^8.1.3",
-    "@mdx-js/mdx": "^0.16.6",
-    "@mdx-js/tag": "0.15.0",
-    "@primer/blueprints": "4.0.1",
-    "@primer/components": "12.0.1",
-    "@primer/next-pages": "0.0.3",
-    "@storybook/addon-viewport": "5.0.0",
-    "@storybook/react": "5.0.10",
-    "@svgr/webpack": "2.4.1",
-    "@zeit/next-css": "^1.0.1",
-    "@zeit/next-sass": "^1.0.1",
-    "action-status": "0.1.1",
-    "autoprefixer": "9.4.7",
-    "broken-link-checker": "^0.7.8",
-    "char-spinner": "^1.0.1",
-    "chroma-js": "^1.4.1",
-    "clipboard-copy-element": "^0.5.0",
-    "code-blocks": "^1.1.0",
-    "colorette": "^1.0.7",
-    "css-loader": "^0.28.4",
-    "cssstats": "3.3.0",
-    "details-dialog-element": "^1.4.0",
-    "eslint": "4.19.1",
-    "eslint-plugin-github": "1.0.0",
-    "execa": "^0.10.0",
-    "filesize": "4.1.2",
-    "fs-extra": "^4.0.2",
-    "fx": "11.0.1",
-    "gh-pages": "^1.0.0",
-    "globby": "^6.1.0",
-    "gray-matter": "^4.0.1",
-    "hast-util-to-html": "^5.0.0",
-    "hast-util-to-string": "^1.0.1",
-    "html-2-jsx": "0.5.1-dev",
-    "html-to-react": "^1.2.11",
-    "klaw": "3.0.0",
-    "loader-utils": "^1.1.0",
-    "mdx-constant": "^0.1.0",
-    "metalsmith": "^2.3.0",
-    "metalsmith-filter": "^1.0.2",
-    "metalsmith-matters": "^1.2.0",
-    "metalsmith-watch": "^1.0.3",
-    "minimist": "1.2.0",
-    "next": "7.0.2",
-    "node-fetch": "2.4.0",
-    "now": "^12.1.8",
-    "npm-run-all": "4.1.5",
-    "postcss": "7.0.14",
-    "postcss-load-config": "2.0.0",
-    "postcss-loader": "^2.0.6",
-    "postcss-node-sass": "2.1.8",
-    "postcss-scss": "2.0.0",
-    "primer-colors": "^1.0.1",
-    "prism-github": "^1.1.0",
-    "prop-types": "^15.6.2",
-    "raw-loader": "^0.5.1",
-    "react": "16.8.1",
-    "react-bodymovin": "2.0.0",
-    "react-dom": "16.8.1",
-    "react-live": "1.12.0",
-    "react-measure": "^2.2.2",
-    "refractor": "^2.6.2",
-    "remark": "^8.0.0",
-    "remark-emoji": "^2.0.2",
-    "remark-images": "^0.16.1",
-    "remark-parse": "^6.0.3",
-    "remark-textr": "^3.0.3",
-    "remark-toc": "^5.1.1",
-    "sass-loader": "^6.0.6",
-    "semver": "^5.3.0",
-    "style-loader": "^0.18.2",
-    "styled-components": "4.1.2",
-    "stylelint": "9.10.1",
-    "stylelint-config-primer": "7.0.0",
-    "table": "5.2.3",
-    "tar": "4.4.8",
-    "title-case": "^2.1.1",
-    "tree-model": "^1.0.7",
-    "typographic-base": "^1.0.4",
-    "unified": "^7.1.0",
-    "unist-util-select": "^2.0.0",
-    "unist-util-stringify-position": "^2.0.0",
-    "unist-util-visit": "^1.4.0",
-    "webpack": "4.20.2"
+    "@changesets/changelog-github": "0.4.1",
+    "@changesets/cli": "2.17.0",
+    "@github/prettier-config": "0.0.4",
+    "@koddsson/postcss-sass": "5.0.0",
+    "@primer/stylelint-config": "12.1.0",
+    "autoprefixer": "10.3.7",
+    "cssstats": "4.0.2",
+    "eslint": "7.32.0",
+    "eslint-plugin-github": "4.3.2",
+    "eslint-plugin-jest": "25.2.2",
+    "eslint-plugin-prettier": "4.0.0",
+    "filesize": "8.0.3",
+    "front-matter": "4.0.2",
+    "fs-extra": "10.0.0",
+    "globby": "12.0.2",
+    "jest": "27.3.1",
+    "js-yaml": "4.1.0",
+    "postcss": "8.3.11",
+    "postcss-calc": "8.0.0",
+    "postcss-import": "14.0.2",
+    "postcss-load-config": "3.1.0",
+    "postcss-scss": "4.0.2",
+    "postcss-simple-vars": "6.0.3",
+    "prettier": "2.4.1",
+    "semver": "7.3.5",
+    "stylelint": "14.0.0",
+    "stylelint-scss": "4.0.0",
+    "table": "6.7.2"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/__tests__/utils/",
+      "/__tests__/docs.test.js"
+    ],
+    "transform": {}
+  },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 4 Firefox versions",
+    "last 3 Safari versions",
+    "not Safari 12",
+    "last 4 Edge versions",
+    "not Edge <= 18",
+    "Firefox ESR"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "plugin:github/internal",
+      "plugin:github/recommended"
+    ],
+    "env": {
+      "es6": true,
+      "node": true
+    },
+    "parserOptions": {
+      "ecmaVersion": 2017,
+      "requireConfigFile": false
+    }
   }
 }

package/pagination/README.md

@@ -1,27 +1,25 @@
-# Primer Pagination
+---
+bundle: "pagination"
+generated: true
+---
 
-> Pagination component for applying button styles to a connected set of links that go to related pages
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `pagination` 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-pagination/index.scss";
+@import "@primer/css/pagination/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:
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/pagination.css`.
 
-```
-$ npm run build
-```
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
-## Documentation
 
-Find further documentation at [primer.style/css/components/pagination](https://primer.style/css/components/pagination).
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/pagination/index.scss

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

package/pagination/pagination.scss

@@ -1,71 +1,95 @@
 // Needs refactoring
 // stylelint-disable selector-max-type
 .pagination {
-  @include clearfix;
-
   a,
   span,
   em {
-    position: relative;
-    float: left;
-    padding: 7px 12px;
-    margin-left: -1px;
-    font-size: 13px;
+    display: inline-block;
+    min-width: 32px;
+    // stylelint-disable-next-line primer/spacing
+    padding: 5px 10px;
     font-style: normal;
-    font-weight: $font-weight-bold;
-    color: $text-blue;
+    // stylelint-disable-next-line primer/typography
+    line-height: 20px;
+    color: var(--color-fg-default);
+    text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     cursor: pointer;
     user-select: none;
-    background: $bg-white; // Reset default gradient backgrounds and colors
-    border: $border-width $border-style $border-gray;
-
-    &:first-child {
-      margin-left: 0;
-      border-top-left-radius: $border-radius;
-      border-bottom-left-radius: $border-radius;
-    }
+    border: $border-width $border-style transparent;
+    border-radius: $border-radius;
+    transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
-    &:last-child {
-      border-top-right-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-    }
-
-    // Bring any button into forefront for proper borders given negative margin below
     &:hover,
     &:focus {
-      z-index: 2;
       text-decoration: none;
-      background-color: darken($gray-100, 2%);
-      border-color: $border-gray;
+      border-color: var(--color-border-default);
+      outline: 0;
+      transition-duration: 0.1s;
+    }
+
+    &:active {
+      border-color: var(--color-border-muted);
+      transition: none;
     }
   }
 
-  .selected { z-index: 3; }
+  .previous_page,
+  .next_page {
+    color: var(--color-accent-fg);
+  }
 
   .current,
-  .current:hover {
-    z-index: 3;
-    color: $text-white;
-    background-color: $bg-blue;
-    border-color: $border-blue;
+  .current:hover,
+  [aria-current]:not([aria-current=false]) {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
+    border-color: transparent;
   }
 
   .gap,
   .disabled,
+  [aria-disabled=true],
   .gap:hover,
-  .disabled:hover {
-    color: $gray-300;
+  .disabled:hover,
+  [aria-disabled=true]:hover {
+    color: var(--color-primer-fg-disabled);
     cursor: default;
-    background-color: $bg-gray-light;
+    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: '';
+      // stylelint-disable-next-line primer/colors
+      background-color: currentColor;
+    }
+
+    // chevron-left
+    .previous_page::before {
+      margin-right: $spacer-1;
+      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: $spacer-1;
+      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);
+    }
   }
 }
 
 // Unified centered pagination across the site
 .paginate-container {
-  margin-top: 20px;
-  margin-bottom: 15px;
+  margin-top: $spacer-3;
+  margin-bottom: $spacer-3;
   text-align: center;
 
   .pagination {

package/popover/README.md

@@ -1,38 +1,25 @@
-# Primer Popover
+---
+bundle: "popover"
+generated: true
+---
 
-> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `popover` 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-popover/index.scss";
+@import "@primer/css/popover/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/popover](https://primer.style/css/components/popover).
-
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/popover.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/popover/index.scss

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

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'