Merge branch 'main' into selection-root-fix

.changeset/small-nails-matter.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add utility typography CSS vars to main bundle

.github/workflows/release_canary.yml

@@ -4,7 +4,6 @@ on:
     branches-ignore:
       - 'main'
       - 'changeset-release/**'
-      - 'dependabot/**'
     # Don't release canary when these paths change
     # It's not necessary because we don't ship them and it creates noise
     paths-ignore:

docs/.storybook/preview.js

@@ -4,15 +4,15 @@ import '../../src/base/index.scss'
 import '../src/stories/helpers/storybook-styles.scss'
 // temporary import until primitives moves to core bundle
 // importing the index from /css didn't play nice with Storybook
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css'
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css'
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css'
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css'
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css'
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css'
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css'
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css'
-import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css'
+import '@primer/primitives/tokens-next-private/css/base/size/size.css';
+import '@primer/primitives/tokens-next-private/css/base/typography/typography.css';
+import '@primer/primitives/tokens-next-private/css/functional/size/border.css';
+import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints.css';
+import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse.css';
+import '@primer/primitives/tokens-next-private/css/functional/size/size-fine.css';
+import '@primer/primitives/tokens-next-private/css/functional/size/size.css';
+import '@primer/primitives/tokens-next-private/css/functional/size/viewport.css';
+import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css';
 import renderToHTML from '../src/stories/helpers/code-snippet-html-helper'
 
 const customViewports = {

docs/package.json

@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@babel/preset-react": "^7.16.7",
-    "@koddsson/postcss-sass": "5.0.1",
+    "@csstools/postcss-sass": "5.0.1",
     "@primer/components": "32.1.0",
     "@primer/gatsby-theme-doctocat": "4.4.0",
     "@primer/octicons": "17.0.0",
     "@primer/octicons-react": "17.0.0",
-    "@primer/primitives": "7.8.3",
+    "@primer/primitives": "7.11.7",
     "@primer/view-components": "^0.0.114",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.4.2",

package.json

@@ -48,8 +48,8 @@
   "devDependencies": {
     "@changesets/changelog-github": "0.4.8",
     "@changesets/cli": "2.26.1",
+    "@csstools/postcss-sass": "5.0.1",
     "@github/prettier-config": "0.0.6",
-    "@koddsson/postcss-sass": "5.0.1",
     "@primer/stylelint-config": "^12.4.0",
     "autoprefixer": "10.4.13",
     "chokidar-cli": "3.0.0",
@@ -61,16 +61,16 @@
     "filesize": "10.0.5",
     "front-matter": "4.0.2",
     "fs-extra": "11.1.0",
-    "globby": "13.1.3",
+    "globby": "13.1.4",
     "jest": "29.5.0",
     "js-yaml": "4.1.0",
-    "postcss": "8.4.21",
+    "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",
-    "prettier": "2.8.7",
+    "prettier": "2.8.8",
     "semver": "7.3.8",
     "stylelint": "14.15.0",
     "table": "6.8.1"

postcss.config.cjs

@@ -1,5 +1,5 @@
 const autoprefixer = require('autoprefixer')
-const sass = require('@koddsson/postcss-sass')
+const sass = require('@csstools/postcss-sass')
 const scss = require('postcss-scss')
 const scssImport = require('postcss-import')
 const {join} = require('path')

src/support/index.scss

@@ -2,6 +2,7 @@
 @import './variables/typography.scss';
 @import './variables/layout.scss';
 @import './variables/misc.scss';
+@import '../primitives/temp-typography-tokens.scss';
 
 // mixins
 @import './mixins/color-modes.scss';