@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

package/navigation/tabnav.scss

@@ -3,52 +3,62 @@
 .tabnav {
   margin-top: 0;
   margin-bottom: $spacer-3;
-  border-bottom: $border;
+  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;
+  flex-shrink: 0;
   padding: $spacer-2 $spacer-3;
   font-size: $h5-size;
   // stylelint-disable-next-line primer/typography
   line-height: 23px;
-  color: $text-gray-dark;
+  color: var(--color-fg-muted);
   text-decoration: none;
   background-color: 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],
   &[aria-current]:not([aria-current=false]) {
-    background-color: $bg-white;
-    border-color: $border-gray;
+    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;
+    color: var(--color-fg-default);
     text-decoration: none;
+    transition-duration: 0.1s;
   }
 
   &:active {
-    color: $text-gray-light;
+    color: var(--color-fg-muted);
   }
 
   .octicon {
     margin-right: $spacer-1;
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    color: var(--color-fg-muted);
   }
 
   .Counter {
     margin-left: $spacer-1;
+    color: inherit;
   }
 }
 
@@ -64,7 +74,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 10px;
   font-size: $font-size-small;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 
   > .octicon {
     // stylelint-disable-next-line primer/spacing
@@ -75,7 +85,7 @@
 // When tabnav-extra are anchors
 // stylelint-disable-next-line selector-no-qualifying-type
 a.tabnav-extra:hover {
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-decoration: none;
 }
 

package/navigation/underline-nav.scss

@@ -3,7 +3,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-color;
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
   justify-content: space-between;
 }
 
@@ -16,36 +16,35 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 30px;
-  color: $text-black;
+  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 rgba($border-gray-dark, 0);
-  transition: border-bottom-color 0.36s ease-in;
+  border-bottom: 2px $border-style transparent;
 
   &:hover,
   &:focus {
+    color: var(--color-fg-default);
     text-decoration: none;
-    border-bottom-color: $border-gray-dark;
-    outline: 1px dotted transparent; // Support Firfox custom colors
+    border-bottom-color: var(--color-neutral-muted);
+    outline: 1px dotted transparent; // Support Firefox custom colors
     outline-offset: -1px;
-    transition-timing-function: ease-out;
-    transition-duration: 0.12s;
+    transition: border-bottom-color 0.12s ease-out;
   }
 
   &.selected,
   &[role=tab][aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
     font-weight: $font-weight-bold;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-color: #f9826c; // custom coral
-    outline: 1px dotted transparent; // Support Firfox custom colors
+    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: $text-gray;
+      color: var(--color-fg-muted);
     }
   }
 }
@@ -68,12 +67,18 @@
 
 .UnderlineNav-octicon {
   margin-right: $spacer-1;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-400;
+  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-1f49d76",
-  "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-20211010195643",
+  "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,73 +22,81 @@
     "github",
     "design-system"
   ],
-  "bin": {
-    "primer-migrate": "bin/primer-migrate"
-  },
   "scripts": {
-    "fresh": "rm -rf node_modules; npm install",
     "dist": "script/dist.js",
-    "lint": "npm-run-all -s stylelint eslint eslint-docs",
-    "stylelint": "stylelint --quiet src",
-    "eslint": "eslint script deprecations.js lib .storybook",
-    "eslint-docs": "eslint docs/{content,src,*.js}",
-    "postpublish": "script/postpublish",
+    "stylelint": "stylelint --quiet src/**/*.scss",
+    "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
-    "publish-storybook": "script/publish-storybook",
-    "start": "npm run dev",
-    "dev": "cd docs && npm install && npm run develop",
-    "start-storybook": "start-storybook -p 8001",
-    "build-storybook": "build-storybook -o .storybuild",
-    "test": "npm-run-all -s test-urls test-migrate",
-    "test-urls": "script/test-doc-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/octicons": "^10.0.0"
+    "@primer/primitives": "^6.1.0"
   },
   "devDependencies": {
-    "@octokit/rest": "^16.34.0",
-    "@storybook/addon-viewport": "5.3.18",
-    "@storybook/react": "5.3.18",
-    "autoprefixer": "9.4.7",
-    "code-blocks": "^1.1.0",
-    "colorette": "^1.1.0",
-    "css-loader": "1.0.0",
-    "cssstats": "3.3.0",
-    "details-dialog-element": "^1.4.0",
-    "eslint": "4.19.1",
-    "eslint-plugin-github": "1.0.0",
-    "filesize": "4.1.2",
-    "fs-extra": "^4.0.2",
-    "gh-pages": "^1.0.0",
-    "globby": "^6.1.0",
-    "klaw": "3.0.0",
-    "minimist": "1.2.3",
-    "node-fetch": "2.4.0",
-    "npm-run-all": "4.1.5",
-    "postcss": "7.0.14",
-    "postcss-import": "^12.0.1",
-    "postcss-load-config": "2.0.0",
-    "postcss-loader": "^2.0.6",
-    "postcss-node-sass": "2.1.8",
-    "postcss-scss": "2.0.0",
-    "postcss-value-parser": "^4.0.2",
-    "prop-types": "^15.6.2",
-    "semantic-release": "^15.13.27",
-    "semver": "5.7.1",
-    "stream-buffers": "^3.0.2",
-    "style-loader": "^0.18.2",
-    "styled-components": "4.1.2",
-    "stylelint": "^10.1.0",
-    "stylelint-config-primer": "^9.0.0",
-    "stylelint-disable": "^0.1.5",
-    "stylelint-only": "^1.0.1",
-    "stylelint-scss": "^3.12.0",
-    "table": "5.2.3",
-    "typographic-base": "^1.0.4",
-    "unified": "^7.1.0",
-    "unist-util-select": "^2.0.2",
-    "unist-util-stringify-position": "^2.0.1",
-    "unist-util-visit": "^1.4.1"
+    "@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.2.0",
+    "eslint-plugin-github": "4.3.3",
+    "eslint-plugin-jest": "25.2.3",
+    "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.3"
+  },
+  "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

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [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

@@ -11,7 +11,7 @@
     font-style: normal;
     // stylelint-disable-next-line primer/typography
     line-height: 20px;
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -24,27 +24,27 @@
     &:hover,
     &:focus {
       text-decoration: none;
-      border-color: $border-color;
+      border-color: var(--color-border-default);
       outline: 0;
       transition-duration: 0.1s;
     }
 
     &:active {
-      border-color: $border-gray-light;
+      border-color: var(--color-border-muted);
       transition: none;
     }
   }
 
   .previous_page,
   .next_page {
-    color: $text-blue;
+    color: var(--color-accent-fg);
   }
 
   .current,
   .current:hover,
   [aria-current]:not([aria-current=false]) {
-    color: $text-white;
-    background-color: $bg-blue;
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
     border-color: transparent;
   }
 
@@ -54,7 +54,7 @@
   .gap:hover,
   .disabled:hover,
   [aria-disabled=true]:hover {
-    color: $text-gray-light;
+    color: var(--color-primer-fg-disabled);
     cursor: default;
     border-color: transparent;
   }
@@ -67,7 +67,7 @@
       width: 16px;
       height: 16px;
       vertical-align: text-bottom;
-      content: "";
+      content: '';
       // stylelint-disable-next-line primer/colors
       background-color: currentColor;
     }

package/popover/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.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,7 +15,7 @@
     position: absolute;
     left: 50%;
     display: inline-block;
-    content: "";
+    content: '';
   }
 
   &::before {
@@ -24,7 +24,7 @@
     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 {
@@ -32,8 +32,12 @@
     margin-left: -$spacer-2;
     // stylelint-disable-next-line primer/borders
     border: 7px $border-style transparent;
-    // stylelint-disable-next-line primer/borders
-    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);
   }
 }
 
@@ -49,13 +53,12 @@
 
   &::before {
     bottom: -$spacer-3;
-    border-top-color: $border-black-fade;
+    border-top-color: var(--color-border-default);
   }
 
   &::after {
     bottom: -14px;
-    // stylelint-disable-next-line primer/borders
-    border-top-color: $bg-white;
+    border-top-color: var(--color-canvas-overlay);
   }
 }
 
@@ -128,13 +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;
-    // stylelint-disable-next-line primer/borders
-    border-left-color: $bg-white;
+    border-left-color: var(--color-canvas-overlay);
   }
 }
 
@@ -144,13 +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;
-    // stylelint-disable-next-line primer/borders
-    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

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/product/index.scss

@@ -6,22 +6,22 @@
  */
 
 // Global requirements
-@import "../support/index.scss";
+@import '../support/index.scss';
 
 // Product specific css modules
-@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"
+@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

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.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,10 +4,9 @@
   display: flex;
   height: 8px;
   overflow: hidden;
-  // stylelint-disable-next-line primer/colors
-  background-color: $gray-200;
+  background-color: var(--color-neutral-muted);
   border-radius: $border-radius;
-  outline: 1px solid transparent; // Support Firfox custom colors
+  outline: 1px solid transparent; // Support Firefox custom colors
 }
 
 .Progress--large {
@@ -19,7 +18,7 @@
 }
 
 .Progress-item {
-  outline: 2px solid transparent; // Support Firfox custom colors
+  outline: 2px solid transparent; // Support Firefox custom colors
 }
 
 .Progress-item + .Progress-item {

package/select-menu/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[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

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