@primer/css 21.0.7 → 21.0.8-rc.194c1ff5

package/migrations/v18.md

@@ -0,0 +1,80 @@
+Primer CSS `v18.0.0` replaces color modes V1 with V2. To help with the migration, please refer to the guide below.
+
+<Note>
+  The functional CSS color variables changed as well. Please refer to the <a href="https://primer.style/primitives/colors#deprecated-variables">deprecated variables section</a>.
+</Note>
+
+## Utility classes
+
+See [color utility classes](/utilities/colors) for a list of all the functional color utility classes.
+
+### Text
+
+| `v16`                   | `v18`                   |
+| ----------------------- | ----------------------- |
+| `.color-text-primary`   | `.color-fg-default`     |
+| `.color-text-secondary` | `.color-fg-muted`       |
+| `.color-text-tertiary`  | `.color-fg-muted`       |
+| `.color-text-link`      | `.color-fg-accent`      |
+| `.color-text-success`   | `.color-fg-success`     |
+| `.color-text-warning`   | `.color-fg-attention`   |
+| `.color-text-danger`    | `.color-fg-danger`      |
+| `.color-text-inverse`   | `.color-fg-on-emphasis` |
+| `.color-text-white`     | n/a*                    |
+
+* Often `.color-text-white` can be replaced with `.color-fg-on-emphasis`, but there are some cases where that's not ideal. If in doubt, please reach out to the `#primer` team.
+
+### Icon
+
+| `v16`                   | `v18`                 |
+| ----------------------- | --------------------- |
+| `.color-icon-primary`   | `.color-fg-default`   |
+| `.color-icon-secondary` | `.color-fg-muted`     |
+| `.color-icon-tertiary`  | `.color-fg-muted`     |
+| `.color-icon-info`      | `.color-fg-accent`    |
+| `.color-icon-danger`    | `.color-fg-danger`    |
+| `.color-icon-success`   | `.color-fg-success`   |
+| `.color-icon-warning`   | `.color-fg-attention` |
+
+### Border
+
+| `v16`                     | `v18`                              |
+| ------------------------- | ---------------------------------- |
+| `.color-border-primary`   | `.color-border-default`            |
+| `.color-border-secondary` | `.color-border-muted`              |
+| `.color-border-tertiary`  | `.color-border-default`            |
+| `.color-border-inverse`   | n/a                                |
+| `.color-border-info`      | `.color-border-accent-emphasis`    |
+| `.color-border-warning`   | `.color-border-attention-emphasis` |
+
+### Background
+
+| `v16`                       | `v18`                          |
+| --------------------------- | ------------------------------ |
+| `.color-bg-canvas`          | `.color-bg-default`            |
+| `.color-bg-canvas-inverse`  | `.color-bg-emphasis`           |
+| `.color-bg-canvas-inset`    | `.color-bg-inset`              |
+| `.color-bg-primary`         | `.color-bg-default`            |
+| `.color-bg-secondary`       | `.color-bg-subtle`             |
+| `.color-bg-tertiary`        | `.color-bg-subtle`             |
+| `.color-bg-info`            | `.color-bg-accent`             |
+| `.color-bg-info-inverse`    | `.color-bg-accent-emphasis`    |
+| `.color-bg-danger-inverse`  | `.color-bg-danger-emphasis`    |
+| `.color-bg-success-inverse` | `.color-bg-success-emphasis`   |
+| `.color-bg-warning`         | `.color-bg-attention`          |
+| `.color-bg-warning-inverse` | `.color-bg-attention-emphasis` |
+
+## Misc
+
+| `v16`           | `v18`               |
+| --------------- | ------------------- |
+| `.text-inherit` | `.color-fg-inherit` |
+
+A few more selectors and variables were removed. Please refer to [deprecations.json](https://github.com/primer/css/blob/main/src/deprecations.json) for a complete list.
+
+Note: The `<kbd>` styles also got removed from the markdown bundle. In case you import the `markdown` bundle **without** the `base` bundle, make sure to import the `<kbd>` styles as well:
+
+```diff
+@import "@primer/css/markdown/index.scss";
++ @import "@primer/css/base/kbd.scss";
+```

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@primer/css",
-  "version": "21.0.7",
+  "version": "21.0.8-rc.194c1ff5",
   "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"
+    "node": ">=16.0.0"
   },
   "license": "MIT",
   "style": "dist/primer.css",
@@ -29,52 +29,52 @@
     "dist": "script/dist.js",
     "dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
     "stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
-    "stylelint:fix": "yarn stylelint -- --fix",
+    "stylelint:fix": "npm run stylelint -- --fix",
     "stylelint:remove-disables": "script/stylelint-remove-disables.js 'src/**/*.scss'",
     "stylelint:add-disables": "script/stylelint-add-disables.js 'src/**/*.scss'",
     "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
-    "start": "yarn dev",
-    "dev": "cd docs && yarn && yarn develop",
-    "pretest": "yarn dist && script/pretest",
-    "test": "NODE_OPTIONS=--experimental-vm-modules yarn jest",
+    "start": "npm run dev",
+    "pretest": "npm run dist && script/pretest",
+    "test": "NODE_OPTIONS=--experimental-vm-modules npx jest",
     "release": "changeset publish",
-    "storybook": "cd docs && yarn && yarn storybook"
+    "storybook": "cd docs && npm i && npx storybook build",
+    "build:storybook": "cd docs && npm i && npm run build:storybook"
   },
   "dependencies": {
     "@primer/primitives": "^7.11.12",
-    "@primer/view-components": "^0.1.0"
+    "@primer/view-components": "^0.5.1"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "0.4.8",
-    "@changesets/cli": "2.26.1",
-    "@csstools/postcss-sass": "5.0.1",
-    "@github/prettier-config": "0.0.6",
+    "@changesets/changelog-github": "^0.4.8",
+    "@changesets/cli": "^2.26.1",
+    "@csstools/postcss-sass": "^5.0.1",
+    "@github/prettier-config": "^0.0.6",
     "@primer/stylelint-config": "^12.7.1",
-    "autoprefixer": "10.4.13",
-    "chokidar-cli": "3.0.0",
-    "cssstats": "4.0.5",
-    "eslint": "8.37.0",
-    "eslint-plugin-github": "4.6.0",
-    "eslint-plugin-jest": "27.2.1",
-    "eslint-plugin-prettier": "4.2.1",
-    "filesize": "10.0.5",
-    "front-matter": "4.0.2",
-    "fs-extra": "11.1.0",
-    "globby": "13.1.4",
-    "jest": "29.5.0",
-    "js-yaml": "4.1.0",
-    "postcss": "8.4.5",
-    "postcss-calc": "8.2.4",
-    "postcss-import": "15.0.0",
-    "postcss-load-config": "4.0.1",
-    "postcss-scss": "4.0.5",
-    "postcss-simple-vars": "7.0.1",
+    "autoprefixer": "^10.4.13",
+    "chokidar-cli": "^3.0.0",
+    "cssstats": "^4.0.5",
+    "eslint": "^8.37.0",
+    "eslint-plugin-github": "^4.6.0",
+    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "filesize": "^10.0.5",
+    "front-matter": "^4.0.2",
+    "fs-extra": "^11.1.0",
+    "globby": "^13.1.4",
+    "jest": "^29.5.0",
+    "js-yaml": "^4.1.0",
+    "postcss": "^8.4.5",
+    "postcss-calc": "^8.2.4",
     "postcss-custom-properties-fallback": "^1.0.2",
-    "prettier": "2.8.8",
-    "semver": "7.3.8",
-    "stylelint": "15.7.0",
-    "table": "6.8.1"
+    "postcss-import": "^15.0.0",
+    "postcss-load-config": "^4.0.1",
+    "postcss-scss": "^4.0.5",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^2.8.8",
+    "semver": "^7.3.8",
+    "stylelint": "^15.7.0",
+    "table": "^6.8.1"
   },
   "jest": {
     "testEnvironment": "node",