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

package/navigation/tabnav.scss

@@ -2,41 +2,63 @@
 // stylelint-disable selector-max-type
 .tabnav {
   margin-top: 0;
-  margin-bottom: 15px;
-  border-bottom: 1px solid $gray-300;
-
-  .Counter {
-    margin-left: 5px;
-  }
+  margin-bottom: $spacer-3;
+  border-bottom: $border-width $border-style var(--color-border-default);
 }
 
 .tabnav-tabs {
+  display: flex;
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: -1px;
+  overflow: auto;
 }
 
 .tabnav-tab {
   display: inline-block;
-  padding: $spacer-2 12px;
+  flex-shrink: 0;
+  padding: $spacer-2 $spacer-3;
   font-size: $h5-size;
-  line-height: 20px;
-  color: $gray-600;
+  // stylelint-disable-next-line primer/typography
+  line-height: 23px;
+  color: var(--color-fg-muted);
   text-decoration: none;
   background-color: transparent;
-  border: 1px solid transparent;
+  border: $border-width $border-style transparent;
   border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
+  &.selected,
   &[aria-selected=true],
-  &.selected {
-    color: $text-gray-dark;
-    background-color: $bg-white;
-    border-color: $gray-300;
-    border-radius: 3px 3px 0 0;
+  &[aria-current]:not([aria-current=false]) {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default); // cover bottom border
+    border-color: var(--color-border-default);
+    border-radius: $border-radius $border-radius 0 0;
+
+    .octicon {
+      color: inherit;
+    }
   }
 
   &:hover,
   &:focus {
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
     text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+  &:active {
+    color: var(--color-fg-muted);
+  }
+
+  .octicon {
+    margin-right: $spacer-1;
+    color: var(--color-fg-muted);
+  }
+
+  .Counter {
+    margin-left: $spacer-1;
+    color: inherit;
   }
 }
 
@@ -47,23 +69,25 @@
 
 .tabnav-extra {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   padding-top: 10px;
+  // stylelint-disable-next-line primer/spacing
   margin-left: 10px;
   font-size: $font-size-small;
-  color: $gray-600;
+  color: var(--color-fg-muted);
 
   > .octicon {
+    // stylelint-disable-next-line primer/spacing
     margin-right: 2px;
   }
 }
 
 // When tabnav-extra are anchors
-// stylelint-disable selector-no-qualifying-type
+// stylelint-disable-next-line selector-no-qualifying-type
 a.tabnav-extra:hover {
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-decoration: none;
 }
-// stylelint-enable selector-no-qualifying-type
 
 // Tabnav buttons
 //
@@ -71,5 +95,5 @@ a.tabnav-extra:hover {
 // the buttons to be floated or inline-block.
 
 .tabnav-btn {
-  margin-left: 10px;
+  margin-left: $spacer-2;
 }

package/navigation/underline-nav.scss

@@ -2,7 +2,8 @@
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
-  border-bottom: $border;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
   justify-content: space-between;
 }
 
@@ -11,33 +12,39 @@
 }
 
 .UnderlineNav-item {
-  padding: $spacer-3 $spacer-2;
-  margin-right: $spacer-3;
+  padding: $spacer-2 $spacer-3;
   font-size: $body-font-size;
-  line-height: $lh-default;
-  color: $text-gray;
+  // stylelint-disable-next-line primer/typography
+  line-height: 30px;
+  color: var(--color-fg-default);
   text-align: center;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  // stylelint-disable-next-line primer/borders
   border-bottom: 2px $border-style transparent;
 
   &:hover,
   &:focus {
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
     text-decoration: none;
-    border-bottom-color: $gray-300;
-    transition: 0.2s ease;
-
-    .UnderlineNav-octicon {
-      color: $gray-500;
-    }
+    border-bottom-color: var(--color-neutral-muted);
+    outline: 1px dotted transparent; // Support Firefox custom colors
+    outline-offset: -1px;
+    transition: border-bottom-color 0.12s ease-out;
   }
 
-  &.selected {
+  &.selected,
+  &[role=tab][aria-selected=true],
+  &[aria-current]:not([aria-current=false]) {
     font-weight: $font-weight-bold;
-    color: $text-gray-dark;
-    border-bottom-color: $orange-600;
+    color: var(--color-fg-default);
+    border-bottom-color: var(--color-primer-border-active);
+    outline: 1px dotted transparent; // Support Firefox custom colors
+    outline-offset: -1px;
 
     .UnderlineNav-octicon {
-      color: $gray-500;
+      color: var(--color-fg-muted);
     }
   }
 }
@@ -45,11 +52,6 @@
 .UnderlineNav--right {
   justify-content: flex-end;
 
-  .UnderlineNav-item {
-    margin-right: 0;
-    margin-left: $spacer-3;
-  }
-
   .UnderlineNav-actions {
     flex: 1 1 auto;
   }
@@ -64,7 +66,19 @@
 }
 
 .UnderlineNav-octicon {
-  color: $gray-400;
+  margin-right: $spacer-1;
+  color: var(--color-fg-subtle);
+}
+
+.UnderlineNav .Counter {
+  margin-left: $spacer-1;
+  color: var(--color-fg-default);
+  background-color: var(--color-neutral-muted);
+
+  &--primary {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-neutral-emphasis);
+  }
 }
 
 .UnderlineNav-container {

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-202110100305",
+  "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"
   },
   "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.4.0",
+    "cssstats": "4.0.2",
+    "eslint": "8.1.0",
+    "eslint-plugin-github": "4.3.3",
+    "eslint-plugin-jest": "25.2.2",
+    "eslint-plugin-prettier": "4.0.0",
+    "filesize": "8.0.6",
+    "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.1",
+    "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';